fix(scene): resume chunk downloads after proxy interruptions

Whole-file loading still failed after adding caching because the public proxy interrupted large GLB response bodies. Download validated 1 MiB ranges, retry transient failures up to three attempts, and persist completed chunks so reloads resume from their last boundary. Add regression cases observed failing before the change for interrupted downloads, cross-reload resume, and temporary HTTP failures. Verify range integrity, full-cache reuse, permanent errors, and storage fallback.
feat(frontend): cache 3D assets and restore loading feedback
2026-10-16 18:37:24 +08:00 · 2026-10-16 18:13:04 +08:00 · 2026-09-25 17:22:42 +08:00 · 2026-09-25 16:23:00 +08:00 · 2026-09-25 16:02:10 +08:00 · 2026-09-25 15:44:46 +08:00
128 changed files with 113670 additions and 3675 deletions
@@ -0,0 +1,63 @@
 name: Frontend E2E
 on:
  pull_request:
  push:
    branches:
      - main
      - master
  workflow_dispatch: {}
 jobs:
  playwright:
    runs-on: ubuntu-22.04
    container:
      image: mcr.microsoft.com/playwright:v1.63.0-noble
    permissions:
      contents: read
    defaults:
      run:
        shell: sh
    steps:
      - name: Checkout code
        env:
          SERVER_URL: ${{ github.server_url }}
          REPOSITORY: ${{ github.repository }}
          COMMIT_SHA: ${{ github.sha }}
          GIT_USERNAME: ${{ github.actor }}
          GIT_TOKEN: ${{ github.token }}
        run: |
          case "$SERVER_URL" in
            http://*)
              AUTH_SERVER_URL="http://${GIT_USERNAME}:${GIT_TOKEN}@${SERVER_URL#http://}"
              ;;
            https://*)
              AUTH_SERVER_URL="https://${GIT_USERNAME}:${GIT_TOKEN}@${SERVER_URL#https://}"
              ;;
            *)
              AUTH_SERVER_URL="$SERVER_URL"
              ;;
          esac
          if [ ! -d .git ]; then
            git init .
          fi
          if git remote get-url origin >/dev/null 2>&1; then
            git remote set-url origin "${AUTH_SERVER_URL}/${REPOSITORY}.git"
          else
            git remote add origin "${AUTH_SERVER_URL}/${REPOSITORY}.git"
          fi
          git fetch --depth=1 origin "$COMMIT_SHA"
          git checkout --force --detach FETCH_HEAD
          git clean -ffdx
      - name: Install dependencies
        run: npm ci
      - name: Run Playwright tests
        env:
          CI: "true"
        run: npm run test:e2e
@@ -8,6 +8,9 @@
 # testing
 /coverage
 /playwright-report/
 /test-results/
 /e2e/.auth/
 # next.js
 /.next/
@@ -44,6 +44,7 @@ npm run dev
 npm run lint
 npm test
 npm run test:coverage
 npm run test:e2e
 npm run build
 npm run start
 docker build -t tjwater-frontend:local .
@@ -52,6 +53,7 @@ docker build -t tjwater-frontend:local .
 - `npm run lint`：运行 ESLint。
 - `npm test`：运行 Jest。
 - `npm run test:coverage`：生成测试覆盖率。
 - `npm run test:e2e`：启动本地 Next.js 与 Playwright Chromium 烟测。
 - `npm run build`：生成生产构建。
 - `npm run start`：启动生产模式服务。
@@ -86,6 +88,36 @@ npm run build
 Gitea 包工作流位于 `.gitea/workflows/package.yml`，通常由 tag 触发构建和推送镜像。
 ### Playwright E2E
 首次运行先安装 Chromium：
 ```bash
 npm run e2e:install
 npm run test:e2e
 ```
 本地测试会自动构建生产版本并启动隔离的 `http://127.0.0.1:3100`，生成仅用于测试的 NextAuth
 会话，并模拟后端 API，因此不要求启动 Keycloak、Server 或 Agent。失败时可通过
 `npm run test:e2e:report` 查看 HTML 报告，交互调试可使用
 `npm run test:e2e:ui` 或 `npm run test:e2e:debug`。
 在不能访问 Playwright CDN 的内网环境，可设置
 `E2E_CHROMIUM_PATH=/absolute/path/to/chrome` 复用预装的 Chromium/Chrome。
 若要对已部署环境运行测试，请传入环境地址和预先保存的管理员 Playwright 登录状态：
 ```bash
 E2E_BASE_URL=https://example.test \
 E2E_STORAGE_STATE=/absolute/path/to/storage-state.json \
 E2E_USE_REAL_SERVICES=true \
 npm run test:e2e
 ```
 `E2E_BASE_URL` 会关闭本地开发服务器；`E2E_STORAGE_STATE` 避免在仓库中保存账号或
 会话；`E2E_USE_REAL_SERVICES=true` 会关闭 API 模拟。Gitea 的
 `.gitea/workflows/e2e.yml` 在分支推送和 PR 中运行同一组 Chromium 测试。
 ## 安全规则
 不要提交 `.env`、`.next/`、`node_modules/`、本地缓存、私有地图/API token、客户数据或部署密钥。CI/CD 凭据应放在 Gitea secrets 中。
@@ -7,7 +7,7 @@
    },
    "server": {
      "file": "server-v1.openapi.json",
-      "sha256": "d0364fb08c6f18fac2ea9c9980ef21115fc01f110cd10f25f90d97d0bc0e6367"
+      "sha256": "b565d841061c9091f48ff3118bcc0cbb1b918b0cb8c2316d177570e8b2d8ba29"
    }
  }
 }
@@ -0,0 +1,19 @@
 # 三维场景静态资源下载与缓存
 `public/three-dimensional/zjb/v29/resourceCache.mjs` 统一加载模型和管网静态元数据，不缓存实时仿真或 SCADA 数据。
 - 每次请求最多下载 1 MiB，通过单区间 `Range` 请求获取资源。服务器返回 `206` 时，校验 `Content-Range` 的起止位置、总长度以及实际收到的字节数；不支持 Range 的服务器可在首次请求返回完整的 `200` 响应。
 - 网络中断、连续 30 秒无数据以及临时 HTTP 错误可重试，每个分段最多尝试 3 次，等待间隔为 300、600 毫秒。永久 HTTP 错误和不合法的分段响应直接显示失败提示。
 - 每个完整分段保存至 IndexedDB。刷新页面或重新载入后，从已保存的分段末尾继续；未完成的当前分段会重新下载。浏览器禁止存储或配额不足时，仍能在本次加载中下载和重试，但无法保证刷新后保留断点。
 - 完整资源和部分下载均按 URL、manifest revision 匹配，版本改变后重新下载。完整资源经过解析验证后才进入正式缓存，后续打开场景直接复用。
 - 进度界面显示下载、解析和断点重试状态。加载模块版本参数需要与 `preview.html`、`preview.mjs` 和 `ThreeDimensionalScene.tsx` 同步，防止浏览器沿用旧加载器。
 反向代理应透传 `Range` 请求及 `206`、`Content-Range` 响应。若内网完整下载正常，而公网完整下载中断，应同时排查代理的大文件传输；客户端分段恢复不代表代理链路问题已修复。
 聚焦回归：
 ```bash
 E2E_BASE_URL=http://127.0.0.1:3000 npx playwright test e2e/three-dimensional-loading.spec.ts --workers=1
 ```
 该命令需要已运行的前端。测试覆盖完整缓存复用、分段重试、跨刷新续传、错误分段拒绝及浏览器存储不可用的降级行为。
@@ -0,0 +1,17 @@
 import { expect, test } from "@playwright/test";
 import { mockBackend } from "./support/mockBackend";
 test.beforeEach(async ({ page }) => {
  await mockBackend(page);
 });
 test("已登录管理员可以打开审计日志页面", async ({ page }) => {
  await page.goto("/audit-logs");
  await expect(
    page.getByRole("heading", { name: "审计日志", exact: true }),
  ).toBeVisible();
  await expect(page.getByText("系统管理员权限已验证")).toBeVisible();
  await expect(page.getByRole("heading", { name: "查询结果" })).toBeVisible();
 });
@@ -0,0 +1,72 @@
 import fs from "node:fs/promises";
 import path from "node:path";
 import { encode } from "next-auth/jwt";
 import {
  AUTH_STATE_PATH,
  E2E_AUTH_SECRET,
  E2E_BASE_URL,
 } from "./support/environment";
 const SESSION_MAX_AGE_SECONDS = 12 * 60 * 60;
 export default async function globalSetup() {
  if (process.env.E2E_STORAGE_STATE) return;
  const now = Date.now();
  const baseUrl = new URL(E2E_BASE_URL);
  const secure = baseUrl.protocol === "https:";
  const token = await encode({
    secret: E2E_AUTH_SECRET,
    maxAge: SESSION_MAX_AGE_SECONDS,
    token: {
      sub: "playwright-user",
      username: "playwright",
      name: "E2E 测试用户",
      email: "playwright@example.invalid",
      accessToken: "playwright-access-token",
      accessTokenIssuedAt: now,
      accessTokenExpires: now + SESSION_MAX_AGE_SECONDS * 1000,
      sessionExpiresAt: now + SESSION_MAX_AGE_SECONDS * 1000,
    },
  });
  await fs.mkdir(path.dirname(AUTH_STATE_PATH), { recursive: true });
  await fs.writeFile(
    AUTH_STATE_PATH,
    JSON.stringify(
      {
        cookies: [
          {
            name: secure
              ? "__Secure-next-auth.session-token"
              : "next-auth.session-token",
            value: token,
            domain: baseUrl.hostname,
            path: "/",
            expires: Math.floor(now / 1000) + SESSION_MAX_AGE_SECONDS,
            httpOnly: true,
            secure,
            sameSite: "Lax",
          },
        ],
        origins: [
          {
            origin: baseUrl.origin,
            localStorage: [
              { name: "active_project", value: "playwright-project" },
              { name: "MAP_WORKSPACE", value: "tjwater_e2e" },
              { name: "NETWORK_NAME", value: "tjwater_e2e" },
              {
                name: "MAP_EXTENT",
                value: "13508801.93,3608163.35,13555650.64,3633685.14",
              },
            ],
          },
        ],
      },
      null,
      2,
    ),
  );
 }
@@ -0,0 +1,96 @@
 import { expect, test, type Page } from "@playwright/test";
 import { mockBackend } from "./support/mockBackend";
 test.setTimeout(90_000);
 async function prepare(page: Page) {
  await mockBackend(page);
  await page.route("**/api/v1/admin/**", (route) => route.fulfill({
    json: route.request().url().endsWith("/users/me")
      ? { id: "playwright-user", is_system_admin: true, system_role: "system_admin" }
      : [],
  }));
 }
 test("菜单点击后立即反馈，等待页面响应时显示路由骨架", async ({ page }) => {
  await prepare(page);
  await page.goto("/system-admin");
  await expect(page.getByRole("link", { name: "审计日志", exact: true })).toBeVisible();
  await page.locator("[data-page-scroll-content]").evaluate((element) => { element.scrollTop = element.scrollHeight; });
  let release: () => void = () => {};
  const gate = new Promise<void>((resolve) => { release = resolve; });
  let waiting = false;
  await page.route("**/audit-logs?*", async (route) => {
    if (route.request().headers().rsc !== "1") return route.fallback();
    waiting = true;
    await gate;
    await route.continue();
  });
  try {
    await page.getByRole("link", { name: "审计日志", exact: true }).click();
    await expect.poll(() => waiting).toBe(true);
    await expect(page.getByRole("progressbar", { name: "正在切换页面", exact: true })).toBeVisible({ timeout: 1500 });
    await expect(page.getByRole("status", { name: "正在加载审计日志", exact: true })).toBeVisible();
  } finally { release(); }
  await expect(page.getByRole("heading", { name: "审计日志", exact: true })).toBeVisible();
  await expect(page.getByRole("progressbar", { name: "正在切换页面", exact: true })).toHaveCount(0);
 });
 test("地图页面切换复用原地图，并显示目标面板的既有骨架", async ({ page }) => {
  await prepare(page);
  await page.route("**/ows?**", (route) => route.fulfill({ json: { type: "FeatureCollection", features: [] } }));
  await page.route("**/api/v1/scada-devices", (route) => route.fulfill({ json: [] }));
  await page.goto("/network-simulation");
  const map = page.locator(".ol-viewport").first();
  await expect(map).toBeVisible({ timeout: 60_000 });
  await map.evaluate((element) => element.setAttribute("data-navigation-map", "original"));
  let release: () => void = () => {};
  const gate = new Promise<void>((resolve) => { release = resolve; });
  await page.route("**/scada-data-cleaning?*", async (route) => {
    if (route.request().headers().rsc !== "1") return route.fallback();
    await gate;
    await route.continue();
  });
  try {
    await page.getByRole("link", { name: "SCADA 数据清洗", exact: true }).click();
    await expect(page.getByRole("status", { name: "正在加载数据清洗", exact: true })).toBeVisible();
    await expect(page.locator('[data-navigation-map="original"]')).toBeVisible();
    await expect(page.locator("[data-map-page-content]")).toHaveCSS("display", "none");
    await page.screenshot({ path: "test-results/navigation-map-skeleton.png" });
  } finally { release(); }
  await expect(page).toHaveURL(/\/scada-data-cleaning$/);
  await expect(page.locator("[data-map-page-content]")).toHaveCSS("display", "contents");
  await expect(page.locator('[data-navigation-map="original"]')).toBeVisible();
  await expect(page.getByRole("progressbar", { name: "正在切换页面", exact: true })).toHaveCount(0);
  await page.goBack();
  await expect(page).toHaveURL(/\/network-simulation$/);
  await expect(page.locator('[data-navigation-map="original"]')).toBeVisible();
  await expect(page.getByRole("progressbar", { name: "正在切换页面", exact: true })).toHaveCount(0);
 });
 test("移动端收起菜单后仍显示页面切换反馈，窄屏无溢出", async ({ page }) => {
  await prepare(page);
  await page.setViewportSize({ width: 375, height: 812 });
  await page.goto("/system-admin");
  await page.getByRole("button", { name: "open drawer", exact: true }).click();
  let release: () => void = () => {};
  const gate = new Promise<void>((resolve) => { release = resolve; });
  await page.route("**/audit-logs?*", async (route) => {
    if (route.request().headers().rsc !== "1") return route.fallback();
    await gate;
    await route.continue();
  });
  try {
    await page.getByRole("link", { name: "审计日志", exact: true }).click();
    for (const width of [375, 320]) {
      await page.setViewportSize({ width, height: 812 });
      await expect(page.getByRole("progressbar", { name: "正在切换页面", exact: true })).toBeVisible();
      await expect(page.getByRole("status", { name: "正在加载审计日志", exact: true })).toBeVisible();
      expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
      await page.screenshot({ path: `test-results/navigation-mobile-${width}.png` });
    }
  } finally { release(); }
  await expect(page.getByRole("heading", { name: "审计日志", exact: true })).toBeVisible();
  await expect(page.getByRole("progressbar", { name: "正在切换页面", exact: true })).toHaveCount(0);
 });
@@ -0,0 +1,63 @@
 import { expect, test } from "@playwright/test";
 import { mockBackend } from "./support/mockBackend";
 test("地图缩放不会重新请求已打开的 SCADA 历史数据", async ({ page }) => {
  await mockBackend(page);
  await page.route("**/ows?**", (route) =>
    route.fulfill({
      contentType: "application/json",
      body: JSON.stringify({
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            id: "S-1",
            properties: {
              id: "S-1",
              device_type: "pressure",
              reliability: 0.95,
              transmission_frequency: "00:15:00",
            },
            geometry: { type: "Point", coordinates: [13530000, 3620000] },
          },
        ],
      }),
    }),
  );
  await page.route("**/api/v1/scada-devices", (route) =>
    route.fulfill({
      contentType: "application/json",
      body: JSON.stringify([
        { device_id: "S-1", device_type: "pressure", node_id: "J-1", link_id: null },
      ]),
    }),
  );
  let historyRequests = 0;
  await page.route("**/api/v1/timeseries/views/element-history/query", (route) => {
    historyRequests += 1;
    return route.fulfill({
      contentType: "application/json",
      body: JSON.stringify({ series: [] }),
    });
  });
  await page.goto("/network-simulation");
  await page.getByText("S-1", { exact: true }).click();
  await expect(page.getByText("SCADA 历史数据")).toBeVisible();
  await expect.poll(() => historyRequests).toBe(1);
  const zoomLabel = page.getByText(/缩放: \d+\.\d/);
  const initialZoom = await zoomLabel.textContent();
  // The history drawer covers the map controls. Invoke their real handlers
  // without targeting a covered screen coordinate.
  await page.getByRole("button", { name: "放大" }).evaluate((button: HTMLButtonElement) => button.click());
  await expect(zoomLabel).not.toHaveText(initialZoom!);
  expect(historyRequests).toBe(1);
  await page.getByRole("button", { name: "缩小" }).evaluate((button: HTMLButtonElement) => button.click());
  await expect(zoomLabel).toHaveText(initialZoom!);
  expect(historyRequests).toBe(1);
 });
@@ -0,0 +1,15 @@
 import path from "node:path";
 export const E2E_BASE_URL =
  process.env.E2E_BASE_URL || "http://127.0.0.1:3100";
 export const E2E_AUTH_SECRET =
  process.env.E2E_NEXTAUTH_SECRET ||
  "tjwater-playwright-local-secret-at-least-32-characters";
 export const AUTH_STATE_PATH = path.join(
  process.cwd(),
  "e2e",
  ".auth",
  "user.json",
 );
@@ -0,0 +1,63 @@
 import type { Page, Route } from "@playwright/test";
 const json = (route: Route, body: unknown) =>
  route.fulfill({
    status: 200,
    contentType: "application/json",
    body: JSON.stringify(body),
  });
 export const mockBackend = async (page: Page) => {
  if (process.env.E2E_USE_REAL_SERVICES === "true") return;
  await page.route("**/api/v1/**", async (route) => {
    const url = new URL(route.request().url());
    if (url.pathname === "/api/v1/access-context") {
      return json(route, {
        user_id: "playwright-user",
        username: "playwright",
        system_role: "system_admin",
        is_system_admin: true,
        project_id: "playwright-project",
        project_role: "project_admin",
        permissions: [
          "webgis.view",
          "simulation.view",
          "simulation.run",
          "scada.clean",
          "risk.run",
          "optimization.run",
          "burst.run",
          "audit.view",
          "environment.manage",
        ],
      });
    }
    if (url.pathname === "/api/v1/projects/current") {
      return json(route, {
        project_id: "playwright-project",
        code: "tjwater_e2e",
        gs_workspace: "tjwater_e2e",
        map_extent: {
          bbox: [13508801.93, 3608163.35, 13555650.64, 3633685.14],
        },
      });
    }
    if (url.pathname === "/api/v1/audit-logs/count") {
      return json(route, { count: 0 });
    }
    if (
      url.pathname === "/api/v1/audit-logs" ||
      url.pathname === "/api/v1/admin/users" ||
      url.pathname === "/api/v1/admin/projects"
    ) {
      return json(route, []);
    }
    return json(route, {});
  });
 };
@@ -0,0 +1,281 @@
 import { expect, test } from "@playwright/test";
 import { mockBackend } from "./support/mockBackend";
 test.setTimeout(180_000);
 test("首次加载和失败提示位于工具面板上方，窄屏可直接重试", async ({ page }) => {
  await mockBackend(page);
  await page.addInitScript(() => {
    localStorage.setItem("active_project", "playwright-project");
    localStorage.setItem("MAP_WORKSPACE", "zjb");
    localStorage.setItem("NETWORK_NAME", "zjb");
  });
  let release: () => void = () => {};
  const pending = new Promise<void>((resolve) => { release = resolve; });
  const failedModel = "**/models/detail_roof.glb*";
  await page.route(failedModel, async (route) => { await pending; await route.abort("failed"); });
  await page.goto("/three-dimensional-scene");
  const scene = page.frameLocator('iframe[title="高铁湛江北站供水系统三维场景"]');
  await expect(scene.locator("#boot-title")).toHaveText("正在载入场景资源 9 / 10", { timeout: 60_000 });
  const loadingMaterial = await scene.locator(".boot-panel").evaluate((element) => ({
    background: getComputedStyle(element).backgroundImage,
    blur: getComputedStyle(element).backdropFilter,
  }));
  for (const width of [1280, 375, 320]) {
    await page.setViewportSize({ width, height: 800 });
    expect(await page.evaluate(() => document.elementFromPoint(innerWidth / 2, innerHeight / 2)?.tagName)).toBe("IFRAME");
    await page.screenshot({ path: `test-results/scene-host-loading-${width}.png` });
  }
  release();
  await expect(scene.locator("#boot-title")).toHaveText("场景资源加载失败");
  await page.unroute(failedModel);
  await scene.getByRole("button", { name: "重新载入场景" }).click();
  await expect(scene.locator("#boot")).toBeHidden({ timeout: 60_000 });
  await expect(page.getByRole("slider", { name: /建筑背景透明度/ })).toBeEnabled();
  expect(await page.getByLabel("三维场景控制面板").evaluate((element) => ({
    background: getComputedStyle(element).backgroundImage,
    blur: getComputedStyle(element).backdropFilter,
  }))).toEqual(loadingMaterial);
 });
 type CameraProbe = {
  active: string | null;
  position: number[];
  target: number[];
  up: number[];
 };
 type SceneProbe = {
  errors: string[];
  contextVisible?: boolean;
  camera?: CameraProbe;
  appearance?: { contextOpacity: number };
  networkStyle?: { style: { scale: number } };
 };
 test("三维页面默认展开场景工具并可调建筑透明度", async ({ page }) => {
  await mockBackend(page);
  await page.addInitScript(() => {
    localStorage.setItem("active_project", "playwright-project");
    localStorage.setItem("MAP_WORKSPACE", "zjb");
    localStorage.setItem("NETWORK_NAME", "zjb");
  });
  await page.goto("/three-dimensional-scene");
  await expect(page.getByLabel("三维场景控制面板")).toBeVisible();
  await expect(page.getByRole("tab", { name: "场景" })).toHaveAttribute(
    "aria-selected",
    "true",
  );
  const opacitySlider = page.getByRole("slider", {
    name: /建筑背景透明度/,
  });
  await expect(opacitySlider).toBeEnabled({ timeout: 60_000 });
  await expect(opacitySlider).toHaveAccessibleName("建筑背景透明度 60%");
  const backgroundToggle = page.getByRole("switch", { name: "建筑背景" });
  await backgroundToggle.evaluate((element) =>
    element.scrollIntoView({ block: "center" }),
  );
  const panel = page.getByLabel("三维场景控制面板");
  const panelBeforeToggle = await panel.boundingBox();
  const panelScrollBeforeToggle = await panel.locator(".overflow-y-auto").evaluate(
    (element) => element.scrollTop,
  );
  await backgroundToggle.click();
  await expect(backgroundToggle).toHaveAttribute("aria-checked", "false");
  const panelAfterToggle = await panel.boundingBox();
  const panelScrollAfterToggle = await panel.locator(".overflow-y-auto").evaluate(
    (element) => element.scrollTop,
  );
  expect(panelAfterToggle).toEqual(panelBeforeToggle);
  expect(panelScrollAfterToggle).toBe(panelScrollBeforeToggle);
  await page.setViewportSize({ width: 375, height: 812 });
  const mobilePanelBeforeToggle = await panel.boundingBox();
  await backgroundToggle.click();
  await expect(backgroundToggle).toHaveAttribute("aria-checked", "true");
  const mobilePanelAfterToggle = await panel.boundingBox();
  expect(mobilePanelAfterToggle).toEqual(mobilePanelBeforeToggle);
  await expect(opacitySlider).toBeEnabled();
  expect(
    await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth),
  ).toBe(true);
 });
 test("全部预设使用稳定且紧凑的场景视角", async ({ page }) => {
  await page.goto(
    "/three-dimensional/zjb/v29/preview.html?host=platform2&v=32-context-opacity-test",
  );
  await expect(page.locator("#boot")).toBeHidden({ timeout: 60_000 });
  const sceneProbe = () =>
    page.evaluate(
      () =>
        (window as typeof window & { webQA: SceneProbe }).webQA,
    );
  await expect.poll(async () => (await sceneProbe()).camera?.active).toBe("overview");
  const initialProbe = await sceneProbe();
  const overview = initialProbe.camera;
  expect(overview?.up[1]).toBeGreaterThan(0.8);
  expect(initialProbe.appearance?.contextOpacity).toBe(0.4);
  expect(initialProbe.networkStyle?.style.scale).toBe(6);
  await page.evaluate(() =>
    window.postMessage(
      {
        channel: "tjwater:zjb-scene",
        version: 2,
        type: "command",
        projectCode: "zjb",
        modelId: "zjb-water-network-v23",
        command: { name: "set-appearance", patch: { contextOpacity: 0.35 } },
      },
      window.location.origin,
    ),
  );
  await expect
    .poll(async () => (await sceneProbe()).appearance?.contextOpacity)
    .toBe(0.35);
  const cameraBeforeContextToggle = (await sceneProbe()).camera;
  await page.evaluate(() =>
    window.postMessage(
      {
        channel: "tjwater:zjb-scene",
        version: 2,
        type: "command",
        projectCode: "zjb",
        modelId: "zjb-water-network-v23",
        command: { name: "toggle-context" },
      },
      window.location.origin,
    ),
  );
  await expect.poll(async () => (await sceneProbe()).contextVisible).toBe(false);
  const cameraAfterContextToggle = (await sceneProbe()).camera;
  expect(cameraAfterContextToggle?.position).toEqual(cameraBeforeContextToggle?.position);
  expect(cameraAfterContextToggle?.target).toEqual(cameraBeforeContextToggle?.target);
  await page.evaluate(() =>
    window.postMessage(
      {
        channel: "tjwater:zjb-scene",
        version: 2,
        type: "command",
        projectCode: "zjb",
        modelId: "zjb-water-network-v23",
        command: { name: "toggle-context" },
      },
      window.location.origin,
    ),
  );
  await page.evaluate(() =>
    window.postMessage(
      {
        channel: "tjwater:zjb-scene",
        version: 2,
        type: "command",
        projectCode: "zjb",
        modelId: "zjb-water-network-v23",
        command: { name: "visit-camera", viewId: "plan" },
      },
      window.location.origin,
    ),
  );
  await expect.poll(async () => (await sceneProbe()).camera?.active).toBe("plan");
  await expect
    .poll(async () => {
      const camera = (await sceneProbe()).camera;
      return Math.max(
        Math.abs((camera?.position[0] ?? 0) - (camera?.target[0] ?? 1)),
        Math.abs((camera?.position[2] ?? 0) - (camera?.target[2] ?? 1)),
      );
    })
    .toBeLessThan(0.01);
  const planProbe = await sceneProbe();
  const plan = planProbe.camera;
  expect(planProbe.errors).toEqual([]);
  expect(Math.abs((plan?.position[0] ?? 0) - (plan?.target[0] ?? 1))).toBeLessThan(0.01);
  expect(Math.abs((plan?.position[2] ?? 0) - (plan?.target[2] ?? 1))).toBeLessThan(0.01);
  expect(plan?.up[0]).toBeCloseTo(0, 6);
  expect(plan?.up[1]).toBeCloseTo(0, 6);
  expect(plan?.up[2]).toBeCloseTo(-1, 6);
  for (const viewId of [
    "pump",
    "hydraulic",
    "singlePump",
    "main",
    "meter",
    "crossing",
    "station",
    "riser",
  ]) {
    await page.evaluate((nextViewId) =>
      window.postMessage(
        {
          channel: "tjwater:zjb-scene",
          version: 2,
          type: "command",
          projectCode: "zjb",
          modelId: "zjb-water-network-v23",
          command: { name: "visit-camera", viewId: nextViewId },
        },
        window.location.origin,
      ),
      viewId,
    );
    await expect.poll(async () => (await sceneProbe()).camera?.active).toBe(viewId);
    const presetProbe = await sceneProbe();
    expect(presetProbe.errors).toEqual([]);
    expect(presetProbe.camera?.position.every(Number.isFinite)).toBe(true);
    expect(presetProbe.camera?.target.every(Number.isFinite)).toBe(true);
    expect(presetProbe.camera?.up[1]).toBeGreaterThan(0.99);
  }
  const occupancy = await page.evaluate(async () => {
    const threeUrl =
      "/three-dimensional/zjb/v29/vendor/three/three.module.js";
    const navigationUrl =
      "/three-dimensional/zjb/v29/camera-navigation.mjs?v=31-camera-presets-test";
    const THREE = await import(threeUrl);
    const { framePose } = await import(navigationUrl);
    const aspect = 16 / 9;
    const box = new THREE.Box3(
      new THREE.Vector3(-330, 0, -205),
      new THREE.Vector3(330, 15, 205),
    );
    const pose = framePose(box, aspect, {
      direction: [0, 1, 0],
      up: [0, 0, -1],
      padding: 1.04,
    });
    const camera = new THREE.PerspectiveCamera(42, aspect, 0.1, 10_000);
    camera.position.fromArray(pose.position);
    camera.up.fromArray(pose.up);
    camera.lookAt(new THREE.Vector3(...pose.target));
    camera.updateProjectionMatrix();
    camera.updateMatrixWorld();
    const points = [
      [-330, 0, -205],
      [-330, 0, 205],
      [-330, 15, -205],
      [-330, 15, 205],
      [330, 0, -205],
      [330, 0, 205],
      [330, 15, -205],
      [330, 15, 205],
    ].map((point) => new THREE.Vector3(...point).project(camera));
    return {
      x: Math.max(...points.map((point) => Math.abs(point.x))),
      y: Math.max(...points.map((point) => Math.abs(point.y))),
    };
  });
  expect(occupancy.x).toBeLessThanOrEqual(1);
  expect(occupancy.y).toBeLessThanOrEqual(1);
  expect(Math.max(occupancy.x, occupancy.y)).toBeGreaterThan(0.9);
 });
@@ -0,0 +1,304 @@
 import { expect, test } from "@playwright/test";
 const root = "/three-dimensional/zjb/v29/";
 const preview = root + "preview.html?host=platform2&v=36-resumable-cache";
 const isAsset = (url: string) => /\.glb(?:\?|$)|water-network-v28\.json/.test(url);
 test.setTimeout(120_000);
 test("HTTP 200 的错误元数据不会进入缓存，服务器恢复后重试成功", async ({ page }) => {
  let requests = 0;
  await page.route("**/water-network-v28.json*", async (route) => {
    requests++;
    if (requests === 1) return route.fulfill({ json: { error: "temporary proxy failure" } });
    return route.continue();
  });
  await page.goto(preview);
  await expect(page.locator("#boot")).toHaveAttribute("data-state", "error", { timeout: 60_000 });
  const cached = await page.evaluate((base) => new Promise((resolve, reject) => {
    const request = indexedDB.open("tjwater-scene-assets-v1", 1);
    request.onerror = () => reject(request.error);
    request.onsuccess = () => {
      const database = request.result;
      const read = database.transaction("resources").objectStore("resources").get(new URL(base + "water-network-v28.json", location.origin).href);
      read.onsuccess = () => { resolve(Boolean(read.result)); database.close(); };
      read.onerror = () => { reject(read.error); database.close(); };
    };
  }), root);
  expect(cached).toBe(false);
  await page.getByRole("button", { name: "重新载入场景" }).click();
  await expect(page.locator("#boot")).toBeHidden({ timeout: 60_000 });
  expect(requests).toBe(5);
 });
 test("模型和元数据跨页面复用持久缓存，即使服务器资源不可用也能重开场景", async ({ page, context }) => {
  const requests: string[] = [];
  let block = false;
  // Routing disables HTTP cache, so this checks IndexedDB rather than browser HTTP caching.
  await context.route("**/three-dimensional/**", (route) => {
    if (isAsset(route.request().url())) {
      requests.push(route.request().url());
      if (block) return route.abort("failed");
    }
    return route.continue();
  });
  const coldStart = Date.now();
  await page.goto(preview);
  await expect(page.locator("#boot")).toBeHidden({ timeout: 60_000 });
  const coldMs = Date.now() - coldStart;
  expect(new Set(requests).size).toBe(10);
  requests.length = 0;
  block = true;
  await page.close();
  const reopened = await context.newPage();
  const warmStart = Date.now();
  await reopened.goto(preview);
  await expect(reopened.locator("#boot")).toBeHidden({ timeout: 60_000 });
  expect(await reopened.evaluate(() =>
    (window as typeof window & { webQA: { camera: { active: string } } }).webQA.camera.active,
  )).toBe("overview");
  expect(requests).toEqual([]);
  console.log(JSON.stringify({ coldMs, warmMs: Date.now() - warmStart, warmAssetRequests: requests.length }));
 });
 test("首次载入显示真实进度，失败保留提示，重试可以恢复", async ({ page }) => {
  let release: () => void = () => {};
  const pending = new Promise<void>((resolve) => { release = resolve; });
  const failedModel = "**/models/detail_roof.glb*";
  await page.route(failedModel, async (route) => { await pending; await route.abort("failed"); });
  await page.goto(preview);
  await expect(page.locator("#boot-title")).toHaveText("正在载入场景资源 9 / 10", { timeout: 60_000 });
  await expect(page.getByRole("progressbar")).toHaveAttribute("value", "9");
  await expect(page.locator("#boot-detail")).toContainText(/已读取 \d+\.\d MB/);
  await page.screenshot({ path: "test-results/scene-loading-desktop.png" });
  await page.setViewportSize({ width: 320, height: 640 });
  await page.screenshot({ path: "test-results/scene-loading-mobile.png" });
  expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
  release();
  await expect(page.locator("#boot-title")).toHaveText("场景资源加载失败");
  await expect(page.locator("#boot-detail")).toContainText("detail_roof.glb");
  await expect(page.locator("#boot")).toHaveAttribute("aria-busy", "false");
  await expect(page.getByRole("button", { name: "重新载入场景" })).toBeVisible();
  await page.screenshot({ path: "test-results/scene-loading-error.png" });
  await page.unroute(failedModel);
  await page.getByRole("button", { name: "重新载入场景" }).click();
  await expect(page.locator("#boot")).toBeHidden({ timeout: 60_000 });
 });
 test("同一资源合并并发请求，摘要改变后重新下载并覆盖旧缓存", async ({ page }) => {
  let requests = 0;
  await page.route("**/cache-probe.json*", (route) => {
    requests++;
    return route.fulfill({ json: { revision: new URL(route.request().url()).searchParams.get("v") } });
  });
  await page.goto(root + "manifest.json");
  const result = await page.evaluate(async (base) => {
    const moduleUrl = base + "resourceCache.mjs";
    const { createSceneResourceCache } = await import(moduleUrl);
    const cache = createSceneResourceCache(location.origin + base);
    const decode = (data: ArrayBuffer) => JSON.parse(new TextDecoder().decode(data));
    const first = await Promise.all([
      cache.load("cache-probe.json", "first", decode),
      cache.load("cache-probe.json", "first", decode),
    ]);
    const updated = await cache.load("cache-probe.json", "second", decode);
    const freshClient = createSceneResourceCache(location.origin + base);
    const cached = await freshClient.load("cache-probe.json", "second", decode);
    return { first, updated, cached };
  }, root);
  expect(requests).toBe(2);
  expect(result.first).toEqual([{ revision: "first" }, { revision: "first" }]);
  expect(result.updated).toEqual({ revision: "second" });
  expect(result.cached).toEqual({ revision: "second" });
 });
 for (const failure of ["denied", "quota"] as const) {
  test(`浏览器缓存${failure === "denied" ? "被禁用" : "空间不足"}时仍可下载并解析资源`, async ({ page }) => {
    await page.goto(root + "manifest.json");
    await page.route("**/cache-probe.json*", (route) => route.fulfill({ json: { ok: true } }));
    const result = await page.evaluate(async ({ base, failure }) => {
      if (failure === "denied") {
        Object.defineProperty(window, "indexedDB", { get() { throw new Error("denied"); } });
      } else {
        const transaction = IDBDatabase.prototype.transaction;
        IDBDatabase.prototype.transaction = function (...args: Parameters<typeof transaction>) {
          if (args[1] === "readwrite") throw new DOMException("Full", "QuotaExceededError");
          return transaction.apply(this, args);
        };
      }
      const moduleUrl = base + "resourceCache.mjs";
      const { createSceneResourceCache } = await import(moduleUrl);
      const cache = createSceneResourceCache(location.origin + base);
      return cache.load("cache-probe.json", "first", (data: ArrayBuffer) => JSON.parse(new TextDecoder().decode(data)));
    }, { base: root, failure });
    expect(result).toEqual({ ok: true });
  });
 }
 test("HTTP 错误和解析失败不会写入缓存，下一次请求可恢复", async ({ page }) => {
  let requests = 0;
  await page.route("**/cache-probe.json*", (route) => {
    requests++;
    return requests === 1
      ? route.fulfill({ status: 404, body: "not found" })
      : requests === 2
        ? route.fulfill({ body: "invalid json" })
        : route.fulfill({ json: { ok: true } });
  });
  await page.goto(root + "manifest.json");
  const result = await page.evaluate(async (base) => {
    const moduleUrl = base + "resourceCache.mjs";
    const { createSceneResourceCache } = await import(moduleUrl);
    const cache = createSceneResourceCache(location.origin + base);
    const decode = (data: ArrayBuffer) => JSON.parse(new TextDecoder().decode(data));
    const errors: string[] = [];
    for (let attempt = 0; attempt < 2; attempt++) {
      try { await cache.load("cache-probe.json", "first", decode); }
      catch (error) { errors.push(String(error)); }
    }
    return { errors, recovered: await cache.load("cache-probe.json", "first", decode) };
  }, root);
  expect(requests).toBe(3);
  expect(result.errors).toHaveLength(2);
  expect(result.errors[0]).toContain("HTTP 404");
  expect(result.recovered).toEqual({ ok: true });
 });
 test("公网整文件中断时分段下载，重试失败分段并缓存完整模型", async ({ page }) => {
  const { readFile } = await import("node:fs/promises");
  const { createHash } = await import("node:crypto");
  const bytes = await readFile("public/three-dimensional/zjb/v29/models/detail_interior.glb");
  const ranges: string[] = [];
  let interrupted = false;
  await page.route("**/models/detail_interior.glb*", async (route) => {
    const range = route.request().headers().range;
    ranges.push(range ?? "whole-file");
    // The public proxy drops whole-file responses, and one partial request drops too.
    if (!range) return route.abort("failed");
    if (range.startsWith("bytes=1048576-") && !interrupted) {
      interrupted = true;
      return route.abort("failed");
    }
    const match = /^bytes=(\d+)-(\d+)$/.exec(range)!;
    const start = Number(match[1]);
    const end = Math.min(Number(match[2]), bytes.length - 1);
    return route.fulfill({ status: 206, headers: {
      "content-type": "model/gltf-binary",
      "content-range": `bytes ${start}-${end}/${bytes.length}`,
    }, body: bytes.subarray(start, end + 1) });
  });
  await page.goto(root + "manifest.json");
  const result = await page.evaluate(async (base) => {
    const { createSceneResourceCache } = await import(base + "resourceCache.mjs");
    const load = () => createSceneResourceCache(location.origin + base).load("models/detail_interior.glb", "range-recovery");
    const data = await load();
    const cached = await load();
    return { length: data.byteLength, cachedLength: cached.byteLength,
      sha256: Array.from(new Uint8Array(await crypto.subtle.digest("SHA-256", data)), n => n.toString(16).padStart(2, "0")).join("") };
  }, root);
  expect(result).toEqual({ length: bytes.length, cachedLength: bytes.length, sha256: createHash("sha256").update(bytes).digest("hex") });
  expect(ranges).toHaveLength(7);
  expect(ranges[0]).toBe("bytes=0-1048575");
  expect(ranges[1]).toBe(ranges[2]);
  expect(interrupted).toBe(true);
 });
 for (const fault of ["offset", "total", "truncated", "whole-response"] as const) {
  test(`无效分段响应 ${fault} 不会进入缓存，恢复后可重新下载`, async ({ page }) => {
    const bytes = Buffer.alloc(1048576 + 16, 7);
    let broken = true;
    let requests = 0;
    await page.route("**/range-probe.bin*", (route) => {
      requests++;
      const range = route.request().headers().range;
      if (!range) return route.abort("failed");
      const match = /^bytes=(\d+)-(\d+)$/.exec(range)!;
      const start = Number(match[1]);
      const end = Math.min(Number(match[2]), bytes.length - 1);
      if (broken && start > 0 && fault === "whole-response") return route.fulfill({ body: bytes });
      return route.fulfill({ status: 206, headers: {
        "content-range": `bytes ${broken && start > 0 && fault === "offset" ? 0 : start}-${end}/${bytes.length + (broken && start > 0 && fault === "total" ? 1 : 0)}`,
      }, body: bytes.subarray(start, end + (broken && start > 0 && fault === "truncated" ? 0 : 1)) });
    });
    await page.goto(root + "manifest.json");
    const failed = await page.evaluate(async (base) => {
      const { createSceneResourceCache } = await import(base + "resourceCache.mjs");
      try { await createSceneResourceCache(location.origin + base).load("range-probe.bin", "first"); return false; }
      catch { return true; }
    }, root);
    expect(failed).toBe(true);
    const before = requests;
    broken = false;
    const length = await page.evaluate(async (base) => {
      const { createSceneResourceCache } = await import(base + "resourceCache.mjs");
      return (await createSceneResourceCache(location.origin + base).load("range-probe.bin", "first")).byteLength;
    }, root);
    expect(length).toBe(bytes.length);
    // The valid first segment survives; only the rejected final segment is fetched again.
    expect(requests - before).toBe(1);
  });
 }
 test("下载中断后刷新页面，从已保存的分段继续下载", async ({ page }) => {
  const bytes = Buffer.alloc(2 * 1048576 + 16, 9);
  let disconnected = true;
  const ranges: string[] = [];
  await page.route("**/resume-probe.bin*", (route) => {
    const range = route.request().headers().range;
    ranges.push(range ?? "whole-file");
    if (!range) return route.abort("failed");
    const match = /^bytes=(\d+)-(\d+)$/.exec(range)!;
    const start = Number(match[1]);
    const end = Math.min(Number(match[2]), bytes.length - 1);
    if (disconnected && start > 0) return route.abort("failed");
    return route.fulfill({ status: 206, headers: { "content-range": `bytes ${start}-${end}/${bytes.length}` }, body: bytes.subarray(start, end + 1) });
  });
  await page.goto(root + "manifest.json");
  const load = (base: string) => page.evaluate(async (base) => {
    const { createSceneResourceCache } = await import(base + "resourceCache.mjs");
    try {
      const data = await createSceneResourceCache(location.origin + base).load("resume-probe.bin", "first");
      return { length: data.byteLength, failed: false };
    } catch { return { failed: true }; }
  }, base);
  expect(await load(root)).toEqual({ failed: true });
  expect(ranges.filter(range => range === "bytes=1048576-2097151")).toHaveLength(3);
  disconnected = false;
  ranges.length = 0;
  await page.reload();
  expect(await load(root)).toEqual({ length: bytes.length, failed: false });
  expect(ranges).toEqual(["bytes=1048576-2097151", "bytes=2097152-2097167"]);
 });
 test("临时 HTTP 503 自动重试，成功后才写入缓存", async ({ page }) => {
  let requests = 0;
  await page.route("**/retry-probe.json*", (route) => {
    requests++;
    return requests < 3 ? route.fulfill({ status: 503, body: "unavailable" }) : route.fulfill({ json: { ok: true } });
  });
  await page.goto(root + "manifest.json");
  const result = await page.evaluate(async (base) => {
    const { createSceneResourceCache } = await import(base + "resourceCache.mjs");
    const stages: string[] = [];
    const cache = createSceneResourceCache(location.origin + base, ({ stage }: { stage: string }) => stages.push(stage));
    const data = await cache.load("retry-probe.json", "first", (data: ArrayBuffer) => JSON.parse(new TextDecoder().decode(data)));
    return { data, retries: stages.filter(stage => stage === "retry").length };
  }, root);
  expect(result).toEqual({ data: { ok: true }, retries: 2 });
  expect(requests).toBe(3);
 });
 test("服务器返回空的完整响应时只解析一次，不循环下载", async ({ page }) => {
  let requests = 0;
  await page.route("**/empty-probe.json*", (route) => { requests++; return route.fulfill({ body: "" }); });
  await page.goto(root + "manifest.json");
  const failed = await page.evaluate(async (base) => {
    const { createSceneResourceCache } = await import(base + "resourceCache.mjs");
    try {
      await createSceneResourceCache(location.origin + base).load("empty-probe.json", "first", (data: ArrayBuffer) => JSON.parse(new TextDecoder().decode(data)));
      return false;
    } catch { return true; }
  }, root);
  expect(failed).toBe(true);
  expect(requests).toBe(1);
 });
@@ -0,0 +1,12 @@
 import { expect, test } from "@playwright/test";
 test("未登录访问受保护页面时返回登录重定向", async ({ request }) => {
  const sessionResponse = await request.get("/api/auth/session");
  expect(await sessionResponse.json()).toEqual({});
  const response = await request.get("/audit-logs", { maxRedirects: 0 });
  const body = await response.text();
  expect(response.status()).toBe(200);
  expect(body).toContain("NEXT_REDIRECT;replace;/login;307;");
 });
@@ -1,5 +1,10 @@
 import nextCoreWebVitals from "eslint-config-next/core-web-vitals";
-const config = [...nextCoreWebVitals];
+const config = [
  {
    ignores: ["public/three-dimensional/**/vendor/**"],
  },
  ...nextCoreWebVitals,
 ];
 export default config;
@@ -9,6 +9,7 @@ const createJestConfig = nextJest({
 const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testEnvironment: 'jest-environment-jsdom',
  testPathIgnorePatterns: ['<rootDir>/e2e/'],
  moduleNameMapper: {
    '^@pages/(.*)$': '<rootDir>/pages/$1',
    '^@/(.*)$': '<rootDir>/src/$1',
@@ -18,6 +18,37 @@ const nextConfig = {
      },
    },
  },
  async headers() {
    return [
      {
        source: "/three-dimensional/zjb/v29/models/:path*",
        headers: [
          {
            key: "Cache-Control",
            value: "public, max-age=2592000, immutable",
          },
        ],
      },
      {
        source: "/three-dimensional/zjb/v29/vendor/:path*",
        headers: [
          {
            key: "Cache-Control",
            value: "public, max-age=2592000, immutable",
          },
        ],
      },
      {
        source: "/three-dimensional/zjb/v29/water-network-v28.json",
        headers: [
          {
            key: "Cache-Control",
            value: "public, max-age=2592000, immutable",
          },
        ],
      },
    ];
  },
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
@@ -48,6 +48,7 @@
        "zustand": "^5.0.11"
      },
      "devDependencies": {
        "@playwright/test": "^1.63.0",
        "@svgr/webpack": "^8.1.0",
        "@testing-library/dom": "^10.4.1",
        "@testing-library/jest-dom": "^6.9.1",
@@ -5710,6 +5711,22 @@
        "url": "https://opencollective.com/pkgr"
      }
    },
    "node_modules/@playwright/test": {
      "version": "1.63.0",
      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.63.0.tgz",
      "integrity": "sha512-oxMK4vllB9RK5NQ2l1pq1IfOf2AvnEuj/vYGDj0H2nMtmtZpKtCwt/l00GEO6xjGfpBNAvjovvYdCm50dRQkpQ==",
      "dev": true,
      "license": "Apache-2.0",
      "dependencies": {
        "playwright": "1.63.0"
      },
      "bin": {
        "playwright": "cli.js"
      },
      "engines": {
        "node": ">=20"
      }
    },
    "node_modules/@popperjs/core": {
      "version": "2.11.8",
      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -19080,6 +19097,35 @@
        "node": ">= 6"
      }
    },
    "node_modules/playwright": {
      "version": "1.63.0",
      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.63.0.tgz",
      "integrity": "sha512-+7ziBLidS4NaNCdt57SUDT+wYmmd5fmiQejUic/kb+YsYSCPyOOE9sebzMjNmQrsnNpDJqd4WHvV/8lfKfUDUg==",
      "dev": true,
      "license": "Apache-2.0",
      "dependencies": {
        "playwright-core": "1.63.0"
      },
      "bin": {
        "playwright": "cli.js"
      },
      "engines": {
        "node": ">=20"
      }
    },
    "node_modules/playwright-core": {
      "version": "1.63.0",
      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.63.0.tgz",
      "integrity": "sha512-rYCsBF/M5HjUch52bbtVONEFjv6Xu8sm8h72dNlR5bzIE1fvC/bxgspzkjSfU+MweEMmPM8KJebG6nnyxo5mCg==",
      "dev": true,
      "license": "Apache-2.0",
      "bin": {
        "playwright-core": "cli.js"
      },
      "engines": {
        "node": ">=20"
      }
    },
    "node_modules/pluralize": {
      "version": "8.0.0",
      "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
@@ -14,6 +14,12 @@
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "test:e2e": "playwright test",
    "test:e2e:ui": "playwright test --ui",
    "test:e2e:debug": "playwright test --debug",
    "test:e2e:report": "playwright show-report",
    "e2e:install": "playwright install chromium",
    "e2e:serve": "node scripts/startE2eServer.mjs",
    "api:generate": "openapi-typescript contracts/server-v1.openapi.json -o src/generated/serverApi.ts && openapi-typescript contracts/agent-v1.openapi.json -o src/generated/agentApi.ts",
    "api:check": "node scripts/check-api-contracts.mjs",
    "pipeline:trigger": "bash scripts/trigger-gitea-pipeline.sh"
@@ -64,6 +70,7 @@
    "sharp": "0.35.3"
  },
  "devDependencies": {
    "@playwright/test": "^1.63.0",
    "@svgr/webpack": "^8.1.0",
    "@testing-library/dom": "^10.4.1",
    "@testing-library/jest-dom": "^6.9.1",
@@ -0,0 +1,66 @@
 import { defineConfig, devices } from "@playwright/test";
 import {
  AUTH_STATE_PATH,
  E2E_AUTH_SECRET,
  E2E_BASE_URL,
 } from "./e2e/support/environment";
 const externalServer = Boolean(process.env.E2E_BASE_URL);
 const storageState = process.env.E2E_STORAGE_STATE || AUTH_STATE_PATH;
 export default defineConfig({
  testDir: "./e2e",
  fullyParallel: true,
  forbidOnly: Boolean(process.env.CI),
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  expect: { timeout: 30_000 },
  reporter: process.env.CI
    ? [["line"], ["html", { open: "never" }]]
    : [["list"], ["html", { open: "never" }]],
  outputDir: "test-results",
  globalSetup: "./e2e/globalSetup.ts",
  use: {
    baseURL: E2E_BASE_URL,
    locale: "zh-CN",
    timezoneId: "Asia/Shanghai",
    launchOptions: process.env.E2E_CHROMIUM_PATH
      ? { executablePath: process.env.E2E_CHROMIUM_PATH }
      : undefined,
    trace: "retain-on-failure",
    screenshot: "only-on-failure",
    video: "retain-on-failure",
  },
  projects: [
    {
      name: "chromium-public",
      testMatch: /unauthenticated\.spec\.ts/,
      use: { ...devices["Desktop Chrome"] },
    },
    {
      name: "chromium-authenticated",
      testIgnore: /unauthenticated\.spec\.ts/,
      use: {
        ...devices["Desktop Chrome"],
        storageState,
      },
    },
  ],
  webServer: externalServer
    ? undefined
    : {
        command:
          "npm run runtime:config && npm run build && npm run e2e:serve",
        url: E2E_BASE_URL,
        reuseExistingServer: false,
        timeout: 120_000,
        env: {
          NEXTAUTH_URL: E2E_BASE_URL,
          NEXTAUTH_SECRET: E2E_AUTH_SECRET,
          KEYCLOAK_CLIENT_ID: "tjwater-e2e",
          KEYCLOAK_CLIENT_SECRET: "tjwater-e2e",
          KEYCLOAK_ISSUER: "http://127.0.0.1:8180/realms/tjwater-e2e",
        },
      },
 });
@@ -0,0 +1,136 @@
 import * as THREE from 'three';
 import {RoomEnvironment} from 'three/addons/environments/RoomEnvironment.js';
 // Runtime-only material treatment. No geometry, hydraulic data or source GLB edits.
 // Surface grains are illustrative, not measured site textures. World-space detail
 // avoids inventing UVs for the CAD meshes, and fades below the pixel footprint.
 const noiseGLSL=`
 varying vec3 vSurfaceWorld;
 float grainHash(vec3 p){p=fract(p*.1031);p+=dot(p,p.yzx+33.33);return fract((p.x+p.y)*p.z);}
 float grainNoise(vec3 p){vec3 i=floor(p),f=fract(p);f=f*f*(3.-2.*f);
 return mix(mix(mix(grainHash(i),grainHash(i+vec3(1,0,0)),f.x),mix(grainHash(i+vec3(0,1,0)),grainHash(i+vec3(1,1,0)),f.x),f.y),mix(mix(grainHash(i+vec3(0,0,1)),grainHash(i+vec3(1,0,1)),f.x),mix(grainHash(i+vec3(0,1,1)),grainHash(i+vec3(1,1,1)),f.x),f.y),f.z);}
 `;
 export function grain(material,{frequency=180,amplitude=.00008,variation=.04,colorVariation=0}={}){
 material.onBeforeCompile=shader=>{
  shader.vertexShader=shader.vertexShader.replace('#include <common>','#include <common>\nvarying vec3 vSurfaceWorld;').replace('#include <project_vertex>','#include <project_vertex>\nvec4 surfacePosition=vec4(transformed,1.0);\n#ifdef USE_INSTANCING\nsurfacePosition=instanceMatrix*surfacePosition;\n#endif\nvSurfaceWorld=(modelMatrix*surfacePosition).xyz;');
  shader.fragmentShader=shader.fragmentShader.replace('#include <common>','#include <common>\n'+noiseGLSL)
   .replace('#include <color_fragment>',`#include <color_fragment>
 float macroFade=1.-smoothstep(.2,1.2,max(length(dFdx(vSurfaceWorld)),length(dFdy(vSurfaceWorld)))*2.7);\ndiffuseColor.rgb*=1.+(grainNoise(vSurfaceWorld*2.7)-.5)*macroFade*${colorVariation.toFixed(4)};`)
   .replace('#include <roughnessmap_fragment>',`#include <roughnessmap_fragment>
 float grainFoot=max(length(dFdx(vSurfaceWorld)),length(dFdy(vSurfaceWorld)))*${frequency.toFixed(1)};
 float grainFade=1.-smoothstep(.25,1.5,grainFoot);
 float surfaceGrain=(grainNoise(vSurfaceWorld*${frequency.toFixed(1)})-.5)*grainFade;
 roughnessFactor=clamp(roughnessFactor+surfaceGrain*${variation.toFixed(4)},.08,1.);`)
   .replace('#include <normal_fragment_maps>',`#include <normal_fragment_maps>
 float grainHeight=surfaceGrain*${amplitude.toFixed(6)};
 vec3 gx=dFdx(-vViewPosition),gy=dFdy(-vViewPosition);
 vec3 rx=cross(gy,normal),ry=cross(normal,gx);float gd=dot(gx,rx);
 normal=normalize(abs(gd)*normal-sign(gd)*(dFdx(grainHeight)*rx+dFdy(grainHeight)*ry));`);
 };
 material.customProgramCacheKey=()=>`zjb-grain-${frequency}-${amplitude}-${variation}-${colorVariation}`;
 }
 export function enhanceMaterials(object){
 const cache=new Map();
 object.traverse(mesh=>{
  if(!mesh.isMesh)return;
  mesh.receiveShadow=true;mesh.castShadow=true;
  const convert=source=>{
   if(cache.has(source))return cache.get(source);
   const m=new THREE.MeshPhysicalMaterial();THREE.MeshStandardMaterial.prototype.copy.call(m,source);
   m.name=source.name;m.envMapIntensity=.85;
   const name=m.name.toLowerCase();let surface='paint';
   // Convert display paint swatches from sRGB; the source palette was very pale
   // under environment illumination. Preserve blue / red / green identities.
   if(/v11_blue/.test(name))m.color.set(0x176184);
   if(/v11_red/.test(name))m.color.set(0xad322c);
   if(/v11_out/.test(name))m.color.set(0x267f74);
   if(/v11_white|v11_wall/.test(name))m.color.set(0xcbd0ce);
   if(/v11_floor/.test(name))m.color.set(0x8c9692);
   if(/v3_roofinlay/.test(name))m.color.set(0x59646a);
   else if(/v3_roof|v3_white/.test(name))m.color.set(0xd8dcda);
   if(/v3_v9_road/.test(name))m.color.set(0x3e4648);
   if(/v3.*concrete/.test(name))m.color.set(0x929b96);
   if(/roof/.test(name)){surface='roof-metal';m.metalness=.5;m.roughness=.46;m.clearcoat=.12;m.envMapIntensity=.65;grain(m,{frequency:90,amplitude:.00002,variation:.045});}else if(/glass|water/.test(name)){
    surface='glass';m.metalness=.05;m.roughness=.19;m.clearcoat=1;m.clearcoatRoughness=.09;m.envMapIntensity=1.2;
    // Retain alpha visibility and avoid transmission rendering through inspection cutaways.
   }else if(/steel|lattice|perforated/.test(name)){
    surface='metal';m.metalness=.88;m.roughness=.3;m.envMapIntensity=1.1;grain(m,{frequency:260,amplitude:.00002,variation:.13});
   }else if(/concrete|floor|wall|road/.test(name)){
    surface='mineral';m.metalness=0;m.roughness=/floor/.test(name)?.64:.91;m.envMapIntensity=.3;
    grain(m,{frequency:/road/.test(name)?25:75,amplitude:.001,variation:.16,colorVariation:.1});
   }else if(/seat/.test(name)){
    surface='seat';m.metalness=.04;m.roughness=.66;grain(m,{frequency:360,amplitude:.00012,variation:.15});
   }else if(/light|diffuser|screen/.test(name)){
    surface='luminaire';m.metalness=0;m.roughness=.38;m.emissive.set(0xffe5b7);m.emissiveIntensity=.55;
   }else{
    m.metalness=/dark|black/.test(name)?.58:.23;m.roughness=/roof/.test(name)?.36:.3;
    m.clearcoat=.4;m.clearcoatRoughness=.25;grain(m);
   }
   // Facade coatings need their own optical treatment. Keep generic glass
   // (instruments, water and interiors) separate from the station curtain wall.
   if(/v3_glass|coatedcurtainglass/.test(name)){
    surface='glass';const coated=/coatedcurtain/.test(name);
    m.color.set(coated?0x466b82:0x577e90);m.metalness=coated?.42:.18;
    m.roughness=coated?.1:.13;m.opacity=coated?.78:.58;
    m.transparent=true;m.depthWrite=false;m.clearcoat=.65;
    m.clearcoatRoughness=.08;m.envMapIntensity=1.6;
   }
   m.userData={...source.userData,surfaceTreatment:surface,appearanceRevision:29};cache.set(source,m);return m;
  };
  mesh.material=Array.isArray(mesh.material)?mesh.material.map(convert):convert(mesh.material);
  mesh.castShadow=!(Array.isArray(mesh.material)?mesh.material:[mesh.material]).every(m=>m.userData.surfaceTreatment==='glass');mesh.receiveShadow=mesh.castShadow;
 });
 return cache;
 }
 // Restore the authored appearance on every mode change. In network overview,
 // all architectural context follows the same user-controlled opacity ceiling.
 export function applyBuildingContext(material,fade,contextOpacity=.4){
 const original=material.userData.original??{opacity:material.opacity,transparent:material.transparent,depthWrite:material.depthWrite};
 material.userData.original=original;
 const opacity=THREE.MathUtils.clamp(contextOpacity,0,1),contextualOpacity=Math.min(original.opacity,opacity);
 material.opacity=fade?contextualOpacity:original.opacity;
 material.transparent=fade?(contextualOpacity<1||original.transparent):original.transparent;
 material.depthWrite=fade&&contextualOpacity<1?false:original.depthWrite;material.needsUpdate=true;
 }
 const presets={
 day:{background:0xe2e8e9,ground:0xb9c1bd,key:0xffefdc,keyPower:3.1,fill:.32,env:.45,rim:.85,exposure:.95},
 studio:{background:0x242d34,ground:0x303a40,key:0xfff5e9,keyPower:2.6,fill:.24,env:.8,rim:1.3,exposure:.95},
 evening:{background:0x555d69,ground:0x707574,key:0xffc185,keyPower:3.0,fill:.22,env:.5,rim:.9,exposure:.95},
 };
 export function createAppearance(renderer,scene){
 renderer.outputColorSpace=THREE.SRGBColorSpace;
 renderer.toneMapping=THREE.ACESFilmicToneMapping;
 renderer.shadowMap.enabled=true;renderer.shadowMap.type=THREE.PCFShadowMap;renderer.shadowMap.autoUpdate=false;
 const pmrem=new THREE.PMREMGenerator(renderer),room=new RoomEnvironment();
 const environment=pmrem.fromScene(room,.04);room.dispose();pmrem.dispose();scene.environment=environment.texture;
 const fill=new THREE.HemisphereLight(0xcde3ff,0x716658,.75),sun=new THREE.DirectionalLight(0xffefdc,3.2),rim=new THREE.DirectionalLight(0xc1dbff,1.);
 sun.castShadow=true;sun.shadow.mapSize.set(2048,2048);sun.shadow.radius=3;sun.shadow.bias=-.00008;sun.shadow.normalBias=.018;
 scene.add(fill,sun,sun.target,rim,rim.target);
 const floorMat=new THREE.MeshStandardMaterial({color:0xb9c1bd,roughness:.94,metalness:0});grain(floorMat,{frequency:45,amplitude:.0006,variation:.12,colorVariation:.035});
 const floor=new THREE.Mesh(new THREE.PlaneGeometry(1,1),floorMat);floor.rotation.x=-Math.PI/2;floor.receiveShadow=true;floor.userData.displayOnly=true;floor.name='Presentation ground (not CAD)';scene.add(floor);
 let current='day',shadowEnabled=true,lastBox,lastMode;
 const state={revision:27,preset:current,environment:'offline studio PMREM',shadows:true,proceduralSurfaces:true,groundIsPresentationOnly:true};
 function refresh(){if(lastMode==='hydraulic'){let y=Infinity;for(const o of scene.children)if(o.visible&&o.isGroup){const b=new THREE.Box3().setFromObject(o);if(!b.isEmpty())y=Math.min(y,b.min.y-.3);}if(Number.isFinite(y))floor.position.y=y;}renderer.shadowMap.needsUpdate=true;}
 function frame(box,mode){
  if(box.isEmpty())return;lastBox=box.clone();lastMode=mode;
  const c=box.getCenter(new THREE.Vector3()),size=box.getSize(new THREE.Vector3()),radius=Math.max(size.length()/2,2),extent=Math.max(size.x,size.z,4)*.7;
  const p=presets[current];
  sun.target.position.copy(c);sun.position.copy(c).add(new THREE.Vector3(-.8,current==='evening'?.7:1.8,.95).multiplyScalar(radius*2));
  rim.target.position.copy(c);rim.position.copy(c).add(new THREE.Vector3(1,.5,-1).multiplyScalar(radius*2));
  Object.assign(sun.shadow.camera,{left:-extent,right:extent,top:extent,bottom:-extent,near:.1,far:radius*9});sun.shadow.camera.updateProjectionMatrix();sun.shadow.normalBias=radius>100?.15:.055;
  floor.visible=mode!=='network';
  let groundY=box.min.y-.06;if(mode==='hydraulic'){for(const o of scene.children)if(o.visible&&o.isGroup){const b=new THREE.Box3().setFromObject(o);if(!b.isEmpty())groundY=Math.min(groundY,b.min.y-.3);}}floor.position.set(c.x,groundY,c.z);floor.scale.setScalar(Math.max(size.x,size.z,4)*12);
  scene.fog=['network','hydraulic'].includes(mode)?null:new THREE.Fog(p.background,radius*8,radius*25);
  sun.castShadow=shadowEnabled&&mode!=='network';state.activeShadows=sun.castShadow;state.presentationGroundVisible=floor.visible;refresh();
 }
 function preset(name){current=presets[name]?name:'day';const p=presets[current];scene.background=new THREE.Color(p.background);floorMat.color.set(p.ground);sun.color.set(p.key);sun.intensity=p.keyPower;fill.intensity=p.fill;rim.intensity=p.rim;scene.environmentIntensity=p.env;renderer.toneMappingExposure=p.exposure;state.preset=current;state.exposure=p.exposure;if(lastBox)frame(lastBox,lastMode);refresh();}
 preset('day');
 return {state,frame,preset,refresh,exposure(value){renderer.toneMappingExposure=value;state.exposure=value;},shadows(enabled){shadowEnabled=enabled;state.shadows=enabled;if(lastBox)frame(lastBox,lastMode);},dispose(){environment.dispose();floor.geometry.dispose();floorMat.dispose();sun.shadow.dispose();scene.remove(fill,sun,sun.target,rim,rim.target,floor);}};
 }
@@ -0,0 +1,131 @@
 import * as THREE from 'three';
 export function createAssetInspector({model,networkRoot,scene,style,onLocate,onSelectionChange=()=>{}}){
 const links=new Map(model.links.map(link=>[link.id,link]));
 const nodes=new Map(model.nodes.map(node=>[node.id,node]));
 const meters=new Map(model.cadEquipmentBindings.map(meter=>[meter.assetId,meter]));
 const halo=new THREE.Group();halo.name='Selection presentation';scene.add(halo);
 const material=new THREE.MeshBasicMaterial({color:0xffbd45,transparent:true,opacity:.35,depthWrite:false,polygonOffset:true,polygonOffsetFactor:-2});
 let selected=null;
 const status=input=>input==null?'暂无数据':({open:'开启',closed:'关闭',active:'调节中'}[String(input).toLowerCase()]??String(input));
 const value=(input,unit)=>typeof input==='number'?input.toFixed(3)+' '+unit:'暂无数据';
 const fields=rows=>rows.map(([label,input])=>({label,value:input==null?'暂无数据':String(input)}));
 function resolve(input){
  let id=String(input);
  if(id.startsWith('zjb:physical_'))id='inp:link:'+id.slice(13);
  const cad=model.cadAttachments?.find(record=>record.assetId===id);
  if(cad)return {assetId:id,id:cad.hostNodeId,node:nodes.get(cad.hostNodeId),cad,kind:'CAD 立管'};
  const meter=meters.get(id);
  if(meter)return {assetId:id,id:meter.inpLinkId,meter,link:links.get(meter.inpLinkId),kind:'流量计'};
  if(id.startsWith('inp:link:'))id=id.slice(9);
  else if(id.startsWith('inp:node:')){
   id=id.slice(9);const node=nodes.get(id);
   if(node)return {assetId:'inp:node:'+id,id,node,kind:'节点'};
  }
  const link=links.get(id);
  if(link)return {assetId:'inp:link:'+id,id,link,kind:{PIPES:'管段',PUMPS:'水泵',VALVES:'阀门'}[link.kind]};
  const node=nodes.get(id);
  if(node)return {assetId:'inp:node:'+id,id,node,kind:'节点'};
  throw Error('未找到构件：'+input);
 }
 function bounds(item=selected){
  const box=new THREE.Box3();if(!item)return box;networkRoot.updateMatrixWorld(true);
  if(item.cad||item.meter||item.link?.kind==='PUMPS'){
   networkRoot.traverse(object=>{if(!object.isMesh&&object.userData.assetId===item.assetId)box.union(new THREE.Box3().setFromObject(object));});
  }
  if(box.isEmpty()){
   const records=item.node?model.nodeInstances:model.pipeInstances;
   const mesh=item.node?style.nodes:style.pipes;
   for(let index=0;index<records.length;index++)if(records[index].inpId===item.id){
    const matrix=new THREE.Matrix4();mesh.getMatrixAt(index,matrix);
    if(!mesh.geometry.boundingBox)mesh.geometry.computeBoundingBox();
    box.union(mesh.geometry.boundingBox.clone().applyMatrix4(matrix).applyMatrix4(mesh.matrixWorld));
   }
  }
  return box;
 }
 function highlight(){
  for(const object of halo.children)if(object.userData.owned){object.geometry.dispose();object.material.dispose();}
  halo.clear();if(!selected||!networkRoot.visible)return;
  if(selected.cad||selected.meter||selected.link?.kind==='PUMPS'){
   const box=bounds();if(!box.isEmpty()){const helper=new THREE.Box3Helper(box,0xffbd45);helper.userData.owned=true;halo.add(helper);}
  }else{
   const records=selected.node?model.nodeInstances:model.pipeInstances;
   const source=selected.node?style.nodes:style.pipes;
   records.forEach((record,index)=>{
    if(record.inpId!==selected.id)return;
    const matrix=new THREE.Matrix4();source.getMatrixAt(index,matrix);
    const object=new THREE.Mesh(source.geometry,material);object.matrixAutoUpdate=false;
    object.matrix.copy(source.matrixWorld).multiply(matrix);object.renderOrder=3;halo.add(object);
   });
  }
 }
 function neighbors(item=selected){
  if(!item)return [];
  const nodeIds=item.node?[item.id]:[item.link.from,item.link.to];
  return model.links.filter(link=>link.id!==item.id&&[link.from,link.to].some(nodeId=>nodeIds.includes(nodeId)));
 }
 function details(item=selected){
  if(!item)return null;
  const link=item.link;
  const result=style.getResult(item.id,item.node?'nodes':'links');
  const sections=[];
  sections.push({title:'基本信息',fields:fields([
   ['编号',item.id],['类型',item.kind],
   ...(link?[['名义管径',link.kind==='PUMPS'?'连接模型参数 '+link.diameterMm+' mm':link.diameterMm+' mm'],['初始状态',status(link.initialStatus)]]:[]),
   ['展示比例',style.displayMode==='coordinated'?'泵房协调比例，范围外 '+style.style.scale+'×':'全局 '+style.style.scale+'×'],
  ])});
  if(item.cad)sections.push({title:'CAD 竖向依据',fields:fields([
   ['接入节点',item.cad.hostNodeId],['管径',item.cad.diameter_mm+' mm'],['图示高差',item.cad.vertical_height_m+' m'],
   ['原图标注',item.cad.source_annotation],['CAD 句柄',item.cad.evidence.map(evidence=>evidence.handle).join('、')],
   ['上端','上层配水走向未确认'],['几何基准','全局显示抬高 0.35 m；高差按图纸'],['水力关系','附着于现有节点，不新增 INP 链接'],
  ])});
  if(link&&model.verticalCoordination&&model.coordination.scopeLinkIds.includes(link.id))sections.push({title:'泵房竖向依据',fields:fields([
   ['管中心','CAD 换算为地面下 2.90 m，协调模式采用'],['接入走向','靠泵房端增加竖向过渡，折点位置估算'],['平面配准','INP 示意位置；与机械图接口尚未完成配准'],
  ])});
  if(link)sections.push({title:'连接关系',fields:fields([
   ['起点',link.from],['终点',link.to],...(item.meter?[['宿主管段',item.meter.inpLinkId]]:[]),
  ])});
  let pressure=result?.pressure,pressureBasis='直接结果';
  if(link&&pressure==null){
   const fromPressure=style.getResult(link.from,'nodes')?.pressure;
   const toPressure=style.getResult(link.to,'nodes')?.pressure;
   if(Number.isFinite(fromPressure)&&Number.isFinite(toPressure)){pressure=(fromPressure+toPressure)/2;pressureBasis='两端节点均值';}
  }
  if(item.cad)pressureBasis='接入节点压力，非立管上端压力';
  const pressureSource=result?.source==='scada'?'SCADA '+(result.deviceId??'监测'):pressure!=null?'在线模拟':'暂无数据';
  sections.push({title:'运行结果',fields:fields([
   ['运行状态',status(result?.status)],['压力',value(pressure,'m')],
   ...(pressure!=null?[['压力依据',pressureBasis],['压力来源',pressureSource]]:[]),
   ...(result?.source==='scada'&&Number.isFinite(result.simulationPressure)?[['同期模拟压力',value(result.simulationPressure,'m')]]:[]),
   ...(link?[['流速',value(result?.velocity==null?null:Math.abs(result.velocity),'m/s')],['流量',value(result?.flow,'m³/h')],['流向',result?.status?.toLowerCase()==='closed'?'停流':result?.direction!=null||result?.flow!=null?((result.direction??Math.sign(result.flow))>0?'起点 → 终点':(result.direction??Math.sign(result.flow))<0?'终点 → 起点':'停流'):'暂无数据']]:[]),
  ])});
  sections.push({title:'来源说明',fields:fields([
   ['拓扑来源','已核对 INP；本页不求解水力'],['位置与高度','展示调整，不代表实测埋深'],
   ...(link?.kind==='PUMPS'?[['设备对应','CAD 槽位顺序；现场铭牌未确认']]:[]),
   ...(item.meter?[['CAD 句柄',item.meter.cadHandles.join('、')]]:[]),
  ])});
  return {
   assetId:item.assetId,elementId:item.id,kind:item.kind,
   title:item.kind+' · '+(item.cad?.label??item.meter?.label??item.id),
   sections,
   neighbors:neighbors(item).map(record=>({id:record.id,label:record.id})),
  };
 }
 function refresh(){if(selected)onSelectionChange(details());highlight();}
 function select(id){selected=resolve(id);highlight();const selection=details();onSelectionChange(selection);return selection;}
 function clear(){
  for(const object of halo.children)if(object.userData.owned){object.geometry.dispose();object.material.dispose();}
  halo.clear();selected=null;onSelectionChange(null);
 }
 function locate(){if(selected)return onLocate(selected,bounds());}
 return {select,clear,resolve,bounds,refresh,highlight,details,locate,get selected(){return selected;},neighbors};
 }
@@ -0,0 +1,91 @@
 import * as THREE from 'three';
 const WORLD_UP=new THREE.Vector3(0,1,0);
 function boxCorners(box){const {min,max}=box;return [
 new THREE.Vector3(min.x,min.y,min.z),new THREE.Vector3(min.x,min.y,max.z),new THREE.Vector3(min.x,max.y,min.z),new THREE.Vector3(min.x,max.y,max.z),
 new THREE.Vector3(max.x,min.y,min.z),new THREE.Vector3(max.x,min.y,max.z),new THREE.Vector3(max.x,max.y,min.z),new THREE.Vector3(max.x,max.y,max.z),
 ];}
 export function networkPrimaryAxis(model){
 const points=(model.nodes??[]).map(node=>node.coordinate).filter(point=>Array.isArray(point)&&point.length>=2&&point.slice(0,2).every(Number.isFinite));
 if(points.length<2)return new THREE.Vector3(1,0,0);
 const center=points.reduce((sum,point)=>[sum[0]+point[0]/points.length,sum[1]-point[1]/points.length],[0,0]);let xx=0,xz=0,zz=0;
 for(const point of points){const x=point[0]-center[0],z=-point[1]-center[1];xx+=x*x;xz+=x*z;zz+=z*z;}
 const angle=.5*Math.atan2(2*xz,xx-zz),axis=new THREE.Vector3(Math.cos(angle),0,Math.sin(angle));if(axis.x<0)axis.negate();return axis.normalize();
 }
 function linkAxis(link,fallback){
 const points=link?.coordinates;if(!Array.isArray(points)||points.length<2)return fallback.clone();
 const first=points[0],last=points.at(-1),axis=new THREE.Vector3(last[0]-first[0],0,-(last[1]-first[1]));
 if(axis.lengthSq()<1e-8)return fallback.clone();if(axis.x<0)axis.negate();return axis.normalize();
 }
 function viewingDirection(axis,reference,elevation){
 const horizontal=axis.clone().cross(WORLD_UP).normalize(),referenceHorizontal=reference.clone().cross(WORLD_UP).normalize();
 if(horizontal.dot(referenceHorizontal)<0)horizontal.negate();return horizontal.addScaledVector(WORLD_UP,elevation).normalize();
 }
 export function framePose(box,aspect,{direction=[.6,.8,1],up=[0,1,0],padding=1.12,fov=42}={}){
 if(box.isEmpty())throw Error('视角目标没有可见模型。');
 const target=box.getCenter(new THREE.Vector3()),viewDirection=new THREE.Vector3(...direction).normalize();let requestedUp=new THREE.Vector3(...up).normalize();
 if(Math.abs(requestedUp.dot(viewDirection))>.98)requestedUp=Math.abs(viewDirection.y)<.98?WORLD_UP.clone():new THREE.Vector3(0,0,-1);
 const right=requestedUp.clone().cross(viewDirection).normalize(),projectedUp=viewDirection.clone().cross(right).normalize();
 const forward=viewDirection.clone().negate(),verticalTan=Math.tan(fov*Math.PI/360),horizontalTan=verticalTan*Math.max(.1,aspect);let distance=2;
 for(const corner of boxCorners(box)){const offset=corner.sub(target),depthOffset=offset.dot(forward);distance=Math.max(distance,Math.abs(offset.dot(right))/horizontalTan-depthOffset,Math.abs(offset.dot(projectedUp))/verticalTan-depthOffset);}
 distance*=padding;return {target:target.toArray(),position:target.clone().add(viewDirection.multiplyScalar(distance)).toArray(),up:requestedUp.toArray()};
 }
 export function createCameraNavigation({camera,controls,model,networkRoot,root,show,getMode,appearance,onChange,getDisplayMode=()=> 'global',setDisplayMode=()=>{}}){
 const presets=[{id:'overview',label:'供水总览',mode:'network',note:'完整管网与站区背景'},{id:'plan',label:'管网俯视',mode:'network',note:'查看管网平面关系'},{id:'pump',label:'CAD 泵房参考',mode:'pump',note:'六泵与集管剖开检查 · 隐藏外墙和楼梯'},{id:'hydraulic',label:'泵组与管网',mode:'hydraulic',note:'六泵与下沉接入 · 竖向按 CAD，平面配准待核'},{id:'main',label:'主干管段',mode:'network',note:'定位模型中最长的供水管段'},{id:'meter',label:'BJ9 水表',mode:'network',note:'定位 CAD 水表及宿主管段'},{id:'crossing',label:'交叉下穿',mode:'network',note:'查看非连通交叉的示意下穿'},{id:'station',label:'站房外观',mode:'detail',note:'站房精细模型与周边关系'}];
 presets.splice(4,0,{id:'singlePump',label:'主泵近景',mode:'hydraulic',note:'PU_VFD_1 · 设备法兰与进出水连接'});
 if(model.cadAttachments?.length)presets.push({id:'riser',label:'站台上层立管',mode:'network',context:false,note:'CAD DN150 · 高差 10.85 m · 上层配水未推断'});
 let request=0,flight=null,active=null;const key='zjb-camera-bookmarks-v24';let saved=[];
 try{const v=JSON.parse(localStorage.getItem(key)||'[]');if(Array.isArray(v))saved=v.filter(p=>p&&typeof p.id==='string'&&typeof p.label==='string'&&p.label.length<=24&&['network','hydraulic','pump','detail','map','meters'].includes(p.mode)&&[p.position,p.target].every(a=>Array.isArray(a)&&a.length===3&&a.every(Number.isFinite))&&(!p.up||(Array.isArray(p.up)&&p.up.length===3&&p.up.every(Number.isFinite)))).slice(0,8);}catch{}
 const primaryAxis=networkPrimaryAxis(model),planDirection=WORLD_UP.clone(),planUp=new THREE.Vector3(0,0,-1),overviewDirection=viewingDirection(primaryAxis,primaryAxis,.92);
 const links=new Map((model.links??[]).map(link=>[link.id,link]));
 const linkLength=link=>(link.coordinates??[]).slice(1).reduce((sum,point,index)=>sum+Math.hypot(point[0]-link.coordinates[index][0],point[1]-link.coordinates[index][1]),0);
 const mainLink=(model.links??[]).filter(link=>link.kind==='PIPES').sort((a,b)=>linkLength(b)-linkLength(a))[0];
 const mainAxis=linkAxis(mainLink,primaryAxis);
 const meterBinding=(model.cadEquipmentBindings??[]).find(binding=>binding.assetId==='zjb:meter:BJ9'),meterAxis=linkAxis(links.get(meterBinding?.inpLinkId),primaryAxis);
 const poseOptions={
  pump:{direction:viewingDirection(primaryAxis,primaryAxis,.72).toArray(),padding:1.06},
  hydraulic:{direction:viewingDirection(primaryAxis,primaryAxis,.58).toArray(),padding:1.08},
  singlePump:{direction:viewingDirection(primaryAxis,primaryAxis,.36).toArray(),padding:1.28},
  main:{direction:viewingDirection(mainAxis,primaryAxis,.72).toArray(),padding:1.1},
  meter:{direction:viewingDirection(meterAxis,primaryAxis,1.6).toArray(),padding:1.16},
  crossing:{direction:viewingDirection(primaryAxis,primaryAxis,2.3).toArray(),padding:1.16},
  station:{direction:viewingDirection(primaryAxis,primaryAxis,.58).toArray(),padding:1.06},
  riser:{direction:viewingDirection(primaryAxis,primaryAxis,.2).toArray(),padding:1.24},
 };
 function emit(note){onChange({active,views:[...presets,...saved],note});}
 function stop(){request++;flight=null;active=null;emit('自由浏览 · 可保存当前视角');}
 controls.addEventListener('start',stop);
 function bounds(p){let box=new THREE.Box3();
  if(p.id==='overview'||p.id==='plan')box.setFromObject(networkRoot);
  else if(p.id==='pump'||p.id==='station'){for(const o of root.children)if(o.visible&&(p.id!=='pump'||/physical_|piping_reference/.test(o.userData.resourceId)))box.union(new THREE.Box3().setFromObject(o));if(p.id==='station'){const facade=root.children.find(o=>o.userData.resourceId==='detail_facade');if(facade)box.setFromObject(facade);}}
  else if(p.id==='hydraulic'){for(const l of model.links.filter(l=>l.kind==='PUMPS'))for(const a of l.coordinates)box.expandByPoint(new THREE.Vector3(a[0]-513800,model.verticalCoordination?.pump.pipeCenterY??.35,-(a[1]-2344450)));networkRoot.traverse(o=>{if(o.userData.kind==='PUMPS'&&!o.isMesh)box.union(new THREE.Box3().setFromObject(o));});box.expandByScalar(2);}
  else if(p.id==='riser'){networkRoot.traverse(o=>{if(o.userData.assetId===model.cadAttachments[0].assetId)box.union(new THREE.Box3().setFromObject(o));});box.expandByScalar(4);}
  else if(p.id==='singlePump'){networkRoot.traverse(o=>{if(o.userData.assetId==='inp:link:PU_VFD_1'&&!o.isMesh)box.union(new THREE.Box3().setFromObject(o));});box.expandByScalar(1.25);}
  else if(p.id==='meter'){networkRoot.traverse(o=>{if(o.userData.assetId==='zjb:meter:BJ9')box.union(new THREE.Box3().setFromObject(o));});box.expandByScalar(3.2);}
  else if(p.id==='main'){for(const point of mainLink.coordinates)box.expandByPoint(new THREE.Vector3(point[0]-513800,.35,-(point[1]-2344450)));box.expandByScalar(6);}
  else if(p.id==='crossing'){const a=model.layouts[8].pipes;let i=0;for(let j=0;j<a.length;j+=16)if(a[j+13]<a[i+13])i=j;const point=new THREE.Vector3(a[i+12],a[i+13],a[i+14]);box.setFromCenterAndSize(point,new THREE.Vector3(30,14,30));}
  return box;
 }
 async function visit(id){const p=[...presets,...saved].find(p=>p.id===id);if(!p)return;const token=++request;flight=null;emit('正在准备 '+p.label+'…');
  try{await show(p.mode,{frame:false});if(token!==request)return;setDisplayMode(p.displayMode??(p.mode==='hydraulic'?'coordinated':'global'));root.visible=p.context??(p.mode!=='hydraulic'&&p.id!=='crossing');
   for(const o of root.children)if(/roof|ceiling/.test(o.userData.resourceId))o.visible=p.roof??true;
   if(p.id==='pump')for(const o of root.children)if(['detail_pump_walls','detail_pump_access'].includes(o.userData.resourceId))o.visible=false;
   if(p.layers)for(const o of root.children)if(typeof p.layers[o.userData.resourceId]==='boolean')o.visible=p.layers[o.userData.resourceId];
   let pose,box;if(p.position){pose=p;box=new THREE.Box3().setFromCenterAndSize(new THREE.Vector3(...p.target),new THREE.Vector3(20,20,20));}else{box=bounds(p);pose=framePose(box,camera.aspect,p.id==='plan'?{direction:planDirection.toArray(),up:planUp.toArray(),padding:1.04}:p.id==='overview'?{direction:overviewDirection.toArray(),padding:1.08}:poseOptions[p.id]);}
   camera.up.fromArray(pose.up??[0,1,0]).normalize();
   appearance.frame(box,p.mode);camera.near=Math.max(.05,new THREE.Vector3(...pose.position).distanceTo(new THREE.Vector3(...pose.target))/2000);camera.far=20000;camera.updateProjectionMatrix();active=id;
   flight={start:performance.now(),from:camera.position.clone(),targetFrom:controls.target.clone(),to:new THREE.Vector3(...pose.position),targetTo:new THREE.Vector3(...pose.target)};
   if(matchMedia('(prefers-reduced-motion: reduce)').matches){camera.position.copy(flight.to);controls.target.copy(flight.targetTo);flight=null;controls.update();}
   emit(p.note??'已保存的相机位置');
  }catch(e){if(token===request)emit('视角加载失败：'+e.message);throw e;}
 }
 function tick(now){if(!flight)return;const t=Math.min(1,(now-flight.start)/500),v=t*t*(3-2*t);camera.position.lerpVectors(flight.from,flight.to,v);controls.target.lerpVectors(flight.targetFrom,flight.targetTo,v);if(t===1)flight=null;}
 function save(label){label=label.trim();if(!label||label.length>24)throw Error('请输入 1–24 字的视角名称。');if(saved.length>=8)throw Error('最多保存 8 个视角，请先移除不用的视角。');const p={id:'saved-'+Date.now(),label,mode:getMode(),displayMode:getDisplayMode(),position:camera.position.toArray(),target:controls.target.toArray(),up:camera.up.toArray(),context:root.visible,roof:root.children.filter(o=>/roof|ceiling/.test(o.userData.resourceId)).every(o=>o.visible)};p.layers=Object.fromEntries(root.children.map(o=>[o.userData.resourceId,o.visible]));const next=[...saved,p];localStorage.setItem(key,JSON.stringify(next));saved=next;active=p.id;emit('视角已保存在本机浏览器');}
 function remove(id){saved=saved.filter(p=>p.id!==id);localStorage.setItem(key,JSON.stringify(saved));if(active===id)active=null;emit('已移除保存的视角');}
 emit('选择一个观察位置');return {visit,tick,save,remove,stop,presets};
 }
@@ -0,0 +1,47 @@
 // Framework-independent data adapter. Does not parse or modify the project's INP.
 export const CAD_ORIGIN=Object.freeze([513800,2344450]);
 // This decoder runs before IDB writes, including when checking an existing entry.
 // A parseable HTTP 200 error response must not become a permanent model cache.
 export function parseNetworkMetadata(data,modelId){
 const model=JSON.parse(new TextDecoder().decode(data));
 const arrays=['nodes','links','pipeInstances','nodeInstances','bendInstances','cadEquipmentBindings','pumpEntityBindings','cadAttachments'];
 const objects=['layouts','connectivity','coordination','coordinatedLayouts','verticalCoordination'];
 if(!model||model.modelId!==modelId||!arrays.every(key=>Array.isArray(model[key]))||!objects.every(key=>model[key]&&typeof model[key]==='object'&&!Array.isArray(model[key]))||!model.nodes.length||!model.links.length)throw Error('管网元数据格式无效，请重新载入场景。');
 return model;
 }
 export function cadToGltf(point,displayZ=0){
 if(!Array.isArray(point)||point.length<2||!point.slice(0,2).every(Number.isFinite)||!Number.isFinite(displayZ))throw Error('Expected finite CAD XY and an explicit display height.');
 return [point[0]-CAD_ORIGIN[0],displayZ,-(point[1]-CAD_ORIGIN[1])];
 }
 // Supply longitude/latitude OF CAD_ORIGIN, not the old OSM anchor. This function
 // deliberately cannot guess CRS, accept the disabled legacy candidate, or add 23.9deg.
 export function mapModelMatrixElements(mercatorOrigin,meterScale,{rotationDeg=0,horizontalScale=1}={}){
 if(![mercatorOrigin?.x,mercatorOrigin?.y,mercatorOrigin?.z,meterScale,rotationDeg,horizontalScale].every(Number.isFinite)||meterScale<=0||horizontalScale<=0)throw Error('Confirmed Mercator origin and positive scales required.');
 const a=rotationDeg*Math.PI/180,c=Math.cos(a)*meterScale*horizontalScale,s=Math.sin(a)*meterScale*horizontalScale;
 // Column-major THREE.Matrix4; glTF +Y up, -Z CAD north; Mercator +Y south.
 return [c,-s,0,0, 0,0,meterScale,0, s,c,0,0, mercatorOrigin.x,mercatorOrigin.y,mercatorOrigin.z,1];
 }
 export function resolveMeterPlacements(bindingFile,{inpSha256,links,displayHeight=0.35}){
 if(inpSha256!==bindingFile.compatibleInpSha256)throw Error('INP version mismatch: reconcile the equipment mapping before placement.');
 const byId=new Map(links.map(link=>[String(link.id),link]));if(byId.size!==links.length)throw Error('Duplicate INP link IDs.');
 const placements=[],issues=[];
 for(const meter of bindingFile.meters){
  const link=byId.get(meter.inpLinkId);
  if(!link){issues.push({assetId:meter.assetId,reason:'missing_host_link',id:meter.inpLinkId});continue;}
  const pts=link.coordinates;
  if(!Array.isArray(pts)||pts.length<2||pts.some(p=>!Array.isArray(p)||p.length<2||!p.slice(0,2).every(Number.isFinite))||!Number.isFinite(link.diameterMm)||link.diameterMm<=0){issues.push({assetId:meter.assetId,reason:'invalid_host_geometry_or_diameter'});continue;}
  let best;
  for(let i=1;i<pts.length;i++){
   const a=pts[i-1],b=pts[i],dx=b[0]-a[0],dy=b[1]-a[1],length=Math.hypot(dx,dy);if(length<1e-8)continue;
   const t=Math.max(0,Math.min(1,((meter.cadXY[0]-a[0])*dx+(meter.cadXY[1]-a[1])*dy)/(length*length)));
   const distance=Math.hypot(a[0]+t*dx-meter.cadXY[0],a[1]+t*dy-meter.cadXY[1]);
   if(!best||distance<best.distance)best={a,b,dx,dy,length,t,distance};
  }
  if(!best){issues.push({assetId:meter.assetId,reason:'zero_length_host'});continue;}
  if(best.distance>.25){issues.push({assetId:meter.assetId,reason:'CAD_host_registration_exceeds_0.25m',distanceM:best.distance});continue;}
  const half=Math.min(.33,best.length*.2),t=Math.max(half/best.length,Math.min(1-half/best.length,best.t));
  const center=[best.a[0]+best.dx*t,best.a[1]+best.dy*t];
  placements.push({assetId:meter.assetId,prototype:meter.prototype,hostLinkId:meter.inpLinkId,position:cadToGltf(center,displayHeight),direction:[best.dx/best.length,0,-best.dy/best.length],scale:[half/.33,link.diameterMm/150,link.diameterMm/150],portDistanceM:2*half,createsHydraulicLink:false,scadaId:null});
 }
 return {placements,issues};
 }
@@ -0,0 +1,61 @@
 const boot = document.getElementById('boot');
 const title = document.getElementById('boot-title');
 const detail = document.getElementById('boot-detail');
 const progress = document.getElementById('boot-progress');
 const retry = document.getElementById('boot-retry');
 const formatBytes = bytes => (bytes / 1024 / 1024).toFixed(1) + ' MB';
 let entries = new Map();
 let failed = false;
 let lastPaint = 0;
 export function beginLoading(files, message = '正在载入三维场景') {
 entries = new Map(files.map(file => [file, {stage:'waiting', loaded:0, total:0}]));
 failed = false;
 boot.hidden = false;
 boot.dataset.state = 'loading';
 boot.setAttribute('aria-busy', 'true');
 title.textContent = message;
 detail.textContent = '正在检查本地资源缓存';
 progress.hidden = false;
 progress.removeAttribute('value');
 retry.hidden = true;
 lastPaint = 0;
 }
 export function reportProgress(update) {
 if (failed || !entries.has(update.file)) return;
 entries.set(update.file, update);
 // Large streamed files can emit hundreds of chunks in a frame.
 if (update.stage === 'download' && performance.now() - lastPaint < 100) return;
 lastPaint = performance.now();
 const values = [...entries.values()];
 const done = values.filter(item => item.stage === 'ready').length;
 const loaded = values.reduce((sum, item) => sum + item.loaded, 0);
 const cached = values.filter(item => item.stage === 'cache').length;
 const retrying = values.some(item => item.stage === 'retry');
 const parsing = values.some(item => item.stage === 'parse');
 const downloading = values.some(item => item.stage === 'download');
 progress.max = Math.max(1, values.length);
 progress.value = done;
 title.textContent = `正在载入场景资源 ${done} / ${values.length}`;
 detail.textContent = `${retrying ? '连接中断，正在从断点重试' : parsing ? '正在解析模型' : downloading ? '正在下载资源' : cached ? '正在读取本地缓存' : '正在准备场景'} · 已读取 ${formatBytes(loaded)}`;
 }
 export function finishLoading() {
 if (failed) return;
 boot.setAttribute('aria-busy', 'false');
 boot.hidden = true;
 }
 export function failLoading(error) {
 failed = true;
 boot.hidden = false;
 boot.dataset.state = 'error';
 boot.setAttribute('aria-busy', 'false');
 title.textContent = '场景资源加载失败';
 detail.textContent = '部分资源未能载入，请检查网络后重试。' + (error?.message ? '（' + error.message + '）' : '');
 progress.hidden = true;
 retry.hidden = false;
 }
 retry.addEventListener('click', () => window.location.reload());
@@ -0,0 +1,85 @@
 import * as THREE from 'three';
 export const DEFAULT_STYLE=Object.freeze({scale:6,mode:'uniform',color:'#098ed0',missingColor:'#89949d',lowColor:'#2b83ba',highColor:'#e66c37',opacity:1,roughness:.3,metalness:.22,nodes:true,direction:'none',arrowColor:'#f2b447',autoRange:true,min:0,max:3});
 const finite=v=>typeof v==='number'&&Number.isFinite(v);
 export function validateResults(input,model){
 if(input?.modelId!==model.modelId)throw Error('结果文件与当前管网模型编号不一致。');
 if(input.units?.velocity!=='m/s'||input.units?.pressure!=='m'||input.units?.flow!=='m³/h')throw Error('结果单位须明确为 m/s、m、m³/h。');
 const linkIds=new Set(model.links.map(l=>l.id)),nodeIds=new Set(model.nodes.map(n=>n.id));
 for(const [table,ids,fields] of [[input.links??{},linkIds,['velocity','flow','pressure','direction']],[input.nodes??{},nodeIds,['pressure']]]){
  if(typeof table!=='object'||table===null||Array.isArray(table))throw Error('结果必须按编号提供对象。');
  for(const [id,r] of Object.entries(table)){
   if(!ids.has(id))throw Error('模型中不存在编号：'+id);
   if(typeof r!=='object'||r===null||Array.isArray(r))throw Error('无效结果：'+id);
   for(const k of fields)if(r[k]!==undefined&&r[k]!==null&&!finite(r[k]))throw Error('非数值结果：'+id+'.'+k);
   if(r.status!=null&&(typeof r.status!=='string'||!['open','closed','active'].includes(r.status.toLowerCase())))throw Error('无效运行状态：'+id);
   if(r.direction!=null&&![-1,0,1].includes(r.direction))throw Error('流向只能为 -1、0、1。');
  }
 }
 return structuredClone(input);
 }
 export function metricValue(mode,link,results){
 const r=results?.links?.[link.id];
 if(mode==='velocity')return finite(r?.velocity)?Math.abs(r.velocity):null;
 if(mode==='pressure'){
  if(finite(r?.pressure))return r.pressure;
  const a=results?.nodes?.[link.from]?.pressure,b=results?.nodes?.[link.to]?.pressure;return finite(a)&&finite(b)?(a+b)/2:null;
 }
 if(mode==='direction'){
  if(r?.status?.toLowerCase()==='closed')return 0;
  if(finite(r?.direction))return r.direction;
  return finite(r?.flow)?Math.sign(r.flow):null;
 }
 return null;
 }
 export function attachNetworkStyle(group,model){
 let pipes,nodes,bends;group.traverse(o=>{if(o.isInstancedMesh&&o.userData.instances?.length){if(o.name==='WaterBendInstances')bends=o;else if(o.userData.instances[0].kind==='NODE')nodes=o;else pipes=o;}});
 if(!pipes||!nodes)throw Error('管网实体缺少可编辑管段或节点。');
 pipes.userData.instances=model.pipeInstances;nodes.userData.instances=model.nodeInstances;
 const style={...DEFAULT_STYLE},byId=new Map(model.links.map(l=>[l.id,l])),partsById=new Map();let results=null,displayMode='global',focusScope=false;const scopeIds=new Set(model.coordination?.scopeLinkIds??[]),scopeNodes=new Set(model.links.filter(l=>scopeIds.has(l.id)).flatMap(l=>[l.from,l.to]));
 model.pipeInstances.forEach((p,i)=>{if(!partsById.has(p.inpId))partsById.set(p.inpId,[]);partsById.get(p.inpId).push(i);});
 const owned=[];for(const mesh of [pipes,nodes,bends].filter(Boolean)){const material=new THREE.MeshPhysicalMaterial({color:0xffffff,roughness:.3,metalness:.22,clearcoat:.22,clearcoatRoughness:.38});mesh.material=material;mesh.castShadow=true;mesh.receiveShadow=true;owned.push(material);}
 const geo=new THREE.ConeGeometry(1,2,12),mat=new THREE.MeshBasicMaterial({color:style.arrowColor}),arrows=new THREE.InstancedMesh(geo,mat,model.links.length);arrows.name='WaterFlowArrows';arrows.userData.instances=model.links.map(l=>({assetId:'inp:link:'+l.id,inpId:l.id,kind:l.kind}));group.add(arrows);
 const markerGeo=new THREE.OctahedronGeometry(.72,0),markerMat=new THREE.MeshBasicMaterial({color:0x1d83e6,transparent:true,opacity:.96,depthTest:false,depthWrite:false}),scadaMarkers=new THREE.InstancedMesh(markerGeo,markerMat,model.nodeInstances.length);scadaMarkers.name='ScadaSensorMarkers';scadaMarkers.userData.instances=model.nodeInstances.map(n=>({assetId:'inp:node:'+n.inpId,inpId:n.inpId,kind:'SCADA'}));scadaMarkers.renderOrder=6;group.add(scadaMarkers);
 const ringGeo=new THREE.TorusGeometry(1.15,.09,8,28);ringGeo.rotateX(Math.PI/2);const ringMat=new THREE.MeshBasicMaterial({color:0x1d83e6,transparent:true,opacity:.76,depthTest:false,depthWrite:false}),scadaRings=new THREE.InstancedMesh(ringGeo,ringMat,model.nodeInstances.length);scadaRings.name='ScadaSensorRings';scadaRings.userData.instances=scadaMarkers.userData.instances;scadaRings.renderOrder=5;group.add(scadaRings);
 const matrix=new THREE.Matrix4(),dummy=new THREE.Object3D(),pos=new THREE.Vector3(),quat=new THREE.Quaternion(),scale=new THREE.Vector3();let summary={};
 function apply(){
  const layout=(displayMode==='coordinated'?model.coordinatedLayouts:model.layouts)?.[style.scale];if(!layout)throw Error('当前模型支持整数倍率 1–12。');
  if(layout.pipes.length!==pipes.instanceMatrix.array.length||layout.nodes.length!==nodes.instanceMatrix.array.length)throw Error('模型倍率数据与几何不匹配。');
  if(bends){bends.instanceMatrix.array.set(layout.bends);bends.instanceMatrix.needsUpdate=true;}pipes.instanceMatrix.array.set(layout.pipes);nodes.instanceMatrix.array.set(layout.nodes);pipes.instanceMatrix.needsUpdate=true;nodes.instanceMatrix.needsUpdate=true;
  for(const d of layout.devices){group.traverse(o=>{if(o.userData.assetId===d.id&&!o.isMesh){o.position.fromArray(d.position);o.quaternion.fromArray(d.quaternion);o.scale.fromArray(d.scale);}});}
  const vals=model.links.map(l=>metricValue(style.mode,l,results)).filter(finite);let min=style.autoRange&&vals.length?Math.min(...vals):style.min,max=style.autoRange&&vals.length?Math.max(...vals):style.max;
  const low=new THREE.Color(style.lowColor),high=new THREE.Color(style.highColor),missing=new THREE.Color(style.missingColor),plain=new THREE.Color(style.color);
  function color(value){if(style.mode==='uniform')return plain;if(!finite(value))return missing;if(style.mode==='direction')return value===0?new THREE.Color('#a7aab0'):value>0?high:low;return low.clone().lerp(high,max===min?.5:Math.max(0,Math.min(1,(value-min)/(max-min))));}
  model.pipeInstances.forEach((p,i)=>pipes.setColorAt(i,color(metricValue(style.mode,byId.get(p.inpId),results))));
  model.nodeInstances.forEach((p,i)=>nodes.setColorAt(i,color(style.mode==='pressure'?results?.nodes?.[p.inpId]?.pressure:null)));
  if(bends){model.bendInstances.forEach((p,i)=>bends.setColorAt(i,color(metricValue(style.mode,byId.get(p.inpId),results))));bends.instanceColor.needsUpdate=true;}pipes.instanceColor.needsUpdate=true;nodes.instanceColor.needsUpdate=true;
  for(const mesh of [pipes,nodes,bends].filter(Boolean)){mesh.material.opacity=style.opacity;mesh.material.transparent=style.opacity<1;mesh.material.depthWrite=style.opacity===1;mesh.material.roughness=style.roughness;mesh.material.metalness=style.metalness;mesh.material.needsUpdate=true;mesh.computeBoundingBox();mesh.computeBoundingSphere();}
  group.traverse(o=>{if(o.userData.layoutMode){o.visible=o.userData.layoutMode===displayMode&&o.userData.layoutScale===style.scale;if(o.isMesh){o.material.color.copy(color(metricValue(style.mode,byId.get(o.userData.inpId),results)));o.material.opacity=style.opacity;o.material.transparent=style.opacity<1;o.material.roughness=style.roughness;}}});
  group.traverse(o=>{if(o.userData.cadAttachment){const r=model.cadAttachments.find(r=>r.assetId===o.userData.assetId);o.traverse(mesh=>{if(!mesh.isMesh)return;if(mesh.userData.cadRadialScale)mesh.scale.set(style.scale,1,style.scale);if(mesh.userData.cadTerminalScale)mesh.scale.setScalar(style.scale);mesh.material.color.copy(color(style.mode==='pressure'?results?.nodes?.[r.hostNodeId]?.pressure:null));mesh.material.opacity=style.opacity;mesh.material.transparent=style.opacity<1;mesh.material.depthWrite=style.opacity===1;mesh.material.roughness=style.roughness;mesh.material.metalness=style.metalness;});}});
  if(focusScope){const zero=new THREE.Matrix4().makeScale(0,0,0);for(const [mesh,recs,isNode] of [[pipes,model.pipeInstances,false],[nodes,model.nodeInstances,true],[bends,model.bendInstances,false]]){if(!mesh)continue;recs.forEach((r,i)=>{if(!(isNode?scopeNodes:scopeIds).has(r.inpId))mesh.setMatrixAt(i,zero);else if(isNode&&displayMode==='coordinated'){mesh.getMatrixAt(i,matrix);matrix.decompose(pos,quat,scale);const radius=Math.max(.075,...model.links.filter(l=>scopeIds.has(l.id)&&[l.from,l.to].includes(r.inpId)).map(l=>l.diameterMm/2000));matrix.compose(pos,quat,new THREE.Vector3(radius,radius,radius));mesh.setMatrixAt(i,matrix);}});mesh.instanceMatrix.needsUpdate=true;mesh.computeBoundingBox();mesh.computeBoundingSphere();}}
  group.traverse(o=>{if(o.userData.cadAttachment)o.visible=!focusScope;if(o.userData.layoutMode&&focusScope)o.visible=false;});
  nodes.visible=style.nodes;let scadaCount=0;
  model.nodeInstances.forEach((record,index)=>{
   const visible=results?.nodes?.[record.inpId]?.source==='scada'&&(!focusScope||scopeNodes.has(record.inpId));
   if(!visible){dummy.position.set(0,0,0);dummy.scale.setScalar(0);dummy.quaternion.identity();dummy.updateMatrix();scadaMarkers.setMatrixAt(index,dummy.matrix);scadaRings.setMatrixAt(index,dummy.matrix);return;}
   nodes.getMatrixAt(index,matrix);matrix.decompose(pos,quat,scale);
   dummy.position.copy(pos);dummy.position.y+=1.18;dummy.quaternion.identity();dummy.scale.setScalar(.72);dummy.updateMatrix();scadaMarkers.setMatrixAt(index,dummy.matrix);
   dummy.position.copy(pos);dummy.position.y+=.2;dummy.quaternion.identity();dummy.scale.setScalar(.72);dummy.updateMatrix();scadaRings.setMatrixAt(index,dummy.matrix);scadaCount++;
  });
  for(const marker of [scadaMarkers,scadaRings]){marker.instanceMatrix.needsUpdate=true;marker.visible=scadaCount>0;marker.computeBoundingBox();marker.computeBoundingSphere();}
  let arrowCount=0;
  model.links.forEach((l,i)=>{
   const ids=partsById.get(l.id)??[],idx=ids[Math.floor(ids.length/2)];let direction=style.direction==='topology'?1:style.direction==='results'?metricValue('direction',l,results):0;
   if(!direction||idx===undefined||(focusScope&&!scopeIds.has(l.id))){dummy.position.set(0,0,0);dummy.scale.setScalar(0);dummy.quaternion.identity();}
   else{pipes.getMatrixAt(idx,matrix);matrix.decompose(pos,quat,scale);dummy.position.copy(pos);dummy.quaternion.copy(quat);if(direction<0)dummy.quaternion.multiply(new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1,0,0),Math.PI));const r=Math.max(.22,scale.x*1.7);dummy.scale.set(r,r*1.5,r);arrowCount++;}
   dummy.updateMatrix();arrows.setMatrixAt(i,dummy.matrix);
  });arrows.instanceMatrix.needsUpdate=true;arrows.visible=style.direction!=='none';arrows.material.color.set(style.arrowColor);arrows.computeBoundingBox();arrows.computeBoundingSphere();
  summary={focusScope,displayMode,mode:style.mode,min,max,dataLinks:vals.length,totalLinks:model.links.length,scadaMarkers:scadaCount,arrows:arrowCount,directionMode:style.direction,hasResults:!!results,resultTime:results?.timestamp??null,scale:style.scale};return summary;
 }
 const api={setFocusScope(value){focusScope=!!value;return apply();},get displayMode(){return displayMode;},setDisplayMode(value){if(!['global','coordinated'].includes(value)||value==='coordinated'&&!model.coordinatedLayouts)throw Error('不支持的展示模式');displayMode=value;return apply();},getResult(id,kind='links'){return results?.[kind]?.[id]?structuredClone(results[kind][id]):null;},get style(){return {...style};},get summary(){return {...summary};},setStyle(patch){const next={...style,...patch};if(!Number.isInteger(next.scale)||next.scale<1||next.scale>12)throw Error('倍率需为 1–12。');if(!['uniform','velocity','pressure','direction'].includes(next.mode)||!['none','topology','results'].includes(next.direction))throw Error('未知样式。');for(const k of ['color','missingColor','lowColor','highColor','arrowColor'])if(!/^#[0-9a-f]{6}$/i.test(next[k]))throw Error('颜色需为六位十六进制。');for(const k of ['opacity','roughness','metalness'])if(!finite(next[k])||next[k]<0||next[k]>1)throw Error('样式数值须在 0–1。');if(!finite(next.min)||!finite(next.max)||next.min>=next.max)throw Error('色带上限必须大于下限。');Object.assign(style,next);return apply();},setResults(input){const parsed=validateResults(input,model);results=parsed;return apply();},clearResults(){results=null;return apply();},dispose(){geo.dispose();mat.dispose();markerGeo.dispose();markerMat.dispose();ringGeo.dispose();ringMat.dispose();owned.forEach(m=>m.dispose());},pipes,nodes,arrows,scadaMarkers,scadaRings};
 apply();return api;
 }
@@ -0,0 +1,43 @@
 <!doctype html>
 <html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>湛江北站供水系统三维渲染器</title>
    <style>
      html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#e2e8e9}
      body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
      canvas{display:block;width:100%;height:100%;touch-action:none}
      #boot{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:16px;box-sizing:border-box;color:#334155;background:rgba(241,245,249,.38)}
      #boot[hidden]{display:none}
      .boot-panel{box-sizing:border-box;width:min(100%,360px);padding:24px;border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.50),rgba(224,239,250,.28));backdrop-filter:blur(24px) saturate(170%) contrast(94%);-webkit-backdrop-filter:blur(24px) saturate(170%) contrast(94%);box-shadow:inset 0 1px 0 rgba(255,255,255,.88),inset 0 -1px 0 rgba(112,145,168,.18),0 18px 50px rgba(15,43,69,.20),0 0 0 1px rgba(255,255,255,.55)}
      .boot-heading{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:#0f172a}
      #boot i{flex:none;width:18px;height:18px;border:2px solid rgba(37,125,212,.22);border-top-color:#257dd4;border-radius:50%;animation:spin .8s linear infinite}
      #boot-detail{margin:12px 0 0;font-size:12px;line-height:1.75;overflow-wrap:anywhere}
      #boot-progress{display:block;width:100%;height:6px;margin-top:20px;accent-color:#2563eb}
      #boot-progress[hidden],#boot-retry[hidden]{display:none}
      #boot-retry{min-height:40px;margin-top:16px;padding:0 16px;border:0;border-radius:8px;background:#2563eb;color:white;font:inherit;font-size:13px;cursor:pointer;transition:transform 150ms ease,background-color 150ms ease}
      #boot-retry:hover{background:#1d4ed8}#boot-retry:active{transform:scale(.96)}#boot-retry:focus-visible{outline:2px solid #2563eb;outline-offset:3px}
      #boot[data-state=error] i{animation:none;border-color:#dc2626;background:#fee2e2}
      #boot[data-state=error] #boot-title{color:#991b1b}
      @keyframes spin{to{transform:rotate(360deg)}}
      @media(prefers-reduced-motion:reduce){#boot i{animation:none;border-top-color:rgba(37,125,212,.22)}#boot-retry{transition:none}}
    </style>
    <script type="importmap">{"imports":{"three":"./vendor/three/three.module.js","three/addons/":"./vendor/three/addons/"}}</script>
  </head>
  <body>
    <div id="boot" role="status" aria-live="polite" aria-busy="true" data-state="loading">
      <div class="boot-panel">
        <div class="boot-heading"><i aria-hidden="true"></i><span id="boot-title">正在准备三维场景</span></div>
        <p id="boot-detail">首次载入需要下载模型，后续将优先使用本地缓存。</p>
        <progress id="boot-progress" aria-label="场景资源加载进度"></progress>
        <button id="boot-retry" type="button" hidden>重新载入场景</button>
      </div>
    </div>
    <output id="qa" hidden></output>
    <script type="module">
      import {failLoading} from './loadingProgress.mjs?v=36-resumable-cache';
      import('./preview.mjs?v=36-resumable-cache').catch(failLoading);
    </script>
  </body>
 </html>
@@ -0,0 +1,226 @@
 import {createRenderEffects} from './render-effects.mjs';
 import {createCameraNavigation,framePose} from './camera-navigation.mjs?v=36-resumable-cache';
 import {createSceneResourceCache} from './resourceCache.mjs?v=36-resumable-cache';
 import {beginLoading,reportProgress,finishLoading,failLoading} from './loadingProgress.mjs?v=36-resumable-cache';
 import {createAssetInspector} from './asset-inspector.mjs?v=29-platform2';
 import * as THREE from 'three';
 import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
 import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 import {MeshoptDecoder} from './vendor/meshopt_decoder.module.js';
 import {attachNetworkStyle,DEFAULT_STYLE} from './network-style.mjs?v=33-scada-markers';
 import {cadToGltf,parseNetworkMetadata} from './integration.mjs';
 import {createAppearance,enhanceMaterials,grain,applyBuildingContext} from './appearance.mjs?v=30-context-opacity';
 const HOST_CHANNEL='tjwater:zjb-scene',HOST_VERSION=2,PROJECT_CODE='zjb',MODEL_ID='zjb-water-network-v23';
 let net,networkRoot,networkStyle,navigation,inspector;
 let mode='network',generation=0,contextVisible=true,roofVisible=true;
 let sceneStatus='正在载入三维模型';
 let sceneReady=false;
 let cameraState={active:null,note:'正在准备观察位置',views:[]};
 let appearanceState={preset:'day',exposure:.95,contextOpacity:.4,shadows:true,effects:true,quality:'standard'};
 function postHost(type,detail={}){
 if(window.parent===window)return;
 window.parent.postMessage({channel:HOST_CHANNEL,version:HOST_VERSION,type,projectCode:PROJECT_CODE,modelId:net?.modelId??MODEL_ID,...detail},window.location.origin);
 }
 function trustedHostMessage(event){
 const data=event.data;
 return event.origin===window.location.origin&&event.source===window.parent&&data&&typeof data==='object'&&data.channel===HOST_CHANNEL&&data.version===HOST_VERSION&&data.projectCode===PROJECT_CODE&&data.modelId===(net?.modelId??MODEL_ID);
 }
 function runtimeState(){
 return {
  mode,status:sceneStatus,contextVisible,roofVisible,
  displayMode:networkStyle?.displayMode??'global',
  style:networkStyle?.style??{...DEFAULT_STYLE},
  styleSummary:networkStyle?.summary??{},
  appearance:{...appearanceState},
  camera:{...cameraState,views:cameraState.views.map(view=>({...view}))},
 };
 }
 function postState(){if(net&&networkStyle)postHost('scene-state',{state:runtimeState()});}
 function setStatus(value){sceneStatus=value;postState();}
 window.webQA={errors:[],loaded:[],mode:'network',contextVisible};
 window.addEventListener('error',event=>{const message=String(event.message||'三维场景运行错误');window.webQA.errors.push(message);postHost('error',{message});});
 window.addEventListener('unhandledrejection',event=>{const message=String(event.reason||'三维场景异步任务失败');window.webQA.errors.push(message);postHost('error',{message});});
 const manifestResponse=await fetch('./manifest.json',{cache:'no-cache',signal:AbortSignal.timeout(30000)});
 if(!manifestResponse.ok)throw Error('场景清单加载失败：HTTP '+manifestResponse.status);
 const manifest=await manifestResponse.json();
 const resourceCache=createSceneResourceCache(import.meta.url,reportProgress);
 function startLoading(files){beginLoading(files);postHost('loading',{active:true});}
 function completeLoading(){finishLoading();postHost('loading',{active:false});}
 const viewport=()=>({width:Math.max(240,innerWidth),height:Math.max(240,innerHeight)});
 const initialViewport=viewport();
 const renderer=new THREE.WebGLRenderer({antialias:true,logarithmicDepthBuffer:false});
 renderer.setPixelRatio(Math.min(devicePixelRatio,2));renderer.setSize(initialViewport.width,initialViewport.height);renderer.setClearColor(0xeaf1f8);document.body.append(renderer.domElement);renderer.info.autoReset=false;
 const scene=new THREE.Scene();
 const camera=new THREE.PerspectiveCamera(42,initialViewport.width/initialViewport.height,.05,10000);
 const controls=new OrbitControls(camera,renderer.domElement);
 const appearance=createAppearance(renderer,scene);
 const effects=createRenderEffects(renderer,scene,camera,initialViewport.width,initialViewport.height);
 const loader=new GLTFLoader().setMeshoptDecoder(MeshoptDecoder);
 const loadModel=asset=>resourceCache.load(asset.file,asset.sha256,data=>loader.parseAsync(data,new URL('./',new URL(asset.file,import.meta.url)).href));
 const cache=new Map(),root=new THREE.Group();scene.add(root);
 function isBuildingResource(resourceId=''){
 return /^(map_|detail_(roof|facade|interior|ceiling|pump_walls|pump_roof|pump_access))/.test(resourceId);
 }
 function applyVisibility(){
 root.visible=mode!=='hydraulic';
 for(const object of root.children){
  if(isBuildingResource(object.userData.resourceId))object.visible=contextVisible;
  if(/roof|ceiling/.test(object.userData.resourceId))object.visible=contextVisible&&roofVisible;
 }
 if(mode==='pump')for(const object of root.children)if(['detail_pump_walls','detail_pump_access'].includes(object.userData.resourceId))object.visible=false;
 }
 function fit(){
 let box=new THREE.Box3();
 if(['network','hydraulic'].includes(mode)&&networkRoot)box.setFromObject(networkRoot);
 else for(const object of root.children)if(object.visible)box.union(new THREE.Box3().setFromObject(object));
 if(mode==='detail')box=new THREE.Box3().setFromObject(root.children.find(object=>object.userData.resourceId==='detail_facade')??root);
 if(mode==='hydraulic'&&net){
  box=new THREE.Box3();
  for(const link of net.links.filter(link=>link.kind==='PUMPS'))for(const point of link.coordinates)box.expandByPoint(new THREE.Vector3(...cadToGltf(point,.35)));
  box.expandByScalar(4);
 }
 if(box.isEmpty())return;
 appearance.frame(box,mode);
 const sphere=box.getBoundingSphere(new THREE.Sphere());controls.target.copy(sphere.center);
 camera.up.copy(new THREE.Vector3(0,1,0));
 camera.position.copy(sphere.center).add(new THREE.Vector3(.65,.72,1).normalize().multiplyScalar(sphere.radius*3.1/Math.min(1,camera.aspect)));
 camera.near=Math.max(.005,sphere.radius/5000);camera.far=sphere.radius*30+100;camera.updateProjectionMatrix();controls.update();
 }
 async function load(id){
 if(!cache.has(id)){
  const asset=manifest.assets.find(item=>item.id===id);
  if(!asset)throw Error('场景清单中不存在资源：'+id);
  cache.set(id,loadModel(asset).then(gltf=>{
   enhanceMaterials(gltf.scene);gltf.scene.userData.assetId=asset.logicalId??asset.assetId;gltf.scene.userData.resourceId=id;
   gltf.scene.traverse(object=>{if(object.isMesh)for(const material of Array.isArray(object.material)?object.material:[object.material])material.userData.original={opacity:material.opacity,transparent:material.transparent,depthWrite:material.depthWrite};});
   return gltf.scene;
  }).catch(error=>{cache.delete(id);throw error;}));
 }
 return cache.get(id);
 }
 async function show(next,{frame=true}={}){
 if(!['network','hydraulic','map','detail','pump','meters'].includes(next))throw Error('不支持的场景模式：'+next);
 const token=++generation;mode=next;let ids=next==='network'?manifest.networkContext:manifest.mapDefault;
 if(next==='detail')ids=[...manifest.mapDefault.filter(id=>!['map_roof','map_facade'].includes(id)),'detail_roof','detail_facade','detail_interior','detail_ceiling'];
 if(next==='pump')ids=['detail_pump_walls','detail_pump_access','detail_pump_auxiliary','detail_pump_piping_reference',...manifest.assets.filter(asset=>asset.id.startsWith('physical_')).map(asset=>asset.id)];
 if(next==='meters')ids=['meter_dn150','valve_dn250','pump_symbol'];
 if(sceneReady)startLoading(ids.map(id=>manifest.assets.find(asset=>asset.id===id).file));
 setStatus('正在载入 '+ids.length+' 组场景资源');
 let objects;
 try{objects=await Promise.all(ids.map(async id=>{
  const object=await load(id);const asset=manifest.assets.find(item=>item.id===id);
  reportProgress({file:asset.file,stage:'ready',loaded:asset.bytes,total:asset.bytes});return object;
 }));}catch(error){if(token===generation){setStatus('场景资源加载失败，请重试');failLoading(error);postHost('loading',{active:false,failed:true});}throw error;}
 if(token!==generation)return;
 root.clear();objects.forEach((object,index)=>{
  object.position.set(next==='meters'?index*1.5:0,0,0);object.visible=true;root.add(object);
  object.traverse(mesh=>{if(mesh.isMesh)for(const material of Array.isArray(mesh.material)?mesh.material:[mesh.material])applyBuildingContext(material,['network','hydraulic'].includes(next),appearanceState.contextOpacity);});
 });
 if(networkRoot)networkRoot.visible=['network','hydraulic'].includes(next);
 networkStyle?.setFocusScope(next==='hydraulic');applyVisibility();inspector?.highlight();if(frame)fit();
 window.webQA.loaded=ids;window.webQA.mode=next;
 setStatus(next==='pump'?'六泵实体与 CAD 管路参考，接口配准待核':next==='meters'?'设备样件，主管不包含在样件内':['network','hydraulic'].includes(next)?'管网实体模型，建筑为透明背景':'已载入 '+ids.length+' 组场景资源');
 completeLoading();
 }
 function updateStyle(){appearance.refresh();inspector?.refresh();window.webQA.networkStyle={...networkStyle.summary,style:networkStyle.style};postState();}
 function setDisplayMode(value){networkStyle.setDisplayMode(value);navigation?.stop();updateStyle();}
 function applyAppearance(patch){
 if(patch.preset!==undefined){if(!['day','studio','evening'].includes(patch.preset))throw Error('不支持的光照场景');appearance.preset(patch.preset);appearanceState.preset=patch.preset;appearanceState.exposure=appearance.state.exposure;}
 if(patch.exposure!==undefined){if(!Number.isFinite(patch.exposure)||patch.exposure<.55||patch.exposure>1.6)throw Error('亮度超出有效范围');appearance.exposure(patch.exposure);appearanceState.exposure=patch.exposure;}
 if(patch.contextOpacity!==undefined){if(!Number.isFinite(patch.contextOpacity)||patch.contextOpacity<0||patch.contextOpacity>1)throw Error('建筑背景透明度超出有效范围');appearanceState.contextOpacity=patch.contextOpacity;for(const object of root.children)object.traverse(mesh=>{if(mesh.isMesh)for(const material of Array.isArray(mesh.material)?mesh.material:[mesh.material])applyBuildingContext(material,['network','hydraulic'].includes(mode),appearanceState.contextOpacity);});appearance.refresh();}
 if(patch.shadows!==undefined){appearance.shadows(Boolean(patch.shadows));appearanceState.shadows=Boolean(patch.shadows);}
 if(patch.effects!==undefined){effects.setEnabled(Boolean(patch.effects));appearanceState.effects=Boolean(patch.effects);}
 if(patch.quality!==undefined){if(!['standard','high'].includes(patch.quality))throw Error('不支持的画质');effects.setQuality(patch.quality);appearanceState.quality=patch.quality;localStorage.setItem('zjb-render-quality-v27',patch.quality);}
 window.webQA.appearance={...appearanceState};
 postState();
 }
 function toggleContext(){contextVisible=!contextVisible;window.webQA.contextVisible=contextVisible;applyVisibility();appearance.refresh();postState();}
 function toggleRoof(){roofVisible=!roofVisible;applyVisibility();appearance.refresh();postState();}
 function resizeView(){const current=viewport();camera.aspect=current.width/current.height;camera.updateProjectionMatrix();renderer.setSize(current.width,current.height);effects.resize(current.width,current.height);}
 addEventListener('resize',resizeView);
 const ray=new THREE.Raycaster();let pointerStart=null,pointerMoved=false;
 renderer.domElement.addEventListener('pointerdown',event=>{pointerStart=[event.clientX,event.clientY];pointerMoved=false;});
 renderer.domElement.addEventListener('pointermove',event=>{if(pointerStart&&Math.hypot(event.clientX-pointerStart[0],event.clientY-pointerStart[1])>6)pointerMoved=true;});
 renderer.domElement.addEventListener('click',event=>{
 if(pointerMoved||!inspector)return;
 const current=viewport();ray.setFromCamera(new THREE.Vector2(event.clientX/current.width*2-1,1-event.clientY/current.height*2),camera);
 const visible=object=>{while(object){if(!object.visible)return false;object=object.parent;}return true;};
 const hits=ray.intersectObjects([...(networkRoot?.visible?[networkRoot]:[]),...(root.visible?[root]:[])],true).filter(hit=>visible(hit.object));
 for(const hit of hits){
  let data=hit.object.userData.instances?.[hit.instanceId];
  if(!data){let object=hit.object;while(object.parent&&!object.userData.inpId&&!object.userData.hostLinkId&&!object.userData.assetId)object=object.parent;data=object.userData;}
  if(data.assetId){try{inspector.select(data.assetId);window.webQA.picked=data.assetId;break;}catch{}}
 }
 });
 let locateRequest=0;
 async function locateAsset(item){
 const request=++locateRequest;navigation?.stop();const targetMode=net.coordination.scopeLinkIds.includes(item.id)?'hydraulic':'network';const expected=mode!==targetMode?generation+1:generation;
 if(mode!==targetMode)await show(targetMode,{frame:false});if(request!==locateRequest||generation!==expected)return;
 setDisplayMode(targetMode==='hydraulic'?'coordinated':'global');contextVisible=targetMode!=='hydraulic';applyVisibility();
 const box=inspector.bounds(item);if(box.isEmpty())return;box.expandByScalar(item.link?.kind==='PUMPS'?.6:1);
 const pose=framePose(box,camera.aspect,{padding:1.3});camera.up.fromArray(pose.up??[0,1,0]).normalize();controls.target.fromArray(pose.target);camera.position.fromArray(pose.position);camera.far=20000;controls.update();appearance.frame(box,targetMode);inspector.highlight();postState();
 }
 let lastFrame=performance.now(),frameTimes=[];
 renderer.setAnimationLoop(()=>{
 const now=performance.now(),delta=now-lastFrame;lastFrame=now;if(delta<250){frameTimes.push(delta);if(frameTimes.length>120)frameTimes.shift();}
 if(frameTimes.length>=60)window.webQA.performance={samples:frameTimes.length,meanFps:1000/(frameTimes.reduce((sum,value)=>sum+value,0)/frameTimes.length),viewport:viewport(),quality:effects.state.quality};
 renderer.info.reset();navigation?.tick(performance.now());controls.update();const near=Math.max(.02,camera.position.distanceTo(controls.target)/150);
 if(Math.abs(camera.near-near)>.001){camera.near=near;camera.updateProjectionMatrix();}
 effects.render(mode);window.webQA.drawCalls=renderer.info.render.calls;window.webQA.triangles=renderer.info.render.triangles;window.webQA.camera={active:cameraState.active,position:camera.position.toArray(),target:controls.target.toArray(),up:camera.up.toArray()};document.getElementById('qa').textContent=JSON.stringify(window.webQA);
 });
 startLoading([manifest.networkModel.metadata,manifest.networkModel.file,...manifest.networkContext.map(id=>manifest.assets.find(asset=>asset.id===id).file)]);
 net=await resourceCache.load(manifest.networkModel.metadata,manifest.networkModel.metadataSha256,data=>parseNetworkMetadata(data,manifest.networkModel.id));
 const built=await loadModel(manifest.networkModel);networkRoot=built.scene;enhanceMaterials(networkRoot);scene.add(networkRoot);
 networkStyle=attachNetworkStyle(networkRoot,net);grain(networkStyle.pipes.material,{frequency:140,amplitude:.00004,variation:.08});
 try{const saved=localStorage.getItem('zjb-network-style-v24');if(saved)networkStyle.setStyle(JSON.parse(saved));}catch{}
 try{const quality=localStorage.getItem('zjb-render-quality-v27')??'standard';effects.setQuality(quality);appearanceState.quality=quality;}catch{effects.setQuality('standard');}
 window.webQA.network={...net.connectivity,meters:net.cadEquipmentBindings.length,modelId:net.modelId,runtimeInpRequired:false};
 window.webQA.networkStyle={...networkStyle.summary,style:networkStyle.style};window.webQA.appearance={...appearanceState};
 navigation=createCameraNavigation({camera,controls,model:net,networkRoot,root,show,getMode:()=>mode,appearance,getDisplayMode:()=>networkStyle.displayMode,setDisplayMode,onChange(state){
 cameraState={active:state.active,note:state.note,views:state.views.map(view=>({id:view.id,label:view.label,mode:view.mode,note:view.note,saved:view.id.startsWith('saved-')}))};postState();
 }});
 inspector=createAssetInspector({model:net,networkRoot,scene,style:networkStyle,onLocate:locateAsset,onSelectionChange(selection){postHost('selection-changed',{selection});}});
 window.addEventListener('message',async event=>{
 if(!trustedHostMessage(event))return;
 try{
  const data=event.data;
  if(data.type==='results'){
   networkStyle.setResults(data.payload);if(networkStyle.style.mode==='uniform')networkStyle.setStyle({mode:'pressure'});updateStyle();postHost('results-applied',{summary:networkStyle.summary});return;
  }
  if(data.type==='clear-results'){
   networkStyle.clearResults();updateStyle();postHost('results-cleared');return;
  }
  if(data.type!=='command'||!data.command||typeof data.command!=='object')return;
  const command=data.command;
  if(command.name==='set-mode'){navigation.stop();await show(command.mode);}
  else if(command.name==='visit-camera')await navigation.visit(command.viewId);
  else if(command.name==='save-camera')navigation.save(command.label);
  else if(command.name==='remove-camera')navigation.remove(command.viewId);
  else if(command.name==='set-style'){networkStyle.setStyle(command.patch);localStorage.setItem('zjb-network-style-v24',JSON.stringify(networkStyle.style));updateStyle();}
  else if(command.name==='reset-style'){networkStyle.setStyle(DEFAULT_STYLE);localStorage.removeItem('zjb-network-style-v24');updateStyle();}
  else if(command.name==='set-display-mode')setDisplayMode(command.mode);
  else if(command.name==='set-appearance')applyAppearance(command.patch);
  else if(command.name==='toggle-context')toggleContext();
  else if(command.name==='toggle-roof')toggleRoof();
  else if(command.name==='fit-view'){navigation.stop();fit();postState();}
  else if(command.name==='select-asset')inspector.select(command.assetId);
  else if(command.name==='locate-selection')await inspector.locate();
  else if(command.name==='clear-selection')inspector.clear();
  else throw Error('不支持的场景命令');
 }catch(error){const message=error instanceof Error?error.message:String(error);postHost('error',{message});}
 });
 await navigation.visit('overview');
 sceneReady=true;
 completeLoading();
 postHost('ready',{nodeIds:net.nodes.map(node=>String(node.id)),linkIds:net.links.map(link=>String(link.id)),state:runtimeState()});
@@ -0,0 +1,23 @@
 import {EffectComposer} from 'three/addons/postprocessing/EffectComposer.js';
 import {RenderPass} from 'three/addons/postprocessing/RenderPass.js';
 import {SSAOPass} from 'three/addons/postprocessing/SSAOPass.js';
 import {OutputPass} from 'three/addons/postprocessing/OutputPass.js';
 import {ShaderPass} from 'three/addons/postprocessing/ShaderPass.js';
 import {FXAAShader} from 'three/addons/shaders/FXAAShader.js';
 export function createRenderEffects(renderer,scene,camera,width,height){
 const composer=new EffectComposer(renderer),base=new RenderPass(scene,camera),ao=new SSAOPass(scene,camera,width,height,16),output=new OutputPass(),aa=new ShaderPass(FXAAShader);
 composer.addPass(base);composer.addPass(ao);composer.addPass(output);composer.addPass(aa);
 ao.kernelRadius=8;ao.minDistance=.001;ao.maxDistance=.035;
 const state={revision:27,quality:'standard',enabled:true,aoActive:false,antialias:'FXAA'};
 let widthNow=width,heightNow=height;function resize(w,h){widthNow=w;heightNow=h;const d=renderer.getPixelRatio();composer.setPixelRatio(d);composer.setSize(w,h);ao.setSize(Math.max(1,Math.round(w*d*(state.quality==='standard'?.5:1))),Math.max(1,Math.round(h*d*(state.quality==='standard'?.5:1))));aa.material.uniforms.resolution.value.set(1/(w*d),1/(h*d));}
 resize(width,height);
 return {state,resize,setQuality(value){if(!['standard','high'].includes(value))throw Error('未知画质');state.quality=value;renderer.setPixelRatio(Math.min(devicePixelRatio,value==='standard'?1:2));renderer.setSize(widthNow,heightNow);resize(widthNow,heightNow);},setEnabled(value){state.enabled=!!value;},render(mode){
  // Transparent architectural context and broad plans retain the clean network renderer.
  ao.enabled=state.enabled&&['hydraulic','pump','meters'].includes(mode);
  state.aoActive=ao.enabled;base.enabled=true;ao.ssaoMaterial.uniforms.cameraProjectionMatrix.value.copy(camera.projectionMatrix);ao.ssaoMaterial.uniforms.cameraInverseProjectionMatrix.value.copy(camera.projectionMatrixInverse);ao.ssaoMaterial.uniforms.cameraNear.value=camera.near;ao.ssaoMaterial.uniforms.cameraFar.value=camera.far;
  if(state.enabled)composer.render();else renderer.render(scene,camera);
 },dispose(){for(const p of [ao,output,aa])p.dispose();composer.dispose();}};
 }
@@ -0,0 +1,188 @@
 // Only static scene assets enter this database. Live simulation/SCADA data do not.
 const DATABASE = 'tjwater-scene-assets-v1';
 const STORE = 'resources';
 const REQUEST_TIMEOUT_MS = 30_000;
 const CHUNK_BYTES = 1024 * 1024;
 const MAX_ATTEMPTS = 3;
 function openDatabase() {
 return new Promise(resolve => {
  let settled = false;
  const finish = value => { if (!settled) { settled = true; resolve(value); } };
  try {
   const request = globalThis.indexedDB.open(DATABASE, 1);
   request.onupgradeneeded = () => request.result.createObjectStore(STORE, {keyPath:'url'});
   request.onerror = request.onblocked = () => finish(null);
   request.onsuccess = () => {
    const database = request.result;
    if (settled) { database.close(); return; }
    database.onversionchange = () => database.close();
    finish(database);
   };
  } catch { finish(null); }
 });
 }
 function transact(database, mode, operation) {
 return new Promise((resolve, reject) => {
  const transaction = database.transaction(STORE, mode);
  const request = operation(transaction.objectStore(STORE));
  transaction.oncomplete = () => resolve(request.result);
  transaction.onerror = transaction.onabort = () => reject(transaction.error ?? request.error);
 });
 }
 export function createSceneResourceCache(baseUrl, onProgress = () => {}) {
 // Open lazily, after synchronous WebGL setup, so database callbacks can run promptly.
 let database;
 const pending = new Map();
 async function read(file, revision, decode) {
  const url = new URL(file, baseUrl);
  const key = url.href;
  const report = (stage, loaded = 0, total = 0) => onProgress({file, stage, loaded, total});
  const storage = await (database ??= openDatabase());
  if (storage && revision) {
   try {
    const entry = await transact(storage, 'readonly', store => store.get(key));
    if (entry?.revision === revision && entry.data instanceof ArrayBuffer) {
     report('cache', entry.data.byteLength, entry.data.byteLength);
     const result = await decode(entry.data);
     report('ready', entry.data.byteLength, entry.data.byteLength);
     return result;
    }
   } catch { /* Unavailable or invalid cache: fetch a fresh copy below. */ }
  }
  // Revisioned URLs also keep the browser's HTTP cache in sync with the manifest.
  if (revision) url.searchParams.set('v', revision);
  const partialKey = key + '#partial';
  let chunks = [], loaded = 0, total = 0;
  if (storage && revision) {
   try {
    const partial = await transact(storage, 'readonly', store => store.get(partialKey));
    if (partial?.revision === revision && Number.isSafeInteger(partial.total) && partial.total > 0 &&
        Array.isArray(partial.chunks) && partial.chunks.length &&
        partial.chunks.every(chunk => chunk instanceof ArrayBuffer && chunk.byteLength > 0 && chunk.byteLength <= CHUNK_BYTES)) {
     const size = partial.chunks.reduce((sum, chunk) => sum + chunk.byteLength, 0);
     if (size <= partial.total) { chunks = partial.chunks; loaded = size; total = partial.total; }
    }
   } catch { /* A denied partial cache does not prevent downloading. */ }
  }
  async function downloadPart() {
   const controller = new AbortController();
   let timer;
   const resetTimeout = () => {
    clearTimeout(timer);
    timer = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
   };
   resetTimeout();
   try {
    const end = total ? Math.min(loaded + CHUNK_BYTES, total) - 1 : loaded + CHUNK_BYTES - 1;
    const response = await fetch(url, {signal:controller.signal, cache:'no-cache', headers:{Range:`bytes=${loaded}-${end}`}});
    if (!response.ok) {
     const error = Error('HTTP ' + response.status);
     error.retryable = [408, 429, 500, 502, 503, 504].includes(response.status);
     throw error;
    }
    let partTotal = 0, expected = 0;
    if (response.status === 206) {
     const range = /^bytes (\d+)-(\d+)\/(\d+)$/.exec(response.headers.get('content-range') ?? '');
     const start = Number(range?.[1]), last = Number(range?.[2]);
     partTotal = Number(range?.[3]);
     if (!range || start !== loaded || last < start || last > end || last >= partTotal ||
         !Number.isSafeInteger(partTotal) || (total && total !== partTotal)) {
      throw Error('资源分段响应无效');
     }
     expected = last - start + 1;
    } else {
     if (loaded) throw Error('服务器未按断点返回资源');
     // Servers without Range support can still return an ordinary complete response.
     partTotal = Number(response.headers.get('content-length')) || 0;
    }
    const buffers = [];
    let size = 0;
    if (response.body) {
     const reader = response.body.getReader();
     try {
      while (true) {
       const {done, value} = await reader.read();
       if (done) break;
       buffers.push(value); size += value.byteLength;
       if (expected && size > expected) throw Error('资源分段长度无效');
       report('download', loaded + size, partTotal); resetTimeout();
      }
     } finally { await reader.cancel().catch(() => {}); }
    } else {
     const buffer = new Uint8Array(await response.arrayBuffer());
     buffers.push(buffer); size = buffer.byteLength;
    }
    if (expected && size !== expected) throw Error('资源分段不完整');
    const bytes = new Uint8Array(size);
    let offset = 0;
    for (const buffer of buffers) { bytes.set(buffer, offset); offset += buffer.byteLength; }
    return {data:bytes.buffer, total:response.status === 206 ? partTotal : size, ranged:response.status === 206};
   } catch (error) {
    controller.abort();
    throw error;
   } finally { clearTimeout(timer); }
  }
  report('download', loaded, total);
  try {
   while (!total || loaded < total) {
    let part;
    for (let attempt = 0; attempt < MAX_ATTEMPTS; attempt++) {
     try { part = await downloadPart(); break; }
     catch (error) {
      // Permanent HTTP/contract errors stop; temporary transport/server errors can recover.
      if (!error.retryable && !(error instanceof TypeError) && error.name !== 'AbortError' && error.message !== '资源分段不完整') throw error;
      if (attempt + 1 === MAX_ATTEMPTS) throw error;
      report('retry', loaded, total);
      await new Promise(resolve => setTimeout(resolve, 300 * (attempt + 1)));
     }
    }
    chunks.push(part.data); loaded += part.data.byteLength; total = part.total;
    if (storage && revision && part.ranged) {
     try { await transact(storage, 'readwrite', store => store.put({url:partialKey, revision, total, chunks})); }
     catch { /* Storage denied/full: retain the in-memory download. */ }
    }
    if (!part.ranged) break;
   }
  } catch (error) {
   throw Error(file + '：' + (error.name === 'AbortError' ? '下载超时，请重试' : error.message));
  }
  const bytes = new Uint8Array(loaded);
  let offset = 0;
  for (const chunk of chunks) { bytes.set(new Uint8Array(chunk), offset); offset += chunk.byteLength; }
  const data = bytes.buffer;
  if (storage) {
   try { await transact(storage, 'readwrite', store => store.delete(partialKey)); }
   catch { /* Completed bytes can still be parsed when storage is unavailable. */ }
  }
  report('parse', data.byteLength, data.byteLength);
  // Validate/parse before persisting so an HTML error page or bad GLB cannot poison the cache.
  const result = await decode(data);
  if (storage && revision) {
   try {
    // One entry per URL: a successful new revision replaces the old bytes.
    await transact(storage, 'readwrite', store => store.put({url:key, revision, data}));
   } catch { /* Storage denied/full must not prevent scene rendering. */ }
  }
  report('ready', data.byteLength, data.byteLength);
  return result;
 }
 return {
  load(file, revision, decode = data => data) {
   const key = file + ':' + revision;
   if (!pending.has(key)) {
    const task = read(file, revision, decode).finally(() => pending.delete(key));
    pending.set(key, task);
   }
   return pending.get(key);
  },
 };
 }
@@ -0,0 +1,21 @@
 MIT License
 Copyright (c) 2016-2025 Arseny Kapoulkine
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
@@ -0,0 +1,21 @@
 The MIT License
 Copyright © 2010-2025 three.js authors
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 The above copyright notice and this permission notice shall be included in
 all copies or substantial portions of the Software.
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
@@ -0,0 +1,182 @@
 import {
 	BackSide,
 	BoxGeometry,
 	InstancedMesh,
 	Mesh,
 	MeshLambertMaterial,
 	MeshStandardMaterial,
 	PointLight,
 	Scene,
 	Object3D,
 } from 'three';
 /**
 * This class represents a scene with a basic room setup that can be used as
 * input for {@link PMREMGenerator#fromScene}. The resulting PMREM represents the room's
 * lighting and can be used for Image Based Lighting by assigning it to {@link Scene#environment}
 * or directly as an environment map to PBR materials.
 *
 * The implementation is based on the [EnvironmentScene](https://github.com/google/model-viewer/blob/master/packages/model-viewer/src/three-components/EnvironmentScene.ts)
 * component from the `model-viewer` project.
 *
 * ```js
 * const environment = new RoomEnvironment();
 * const pmremGenerator = new THREE.PMREMGenerator( renderer );
 *
 * const envMap = pmremGenerator.fromScene( environment ).texture;
 * scene.environment = envMap;
 * ```
 *
 * @augments Scene
 * @three_import import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
 */
 class RoomEnvironment extends Scene {
 	constructor() {
 		super();
 		const geometry = new BoxGeometry();
 		geometry.deleteAttribute( 'uv' );
 		const roomMaterial = new MeshStandardMaterial( { side: BackSide } );
 		const boxMaterial = new MeshStandardMaterial();
 		const mainLight = new PointLight( 0xffffff, 900, 28, 2 );
 		mainLight.position.set( 0.418, 16.199, 0.300 );
 		this.add( mainLight );
 		const room = new Mesh( geometry, roomMaterial );
 		room.position.set( - 0.757, 13.219, 0.717 );
 		room.scale.set( 31.713, 28.305, 28.591 );
 		this.add( room );
 		const boxes = new InstancedMesh( geometry, boxMaterial, 6 );
 		const transform = new Object3D();
 		// box1
 		transform.position.set( - 10.906, 2.009, 1.846 );
 		transform.rotation.set( 0, - 0.195, 0 );
 		transform.scale.set( 2.328, 7.905, 4.651 );
 		transform.updateMatrix();
 		boxes.setMatrixAt( 0, transform.matrix );
 		// box2
 		transform.position.set( - 5.607, - 0.754, - 0.758 );
 		transform.rotation.set( 0, 0.994, 0 );
 		transform.scale.set( 1.970, 1.534, 3.955 );
 		transform.updateMatrix();
 		boxes.setMatrixAt( 1, transform.matrix );
 		// box3
 		transform.position.set( 6.167, 0.857, 7.803 );
 		transform.rotation.set( 0, 0.561, 0 );
 		transform.scale.set( 3.927, 6.285, 3.687 );
 		transform.updateMatrix();
 		boxes.setMatrixAt( 2, transform.matrix );
 		// box4
 		transform.position.set( - 2.017, 0.018, 6.124 );
 		transform.rotation.set( 0, 0.333, 0 );
 		transform.scale.set( 2.002, 4.566, 2.064 );
 		transform.updateMatrix();
 		boxes.setMatrixAt( 3, transform.matrix );
 		// box5
 		transform.position.set( 2.291, - 0.756, - 2.621 );
 		transform.rotation.set( 0, - 0.286, 0 );
 		transform.scale.set( 1.546, 1.552, 1.496 );
 		transform.updateMatrix();
 		boxes.setMatrixAt( 4, transform.matrix );
 		// box6
 		transform.position.set( - 2.193, - 0.369, - 5.547 );
 		transform.rotation.set( 0, 0.516, 0 );
 		transform.scale.set( 3.875, 3.487, 2.986 );
 		transform.updateMatrix();
 		boxes.setMatrixAt( 5, transform.matrix );
 		this.add( boxes );
 		// -x right
 		const light1 = new Mesh( geometry, createAreaLightMaterial( 50 ) );
 		light1.position.set( - 16.116, 14.37, 8.208 );
 		light1.scale.set( 0.1, 2.428, 2.739 );
 		this.add( light1 );
 		// -x left
 		const light2 = new Mesh( geometry, createAreaLightMaterial( 50 ) );
 		light2.position.set( - 16.109, 18.021, - 8.207 );
 		light2.scale.set( 0.1, 2.425, 2.751 );
 		this.add( light2 );
 		// +x
 		const light3 = new Mesh( geometry, createAreaLightMaterial( 17 ) );
 		light3.position.set( 14.904, 12.198, - 1.832 );
 		light3.scale.set( 0.15, 4.265, 6.331 );
 		this.add( light3 );
 		// +z
 		const light4 = new Mesh( geometry, createAreaLightMaterial( 43 ) );
 		light4.position.set( - 0.462, 8.89, 14.520 );
 		light4.scale.set( 4.38, 5.441, 0.088 );
 		this.add( light4 );
 		// -z
 		const light5 = new Mesh( geometry, createAreaLightMaterial( 20 ) );
 		light5.position.set( 3.235, 11.486, - 12.541 );
 		light5.scale.set( 2.5, 2.0, 0.1 );
 		this.add( light5 );
 		// +y
 		const light6 = new Mesh( geometry, createAreaLightMaterial( 100 ) );
 		light6.position.set( 0.0, 20.0, 0.0 );
 		light6.scale.set( 1.0, 0.1, 1.0 );
 		this.add( light6 );
 	}
 	/**
 	 * Frees internal resources. This method should be called
 	 * when the environment is no longer required.
 	 */
 	dispose() {
 		const resources = new Set();
 		this.traverse( ( object ) => {
 			if ( object.isMesh ) {
 				resources.add( object.geometry );
 				resources.add( object.material );
 			}
 		} );
 		for ( const resource of resources ) {
 			resource.dispose();
 		}
 	}
 }
 function createAreaLightMaterial( intensity ) {
 	// create an emissive-only material. see #31348
 	const material = new MeshLambertMaterial( {
 		color: 0x000000,
 		emissive: 0xffffff,
 		emissiveIntensity: intensity
 	} );
 	return material;
 }
 export { RoomEnvironment };
@@ -0,0 +1,470 @@
 /**
 * A utility class providing noise functions.
 *
 * The code is based on [Simplex noise demystified]{@link https://web.archive.org/web/20210210162332/http://staffwww.itn.liu.se/~stegu/simplexnoise/simplexnoise.pdf}
 * by Stefan Gustavson, 2005.
 *
 * @three_import import { SimplexNoise } from 'three/addons/math/SimplexNoise.js';
 */
 class SimplexNoise {
 	/**
 	 * Constructs a new simplex noise object.
 	 *
 	 * @param {Object} [r=Math] - A math utility class that holds a `random()` method. This makes it
 	 * possible to pass in custom random number generator.
 	 */
 	constructor( r = Math ) {
 		this.grad3 = [[ 1, 1, 0 ], [ - 1, 1, 0 ], [ 1, - 1, 0 ], [ - 1, - 1, 0 ],
 			[ 1, 0, 1 ], [ - 1, 0, 1 ], [ 1, 0, - 1 ], [ - 1, 0, - 1 ],
 			[ 0, 1, 1 ], [ 0, - 1, 1 ], [ 0, 1, - 1 ], [ 0, - 1, - 1 ]];
 		this.grad4 = [[ 0, 1, 1, 1 ], [ 0, 1, 1, - 1 ], [ 0, 1, - 1, 1 ], [ 0, 1, - 1, - 1 ],
 			[ 0, - 1, 1, 1 ], [ 0, - 1, 1, - 1 ], [ 0, - 1, - 1, 1 ], [ 0, - 1, - 1, - 1 ],
 			[ 1, 0, 1, 1 ], [ 1, 0, 1, - 1 ], [ 1, 0, - 1, 1 ], [ 1, 0, - 1, - 1 ],
 			[ - 1, 0, 1, 1 ], [ - 1, 0, 1, - 1 ], [ - 1, 0, - 1, 1 ], [ - 1, 0, - 1, - 1 ],
 			[ 1, 1, 0, 1 ], [ 1, 1, 0, - 1 ], [ 1, - 1, 0, 1 ], [ 1, - 1, 0, - 1 ],
 			[ - 1, 1, 0, 1 ], [ - 1, 1, 0, - 1 ], [ - 1, - 1, 0, 1 ], [ - 1, - 1, 0, - 1 ],
 			[ 1, 1, 1, 0 ], [ 1, 1, - 1, 0 ], [ 1, - 1, 1, 0 ], [ 1, - 1, - 1, 0 ],
 			[ - 1, 1, 1, 0 ], [ - 1, 1, - 1, 0 ], [ - 1, - 1, 1, 0 ], [ - 1, - 1, - 1, 0 ]];
 		this.p = [];
 		for ( let i = 0; i < 256; i ++ ) {
 			this.p[ i ] = Math.floor( r.random() * 256 );
 		}
 		// To remove the need for index wrapping, double the permutation table length
 		this.perm = [];
 		for ( let i = 0; i < 512; i ++ ) {
 			this.perm[ i ] = this.p[ i & 255 ];
 		}
 		// A lookup table to traverse the simplex around a given point in 4D.
 		// Details can be found where this table is used, in the 4D noise method.
 		this.simplex = [
 			[ 0, 1, 2, 3 ], [ 0, 1, 3, 2 ], [ 0, 0, 0, 0 ], [ 0, 2, 3, 1 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 1, 2, 3, 0 ],
 			[ 0, 2, 1, 3 ], [ 0, 0, 0, 0 ], [ 0, 3, 1, 2 ], [ 0, 3, 2, 1 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 1, 3, 2, 0 ],
 			[ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ],
 			[ 1, 2, 0, 3 ], [ 0, 0, 0, 0 ], [ 1, 3, 0, 2 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 2, 3, 0, 1 ], [ 2, 3, 1, 0 ],
 			[ 1, 0, 2, 3 ], [ 1, 0, 3, 2 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 2, 0, 3, 1 ], [ 0, 0, 0, 0 ], [ 2, 1, 3, 0 ],
 			[ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ],
 			[ 2, 0, 1, 3 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 3, 0, 1, 2 ], [ 3, 0, 2, 1 ], [ 0, 0, 0, 0 ], [ 3, 1, 2, 0 ],
 			[ 2, 1, 0, 3 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 3, 1, 0, 2 ], [ 0, 0, 0, 0 ], [ 3, 2, 0, 1 ], [ 3, 2, 1, 0 ]];
 	}
 	/**
 	 * A 2D simplex noise method.
 	 *
 	 * @param {number} xin - The x coordinate.
 	 * @param {number} yin - The y coordinate.
 	 * @return {number} The noise value.
 	 */
 	noise( xin, yin ) {
 		let n0; // Noise contributions from the three corners
 		let n1;
 		let n2;
 		// Skew the input space to determine which simplex cell we're in
 		const F2 = 0.5 * ( Math.sqrt( 3.0 ) - 1.0 );
 		const s = ( xin + yin ) * F2; // Hairy factor for 2D
 		const i = Math.floor( xin + s );
 		const j = Math.floor( yin + s );
 		const G2 = ( 3.0 - Math.sqrt( 3.0 ) ) / 6.0;
 		const t = ( i + j ) * G2;
 		const X0 = i - t; // Unskew the cell origin back to (x,y) space
 		const Y0 = j - t;
 		const x0 = xin - X0; // The x,y distances from the cell origin
 		const y0 = yin - Y0;
 		// For the 2D case, the simplex shape is an equilateral triangle.
 		// Determine which simplex we are in.
 		let i1; // Offsets for second (middle) corner of simplex in (i,j) coords
 		let j1;
 		if ( x0 > y0 ) {
 			i1 = 1; j1 = 0;
 			// lower triangle, XY order: (0,0)->(1,0)->(1,1)
 		}	else {
 			i1 = 0; j1 = 1;
 		} // upper triangle, YX order: (0,0)->(0,1)->(1,1)
 		// A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and
 		// a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where
 		// c = (3-sqrt(3))/6
 		const x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords
 		const y1 = y0 - j1 + G2;
 		const x2 = x0 - 1.0 + 2.0 * G2; // Offsets for last corner in (x,y) unskewed coords
 		const y2 = y0 - 1.0 + 2.0 * G2;
 		// Work out the hashed gradient indices of the three simplex corners
 		const ii = i & 255;
 		const jj = j & 255;
 		const gi0 = this.perm[ ii + this.perm[ jj ] ] % 12;
 		const gi1 = this.perm[ ii + i1 + this.perm[ jj + j1 ] ] % 12;
 		const gi2 = this.perm[ ii + 1 + this.perm[ jj + 1 ] ] % 12;
 		// Calculate the contribution from the three corners
 		let t0 = 0.5 - x0 * x0 - y0 * y0;
 		if ( t0 < 0 ) n0 = 0.0;
 		else {
 			t0 *= t0;
 			n0 = t0 * t0 * this._dot( this.grad3[ gi0 ], x0, y0 ); // (x,y) of grad3 used for 2D gradient
 		}
 		let t1 = 0.5 - x1 * x1 - y1 * y1;
 		if ( t1 < 0 ) n1 = 0.0;
 		else {
 			t1 *= t1;
 			n1 = t1 * t1 * this._dot( this.grad3[ gi1 ], x1, y1 );
 		}
 		let t2 = 0.5 - x2 * x2 - y2 * y2;
 		if ( t2 < 0 ) n2 = 0.0;
 		else {
 			t2 *= t2;
 			n2 = t2 * t2 * this._dot( this.grad3[ gi2 ], x2, y2 );
 		}
 		// Add contributions from each corner to get the final noise value.
 		// The result is scaled to return values in the interval [-1,1].
 		return 70.0 * ( n0 + n1 + n2 );
 	}
 	/**
 	 * A 3D simplex noise method.
 	 *
 	 * @param {number} xin - The x coordinate.
 	 * @param {number} yin - The y coordinate.
 	 * @param {number} zin - The z coordinate.
 	 * @return {number} The noise value.
 	 */
 	noise3d( xin, yin, zin ) {
 		let n0; // Noise contributions from the four corners
 		let n1;
 		let n2;
 		let n3;
 		// Skew the input space to determine which simplex cell we're in
 		const F3 = 1.0 / 3.0;
 		const s = ( xin + yin + zin ) * F3; // Very nice and simple skew factor for 3D
 		const i = Math.floor( xin + s );
 		const j = Math.floor( yin + s );
 		const k = Math.floor( zin + s );
 		const G3 = 1.0 / 6.0; // Very nice and simple unskew factor, too
 		const t = ( i + j + k ) * G3;
 		const X0 = i - t; // Unskew the cell origin back to (x,y,z) space
 		const Y0 = j - t;
 		const Z0 = k - t;
 		const x0 = xin - X0; // The x,y,z distances from the cell origin
 		const y0 = yin - Y0;
 		const z0 = zin - Z0;
 		// For the 3D case, the simplex shape is a slightly irregular tetrahedron.
 		// Determine which simplex we are in.
 		let i1; // Offsets for second corner of simplex in (i,j,k) coords
 		let j1;
 		let k1;
 		let i2; // Offsets for third corner of simplex in (i,j,k) coords
 		let j2;
 		let k2;
 		if ( x0 >= y0 ) {
 			if ( y0 >= z0 ) {
 				i1 = 1; j1 = 0; k1 = 0; i2 = 1; j2 = 1; k2 = 0;
 				// X Y Z order
 			} else if ( x0 >= z0 ) {
 				i1 = 1; j1 = 0; k1 = 0; i2 = 1; j2 = 0; k2 = 1;
 				// X Z Y order
 			} else {
 				i1 = 0; j1 = 0; k1 = 1; i2 = 1; j2 = 0; k2 = 1;
 			} // Z X Y order
 		} else { // x0<y0
 			if ( y0 < z0 ) {
 				i1 = 0; j1 = 0; k1 = 1; i2 = 0; j2 = 1; k2 = 1;
 				// Z Y X order
 			} else if ( x0 < z0 ) {
 				i1 = 0; j1 = 1; k1 = 0; i2 = 0; j2 = 1; k2 = 1;
 				// Y Z X order
 			} else {
 				i1 = 0; j1 = 1; k1 = 0; i2 = 1; j2 = 1; k2 = 0;
 			} // Y X Z order
 		}
 		// A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z),
 		// a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and
 		// a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where
 		// c = 1/6.
 		const x1 = x0 - i1 + G3; // Offsets for second corner in (x,y,z) coords
 		const y1 = y0 - j1 + G3;
 		const z1 = z0 - k1 + G3;
 		const x2 = x0 - i2 + 2.0 * G3; // Offsets for third corner in (x,y,z) coords
 		const y2 = y0 - j2 + 2.0 * G3;
 		const z2 = z0 - k2 + 2.0 * G3;
 		const x3 = x0 - 1.0 + 3.0 * G3; // Offsets for last corner in (x,y,z) coords
 		const y3 = y0 - 1.0 + 3.0 * G3;
 		const z3 = z0 - 1.0 + 3.0 * G3;
 		// Work out the hashed gradient indices of the four simplex corners
 		const ii = i & 255;
 		const jj = j & 255;
 		const kk = k & 255;
 		const gi0 = this.perm[ ii + this.perm[ jj + this.perm[ kk ] ] ] % 12;
 		const gi1 = this.perm[ ii + i1 + this.perm[ jj + j1 + this.perm[ kk + k1 ] ] ] % 12;
 		const gi2 = this.perm[ ii + i2 + this.perm[ jj + j2 + this.perm[ kk + k2 ] ] ] % 12;
 		const gi3 = this.perm[ ii + 1 + this.perm[ jj + 1 + this.perm[ kk + 1 ] ] ] % 12;
 		// Calculate the contribution from the four corners
 		let t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0;
 		if ( t0 < 0 ) n0 = 0.0;
 		else {
 			t0 *= t0;
 			n0 = t0 * t0 * this._dot3( this.grad3[ gi0 ], x0, y0, z0 );
 		}
 		let t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1;
 		if ( t1 < 0 ) n1 = 0.0;
 		else {
 			t1 *= t1;
 			n1 = t1 * t1 * this._dot3( this.grad3[ gi1 ], x1, y1, z1 );
 		}
 		let t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2;
 		if ( t2 < 0 ) n2 = 0.0;
 		else {
 			t2 *= t2;
 			n2 = t2 * t2 * this._dot3( this.grad3[ gi2 ], x2, y2, z2 );
 		}
 		let t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3;
 		if ( t3 < 0 ) n3 = 0.0;
 		else {
 			t3 *= t3;
 			n3 = t3 * t3 * this._dot3( this.grad3[ gi3 ], x3, y3, z3 );
 		}
 		// Add contributions from each corner to get the final noise value.
 		// The result is scaled to stay just inside [-1,1]
 		return 32.0 * ( n0 + n1 + n2 + n3 );
 	}
 	/**
 	 * A 4D simplex noise method.
 	 *
 	 * @param {number} x - The x coordinate.
 	 * @param {number} y - The y coordinate.
 	 * @param {number} z - The z coordinate.
 	 * @param {number} w - The w coordinate.
 	 * @return {number} The noise value.
 	 */
 	noise4d( x, y, z, w ) {
 		// For faster and easier lookups
 		const grad4 = this.grad4;
 		const simplex = this.simplex;
 		const perm = this.perm;
 		// The skewing and unskewing factors are hairy again for the 4D case
 		const F4 = ( Math.sqrt( 5.0 ) - 1.0 ) / 4.0;
 		const G4 = ( 5.0 - Math.sqrt( 5.0 ) ) / 20.0;
 		let n0; // Noise contributions from the five corners
 		let n1;
 		let n2;
 		let n3;
 		let n4;
 		// Skew the (x,y,z,w) space to determine which cell of 24 simplices we're in
 		const s = ( x + y + z + w ) * F4; // Factor for 4D skewing
 		const i = Math.floor( x + s );
 		const j = Math.floor( y + s );
 		const k = Math.floor( z + s );
 		const l = Math.floor( w + s );
 		const t = ( i + j + k + l ) * G4; // Factor for 4D unskewing
 		const X0 = i - t; // Unskew the cell origin back to (x,y,z,w) space
 		const Y0 = j - t;
 		const Z0 = k - t;
 		const W0 = l - t;
 		const x0 = x - X0; // The x,y,z,w distances from the cell origin
 		const y0 = y - Y0;
 		const z0 = z - Z0;
 		const w0 = w - W0;
 		// For the 4D case, the simplex is a 4D shape I won't even try to describe.
 		// To find out which of the 24 possible simplices we're in, we need to
 		// determine the magnitude ordering of x0, y0, z0 and w0.
 		// The method below is a good way of finding the ordering of x,y,z,w and
 		// then find the correct traversal order for the simplex we’re in.
 		// First, six pair-wise comparisons are performed between each possible pair
 		// of the four coordinates, and the results are used to add up binary bits
 		// for an integer index.
 		const c1 = ( x0 > y0 ) ? 32 : 0;
 		const c2 = ( x0 > z0 ) ? 16 : 0;
 		const c3 = ( y0 > z0 ) ? 8 : 0;
 		const c4 = ( x0 > w0 ) ? 4 : 0;
 		const c5 = ( y0 > w0 ) ? 2 : 0;
 		const c6 = ( z0 > w0 ) ? 1 : 0;
 		const c = c1 + c2 + c3 + c4 + c5 + c6;
 		// simplex[c] is a 4-vector with the numbers 0, 1, 2 and 3 in some order.
 		// Many values of c will never occur, since e.g. x>y>z>w makes x<z, y<w and x<w
 		// impossible. Only the 24 indices which have non-zero entries make any sense.
 		// We use a thresholding to set the coordinates in turn from the largest magnitude.
 		// The number 3 in the "simplex" array is at the position of the largest coordinate.
 		const i1 = simplex[ c ][ 0 ] >= 3 ? 1 : 0;
 		const j1 = simplex[ c ][ 1 ] >= 3 ? 1 : 0;
 		const k1 = simplex[ c ][ 2 ] >= 3 ? 1 : 0;
 		const l1 = simplex[ c ][ 3 ] >= 3 ? 1 : 0;
 		// The number 2 in the "simplex" array is at the second largest coordinate.
 		const i2 = simplex[ c ][ 0 ] >= 2 ? 1 : 0;
 		const j2 = simplex[ c ][ 1 ] >= 2 ? 1 : 0;
 		const k2 = simplex[ c ][ 2 ] >= 2 ? 1 : 0;
 		const l2 = simplex[ c ][ 3 ] >= 2 ? 1 : 0;
 		// The number 1 in the "simplex" array is at the second smallest coordinate.
 		const i3 = simplex[ c ][ 0 ] >= 1 ? 1 : 0;
 		const j3 = simplex[ c ][ 1 ] >= 1 ? 1 : 0;
 		const k3 = simplex[ c ][ 2 ] >= 1 ? 1 : 0;
 		const l3 = simplex[ c ][ 3 ] >= 1 ? 1 : 0;
 		// The fifth corner has all coordinate offsets = 1, so no need to look that up.
 		const x1 = x0 - i1 + G4; // Offsets for second corner in (x,y,z,w) coords
 		const y1 = y0 - j1 + G4;
 		const z1 = z0 - k1 + G4;
 		const w1 = w0 - l1 + G4;
 		const x2 = x0 - i2 + 2.0 * G4; // Offsets for third corner in (x,y,z,w) coords
 		const y2 = y0 - j2 + 2.0 * G4;
 		const z2 = z0 - k2 + 2.0 * G4;
 		const w2 = w0 - l2 + 2.0 * G4;
 		const x3 = x0 - i3 + 3.0 * G4; // Offsets for fourth corner in (x,y,z,w) coords
 		const y3 = y0 - j3 + 3.0 * G4;
 		const z3 = z0 - k3 + 3.0 * G4;
 		const w3 = w0 - l3 + 3.0 * G4;
 		const x4 = x0 - 1.0 + 4.0 * G4; // Offsets for last corner in (x,y,z,w) coords
 		const y4 = y0 - 1.0 + 4.0 * G4;
 		const z4 = z0 - 1.0 + 4.0 * G4;
 		const w4 = w0 - 1.0 + 4.0 * G4;
 		// Work out the hashed gradient indices of the five simplex corners
 		const ii = i & 255;
 		const jj = j & 255;
 		const kk = k & 255;
 		const ll = l & 255;
 		const gi0 = perm[ ii + perm[ jj + perm[ kk + perm[ ll ] ] ] ] % 32;
 		const gi1 = perm[ ii + i1 + perm[ jj + j1 + perm[ kk + k1 + perm[ ll + l1 ] ] ] ] % 32;
 		const gi2 = perm[ ii + i2 + perm[ jj + j2 + perm[ kk + k2 + perm[ ll + l2 ] ] ] ] % 32;
 		const gi3 = perm[ ii + i3 + perm[ jj + j3 + perm[ kk + k3 + perm[ ll + l3 ] ] ] ] % 32;
 		const gi4 = perm[ ii + 1 + perm[ jj + 1 + perm[ kk + 1 + perm[ ll + 1 ] ] ] ] % 32;
 		// Calculate the contribution from the five corners
 		let t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0 - w0 * w0;
 		if ( t0 < 0 ) n0 = 0.0;
 		else {
 			t0 *= t0;
 			n0 = t0 * t0 * this._dot4( grad4[ gi0 ], x0, y0, z0, w0 );
 		}
 		let t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1 - w1 * w1;
 		if ( t1 < 0 ) n1 = 0.0;
 		else {
 			t1 *= t1;
 			n1 = t1 * t1 * this._dot4( grad4[ gi1 ], x1, y1, z1, w1 );
 		}
 		let t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2 - w2 * w2;
 		if ( t2 < 0 ) n2 = 0.0;
 		else {
 			t2 *= t2;
 			n2 = t2 * t2 * this._dot4( grad4[ gi2 ], x2, y2, z2, w2 );
 		}
 		let t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3 - w3 * w3;
 		if ( t3 < 0 ) n3 = 0.0;
 		else {
 			t3 *= t3;
 			n3 = t3 * t3 * this._dot4( grad4[ gi3 ], x3, y3, z3, w3 );
 		}
 		let t4 = 0.6 - x4 * x4 - y4 * y4 - z4 * z4 - w4 * w4;
 		if ( t4 < 0 ) n4 = 0.0;
 		else {
 			t4 *= t4;
 			n4 = t4 * t4 * this._dot4( grad4[ gi4 ], x4, y4, z4, w4 );
 		}
 		// Sum up and scale the result to cover the range [-1,1]
 		return 27.0 * ( n0 + n1 + n2 + n3 + n4 );
 	}
 	// private
 	_dot( g, x, y ) {
 		return g[ 0 ] * x + g[ 1 ] * y;
 	}
 	_dot3( g, x, y, z ) {
 		return g[ 0 ] * x + g[ 1 ] * y + g[ 2 ] * z;
 	}
 	_dot4( g, x, y, z, w ) {
 		return g[ 0 ] * x + g[ 1 ] * y + g[ 2 ] * z + g[ 3 ] * w;
 	}
 }
 export { SimplexNoise };
@@ -0,0 +1,363 @@
 import {
 	Clock,
 	HalfFloatType,
 	NoBlending,
 	Vector2,
 	WebGLRenderTarget
 } from 'three';
 import { CopyShader } from '../shaders/CopyShader.js';
 import { ShaderPass } from './ShaderPass.js';
 import { ClearMaskPass, MaskPass } from './MaskPass.js';
 /**
 * Used to implement post-processing effects in three.js.
 * The class manages a chain of post-processing passes to produce the final visual result.
 * Post-processing passes are executed in order of their addition/insertion.
 * The last pass is automatically rendered to screen.
 *
 * This module can only be used with {@link WebGLRenderer}.
 *
 * ```js
 * const composer = new EffectComposer( renderer );
 *
 * // adding some passes
 * const renderPass = new RenderPass( scene, camera );
 * composer.addPass( renderPass );
 *
 * const glitchPass = new GlitchPass();
 * composer.addPass( glitchPass );
 *
 * const outputPass = new OutputPass()
 * composer.addPass( outputPass );
 *
 * function animate() {
 *
 * 	composer.render(); // instead of renderer.render()
 *
 * }
 * ```
 *
 * @three_import import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 */
 class EffectComposer {
 	/**
 	 * Constructs a new effect composer.
 	 *
 	 * @param {WebGLRenderer} renderer - The renderer.
 	 * @param {WebGLRenderTarget} [renderTarget] - This render target and a clone will
 	 * be used as the internal read and write buffers. If not given, the composer creates
 	 * the buffers automatically.
 	 */
 	constructor( renderer, renderTarget ) {
 		/**
 		 * The renderer.
 		 *
 		 * @type {WebGLRenderer}
 		 */
 		this.renderer = renderer;
 		this._pixelRatio = renderer.getPixelRatio();
 		if ( renderTarget === undefined ) {
 			const size = renderer.getSize( new Vector2() );
 			this._width = size.width;
 			this._height = size.height;
 			renderTarget = new WebGLRenderTarget( this._width * this._pixelRatio, this._height * this._pixelRatio, { type: HalfFloatType } );
 			renderTarget.texture.name = 'EffectComposer.rt1';
 		} else {
 			this._width = renderTarget.width;
 			this._height = renderTarget.height;
 		}
 		this.renderTarget1 = renderTarget;
 		this.renderTarget2 = renderTarget.clone();
 		this.renderTarget2.texture.name = 'EffectComposer.rt2';
 		/**
 		 * A reference to the internal write buffer. Passes usually write
 		 * their result into this buffer.
 		 *
 		 * @type {WebGLRenderTarget}
 		 */
 		this.writeBuffer = this.renderTarget1;
 		/**
 		 * A reference to the internal read buffer. Passes usually read
 		 * the previous render result from this buffer.
 		 *
 		 * @type {WebGLRenderTarget}
 		 */
 		this.readBuffer = this.renderTarget2;
 		/**
 		 * Whether the final pass is rendered to the screen (default framebuffer) or not.
 		 *
 		 * @type {boolean}
 		 * @default true
 		 */
 		this.renderToScreen = true;
 		/**
 		 * An array representing the (ordered) chain of post-processing passes.
 		 *
 		 * @type {Array<Pass>}
 		 */
 		this.passes = [];
 		/**
 		 * A copy pass used for internal swap operations.
 		 *
 		 * @private
 		 * @type {ShaderPass}
 		 */
 		this.copyPass = new ShaderPass( CopyShader );
 		this.copyPass.material.blending = NoBlending;
 		/**
 		 * The internal clock for managing time data.
 		 *
 		 * @private
 		 * @type {Clock}
 		 */
 		this.clock = new Clock();
 	}
 	/**
 	 * Swaps the internal read/write buffers.
 	 */
 	swapBuffers() {
 		const tmp = this.readBuffer;
 		this.readBuffer = this.writeBuffer;
 		this.writeBuffer = tmp;
 	}
 	/**
 	 * Adds the given pass to the pass chain.
 	 *
 	 * @param {Pass} pass - The pass to add.
 	 */
 	addPass( pass ) {
 		this.passes.push( pass );
 		pass.setSize( this._width * this._pixelRatio, this._height * this._pixelRatio );
 	}
 	/**
 	 * Inserts the given pass at a given index.
 	 *
 	 * @param {Pass} pass - The pass to insert.
 	 * @param {number} index - The index into the pass chain.
 	 */
 	insertPass( pass, index ) {
 		this.passes.splice( index, 0, pass );
 		pass.setSize( this._width * this._pixelRatio, this._height * this._pixelRatio );
 	}
 	/**
 	 * Removes the given pass from the pass chain.
 	 *
 	 * @param {Pass} pass - The pass to remove.
 	 */
 	removePass( pass ) {
 		const index = this.passes.indexOf( pass );
 		if ( index !== - 1 ) {
 			this.passes.splice( index, 1 );
 		}
 	}
 	/**
 	 * Returns `true` if the pass for the given index is the last enabled pass in the pass chain.
 	 *
 	 * @param {number} passIndex - The pass index.
 	 * @return {boolean} Whether the pass for the given index is the last pass in the pass chain.
 	 */
 	isLastEnabledPass( passIndex ) {
 		for ( let i = passIndex + 1; i < this.passes.length; i ++ ) {
 			if ( this.passes[ i ].enabled ) {
 				return false;
 			}
 		}
 		return true;
 	}
 	/**
 	 * Executes all enabled post-processing passes in order to produce the final frame.
 	 *
 	 * @param {number} deltaTime - The delta time in seconds. If not given, the composer computes
 	 * its own time delta value.
 	 */
 	render( deltaTime ) {
 		// deltaTime value is in seconds
 		if ( deltaTime === undefined ) {
 			deltaTime = this.clock.getDelta();
 		}
 		const currentRenderTarget = this.renderer.getRenderTarget();
 		let maskActive = false;
 		for ( let i = 0, il = this.passes.length; i < il; i ++ ) {
 			const pass = this.passes[ i ];
 			if ( pass.enabled === false ) continue;
 			pass.renderToScreen = ( this.renderToScreen && this.isLastEnabledPass( i ) );
 			pass.render( this.renderer, this.writeBuffer, this.readBuffer, deltaTime, maskActive );
 			if ( pass.needsSwap ) {
 				if ( maskActive ) {
 					const context = this.renderer.getContext();
 					const stencil = this.renderer.state.buffers.stencil;
 					//context.stencilFunc( context.NOTEQUAL, 1, 0xffffffff );
 					stencil.setFunc( context.NOTEQUAL, 1, 0xffffffff );
 					this.copyPass.render( this.renderer, this.writeBuffer, this.readBuffer, deltaTime );
 					//context.stencilFunc( context.EQUAL, 1, 0xffffffff );
 					stencil.setFunc( context.EQUAL, 1, 0xffffffff );
 				}
 				this.swapBuffers();
 			}
 			if ( MaskPass !== undefined ) {
 				if ( pass instanceof MaskPass ) {
 					maskActive = true;
 				} else if ( pass instanceof ClearMaskPass ) {
 					maskActive = false;
 				}
 			}
 		}
 		this.renderer.setRenderTarget( currentRenderTarget );
 	}
 	/**
 	 * Resets the internal state of the EffectComposer.
 	 *
 	 * @param {WebGLRenderTarget} [renderTarget] - This render target has the same purpose like
 	 * the one from the constructor. If set, it is used to setup the read and write buffers.
 	 */
 	reset( renderTarget ) {
 		if ( renderTarget === undefined ) {
 			const size = this.renderer.getSize( new Vector2() );
 			this._pixelRatio = this.renderer.getPixelRatio();
 			this._width = size.width;
 			this._height = size.height;
 			renderTarget = this.renderTarget1.clone();
 			renderTarget.setSize( this._width * this._pixelRatio, this._height * this._pixelRatio );
 		}
 		this.renderTarget1.dispose();
 		this.renderTarget2.dispose();
 		this.renderTarget1 = renderTarget;
 		this.renderTarget2 = renderTarget.clone();
 		this.writeBuffer = this.renderTarget1;
 		this.readBuffer = this.renderTarget2;
 	}
 	/**
 	 * Resizes the internal read and write buffers as well as all passes. Similar to {@link WebGLRenderer#setSize},
 	 * this method honors the current pixel ration.
 	 *
 	 * @param {number} width - The width in logical pixels.
 	 * @param {number} height - The height in logical pixels.
 	 */
 	setSize( width, height ) {
 		this._width = width;
 		this._height = height;
 		const effectiveWidth = this._width * this._pixelRatio;
 		const effectiveHeight = this._height * this._pixelRatio;
 		this.renderTarget1.setSize( effectiveWidth, effectiveHeight );
 		this.renderTarget2.setSize( effectiveWidth, effectiveHeight );
 		for ( let i = 0; i < this.passes.length; i ++ ) {
 			this.passes[ i ].setSize( effectiveWidth, effectiveHeight );
 		}
 	}
 	/**
 	 * Sets device pixel ratio. This is usually used for HiDPI device to prevent blurring output.
 	 * Setting the pixel ratio will automatically resize the composer.
 	 *
 	 * @param {number} pixelRatio - The pixel ratio to set.
 	 */
 	setPixelRatio( pixelRatio ) {
 		this._pixelRatio = pixelRatio;
 		this.setSize( this._width, this._height );
 	}
 	/**
 	 * Frees the GPU-related resources allocated by this instance. Call this
 	 * method whenever the composer is no longer used in your app.
 	 */
 	dispose() {
 		this.renderTarget1.dispose();
 		this.renderTarget2.dispose();
 		this.copyPass.dispose();
 	}
 }
 export { EffectComposer };
@@ -0,0 +1,195 @@
 import { Pass } from './Pass.js';
 /**
 * This pass can be used to define a mask during post processing.
 * Meaning only areas of subsequent post processing are affected
 * which lie in the masking area of this pass. Internally, the masking
 * is implemented with the stencil buffer.
 *
 * ```js
 * const maskPass = new MaskPass( scene, camera );
 * composer.addPass( maskPass );
 * ```
 *
 * @augments Pass
 * @three_import import { MaskPass } from 'three/addons/postprocessing/MaskPass.js';
 */
 class MaskPass extends Pass {
 	/**
 	 * Constructs a new mask pass.
 	 *
 	 * @param {Scene} scene - The 3D objects in this scene will define the mask.
 	 * @param {Camera} camera - The camera.
 	 */
 	constructor( scene, camera ) {
 		super();
 		/**
 		 * The scene that defines the mask.
 		 *
 		 * @type {Scene}
 		 */
 		this.scene = scene;
 		/**
 		 * The camera.
 		 *
 		 * @type {Camera}
 		 */
 		this.camera = camera;
 		/**
 		 * Overwritten to perform a clear operation by default.
 		 *
 		 * @type {boolean}
 		 * @default true
 		 */
 		this.clear = true;
 		/**
 		 * Overwritten to disable the swap.
 		 *
 		 * @type {boolean}
 		 * @default false
 		 */
 		this.needsSwap = false;
 		/**
 		 * Whether to inverse the mask or not.
 		 *
 		 * @type {boolean}
 		 * @default false
 		 */
 		this.inverse = false;
 	}
 	/**
 	 * Performs a mask pass with the configured scene and camera.
 	 *
 	 * @param {WebGLRenderer} renderer - The renderer.
 	 * @param {WebGLRenderTarget} writeBuffer - The write buffer. This buffer is intended as the rendering
 	 * destination for the pass.
 	 * @param {WebGLRenderTarget} readBuffer - The read buffer. The pass can access the result from the
 	 * previous pass from this buffer.
 	 * @param {number} deltaTime - The delta time in seconds.
 	 * @param {boolean} maskActive - Whether masking is active or not.
 	 */
 	render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
 		const context = renderer.getContext();
 		const state = renderer.state;
 		// don't update color or depth
 		state.buffers.color.setMask( false );
 		state.buffers.depth.setMask( false );
 		// lock buffers
 		state.buffers.color.setLocked( true );
 		state.buffers.depth.setLocked( true );
 		// set up stencil
 		let writeValue, clearValue;
 		if ( this.inverse ) {
 			writeValue = 0;
 			clearValue = 1;
 		} else {
 			writeValue = 1;
 			clearValue = 0;
 		}
 		state.buffers.stencil.setTest( true );
 		state.buffers.stencil.setOp( context.REPLACE, context.REPLACE, context.REPLACE );
 		state.buffers.stencil.setFunc( context.ALWAYS, writeValue, 0xffffffff );
 		state.buffers.stencil.setClear( clearValue );
 		state.buffers.stencil.setLocked( true );
 		// draw into the stencil buffer
 		renderer.setRenderTarget( readBuffer );
 		if ( this.clear ) renderer.clear();
 		renderer.render( this.scene, this.camera );
 		renderer.setRenderTarget( writeBuffer );
 		if ( this.clear ) renderer.clear();
 		renderer.render( this.scene, this.camera );
 		// unlock color and depth buffer and make them writable for subsequent rendering/clearing
 		state.buffers.color.setLocked( false );
 		state.buffers.depth.setLocked( false );
 		state.buffers.color.setMask( true );
 		state.buffers.depth.setMask( true );
 		// only render where stencil is set to 1
 		state.buffers.stencil.setLocked( false );
 		state.buffers.stencil.setFunc( context.EQUAL, 1, 0xffffffff ); // draw if == 1
 		state.buffers.stencil.setOp( context.KEEP, context.KEEP, context.KEEP );
 		state.buffers.stencil.setLocked( true );
 	}
 }
 /**
 * This pass can be used to clear a mask previously defined with {@link MaskPass}.
 *
 * ```js
 * const clearPass = new ClearMaskPass();
 * composer.addPass( clearPass );
 * ```
 *
 * @augments Pass
 */
 class ClearMaskPass extends Pass {
 	/**
 	 * Constructs a new clear mask pass.
 	 */
 	constructor() {
 		super();
 		/**
 		 * Overwritten to disable the swap.
 		 *
 		 * @type {boolean}
 		 * @default false
 		 */
 		this.needsSwap = false;
 	}
 	/**
 	 * Performs the clear of the currently defined mask.
 	 *
 	 * @param {WebGLRenderer} renderer - The renderer.
 	 * @param {WebGLRenderTarget} writeBuffer - The write buffer. This buffer is intended as the rendering
 	 * destination for the pass.
 	 * @param {WebGLRenderTarget} readBuffer - The read buffer. The pass can access the result from the
 	 * previous pass from this buffer.
 	 * @param {number} deltaTime - The delta time in seconds.
 	 * @param {boolean} maskActive - Whether masking is active or not.
 	 */
 	render( renderer /*, writeBuffer, readBuffer, deltaTime, maskActive */ ) {
 		renderer.state.buffers.stencil.setLocked( false );
 		renderer.state.buffers.stencil.setTest( false );
 	}
 }
 export { MaskPass, ClearMaskPass };
@@ -0,0 +1,139 @@
 import {
 	ColorManagement,
 	RawShaderMaterial,
 	UniformsUtils,
 	LinearToneMapping,
 	ReinhardToneMapping,
 	CineonToneMapping,
 	AgXToneMapping,
 	ACESFilmicToneMapping,
 	NeutralToneMapping,
 	CustomToneMapping,
 	SRGBTransfer
 } from 'three';
 import { Pass, FullScreenQuad } from './Pass.js';
 import { OutputShader } from '../shaders/OutputShader.js';
 /**
 * This pass is responsible for including tone mapping and color space conversion
 * into your pass chain. In most cases, this pass should be included at the end
 * of each pass chain. If a pass requires sRGB input (e.g. like FXAA), the pass
 * must follow `OutputPass` in the pass chain.
 *
 * The tone mapping and color space settings are extracted from the renderer.
 *
 * ```js
 * const outputPass = new OutputPass();
 * composer.addPass( outputPass );
 * ```
 *
 * @augments Pass
 * @three_import import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 */
 class OutputPass extends Pass {
 	/**
 	 * Constructs a new output pass.
 	 */
 	constructor() {
 		super();
 		/**
 		 * The pass uniforms.
 		 *
 		 * @type {Object}
 		 */
 		this.uniforms = UniformsUtils.clone( OutputShader.uniforms );
 		/**
 		 * The pass material.
 		 *
 		 * @type {RawShaderMaterial}
 		 */
 		this.material = new RawShaderMaterial( {
 			name: OutputShader.name,
 			uniforms: this.uniforms,
 			vertexShader: OutputShader.vertexShader,
 			fragmentShader: OutputShader.fragmentShader
 		} );
 		// internals
 		this._fsQuad = new FullScreenQuad( this.material );
 		this._outputColorSpace = null;
 		this._toneMapping = null;
 	}
 	/**
 	 * Performs the output pass.
 	 *
 	 * @param {WebGLRenderer} renderer - The renderer.
 	 * @param {WebGLRenderTarget} writeBuffer - The write buffer. This buffer is intended as the rendering
 	 * destination for the pass.
 	 * @param {WebGLRenderTarget} readBuffer - The read buffer. The pass can access the result from the
 	 * previous pass from this buffer.
 	 * @param {number} deltaTime - The delta time in seconds.
 	 * @param {boolean} maskActive - Whether masking is active or not.
 	 */
 	render( renderer, writeBuffer, readBuffer/*, deltaTime, maskActive */ ) {
 		this.uniforms[ 'tDiffuse' ].value = readBuffer.texture;
 		this.uniforms[ 'toneMappingExposure' ].value = renderer.toneMappingExposure;
 		// rebuild defines if required
 		if ( this._outputColorSpace !== renderer.outputColorSpace || this._toneMapping !== renderer.toneMapping ) {
 			this._outputColorSpace = renderer.outputColorSpace;
 			this._toneMapping = renderer.toneMapping;
 			this.material.defines = {};
 			if ( ColorManagement.getTransfer( this._outputColorSpace ) === SRGBTransfer ) this.material.defines.SRGB_TRANSFER = '';
 			if ( this._toneMapping === LinearToneMapping ) this.material.defines.LINEAR_TONE_MAPPING = '';
 			else if ( this._toneMapping === ReinhardToneMapping ) this.material.defines.REINHARD_TONE_MAPPING = '';
 			else if ( this._toneMapping === CineonToneMapping ) this.material.defines.CINEON_TONE_MAPPING = '';
 			else if ( this._toneMapping === ACESFilmicToneMapping ) this.material.defines.ACES_FILMIC_TONE_MAPPING = '';
 			else if ( this._toneMapping === AgXToneMapping ) this.material.defines.AGX_TONE_MAPPING = '';
 			else if ( this._toneMapping === NeutralToneMapping ) this.material.defines.NEUTRAL_TONE_MAPPING = '';
 			else if ( this._toneMapping === CustomToneMapping ) this.material.defines.CUSTOM_TONE_MAPPING = '';
 			this.material.needsUpdate = true;
 		}
 		//
 		if ( this.renderToScreen === true ) {
 			renderer.setRenderTarget( null );
 			this._fsQuad.render( renderer );
 		} else {
 			renderer.setRenderTarget( writeBuffer );
 			if ( this.clear ) renderer.clear( renderer.autoClearColor, renderer.autoClearDepth, renderer.autoClearStencil );
 			this._fsQuad.render( renderer );
 		}
 	}
 	/**
 	 * Frees the GPU-related resources allocated by this instance. Call this
 	 * method whenever the pass is no longer used in your app.
 	 */
 	dispose() {
 		this.material.dispose();
 		this._fsQuad.dispose();
 	}
 }
 export { OutputPass };
@@ -0,0 +1,191 @@
 import {
 	BufferGeometry,
 	Float32BufferAttribute,
 	OrthographicCamera,
 	Mesh
 } from 'three';
 /**
 * Abstract base class for all post processing passes.
 *
 * This module is only relevant for post processing with {@link WebGLRenderer}.
 *
 * @abstract
 * @three_import import { Pass } from 'three/addons/postprocessing/Pass.js';
 */
 class Pass {
 	/**
 	 * Constructs a new pass.
 	 */
 	constructor() {
 		/**
 		 * This flag can be used for type testing.
 		 *
 		 * @type {boolean}
 		 * @readonly
 		 * @default true
 		 */
 		this.isPass = true;
 		/**
 		 * If set to `true`, the pass is processed by the composer.
 		 *
 		 * @type {boolean}
 		 * @default true
 		 */
 		this.enabled = true;
 		/**
 		 * If set to `true`, the pass indicates to swap read and write buffer after rendering.
 		 *
 		 * @type {boolean}
 		 * @default true
 		 */
 		this.needsSwap = true;
 		/**
 		 * If set to `true`, the pass clears its buffer before rendering
 		 *
 		 * @type {boolean}
 		 * @default false
 		 */
 		this.clear = false;
 		/**
 		 * If set to `true`, the result of the pass is rendered to screen. The last pass in the composers
 		 * pass chain gets automatically rendered to screen, no matter how this property is configured.
 		 *
 		 * @type {boolean}
 		 * @default false
 		 */
 		this.renderToScreen = false;
 	}
 	/**
 	 * Sets the size of the pass.
 	 *
 	 * @abstract
 	 * @param {number} width - The width to set.
 	 * @param {number} height - The height to set.
 	 */
 	setSize( /* width, height */ ) {}
 	/**
 	 * This method holds the render logic of a pass. It must be implemented in all derived classes.
 	 *
 	 * @abstract
 	 * @param {WebGLRenderer} renderer - The renderer.
 	 * @param {WebGLRenderTarget} writeBuffer - The write buffer. This buffer is intended as the rendering
 	 * destination for the pass.
 	 * @param {WebGLRenderTarget} readBuffer - The read buffer. The pass can access the result from the
 	 * previous pass from this buffer.
 	 * @param {number} deltaTime - The delta time in seconds.
 	 * @param {boolean} maskActive - Whether masking is active or not.
 	 */
 	render( /* renderer, writeBuffer, readBuffer, deltaTime, maskActive */ ) {
 		console.error( 'THREE.Pass: .render() must be implemented in derived pass.' );
 	}
 	/**
 	 * Frees the GPU-related resources allocated by this instance. Call this
 	 * method whenever the pass is no longer used in your app.
 	 *
 	 * @abstract
 	 */
 	dispose() {}
 }
 // Helper for passes that need to fill the viewport with a single quad.
 const _camera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
 // https://github.com/mrdoob/three.js/pull/21358
 class FullscreenTriangleGeometry extends BufferGeometry {
 	constructor() {
 		super();
 		this.setAttribute( 'position', new Float32BufferAttribute( [ - 1, 3, 0, - 1, - 1, 0, 3, - 1, 0 ], 3 ) );
 		this.setAttribute( 'uv', new Float32BufferAttribute( [ 0, 2, 0, 0, 2, 0 ], 2 ) );
 	}
 }
 const _geometry = new FullscreenTriangleGeometry();
 /**
 * This module is a helper for passes which need to render a full
 * screen effect which is quite common in context of post processing.
 *
 * The intended usage is to reuse a single full screen quad for rendering
 * subsequent passes by just reassigning the `material` reference.
 *
 * This module can only be used with {@link WebGLRenderer}.
 *
 * @augments Mesh
 * @three_import import { FullScreenQuad } from 'three/addons/postprocessing/Pass.js';
 */
 class FullScreenQuad {
 	/**
 	 * Constructs a new full screen quad.
 	 *
 	 * @param {?Material} material - The material to render te full screen quad with.
 	 */
 	constructor( material ) {
 		this._mesh = new Mesh( _geometry, material );
 	}
 	/**
 	 * Frees the GPU-related resources allocated by this instance. Call this
 	 * method whenever the instance is no longer used in your app.
 	 */
 	dispose() {
 		this._mesh.geometry.dispose();
 	}
 	/**
 	 * Renders the full screen quad.
 	 *
 	 * @param {WebGLRenderer} renderer - The renderer.
 	 */
 	render( renderer ) {
 		renderer.render( this._mesh, _camera );
 	}
 	/**
 	 * The quad's material.
 	 *
 	 * @type {?Material}
 	 */
 	get material() {
 		return this._mesh.material;
 	}
 	set material( value ) {
 		this._mesh.material = value;
 	}
 }
 export { Pass, FullScreenQuad };
@@ -0,0 +1,183 @@
 import {
 	Color
 } from 'three';
 import { Pass } from './Pass.js';
 /**
 * This class represents a render pass. It takes a camera and a scene and produces
 * a beauty pass for subsequent post processing effects.
 *
 * ```js
 * const renderPass = new RenderPass( scene, camera );
 * composer.addPass( renderPass );
 * ```
 *
 * @augments Pass
 * @three_import import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 */
 class RenderPass extends Pass {
 	/**
 	 * Constructs a new render pass.
 	 *
 	 * @param {Scene} scene - The scene to render.
 	 * @param {Camera} camera - The camera.
 	 * @param {?Material} [overrideMaterial=null] - The override material. If set, this material is used
 	 * for all objects in the scene.
 	 * @param {?(number|Color|string)} [clearColor=null] - The clear color of the render pass.
 	 * @param {?number} [clearAlpha=null] - The clear alpha of the render pass.
 	 */
 	constructor( scene, camera, overrideMaterial = null, clearColor = null, clearAlpha = null ) {
 		super();
 		/**
 		 * The scene to render.
 		 *
 		 * @type {Scene}
 		 */
 		this.scene = scene;
 		/**
 		 * The camera.
 		 *
 		 * @type {Camera}
 		 */
 		this.camera = camera;
 		/**
 		 * The override material. If set, this material is used
 		 * for all objects in the scene.
 		 *
 		 * @type {?Material}
 		 * @default null
 		 */
 		this.overrideMaterial = overrideMaterial;
 		/**
 		 * The clear color of the render pass.
 		 *
 		 * @type {?(number|Color|string)}
 		 * @default null
 		 */
 		this.clearColor = clearColor;
 		/**
 		 * The clear alpha of the render pass.
 		 *
 		 * @type {?number}
 		 * @default null
 		 */
 		this.clearAlpha = clearAlpha;
 		/**
 		 * Overwritten to perform a clear operation by default.
 		 *
 		 * @type {boolean}
 		 * @default true
 		 */
 		this.clear = true;
 		/**
 		 * If set to `true`, only the depth can be cleared when `clear` is to `false`.
 		 *
 		 * @type {boolean}
 		 * @default false
 		 */
 		this.clearDepth = false;
 		/**
 		 * Overwritten to disable the swap.
 		 *
 		 * @type {boolean}
 		 * @default false
 		 */
 		this.needsSwap = false;
 		this._oldClearColor = new Color();
 	}
 	/**
 	 * Performs a beauty pass with the configured scene and camera.
 	 *
 	 * @param {WebGLRenderer} renderer - The renderer.
 	 * @param {WebGLRenderTarget} writeBuffer - The write buffer. This buffer is intended as the rendering
 	 * destination for the pass.
 	 * @param {WebGLRenderTarget} readBuffer - The read buffer. The pass can access the result from the
 	 * previous pass from this buffer.
 	 * @param {number} deltaTime - The delta time in seconds.
 	 * @param {boolean} maskActive - Whether masking is active or not.
 	 */
 	render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
 		const oldAutoClear = renderer.autoClear;
 		renderer.autoClear = false;
 		let oldClearAlpha, oldOverrideMaterial;
 		if ( this.overrideMaterial !== null ) {
 			oldOverrideMaterial = this.scene.overrideMaterial;
 			this.scene.overrideMaterial = this.overrideMaterial;
 		}
 		if ( this.clearColor !== null ) {
 			renderer.getClearColor( this._oldClearColor );
 			renderer.setClearColor( this.clearColor, renderer.getClearAlpha() );
 		}
 		if ( this.clearAlpha !== null ) {
 			oldClearAlpha = renderer.getClearAlpha();
 			renderer.setClearAlpha( this.clearAlpha );
 		}
 		if ( this.clearDepth == true ) {
 			renderer.clearDepth();
 		}
 		renderer.setRenderTarget( this.renderToScreen ? null : readBuffer );
 		if ( this.clear === true ) {
 			// TODO: Avoid using autoClear properties, see https://github.com/mrdoob/three.js/pull/15571#issuecomment-465669600
 			renderer.clear( renderer.autoClearColor, renderer.autoClearDepth, renderer.autoClearStencil );
 		}
 		renderer.render( this.scene, this.camera );
 		// restore
 		if ( this.clearColor !== null ) {
 			renderer.setClearColor( this._oldClearColor );
 		}
 		if ( this.clearAlpha !== null ) {
 			renderer.setClearAlpha( oldClearAlpha );
 		}
 		if ( this.overrideMaterial !== null ) {
 			this.scene.overrideMaterial = oldOverrideMaterial;
 		}
 		renderer.autoClear = oldAutoClear;
 	}
 }
 export { RenderPass };
@@ -0,0 +1,527 @@
 import {
 	AddEquation,
 	Color,
 	CustomBlending,
 	DataTexture,
 	DepthTexture,
 	DstAlphaFactor,
 	DstColorFactor,
 	FloatType,
 	HalfFloatType,
 	MathUtils,
 	MeshNormalMaterial,
 	NearestFilter,
 	NoBlending,
 	RedFormat,
 	DepthStencilFormat,
 	UnsignedInt248Type,
 	RepeatWrapping,
 	ShaderMaterial,
 	UniformsUtils,
 	Vector3,
 	WebGLRenderTarget,
 	ZeroFactor
 } from 'three';
 import { Pass, FullScreenQuad } from './Pass.js';
 import { SimplexNoise } from '../math/SimplexNoise.js';
 import { SSAOBlurShader, SSAODepthShader, SSAOShader } from '../shaders/SSAOShader.js';
 import { CopyShader } from '../shaders/CopyShader.js';
 /**
 * A pass for a basic SSAO effect.
 *
 * {@link SAOPass} and {@link GTAPass} produce a more advanced AO but are also
 * more expensive.
 *
 * ```js
 * const ssaoPass = new SSAOPass( scene, camera, width, height );
 * composer.addPass( ssaoPass );
 * ```
 *
 * @augments Pass
 * @three_import import { SSAOPass } from 'three/addons/postprocessing/SSAOPass.js';
 */
 class SSAOPass extends Pass {
 	/**
 	 * Constructs a new SSAO pass.
 	 *
 	 * @param {Scene} scene - The scene to compute the AO for.
 	 * @param {Camera} camera - The camera.
 	 * @param {number} [width=512] - The width of the effect.
 	 * @param {number} [height=512] - The height of the effect.
 	 * @param {number} [kernelSize=32] - The kernel size.
 	 */
 	constructor( scene, camera, width = 512, height = 512, kernelSize = 32 ) {
 		super();
 		/**
 		 * The width of the effect.
 		 *
 		 * @type {number}
 		 * @default 512
 		 */
 		this.width = width;
 		/**
 		 * The height of the effect.
 		 *
 		 * @type {number}
 		 * @default 512
 		 */
 		this.height = height;
 		/**
 		 * Overwritten to perform a clear operation by default.
 		 *
 		 * @type {boolean}
 		 * @default true
 		 */
 		this.clear = true;
 		/**
 		 * Overwritten to disable the swap.
 		 *
 		 * @type {boolean}
 		 * @default false
 		 */
 		this.needsSwap = false;
 		/**
 		 * The camera.
 		 *
 		 * @type {Camera}
 		 */
 		this.camera = camera;
 		/**
 		 * The scene to render the AO for.
 		 *
 		 * @type {Scene}
 		 */
 		this.scene = scene;
 		/**
 		 * The kernel radius controls how wide the
 		 * AO spreads.
 		 *
 		 * @type {number}
 		 * @default 8
 		 */
 		this.kernelRadius = 8;
 		this.kernel = [];
 		this.noiseTexture = null;
 		/**
 		 * The output configuration.
 		 *
 		 * @type {number}
 		 * @default 0
 		 */
 		this.output = 0;
 		/**
 		 * Defines the minimum distance that should be
 		 * affected by the AO.
 		 *
 		 * @type {number}
 		 * @default 0.005
 		 */
 		this.minDistance = 0.005;
 		/**
 		 * Defines the maximum distance that should be
 		 * affected by the AO.
 		 *
 		 * @type {number}
 		 * @default 0.1
 		 */
 		this.maxDistance = 0.1;
 		this._visibilityCache = [];
 		//
 		this._generateSampleKernel( kernelSize );
 		this._generateRandomKernelRotations();
 		// depth texture
 		const depthTexture = new DepthTexture();
 		depthTexture.format = DepthStencilFormat;
 		depthTexture.type = UnsignedInt248Type;
 		// normal render target with depth buffer
 		this.normalRenderTarget = new WebGLRenderTarget( this.width, this.height, {
 			minFilter: NearestFilter,
 			magFilter: NearestFilter,
 			type: HalfFloatType,
 			depthTexture: depthTexture
 		} );
 		// ssao render target
 		this.ssaoRenderTarget = new WebGLRenderTarget( this.width, this.height, { type: HalfFloatType } );
 		this.blurRenderTarget = this.ssaoRenderTarget.clone();
 		// ssao material
 		this.ssaoMaterial = new ShaderMaterial( {
 			defines: Object.assign( {}, SSAOShader.defines ),
 			uniforms: UniformsUtils.clone( SSAOShader.uniforms ),
 			vertexShader: SSAOShader.vertexShader,
 			fragmentShader: SSAOShader.fragmentShader,
 			blending: NoBlending
 		} );
 		this.ssaoMaterial.defines[ 'KERNEL_SIZE' ] = kernelSize;
 		this.ssaoMaterial.uniforms[ 'tNormal' ].value = this.normalRenderTarget.texture;
 		this.ssaoMaterial.uniforms[ 'tDepth' ].value = this.normalRenderTarget.depthTexture;
 		this.ssaoMaterial.uniforms[ 'tNoise' ].value = this.noiseTexture;
 		this.ssaoMaterial.uniforms[ 'kernel' ].value = this.kernel;
 		this.ssaoMaterial.uniforms[ 'cameraNear' ].value = this.camera.near;
 		this.ssaoMaterial.uniforms[ 'cameraFar' ].value = this.camera.far;
 		this.ssaoMaterial.uniforms[ 'resolution' ].value.set( this.width, this.height );
 		this.ssaoMaterial.uniforms[ 'cameraProjectionMatrix' ].value.copy( this.camera.projectionMatrix );
 		this.ssaoMaterial.uniforms[ 'cameraInverseProjectionMatrix' ].value.copy( this.camera.projectionMatrixInverse );
 		// normal material
 		this.normalMaterial = new MeshNormalMaterial();
 		this.normalMaterial.blending = NoBlending;
 		// blur material
 		this.blurMaterial = new ShaderMaterial( {
 			defines: Object.assign( {}, SSAOBlurShader.defines ),
 			uniforms: UniformsUtils.clone( SSAOBlurShader.uniforms ),
 			vertexShader: SSAOBlurShader.vertexShader,
 			fragmentShader: SSAOBlurShader.fragmentShader
 		} );
 		this.blurMaterial.uniforms[ 'tDiffuse' ].value = this.ssaoRenderTarget.texture;
 		this.blurMaterial.uniforms[ 'resolution' ].value.set( this.width, this.height );
 		// material for rendering the depth
 		this.depthRenderMaterial = new ShaderMaterial( {
 			defines: Object.assign( {}, SSAODepthShader.defines ),
 			uniforms: UniformsUtils.clone( SSAODepthShader.uniforms ),
 			vertexShader: SSAODepthShader.vertexShader,
 			fragmentShader: SSAODepthShader.fragmentShader,
 			blending: NoBlending
 		} );
 		this.depthRenderMaterial.uniforms[ 'tDepth' ].value = this.normalRenderTarget.depthTexture;
 		this.depthRenderMaterial.uniforms[ 'cameraNear' ].value = this.camera.near;
 		this.depthRenderMaterial.uniforms[ 'cameraFar' ].value = this.camera.far;
 		// material for rendering the content of a render target
 		this.copyMaterial = new ShaderMaterial( {
 			uniforms: UniformsUtils.clone( CopyShader.uniforms ),
 			vertexShader: CopyShader.vertexShader,
 			fragmentShader: CopyShader.fragmentShader,
 			transparent: true,
 			depthTest: false,
 			depthWrite: false,
 			blendSrc: DstColorFactor,
 			blendDst: ZeroFactor,
 			blendEquation: AddEquation,
 			blendSrcAlpha: DstAlphaFactor,
 			blendDstAlpha: ZeroFactor,
 			blendEquationAlpha: AddEquation
 		} );
 		// internals
 		this._fsQuad = new FullScreenQuad( null );
 		this._originalClearColor = new Color();
 	}
 	/**
 	 * Frees the GPU-related resources allocated by this instance. Call this
 	 * method whenever the pass is no longer used in your app.
 	 */
 	dispose() {
 		// dispose render targets
 		this.normalRenderTarget.dispose();
 		this.ssaoRenderTarget.dispose();
 		this.blurRenderTarget.dispose();
 		// dispose materials
 		this.normalMaterial.dispose();
 		this.blurMaterial.dispose();
 		this.copyMaterial.dispose();
 		this.depthRenderMaterial.dispose();
 		// dispose full screen quad
 		this._fsQuad.dispose();
 	}
 	/**
 	 * Performs the SSAO pass.
 	 *
 	 * @param {WebGLRenderer} renderer - The renderer.
 	 * @param {WebGLRenderTarget} writeBuffer - The write buffer. This buffer is intended as the rendering
 	 * destination for the pass.
 	 * @param {WebGLRenderTarget} readBuffer - The read buffer. The pass can access the result from the
 	 * previous pass from this buffer.
 	 * @param {number} deltaTime - The delta time in seconds.
 	 * @param {boolean} maskActive - Whether masking is active or not.
 	 */
 	render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
 		// render normals and depth (honor only meshes, points and lines do not contribute to SSAO)
 		this._overrideVisibility();
 		this._renderOverride( renderer, this.normalMaterial, this.normalRenderTarget, 0x7777ff, 1.0 );
 		this._restoreVisibility();
 		// render SSAO
 		this.ssaoMaterial.uniforms[ 'kernelRadius' ].value = this.kernelRadius;
 		this.ssaoMaterial.uniforms[ 'minDistance' ].value = this.minDistance;
 		this.ssaoMaterial.uniforms[ 'maxDistance' ].value = this.maxDistance;
 		this._renderPass( renderer, this.ssaoMaterial, this.ssaoRenderTarget );
 		// render blur
 		this._renderPass( renderer, this.blurMaterial, this.blurRenderTarget );
 		// output result to screen
 		switch ( this.output ) {
 			case SSAOPass.OUTPUT.SSAO:
 				this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.ssaoRenderTarget.texture;
 				this.copyMaterial.blending = NoBlending;
 				this._renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : readBuffer );
 				break;
 			case SSAOPass.OUTPUT.Blur:
 				this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.blurRenderTarget.texture;
 				this.copyMaterial.blending = NoBlending;
 				this._renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : readBuffer );
 				break;
 			case SSAOPass.OUTPUT.Depth:
 				this._renderPass( renderer, this.depthRenderMaterial, this.renderToScreen ? null : readBuffer );
 				break;
 			case SSAOPass.OUTPUT.Normal:
 				this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.normalRenderTarget.texture;
 				this.copyMaterial.blending = NoBlending;
 				this._renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : readBuffer );
 				break;
 			case SSAOPass.OUTPUT.Default:
 				this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.blurRenderTarget.texture;
 				this.copyMaterial.blending = CustomBlending;
 				this._renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : readBuffer );
 				break;
 			default:
 				console.warn( 'THREE.SSAOPass: Unknown output type.' );
 		}
 	}
 	/**
 	 * Sets the size of the pass.
 	 *
 	 * @param {number} width - The width to set.
 	 * @param {number} height - The height to set.
 	 */
 	setSize( width, height ) {
 		this.width = width;
 		this.height = height;
 		this.ssaoRenderTarget.setSize( width, height );
 		this.normalRenderTarget.setSize( width, height );
 		this.blurRenderTarget.setSize( width, height );
 		this.ssaoMaterial.uniforms[ 'resolution' ].value.set( width, height );
 		this.ssaoMaterial.uniforms[ 'cameraProjectionMatrix' ].value.copy( this.camera.projectionMatrix );
 		this.ssaoMaterial.uniforms[ 'cameraInverseProjectionMatrix' ].value.copy( this.camera.projectionMatrixInverse );
 		this.blurMaterial.uniforms[ 'resolution' ].value.set( width, height );
 	}
 	// internals
 	_renderPass( renderer, passMaterial, renderTarget, clearColor, clearAlpha ) {
 		// save original state
 		renderer.getClearColor( this._originalClearColor );
 		const originalClearAlpha = renderer.getClearAlpha();
 		const originalAutoClear = renderer.autoClear;
 		renderer.setRenderTarget( renderTarget );
 		// setup pass state
 		renderer.autoClear = false;
 		if ( ( clearColor !== undefined ) && ( clearColor !== null ) ) {
 			renderer.setClearColor( clearColor );
 			renderer.setClearAlpha( clearAlpha || 0.0 );
 			renderer.clear();
 		}
 		this._fsQuad.material = passMaterial;
 		this._fsQuad.render( renderer );
 		// restore original state
 		renderer.autoClear = originalAutoClear;
 		renderer.setClearColor( this._originalClearColor );
 		renderer.setClearAlpha( originalClearAlpha );
 	}
 	_renderOverride( renderer, overrideMaterial, renderTarget, clearColor, clearAlpha ) {
 		renderer.getClearColor( this._originalClearColor );
 		const originalClearAlpha = renderer.getClearAlpha();
 		const originalAutoClear = renderer.autoClear;
 		renderer.setRenderTarget( renderTarget );
 		renderer.autoClear = false;
 		clearColor = overrideMaterial.clearColor || clearColor;
 		clearAlpha = overrideMaterial.clearAlpha || clearAlpha;
 		if ( ( clearColor !== undefined ) && ( clearColor !== null ) ) {
 			renderer.setClearColor( clearColor );
 			renderer.setClearAlpha( clearAlpha || 0.0 );
 			renderer.clear();
 		}
 		this.scene.overrideMaterial = overrideMaterial;
 		renderer.render( this.scene, this.camera );
 		this.scene.overrideMaterial = null;
 		// restore original state
 		renderer.autoClear = originalAutoClear;
 		renderer.setClearColor( this._originalClearColor );
 		renderer.setClearAlpha( originalClearAlpha );
 	}
 	_generateSampleKernel( kernelSize ) {
 		const kernel = this.kernel;
 		for ( let i = 0; i < kernelSize; i ++ ) {
 			const sample = new Vector3();
 			sample.x = ( Math.random() * 2 ) - 1;
 			sample.y = ( Math.random() * 2 ) - 1;
 			sample.z = Math.random();
 			sample.normalize();
 			let scale = i / kernelSize;
 			scale = MathUtils.lerp( 0.1, 1, scale * scale );
 			sample.multiplyScalar( scale );
 			kernel.push( sample );
 		}
 	}
 	_generateRandomKernelRotations() {
 		const width = 4, height = 4;
 		const simplex = new SimplexNoise();
 		const size = width * height;
 		const data = new Float32Array( size );
 		for ( let i = 0; i < size; i ++ ) {
 			const x = ( Math.random() * 2 ) - 1;
 			const y = ( Math.random() * 2 ) - 1;
 			const z = 0;
 			data[ i ] = simplex.noise3d( x, y, z );
 		}
 		this.noiseTexture = new DataTexture( data, width, height, RedFormat, FloatType );
 		this.noiseTexture.wrapS = RepeatWrapping;
 		this.noiseTexture.wrapT = RepeatWrapping;
 		this.noiseTexture.needsUpdate = true;
 	}
 	_overrideVisibility() {
 		const scene = this.scene;
 		const cache = this._visibilityCache;
 		scene.traverse( function ( object ) {
 			if ( ( object.isPoints || object.isLine || object.isLine2 ) && object.visible ) {
 				object.visible = false;
 				cache.push( object );
 			}
 		} );
 	}
 	_restoreVisibility() {
 		const cache = this._visibilityCache;
 		for ( let i = 0; i < cache.length; i ++ ) {
 			cache[ i ].visible = true;
 		}
 		cache.length = 0;
 	}
 }
 SSAOPass.OUTPUT = {
 	'Default': 0,
 	'SSAO': 1,
 	'Blur': 2,
 	'Depth': 3,
 	'Normal': 4
 };
 export { SSAOPass };
@@ -0,0 +1,135 @@
 import {
 	ShaderMaterial,
 	UniformsUtils
 } from 'three';
 import { Pass, FullScreenQuad } from './Pass.js';
 /**
 * This pass can be used to create a post processing effect
 * with a raw GLSL shader object. Useful for implementing custom
 * effects.
 *
 * ```js
 * const fxaaPass = new ShaderPass( FXAAShader );
 * composer.addPass( fxaaPass );
 * ```
 *
 * @augments Pass
 * @three_import import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
 */
 class ShaderPass extends Pass {
 	/**
 	 * Constructs a new shader pass.
 	 *
 	 * @param {Object|ShaderMaterial} [shader] - A shader object holding vertex and fragment shader as well as
 	 * defines and uniforms. It's also valid to pass a custom shader material.
 	 * @param {string} [textureID='tDiffuse'] - The name of the texture uniform that should sample
 	 * the read buffer.
 	 */
 	constructor( shader, textureID = 'tDiffuse' ) {
 		super();
 		/**
 		 * The name of the texture uniform that should sample the read buffer.
 		 *
 		 * @type {string}
 		 * @default 'tDiffuse'
 		 */
 		this.textureID = textureID;
 		/**
 		 * The pass uniforms.
 		 *
 		 * @type {?Object}
 		 */
 		this.uniforms = null;
 		/**
 		 * The pass material.
 		 *
 		 * @type {?ShaderMaterial}
 		 */
 		this.material = null;
 		if ( shader instanceof ShaderMaterial ) {
 			this.uniforms = shader.uniforms;
 			this.material = shader;
 		} else if ( shader ) {
 			this.uniforms = UniformsUtils.clone( shader.uniforms );
 			this.material = new ShaderMaterial( {
 				name: ( shader.name !== undefined ) ? shader.name : 'unspecified',
 				defines: Object.assign( {}, shader.defines ),
 				uniforms: this.uniforms,
 				vertexShader: shader.vertexShader,
 				fragmentShader: shader.fragmentShader
 			} );
 		}
 		// internals
 		this._fsQuad = new FullScreenQuad( this.material );
 	}
 	/**
 	 * Performs the shader pass.
 	 *
 	 * @param {WebGLRenderer} renderer - The renderer.
 	 * @param {WebGLRenderTarget} writeBuffer - The write buffer. This buffer is intended as the rendering
 	 * destination for the pass.
 	 * @param {WebGLRenderTarget} readBuffer - The read buffer. The pass can access the result from the
 	 * previous pass from this buffer.
 	 * @param {number} deltaTime - The delta time in seconds.
 	 * @param {boolean} maskActive - Whether masking is active or not.
 	 */
 	render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
 		if ( this.uniforms[ this.textureID ] ) {
 			this.uniforms[ this.textureID ].value = readBuffer.texture;
 		}
 		this._fsQuad.material = this.material;
 		if ( this.renderToScreen ) {
 			renderer.setRenderTarget( null );
 			this._fsQuad.render( renderer );
 		} else {
 			renderer.setRenderTarget( writeBuffer );
 			// TODO: Avoid using autoClear properties, see https://github.com/mrdoob/three.js/pull/15571#issuecomment-465669600
 			if ( this.clear ) renderer.clear( renderer.autoClearColor, renderer.autoClearDepth, renderer.autoClearStencil );
 			this._fsQuad.render( renderer );
 		}
 	}
 	/**
 	 * Frees the GPU-related resources allocated by this instance. Call this
 	 * method whenever the pass is no longer used in your app.
 	 */
 	dispose() {
 		this.material.dispose();
 		this._fsQuad.dispose();
 	}
 }
 export { ShaderPass };
@@ -0,0 +1,52 @@
 /**
 * @module CopyShader
 * @three_import import { CopyShader } from 'three/addons/shaders/CopyShader.js';
 */
 /**
 * Full-screen copy shader pass.
 *
 * @constant
 * @type {ShaderMaterial~Shader}
 */
 const CopyShader = {
 	name: 'CopyShader',
 	uniforms: {
 		'tDiffuse': { value: null },
 		'opacity': { value: 1.0 }
 	},
 	vertexShader: /* glsl */`
 		varying vec2 vUv;
 		void main() {
 			vUv = uv;
 			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 		}`,
 	fragmentShader: /* glsl */`
 		uniform float opacity;
 		uniform sampler2D tDiffuse;
 		varying vec2 vUv;
 		void main() {
 			vec4 texel = texture2D( tDiffuse, vUv );
 			gl_FragColor = opacity * texel;
 		}`
 };
 export { CopyShader };
@@ -0,0 +1,298 @@
 import {
 	Vector2
 } from 'three';
 /**
 * @module FXAAShader
 * @three_import import { FXAAShader } from 'three/addons/shaders/FXAAShader.js';
 */
 /**
 * FXAA algorithm from NVIDIA, C# implementation by Jasper Flick, GLSL port by Dave Hoskins.
 *
 * References:
 * - {@link http://developer.download.nvidia.com/assets/gamedev/files/sdk/11/FXAA_WhitePaper.pdf}.
 * - {@link https://catlikecoding.com/unity/tutorials/advanced-rendering/fxaa/}.
 *
 * @constant
 * @type {ShaderMaterial~Shader}
 */
 const FXAAShader = {
 	name: 'FXAAShader',
 	uniforms: {
 		'tDiffuse': { value: null },
 		'resolution': { value: new Vector2( 1 / 1024, 1 / 512 ) }
 	},
 	vertexShader: /* glsl */`
 		varying vec2 vUv;
 		void main() {
 			vUv = uv;
 			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 		}`,
 	fragmentShader: /* glsl */`
 		uniform sampler2D tDiffuse;
 		uniform vec2 resolution;
 		varying vec2 vUv;
 		#define EDGE_STEP_COUNT 6
 		#define EDGE_GUESS 8.0
 		#define EDGE_STEPS 1.0, 1.5, 2.0, 2.0, 2.0, 4.0
 		const float edgeSteps[EDGE_STEP_COUNT] = float[EDGE_STEP_COUNT]( EDGE_STEPS );
 		float _ContrastThreshold = 0.0312;
 		float _RelativeThreshold = 0.063;
 		float _SubpixelBlending = 1.0;
 		vec4 Sample( sampler2D  tex2D, vec2 uv ) {
 			return texture( tex2D, uv );
 		}
 		float SampleLuminance( sampler2D tex2D, vec2 uv ) {
 			return dot( Sample( tex2D, uv ).rgb, vec3( 0.3, 0.59, 0.11 ) );
 		}
 		float SampleLuminance( sampler2D tex2D, vec2 texSize, vec2 uv, float uOffset, float vOffset ) {
 			uv += texSize * vec2(uOffset, vOffset);
 			return SampleLuminance(tex2D, uv);
 		}
 		struct LuminanceData {
 			float m, n, e, s, w;
 			float ne, nw, se, sw;
 			float highest, lowest, contrast;
 		};
 		LuminanceData SampleLuminanceNeighborhood( sampler2D tex2D, vec2 texSize, vec2 uv ) {
 			LuminanceData l;
 			l.m = SampleLuminance( tex2D, uv );
 			l.n = SampleLuminance( tex2D, texSize, uv,  0.0,  1.0 );
 			l.e = SampleLuminance( tex2D, texSize, uv,  1.0,  0.0 );
 			l.s = SampleLuminance( tex2D, texSize, uv,  0.0, -1.0 );
 			l.w = SampleLuminance( tex2D, texSize, uv, -1.0,  0.0 );
 			l.ne = SampleLuminance( tex2D, texSize, uv,  1.0,  1.0 );
 			l.nw = SampleLuminance( tex2D, texSize, uv, -1.0,  1.0 );
 			l.se = SampleLuminance( tex2D, texSize, uv,  1.0, -1.0 );
 			l.sw = SampleLuminance( tex2D, texSize, uv, -1.0, -1.0 );
 			l.highest = max( max( max( max( l.n, l.e ), l.s ), l.w ), l.m );
 			l.lowest = min( min( min( min( l.n, l.e ), l.s ), l.w ), l.m );
 			l.contrast = l.highest - l.lowest;
 			return l;
 		}
 		bool ShouldSkipPixel( LuminanceData l ) {
 			float threshold = max( _ContrastThreshold, _RelativeThreshold * l.highest );
 			return l.contrast < threshold;
 		}
 		float DeterminePixelBlendFactor( LuminanceData l ) {
 			float f = 2.0 * ( l.n + l.e + l.s + l.w );
 			f += l.ne + l.nw + l.se + l.sw;
 			f *= 1.0 / 12.0;
 			f = abs( f - l.m );
 			f = clamp( f / l.contrast, 0.0, 1.0 );
 			float blendFactor = smoothstep( 0.0, 1.0, f );
 			return blendFactor * blendFactor * _SubpixelBlending;
 		}
 		struct EdgeData {
 			bool isHorizontal;
 			float pixelStep;
 			float oppositeLuminance, gradient;
 		};
 		EdgeData DetermineEdge( vec2 texSize, LuminanceData l ) {
 			EdgeData e;
 			float horizontal =
 				abs( l.n + l.s - 2.0 * l.m ) * 2.0 +
 				abs( l.ne + l.se - 2.0 * l.e ) +
 				abs( l.nw + l.sw - 2.0 * l.w );
 			float vertical =
 				abs( l.e + l.w - 2.0 * l.m ) * 2.0 +
 				abs( l.ne + l.nw - 2.0 * l.n ) +
 				abs( l.se + l.sw - 2.0 * l.s );
 			e.isHorizontal = horizontal >= vertical;
 			float pLuminance = e.isHorizontal ? l.n : l.e;
 			float nLuminance = e.isHorizontal ? l.s : l.w;
 			float pGradient = abs( pLuminance - l.m );
 			float nGradient = abs( nLuminance - l.m );
 			e.pixelStep = e.isHorizontal ? texSize.y : texSize.x;
 			if (pGradient < nGradient) {
 				e.pixelStep = -e.pixelStep;
 				e.oppositeLuminance = nLuminance;
 				e.gradient = nGradient;
 			} else {
 				e.oppositeLuminance = pLuminance;
 				e.gradient = pGradient;
 			}
 			return e;
 		}
 		float DetermineEdgeBlendFactor( sampler2D  tex2D, vec2 texSize, LuminanceData l, EdgeData e, vec2 uv ) {
 			vec2 uvEdge = uv;
 			vec2 edgeStep;
 			if (e.isHorizontal) {
 				uvEdge.y += e.pixelStep * 0.5;
 				edgeStep = vec2( texSize.x, 0.0 );
 			} else {
 				uvEdge.x += e.pixelStep * 0.5;
 				edgeStep = vec2( 0.0, texSize.y );
 			}
 			float edgeLuminance = ( l.m + e.oppositeLuminance ) * 0.5;
 			float gradientThreshold = e.gradient * 0.25;
 			vec2 puv = uvEdge + edgeStep * edgeSteps[0];
 			float pLuminanceDelta = SampleLuminance( tex2D, puv ) - edgeLuminance;
 			bool pAtEnd = abs( pLuminanceDelta ) >= gradientThreshold;
 			for ( int i = 1; i < EDGE_STEP_COUNT && !pAtEnd; i++ ) {
 				puv += edgeStep * edgeSteps[i];
 				pLuminanceDelta = SampleLuminance( tex2D, puv ) - edgeLuminance;
 				pAtEnd = abs( pLuminanceDelta ) >= gradientThreshold;
 			}
 			if ( !pAtEnd ) {
 				puv += edgeStep * EDGE_GUESS;
 			}
 			vec2 nuv = uvEdge - edgeStep * edgeSteps[0];
 			float nLuminanceDelta = SampleLuminance( tex2D, nuv ) - edgeLuminance;
 			bool nAtEnd = abs( nLuminanceDelta ) >= gradientThreshold;
 			for ( int i = 1; i < EDGE_STEP_COUNT && !nAtEnd; i++ ) {
 				nuv -= edgeStep * edgeSteps[i];
 				nLuminanceDelta = SampleLuminance( tex2D, nuv ) - edgeLuminance;
 				nAtEnd = abs( nLuminanceDelta ) >= gradientThreshold;
 			}
 			if ( !nAtEnd ) {
 				nuv -= edgeStep * EDGE_GUESS;
 			}
 			float pDistance, nDistance;
 			if ( e.isHorizontal ) {
 				pDistance = puv.x - uv.x;
 				nDistance = uv.x - nuv.x;
 			} else {
 				pDistance = puv.y - uv.y;
 				nDistance = uv.y - nuv.y;
 			}
 			float shortestDistance;
 			bool deltaSign;
 			if ( pDistance <= nDistance ) {
 				shortestDistance = pDistance;
 				deltaSign = pLuminanceDelta >= 0.0;
 			} else {
 				shortestDistance = nDistance;
 				deltaSign = nLuminanceDelta >= 0.0;
 			}
 			if ( deltaSign == ( l.m - edgeLuminance >= 0.0 ) ) {
 				return 0.0;
 			}
 			return 0.5 - shortestDistance / ( pDistance + nDistance );
 		}
 		vec4 ApplyFXAA( sampler2D  tex2D, vec2 texSize, vec2 uv ) {
 			LuminanceData luminance = SampleLuminanceNeighborhood( tex2D, texSize, uv );
 			if ( ShouldSkipPixel( luminance ) ) {
 				return Sample( tex2D, uv );
 			}
 			float pixelBlend = DeterminePixelBlendFactor( luminance );
 			EdgeData edge = DetermineEdge( texSize, luminance );
 			float edgeBlend = DetermineEdgeBlendFactor( tex2D, texSize, luminance, edge, uv );
 			float finalBlend = max( pixelBlend, edgeBlend );
 			if (edge.isHorizontal) {
 				uv.y += edge.pixelStep * finalBlend;
 			} else {
 				uv.x += edge.pixelStep * finalBlend;
 			}
 			return Sample( tex2D, uv );
 		}
 		void main() {
 			gl_FragColor = ApplyFXAA( tDiffuse, resolution.xy, vUv );
 		}`
 };
 export { FXAAShader };
@@ -0,0 +1,103 @@
 /**
 * @module OutputShader
 * @three_import import { OutputShader } from 'three/addons/shaders/OutputShader.js';
 */
 /**
 * Performs tone mapping and color space conversion for
 * FX workflows.
 *
 * Used by {@link OutputPass}.
 *
 * @constant
 * @type {ShaderMaterial~Shader}
 */
 const OutputShader = {
 	name: 'OutputShader',
 	uniforms: {
 		'tDiffuse': { value: null },
 		'toneMappingExposure': { value: 1 }
 	},
 	vertexShader: /* glsl */`
 		precision highp float;
 		uniform mat4 modelViewMatrix;
 		uniform mat4 projectionMatrix;
 		attribute vec3 position;
 		attribute vec2 uv;
 		varying vec2 vUv;
 		void main() {
 			vUv = uv;
 			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 		}`,
 	fragmentShader: /* glsl */`
 		precision highp float;
 		uniform sampler2D tDiffuse;
 		#include <tonemapping_pars_fragment>
 		#include <colorspace_pars_fragment>
 		varying vec2 vUv;
 		void main() {
 			gl_FragColor = texture2D( tDiffuse, vUv );
 			// tone mapping
 			#ifdef LINEAR_TONE_MAPPING
 				gl_FragColor.rgb = LinearToneMapping( gl_FragColor.rgb );
 			#elif defined( REINHARD_TONE_MAPPING )
 				gl_FragColor.rgb = ReinhardToneMapping( gl_FragColor.rgb );
 			#elif defined( CINEON_TONE_MAPPING )
 				gl_FragColor.rgb = CineonToneMapping( gl_FragColor.rgb );
 			#elif defined( ACES_FILMIC_TONE_MAPPING )
 				gl_FragColor.rgb = ACESFilmicToneMapping( gl_FragColor.rgb );
 			#elif defined( AGX_TONE_MAPPING )
 				gl_FragColor.rgb = AgXToneMapping( gl_FragColor.rgb );
 			#elif defined( NEUTRAL_TONE_MAPPING )
 				gl_FragColor.rgb = NeutralToneMapping( gl_FragColor.rgb );
 			#elif defined( CUSTOM_TONE_MAPPING )
 				gl_FragColor.rgb = CustomToneMapping( gl_FragColor.rgb );
 			#endif
 			// color space
 			#ifdef SRGB_TRANSFER
 				gl_FragColor = sRGBTransferOETF( gl_FragColor );
 			#endif
 		}`
 };
 export { OutputShader };
@@ -0,0 +1,321 @@
 import {
 	Matrix4,
 	Vector2
 } from 'three';
 /**
 * @module SSAOShader
 * @three_import import { SSAOShader } from 'three/addons/shaders/SSAOShader.js';
 */
 /**
 * SSAO shader.
 *
 * References:
 * - {@link http://john-chapman-graphics.blogspot.com/2013/01/ssao-tutorial.html}
 * - {@link https://learnopengl.com/Advanced-Lighting/SSAO}
 * - {@link https://github.com/McNopper/OpenGL/blob/master/Example28/shader/ssao.frag.glsl}
 *
 * @constant
 * @type {ShaderMaterial~Shader}
 */
 const SSAOShader = {
 	name: 'SSAOShader',
 	defines: {
 		'PERSPECTIVE_CAMERA': 1,
 		'KERNEL_SIZE': 32
 	},
 	uniforms: {
 		'tNormal': { value: null },
 		'tDepth': { value: null },
 		'tNoise': { value: null },
 		'kernel': { value: null },
 		'cameraNear': { value: null },
 		'cameraFar': { value: null },
 		'resolution': { value: new Vector2() },
 		'cameraProjectionMatrix': { value: new Matrix4() },
 		'cameraInverseProjectionMatrix': { value: new Matrix4() },
 		'kernelRadius': { value: 8 },
 		'minDistance': { value: 0.005 },
 		'maxDistance': { value: 0.05 },
 	},
 	vertexShader: /* glsl */`
 		varying vec2 vUv;
 		void main() {
 			vUv = uv;
 			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 		}`,
 	fragmentShader: /* glsl */`
 		uniform highp sampler2D tNormal;
 		uniform highp sampler2D tDepth;
 		uniform sampler2D tNoise;
 		uniform vec3 kernel[ KERNEL_SIZE ];
 		uniform vec2 resolution;
 		uniform float cameraNear;
 		uniform float cameraFar;
 		uniform mat4 cameraProjectionMatrix;
 		uniform mat4 cameraInverseProjectionMatrix;
 		uniform float kernelRadius;
 		uniform float minDistance; // avoid artifacts caused by neighbour fragments with minimal depth difference
 		uniform float maxDistance; // avoid the influence of fragments which are too far away
 		varying vec2 vUv;
 		#include <packing>
 		float getDepth( const in vec2 screenPosition ) {
 			return texture2D( tDepth, screenPosition ).x;
 		}
 		float getLinearDepth( const in vec2 screenPosition ) {
 			#if PERSPECTIVE_CAMERA == 1
 				float fragCoordZ = texture2D( tDepth, screenPosition ).x;
 				float viewZ = perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar );
 				return viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
 			#else
 				return texture2D( tDepth, screenPosition ).x;
 			#endif
 		}
 		float getViewZ( const in float depth ) {
 			#if PERSPECTIVE_CAMERA == 1
 				return perspectiveDepthToViewZ( depth, cameraNear, cameraFar );
 			#else
 				return orthographicDepthToViewZ( depth, cameraNear, cameraFar );
 			#endif
 		}
 		vec3 getViewPosition( const in vec2 screenPosition, const in float depth, const in float viewZ ) {
 			float clipW = cameraProjectionMatrix[2][3] * viewZ + cameraProjectionMatrix[3][3];
 			vec4 clipPosition = vec4( ( vec3( screenPosition, depth ) - 0.5 ) * 2.0, 1.0 );
 			clipPosition *= clipW; // unprojection.
 			return ( cameraInverseProjectionMatrix * clipPosition ).xyz;
 		}
 		vec3 getViewNormal( const in vec2 screenPosition ) {
 			return unpackRGBToNormal( texture2D( tNormal, screenPosition ).xyz );
 		}
 		void main() {
 			float depth = getDepth( vUv );
 			if ( depth == 1.0 ) {
 				gl_FragColor = vec4( 1.0 ); // don't influence background
 			} else {
 				float viewZ = getViewZ( depth );
 				vec3 viewPosition = getViewPosition( vUv, depth, viewZ );
 				vec3 viewNormal = getViewNormal( vUv );
 				vec2 noiseScale = vec2( resolution.x / 4.0, resolution.y / 4.0 );
 				vec3 random = vec3( texture2D( tNoise, vUv * noiseScale ).r );
 				// compute matrix used to reorient a kernel vector
 				vec3 tangent = normalize( random - viewNormal * dot( random, viewNormal ) );
 				vec3 bitangent = cross( viewNormal, tangent );
 				mat3 kernelMatrix = mat3( tangent, bitangent, viewNormal );
 				float occlusion = 0.0;
 				for ( int i = 0; i < KERNEL_SIZE; i ++ ) {
 					vec3 sampleVector = kernelMatrix * kernel[ i ]; // reorient sample vector in view space
 					vec3 samplePoint = viewPosition + ( sampleVector * kernelRadius ); // calculate sample point
 					vec4 samplePointNDC = cameraProjectionMatrix * vec4( samplePoint, 1.0 ); // project point and calculate NDC
 					samplePointNDC /= samplePointNDC.w;
 					vec2 samplePointUv = samplePointNDC.xy * 0.5 + 0.5; // compute uv coordinates
 					float realDepth = getLinearDepth( samplePointUv ); // get linear depth from depth texture
 					float sampleDepth = viewZToOrthographicDepth( samplePoint.z, cameraNear, cameraFar ); // compute linear depth of the sample view Z value
 					float delta = sampleDepth - realDepth;
 					if ( delta > minDistance && delta < maxDistance ) { // if fragment is before sample point, increase occlusion
 						occlusion += 1.0;
 					}
 				}
 				occlusion = clamp( occlusion / float( KERNEL_SIZE ), 0.0, 1.0 );
 				gl_FragColor = vec4( vec3( 1.0 - occlusion ), 1.0 );
 			}
 		}`
 };
 /**
 * SSAO depth shader.
 *
 * @constant
 * @type {ShaderMaterial~Shader}
 */
 const SSAODepthShader = {
 	name: 'SSAODepthShader',
 	defines: {
 		'PERSPECTIVE_CAMERA': 1
 	},
 	uniforms: {
 		'tDepth': { value: null },
 		'cameraNear': { value: null },
 		'cameraFar': { value: null },
 	},
 	vertexShader:
 		`varying vec2 vUv;
 		void main() {
 			vUv = uv;
 			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 		}`,
 	fragmentShader:
 		`uniform sampler2D tDepth;
 		uniform float cameraNear;
 		uniform float cameraFar;
 		varying vec2 vUv;
 		#include <packing>
 		float getLinearDepth( const in vec2 screenPosition ) {
 			#if PERSPECTIVE_CAMERA == 1
 				float fragCoordZ = texture2D( tDepth, screenPosition ).x;
 				float viewZ = perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar );
 				return viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
 			#else
 				return texture2D( tDepth, screenPosition ).x;
 			#endif
 		}
 		void main() {
 			float depth = getLinearDepth( vUv );
 			gl_FragColor = vec4( vec3( 1.0 - depth ), 1.0 );
 		}`
 };
 /**
 * SSAO blur shader.
 *
 * @constant
 * @type {Object}
 */
 const SSAOBlurShader = {
 	name: 'SSAOBlurShader',
 	uniforms: {
 		'tDiffuse': { value: null },
 		'resolution': { value: new Vector2() }
 	},
 	vertexShader:
 		`varying vec2 vUv;
 		void main() {
 			vUv = uv;
 			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 		}`,
 	fragmentShader:
 		`uniform sampler2D tDiffuse;
 		uniform vec2 resolution;
 		varying vec2 vUv;
 		void main() {
 			vec2 texelSize = ( 1.0 / resolution );
 			float result = 0.0;
 			for ( int i = - 2; i <= 2; i ++ ) {
 				for ( int j = - 2; j <= 2; j ++ ) {
 					vec2 offset = ( vec2( float( i ), float( j ) ) ) * texelSize;
 					result += texture2D( tDiffuse, vUv + offset ).r;
 				}
 			}
 			gl_FragColor = vec4( vec3( result / ( 5.0 * 5.0 ) ), 1.0 );
 		}`
 };
 export { SSAOShader, SSAODepthShader, SSAOBlurShader };
@@ -0,0 +1,38 @@
 import { spawn } from "node:child_process";
 import fs from "node:fs";
 import path from "node:path";
 const projectDir = process.cwd();
 const standaloneDir = path.join(projectDir, ".next", "standalone");
 const standalonePublicDir = path.join(standaloneDir, "public");
 const standaloneStaticDir = path.join(standaloneDir, ".next", "static");
 fs.rmSync(standalonePublicDir, { recursive: true, force: true });
 fs.rmSync(standaloneStaticDir, { recursive: true, force: true });
 fs.cpSync(path.join(projectDir, "public"), standalonePublicDir, {
  recursive: true,
 });
 fs.mkdirSync(path.dirname(standaloneStaticDir), { recursive: true });
 fs.cpSync(path.join(projectDir, ".next", "static"), standaloneStaticDir, {
  recursive: true,
 });
 const server = spawn(process.execPath, [path.join(standaloneDir, "server.js")], {
  cwd: standaloneDir,
  env: {
    ...process.env,
    HOSTNAME: "127.0.0.1",
    PORT: "3100",
  },
  stdio: "inherit",
 });
 const stopServer = (signal) => {
  if (!server.killed) server.kill(signal);
 };
 process.once("SIGINT", () => stopServer("SIGINT"));
 process.once("SIGTERM", () => stopServer("SIGTERM"));
 server.once("exit", (code, signal) => {
  process.exitCode = signal ? 1 : (code ?? 1);
 });
@@ -3,7 +3,12 @@
 import type { ReactNode } from "react";
 import MapComponent from "@components/olmap/core/MapComponent";
 import { MapNavigationContent } from "@components/loading/NavigationFeedback";
 export default function MapLayout({ children }: { children: ReactNode }) {
-  return <MapComponent>{children}</MapComponent>;
+  return (
    <MapComponent>
      <MapNavigationContent>{children}</MapNavigationContent>
    </MapComponent>
  );
 }
@@ -0,0 +1,11 @@
 "use client";
 import { usePathname } from "next/navigation";
 import { MapRouteSkeleton } from "@components/loading/PageLoadingSkeleton";
 import { useNavigationFeedback } from "@components/loading/NavigationFeedback";
 export default function Loading() {
  const pathname = usePathname();
  const { pendingPath } = useNavigationFeedback();
  return <MapRouteSkeleton pathname={pendingPath ?? pathname} />;
 }
@@ -6,6 +6,10 @@ import authOptions from "@app/api/auth/[...nextauth]/options";
 import { Header } from "@components/header";
 import { Title } from "@components/title";
 import { AppSider } from "@components/sider/AppSider";
 import {
  NavigationFeedbackProvider,
  PageNavigationContent,
 } from "@components/loading/NavigationFeedback";
 import { ThemedLayout } from "@refinedev/mui";
 import { getServerSession } from "next-auth/next";
 import { redirect } from "next/navigation";
@@ -32,6 +36,7 @@ export default async function MainLayout({
  }
  return (
    <NavigationFeedbackProvider>
      <ThemedLayout
        Header={Header}
        Title={Title}
@@ -40,7 +45,7 @@ export default async function MainLayout({
          sx: {
            flex: 1,
            minHeight: 0,
-          overflow: "auto",
+            overflow: "hidden",
            p: 0,
          },
        }}
@@ -48,8 +53,9 @@ export default async function MainLayout({
          sx: { height: "100vh", overflow: "hidden" },
        }}
      >
-      {children}
+        <PageNavigationContent>{children}</PageNavigationContent>
      </ThemedLayout>
    </NavigationFeedbackProvider>
  );
 }
@@ -0,0 +1,5 @@
 import { PageLoadingSkeleton } from "@components/loading/PageLoadingSkeleton";
 export default function Loading() {
  return <PageLoadingSkeleton />;
 }
@@ -0,0 +1,16 @@
 "use client";
 import dynamic from "next/dynamic";
 import { PageLoadingSkeleton } from "@components/loading/PageLoadingSkeleton";
 const ThreeDimensionalScene = dynamic(
  () => import("@components/threeDimensional/ThreeDimensionalScene"),
  {
    ssr: false,
    loading: () => <PageLoadingSkeleton pathname="/three-dimensional-scene" />,
  },
 );
 export default function ThreeDimensionalScenePage() {
  return <ThreeDimensionalScene />;
 }
@@ -12,6 +12,7 @@ import { usePathname } from "next/navigation";
 import React, { useEffect } from "react";
 import routerProvider from "@refinedev/nextjs-router";
 import { NavigationLink } from "@components/loading/NavigationLink";
 import { ColorModeContextProvider } from "@contexts/color-mode";
 import { dataProvider } from "@providers/data-provider";
@@ -27,6 +28,7 @@ import { clearSessionRecoveryDrafts } from "@/lib/sessionRecoveryDraft";
 import { permissionCodes, resourcePermissions } from "@/lib/permissions";
 import { config } from "@config/config";
 import { useAppNotificationProvider } from "@/providers/notification-provider/useAppNotificationProvider";
 import { supportsThreeDimensionalScene } from "@components/threeDimensional/sceneData";
 import { LiaNetworkWiredSolid } from "react-icons/lia";
 import { TbActivity, TbDatabaseEdit, TbLocationPin } from "react-icons/tb";
@@ -38,12 +40,15 @@ import {
  ManageAccounts as ManageAccountsIcon,
  MyLocation as MyLocationIcon,
  Search as SearchIcon,
  ViewInAr as ViewInArIcon,
 } from "@mui/icons-material";
 type RefineContextProps = {
  defaultMode?: string;
 };
 const appRouterProvider = { ...routerProvider, Link: NavigationLink };
 export const RefineContext = (
  props: React.PropsWithChildren<RefineContextProps>,
 ) => (
@@ -63,6 +68,9 @@ export const App = (props: React.PropsWithChildren<AppProps>) => {
  const markSessionExpired = useAuthStore((state) => state.markSessionExpired);
  const clearSessionExpired = useAuthStore((state) => state.clearSessionExpired);
  const currentProjectId = useProjectStore((state) => state.currentProjectId);
  const currentProjectCode = useProjectStore(
    (state) => state.currentProjectCode,
  );
  const permissions = useAccessStore((state) => state.permissions);
  const setAccessContext = useAccessStore((state) => state.setContext);
  const setAccessLoading = useAccessStore((state) => state.setLoading);
@@ -209,6 +217,19 @@ export const App = (props: React.PropsWithChildren<AppProps>) => {
  };
  const resources = [
    ...(supportsThreeDimensionalScene(currentProjectCode) &&
    can(permissionCodes.webgisView)
      ? [
          {
            name: "三维场景",
            list: "/three-dimensional-scene",
            meta: {
              icon: <ViewInArIcon />,
              label: "三维场景",
            },
          },
        ]
      : []),
    ...(can(permissionCodes.simulationView)
      ? [
          {
@@ -359,7 +380,7 @@ export const App = (props: React.PropsWithChildren<AppProps>) => {
        <ColorModeContextProvider defaultMode={props.defaultMode}>
          <RefineSnackbarProvider>
            <Refine
-              routerProvider={routerProvider}
+              routerProvider={appRouterProvider}
              dataProvider={dataProvider}
              notificationProvider={useAppNotificationProvider}
              authProvider={authProvider}
@@ -0,0 +1,69 @@
 import "@testing-library/jest-dom";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { AgentActivityTimeline } from "./AgentActivityTimeline";
 describe("AgentActivityTimeline", () => {
  it("shows only the first lines of a long tool command until expanded", () => {
    const target = [
      "cd /app/data/conversation-workspaces/conversation-example",
      "python3 - <<'EOF'",
      "import json, glob",
      "print('fourth line')",
      "EOF",
    ].join("\n");
    render(
      <AgentActivityTimeline
        activities={[
          {
            id: "analysis",
            title: "处理分析数据",
            reason: "正在核查结果。",
            status: "completed",
            startedAt: 1000,
            endedAt: 2000,
            actions: [
              {
                id: "long-command",
                tool: "bash",
                title: "运行本地分析",
                status: "completed",
                target,
                startedAt: 1100,
                endedAt: 1900,
              },
              {
                id: "short-command",
                tool: "tjwater_cli",
                title: "查询后端数据",
                status: "completed",
                target: "help data",
                startedAt: 1900,
                endedAt: 1950,
              },
            ],
          },
        ]}
      />,
    );
    fireEvent.click(screen.getByRole("button", { name: "展开分析过程" }));
    expect(screen.getByText(/import json, glob/u)).toBeInTheDocument();
    expect(screen.queryByText(/fourth line/u)).not.toBeInTheDocument();
    expect(screen.getByText("help data")).toBeInTheDocument();
    expect(screen.getByRole("button", { name: "展开完整内容" })).toHaveAttribute(
      "aria-expanded",
      "false",
    );
    fireEvent.click(screen.getByRole("button", { name: "展开完整内容" }));
    expect(screen.getByText(/fourth line/u)).toBeInTheDocument();
    expect(screen.getByRole("button", { name: "收起内容" })).toHaveAttribute(
      "aria-expanded",
      "true",
    );
    fireEvent.click(screen.getByRole("button", { name: "收起内容" }));
    expect(screen.queryByText(/fourth line/u)).not.toBeInTheDocument();
  });
 });
@@ -3,6 +3,7 @@
 import React, { useEffect, useMemo, useState } from "react";
 import {
  Box,
  Button,
  Collapse,
  IconButton,
  LinearProgress,
@@ -89,6 +90,11 @@ const ActionStatusIcon = ({ status }: { status: AgentActivityAction["status"] })
 const ActionRow = ({ action, now }: { action: AgentActivityAction; now: number }) => {
  const elapsed = getElapsedMs(action, now);
  const [targetExpanded, setTargetExpanded] = useState(false);
  const targetId = React.useId();
  const target = action.target ?? "";
  const targetPreview = target.split(/\r?\n/u).slice(0, 3).join("\n").slice(0, 240);
  const hasLongTarget = targetPreview.length < target.length;
  return (
    <Stack
      direction="row"
@@ -111,19 +117,45 @@ const ActionRow = ({ action, now }: { action: AgentActivityAction; now: number }
          </Typography>
        </Stack>
        {action.target ? (
          <Box sx={{ mt: 0.2 }}>
            <Typography
              id={targetId}
              variant="caption"
              color="text.secondary"
              sx={{
-              display: "block",
+                display: !targetExpanded && hasLongTarget ? "-webkit-box" : "block",
              mt: 0.2,
                fontFamily: "monospace",
-              wordBreak: "break-word",
+                overflow: !targetExpanded && hasLongTarget ? "hidden" : "visible",
                overflowWrap: "anywhere",
                whiteSpace: "pre-wrap",
                ...(!targetExpanded && hasLongTarget
                  ? { WebkitBoxOrient: "vertical", WebkitLineClamp: 3 }
                  : {}),
              }}
            >
-            {action.target}
+              {targetExpanded ? target : targetPreview}
            </Typography>
            {hasLongTarget ? (
              <Button
                size="small"
                aria-controls={targetId}
                aria-expanded={targetExpanded}
                onClick={() => setTargetExpanded((current) => !current)}
                sx={{
                  mt: 0.2,
                  p: 0,
                  minWidth: 0,
                  color: activityAccent,
                  fontSize: "0.75rem",
                  fontWeight: 650,
                  lineHeight: 1.5,
                  textTransform: "none",
                }}
              >
                {targetExpanded ? "收起内容" : "展开完整内容"}
              </Button>
            ) : null}
          </Box>
        ) : null}
        {action.error ? (
          <Typography
@@ -79,7 +79,7 @@ const approvalModeOptions: ReadonlyArray<{
  {
    value: "always",
    label: "始终允许",
-    description: "除明确禁止项外自动放行",
+    description: "常规权限自动放行，敏感路径仍需确认",
    icon: WarningAmberRounded,
  },
 ];
@@ -0,0 +1,47 @@
 import React from "react";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import { PermissionRequestGroup } from "./AgentPermissionRequests";
 jest.mock("framer-motion", () => ({
  AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>,
  motion: {
    div: ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
      <div {...props}>{children}</div>
    ),
  },
 }));
 describe("PermissionRequestGroup", () => {
  it("shows an external path approval request and forwards the user's decision", () => {
    const onReply = jest.fn();
    render(
      <ThemeProvider theme={createTheme()}>
        <PermissionRequestGroup
          permissions={[
            {
              requestId: "external-1",
              sessionId: "session-1",
              permission: "external_directory",
              patterns: ["/app/private/*"],
              target: "/app/private/report.json",
              always: ["/app/private/*"],
              createdAt: 1,
              status: "pending",
            },
          ]}
          isRunning
          onReply={onReply}
        />
      </ThemeProvider>,
    );
    expect(screen.getByText("访问工作区外目录")).toBeInTheDocument();
    expect(screen.getByText("/app/private/report.json")).toBeInTheDocument();
    fireEvent.click(screen.getByRole("button", { name: "允许一次" }));
    expect(onReply).toHaveBeenCalledWith("external-1", "once");
    fireEvent.click(screen.getByRole("button", { name: "保存授权" }));
    expect(onReply).toHaveBeenCalledWith("external-1", "always");
  });
 });
@@ -1,4 +1,6 @@
 import { parseApplyLayerStylePayload } from "./toolCallStyleHelpers";
 import { createDefaultLayerStyleState } from "@components/olmap/core/Controls/styleEditorPresets";
 import { validateStyleConfig } from "@components/olmap/core/Controls/styleEditorUtils";
 describe("parseApplyLayerStylePayload", () => {
  it("accepts a valid snake_case interval contract", () => {
@@ -47,4 +49,17 @@ describe("parseApplyLayerStylePayload", () => {
      }),
    ).toMatchObject({ layerId: "junctions", styleConfig: { opacity: 0.5 } });
  });
  it("preserves default palette indexes when only some style fields are provided", () => {
    const payload = parseApplyLayerStylePayload({
      layer_id: "pipes",
      style_config: { property: "flow", color_type: "gradient" },
    });
    expect(payload).not.toBeNull();
    const merged = {
      ...createDefaultLayerStyleState("pipes").styleConfig,
      ...payload?.styleConfig,
    };
    expect(validateStyleConfig(merged)).toEqual({ valid: true, errors: [] });
  });
 });
@@ -198,10 +198,15 @@ export const parseApplyLayerStylePayload = (
    ) return null;
  }
  const definedStyleConfig = styleConfig
    ? (Object.fromEntries(
        Object.entries(styleConfig).filter(([, value]) => value !== undefined),
      ) as Partial<StyleConfig>)
    : undefined;
  const hasStyleOverrides =
-    styleConfig &&
+    definedStyleConfig &&
-    Object.values(styleConfig).some((value) =>
+    Object.values(definedStyleConfig).some((value) =>
-      Array.isArray(value) ? value.length > 0 : value !== undefined,
+      Array.isArray(value) ? value.length > 0 : true,
    );
  if (!resetToDefault && !hasStyleOverrides) {
@@ -211,7 +216,7 @@ export const parseApplyLayerStylePayload = (
  return {
    layerId,
    resetToDefault,
-    styleConfig: hasStyleOverrides ? styleConfig : undefined,
+    styleConfig: hasStyleOverrides ? definedStyleConfig : undefined,
  };
 };
@@ -46,8 +46,8 @@ export const Header: React.FC<RefineThemedLayoutHeaderProps> = ({
  const [showProjectSelector, setShowProjectSelector] = useState(false);
  const [showChatbox, setShowChatbox] = useState(false);
  const open = Boolean(anchorEl);
-  const setCurrentProjectId = useProjectStore(
+  const setActiveProjectContext = useProjectStore(
-    (state) => state.setCurrentProjectId,
+    (state) => state.setCurrentProject,
  );
  const { data: user } = useGetIdentity<IUser>();
@@ -78,7 +78,7 @@ export const Header: React.FC<RefineThemedLayoutHeaderProps> = ({
    localStorage.setItem(NETWORK_NAME_STORAGE_KEY, networkName);
    localStorage.setItem(MAP_EXTENT_STORAGE_KEY, extent.join(","));
    localStorage.removeItem(`${workspace}_map_view`);
-    setCurrentProjectId(projectId || networkName || workspace);
+    setActiveProjectContext(projectId || networkName || workspace, networkName);
    setShowProjectSelector(false);
    window.location.reload();
  };
@@ -0,0 +1,78 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import {
  MapNavigationContent,
  NavigationFeedbackProvider,
  PageNavigationContent,
  useNavigationFeedback,
 } from "./NavigationFeedback";
 import { mapSkeletonForPath } from "./PageLoadingSkeleton";
 import { MAP_SKELETON_VARIANTS } from "./mapComponentSkeletonConfig";
 let mockPathname = "/network-simulation";
 jest.mock("next/navigation", () => ({ usePathname: () => mockPathname }));
 function Harness() {
  const { reportPending } = useNavigationFeedback();
  return (
    <>
      <button onClick={() => reportPending("first", "/scada-data-cleaning", true)}>清洗</button>
      <button onClick={() => reportPending("second", "/audit-logs", true)}>审计</button>
      <button onClick={() => reportPending("first", "/scada-data-cleaning", false)}>取消旧导航</button>
      <button onClick={() => reportPending("second", "/audit-logs", false)}>结束导航</button>
      <PageNavigationContent>
        <div data-testid="map">原有地图</div>
        <MapNavigationContent><input aria-label="页面草稿" defaultValue="保留输入" /></MapNavigationContent>
      </PageNavigationContent>
    </>
  );
 }
 describe("page navigation feedback", () => {
  beforeEach(() => { mockPathname = "/network-simulation"; });
  it("shows the destination skeleton while preserving the map and a cancelled page's draft", () => {
    render(<NavigationFeedbackProvider><Harness /></NavigationFeedbackProvider>);
    const map = screen.getByTestId("map");
    const draft = screen.getByRole("textbox", { name: "页面草稿" });
    fireEvent.click(screen.getByText("清洗"));
    expect(screen.getByRole("status", { name: "正在加载数据清洗" })).toBeVisible();
    expect(screen.getByTestId("map")).toBe(map);
    expect(map).toBeVisible();
    expect(draft).not.toBeVisible();
    fireEvent.click(screen.getByText("取消旧导航"));
    expect(draft).toBeVisible();
    expect(draft).toHaveValue("保留输入");
    expect(screen.queryByRole("progressbar", { name: "正在切换页面" })).not.toBeInTheDocument();
  });
  it("does not dismiss a newer destination when the previous link settles", () => {
    render(<NavigationFeedbackProvider><Harness /></NavigationFeedbackProvider>);
    fireEvent.click(screen.getByText("清洗"));
    fireEvent.click(screen.getByText("审计"));
    fireEvent.click(screen.getByText("取消旧导航"));
    expect(screen.getByRole("status", { name: "正在加载审计日志" })).toBeVisible();
    expect(screen.getByRole("progressbar", { name: "正在切换页面" })).toBeVisible();
    fireEvent.click(screen.getByText("结束导航"));
    expect(screen.queryByRole("status", { name: "正在加载审计日志" })).not.toBeInTheDocument();
  });
  it("hands off to route/component loading boundaries as soon as history commits", () => {
    const { rerender } = render(<NavigationFeedbackProvider><Harness /></NavigationFeedbackProvider>);
    fireEvent.click(screen.getByText("清洗"));
    expect(screen.getByRole("progressbar", { name: "正在切换页面" })).toBeVisible();
    mockPathname = "/scada-data-cleaning";
    rerender(<NavigationFeedbackProvider><Harness /></NavigationFeedbackProvider>);
    expect(screen.queryByRole("progressbar", { name: "正在切换页面" })).not.toBeInTheDocument();
    expect(screen.getByRole("textbox", { name: "页面草稿" })).toBeVisible();
  });
  it("connects every existing map skeleton to its exact public route", () => {
    const paths = [
      "/network-simulation", "/scada-data-cleaning", "/health-risk-analysis", "/monitoring-place-optimization",
      ...["burst-detection", "burst-location", "burst-simulation", "contaminant-simulation", "dma-leak-detection", "flushing-analysis"].map((name) => "/hydraulic-simulation/" + name),
    ];
    expect(paths.map(mapSkeletonForPath).sort()).toEqual([...MAP_SKELETON_VARIANTS].sort());
    expect(mapSkeletonForPath("/system-admin")).toBeUndefined();
  });
 });
@@ -0,0 +1,98 @@
 "use client";
 import { Box, LinearProgress } from "@mui/material";
 import { usePathname } from "next/navigation";
 import {
  createContext,
  useCallback,
  useContext,
  useMemo,
  useState,
  type ReactNode,
 } from "react";
 import {
  mapSkeletonForPath,
  MapRouteSkeleton,
  PageLoadingSkeleton,
 } from "./PageLoadingSkeleton";
 type PendingNavigation = { id: string; pathname: string };
 type NavigationFeedback = {
  pendingPath: string | null;
  reportPending: (id: string, pathname: string, pending: boolean) => void;
 };
 const NavigationContext = createContext<NavigationFeedback>({
  pendingPath: null,
  reportPending: () => {},
 });
 export const useNavigationFeedback = () => useContext(NavigationContext);
 export function NavigationFeedbackProvider({ children }: { children: ReactNode }) {
  const pathname = usePathname();
  const [navigation, setNavigation] = useState<PendingNavigation | null>(null);
  const reportPending = useCallback((id: string, target: string, pending: boolean) => {
    setNavigation((current) => {
      if (!pending) return current?.id === id ? null : current;
      return current?.id === id && current.pathname === target ? current : { id, pathname: target };
    });
  }, []);
  // History commits can precede a page's lazy component. Its loading.tsx and
  // dynamic fallback take over at that point, without an artificial delay.
  const pendingPath = navigation && navigation.pathname !== pathname ? navigation.pathname : null;
  const value = useMemo(() => ({ pendingPath, reportPending }), [pendingPath, reportPending]);
  return (
    <NavigationContext.Provider value={value}>
      {children}
    </NavigationContext.Provider>
  );
 }
 export function PageNavigationContent({ children }: { children: ReactNode }) {
  const pathname = usePathname();
  const { pendingPath } = useNavigationFeedback();
  const withinMap = Boolean(mapSkeletonForPath(pathname) && pendingPath && mapSkeletonForPath(pendingPath));
  return (
    <Box
      data-page-navigation-content
      aria-busy={Boolean(pendingPath)}
      sx={{ position: "relative", height: "100%", minHeight: 0, overflow: "hidden" }}
    >
      <Box
        data-page-scroll-content
        inert={Boolean(pendingPath) && !withinMap}
        aria-hidden={Boolean(pendingPath) && !withinMap}
        sx={{ height: "100%", overflow: "auto" }}
      >
        {children}
      </Box>
      {pendingPath && (
        <>
          <LinearProgress
            aria-label="正在切换页面"
            sx={{ position: "absolute", top: 0, left: 0, right: 0, zIndex: 1401, height: 3 }}
          />
          {!withinMap && (
            <Box sx={{ position: "absolute", inset: 0, zIndex: 1400, overflow: "hidden" }}>
              <PageLoadingSkeleton pathname={pendingPath} />
            </Box>
          )}
        </>
      )}
    </Box>
  );
 }
 export function MapNavigationContent({ children }: { children: ReactNode }) {
  const { pendingPath } = useNavigationFeedback();
  return (
    <>
      <Box data-map-page-content sx={{ display: pendingPath ? "none" : "contents" }}>
        {children}
      </Box>
      {pendingPath && <MapRouteSkeleton pathname={pendingPath} />}
    </>
  );
 }
@@ -0,0 +1,33 @@
 "use client";
 import type { RouterProvider } from "@refinedev/core";
 import Link, { useLinkStatus } from "next/link";
 import { forwardRef, useEffect, useId, type ComponentProps } from "react";
 import { useNavigationFeedback } from "./NavigationFeedback";
 function NavigationLinkStatus({ to }: { to: string }) {
  const { pending } = useLinkStatus();
  const { reportPending } = useNavigationFeedback();
  const id = useId();
  const pathname = to.split(/[?#]/)[0];
  useEffect(() => {
    reportPending(id, pathname, pending);
    return () => reportPending(id, pathname, false);
  }, [id, pathname, pending, reportPending]);
  return null;
 }
 export const NavigationLink = forwardRef<
  HTMLAnchorElement,
  ComponentProps<NonNullable<RouterProvider["Link"]>>
 >(
  function NavigationLink({ to, children, ...props }, ref) {
    return (
      <Link href={to} {...props} ref={ref}>
        {children}
        <NavigationLinkStatus to={to} />
      </Link>
    );
  },
 );
@@ -0,0 +1,110 @@
 "use client";
 import { Box, CircularProgress, Skeleton, Typography } from "@mui/material";
 import { usePathname } from "next/navigation";
 import { MapPanelSkeleton, MapTimelineSkeleton } from "./MapComponentSkeletons";
 import {
  MAP_SKELETON_CONFIGS,
  type MapSkeletonVariant,
 } from "./mapComponentSkeletonConfig";
 const sceneLoadingSurface = {
  width: "min(100%, 360px)",
  p: 3,
  boxSizing: "border-box",
  borderRadius: "16px",
  background: "linear-gradient(135deg,rgba(255,255,255,.50),rgba(224,239,250,.28))",
  backdropFilter: "blur(24px) saturate(170%) contrast(94%)",
  WebkitBackdropFilter: "blur(24px) saturate(170%) contrast(94%)",
  boxShadow: "inset 0 1px 0 rgba(255,255,255,.88),inset 0 -1px 0 rgba(112,145,168,.18),0 18px 50px rgba(15,43,69,.20),0 0 0 1px rgba(255,255,255,.55)",
 };
 const mapPaths: Record<string, MapSkeletonVariant> = {
  "/network-simulation": "network-simulation",
  "/scada-data-cleaning": "scada-data-cleaning",
  "/health-risk-analysis": "health-risk-analysis",
  "/monitoring-place-optimization": "monitoring-place-optimization",
  "/hydraulic-simulation/burst-detection": "burst-detection",
  "/hydraulic-simulation/burst-location": "burst-location",
  "/hydraulic-simulation/burst-simulation": "burst-simulation",
  "/hydraulic-simulation/contaminant-simulation": "contaminant-simulation",
  "/hydraulic-simulation/dma-leak-detection": "dma-leak-detection",
  "/hydraulic-simulation/flushing-analysis": "flushing-analysis",
 };
 export const mapSkeletonForPath = (
  pathname: string,
 ): MapSkeletonVariant | undefined => mapPaths[pathname];
 export const pageTitleForPath = (pathname: string) => {
  const variant = mapSkeletonForPath(pathname);
  if (variant) return MAP_SKELETON_CONFIGS[variant].title;
  return ({
    "/system-admin": "系统管理",
    "/audit-logs": "审计日志",
    "/three-dimensional-scene": "三维场景",
  } as Record<string, string>)[pathname] ?? "页面";
 };
 export function MapRouteSkeleton({ pathname }: { pathname: string }) {
  const variant = mapSkeletonForPath(pathname);
  if (!variant) return null;
  return (
    <>
      <MapPanelSkeleton variant={variant} />
      {(variant === "network-simulation" || variant === "health-risk-analysis") && (
        <MapTimelineSkeleton />
      )}
    </>
  );
 }
 export function PageLoadingSkeleton({ pathname }: { pathname?: string }) {
  const currentPath = usePathname();
  const path = pathname ?? currentPath;
  if (path === "/three-dimensional-scene") {
    return (
      <Box
        role="status"
        aria-live="polite"
        aria-label="正在加载三维场景"
        sx={{ height: "100%", minHeight: 0, display: "grid", placeItems: "center", p: 2, boxSizing: "border-box", bgcolor: "#e2e8e9" }}
      >
        <Box sx={sceneLoadingSurface}>
          <Box sx={{ display: "flex", alignItems: "center", gap: 1.25 }}>
            <CircularProgress size={20} />
            <Typography sx={{ fontSize: 14, fontWeight: 600, color: "#0f172a" }}>
              正在准备三维场景
            </Typography>
          </Box>
          <Typography sx={{ mt: 1.5, fontSize: 12, lineHeight: 1.75, color: "#334155" }}>
            正在载入页面，随后将检查本地模型缓存。
          </Typography>
        </Box>
      </Box>
    );
  }
  if (mapSkeletonForPath(path)) {
    return (
      <Box sx={{ position: "relative", height: "100%", minHeight: 320, overflow: "hidden", bgcolor: "#f1f5f9" }}>
        <MapRouteSkeleton pathname={path} />
      </Box>
    );
  }
  const title = pageTitleForPath(path);
  return (
    <Box
      role="status"
      aria-live="polite"
      aria-label={`正在加载${title}`}
      sx={{ p: { xs: 2, md: 3 }, height: "100%", boxSizing: "border-box", bgcolor: "background.default" }}
    >
      <Typography sx={{ fontSize: 16, fontWeight: 600, mb: 3 }}>正在加载{title}</Typography>
      <Skeleton variant="rounded" height={40} sx={{ maxWidth: 480, mb: 3 }} />
      {[0, 1, 2, 3].map((row) => (
        <Skeleton key={row} variant="rounded" height={56} sx={{ mb: 1.5 }} />
      ))}
    </Box>
  );
 }
@@ -0,0 +1,50 @@
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { apiFetch } from "@/lib/apiFetch";
 import SCADADataPanel from "./SCADADataPanel";
 jest.mock("@/lib/apiFetch", () => ({ apiFetch: jest.fn() }));
 jest.mock("@refinedev/core", () => ({
  useGetIdentity: () => ({ data: { id: "test-user" } }),
  useNotification: () => ({ open: jest.fn() }),
 }));
 jest.mock("@mui/x-date-pickers", () => ({
  DateTimePicker: () => null,
  LocalizationProvider: ({ children }: { children: React.ReactNode }) => children,
 }));
 jest.mock("echarts-for-react", () => () => null);
 const response = (payload: unknown) =>
  ({ ok: true, json: async () => payload }) as Response;
 describe("SCADADataPanel requests", () => {
  beforeEach(() => {
    jest.mocked(apiFetch).mockImplementation(async (url) =>
      response(
        String(url).includes("/scada-devices")
          ? [
              { device_id: "S-1", device_type: "pressure", node_id: "J-1", link_id: null },
              { device_id: "S-2", device_type: "pressure", node_id: "J-2", link_id: null },
            ]
          : { series: [] },
      ),
    );
  });
  afterEach(() => jest.clearAllMocks());
  it("does not request history again when the same device IDs arrive in a new array", async () => {
    const { rerender } = render(<SCADADataPanel deviceIds={["S-1"]} />);
    await waitFor(() => expect(apiFetch).toHaveBeenCalledTimes(2));
    rerender(<SCADADataPanel deviceIds={["S-1"]} />);
    await waitFor(() => expect(apiFetch).toHaveBeenCalledTimes(2));
    rerender(<SCADADataPanel deviceIds={["S-1", "S-2"]} />);
    await waitFor(() => expect(apiFetch).toHaveBeenCalledTimes(4));
    expect(jest.mocked(apiFetch).mock.calls[3][1]?.body).toContain('"device_ids":["S-2"]');
    fireEvent.click(screen.getByRole("button", { name: "刷新" }));
    await waitFor(() => expect(apiFetch).toHaveBeenCalledTimes(6));
  });
 });
@@ -41,6 +41,19 @@ import { useNotification } from "@refinedev/core";
 import { api } from "@/lib/api";
 import { apiFetch } from "@/lib/apiFetch";
 import PanelEmptyState from "@components/olmap/common/PanelEmptyState";
 import {
  ElementHistoryResult,
  ElementHistorySeries,
  ElementHistoryTarget,
  fetchElementHistory,
  historySeriesKey,
  TimeSeriesPoint,
  toTimeSeriesPoints,
 } from "@/lib/elementHistory";
 import {
  FLOW_DISPLAY_UNIT,
  PRESSURE_DISPLAY_UNIT,
 } from "@/utils/units";
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -50,13 +63,6 @@ type IUser = {
  name?: string;
 };
 export interface TimeSeriesPoint {
  /** ISO8601 时间戳 */
  timestamp: string;
  /** 每个设备对应的值 */
  values: Record<string, number | null | undefined>;
 }
 export interface SCADADataPanelProps {
  /** 选中的设备 ID 列表 */
  deviceIds: string[];
@@ -90,164 +96,75 @@ const panelHeaderActionSx = {
  },
 };
-/**
+interface ScadaDeviceMetadata {
- * 从后端 API 获取 SCADA 数据
+  device_id: string;
- */
+  device_type: string;
  node_id: string | null;
  link_id: string | null;
 }
 /** 用设备元数据组装统一元素历史查询，一次返回监测与模拟数据。 */
 const fetchFromBackend = async (
  deviceIds: string[],
  range: { from: Date; to: Date },
-): Promise<TimeSeriesPoint[]> => {
+): Promise<ElementHistoryResult> => {
  if (deviceIds.length === 0) {
-    return [];
+    return { points: [], series: [] };
  }
-
+  const metadataResponse = await apiFetch(
-  const device_ids = deviceIds.join(",");
+    `${config.BACKEND_URL}/api/v1/scada-devices`,
  const start_time = dayjs(range.from).toISOString();
  const end_time = dayjs(range.to).toISOString();
  // 清洗数据接口
  const cleaningDataUrl = `${config.BACKEND_URL}/api/v1/timeseries/scada-readings/fields?device_ids=${device_ids}&field=cleaned_value&start_time=${start_time}&end_time=${end_time}`;
  // 原始数据
  const rawDataUrl = `${config.BACKEND_URL}/api/v1/timeseries/scada-readings/fields?device_ids=${device_ids}&field=monitored_value&start_time=${start_time}&end_time=${end_time}`;
  // 模拟数据接口
  const simulationDataUrl = `${config.BACKEND_URL}/api/v1/timeseries/views/scada-simulations?device_ids=${device_ids}&start_time=${start_time}&end_time=${end_time}`;
  try {
    // 优先查询清洗数据和模拟数据
    const [cleaningRes, simulationRes] = await Promise.all([
      apiFetch(cleaningDataUrl)
        .then((r) => (r.ok ? r.json() : null))
        .catch(() => null),
      apiFetch(simulationDataUrl)
        .then((r) => (r.ok ? r.json() : null))
        .catch(() => null),
    ]);
    const cleaningData = transformBackendData(cleaningRes, deviceIds);
    const simulationData = transformBackendData(simulationRes, deviceIds);
    // 如果清洗数据有数据，返回清洗和模拟数据
    if (cleaningData.length > 0) {
      return mergeTimeSeriesData(
        cleaningData,
        simulationData,
        deviceIds,
        "clean",
        "sim",
  );
-    } else {
+  if (!metadataResponse.ok) {
-      // 如果清洗数据没有数据，查询原始数据，返回模拟和原始数据
+    throw new Error(`SCADA 设备信息请求失败: HTTP ${metadataResponse.status}`);
-      const rawRes = await apiFetch(rawDataUrl)
+  }
-        .then((r) => (r.ok ? r.json() : null))
+  const allDevices = (await metadataResponse.json()) as ScadaDeviceMetadata[];
-        .catch(() => null);
+  const requested = new Set(deviceIds);
-      const rawData = transformBackendData(rawRes, deviceIds);
+  const devices = allDevices.filter((device) => requested.has(device.device_id));
-      return mergeTimeSeriesData(
+  const missing = deviceIds.filter(
-        simulationData,
+    (deviceId) => !devices.some((device) => device.device_id === deviceId),
        rawData,
        deviceIds,
        "sim",
        "raw",
  );
  if (missing.length > 0) {
    throw new Error(`SCADA 设备不存在: ${missing.join(", ")}`);
  }
-  } catch (error) {
+
-    console.error("[SCADADataPanel] 从后端获取数据失败:", error);
+  const targetsByElement = new Map<string, ElementHistoryTarget>();
-    throw error;
+  devices.forEach((device) => {
    const isFlow = ["pipe_flow", "flow"].includes(
      device.device_type.toLowerCase(),
    );
    const elementId = isFlow ? device.link_id : device.node_id;
    const elementType = isFlow ? "pipe" : "junction";
    if (!elementId) {
      throw new Error(`SCADA 设备 ${device.device_id} 未关联管网元素`);
    }
    const key = `${elementType}:${elementId}`;
    const target = targetsByElement.get(key) ?? {
      element_id: elementId,
      element_type: elementType,
      device_ids: [],
    };
-
+    target.device_ids!.push(device.device_id);
-/**
+    targetsByElement.set(key, target);
 * 转换后端数据格式
 * 根据实际后端返回的数据结构进行调整
 */
 const transformBackendData = (
  backendData: any,
  deviceIds: string[],
 ): TimeSeriesPoint[] => {
  // 处理后端返回的对象格式: { deviceId: [{time: "...", value: ...}] }
  if (backendData && !Array.isArray(backendData)) {
    // 检查是否是设备ID为键的对象格式
    const hasDeviceKeys = deviceIds.some((id) => id in backendData);
    if (hasDeviceKeys) {
      // 获取所有时间点的集合
      const timeMap = new Map<string, Record<string, number | null>>();
      deviceIds.forEach((deviceId) => {
        const deviceData = backendData[deviceId];
        if (Array.isArray(deviceData)) {
          deviceData.forEach((item: any) => {
            const timestamp = item.time || item.timestamp || item._time;
            if (timestamp) {
              if (!timeMap.has(timestamp)) {
                timeMap.set(timestamp, {});
              }
              const values = timeMap.get(timestamp)!;
              values[deviceId] =
                typeof item.value === "number" ? item.value : null;
            }
  });
-        }
+  const targets = Array.from(targetsByElement.values());
-      });
+  const result = await fetchElementHistory(
-
+    targets,
-      // 转换为 TimeSeriesPoint 数组并按时间排序
+    range,
-      const result = Array.from(timeMap.entries()).map(
+    "realtime_comparison",
        ([timestamp, values]) => ({
          timestamp,
          values,
        }),
  );
-
+  const expandedSeries = result.series.flatMap((series) => {
-      result.sort(
+    if (series.device_id || series.source.startsWith("scada_")) return [series];
-        (a, b) =>
+    const target = targets.find(
-          new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime(),
+      (item) =>
        item.element_id === series.element_id &&
        item.element_type === series.element_type,
    );
-
+    return (target?.device_ids ?? []).map((deviceId) => ({
-      return result;
+      ...series,
-    }
+      device_id: deviceId,
  }
  // 默认返回空数组
  console.warn("[SCADADataPanel] 未知的后端数据格式:", backendData);
  return [];
 };
 /**
 * 合并两个时间序列数据，为每个设备添加后缀
 */
 const mergeTimeSeriesData = (
  data1: TimeSeriesPoint[],
  data2: TimeSeriesPoint[],
  deviceIds: string[],
  suffix1: string,
  suffix2: string,
 ): TimeSeriesPoint[] => {
  const timeMap = new Map<string, Record<string, number | null>>();
  const processData = (data: TimeSeriesPoint[], suffix: string) => {
    data.forEach((point) => {
      if (!timeMap.has(point.timestamp)) {
        timeMap.set(point.timestamp, {});
      }
      const values = timeMap.get(point.timestamp)!;
      deviceIds.forEach((deviceId) => {
        const value = point.values[deviceId];
        if (value !== undefined) {
          values[`${deviceId}_${suffix}`] = value;
        }
      });
    });
  };
  processData(data1, suffix1);
  processData(data2, suffix2);
  const result = Array.from(timeMap.entries()).map(([timestamp, values]) => ({
    timestamp,
    values,
    }));
-
+  });
-  result.sort(
+  return { series: expandedSeries, points: toTimeSeriesPoints(expandedSeries) };
    (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime(),
  );
  return result;
 };
 const formatTimestamp = (timestamp: string) =>
@@ -337,83 +254,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
  const { open } = useNotification();
  const { data: user } = useGetIdentity<IUser>();
-  const customFetcher = useMemo(() => {
+  const customFetcher = fetchFromBackend;
    if (!showCleaning) {
      return fetchFromBackend;
    }
    return async (
      deviceIds: string[],
      range: { from: Date; to: Date },
    ): Promise<TimeSeriesPoint[]> => {
      const device_ids = deviceIds.join(",");
      const start_time = dayjs(range.from).toISOString();
      const end_time = dayjs(range.to).toISOString();
      // 清洗数据接口
      const cleaningDataUrl = `${config.BACKEND_URL}/api/v1/timeseries/scada-readings/fields?device_ids=${device_ids}&field=cleaned_value&start_time=${start_time}&end_time=${end_time}`;
      // 原始数据
      const rawDataUrl = `${config.BACKEND_URL}/api/v1/timeseries/scada-readings/fields?device_ids=${device_ids}&field=monitored_value&start_time=${start_time}&end_time=${end_time}`;
      // 模拟数据接口
      const simulationDataUrl = `${config.BACKEND_URL}/api/v1/timeseries/views/scada-simulations?device_ids=${device_ids}&start_time=${start_time}&end_time=${end_time}`;
      try {
        const [cleanRes, rawRes, simRes] = await Promise.all([
          apiFetch(cleaningDataUrl)
            .then((r) => (r.ok ? r.json() : null))
            .catch(() => null),
          apiFetch(rawDataUrl)
            .then((r) => (r.ok ? r.json() : null))
            .catch(() => null),
          apiFetch(simulationDataUrl)
            .then((r) => (r.ok ? r.json() : null))
            .catch(() => null),
        ]);
        const timeMap = new Map<string, Record<string, number | null>>();
        const processData = (data: any, suffix: string) => {
          if (!data) return;
          deviceIds.forEach((deviceId) => {
            const deviceData = data[deviceId];
            if (Array.isArray(deviceData)) {
              deviceData.forEach((item: any) => {
                const timestamp = item.time || item.timestamp || item._time;
                if (timestamp) {
                  if (!timeMap.has(timestamp)) {
                    timeMap.set(timestamp, {});
                  }
                  const values = timeMap.get(timestamp)!;
                  values[`${deviceId}_${suffix}`] =
                    typeof item.value === "number" ? item.value : null;
                }
              });
            }
          });
        };
        processData(cleanRes, "clean");
        processData(rawRes, "raw");
        processData(simRes, "sim");
        const result = Array.from(timeMap.entries()).map(
          ([timestamp, values]) => ({
            timestamp,
            values,
          }),
        );
        result.sort(
          (a, b) =>
            new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime(),
        );
        return result;
      } catch (error) {
        console.error("[SCADADataPanel] 获取三种数据失败:", error);
        throw error;
      }
    };
  }, [showCleaning]);
  const [from, setFrom] = useState<Dayjs>(() => {
    if (start_time) {
@@ -435,6 +276,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
  });
  const [activeTab, setActiveTab] = useState<PanelTab>(defaultTab);
  const [timeSeries, setTimeSeries] = useState<TimeSeriesPoint[]>([]);
  const [historySeries, setHistorySeries] = useState<ElementHistorySeries[]>([]);
  const [loadingState, setLoadingState] = useState<LoadingState>("idle");
  const [error, setError] = useState<string | null>(null);
  const [isExpanded, setIsExpanded] = useState<boolean>(true);
@@ -465,19 +307,44 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
  const normalizedRange = useMemo(() => ensureValidRange(from, to), [from, to]);
-  const hasDevices = deviceIds.length > 0;
+  // Parent map updates can pass a new array with identical IDs. Keep the
  // request dependency tied to the IDs themselves, not the array identity.
  const deviceIdsKey = JSON.stringify(deviceIds);
  const requestedDeviceIds = useMemo(
    () => JSON.parse(deviceIdsKey) as string[],
    [deviceIdsKey],
  );
  const hasDevices = requestedDeviceIds.length > 0;
  const hasData = timeSeries.length > 0;
  const deviceIdsKey = useMemo(() => deviceIds.join(","), [deviceIds]);
  const dataset = useMemo(
    () => buildDataset(timeSeries, deviceIds, fractionDigits, showCleaning),
    [timeSeries, deviceIds, fractionDigits, showCleaning],
  );
  const seriesByKey = useMemo(
    () =>
      new Map(historySeries.map((series) => [historySeriesKey(series), series])),
    [historySeries],
  );
  const hasFlowSeries = historySeries.some((item) => item.metric === "flow");
  const hasPressureSeries = historySeries.some(
    (item) => item.metric === "pressure",
  );
  const unitForKey = useCallback(
    (key: string) => seriesByKey.get(key)?.display_unit ?? "",
    [seriesByKey],
  );
  const axisForKey = useCallback(
    (key: string) =>
      seriesByKey.get(key)?.metric === "pressure" && hasFlowSeries ? 1 : 0,
    [hasFlowSeries, seriesByKey],
  );
  const handleFetch = useCallback(
    async (reason: string) => {
      if (!hasDevices) {
        setTimeSeries([]);
        setHistorySeries([]);
        setLoadingState("idle");
        setError(null);
        return;
@@ -487,18 +354,19 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
      setError(null);
      try {
        const { from: rangeFrom, to: rangeTo } = normalizedRange;
-        const result = await customFetcher(deviceIds, {
+        const result = await customFetcher(requestedDeviceIds, {
          from: rangeFrom.toDate(),
          to: rangeTo.toDate(),
        });
-        setTimeSeries(result);
+        setTimeSeries(result.points);
        setHistorySeries(result.series);
        setLoadingState("success");
      } catch (err) {
        setError(err instanceof Error ? err.message : "未知错误");
        setLoadingState("error");
      }
    },
-    [deviceIds, customFetcher, hasDevices, normalizedRange],
+    [requestedDeviceIds, customFetcher, hasDevices, normalizedRange],
  );
  // 处理数据清洗
@@ -583,8 +451,9 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
      handleFetch("device-change");
    } else {
      setTimeSeries([]);
      setHistorySeries([]);
    }
-  }, [deviceIdsKey, handleFetch, hasDevices]);
+  }, [handleFetch, hasDevices]);
  // 当设备数量变化时，调整数据源选择
  useEffect(() => {
@@ -610,7 +479,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
          return deviceIds.flatMap<GridColDef>((id) => [
            {
              field: `${id}_raw`,
-              headerName: `${id} (原始)`,
+              headerName: `${id} (原始) [${unitForKey(`${id}_raw`)}]`,
              minWidth: 140,
              flex: 1,
              valueFormatter: (value: any) => {
@@ -623,7 +492,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
            },
            {
              field: `${id}_clean`,
-              headerName: `${id} (清洗)`,
+              headerName: `${id} (清洗) [${unitForKey(`${id}_clean`)}]`,
              minWidth: 140,
              flex: 1,
              valueFormatter: (value: any) => {
@@ -636,7 +505,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
            },
            {
              field: `${id}_sim`,
-              headerName: `${id} (模拟)`,
+              headerName: `${id} (模拟) [${unitForKey(`${id}_sim`)}]`,
              minWidth: 140,
              flex: 1,
              valueFormatter: (value: any) => {
@@ -652,7 +521,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
          // 单一数据源模式：只显示选中的数据源
          return deviceIds.map<GridColDef>((id) => ({
            field: `${id}_${selectedSource}`,
-            headerName: id,
+            headerName: `${id} [${unitForKey(`${id}_${selectedSource}`)}]`,
            minWidth: 140,
            flex: 1,
            valueFormatter: (value: any) => {
@@ -688,7 +557,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
            if (hasData) {
              cols.push({
                field: fieldKey,
-                headerName: `${deviceName} (${name})`,
+                headerName: `${deviceName} (${name}) [${unitForKey(fieldKey)}]`,
                minWidth: 140,
                flex: 1,
                valueFormatter: (value: any) => {
@@ -708,7 +577,14 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
    })();
    return [...base, ...dynamic];
-  }, [deviceIds, fractionDigits, showCleaning, selectedSource, dataset]);
+  }, [
    deviceIds,
    fractionDigits,
    showCleaning,
    selectedSource,
    dataset,
    unitForKey,
  ]);
  const rows = useMemo(
    () =>
@@ -766,8 +642,9 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
        if (selectedSource === "all") {
          return deviceIds.flatMap((id, index) => [
            {
-              name: `${id} (原始)`,
+              name: `${id} (原始) [${unitForKey(`${id}_raw`)}]`,
              type: "line",
              yAxisIndex: axisForKey(`${id}_raw`),
              symbol: "none",
              connectNulls: true,
              sampling: "lttb",
@@ -775,8 +652,9 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
              data: dataset.map((item) => item[`${id}_raw`]),
            },
            {
-              name: `${id} (清洗)`,
+              name: `${id} (清洗) [${unitForKey(`${id}_clean`)}]`,
              type: "line",
              yAxisIndex: axisForKey(`${id}_clean`),
              symbol: "none",
              connectNulls: true,
              sampling: "lttb",
@@ -784,8 +662,9 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
              data: dataset.map((item) => item[`${id}_clean`]),
            },
            {
-              name: `${id} (模拟)`,
+              name: `${id} (模拟) [${unitForKey(`${id}_sim`)}]`,
              type: "line",
              yAxisIndex: axisForKey(`${id}_sim`),
              symbol: "none",
              connectNulls: true,
              sampling: "lttb",
@@ -795,8 +674,9 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
          ]);
        } else {
          return deviceIds.map((id, index) => ({
-            name: id,
+            name: `${id} [${unitForKey(`${id}_${selectedSource}`)}]`,
            type: "line",
            yAxisIndex: axisForKey(`${id}_${selectedSource}`),
            symbol: "none",
            connectNulls: true,
            sampling: "lttb",
@@ -820,8 +700,9 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
                    : suffix === "clean"
                    ? "清洗"
                    : "模拟"
-                })`,
+                }) [${unitForKey(key)}]`,
                type: "line",
                yAxisIndex: axisForKey(key),
                symbol: "none",
                connectNulls: true,
                sampling: "lttb",
@@ -908,10 +789,26 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
        boundaryGap: false,
        data: xData,
      },
-      yAxis: {
+      yAxis: [
        ...(hasFlowSeries
          ? [
              {
                type: "value",
                scale: true,
                name: `流量 (${FLOW_DISPLAY_UNIT})`,
              },
            ]
          : []),
        ...(hasPressureSeries
          ? [
              {
                type: "value",
                scale: true,
                name: `压力 (${PRESSURE_DISPLAY_UNIT})`,
              },
            ]
          : []),
      ],
      dataZoom: [
        {
          type: "inside",
@@ -1,5 +1,7 @@
 import React from "react";
 import { render, waitFor } from "@testing-library/react";
 import { apiFetch } from "@/lib/apiFetch";
-import { fetchHistoryData } from "./HistoryDataPanel";
+import HistoryDataPanel, { fetchHistoryData } from "./HistoryDataPanel";
 jest.mock("@/lib/apiFetch", () => ({
  apiFetch: jest.fn(),
@@ -9,6 +11,12 @@ jest.mock("@components/olmap/core/MapComponent", () => ({
  useData: () => null,
 }));
 jest.mock("@mui/x-date-pickers", () => ({
  DateTimePicker: () => null,
  LocalizationProvider: ({ children }: { children: React.ReactNode }) => children,
 }));
 jest.mock("echarts-for-react", () => () => null);
 const jsonResponse = (payload: unknown, status = 200) =>
  ({
    ok: status >= 200 && status < 300,
@@ -24,14 +32,8 @@ const range = {
 describe("fetchHistoryData", () => {
  beforeEach(() => jest.clearAllMocks());
-  it("queries SCADA readings once per selected network element", async () => {
+  it("queries all selected elements in one batch request", async () => {
-    jest.mocked(apiFetch).mockImplementation(async (input) => {
+    jest.mocked(apiFetch).mockResolvedValue(jsonResponse({ series: [] }));
      const url = new URL(String(input));
      const elementId = url.searchParams.get("element_id") ?? "";
      return jsonResponse({
        [elementId]: [{ time: range.from.toISOString(), value: 1 }],
      });
    });
    await fetchHistoryData(
      [
@@ -42,16 +44,20 @@ describe("fetchHistoryData", () => {
      "none",
    );
-    const elementIds = jest
+    expect(apiFetch).toHaveBeenCalledTimes(1);
-      .mocked(apiFetch)
+    const [url, init] = jest.mocked(apiFetch).mock.calls[0];
-      .mock.calls.map(([input]) =>
+    expect(String(url)).toContain("/element-history/query");
-        new URL(String(input)).searchParams.get("element_id"),
+    expect(JSON.parse(String(init?.body))).toMatchObject({
-      );
+      mode: "observed",
-    expect(elementIds).toEqual(["J-1", "J-2", "J-1", "J-2"]);
+      elements: [
        { element_id: "J-1", element_type: "junction" },
        { element_id: "J-2", element_type: "junction" },
      ],
    });
  });
  it("uses the analysis run ID for historical scheme simulation data", async () => {
-    jest.mocked(apiFetch).mockResolvedValue(jsonResponse({ "P-1": [] }));
+    jest.mocked(apiFetch).mockResolvedValue(jsonResponse({ series: [] }));
    await fetchHistoryData(
      [["P-1", "pipe"]],
@@ -60,15 +66,12 @@ describe("fetchHistoryData", () => {
      "99dd4142-368b-54cb-bfca-d59ee48f6298",
    );
-    const simulationUrls = jest
+    expect(apiFetch).toHaveBeenCalledTimes(1);
-      .mocked(apiFetch)
+    const [, init] = jest.mocked(apiFetch).mock.calls[0];
-      .mock.calls.map(([input]) => new URL(String(input)))
+    expect(JSON.parse(String(init?.body))).toMatchObject({
-      .filter((url) => url.pathname.endsWith("/element-simulations"));
+      mode: "analysis_comparison",
-
+      run_id: "99dd4142-368b-54cb-bfca-d59ee48f6298",
-    expect(simulationUrls).toHaveLength(2);
+    });
    expect(
      simulationUrls.map((url) => url.searchParams.get("run_id")),
    ).toEqual([null, "99dd4142-368b-54cb-bfca-d59ee48f6298"]);
  });
  it("rejects oversized element selections before issuing requests", async () => {
@@ -84,17 +87,8 @@ describe("fetchHistoryData", () => {
    expect(apiFetch).not.toHaveBeenCalled();
  });
-  it("limits concurrent SCADA requests for multi-element history", async () => {
+  it("does not create N+1 requests for multi-element history", async () => {
-    let activeRequests = 0;
+    jest.mocked(apiFetch).mockResolvedValue(jsonResponse({ series: [] }));
    let peakRequests = 0;
    jest.mocked(apiFetch).mockImplementation(async (input) => {
      activeRequests += 1;
      peakRequests = Math.max(peakRequests, activeRequests);
      await new Promise((resolve) => setTimeout(resolve, 0));
      activeRequests -= 1;
      const elementId = new URL(String(input)).searchParams.get("element_id") ?? "";
      return jsonResponse({ [elementId]: [] });
    });
    await fetchHistoryData(
      Array.from(
@@ -105,6 +99,42 @@ describe("fetchHistoryData", () => {
      "none",
    );
-    expect(peakRequests).toBeLessThanOrEqual(8);
+    expect(apiFetch).toHaveBeenCalledTimes(1);
  });
 });
 describe("HistoryDataPanel requests", () => {
  beforeEach(() => {
    jest.clearAllMocks();
    jest.mocked(apiFetch).mockResolvedValue(jsonResponse({ series: [] }));
  });
  afterEach(() => jest.clearAllMocks());
  it("does not reload unchanged elements when its parent rerenders", async () => {
    const props = { type: "none" as const, onClose: jest.fn() };
    const { rerender } = render(
      React.createElement(HistoryDataPanel, {
        ...props,
        featureInfos: [["J-1", "junction"]],
      }),
    );
    await waitFor(() => expect(apiFetch).toHaveBeenCalledTimes(1));
    rerender(
      React.createElement(HistoryDataPanel, {
        ...props,
        featureInfos: [["J-1", "junction"]],
      }),
    );
    await waitFor(() => expect(apiFetch).toHaveBeenCalledTimes(1));
    rerender(
      React.createElement(HistoryDataPanel, {
        ...props,
        featureInfos: [["J-2", "junction"]],
      }),
    );
    await waitFor(() => expect(apiFetch).toHaveBeenCalledTimes(2));
  });
 });
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
jiang	d013f34493	fix(scene): resume chunk downloads after proxy interruptions Generic Container CI/CD / test-build-publish (push) Successful in 1m4s Details Frontend CI/CD v2 / build-test-publish-and-deploy (push) Successful in 1m4s Details Whole-file loading still failed after adding caching because the public proxy interrupted large GLB response bodies. Download validated 1 MiB ranges, retry transient failures up to three attempts, and persist completed chunks so reloads resume from their last boundary. Add regression cases observed failing before the change for interrupted downloads, cross-reload resume, and temporary HTTP failures. Verify range integrity, full-cache reuse, permanent errors, and storage fallback.	2026-10-16 18:37:24 +08:00
jiang	4a522bf42a	feat(frontend): cache 3D assets and restore loading feedback Generic Container CI/CD / test-build-publish (push) Successful in 1m11s Details Frontend CI/CD v2 / build-test-publish-and-deploy (push) Successful in 1m11s Details Persist versioned models and validated network metadata in IndexedDB. Show scene download progress and recoverable errors with the existing frosted material. Connect existing skeletons to pending navigation and route boundaries while preserving the map. Previously only dynamic imports showed fallbacks, and rejected model promises prevented retries. Verified: 32 focused unit tests; 4 navigation and scene browser checks; 7 cache browser checks including invalid-metadata recovery; isolated production build and type checks.	2026-10-16 18:13:04 +08:00
jiang	c4a90be0d3	fix(scada): avoid history refetch on map zoom Generic Container CI/CD / test-build-publish (push) Successful in 1m22s Details Frontend CI/CD v2 / build-test-publish-and-deploy (push) Successful in 1m23s Details	2026-09-25 17:22:42 +08:00
jiang	1b275206a9	fix(chat): collapse long activity commands Generic Container CI/CD / test-build-publish (push) Successful in 1m32s Details Frontend CI/CD v2 / build-test-publish-and-deploy (push) Successful in 1m32s Details	2026-09-25 16:23:00 +08:00
jiang	cdf97afbc4	fix(chat): preserve style defaults for omitted agent overrides Generic Container CI/CD / test-build-publish (push) Successful in 1m6s Details Frontend CI/CD v2 / build-test-publish-and-deploy (push) Successful in 1m6s Details	2026-09-25 16:02:10 +08:00
jiang	ca10d8f384	fix(chat): clarify approval mode and verify permission prompts Generic Container CI/CD / test-build-publish (push) Successful in 1m29s Details Frontend CI/CD v2 / build-test-publish-and-deploy (push) Successful in 1m29s Details	2026-09-25 15:44:46 +08:00
jiang	1622eaa2da	fix(3d): restore complete SCADA scene context Generic Container CI/CD / test-build-publish (push) Successful in 1m5s Details Frontend CI/CD v2 / build-test-publish-and-deploy (push) Successful in 1m5s Details The scene previously returned early when realtime rows were absent and selected map-tier assets for network mode, hiding SCADA markers and station interiors and floors. Use SCADA timestamps as valid frames, render node-aligned monitor markers, and pin the full network context in the manifest regression test. Keep the timeline close action inside its drag header.	2026-09-14 16:57:41 +08:00
jiang	a9b25b94d8	feat(3d): refine scene controls and camera views Generic Container CI/CD / test-build-publish (push) Successful in 2m20s Details Frontend CI/CD v2 / build-test-publish-and-deploy (push) Successful in 2m20s Details Keep the control panel geometry stable when toggling building context, and use accessible switch controls to prevent focus-driven movement. Add browser coverage for camera framing, opacity, responsive layout, and the default 6x pipe scale.	2026-09-14 15:41:44 +08:00
jiang	69ad145e75	test(e2e): add frontend smoke coverage	2026-09-14 12:57:35 +08:00
jiang	331ea3f094	fix(3d): stabilize timeline dragging	2026-09-14 12:57:26 +08:00
jiang	08ddb4453d	feat(history): align units and history data	2026-09-14 12:30:57 +08:00
jiang	35b6819459	feat(3d): integrate ZJB scene with project context Generic Container CI/CD / test-build-publish (push) Successful in 17s Details Frontend CI/CD v2 / build-test-publish-and-deploy (push) Successful in 18s Details	2026-09-11 18:49:55 +08:00