@taboo-avalanche/andesite-compiler 1.0.0

package/dist/compile.js

@@ -0,0 +1,2076 @@
+// src/compile.ts
+import * as fs2 from "fs";
+import * as path2 from "path";
+import { createHash } from "crypto";
+import archiver from "archiver";
+
+// src/rasterize/puppeteer.ts
+import puppeteer from "puppeteer";
+import * as fs from "fs";
+import * as path from "path";
+import {
+  DEFAULT_PROGRESS_STEPS,
+  HUD_ANCHORS
+} from "@taboo-avalanche/andesite";
+var RASTER_SCALE = 4;
+var PUPPETEER_LAUNCH_ARGS = [
+  `--force-device-scale-factor=${RASTER_SCALE}`,
+  "--no-sandbox",
+  "--disable-setuid-sandbox",
+  "--disable-dev-shm-usage"
+];
+async function launchRasterBrowser() {
+  return puppeteer.launch({ headless: true, args: PUPPETEER_LAUNCH_ARGS });
+}
+async function rasterizeAllInBrowser(browser, pageUrl, outputDir, options) {
+  const page = await browser.newPage();
+  const verbose = options?.verbose === true;
+  try {
+    if (verbose) {
+      page.on("console", (msg) => console.log("[browser console]", msg.type(), msg.text()));
+      page.on("pageerror", (err) => console.log("[browser error]", err.message));
+      page.on("requestfailed", (req) => console.log("[request failed]", req.url(), req.failure()?.errorText));
+    }
+    await page.setViewport({ width: 176, height: 222, deviceScaleFactor: RASTER_SCALE });
+    await page.goto(pageUrl, { waitUntil: "domcontentloaded" });
+    await page.evaluate("globalThis.__name = (fn) => fn");
+    await page.waitForFunction(
+      () => document.querySelector("[data-andesite-canvas]") !== null,
+      { timeout: 15e3 }
+    );
+    const canvasSize = await page.$eval("[data-andesite-canvas]", (node) => {
+      const rect = node.getBoundingClientRect();
+      return {
+        width: rect.width,
+        height: rect.height
+      };
+    });
+    await page.setViewport({
+      width: Math.max(176, Math.ceil(canvasSize.width)),
+      height: Math.max(222, Math.ceil(canvasSize.height)),
+      deviceScaleFactor: RASTER_SCALE
+    });
+    const kind = await page.$eval("[data-andesite-canvas]", (node) => {
+      return node.getAttribute("data-andesite-page-kind") === "hud" ? "hud" : "menu";
+    });
+    const pageBox = await page.$eval("[data-andesite-content-root]", (node) => {
+      const rect = node.getBoundingClientRect();
+      return { width: Math.round(rect.width), height: Math.round(rect.height) };
+    });
+    const layout = await page.evaluate(() => {
+      const root = document.querySelector("[data-andesite-content-root]");
+      const collapsed = [];
+      const outOfBounds = [];
+      const rootRect = root ? root.getBoundingClientRect() : null;
+      const tol = 1;
+      for (const el of Array.from(document.querySelectorAll("[data-andesite-id]"))) {
+        if (el.closest("[data-andesite-viewstack]")) continue;
+        if (el.getAttribute("data-andesite-default-visible") === "false") {
+          continue;
+        }
+        const r = el.getBoundingClientRect();
+        const id = el.getAttribute("data-andesite-id") ?? "?";
+        if (r.width <= tol || r.height <= tol) {
+          collapsed.push(`${id} (\u5BBD=${Math.round(r.width)}, \u9AD8=${Math.round(r.height)})`);
+          continue;
+        }
+        if (rootRect) {
+          const x = r.left - rootRect.left;
+          const y = r.top - rootRect.top;
+          if (x < -tol || y < -tol || x + r.width > rootRect.width + tol || y + r.height > rootRect.height + tol) {
+            outOfBounds.push(`${id} (x=${Math.round(x)}, y=${Math.round(y)}, ${Math.round(r.width)}\xD7${Math.round(r.height)}, \u9875\u9762 ${Math.round(rootRect.width)}\xD7${Math.round(rootRect.height)})`);
+          }
+        }
+      }
+      return { collapsed, outOfBounds };
+    });
+    if (layout.collapsed.length && verbose) {
+      console.warn(`[andesite-compiler] \u5E03\u5C40\u584C\u9677\u8B66\u544A: ${layout.collapsed.slice(0, 8).join("\uFF1B")}${layout.collapsed.length > 8 ? ` \u7B49 ${layout.collapsed.length} \u4E2A` : ""}`);
+    }
+    if (kind !== "hud" && layout.outOfBounds.length && verbose) {
+      console.warn(`[andesite-compiler] \u63A7\u4EF6\u51FA\u5C4F\u8B66\u544A: ${layout.outOfBounds.slice(0, 8).join("\uFF1B")}${layout.outOfBounds.length > 8 ? ` \u7B49 ${layout.outOfBounds.length} \u4E2A` : ""}`);
+    }
+    const mounts = kind === "hud" ? await collectHudMounts(page) : [];
+    const viewStacks = [];
+    for (const stack of await page.$$("[data-andesite-viewstack]")) {
+      const info = await stack.evaluate((node) => ({ id: node.getAttribute("data-andesite-id"), defaultView: node.getAttribute("data-andesite-default-view") }));
+      const views = [];
+      for (const el of await stack.$$(":scope > [data-andesite-view]")) {
+        const box = await measureAndesiteBox(el);
+        const info2 = await el.evaluate((node) => ({
+          id: node.getAttribute("data-andesite-id"),
+          name: node.getAttribute("data-andesite-view-name"),
+          parentView: node.parentElement?.closest("[data-andesite-view]")?.getAttribute("data-andesite-id") ?? void 0,
+          controls: Array.from(node.querySelectorAll("[data-andesite-id]")).filter((child) => child.closest("[data-andesite-view]") === node && !child.hasAttribute("data-andesite-viewstack")).map((child) => child.getAttribute("data-andesite-id"))
+        }));
+        if (box.width <= 0 || box.height <= 0) throw new Error(`Collapsed AView: ${info2.id}`);
+        const layer = optionalNumber(await stack.evaluate((node) => node.getAttribute("data-andesite-layer")));
+        views.push({ ...info2, ...box, layer, mountId: await collectHudMountId(el), controls: [info2.id + "/__background", ...info2.controls] });
+      }
+      viewStacks.push({ ...info, views });
+    }
+    const labels = await collectLabels(page);
+    const inputs = await rasterizeTextInputs(page, outputDir);
+    const backgroundPanels = kind === "hud" ? await rasterizeHudStaticBackgrounds(page, outputDir) : await rasterizeStaticBackground(page, outputDir);
+    const panels = await rasterizePanels(page, outputDir);
+    const buttons = await rasterizeButtons(page, outputDir);
+    const progresses = await rasterizeProgresses(page, outputDir);
+    const sprites = await rasterizeSprites(page, outputDir);
+    const scrollViews = await rasterizeScrollViews(page, outputDir);
+    const slots = kind === "hud" ? [] : await collectSlots(page);
+    const exported = [...panels, ...buttons, ...labels, ...inputs, ...progresses, ...sprites, ...scrollViews, ...slots];
+    const exportedIds = new Set(exported.map((control) => control.id));
+    for (const stack of viewStacks) for (const view of stack.views) {
+      view.controls = view.controls.filter((id) => exportedIds.has(id));
+      for (const control of exported.filter((control2) => view.controls.includes(control2.id))) {
+        if (control.width <= 0 || control.height <= 0) throw new Error(`Collapsed AView control: ${control.id}`);
+        if (kind !== "hud" && (control.x < -1 || control.y < -1 || control.x + control.width > pageBox.width + 1 || control.y + control.height > pageBox.height + 1)) {
+          throw new Error(`AView control outside page: ${control.id}`);
+        }
+      }
+    }
+    return { kind, width: pageBox.width, height: pageBox.height, mounts, viewStacks, panels: [...backgroundPanels, ...panels], buttons, labels, inputs, slots, progresses, sprites, scrollViews };
+  } finally {
+    await page.close();
+  }
+}
+async function rasterizeAll(pageUrl, outputDir, options) {
+  const browser = await launchRasterBrowser();
+  try {
+    return await rasterizeAllInBrowser(browser, pageUrl, outputDir, options);
+  } finally {
+    await browser.close();
+  }
+}
+async function collectHudMounts(page) {
+  const elements = await page.$$("[data-andesite-hud-mount]");
+  const results = [];
+  for (const el of elements) {
+    const mount = await el.evaluate((node) => {
+      const target = node;
+      return {
+        id: target.getAttribute("data-andesite-id") ?? "",
+        x: target.getAttribute("data-andesite-x") ?? "0",
+        y: target.getAttribute("data-andesite-y") ?? "0",
+        anchor: target.getAttribute("data-andesite-anchor") ?? "top-left",
+        offsetX: target.getAttribute("data-andesite-offset-x"),
+        offsetY: target.getAttribute("data-andesite-offset-y"),
+        scale: target.getAttribute("data-andesite-scale"),
+        layer: target.getAttribute("data-andesite-layer"),
+        visibleByDefault: target.getAttribute("data-andesite-visible-by-default")
+      };
+    });
+    const offsetX = optionalNumber(mount.offsetX);
+    const offsetY = optionalNumber(mount.offsetY);
+    const scale = optionalNumber(mount.scale);
+    const layer = optionalNumber(mount.layer);
+    const visibleByDefault = mount.visibleByDefault == null || mount.visibleByDefault === "" ? void 0 : mount.visibleByDefault === "true" || mount.visibleByDefault === "1";
+    results.push({
+      id: mount.id,
+      x: clampPercent(Number(mount.x)),
+      y: clampPercent(Number(mount.y)),
+      anchor: normalizeHudAnchor(mount.anchor),
+      ...offsetX == null ? {} : { offsetX },
+      ...offsetY == null ? {} : { offsetY },
+      ...scale == null ? {} : { scale },
+      ...layer == null ? {} : { layer },
+      ...visibleByDefault == null ? {} : { visibleByDefault }
+    });
+  }
+  return results;
+}
+function normalizeHudAnchor(value) {
+  return HUD_ANCHORS.includes(value) ? value : "top-left";
+}
+function optionalNumber(value) {
+  if (value == null || value === "") {
+    return void 0;
+  }
+  const number = Number(value);
+  return Number.isFinite(number) ? number : void 0;
+}
+async function collectButtonClickable(target) {
+  if (!target) {
+    return true;
+  }
+  return await target.evaluate((node) => node.getAttribute("data-andesite-clickable") !== "false");
+}
+function clampPercent(value) {
+  if (!Number.isFinite(value)) {
+    return 0;
+  }
+  return Math.max(0, Math.min(100, value));
+}
+async function rasterizeStaticBackground(page, outputDir) {
+  const root = await page.$("[data-andesite-content-root]");
+  if (!root) {
+    return [];
+  }
+  const box = await measureAndesiteBox(root);
+  if (box.width <= 0 || box.height <= 0) {
+    return [];
+  }
+  const texturePath = "textures/__page_background.png";
+  const screenshot = await withHiddenAndesiteControls(page, async () => {
+    return await root.screenshot({ type: "png", omitBackground: true });
+  });
+  const outputPath = path.join(outputDir, texturePath);
+  fs.mkdirSync(path.dirname(outputPath), { recursive: true });
+  fs.writeFileSync(outputPath, screenshot);
+  return [{ id: "__page_background", texturePath, x: box.x, y: box.y, width: box.width, height: box.height, png: screenshot }];
+}
+async function rasterizeHudStaticBackgrounds(page, outputDir) {
+  const elements = await page.$$("[data-andesite-hud-mount]");
+  const results = [];
+  for (const el of elements) {
+    const mountId = await el.evaluate((node) => node.getAttribute("data-andesite-id") ?? "");
+    if (mountId === "") {
+      continue;
+    }
+    const rect = await el.evaluate((node) => {
+      const bounds = node.getBoundingClientRect();
+      return {
+        width: Math.round(bounds.width),
+        height: Math.round(bounds.height)
+      };
+    });
+    if (rect.width <= 0 || rect.height <= 0) {
+      continue;
+    }
+    const safeMountId = mountId.replace(/[:\/.-]/g, "_") || "default";
+    const id = `__hud_mount_${safeMountId}_background`;
+    const texturePath = `textures/${id}.png`;
+    const screenshot = await withIsolatedCapture(page, el, async () => {
+      return await el.screenshot({ type: "png", omitBackground: true });
+    });
+    const outputPath = path.join(outputDir, texturePath);
+    fs.mkdirSync(path.dirname(outputPath), { recursive: true });
+    fs.writeFileSync(outputPath, screenshot);
+    results.push({ id, mountId, texturePath, x: 0, y: 0, width: rect.width, height: rect.height, png: screenshot });
+  }
+  return results;
+}
+async function isInsideScrollView(target) {
+  if (!target) {
+    return false;
+  }
+  return await target.evaluate((node) => node.closest('[data-andesite-type="scroll-view"]') != null);
+}
+async function isInsideRepeater(target) {
+  if (!target) {
+    return false;
+  }
+  return await target.evaluate((node) => node.closest('[data-andesite-type="repeater"]') != null);
+}
+async function measureBoxRelativeToScrollChild(target, scrollEl) {
+  return await measureBoxRelativeToAncestor(target, scrollEl);
+}
+async function measureBoxRelativeToAncestor(target, ancestor) {
+  if (!target || !ancestor) {
+    return { x: 0, y: 0, width: 0, height: 0 };
+  }
+  return await target.evaluate((node, ancestorNode) => {
+    const ancestorRect = ancestorNode.getBoundingClientRect();
+    const rect = node.getBoundingClientRect();
+    return {
+      x: Math.round(rect.left - ancestorRect.left),
+      y: Math.round(rect.top - ancestorRect.top),
+      width: Math.round(rect.width),
+      height: Math.round(rect.height)
+    };
+  }, ancestor);
+}
+async function rasterizeScrollViews(page, outputDir) {
+  const elements = await page.$$('[data-andesite-type="scroll-view"]');
+  const results = [];
+  for (const scrollEl of elements) {
+    if (!await isCollectableAndesiteElement(scrollEl)) {
+      continue;
+    }
+    const id = await scrollEl.evaluate((node) => node.getAttribute("data-andesite-id") ?? "");
+    const mountId = await collectHudMountId(scrollEl);
+    const box = await measureAndesiteBox(scrollEl);
+    const defaultVisible = await scrollEl.evaluate(
+      (node) => node.getAttribute("data-andesite-default-visible") !== "false"
+    );
+    const scrollPanels = [];
+    const panelEls = await scrollEl.$$('[data-andesite-type="panel"]');
+    for (const panelEl of panelEls) {
+      if (!await isCollectableAndesiteElement(panelEl)) {
+        continue;
+      }
+      if (await isInsideRepeater(panelEl)) {
+        continue;
+      }
+      const panelId = await panelEl.evaluate((node) => node.getAttribute("data-andesite-id") ?? "");
+      const panelBox = await measureBoxRelativeToScrollChild(panelEl, scrollEl);
+      const texturePath = `textures/${panelId}.png`;
+      const screenshot = await withUnclippedScrollCapture(page, panelEl, async () => {
+        return await withIsolatedCapture(page, panelEl, async () => panelEl.screenshot({ type: "png", omitBackground: true }));
+      });
+      const outputPath = path.join(outputDir, texturePath);
+      fs.mkdirSync(path.dirname(outputPath), { recursive: true });
+      fs.writeFileSync(outputPath, screenshot);
+      scrollPanels.push({
+        id: panelId,
+        texture: texturePath,
+        x: panelBox.x,
+        y: panelBox.y,
+        width: panelBox.width,
+        height: panelBox.height
+      });
+    }
+    const scrollButtons = [];
+    const buttonEls = await scrollEl.$$('[data-andesite-type="button"]');
+    for (const btnEl of buttonEls) {
+      if (!await isCollectableAndesiteElement(btnEl)) {
+        continue;
+      }
+      if (await isInsideRepeater(btnEl)) {
+        continue;
+      }
+      const btnId = await btnEl.evaluate((node) => node.getAttribute("data-andesite-id") ?? "");
+      const btnBox = await measureBoxRelativeToScrollChild(btnEl, scrollEl);
+      const texturePath = `textures/${btnId}.png`;
+      const defaultPng = await withUnclippedScrollCapture(page, btnEl, async () => {
+        return await withIsolatedCapture(page, btnEl, async () => {
+          await setButtonCaptureState(btnEl, "default", true);
+          return await captureButtonPng(page, btnEl);
+        });
+      });
+      const pressedPng = await withUnclippedScrollCapture(page, btnEl, async () => {
+        return await withIsolatedCapture(page, btnEl, async () => {
+          await setButtonCaptureState(btnEl, "pressed", true);
+          return await captureButtonPng(page, btnEl);
+        });
+      });
+      const atlas = await combinePngsVertically(page, [defaultPng, pressedPng]);
+      const outputPath = path.join(outputDir, texturePath);
+      fs.mkdirSync(path.dirname(outputPath), { recursive: true });
+      fs.writeFileSync(outputPath, atlas);
+      await resetButtonPreviewState(btnEl);
+      scrollButtons.push({
+        id: btnId,
+        defaultTexture: texturePath,
+        pressedTexture: texturePath,
+        x: btnBox.x,
+        y: btnBox.y,
+        width: btnBox.width,
+        height: btnBox.height
+      });
+    }
+    const scrollLabels = [];
+    const labelEls = await scrollEl.$$('[data-andesite-type="label"]');
+    for (const labelEl of labelEls) {
+      if (!await isCollectableAndesiteElement(labelEl)) {
+        continue;
+      }
+      if (await isInsideRepeater(labelEl)) {
+        continue;
+      }
+      const labelBox = await measureBoxRelativeToScrollChild(labelEl, scrollEl);
+      const labelId = await labelEl.evaluate((node) => node.getAttribute("data-andesite-id") ?? "");
+      const text = await labelEl.evaluate((node) => node.getAttribute("data-andesite-text") ?? "");
+      const size = await labelEl.evaluate((node) => node.getAttribute("data-andesite-size") ?? "NORMAL");
+      const align = await labelEl.evaluate((node) => node.getAttribute("data-andesite-align") ?? "LEFT");
+      const color = await labelEl.evaluate((node) => node.getAttribute("data-andesite-color") ?? "ffffff");
+      scrollLabels.push({
+        id: labelId,
+        text,
+        x: labelBox.x,
+        y: labelBox.y,
+        width: labelBox.width,
+        height: labelBox.height,
+        size,
+        align,
+        color
+      });
+    }
+    const scrollSlots = [];
+    const slotEls = await scrollEl.$$('[data-andesite-type="slot"]');
+    for (const slotEl of slotEls) {
+      if (!await isCollectableAndesiteElement(slotEl)) {
+        continue;
+      }
+      if (await isInsideRepeater(slotEl)) {
+        continue;
+      }
+      const slotId = await slotEl.evaluate((node) => node.getAttribute("data-andesite-id") ?? "");
+      const slotMountId = await collectHudMountId(slotEl);
+      const slotIndex = await slotEl.evaluate((node) => node.getAttribute("data-andesite-slot-index") ?? "");
+      const slotBox = await measureBoxRelativeToScrollChild(slotEl, scrollEl);
+      scrollSlots.push({
+        id: slotId,
+        mountId: slotMountId,
+        slot: slotIndex === "" ? scrollSlots.length : Number(slotIndex),
+        x: slotBox.x,
+        y: slotBox.y,
+        width: slotBox.width,
+        height: slotBox.height
+      });
+    }
+    const scrollRepeaters = await rasterizeScrollRepeaters(page, scrollEl, outputDir);
+    const contentFromDom = await scrollEl.evaluate((node) => {
+      const content = node.querySelector("[data-andesite-scroll-content]");
+      return content ? Math.round(content.scrollHeight) : 0;
+    });
+    const contentHeight = Math.max(
+      contentFromDom,
+      box.height,
+      scrollPanels.reduce((max, panel) => Math.max(max, panel.y + panel.height), 0),
+      scrollButtons.reduce((max, btn) => Math.max(max, btn.y + btn.height), 0),
+      scrollLabels.reduce((max, label) => Math.max(max, label.y + label.height), 0),
+      scrollSlots.reduce((max, slot) => Math.max(max, slot.y + slot.height), 0),
+      scrollRepeaters.reduce((max, repeater) => Math.max(max, repeater.y + repeater.contentHeight), 0)
+    );
+    results.push({
+      id,
+      mountId,
+      x: box.x,
+      y: box.y,
+      width: box.width,
+      height: box.height,
+      contentHeight,
+      defaultVisible,
+      panels: scrollPanels,
+      buttons: scrollButtons,
+      labels: scrollLabels,
+      slots: scrollSlots,
+      repeaters: scrollRepeaters
+    });
+  }
+  return results;
+}
+async function rasterizeScrollRepeaters(page, scrollEl, outputDir) {
+  if (!scrollEl) {
+    return [];
+  }
+  const repeaterEls = await scrollEl.$$('[data-andesite-type="repeater"]');
+  const results = [];
+  for (const repeaterEl of repeaterEls) {
+    if (!await isCollectableAndesiteElement(repeaterEl)) {
+      continue;
+    }
+    const id = await repeaterEl.evaluate((node) => node.getAttribute("data-andesite-id") ?? "");
+    const source = await repeaterEl.evaluate((node) => node.getAttribute("data-andesite-source") ?? id);
+    const repeaterBox = await measureBoxRelativeToScrollChild(repeaterEl, scrollEl);
+    const cellBoxes = await collectRepeaterCellBoxes(repeaterEl);
+    const declaredColumns = optionalNumber(await repeaterEl.evaluate((node) => node.getAttribute("data-andesite-columns")));
+    const declaredItemWidth = optionalNumber(await repeaterEl.evaluate((node) => node.getAttribute("data-andesite-item-width")));
+    const declaredItemHeight = optionalNumber(await repeaterEl.evaluate((node) => node.getAttribute("data-andesite-item-height")));
+    const declaredMaxItems = optionalNumber(await repeaterEl.evaluate((node) => node.getAttribute("data-andesite-max-items")));
+    const declaredRowGap = optionalNumber(await repeaterEl.evaluate((node) => node.getAttribute("data-andesite-row-gap")));
+    const declaredColumnGap = optionalNumber(await repeaterEl.evaluate((node) => node.getAttribute("data-andesite-column-gap")));
+    const columns = Math.max(1, Math.floor(declaredColumns ?? inferRepeaterColumns(cellBoxes)));
+    const itemWidth = Math.max(1, Math.round(declaredItemWidth ?? cellBoxes[0]?.width ?? repeaterBox.width));
+    const itemHeight = Math.max(1, Math.round(declaredItemHeight ?? cellBoxes[0]?.height ?? repeaterBox.height));
+    const maxItems = declaredMaxItems ?? 0;
+    const rowGap = Math.max(0, Math.round(declaredRowGap ?? inferRepeaterRowGap(cellBoxes, columns)));
+    const columnGap = Math.max(0, Math.round(declaredColumnGap ?? inferRepeaterColumnGap(cellBoxes, columns)));
+    const safeColumns = Math.max(1, Math.floor(columns));
+    const maxRows = maxItems > 0 ? Math.ceil(maxItems / safeColumns) : 1;
+    const contentHeight = Math.max(itemHeight, maxRows * itemHeight + Math.max(0, maxRows - 1) * rowGap);
+    const templatePanels = [];
+    const panelEls = await repeaterEl.$$('[data-andesite-type="panel"]');
+    for (const panelEl of panelEls) {
+      if (!await isCollectableAndesiteElement(panelEl) || !await isInsideRepeaterFirstRow(panelEl, columns)) {
+        continue;
+      }
+      const panelId = await panelEl.evaluate((node) => node.getAttribute("data-andesite-id") ?? "");
+      const panelBox = await measureBoxRelativeToAncestor(panelEl, repeaterEl);
+      const texturePath = `textures/${panelId}.png`;
+      const screenshot = await withUnclippedScrollCapture(page, panelEl, async () => {
+        return await withIsolatedCapture(page, panelEl, async () => panelEl.screenshot({ type: "png", omitBackground: true }));
+      });
+      const outputPath = path.join(outputDir, texturePath);
+      fs.mkdirSync(path.dirname(outputPath), { recursive: true });
+      fs.writeFileSync(outputPath, screenshot);
+      templatePanels.push({
+        id: panelId,
+        texture: texturePath,
+        x: panelBox.x,
+        y: panelBox.y,
+        width: panelBox.width,
+        height: panelBox.height
+      });
+    }
+    const templateButtons = [];
+    const buttonEls = await repeaterEl.$$('[data-andesite-type="button"]');
+    for (const btnEl of buttonEls) {
+      if (!await isCollectableAndesiteElement(btnEl) || !await isInsideRepeaterFirstRow(btnEl, columns)) {
+        continue;
+      }
+      const btnId = await btnEl.evaluate((node) => node.getAttribute("data-andesite-id") ?? "");
+      const btnBox = await measureBoxRelativeToAncestor(btnEl, repeaterEl);
+      const texturePath = `textures/${btnId}.png`;
+      const defaultPng = await withUnclippedScrollCapture(page, btnEl, async () => {
+        return await withIsolatedCapture(page, btnEl, async () => {
+          await setButtonCaptureState(btnEl, "default", true);
+          return await captureButtonPng(page, btnEl);
+        });
+      });
+      const pressedPng = await withUnclippedScrollCapture(page, btnEl, async () => {
+        return await withIsolatedCapture(page, btnEl, async () => {
+          await setButtonCaptureState(btnEl, "pressed", true);
+          return await captureButtonPng(page, btnEl);
+        });
+      });
+      const atlas = await combinePngsVertically(page, [defaultPng, pressedPng]);
+      const outputPath = path.join(outputDir, texturePath);
+      fs.mkdirSync(path.dirname(outputPath), { recursive: true });
+      fs.writeFileSync(outputPath, atlas);
+      await resetButtonPreviewState(btnEl);
+      templateButtons.push({
+        id: btnId,
+        defaultTexture: texturePath,
+        pressedTexture: texturePath,
+        x: btnBox.x,
+        y: btnBox.y,
+        width: btnBox.width,
+        height: btnBox.height
+      });
+    }
+    const templateLabels = [];
+    const labelEls = await repeaterEl.$$('[data-andesite-type="label"]');
+    for (const labelEl of labelEls) {
+      if (!await isCollectableAndesiteElement(labelEl) || !await isInsideRepeaterFirstRow(labelEl, columns)) {
+        continue;
+      }
+      const labelBox = await measureBoxRelativeToAncestor(labelEl, repeaterEl);
+      const labelId = await labelEl.evaluate((node) => node.getAttribute("data-andesite-id") ?? "");
+      const text = await labelEl.evaluate((node) => node.getAttribute("data-andesite-text") ?? "");
+      const size = await labelEl.evaluate((node) => node.getAttribute("data-andesite-size") ?? "NORMAL");
+      const align = await labelEl.evaluate((node) => node.getAttribute("data-andesite-align") ?? "LEFT");
+      const color = await labelEl.evaluate((node) => node.getAttribute("data-andesite-color") ?? "ffffff");
+      templateLabels.push({
+        id: labelId,
+        text,
+        x: labelBox.x,
+        y: labelBox.y,
+        width: labelBox.width,
+        height: labelBox.height,
+        size,
+        align,
+        color
+      });
+    }
+    const templateSlots = [];
+    const slotEls = await repeaterEl.$$('[data-andesite-type="slot"]');
+    for (const slotEl of slotEls) {
+      if (!await isCollectableAndesiteElement(slotEl)) {
+        continue;
+      }
+      const slotId = await slotEl.evaluate((node) => node.getAttribute("data-andesite-id") ?? "");
+      const slotMountId = await collectHudMountId(slotEl);
+      const slotMeta = await slotEl.evaluate((node) => {
+        const declared = node.getAttribute("data-andesite-slot-index") ?? "";
+        const cell = node.closest("[data-andesite-repeater-cell]");
+        return {
+          slot: declared !== "" ? declared : cell?.getAttribute("data-andesite-repeater-slot") ?? "",
+          itemIndex: cell?.getAttribute("data-andesite-repeater-cell") ?? "",
+          virtual: node.getAttribute("data-andesite-virtual") === "true"
+        };
+      });
+      const slotBox = await measureBoxRelativeToAncestor(slotEl, repeaterEl);
+      templateSlots.push({
+        id: slotId,
+        mountId: slotMountId,
+        slot: slotMeta.slot === "" ? templateSlots.length : Number(slotMeta.slot),
+        ...slotMeta.itemIndex === "" ? {} : { itemIndex: Number(slotMeta.itemIndex) },
+        ...slotMeta.virtual ? { virtual: true } : {},
+        x: slotBox.x,
+        y: slotBox.y,
+        width: slotBox.width,
+        height: slotBox.height
+      });
+    }
+    results.push({
+      id,
+      source,
+      x: repeaterBox.x,
+      y: repeaterBox.y,
+      width: Math.max(repeaterBox.width, columns * itemWidth + Math.max(0, columns - 1) * columnGap),
+      height: itemHeight,
+      columns,
+      itemWidth,
+      itemHeight,
+      ...maxItems > 0 ? { maxItems: Math.floor(maxItems) } : {},
+      contentHeight,
+      rowGap,
+      columnGap,
+      panels: templatePanels,
+      buttons: templateButtons,
+      labels: templateLabels,
+      slots: templateSlots
+    });
+  }
+  return results;
+}
+async function collectRepeaterCellBoxes(repeaterEl) {
+  if (!repeaterEl) {
+    return [];
+  }
+  const cells = await repeaterEl.$$("[data-andesite-repeater-cell]");
+  const boxes = [];
+  for (const cell of cells) {
+    const index = await cell.evaluate((node) => Number(node.dataset.andesiteRepeaterCell ?? "-1"));
+    if (!Number.isFinite(index) || index < 0) {
+      continue;
+    }
+    const box = await measureBoxRelativeToAncestor(cell, repeaterEl);
+    boxes.push({ index, ...box });
+  }
+  boxes.sort((a, b) => a.index - b.index);
+  return boxes;
+}
+function inferRepeaterColumns(cells) {
+  if (cells.length <= 1) {
+    return 1;
+  }
+  const first = cells[0];
+  const firstRowY = first.y;
+  return Math.max(1, cells.filter((cell) => Math.abs(cell.y - firstRowY) <= 1).length);
+}
+function inferRepeaterColumnGap(cells, columns) {
+  if (columns <= 1 || cells.length <= 1) {
+    return 0;
+  }
+  const firstRow = cells.slice(0, columns).sort((a, b) => a.x - b.x);
+  if (firstRow.length <= 1) {
+    return 0;
+  }
+  return firstRow[1].x - firstRow[0].x - firstRow[0].width;
+}
+function inferRepeaterRowGap(cells, columns) {
+  if (cells.length <= columns) {
+    return 0;
+  }
+  const first = cells[0];
+  const secondRow = cells.find((cell) => cell.index >= columns);
+  if (!secondRow) {
+    return 0;
+  }
+  return secondRow.y - first.y - first.height;
+}
+async function isInsideRepeaterFirstRow(target, columns) {
+  if (!target) {
+    return false;
+  }
+  return await target.evaluate((node, columnCount) => {
+    const cell = node.closest("[data-andesite-repeater-cell]");
+    if (!cell) {
+      return false;
+    }
+    const index = Number(cell.getAttribute("data-andesite-repeater-cell") ?? "-1");
+    return Number.isFinite(index) && index >= 0 && index < Math.max(1, Math.floor(columnCount));
+  }, columns);
+}
+async function rasterizePanels(page, outputDir) {
+  const elements = await page.$$('[data-andesite-type="panel"], [data-andesite-view]');
+  const results = [];
+  for (const el of elements) {
+    if (await isInsideScrollView(el)) {
+      continue;
+    }
+    const id = await el.evaluate((node) => (node.getAttribute("data-andesite-id") ?? "") + (node.hasAttribute("data-andesite-view") ? "/__background" : ""));
+    const mountId = await collectHudMountId(el);
+    const defaultVisible = await readDefaultVisible(el);
+    const box = await measureAndesiteBox(el);
+    const estimatedOverflow = await measureShadowOverflow(el, 2);
+    const texturePath = `textures/${encodeURIComponent(id)}.png`;
+    const captured = await withIsolatedCapture(page, el, async () => {
+      const captureSpace = await el.evaluateHandle((node, pad) => {
+        const html = document.documentElement;
+        const rect = node.getBoundingClientRect();
+        const state = { style: html.getAttribute("style"), x: window.scrollX, y: window.scrollY, width: rect.width, height: rect.height, spacer: document.createElement("div") };
+        const dx = Math.max(0, Math.ceil(pad.left - rect.left - state.x));
+        const dy = Math.max(0, Math.ceil(pad.top - rect.top - state.y));
+        const right = Math.ceil(Math.max(html.scrollWidth, rect.right + state.x + pad.right));
+        const bottom = Math.ceil(Math.max(html.scrollHeight, rect.bottom + state.y + pad.bottom));
+        const transform = getComputedStyle(html).transform;
+        state.spacer.style.cssText = `all: initial; position: absolute; left: ${right}px; top: ${bottom}px; width: 1px; height: 1px; visibility: hidden; pointer-events: none;`;
+        html.appendChild(state.spacer);
+        if (dx > 0 || dy > 0) {
+          html.style.setProperty("transition", "none", "important");
+          html.style.setProperty("transform", `translate(${dx}px, ${dy}px)${transform === "none" ? "" : ` ${transform}`}`, "important");
+        }
+        return state;
+      }, estimatedOverflow);
+      try {
+        const abs = await el.evaluate((node) => {
+          const rect = node.getBoundingClientRect();
+          return { left: rect.left + window.scrollX, top: rect.top + window.scrollY, width: rect.width, height: rect.height };
+        });
+        const originalSize = await captureSpace.evaluate((state) => ({ width: state.width, height: state.height }));
+        if (Math.abs(abs.width - originalSize.width) > 0.01 || Math.abs(abs.height - originalSize.height) > 0.01) {
+          throw new Error(`Panel layout changed while preparing shadow capture: ${id}`);
+        }
+        const left = Math.floor(abs.left - estimatedOverflow.left);
+        const top = Math.floor(abs.top - estimatedOverflow.top);
+        const right = Math.ceil(abs.left + abs.width + estimatedOverflow.right);
+        const bottom = Math.ceil(abs.top + abs.height + estimatedOverflow.bottom);
+        const clip = { x: left, y: top, width: right - left, height: bottom - top };
+        if (clip.x < 0 || clip.y < 0) {
+          throw new Error(`Panel shadow capture is outside the padded page: ${id}`);
+        }
+        const borderBoxInClip = { x: abs.left - left, y: abs.top - top, width: abs.width, height: abs.height };
+        const png = await page.screenshot({
+          type: "png",
+          omitBackground: true,
+          captureBeyondViewport: true,
+          clip
+        });
+        return { png, clip, borderBoxInClip };
+      } finally {
+        try {
+          await captureSpace.evaluate((state) => {
+            state.spacer.remove();
+            const html = document.documentElement;
+            if (state.style === null) {
+              html.removeAttribute("style");
+            } else {
+              html.setAttribute("style", state.style);
+            }
+            window.scrollTo(state.x, state.y);
+          });
+        } finally {
+          await captureSpace.dispose();
+        }
+      }
+    });
+    const trimmed = await trimShadowOverflow(page, captured.png, captured.clip, captured.borderBoxInClip, RASTER_SCALE);
+    const outputPath = path.join(outputDir, texturePath);
+    fs.mkdirSync(path.dirname(outputPath), { recursive: true });
+    fs.writeFileSync(outputPath, trimmed.png);
+    const overflow = trimmed.overflow;
+    const hasOverflow = overflow.left > 0 || overflow.top > 0 || overflow.right > 0 || overflow.bottom > 0;
+    results.push({ id, mountId, texturePath, x: box.x, y: box.y, width: captured.borderBoxInClip.width, height: captured.borderBoxInClip.height, ...hasOverflow ? { overflow } : {}, ...defaultVisible == null ? {} : { defaultVisible }, png: trimmed.png });
+  }
+  return results;
+}
+async function rasterizeButtons(page, outputDir) {
+  const elements = await page.$$('[data-andesite-type="button"]');
+  const results = [];
+  for (const el of elements) {
+    if (await isInsideScrollView(el)) {
+      continue;
+    }
+    const id = await el.evaluate((node) => node.getAttribute("data-andesite-id") ?? "");
+    const mountId = await collectHudMountId(el);
+    const defaultVisible = await readDefaultVisible(el);
+    const box = await measureAndesiteBox(el);
+    const pressDuration = Number(await el.evaluate((node) => node.getAttribute("data-andesite-press-duration") ?? "2"));
+    const clickable = await collectButtonClickable(el);
+    const layer = optionalNumber(await el.evaluate((node) => node.getAttribute("data-andesite-layer")));
+    const statesJson = await el.evaluate((node) => node.getAttribute("data-andesite-states") ?? "[]");
+    const labelsJson = await el.evaluate((node) => node.getAttribute("data-andesite-labels") ?? "[]");
+    const states = JSON.parse(statesJson);
+    const labels = JSON.parse(labelsJson);
+    const texturePath = `textures/${id}.png`;
+    const overflow = await measureShadowOverflow(el);
+    const frames = [];
+    await setButtonCaptureState(el, "default", true);
+    if (el) {
+      const screenshot = await withIsolatedCapture(page, el, async () => {
+        await setButtonCaptureState(el, "default", true);
+        return await captureButtonPng(page, el);
+      });
+      frames.push(screenshot);
+    }
+    await setButtonCaptureState(el, "pressed", true);
+    if (el) {
+      const screenshot = await withIsolatedCapture(page, el, async () => {
+        await setButtonCaptureState(el, "pressed", true);
+        return await captureButtonPng(page, el);
+      });
+      frames.push(screenshot);
+    }
+    if (frames.length === 2) {
+      const atlas = await combinePngsVertically(page, frames);
+      const outputPath = path.join(outputDir, texturePath);
+      fs.mkdirSync(path.dirname(outputPath), { recursive: true });
+      fs.writeFileSync(outputPath, atlas);
+      results.push({
+        id,
+        mountId,
+        defaultTexturePath: texturePath,
+        pressedTexturePath: texturePath,
+        x: box.x - overflow.left,
+        y: box.y - overflow.top,
+        width: box.width + overflow.left + overflow.right,
+        height: box.height + overflow.top + overflow.bottom,
+        pressDuration,
+        clickable,
+        ...layer == null ? {} : { layer },
+        ...defaultVisible == null ? {} : { defaultVisible },
+        states,
+        labels,
+        defaultPng: frames[0],
+        pressedPng: frames[1]
+      });
+    }
+    await resetButtonPreviewState(el);
+  }
+  return results;
+}
+async function rasterizeTextInputs(page, outputDir) {
+  const elements = await page.$$('[data-andesite-type="text-input"]');
+  const results = [];
+  for (const el of elements) {
+    if (!await isCollectableAndesiteElement(el)) {
+      continue;
+    }
+    const id = await el.evaluate((node) => node.getAttribute("data-andesite-id") ?? "");
+    const mountId = await collectHudMountId(el);
+    const box = await measureAndesiteBox(el);
+    const value = await el.evaluate((node) => node.getAttribute("data-andesite-value") ?? "");
+    const placeholder = await el.evaluate((node) => node.getAttribute("data-andesite-placeholder") ?? "");
+    const maxLength = Number(await el.evaluate((node) => node.getAttribute("data-andesite-max-length") ?? "32"));
+    const size = await el.evaluate((node) => node.getAttribute("data-andesite-size") ?? "NORMAL");
+    const align = await el.evaluate((node) => node.getAttribute("data-andesite-align") ?? "LEFT");
+    const color = await el.evaluate((node) => node.getAttribute("data-andesite-color") ?? "ffffff");
+    const placeholderColor = await el.evaluate((node) => node.getAttribute("data-andesite-placeholder-color") ?? "8a8a8a");
+    const completionJson = await el.evaluate((node) => node.getAttribute("data-andesite-completion") ?? "{}");
+    const texturePath = `textures/${id}.png`;
+    const screenshot = await withIsolatedCapture(page, el, async () => {
+      return await el.screenshot({ type: "png", omitBackground: true });
+    });
+    const outputPath = path.join(outputDir, texturePath);
+    fs.mkdirSync(path.dirname(outputPath), { recursive: true });
+    fs.writeFileSync(outputPath, screenshot);
+    results.push({
+      id,
+      mountId,
+      texture: texturePath,
+      value,
+      placeholder,
+      x: box.x,
+      y: box.y,
+      width: box.width,
+      height: box.height,
+      maxLength: Number.isFinite(maxLength) ? maxLength : 32,
+      size,
+      align,
+      color,
+      placeholderColor,
+      completion: normalizeTextInputCompletion(completionJson)
+    });
+  }
+  return results;
+}
+function normalizeTextInputCompletion(json) {
+  const fallback = {
+    server: false,
+    minChars: 0,
+    maxItems: 0,
+    debounceTicks: 0
+  };
+  const parsed = safeJson(json);
+  if (parsed.server !== true) {
+    return fallback;
+  }
+  return {
+    server: true,
+    minChars: nonNegativeNumber(parsed.minChars, 1),
+    maxItems: nonNegativeNumber(parsed.maxItems, 5),
+    debounceTicks: nonNegativeNumber(parsed.debounceTicks, 2)
+  };
+}
+function safeJson(json) {
+  try {
+    return JSON.parse(json);
+  } catch {
+    return {};
+  }
+}
+function nonNegativeNumber(value, fallback) {
+  const number = Number(value ?? fallback);
+  return Number.isFinite(number) ? Math.max(0, number) : fallback;
+}
+async function captureButtonPng(page, el) {
+  if (!el) {
+    return new Uint8Array();
+  }
+  const cloneHandle = await el.evaluateHandle((node) => {
+    const root = document.querySelector("[data-andesite-content-root]");
+    const html = document.documentElement;
+    const body = document.body;
+    const selfHidden = node.getAttribute("data-andesite-default-visible") === "false" && node.style.display === "none";
+    if (selfHidden) {
+      node.style.display = "";
+    }
+    if (root) {
+      root.dataset.andesiteButtonCaptureVisibility = root.style.visibility;
+      root.style.visibility = "hidden";
+      root.dataset.andesiteButtonCaptureOpacity = root.style.opacity;
+      root.style.opacity = "0";
+    }
+    html.dataset.andesiteButtonCaptureBackground = html.style.background;
+    html.dataset.andesiteButtonCaptureBackgroundColor = html.style.backgroundColor;
+    body.dataset.andesiteButtonCaptureBackground = body.style.background;
+    body.dataset.andesiteButtonCaptureBackgroundColor = body.style.backgroundColor;
+    html.style.background = "transparent";
+    html.style.backgroundColor = "transparent";
+    body.style.background = "transparent";
+    body.style.backgroundColor = "transparent";
+    const wrapper = document.createElement("div");
+    wrapper.dataset.andesiteButtonCaptureOverlay = "true";
+    wrapper.style.position = "fixed";
+    wrapper.style.left = "0";
+    wrapper.style.top = "0";
+    wrapper.style.margin = "0";
+    wrapper.style.padding = "0";
+    wrapper.style.background = "transparent";
+    wrapper.style.pointerEvents = "none";
+    wrapper.style.zIndex = "2147483647";
+    const rect = node.getBoundingClientRect();
+    const clone = node.cloneNode(true);
+    clone.style.position = "relative";
+    clone.style.left = "0";
+    clone.style.top = "0";
+    clone.style.right = "auto";
+    clone.style.bottom = "auto";
+    clone.style.width = `${Math.max(1, Math.round(rect.width))}px`;
+    clone.style.height = `${Math.max(1, Math.round(rect.height))}px`;
+    clone.style.margin = "0";
+    const cloneBoxShadow = getComputedStyle(node).boxShadow;
+    clone.style.boxShadow = cloneBoxShadow;
+    clone.querySelectorAll("[data-andesite-type]").forEach((controlNode) => {
+      controlNode.style.opacity = "0";
+    });
+    clone.querySelectorAll('[data-andesite-type="label"], [data-andesite-preview]').forEach((previewNode) => {
+      previewNode.style.visibility = "hidden";
+      previewNode.style.opacity = "0";
+    });
+    wrapper.appendChild(clone);
+    body.appendChild(wrapper);
+    if (selfHidden) {
+      node.style.display = "none";
+    }
+    return clone;
+  });
+  const cloneElement = cloneHandle.asElement();
+  try {
+    if (!cloneElement) {
+      return new Uint8Array();
+    }
+    const overflow = await measureShadowOverflow(cloneElement);
+    if (overflow.left > 0 || overflow.top > 0 || overflow.right > 0 || overflow.bottom > 0) {
+      await cloneElement.evaluate((node, pad) => {
+        const el2 = node;
+        el2.style.marginLeft = `${pad.left}px`;
+        el2.style.marginTop = `${pad.top}px`;
+      }, { left: overflow.left, top: overflow.top });
+      const box = await cloneElement.boundingBox();
+      if (!box) {
+        return new Uint8Array();
+      }
+      return await page.screenshot({
+        type: "png",
+        omitBackground: true,
+        clip: {
+          x: Math.max(0, box.x - overflow.left),
+          y: Math.max(0, box.y - overflow.top),
+          width: box.width + overflow.left + overflow.right,
+          height: box.height + overflow.top + overflow.bottom
+        }
+      });
+    }
+    return await cloneElement.screenshot({ type: "png", omitBackground: true });
+  } finally {
+    await page.evaluate(() => {
+      document.querySelectorAll("[data-andesite-button-capture-overlay]").forEach((node) => {
+        node.remove();
+      });
+      const root = document.querySelector("[data-andesite-content-root]");
+      if (root) {
+        root.style.visibility = root.dataset.andesiteButtonCaptureVisibility ?? "";
+        delete root.dataset.andesiteButtonCaptureVisibility;
+        root.style.opacity = root.dataset.andesiteButtonCaptureOpacity ?? "";
+        delete root.dataset.andesiteButtonCaptureOpacity;
+      }
+      const html = document.documentElement;
+      const body = document.body;
+      html.style.background = html.dataset.andesiteButtonCaptureBackground ?? "";
+      html.style.backgroundColor = html.dataset.andesiteButtonCaptureBackgroundColor ?? "";
+      body.style.background = body.dataset.andesiteButtonCaptureBackground ?? "";
+      body.style.backgroundColor = body.dataset.andesiteButtonCaptureBackgroundColor ?? "";
+      delete html.dataset.andesiteButtonCaptureBackground;
+      delete html.dataset.andesiteButtonCaptureBackgroundColor;
+      delete body.dataset.andesiteButtonCaptureBackground;
+      delete body.dataset.andesiteButtonCaptureBackgroundColor;
+    });
+    await cloneHandle.dispose();
+  }
+}
+async function selectCaptureView(target) {
+  if (!target) return;
+  await target.evaluate((node) => {
+    const selected = /* @__PURE__ */ new Map();
+    let view = node.closest("[data-andesite-view]");
+    while (view) {
+      selected.set(view.parentElement, view);
+      view = view.parentElement?.closest("[data-andesite-view]") ?? null;
+    }
+    for (const stack of document.querySelectorAll("[data-andesite-viewstack]")) {
+      for (const child of stack.querySelectorAll(":scope > [data-andesite-view]")) {
+        const active = selected.has(stack) ? selected.get(stack) === child : child.dataset.andesiteViewName === stack.getAttribute("data-andesite-default-view");
+        child.style.display = active ? child.dataset.andesiteViewDisplay ?? "" : "none";
+      }
+    }
+  });
+}
+async function measureAndesiteBox(target) {
+  if (!target) {
+    return { x: 0, y: 0, width: 0, height: 0 };
+  }
+  await selectCaptureView(target);
+  return await target.evaluate((node) => {
+    const canvas = document.querySelector("[data-andesite-canvas]");
+    const isHud = canvas?.getAttribute("data-andesite-page-kind") === "hud";
+    const root = isHud ? node.closest("[data-andesite-hud-mount]") ?? document.querySelector("[data-andesite-content-root]") : document.querySelector("[data-andesite-content-root]");
+    if (!root) {
+      return { x: 0, y: 0, width: 0, height: 0 };
+    }
+    const hiddenSiblings = Array.from(
+      root.querySelectorAll('[data-andesite-default-visible="false"]')
+    ).filter((n) => n.style.display === "none");
+    hiddenSiblings.forEach((n) => {
+      n.style.display = "";
+    });
+    const rootRect = root.getBoundingClientRect();
+    const rect = node.getBoundingClientRect();
+    hiddenSiblings.forEach((n) => {
+      n.style.display = "none";
+    });
+    return {
+      x: Math.round(rect.left - rootRect.left),
+      y: Math.round(rect.top - rootRect.top),
+      width: Math.round(rect.width),
+      height: Math.round(rect.height)
+    };
+  });
+}
+async function measureProgressCapsuleBox(target) {
+  if (!target) {
+    return { x: 0, y: 0, width: 0, height: 0 };
+  }
+  return await target.evaluate((node) => {
+    const canvas = document.querySelector("[data-andesite-canvas]");
+    const isHud = canvas?.getAttribute("data-andesite-page-kind") === "hud";
+    const root = isHud ? node.closest("[data-andesite-hud-mount]") ?? document.querySelector("[data-andesite-content-root]") : document.querySelector("[data-andesite-content-root]");
+    if (!root) {
+      return { x: 0, y: 0, width: 0, height: 0 };
+    }
+    let capsule = node;
+    let current = node.parentElement;
+    while (current && current !== document.body) {
+      const style = getComputedStyle(current);
+      const radius = Number.parseFloat(style.borderTopLeftRadius || "0");
+      const clipped = style.overflow === "hidden" || style.overflowX === "hidden" || style.overflowY === "hidden";
+      if (clipped && Number.isFinite(radius) && radius > 0) {
+        capsule = current;
+        break;
+      }
+      current = current.parentElement;
+    }
+    const rootRect = root.getBoundingClientRect();
+    const rect = capsule.getBoundingClientRect();
+    return {
+      x: Math.round(rect.left - rootRect.left),
+      y: Math.round(rect.top - rootRect.top),
+      width: Math.round(rect.width),
+      height: Math.round(rect.height)
+    };
+  });
+}
+async function measureShadowOverflow(target, blurScale = 1) {
+  if (!target) {
+    return { left: 0, top: 0, right: 0, bottom: 0 };
+  }
+  return await target.evaluate((node, blurScale2) => {
+    const shadow = getComputedStyle(node).boxShadow;
+    const overflow = { left: 0, top: 0, right: 0, bottom: 0 };
+    if (!shadow || shadow === "none") {
+      return overflow;
+    }
+    const layers = [];
+    let depth = 0;
+    let current = "";
+    for (const ch of shadow) {
+      if (ch === "(") depth++;
+      if (ch === ")") depth--;
+      if (ch === "," && depth === 0) {
+        layers.push(current);
+        current = "";
+        continue;
+      }
+      current += ch;
+    }
+    layers.push(current);
+    for (const layer of layers) {
+      if (/\binset\b/.test(layer)) continue;
+      const nums = layer.match(/-?\d+(?:\.\d+)?px/g)?.map((v) => parseFloat(v)) ?? [];
+      const [offsetX = 0, offsetY = 0, blur = 0, spread = 0] = nums;
+      const reach = blur * blurScale2 + Math.max(0, spread);
+      overflow.left = Math.max(overflow.left, -offsetX + reach - Math.min(0, spread));
+      overflow.top = Math.max(overflow.top, -offsetY + reach - Math.min(0, spread));
+      overflow.right = Math.max(overflow.right, offsetX + reach - Math.min(0, spread));
+      overflow.bottom = Math.max(overflow.bottom, offsetY + reach - Math.min(0, spread));
+    }
+    return {
+      left: Math.max(0, Math.ceil(overflow.left)),
+      top: Math.max(0, Math.ceil(overflow.top)),
+      right: Math.max(0, Math.ceil(overflow.right)),
+      bottom: Math.max(0, Math.ceil(overflow.bottom))
+    };
+  }, blurScale);
+}
+async function trimShadowOverflow(page, png, clip, borderBoxInClip, scale) {
+  const geometry = [
+    clip.x,
+    clip.y,
+    clip.width,
+    clip.height,
+    borderBoxInClip.x,
+    borderBoxInClip.y,
+    borderBoxInClip.width,
+    borderBoxInClip.height,
+    scale
+  ];
+  if (!geometry.every(Number.isFinite) || scale <= 0 || clip.x < 0 || clip.y < 0 || clip.width <= 0 || clip.height <= 0 || borderBoxInClip.width <= 0 || borderBoxInClip.height <= 0) {
+    throw new Error("Invalid shadow capture geometry");
+  }
+  if (![clip.x, clip.y, clip.width, clip.height].every(Number.isInteger)) {
+    throw new Error("Shadow capture clip must use integer CSS coordinates");
+  }
+  const result = await page.evaluate(async (input) => {
+    const image = new Image();
+    const loaded = new Promise((resolve, reject) => {
+      image.onload = () => resolve();
+      image.onerror = () => reject(new Error("Failed to decode shadow capture"));
+    });
+    image.src = `data:image/png;base64,${input.base64}`;
+    await loaded;
+    const width = image.naturalWidth;
+    const height = image.naturalHeight;
+    if (width !== Math.round(input.clip.width * input.scale) || height !== Math.round(input.clip.height * input.scale)) {
+      throw new Error(`Shadow capture PNG ${width}x${height} does not match clip ${input.clip.width}x${input.clip.height} @${input.scale}`);
+    }
+    const box = input.borderBoxInClip;
+    const bx0 = box.x * input.scale;
+    const by0 = box.y * input.scale;
+    const bx1 = (box.x + box.width) * input.scale;
+    const by1 = (box.y + box.height) * input.scale;
+    if (bx0 < 0 || by0 < 0 || bx1 > width || by1 > height) {
+      throw new Error("Border box is outside shadow capture");
+    }
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d", { willReadFrequently: true });
+    if (!ctx) {
+      throw new Error("Failed to create shadow scan context");
+    }
+    ctx.drawImage(image, 0, 0);
+    const pixels = ctx.getImageData(0, 0, width, height).data;
+    let left = Math.floor(bx0);
+    let top = Math.floor(by0);
+    let right = Math.ceil(bx1);
+    let bottom = Math.ceil(by1);
+    for (let y = 0, alphaIndex = 3; y < height; y++) {
+      for (let x = 0; x < width; x++, alphaIndex += 4) {
+        if (pixels[alphaIndex] === 0) {
+          continue;
+        }
+        if (x < left) left = x;
+        if (y < top) top = y;
+        if (x + 1 > right) right = x + 1;
+        if (y + 1 > bottom) bottom = y + 1;
+      }
+    }
+    const overflow = {
+      left: (bx0 - left) / input.scale,
+      top: (by0 - top) / input.scale,
+      right: (right - bx1) / input.scale,
+      bottom: (bottom - by1) / input.scale
+    };
+    if (left === 0 && top === 0 && right === width && bottom === height) {
+      return { base64: null, overflow };
+    }
+    const cropped = document.createElement("canvas");
+    cropped.width = right - left;
+    cropped.height = bottom - top;
+    const croppedCtx = cropped.getContext("2d");
+    if (!croppedCtx) {
+      throw new Error("Failed to create shadow crop context");
+    }
+    croppedCtx.imageSmoothingEnabled = false;
+    croppedCtx.drawImage(image, left, top, cropped.width, cropped.height, 0, 0, cropped.width, cropped.height);
+    const dataUrl = cropped.toDataURL("image/png");
+    return { base64: dataUrl.substring(dataUrl.indexOf(",") + 1), overflow };
+  }, {
+    base64: Buffer.from(png).toString("base64"),
+    clip,
+    borderBoxInClip,
+    scale
+  });
+  return {
+    png: result.base64 === null ? png : Buffer.from(result.base64, "base64"),
+    overflow: result.overflow
+  };
+}
+async function collectHudMountId(target) {
+  if (!target) {
+    return void 0;
+  }
+  return await target.evaluate((node) => {
+    const canvas = document.querySelector("[data-andesite-canvas]");
+    if (canvas?.getAttribute("data-andesite-page-kind") !== "hud") {
+      return void 0;
+    }
+    const mount = node.closest("[data-andesite-hud-mount]");
+    const mountId = mount?.getAttribute("data-andesite-id") ?? "";
+    return mountId === "" ? void 0 : mountId;
+  });
+}
+async function isCollectableAndesiteElement(target) {
+  if (!target) {
+    return false;
+  }
+  const box = await measureAndesiteBox(target);
+  if (box.width <= 0 || box.height <= 0) return false;
+  return await target.evaluate((node) => {
+    if (node.closest("[data-andesite-viewstack]") && !node.closest("[data-andesite-view]")) {
+      return false;
+    }
+    let current = node;
+    while (current) {
+      const style = getComputedStyle(current);
+      if (current.getAttribute("data-andesite-preview") === "button-size" || current.hasAttribute("data-andesite-button-export")) {
+        return false;
+      }
+      if (style.display === "none" || style.visibility === "hidden" || style.visibility === "collapse") {
+        if (current.getAttribute("data-andesite-default-visible") !== "false") {
+          return false;
+        }
+      }
+      if (current.hasAttribute("data-andesite-content-root")) {
+        break;
+      }
+      current = current.parentElement;
+    }
+    return true;
+  });
+}
+async function readDefaultVisible(target) {
+  if (!target) {
+    return void 0;
+  }
+  const value = await target.evaluate((node) => node.getAttribute("data-andesite-default-visible"));
+  return value === "false" ? false : void 0;
+}
+async function withIsolatedCapture(page, target, capture, hideTargetLabels = true) {
+  if (!target) {
+    return await capture();
+  }
+  await page.evaluate((targetNode, hideLabels) => {
+    const root = document.querySelector("[data-andesite-content-root]");
+    const nodes = Array.from((root ?? document).querySelectorAll("*"));
+    nodes.forEach((node) => {
+      node.dataset.andesiteCaptureVisibility = node.style.visibility;
+      node.dataset.andesiteCaptureOpacity = node.style.opacity;
+      node.dataset.andesiteCaptureDisplay = node.style.display;
+      node.style.visibility = "hidden";
+    });
+    let current = targetNode;
+    while (current) {
+      current.style.visibility = current.dataset.andesiteCaptureVisibility ?? "";
+      current = current.parentElement;
+    }
+    if (targetNode.getAttribute("data-andesite-default-visible") === "false") {
+      targetNode.style.visibility = "visible";
+      targetNode.style.display = "";
+      let ancestor = targetNode.parentElement;
+      while (ancestor && ancestor !== document.documentElement) {
+        if (ancestor.getAttribute("data-andesite-default-visible") === "false") {
+          ancestor.style.display = "";
+        }
+        ancestor = ancestor.parentElement;
+      }
+    }
+    targetNode.querySelectorAll("*").forEach((node) => {
+      if (node === targetNode || !node.matches("[data-andesite-type]")) {
+        node.style.visibility = node.dataset.andesiteCaptureVisibility ?? "";
+      }
+    });
+    targetNode.querySelectorAll("[data-andesite-type]").forEach((node) => {
+      node.style.opacity = "0";
+    });
+    {
+      let current2 = targetNode.parentElement;
+      while (current2 && current2 !== document.documentElement) {
+        current2.dataset.andesiteCaptureBackground = current2.style.background;
+        current2.dataset.andesiteCaptureBackgroundColor = current2.style.backgroundColor;
+        current2.dataset.andesiteCaptureBorderColor = current2.style.borderColor;
+        current2.dataset.andesiteCaptureBoxShadow = current2.style.boxShadow;
+        current2.dataset.andesiteCaptureOutline = current2.style.outline;
+        current2.style.background = "transparent";
+        current2.style.backgroundColor = "transparent";
+        current2.style.borderColor = "transparent";
+        current2.style.boxShadow = "none";
+        current2.style.outline = "none";
+        current2 = current2.parentElement;
+      }
+    }
+    if (hideLabels) {
+      targetNode.querySelectorAll('[data-andesite-type="label"], [data-andesite-preview]').forEach((node) => {
+        node.style.visibility = "hidden";
+        node.style.opacity = "0";
+      });
+    }
+  }, target, hideTargetLabels);
+  try {
+    return await capture();
+  } finally {
+    await page.evaluate(() => {
+      document.querySelectorAll("[data-andesite-capture-visibility]").forEach((node) => {
+        node.style.visibility = node.dataset.andesiteCaptureVisibility ?? "";
+        node.style.opacity = node.dataset.andesiteCaptureOpacity ?? "";
+        if (node.dataset.andesiteCaptureDisplay != null) {
+          node.style.display = node.dataset.andesiteCaptureDisplay;
+          delete node.dataset.andesiteCaptureDisplay;
+        }
+        if (node.dataset.andesiteCaptureBackground != null) {
+          node.style.background = node.dataset.andesiteCaptureBackground;
+          node.style.backgroundColor = node.dataset.andesiteCaptureBackgroundColor ?? "";
+          node.style.borderColor = node.dataset.andesiteCaptureBorderColor ?? "";
+          node.style.boxShadow = node.dataset.andesiteCaptureBoxShadow ?? "";
+          node.style.outline = node.dataset.andesiteCaptureOutline ?? "";
+          delete node.dataset.andesiteCaptureBackground;
+          delete node.dataset.andesiteCaptureBackgroundColor;
+          delete node.dataset.andesiteCaptureBorderColor;
+          delete node.dataset.andesiteCaptureBoxShadow;
+          delete node.dataset.andesiteCaptureOutline;
+        }
+        delete node.dataset.andesiteCaptureVisibility;
+        delete node.dataset.andesiteCaptureOpacity;
+      });
+    });
+  }
+}
+async function withUnclippedScrollCapture(page, target, capture) {
+  if (!target) {
+    return await capture();
+  }
+  await page.evaluate((targetNode) => {
+    const scrollNode = targetNode.closest('[data-andesite-type="scroll-view"]');
+    if (!scrollNode) {
+      return;
+    }
+    const contentNode = scrollNode.querySelector("[data-andesite-scroll-content]");
+    const nodes = [scrollNode, contentNode];
+    nodes.forEach((node) => {
+      if (!node) {
+        return;
+      }
+      node.dataset.andesiteScrollCaptureOverflow = node.style.overflow;
+      node.dataset.andesiteScrollCaptureOverflowX = node.style.overflowX;
+      node.dataset.andesiteScrollCaptureOverflowY = node.style.overflowY;
+      node.style.overflow = "visible";
+      node.style.overflowX = "visible";
+      node.style.overflowY = "visible";
+    });
+  }, target);
+  try {
+    return await capture();
+  } finally {
+    await page.evaluate(() => {
+      document.querySelectorAll("[data-andesite-scroll-capture-overflow]").forEach((node) => {
+        node.style.overflow = node.dataset.andesiteScrollCaptureOverflow ?? "";
+        node.style.overflowX = node.dataset.andesiteScrollCaptureOverflowX ?? "";
+        node.style.overflowY = node.dataset.andesiteScrollCaptureOverflowY ?? "";
+        delete node.dataset.andesiteScrollCaptureOverflow;
+        delete node.dataset.andesiteScrollCaptureOverflowX;
+        delete node.dataset.andesiteScrollCaptureOverflowY;
+      });
+    });
+  }
+}
+async function withHiddenAndesiteControls(page, capture, target) {
+  await page.evaluate((targetNode) => {
+    const root = targetNode ?? document.querySelector("[data-andesite-content-root]");
+    if (!root) {
+      return;
+    }
+    const rootRect = root.getBoundingClientRect();
+    const carrier = targetNode == null ? root.firstElementChild ?? root : root;
+    const carrierRect = carrier.getBoundingClientRect();
+    const overlay = carrier.cloneNode(true);
+    overlay.dataset.andesiteStaticCaptureOverlay = "true";
+    overlay.style.position = "fixed";
+    overlay.style.left = `${carrierRect.left}px`;
+    overlay.style.top = `${carrierRect.top}px`;
+    overlay.style.width = `${carrierRect.width}px`;
+    overlay.style.height = `${carrierRect.height}px`;
+    overlay.style.margin = "0";
+    overlay.style.zIndex = "2147483647";
+    overlay.style.pointerEvents = "none";
+    overlay.style.visibility = "visible";
+    const hiddenControls = [
+      ...overlay.matches("[data-andesite-type], [data-andesite-preview]") ? [overlay] : [],
+      ...Array.from(overlay.querySelectorAll("[data-andesite-type], [data-andesite-preview]"))
+    ];
+    hiddenControls.forEach((node) => {
+      node.style.opacity = "0";
+    });
+    root.dataset.andesiteCaptureVisibility = root.style.visibility;
+    root.dataset.andesiteStaticCapture = "true";
+    root.style.visibility = "hidden";
+    if (carrierRect.left !== rootRect.left || carrierRect.top !== rootRect.top) {
+      const wrapper = document.createElement("div");
+      wrapper.dataset.andesiteStaticCaptureOverlay = "true";
+      wrapper.style.position = "fixed";
+      wrapper.style.left = `${rootRect.left}px`;
+      wrapper.style.top = `${rootRect.top}px`;
+      wrapper.style.width = `${rootRect.width}px`;
+      wrapper.style.height = `${rootRect.height}px`;
+      wrapper.style.margin = "0";
+      wrapper.style.zIndex = "2147483647";
+      wrapper.style.pointerEvents = "none";
+      wrapper.appendChild(overlay);
+      document.body.appendChild(wrapper);
+    } else {
+      document.body.appendChild(overlay);
+    }
+  }, target ?? null);
+  const captureStyle = await page.addStyleTag({ content: `
+    html, body, .andesite-preview-stage, .andesite-preview-canvas-wrapper { background: transparent !important; background-image: none !important; }
+    body > :not([data-andesite-static-capture-overlay]) { opacity: 0 !important; }
+  ` });
+  try {
+    return await capture();
+  } finally {
+    await captureStyle.evaluate((node) => node.remove());
+    await page.evaluate(() => {
+      document.querySelectorAll("[data-andesite-capture-visibility]").forEach((node) => {
+        node.style.visibility = node.dataset.andesiteCaptureVisibility ?? "";
+        delete node.dataset.andesiteCaptureVisibility;
+      });
+      document.querySelectorAll("[data-andesite-static-capture]").forEach((node) => {
+        delete node.dataset.andesiteStaticCapture;
+      });
+      document.querySelectorAll("[data-andesite-static-capture-overlay]").forEach((node) => {
+        node.remove();
+      });
+    });
+  }
+}
+async function setButtonCaptureState(el, state, showPreview) {
+  if (!el) {
+    return;
+  }
+  await el.evaluate((node, targetState, shouldShowPreview) => {
+    const defaultNode = node.querySelector('[data-andesite-state="default"]');
+    const pressedNode = node.querySelector('[data-andesite-state="pressed"]');
+    const contentNode = node.querySelector('[data-andesite-preview="button-content"]');
+    const previewNode = node.querySelector('[data-andesite-preview="button-labels"]');
+    if (defaultNode) {
+      defaultNode.style.visibility = "visible";
+      defaultNode.style.opacity = targetState === "default" ? "1" : "0";
+    }
+    if (pressedNode) {
+      pressedNode.style.visibility = "visible";
+      pressedNode.style.opacity = targetState === "pressed" ? "1" : "0";
+    }
+    if (contentNode) {
+      contentNode.style.visibility = "hidden";
+      contentNode.style.opacity = "0";
+    }
+    if (previewNode) {
+      previewNode.style.visibility = shouldShowPreview ? "visible" : "hidden";
+    }
+  }, state, showPreview);
+}
+async function resetButtonPreviewState(el) {
+  if (!el) {
+    return;
+  }
+  await el.evaluate((node) => {
+    const defaultNode = node.querySelector('[data-andesite-state="default"]');
+    const pressedNode = node.querySelector('[data-andesite-state="pressed"]');
+    const contentNode = node.querySelector('[data-andesite-preview="button-content"]');
+    if (defaultNode) {
+      defaultNode.style.visibility = "visible";
+      defaultNode.style.opacity = "0";
+    }
+    if (pressedNode) {
+      pressedNode.style.visibility = "visible";
+      pressedNode.style.opacity = "0";
+    }
+    if (contentNode) {
+      contentNode.style.visibility = "visible";
+      contentNode.style.opacity = "1";
+    }
+  });
+}
+async function rasterizeProgresses(page, outputDir) {
+  const elements = await page.$$('[data-andesite-type="progress"]');
+  const results = [];
+  for (const el of elements) {
+    if (!await isCollectableAndesiteElement(el)) {
+      continue;
+    }
+    const id = await el.evaluate((node) => node.getAttribute("data-andesite-id") ?? "");
+    const mountId = await collectHudMountId(el);
+    const box = await measureProgressCapsuleBox(el);
+    const value = Number(await el.evaluate((node) => node.getAttribute("data-andesite-value") ?? "0"));
+    const max = Number(await el.evaluate((node) => node.getAttribute("data-andesite-max") ?? "100"));
+    const steps = Math.max(1, Number(await el.evaluate((node) => node.getAttribute("data-andesite-steps") ?? `${DEFAULT_PROGRESS_STEPS}`)));
+    const currentPercent = max <= 0 ? 0 : Math.max(0, Math.min(100, value / max * 100));
+    const defaultIndex = Math.round(currentPercent / 100 * steps);
+    const states = [];
+    const frames = [];
+    const texturePath = `textures/${id}.png`;
+    for (let i = 0; i <= steps; i++) {
+      const percent = Math.round(i * 1e3 / steps) / 10;
+      const percentId = progressPercentId(percent);
+      const screenshot = await renderProgressPng(el, percent);
+      frames.push(screenshot);
+      states.push({
+        id: `p_${percentId}`,
+        texture: texturePath,
+        value: percent,
+        defaultState: i === defaultIndex
+      });
+    }
+    const atlas = await combinePngsVertically(page, frames);
+    const outputPath = path.join(outputDir, texturePath);
+    fs.mkdirSync(path.dirname(outputPath), { recursive: true });
+    fs.writeFileSync(outputPath, atlas);
+    results.push({ id, mountId, x: box.x, y: box.y, width: box.width, height: box.height, states });
+  }
+  return results;
+}
+async function rasterizeSprites(page, outputDir) {
+  const elements = await page.$$('[data-andesite-type="sprite"]');
+  const results = [];
+  for (const el of elements) {
+    if (!await isCollectableAndesiteElement(el)) {
+      continue;
+    }
+    const id = await el.evaluate((node) => node.getAttribute("data-andesite-id") ?? "");
+    const mountId = await collectHudMountId(el);
+    const box = await measureAndesiteBox(el);
+    const statesJson = await el.evaluate((node) => node.getAttribute("data-andesite-states") ?? "[]");
+    const stateDecls = JSON.parse(statesJson);
+    const texturePath = `textures/${id}.png`;
+    const frames = [];
+    const states = [];
+    for (let i = 0; i < stateDecls.length; i++) {
+      const state = stateDecls[i];
+      const screenshot = await captureSpriteStatePng(page, el, state.id);
+      frames.push(screenshot);
+      states.push({
+        id: state.id,
+        texture: texturePath,
+        defaultState: state.defaultState === true || i === 0 && !stateDecls.some((item) => item.defaultState === true)
+      });
+    }
+    if (frames.length === 0) {
+      continue;
+    }
+    const atlas = await combinePngsVertically(page, frames);
+    const outputPath = path.join(outputDir, texturePath);
+    fs.mkdirSync(path.dirname(outputPath), { recursive: true });
+    fs.writeFileSync(outputPath, atlas);
+    results.push({ id, mountId, x: box.x, y: box.y, width: box.width, height: box.height, states });
+  }
+  return results;
+}
+async function captureSpriteStatePng(page, el, stateId) {
+  if (!el) {
+    return new Uint8Array();
+  }
+  const cloneHandle = await el.evaluateHandle((node, targetStateId) => {
+    const root = document.querySelector("[data-andesite-content-root]");
+    const html = document.documentElement;
+    const body = document.body;
+    if (root) {
+      root.dataset.andesiteSpriteCaptureVisibility = root.style.visibility;
+      root.style.visibility = "hidden";
+      root.dataset.andesiteSpriteCaptureOpacity = root.style.opacity;
+      root.style.opacity = "0";
+    }
+    html.dataset.andesiteSpriteCaptureBackground = html.style.background;
+    html.dataset.andesiteSpriteCaptureBackgroundColor = html.style.backgroundColor;
+    body.dataset.andesiteSpriteCaptureBackground = body.style.background;
+    body.dataset.andesiteSpriteCaptureBackgroundColor = body.style.backgroundColor;
+    html.style.background = "transparent";
+    html.style.backgroundColor = "transparent";
+    body.style.background = "transparent";
+    body.style.backgroundColor = "transparent";
+    const wrapper = document.createElement("div");
+    wrapper.dataset.andesiteSpriteCaptureOverlay = "true";
+    wrapper.style.position = "fixed";
+    wrapper.style.left = "0";
+    wrapper.style.top = "0";
+    wrapper.style.margin = "0";
+    wrapper.style.padding = "0";
+    wrapper.style.background = "transparent";
+    wrapper.style.pointerEvents = "none";
+    wrapper.style.zIndex = "2147483647";
+    const rect = node.getBoundingClientRect();
+    const clone = node.cloneNode(true);
+    clone.style.position = "relative";
+    clone.style.left = "0";
+    clone.style.top = "0";
+    clone.style.right = "auto";
+    clone.style.bottom = "auto";
+    clone.style.width = `${Math.max(1, Math.round(rect.width))}px`;
+    clone.style.height = `${Math.max(1, Math.round(rect.height))}px`;
+    clone.style.margin = "0";
+    clone.querySelectorAll("[data-andesite-state]").forEach((stateNode) => {
+      stateNode.style.visibility = stateNode.getAttribute("data-andesite-state") === targetStateId ? "visible" : "hidden";
+    });
+    wrapper.appendChild(clone);
+    body.appendChild(wrapper);
+    return clone;
+  }, stateId);
+  const cloneElement = cloneHandle.asElement();
+  try {
+    if (!cloneElement) {
+      return new Uint8Array();
+    }
+    return await cloneElement.screenshot({ type: "png", omitBackground: true });
+  } finally {
+    await page.evaluate(() => {
+      document.querySelectorAll("[data-andesite-sprite-capture-overlay]").forEach((node) => {
+        node.remove();
+      });
+      const root = document.querySelector("[data-andesite-content-root]");
+      if (root) {
+        root.style.visibility = root.dataset.andesiteSpriteCaptureVisibility ?? "";
+        delete root.dataset.andesiteSpriteCaptureVisibility;
+        root.style.opacity = root.dataset.andesiteSpriteCaptureOpacity ?? "";
+        delete root.dataset.andesiteSpriteCaptureOpacity;
+      }
+      const html = document.documentElement;
+      const body = document.body;
+      html.style.background = html.dataset.andesiteSpriteCaptureBackground ?? "";
+      html.style.backgroundColor = html.dataset.andesiteSpriteCaptureBackgroundColor ?? "";
+      body.style.background = body.dataset.andesiteSpriteCaptureBackground ?? "";
+      body.style.backgroundColor = body.dataset.andesiteSpriteCaptureBackgroundColor ?? "";
+      delete html.dataset.andesiteSpriteCaptureBackground;
+      delete html.dataset.andesiteSpriteCaptureBackgroundColor;
+      delete body.dataset.andesiteSpriteCaptureBackground;
+      delete body.dataset.andesiteSpriteCaptureBackgroundColor;
+    });
+    await cloneHandle.dispose();
+  }
+}
+async function combinePngsVertically(page, frames) {
+  if (frames.length === 0) {
+    return new Uint8Array();
+  }
+  const dataUrls = frames.map((frame) => `data:image/png;base64,${Buffer.from(frame).toString("base64")}`);
+  const dataUrl = await page.evaluate(async (sources) => {
+    const images = await Promise.all(sources.map((source) => new Promise((resolve, reject) => {
+      const image = new Image();
+      image.onload = () => resolve(image);
+      image.onerror = () => reject(new Error(`Failed to load atlas frame: ${source.substring(0, 32)}`));
+      image.src = source;
+    })));
+    const width = Math.max(...images.map((image) => image.width));
+    const height = images.reduce((sum, image) => sum + image.height, 0);
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    ctx.imageSmoothingEnabled = false;
+    let y = 0;
+    images.forEach((image) => {
+      ctx.drawImage(image, 0, y);
+      y += image.height;
+    });
+    return canvas.toDataURL("image/png");
+  }, dataUrls);
+  return Buffer.from(dataUrl.substring(dataUrl.indexOf(",") + 1), "base64");
+}
+function progressPercentId(percent) {
+  const normalized = Math.round(percent * 10) / 10;
+  return Number.isInteger(normalized) ? `${normalized}` : normalized.toFixed(1).replace(".", "_");
+}
+async function renderProgressPng(el, percent) {
+  if (!el) {
+    return new Uint8Array();
+  }
+  const dataUrl = await el.evaluate((node, value) => {
+    const target = node;
+    let capsule = target;
+    let current = target.parentElement;
+    while (current && current !== document.body) {
+      const style = getComputedStyle(current);
+      const radius = Number.parseFloat(style.borderTopLeftRadius || "0");
+      const clipped = style.overflow === "hidden" || style.overflowX === "hidden" || style.overflowY === "hidden";
+      if (clipped && Number.isFinite(radius) && radius > 0) {
+        capsule = current;
+        break;
+      }
+      current = current.parentElement;
+    }
+    const rect = capsule.getBoundingClientRect();
+    const width = Math.max(1, Math.round(rect.width));
+    const height = Math.max(1, Math.round(rect.height));
+    const capsuleStyle = getComputedStyle(capsule);
+    const track = target.children.item(0);
+    const fill = target.children.item(1);
+    const trackStyle = track ? getComputedStyle(track) : getComputedStyle(target);
+    const fillStyle = fill ? getComputedStyle(fill) : trackStyle;
+    const fillWidth = Math.max(0, Math.min(width, Math.round(width * value / 100)));
+    const capsuleRadius = borderRadius(capsuleStyle, width, height);
+    const capsuleBorder = Number.parseFloat(capsuleStyle.borderTopWidth || "0");
+    const capsuleBorderColor = capsuleStyle.borderTopColor;
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    ctx.imageSmoothingEnabled = false;
+    ctx.fillStyle = solidColor(capsuleStyle.backgroundColor, solidColor(trackStyle.backgroundColor, "#00000000"));
+    fillRoundedRect(ctx, 0, 0, width, height, capsuleRadius);
+    if (capsuleBorder > 0 && capsuleBorderColor && capsuleBorderColor !== "rgba(0, 0, 0, 0)") {
+      ctx.lineWidth = capsuleBorder;
+      ctx.strokeStyle = capsuleBorderColor;
+      strokeRoundedRect(ctx, capsuleBorder / 2, capsuleBorder / 2, width - capsuleBorder, height - capsuleBorder, Math.max(0, capsuleRadius - capsuleBorder / 2));
+    }
+    if (fillWidth > 0) {
+      ctx.fillStyle = fillPaint(ctx, fillStyle.backgroundImage, fillStyle.backgroundColor, fillWidth, height);
+      fillRoundedRect(ctx, 0, 0, fillWidth, height, capsuleRadius);
+    }
+    return canvas.toDataURL("image/png");
+    function solidColor(value2, fallback) {
+      return value2 && value2 !== "rgba(0, 0, 0, 0)" ? value2 : fallback;
+    }
+    function fillPaint(context, backgroundImage, backgroundColor, fillWidth2, fillHeight) {
+      const gradientMatch = backgroundImage.match(/linear-gradient\((.*)\)$/);
+      if (gradientMatch) {
+        const body = gradientMatch[1];
+        const stops = parseGradientStops(body);
+        if (stops.length >= 2) {
+          const [x0, y0, x1, y1] = gradientAxis(body, fillWidth2, fillHeight);
+          const gradient = context.createLinearGradient(x0, y0, x1, y1);
+          for (const stop of stops) {
+            gradient.addColorStop(stop.offset, stop.color);
+          }
+          return gradient;
+        }
+      }
+      return solidColor(backgroundColor, "#ffffff");
+    }
+    function gradientAxis(body, width2, height2) {
+      const first = body.slice(0, body.indexOf(",")).trim().toLowerCase();
+      let deg = 180;
+      if (/^-?\d+(?:\.\d+)?deg$/.test(first)) {
+        deg = Number.parseFloat(first);
+      } else if (first.startsWith("to ")) {
+        if (first.includes("top")) deg = 0;
+        else if (first.includes("bottom")) deg = 180;
+        else if (first.includes("left")) deg = 270;
+        else if (first.includes("right")) deg = 90;
+      }
+      const rad = (deg - 90) * Math.PI / 180;
+      const dx = Math.cos(rad);
+      const dy = Math.sin(rad);
+      const half = Math.abs(width2 * dx) / 2 + Math.abs(height2 * dy) / 2;
+      const cx = width2 / 2;
+      const cy = height2 / 2;
+      return [cx - dx * half, cy - dy * half, cx + dx * half, cy + dy * half];
+    }
+    function parseGradientStops(body) {
+      const colorRe = /(rgba?\([^)]*\))(?:\s+(\d+(?:\.\d+)?)%)?/g;
+      const stops = [];
+      let match;
+      while ((match = colorRe.exec(body)) !== null) {
+        const percent2 = match[2] !== void 0 ? Number.parseFloat(match[2]) / 100 : -1;
+        stops.push({ color: match[1], offset: percent2 });
+      }
+      const n = stops.length;
+      for (let i = 0; i < n; i++) {
+        if (stops[i].offset < 0) {
+          stops[i].offset = n <= 1 ? 0 : i / (n - 1);
+        }
+      }
+      return stops;
+    }
+    function borderRadius(style, rectWidth, rectHeight) {
+      const value2 = Number.parseFloat(style.borderTopLeftRadius || style.borderRadius || "0");
+      if (!Number.isFinite(value2) || value2 <= 0) {
+        return 0;
+      }
+      return Math.min(value2, rectWidth / 2, rectHeight / 2);
+    }
+    function fillRoundedRect(context, x, y, rectWidth, rectHeight, radius) {
+      roundedRectPath(context, x, y, rectWidth, rectHeight, radius);
+      context.fill();
+    }
+    function strokeRoundedRect(context, x, y, rectWidth, rectHeight, radius) {
+      roundedRectPath(context, x, y, rectWidth, rectHeight, radius);
+      context.stroke();
+    }
+    function roundedRectPath(context, x, y, rectWidth, rectHeight, radius) {
+      if (radius <= 0) {
+        context.beginPath();
+        context.rect(x, y, rectWidth, rectHeight);
+        return;
+      }
+      context.beginPath();
+      context.moveTo(x + radius, y);
+      context.lineTo(x + rectWidth - radius, y);
+      context.quadraticCurveTo(x + rectWidth, y, x + rectWidth, y + radius);
+      context.lineTo(x + rectWidth, y + rectHeight - radius);
+      context.quadraticCurveTo(x + rectWidth, y + rectHeight, x + rectWidth - radius, y + rectHeight);
+      context.lineTo(x + radius, y + rectHeight);
+      context.quadraticCurveTo(x, y + rectHeight, x, y + rectHeight - radius);
+      context.lineTo(x, y + radius);
+      context.quadraticCurveTo(x, y, x + radius, y);
+      context.closePath();
+    }
+  }, percent);
+  return Buffer.from(dataUrl.substring(dataUrl.indexOf(",") + 1), "base64");
+}
+async function collectLabels(page) {
+  const elements = await page.$$('[data-andesite-type="label"]');
+  const results = [];
+  for (const el of elements) {
+    if (!await isCollectableAndesiteElement(el)) {
+      continue;
+    }
+    if (await isInsideScrollView(el)) {
+      continue;
+    }
+    const id = await el.evaluate((node) => node.getAttribute("data-andesite-id") ?? "");
+    const mountId = await collectHudMountId(el);
+    const defaultVisible = await readDefaultVisible(el);
+    const rotatedBy = await findRotatingLabelAncestor(el);
+    if (rotatedBy != null) {
+      throw new Error(`[Andesite] ALabel \u4E0D\u652F\u6301\u65CB\u8F6C transform\uFF1A${id} \u53D7\u5230 ${rotatedBy} \u5F71\u54CD\u3002\u8BF7\u79FB\u9664 rotate-*\uFF0C\u6216\u628A\u8BE5\u6587\u672C\u6539\u4E3A\u9759\u6001 DOM \u70D8\u8FDB\u80CC\u666F\u3002`);
+    }
+    const box = await measureAndesiteBox(el);
+    const text = await el.evaluate((node) => node.getAttribute("data-andesite-text") ?? "");
+    const size = await el.evaluate((node) => node.getAttribute("data-andesite-size") ?? "NORMAL");
+    const align = await el.evaluate((node) => node.getAttribute("data-andesite-align") ?? "LEFT");
+    const color = await el.evaluate((node) => node.getAttribute("data-andesite-color") ?? "ffffff");
+    const shadowColor = await el.evaluate((node) => node.getAttribute("data-andesite-shadow-color") ?? "");
+    const shadowOffset = Number(await el.evaluate((node) => node.getAttribute("data-andesite-shadow-offset") ?? "1"));
+    const shadowVerticalOffset = Number(await el.evaluate((node) => node.getAttribute("data-andesite-shadow-vertical-offset") ?? "1"));
+    results.push({
+      id,
+      mountId,
+      text,
+      x: box.x,
+      y: box.y,
+      width: box.width,
+      height: box.height,
+      size,
+      align,
+      color,
+      shadowColor: shadowColor || void 0,
+      shadowOffset,
+      shadowVerticalOffset,
+      ...defaultVisible == null ? {} : { defaultVisible }
+    });
+  }
+  return results;
+}
+async function findRotatingLabelAncestor(el) {
+  if (!el) {
+    return null;
+  }
+  return await el.evaluate((node) => {
+    const root = document.querySelector("[data-andesite-content-root]");
+    let current = node;
+    while (current) {
+      const style = getComputedStyle(current);
+      if (hasNonAxisAlignedTransform(style)) {
+        return describeNode(current);
+      }
+      if (current === root) {
+        break;
+      }
+      current = current.parentElement;
+    }
+    return null;
+    function hasNonAxisAlignedTransform(style) {
+      if (hasRotateProperty(style.getPropertyValue("rotate"))) {
+        return true;
+      }
+      const transform = style.transform;
+      if (transform == null || transform === "" || transform === "none") {
+        return false;
+      }
+      const matrix = transform.match(/^matrix\(([^)]+)\)$/);
+      if (matrix != null) {
+        const values = matrix[1].split(",").map((value) => Number.parseFloat(value.trim()));
+        return values.length >= 4 && (Math.abs(values[1]) > 1e-4 || Math.abs(values[2]) > 1e-4);
+      }
+      const matrix3d = transform.match(/^matrix3d\(([^)]+)\)$/);
+      if (matrix3d != null) {
+        const values = matrix3d[1].split(",").map((value) => Number.parseFloat(value.trim()));
+        return values.length >= 16 && (Math.abs(values[1]) > 1e-4 || Math.abs(values[4]) > 1e-4);
+      }
+      return /rotate|skew/i.test(transform);
+    }
+    function hasRotateProperty(value) {
+      if (value == null || value === "" || value === "none") {
+        return false;
+      }
+      return value.split(/\s+/).some((part) => {
+        const n = Number.parseFloat(part);
+        return Number.isFinite(n) && Math.abs(n) > 1e-4;
+      });
+    }
+    function describeNode(target) {
+      const tag = target.tagName.toLowerCase();
+      const id = target.id ? `#${target.id}` : "";
+      const className = typeof target.className === "string" && target.className !== "" ? `.${target.className.trim().split(/\s+/).join(".")}` : "";
+      return `${tag}${id}${className}`;
+    }
+  });
+}
+async function collectSlots(page) {
+  const elements = await page.$$('[data-andesite-type="slot"]');
+  const results = [];
+  let visibleIndex = 0;
+  for (let i = 0; i < elements.length; i++) {
+    const el = elements[i];
+    if (!await isCollectableAndesiteElement(el)) {
+      continue;
+    }
+    if (await isInsideScrollView(el)) {
+      continue;
+    }
+    if (await isInsideRepeater(el)) {
+      continue;
+    }
+    const id = await el.evaluate((node) => node.getAttribute("data-andesite-id") ?? "");
+    const mountId = await collectHudMountId(el);
+    const slotIndex = await el.evaluate((node) => node.getAttribute("data-andesite-slot-index") ?? "");
+    const slot = slotIndex === "" ? visibleIndex : Number(slotIndex);
+    const box = await measureAndesiteBox(el);
+    const x = box.x;
+    const y = box.y;
+    const width = box.width;
+    const height = box.height;
+    results.push({ id, mountId, slot, x, y, width, height });
+    visibleIndex++;
+  }
+  return results;
+}
+
+// src/compile.ts
+async function compilePage(pageUrl, pageId, outputZipPath, options) {
+  const tempDir = path2.join(path2.dirname(outputZipPath), `.andesite-temp-${pageId.replace(/[^a-zA-Z0-9_-]/g, "_")}`);
+  fs2.mkdirSync(tempDir, { recursive: true });
+  const rasterOpts = { verbose: options?.verbose };
+  const rasterResult = options?.browser ? await rasterizeAllInBrowser(options.browser, pageUrl, tempDir, rasterOpts) : await rasterizeAll(pageUrl, tempDir, rasterOpts);
+  const pageControls = {
+    viewStacks: rasterResult.viewStacks,
+    panels: rasterResult.panels.map((p) => ({
+      id: p.id,
+      mountId: p.mountId,
+      texture: p.texturePath,
+      x: p.x,
+      y: p.y,
+      width: p.width,
+      height: p.height,
+      ...p.overflow == null ? {} : { overflow: p.overflow },
+      ...p.defaultVisible == null ? {} : { defaultVisible: p.defaultVisible }
+    })),
+    buttons: rasterResult.buttons.map((b) => ({
+      id: b.id,
+      mountId: b.mountId,
+      defaultTexture: b.defaultTexturePath,
+      pressedTexture: b.pressedTexturePath,
+      x: b.x,
+      y: b.y,
+      width: b.width,
+      height: b.height,
+      pressDuration: b.pressDuration,
+      clickable: b.clickable,
+      ...b.layer == null ? {} : { layer: b.layer },
+      ...b.defaultVisible == null ? {} : { defaultVisible: b.defaultVisible },
+      labels: b.labels,
+      states: b.states
+    })),
+    labels: rasterResult.labels,
+    inputs: rasterResult.inputs
+  };
+  const definition = rasterResult.kind === "hud" ? {
+    id: pageId,
+    kind: "hud",
+    width: rasterResult.width,
+    height: rasterResult.height,
+    mounts: rasterResult.mounts,
+    ...pageControls,
+    slots: [],
+    progresses: rasterResult.progresses,
+    sprites: rasterResult.sprites,
+    scrollViews: rasterResult.scrollViews
+  } : {
+    id: pageId,
+    rows: 6,
+    // 页面整体尺寸与锚点：anchor=center 时运行时按屏幕把整体包围盒居中，解决左上锚定导致的偏移
+    width: rasterResult.width,
+    height: rasterResult.height,
+    anchor: "center",
+    ...pageControls,
+    slots: rasterResult.slots,
+    progresses: rasterResult.progresses,
+    sprites: rasterResult.sprites,
+    scrollViews: rasterResult.scrollViews
+  };
+  const textures = /* @__PURE__ */ new Map();
+  const hashes = /* @__PURE__ */ new Map();
+  const pending = [definition];
+  const textureFields = /* @__PURE__ */ new Set(["texture", "defaultTexture", "pressedTexture", "backgroundTexture"]);
+  while (pending.length) {
+    const item = pending.pop();
+    for (const [key, value] of Object.entries(item)) {
+      if (typeof value === "string" && textureFields.has(key)) {
+        let canonical = textures.get(value);
+        if (!canonical) {
+          const bytes = fs2.readFileSync(path2.join(tempDir, value));
+          const digest = createHash("sha256").update(bytes).digest("hex");
+          canonical = hashes.get(digest) ?? value;
+          hashes.set(digest, canonical);
+          textures.set(value, canonical);
+        }
+        item[key] = canonical;
+      } else if (value && typeof value === "object") {
+        pending.push(value);
+      }
+    }
+  }
+  const jsonPath = path2.join(tempDir, "andesite.json");
+  fs2.writeFileSync(jsonPath, JSON.stringify(definition, null, 2));
+  await packZip(tempDir, outputZipPath, [...hashes.values()]);
+  fs2.rmSync(tempDir, { recursive: true, force: true });
+}
+async function packZip(sourceDir, outputZipPath, textures) {
+  return new Promise((resolve, reject) => {
+    const output = fs2.createWriteStream(outputZipPath);
+    const archive = archiver("zip", { zlib: { level: 6 } });
+    output.on("close", () => resolve());
+    output.on("error", reject);
+    archive.on("error", reject);
+    archive.pipe(output);
+    for (const name of ["andesite.json", ...textures]) {
+      archive.file(path2.join(sourceDir, name), { name });
+    }
+    archive.finalize();
+  });
+}
+export {
+  compilePage,
+  launchRasterBrowser
+};