@lingbi/studio 0.8.2 → 0.9.0

package/index.js

@@ -29202,7 +29202,8 @@ const MINIMUM_FRUSTUM_HEIGHT = 1e-4;
 const MINIMUM_NEAR = 0.01;
 const MINIMUM_ZOOM = 0.01;
 const MAXIMUM_ZOOM = 100;
-const CLIP_MARGIN_RATIO = 0.05;
+const CLIP_MARGIN_RATIO = 0.5;
+const VIEW_MARGIN_RATIO = 1.3;
 const WHEEL_ZOOM_SPEED = 15e-4;
 var CameraNavigationMode = /* @__PURE__ */ ((CameraNavigationMode2) => {
   CameraNavigationMode2[CameraNavigationMode2["Rotate"] = 0] = "Rotate";
@@ -29716,7 +29717,7 @@ class CameraController {
     );
     const frustumHeight = this.getFullFrustumHeight(safeFrustumHeight);
     const depthRange = maximumForward - minimumForward;
-    const clipMargin = Math.max(MINIMUM_CLIP_MARGIN, depthRange * CLIP_MARGIN_RATIO);
+    const clipMargin = this.createClipMargin(depthRange, frustumHeight);
     const distance = Math.max(
       this.initialCameraDistance,
       -minimumForward + clipMargin * 2,
@@ -29921,7 +29922,10 @@ class CameraController {
       maximumDepth = Math.max(maximumDepth, depth);
     }
     const depthRange = maximumDepth - minimumDepth;
-    const clipMargin = Math.max(MINIMUM_CLIP_MARGIN, depthRange * CLIP_MARGIN_RATIO);
+    const clipMargin = this.createClipMargin(
+      depthRange,
+      (this.camera.top - this.camera.bottom) / this.camera.zoom
+    );
     const minimumVisibleDepth = MINIMUM_NEAR + clipMargin;
     if (minimumDepth >= minimumVisibleDepth) {
       return;
@@ -29944,7 +29948,10 @@ class CameraController {
       maximumDepth = Math.max(maximumDepth, depth);
     }
     const depthRange = maximumDepth - minimumDepth;
-    const clipMargin = Math.max(MINIMUM_CLIP_MARGIN, depthRange * CLIP_MARGIN_RATIO);
+    const clipMargin = this.createClipMargin(
+      depthRange,
+      (this.camera.top - this.camera.bottom) / this.camera.zoom
+    );
     this.camera.near = Math.max(MINIMUM_NEAR, minimumDepth - clipMargin);
     this.camera.far = Math.max(
       this.camera.near + MINIMUM_CLIP_RANGE,
@@ -29984,6 +29991,19 @@ class CameraController {
   getSafeAspect() {
     return this.viewportWidth / this.getSafeViewportHeight();
   }
+  /**
+   * Orthographic depth is linear, so generous margins cost nothing. The
+   * model ratio covers scene depth, and the viewport ratio keeps the ground
+   * grid inside the clip window as the camera zooms out.
+   */
+  createClipMargin(depthRange, frustumHeight) {
+    const aspect2 = this.getSafeAspect();
+    const halfDiagonal = frustumHeight / 2 * Math.sqrt(1 + aspect2 * aspect2);
+    return Math.max(
+      MINIMUM_CLIP_MARGIN,
+      Math.max(depthRange * CLIP_MARGIN_RATIO, halfDiagonal * VIEW_MARGIN_RATIO)
+    );
+  }
   getSafeViewportHeight() {
     const maximumInset = Math.max(0, this.viewportHeight - 1);
     const effectiveInset = Math.min(this.viewportBottomInset, maximumInset);
@@ -30545,6 +30565,148 @@ class CanvasController {
     }
   }
 }
+const CENTER_LINE_COLOR = 10132122;
+const CENTER_LINE_EXTRA_WIDTH = "2.0";
+const FADE_END_RATIO = 1.4;
+const FADE_START_RATIO = 0.8;
+const GRID_DIVISIONS = 24;
+const GRID_LINE_COLOR = 9474192;
+const GRID_LINE_OPACITY = 1;
+const GRID_LINE_WIDTH_PIXELS = 2;
+const GRID_SEPARATION_RATIO = 2e-3;
+const MINIMUM_ALPHA = "0.01";
+const QUAD_COVERAGE = 2.1;
+const VIEW_RATIO = 0.6;
+const VERTEX_SHADER = (
+  /* glsl */
+  `
+varying vec2 vUv;
+
+void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`
+);
+const FRAGMENT_SHADER = (
+  /* glsl */
+  `
+uniform vec3 uCenterColor;
+uniform float uDivisionCount;
+uniform float uFadeEnd;
+uniform float uFadeStart;
+uniform vec3 uGridColor;
+uniform float uGridSize;
+uniform float uLineOpacity;
+uniform float uLineWidth;
+varying vec2 vUv;
+
+void main() {
+    vec2 coord = (vUv - 0.5) * uGridSize;
+    float cellSize = uGridSize / uDivisionCount;
+    vec2 cellCoord = coord / cellSize;
+    vec2 gridDistance = abs(fract(cellCoord - 0.5) - 0.5) / (fwidth(cellCoord) * uLineWidth);
+    float gridLine = 1.0 - min(min(gridDistance.x, gridDistance.y), 1.0);
+    vec2 centerDistance = abs(coord) / (fwidth(coord) * uLineWidth * ${CENTER_LINE_EXTRA_WIDTH});
+    float centerLine = 1.0 - min(min(centerDistance.x, centerDistance.y), 1.0);
+    float lineStrength = max(gridLine, centerLine);
+    vec3 lineColor = mix(uGridColor, uCenterColor, centerLine);
+    float radial = length(coord);
+    float alpha = lineStrength * (1.0 - smoothstep(uFadeStart, uFadeEnd, radial)) * uLineOpacity;
+
+    if (alpha < ${MINIMUM_ALPHA}) {
+        discard;
+    }
+
+    gl_FragColor = vec4(lineColor, alpha);
+}
+`
+);
+class GroundGrid {
+  material;
+  mesh;
+  anchorCenterX = 0;
+  anchorCenterY = 0;
+  anchorMinZ = 0;
+  anchorSpan = 1;
+  gridUniforms = {
+    uCenterColor: { value: new Color(CENTER_LINE_COLOR) },
+    uDivisionCount: { value: GRID_DIVISIONS },
+    uFadeEnd: { value: FADE_END_RATIO },
+    uFadeStart: { value: FADE_START_RATIO },
+    uGridColor: { value: new Color(GRID_LINE_COLOR) },
+    uGridSize: { value: 1 },
+    uLineOpacity: { value: GRID_LINE_OPACITY },
+    uLineWidth: { value: 1 / GRID_LINE_WIDTH_PIXELS }
+  };
+  constructor() {
+    this.material = new ShaderMaterial({
+      depthWrite: false,
+      fragmentShader: FRAGMENT_SHADER,
+      side: DoubleSide,
+      transparent: true,
+      uniforms: this.gridUniforms,
+      vertexShader: VERTEX_SHADER
+    });
+    this.mesh = new Mesh(new PlaneGeometry(1, 1), this.material);
+    this.mesh.visible = false;
+  }
+  getHelper() {
+    return this.mesh;
+  }
+  attach(scene) {
+    scene.add(this.mesh);
+  }
+  updateFromBounds(bounds) {
+    this.anchorCenterX = (bounds.min.x + bounds.max.x) / 2;
+    this.anchorCenterY = (bounds.min.y + bounds.max.y) / 2;
+    this.anchorMinZ = bounds.min.z;
+    this.anchorSpan = Math.max(bounds.max.x - bounds.min.x, bounds.max.y - bounds.min.y);
+    this.applyLayout(this.anchorSpan * FADE_END_RATIO);
+    this.mesh.visible = true;
+  }
+  /**
+   * Grows the grid when the viewport zooms out beyond the model-anchored
+   * radius, so the ground keeps covering most of the visible area instead
+   * of shrinking into a patch around the model.
+   */
+  updateForViewport(halfDiagonal) {
+    if (!this.mesh.visible) {
+      return;
+    }
+    const viewportRadius = halfDiagonal * VIEW_RATIO;
+    const fadeRadius = Math.max(this.anchorSpan * FADE_END_RATIO, viewportRadius);
+    this.applyLayout(fadeRadius);
+  }
+  applyLayout(fadeRadius) {
+    const size = fadeRadius * QUAD_COVERAGE;
+    this.gridUniforms.uGridSize.value = size;
+    this.gridUniforms.uFadeStart.value = fadeRadius * (FADE_START_RATIO / FADE_END_RATIO);
+    this.gridUniforms.uFadeEnd.value = fadeRadius;
+    this.mesh.scale.set(size, size, 1);
+    this.mesh.position.set(
+      this.anchorCenterX,
+      this.anchorCenterY,
+      this.anchorMinZ - this.anchorSpan * GRID_SEPARATION_RATIO
+    );
+  }
+  /**
+   * Keeps the drawn line width at the intended CSS pixel size on high-DPI
+   * outputs: fwidth-based lines live in framebuffer pixels, so the inverse
+   * width must scale with the device pixel ratio.
+   */
+  setPixelRatio(pixelRatio) {
+    this.gridUniforms.uLineWidth.value = 1 / (GRID_LINE_WIDTH_PIXELS * pixelRatio);
+  }
+  hide() {
+    this.mesh.visible = false;
+  }
+  dispose() {
+    this.mesh.removeFromParent();
+    this.mesh.geometry.dispose();
+    this.material.dispose();
+  }
+}
 class ConsoleImportPerformanceLogSink {
   categoryByStageName = {
     "boolean-source-snapshot": "scene",
@@ -30840,6 +31002,51 @@ class ImportPerformanceTracer {
     return trace;
   }
 }
+const COMMITTED_PERCENT = 100;
+const ROLE_SPAN_TOTAL = 0.96;
+class ImportProgressTracker {
+  listener;
+  percent = 0;
+  rolePositions = /* @__PURE__ */ new Map();
+  roleSpans;
+  constructor(roles, listener) {
+    this.listener = listener;
+    const roleSpans = /* @__PURE__ */ new Map();
+    const spanPerRole = ROLE_SPAN_TOTAL / roles.length;
+    for (const [roleIndex, role] of roles.entries()) {
+      roleSpans.set(role, { span: spanPerRole, start: spanPerRole * roleIndex });
+    }
+    this.roleSpans = roleSpans;
+  }
+  completeRole(role) {
+    this.setRolePosition(role, 1);
+  }
+  completeScene() {
+    this.setPercent(COMMITTED_PERCENT);
+  }
+  getPercent() {
+    return this.percent;
+  }
+  setRolePosition(role, position) {
+    const roleSpan = this.roleSpans.get(role);
+    if (roleSpan === void 0) {
+      return;
+    }
+    const nextPosition = Math.max(this.rolePositions.get(role) ?? 0, Math.min(1, position));
+    this.rolePositions.set(role, nextPosition);
+    this.setPercent(
+      Math.floor((roleSpan.start + roleSpan.span * nextPosition) * COMMITTED_PERCENT)
+    );
+  }
+  setPercent(nextPercent) {
+    const percent = Math.max(this.percent, Math.min(COMMITTED_PERCENT, nextPercent));
+    if (percent === this.percent) {
+      return;
+    }
+    this.percent = percent;
+    this.listener?.(this);
+  }
+}
 const LOCAL_RESOURCE_BASE_URL = "https://renderer-local.invalid/";
 class ObjResourceList {
   mtlUrls;
@@ -32022,12 +32229,15 @@ class TextureLoadMonitor {
   encounteredError = false;
   finishedScheduling = false;
   manager;
+  onTextureSettled;
   originalTextureLoader;
   pendingRequests = 0;
+  scheduledTextureCount = 0;
   settled = false;
   textures = /* @__PURE__ */ new Set();
-  constructor(manager, creator) {
+  constructor(manager, creator, onTextureSettled) {
     this.manager = manager;
+    this.onTextureSettled = onTextureSettled;
     this.completionPromise = new Promise(
       this.captureCompletionResolver.bind(this)
     );
@@ -32038,6 +32248,9 @@ class TextureLoadMonitor {
     this.finishedScheduling = true;
     this.resolveIfSettled();
   }
+  getScheduledTextureCount() {
+    return this.scheduledTextureCount;
+  }
   getTextures() {
     return [...this.textures];
   }
@@ -32065,14 +32278,17 @@ class TextureLoadMonitor {
   handleTextureError() {
     this.encounteredError = true;
     this.pendingRequests -= 1;
+    this.onTextureSettled?.();
     this.resolveIfSettled();
   }
   handleTextureLoad() {
     this.pendingRequests -= 1;
+    this.onTextureSettled?.();
     this.resolveIfSettled();
   }
   loadTexture(url, mapping) {
     this.pendingRequests += 1;
+    this.scheduledTextureCount += 1;
     try {
       const texture = this.originalTextureLoader(
         url,
@@ -32108,15 +32324,16 @@ class ObjLoader {
   constructor(parser = new OBJLoader()) {
     this.parser = parser;
   }
-  async loadResources(resources, signal, performanceTrace, role) {
+  async loadResources(resources, signal, performanceTrace, role, progress) {
     return this.loadInternal(
       resources,
       signal,
       performanceTrace ?? ImportPerformanceTrace.createDisabled(),
-      role ?? "stone"
+      role ?? "stone",
+      progress
     );
   }
-  async loadInternal(resources, signal, performanceTrace, role) {
+  async loadInternal(resources, signal, performanceTrace, role, progress) {
     if (this.hasEmptyRequiredUrl(resources)) {
       return {
         code: ObjImportFailureCode$1.EmptySource,
@@ -32130,6 +32347,7 @@ class ObjLoader {
       const objFetchStage = performanceTrace.startStage("obj-fetch", role);
       const objSource = await this.loadText(resources.objUrl, signal);
       performanceTrace.endStage(objFetchStage, "success");
+      progress?.markModelFetched();
       this.assertNotCancelled(signal);
       const materialScanStage = performanceTrace.startStage("obj-material-scan", role);
       const materialReferences = this.getMaterialLibraryReferences(objSource);
@@ -32149,9 +32367,11 @@ class ObjLoader {
           materialContext = await this.loadMaterialContext(
             materialUrls,
             resources,
-            signal
+            signal,
+            progress
           );
           performanceTrace.endStage(materialLoadStage, "success");
+          progress?.markMaterialsResolved(this.getScheduledTextureCount(materialContext));
         } catch {
           performanceTrace.endStage(
             materialLoadStage,
@@ -32175,6 +32395,7 @@ class ObjLoader {
         resources.upAxis
       );
       performanceTrace.endStage(modelCreateStage, "success");
+      progress?.markModelParsed();
       if (!this.hasRenderablePrimitive(group) || !model.hasFiniteBounds()) {
         model.dispose();
         return {
@@ -32335,6 +32556,13 @@ class ObjLoader {
     }
     return [...textures];
   }
+  getScheduledTextureCount(context) {
+    let scheduledTextureCount = 0;
+    for (const monitor of context.monitors) {
+      scheduledTextureCount += monitor.getScheduledTextureCount();
+    }
+    return scheduledTextureCount;
+  }
   getObjectTree(root) {
     const objectTree = [root];
     for (const object of objectTree) {
@@ -32451,11 +32679,11 @@ class ObjLoader {
   isPoints(object) {
     return object instanceof Points;
   }
-  async loadMaterialContext(mtlUrls, resources, signal) {
+  async loadMaterialContext(mtlUrls, resources, signal, progress) {
     const libraries = [];
     try {
       for (const mtlUrl of mtlUrls) {
-        libraries.push(await this.loadMaterialLibrary(mtlUrl, resources, signal));
+        libraries.push(await this.loadMaterialLibrary(mtlUrl, resources, signal, progress));
       }
       return this.createMaterialContext(libraries);
     } catch (error2) {
@@ -32463,7 +32691,7 @@ class ObjLoader {
       throw error2;
     }
   }
-  async loadMaterialLibrary(mtlUrl, resources, signal) {
+  async loadMaterialLibrary(mtlUrl, resources, signal, progress) {
     const materialSource = await this.loadText(mtlUrl, signal);
     this.assertNotCancelled(signal);
     const materialBaseUrl = this.getResourceDirectoryUrl(resources, mtlUrl);
@@ -32474,7 +32702,11 @@ class ObjLoader {
       side: DoubleSide
     });
     const creator = materialLoader.parse(materialSource, materialBaseUrl);
-    const monitor = new TextureLoadMonitor(manager, creator);
+    const monitor = new TextureLoadMonitor(
+      manager,
+      creator,
+      progress === void 0 ? void 0 : progress.markTextureSettled.bind(progress)
+    );
     try {
       const pbrMaterialReferences = this.parsePbrMaterialReferences(materialSource);
       this.assertMaterialTextures(resources, materialSource, materialBaseUrl, creator);
@@ -33450,7 +33682,7 @@ class PlyLoader {
     this.parser = parser;
     this.textureLoader = textureLoader;
   }
-  async load(resources, signal) {
+  async load(resources, signal, progress) {
     if (signal.aborted) {
       return {
         code: ObjImportFailureCode$1.Cancelled,
@@ -33461,6 +33693,7 @@ class PlyLoader {
     if (!(source instanceof ArrayBuffer)) {
       return source;
     }
+    progress?.markModelFetched();
     let geometry;
     let metadata;
     try {
@@ -33486,7 +33719,14 @@ class PlyLoader {
         success: false
       };
     }
-    const modelResult = metadata.hasFaces ? await this.createMeshModel(geometry, metadata.textureReference, resources, signal) : this.createPointsModel(geometry, resources);
+    progress?.markModelParsed();
+    const modelResult = metadata.hasFaces ? await this.createMeshModel(
+      geometry,
+      metadata.textureReference,
+      resources,
+      signal,
+      progress
+    ) : this.createPointsModel(geometry, resources);
     if ("success" in modelResult) {
       return modelResult;
     }
@@ -33514,13 +33754,14 @@ class PlyLoader {
       vertexColors: geometry.hasAttribute("color")
     });
   }
-  async createMeshModel(geometry, textureReference, resources, signal) {
+  async createMeshModel(geometry, textureReference, resources, signal, progress) {
     if (!geometry.hasAttribute("normal")) {
       geometry.computeVertexNormals();
     }
     const warnings = [];
     let texture;
     if (textureReference !== void 0 && geometry.hasAttribute("uv")) {
+      progress?.markMaterialsResolved(1);
       const textureResult = await this.textureLoader.load(
         resources.resolveTextureUrl(textureReference),
         signal
@@ -33532,6 +33773,7 @@ class PlyLoader {
           success: false
         };
       }
+      progress?.markTextureSettled();
       if (textureResult.outcome === "succeeded") {
         texture = textureResult.texture;
       } else {
@@ -33617,26 +33859,73 @@ class PlyLoader {
     return value;
   }
 }
+const OBJ_MODEL_LOAD_PROGRESS_PROFILE = {
+  fetchedPosition: 0.2,
+  materialsPosition: 0.3,
+  parsedPosition: 0.95,
+  textureCeiling: 0.99
+};
+const PLY_MODEL_LOAD_PROGRESS_PROFILE = {
+  fetchedPosition: 0.4,
+  materialsPosition: 0.85,
+  parsedPosition: 0.85,
+  textureCeiling: 0.99
+};
+class RoleImportProgressReporter {
+  profile;
+  role;
+  textureSettled = 0;
+  textureTotal;
+  tracker;
+  constructor(tracker, role, profile) {
+    this.profile = profile;
+    this.role = role;
+    this.tracker = tracker;
+  }
+  markMaterialsResolved(textureTotal) {
+    this.textureTotal = textureTotal;
+    this.tracker.setRolePosition(this.role, this.profile.materialsPosition);
+    this.reportTexturePosition();
+  }
+  markModelFetched() {
+    this.tracker.setRolePosition(this.role, this.profile.fetchedPosition);
+  }
+  markModelParsed() {
+    this.tracker.setRolePosition(this.role, this.profile.parsedPosition);
+  }
+  markTextureSettled() {
+    this.textureSettled += 1;
+    this.reportTexturePosition();
+  }
+  reportTexturePosition() {
+    const textureTotal = this.textureTotal;
+    if (textureTotal === void 0 || textureTotal <= 0 || this.textureSettled === 0) {
+      return;
+    }
+    const textureSpan = this.profile.textureCeiling - this.profile.parsedPosition;
+    const settledShare = Math.min(this.textureSettled, textureTotal) / textureTotal;
+    this.tracker.setRolePosition(
+      this.role,
+      this.profile.parsedPosition + textureSpan * settledShare
+    );
+  }
+}
 class SimulationSnapshotFactory {
-  create(stone, base) {
+  constructor(scheduler) {
+    this.scheduler = scheduler;
+  }
+  scheduler;
+  // Allocation granularity, not a per-task limit: tasks copy until their time budget expires.
+  static CHUNK_BYTES = 4 * 1024 * 1024;
+  static ATTRIBUTE_CHUNK_BYTES = 256 * 1024;
+  async create(stone, base) {
     const started = performance.now();
     const stoneRoot = this.root(stone);
     const baseRoot = this.root(base);
     stoneRoot.updateMatrixWorld(true);
     if (baseRoot !== stoneRoot) baseRoot.updateMatrixWorld(true);
-    const stoneInput = this.collect(stone);
-    const baseInput = this.collect(base);
-    const bounds = new Box3();
-    const point = new Vector3();
-    for (let index = 0; index < stoneInput.positions.length; index += 3) {
-      bounds.expandByPoint(point.fromArray(stoneInput.positions, index));
-    }
-    const origin = bounds.getCenter(new Vector3()).toArray();
-    for (const input of [stoneInput, baseInput]) {
-      for (let index = 0; index < input.positions.length; index++) {
-        input.positions[index] = Number(input.positions[index]) - Number(origin[index % 3]);
-      }
-    }
+    const stoneInput = await this.collect(stone);
+    const baseInput = await this.collect(base);
     return {
       stone: stoneInput,
       base: baseInput,
@@ -33648,54 +33937,126 @@ class SimulationSnapshotFactory {
     while (root.parent !== null) root = root.parent;
     return root;
   }
-  collect(root) {
-    const positions = [];
-    const indices = [];
-    const point = new Vector3();
-    root.traverse((object) => {
-      if (!(object instanceof Mesh)) return;
+  async collect(root) {
+    const result = [];
+    const objects = [root];
+    for (const object of objects) {
+      const pause = this.scheduler.checkpoint();
+      if (pause !== void 0) await pause;
+      objects.push(...object.children);
+      if (!(object instanceof Mesh)) continue;
       const mesh = object;
-      if (!mesh.geometry.hasAttribute("position")) {
-        throw new Error("The model has no triangular position attribute.");
-      }
       const position = mesh.geometry.getAttribute("position");
-      if (position.itemSize < 3) {
+      if (!mesh.geometry.hasAttribute("position") || position.itemSize < 3) {
         throw new Error("The model has no triangular position attribute.");
       }
-      const determinant = mesh.matrixWorld.determinant();
-      if (!Number.isFinite(determinant) || determinant === 0) {
-        throw new Error("The model transform is singular or nonfinite.");
-      }
-      const offset = positions.length / 3;
-      for (let index = 0; index < position.count; index++) {
-        point.set(position.getX(index), position.getY(index), position.getZ(index)).applyMatrix4(mesh.matrixWorld);
-        if (!point.toArray().every(Number.isFinite)) {
-          throw new Error("The model contains nonfinite positions.");
-        }
-        positions.push(point.x, point.y, point.z);
-      }
-      const sourceIndex = mesh.geometry.index;
-      const count = sourceIndex?.count ?? position.count;
-      if (count === 0 || count % 3 !== 0) {
-        throw new Error("The model has incomplete triangles.");
-      }
-      for (let index = 0; index < count; index += 3) {
-        const a = sourceIndex?.getX(index) ?? index;
-        const b = sourceIndex?.getX(index + 1) ?? index + 1;
-        const c = sourceIndex?.getX(index + 2) ?? index + 2;
-        if ([a, b, c].some(
-          (value) => !Number.isSafeInteger(value) || value < 0 || value >= position.count
-        )) {
-          throw new Error("The model contains an invalid triangle index.");
-        }
-        indices.push(
-          offset + a,
-          offset + (determinant < 0 ? c : b),
-          offset + (determinant < 0 ? b : c)
-        );
+      const matrixWorld = mesh.matrixWorld.toArray();
+      if (!matrixWorld.every(Number.isFinite)) {
+        throw new Error("The model transform is nonfinite.");
       }
+      const positions = await this.copyPositions(position);
+      const index = mesh.geometry.index;
+      const indices = index === null ? null : await this.copyIndices(index);
+      result.push({ positions, indices, vertexCount: position.count, matrixWorld });
+    }
+    return result;
+  }
+  async copyPositions(attribute) {
+    const result = [];
+    const source = attribute.array;
+    const packed = !("isInterleavedBufferAttribute" in attribute) && !attribute.normalized && attribute.itemSize === 3 && (source instanceof Float32Array || source instanceof Float64Array);
+    const vertexChunk = Math.floor(
+      (packed ? SimulationSnapshotFactory.CHUNK_BYTES : SimulationSnapshotFactory.ATTRIBUTE_CHUNK_BYTES) / 24
+    );
+    for (let start = 0; start < attribute.count; start += vertexChunk) {
+      const pause = this.scheduler.checkpoint();
+      if (pause !== void 0) await pause;
+      const end = Math.min(attribute.count, start + vertexChunk);
+      if (packed) {
+        result.push(source.slice(start * 3, end * 3));
+      } else {
+        const values = new Float64Array((end - start) * 3);
+        for (let index = start; index < end; index++) {
+          const offset = (index - start) * 3;
+          values[offset] = attribute.getX(index);
+          values[offset + 1] = attribute.getY(index);
+          values[offset + 2] = attribute.getZ(index);
+        }
+        result.push(values);
+      }
+    }
+    return result;
+  }
+  async copyIndices(attribute) {
+    const result = [];
+    const source = attribute.array;
+    const packed = attribute.itemSize === 1 && !attribute.normalized && (source instanceof Uint16Array || source instanceof Uint32Array);
+    const indexChunk = (packed ? SimulationSnapshotFactory.CHUNK_BYTES : SimulationSnapshotFactory.ATTRIBUTE_CHUNK_BYTES) / 8;
+    for (let start = 0; start < attribute.count; start += indexChunk) {
+      const pause = this.scheduler.checkpoint();
+      if (pause !== void 0) await pause;
+      const end = Math.min(attribute.count, start + indexChunk);
+      if (packed) result.push(source.slice(start, end));
+      else {
+        const values = new Float64Array(end - start);
+        for (let index = start; index < end; index++) {
+          values[index - start] = attribute.getX(index);
+        }
+        result.push(values);
+      }
+    }
+    return result;
+  }
+}
+class SimulationTaskScheduler {
+  constructor(signal, started) {
+    this.signal = signal;
+    this.started = started;
+  }
+  signal;
+  started;
+  sliceStarted = performance.now();
+  async waitForPaint() {
+    await this.wait(true);
+    this.checkActive();
+    this.sliceStarted = performance.now();
+  }
+  checkpoint() {
+    this.checkActive();
+    if (performance.now() - this.sliceStarted < 4) return void 0;
+    return this.yieldTask();
+  }
+  async yieldTask() {
+    await this.wait(false);
+    this.checkActive();
+    this.sliceStarted = performance.now();
+  }
+  checkActive() {
+    this.signal.throwIfAborted();
+    if (performance.now() - this.started >= 3e4) {
+      throw new Error("Simulation timed out during snapshot capture.");
+    }
+  }
+  wait(paint) {
+    this.checkActive();
+    return new Promise((resolve) => {
+      let frame;
+      let task;
+      const finish = () => {
+        if (frame !== void 0) cancelAnimationFrame(frame);
+        clearTimeout(task);
+        this.signal.removeEventListener("abort", finish);
+        resolve();
+      };
+      this.signal.addEventListener("abort", finish, { once: true });
+      if (paint) {
+        frame = requestAnimationFrame(() => {
+          clearTimeout(task);
+          task = setTimeout(finish, 0);
+        });
+      }
+      task = setTimeout(finish, paint ? 100 : 0);
     });
-    return { positions: Float64Array.from(positions), indices: Uint32Array.from(indices) };
   }
 }
 class StabilityMessages {
@@ -33703,7 +34064,7 @@ class StabilityMessages {
     if (!this.record(value) || !this.token(value["token"]) || !this.record(value["input"]))
       return void 0;
     const input = value["input"];
-    if (!this.mesh(input["stone"]) || !this.mesh(input["base"]) || !this.nonnegative(input["captureMilliseconds"]))
+    if (!this.role(input["stone"]) || !this.role(input["base"]) || !this.nonnegative(input["captureMilliseconds"]))
       return void 0;
     return value;
   }
@@ -33736,8 +34097,20 @@ class StabilityMessages {
     }
     return value["outcome"] !== "supported" || Number(value["margin"]) > 1e-6 && Number(value["residual"]) <= 1e-7 && Number(value["contactCount"]) > 0;
   }
+  role(value) {
+    return this.array(value) && value.every((mesh) => this.mesh(mesh));
+  }
+  array(value) {
+    return Array.isArray(value);
+  }
   mesh(value) {
-    return this.record(value) && value["positions"] instanceof Float64Array && value["indices"] instanceof Uint32Array;
+    return this.record(value) && Array.isArray(value["positions"]) && value["positions"].every(
+      (chunk) => chunk instanceof Float32Array || chunk instanceof Float64Array
+    ) && (value["indices"] === null || Array.isArray(value["indices"]) && value["indices"].every(
+      (chunk) => chunk instanceof Uint16Array || chunk instanceof Uint32Array || chunk instanceof Float64Array
+    )) && this.nonnegative(value["vertexCount"]) && Number.isSafeInteger(value["vertexCount"]) && Array.isArray(value["matrixWorld"]) && value["matrixWorld"].length === 16 && value["matrixWorld"].every(
+      (entry) => typeof entry === "number" && Number.isFinite(entry)
+    );
   }
   record(value) {
     return typeof value === "object" && value !== null;
@@ -33753,7 +34126,7 @@ class StabilityWorkerFactory {
   create() {
     return new Worker(new URL(
       /* @vite-ignore */
-      "" + new URL("assets/StabilityWorkerEntry-CXCNaUyw.js", import.meta.url).href,
+      "" + new URL("assets/StabilityWorkerEntry-L0_8iZmQ.js", import.meta.url).href,
       import.meta.url
     ), {
       type: "module"
@@ -33802,12 +34175,16 @@ class StabilityWorkerClient {
               this.fail("Simulation Worker message could not be read.");
           });
         }
-        worker.postMessage({ token, input }, [
-          input.stone.positions.buffer,
-          input.stone.indices.buffer,
-          input.base.positions.buffer,
-          input.base.indices.buffer
-        ]);
+        const transfer = [];
+        for (const role of [input.stone, input.base]) {
+          for (const mesh of role) {
+            for (const chunk of mesh.positions) transfer.push(chunk.buffer);
+            if (mesh.indices !== null) {
+              for (const chunk of mesh.indices) transfer.push(chunk.buffer);
+            }
+          }
+        }
+        worker.postMessage({ token, input }, transfer);
       } catch {
         this.fail("Simulation Worker could not start.");
       }
@@ -35826,6 +36203,7 @@ class Renderer {
   contextLost = false;
   booleanOperationInProgress = false;
   simulationInProgress = false;
+  simulationCapture;
   simulationToken = 0;
   simulationWorker = new StabilityWorkerClient();
   booleanOperationWorkerClient;
@@ -35837,6 +36215,7 @@ class Renderer {
   fillLight;
   frameHandle;
   gizmoController;
+  groundGrid;
   hemisphereLight;
   pendingFirstFramePerformance;
   importPerformanceTracer = new ImportPerformanceTracer();
@@ -35874,6 +36253,7 @@ class Renderer {
     let contextRestoreListenerAttached = false;
     let controller;
     let gizmoController;
+    let groundGrid;
     let resizeObserver;
     let viewCube;
     this.canvas = canvas;
@@ -35906,6 +36286,9 @@ class Renderer {
       );
       this.gizmoController = gizmoController;
       this.scene.add(gizmoController.getHelper());
+      groundGrid = new GroundGrid();
+      this.groundGrid = groundGrid;
+      groundGrid.attach(this.scene);
       canvasController = new CanvasController(
         canvas,
         viewCube,
@@ -35959,9 +36342,13 @@ class Renderer {
                     viewCube?.dispose();
                   } finally {
                     try {
-                      controller?.dispose();
+                      groundGrid?.dispose();
                     } finally {
-                      renderer.dispose();
+                      try {
+                        controller?.dispose();
+                      } finally {
+                        renderer.dispose();
+                      }
                     }
                   }
                 }
@@ -36008,25 +36395,29 @@ class Renderer {
                 this.viewCube.dispose();
               } finally {
                 try {
-                  this.releaseActiveModels();
+                  this.groundGrid.dispose();
                 } finally {
                   try {
-                    this.resizeObserver.disconnect();
+                    this.releaseActiveModels();
                   } finally {
                     try {
-                      this.canvas.removeEventListener(
-                        "webglcontextrestored",
-                        this.contextRestoreListener
-                      );
+                      this.resizeObserver.disconnect();
                     } finally {
                       try {
                         this.canvas.removeEventListener(
-                          "webglcontextlost",
-                          this.contextLossListener
+                          "webglcontextrestored",
+                          this.contextRestoreListener
                         );
                       } finally {
-                        this.renderer.forceContextLoss();
-                        this.renderer.dispose();
+                        try {
+                          this.canvas.removeEventListener(
+                            "webglcontextlost",
+                            this.contextLossListener
+                          );
+                        } finally {
+                          this.renderer.forceContextLoss();
+                          this.renderer.dispose();
+                        }
                       }
                     }
                   }
@@ -36064,7 +36455,10 @@ class Renderer {
         stone: new ModelResourceList(source.stone.fileUrls, source.stone.upAxis)
       };
       return this.completeSceneImportFromResources(
-        this.startImportSession(performanceTrace),
+        this.startImportSession(
+          performanceTrace,
+          this.createImportProgressTracker(resources)
+        ),
         resources
       );
     } catch {
@@ -36106,7 +36500,10 @@ class Renderer {
         stone: new ModelResourceList(source.stone.files, source.stone.upAxis)
       };
       return this.completeSceneImportFromResources(
-        this.startImportSession(performanceTrace),
+        this.startImportSession(
+          performanceTrace,
+          this.createImportProgressTracker(resources)
+        ),
         resources
       );
     } catch {
@@ -36153,6 +36550,7 @@ class Renderer {
         available: this.activeStoneModel !== void 0,
         contextLost: this.contextLost,
         importInProgress: this.activeImport !== void 0,
+        ...this.activeImport === void 0 ? {} : { importProgress: this.activeImport.progressTracker.getPercent() },
         interactionInProgress,
         revision: this.sceneRevision,
         resourceRevision: this.sceneResourceRevision
@@ -36359,6 +36757,8 @@ class Renderer {
     const started = performance.now();
     const token = ++this.simulationToken;
     const revision = this.sceneRevision;
+    const capture = new AbortController();
+    this.simulationCapture = capture;
     this.simulationInProgress = true;
     try {
       this.gizmoController.end();
@@ -36387,7 +36787,13 @@ class Renderer {
         console.info("[stone-stability]", response2);
         return response2;
       }
-      const input = new SimulationSnapshotFactory().create(stone.object, base.object);
+      const scheduler = new SimulationTaskScheduler(capture.signal, started);
+      await scheduler.waitForPaint();
+      const input = await new SimulationSnapshotFactory(scheduler).create(
+        stone.object,
+        base.object
+      );
+      capture.signal.throwIfAborted();
       const response = await this.simulationWorker.run(input, started);
       if (token !== this.simulationToken || revision !== this.sceneRevision || !this.isDualModelSceneReady()) {
         return { status: "cancelled" };
@@ -36395,11 +36801,13 @@ class Renderer {
       console.info("[stone-stability]", response);
       return response;
     } catch (error2) {
+      if (capture.signal.aborted) return { status: "cancelled" };
       const reason = error2 instanceof Error ? error2.message : "Simulation failed.";
       console.info("[stone-stability]", { status: "failed", reason });
       return { status: "failed", reason };
     } finally {
       if (token === this.simulationToken) {
+        this.simulationCapture = void 0;
         this.simulationInProgress = false;
         this.notifyWorkspaceState();
       }
@@ -36407,6 +36815,8 @@ class Renderer {
   }
   cancelSimulation() {
     const wasActive = this.simulationInProgress;
+    this.simulationCapture?.abort();
+    this.simulationCapture = void 0;
     this.simulationToken++;
     this.simulationInProgress = false;
     this.simulationWorker.cancel();
@@ -36603,12 +37013,22 @@ class Renderer {
     let result;
     try {
       try {
+        const progress = new RoleImportProgressReporter(
+          session.progressTracker,
+          role,
+          source.resources instanceof ObjResourceList ? OBJ_MODEL_LOAD_PROGRESS_PROFILE : PLY_MODEL_LOAD_PROGRESS_PROFILE
+        );
         result = source.resources instanceof ObjResourceList ? await this.modelLoader.loadResources(
           source.resources,
           session.controller.signal,
           session.performanceTrace,
-          role
-        ) : await this.plyLoader.load(source.resources, session.controller.signal);
+          role,
+          progress
+        ) : await this.plyLoader.load(
+          source.resources,
+          session.controller.signal,
+          progress
+        );
       } catch {
         return this.completeUnexpectedImportFailure(session);
       }
@@ -36653,6 +37073,7 @@ class Renderer {
         };
       }
       loadStatus = "success";
+      session.progressTracker.completeRole(role);
       return {
         model: result.model,
         warnings: result.warnings ?? []
@@ -36740,6 +37161,7 @@ class Renderer {
       this.booleanEditSessionActive = false;
       this.activeBooleanOperationSessionToken = void 0;
       this.abortEditingState();
+      this.refreshGroundGrid([stone, candidate]);
     } catch {
       this.activeBaseModel = previousBase;
       (candidate.transformRoot ?? candidate.object).removeFromParent();
@@ -37056,6 +37478,7 @@ class Renderer {
       ...this.collectPresentModels(this.activeStoneModel, this.activeBaseModel)
     ];
     this.gizmoController.setActiveScene({ base: void 0, stone: void 0 });
+    this.groundGrid.hide();
     this.transformedSceneBoundsDirty = false;
     this.activeStoneModel = void 0;
     this.activeBaseModel = void 0;
@@ -37104,6 +37527,18 @@ class Renderer {
     this.gizmoController.setModelVisibility("stone", this.modelVisibility.stoneVisible);
     this.gizmoController.setModelVisibility("base", this.modelVisibility.baseVisible);
   }
+  /**
+   * Retargets the ground grid from the present models. The grid anchors to
+   * models that are merely hidden as well, so toggling base visibility never
+   * moves the ground plane; only a committed paired scene shows it.
+   */
+  refreshGroundGrid(models) {
+    if (models.length < 2) {
+      this.groundGrid.hide();
+      return;
+    }
+    this.groundGrid.updateFromBounds(this.mergeBounds(models));
+  }
   applyModelVisibility() {
     const stoneRoot = this.activeStoneModel?.transformRoot ?? this.activeStoneModel?.object;
     const baseRoot = this.activeBaseModel?.transformRoot ?? this.activeBaseModel?.object;
@@ -37152,6 +37587,7 @@ class Renderer {
   }
   renderScene(includeViewCube = true) {
     this.syncTransformedSceneBounds();
+    this.syncGroundGridForCamera();
     this.gizmoController.updateForRender();
     if (includeViewCube) {
       this.viewCube.update(this.camera);
@@ -37161,6 +37597,17 @@ class Renderer {
       this.renderViewCube();
     }
   }
+  /**
+   * Keeps the ground grid covering most of the visible area as the camera
+   * zooms. Runs per rendered frame; updating only touches uniforms and the
+   * mesh transform, so it stays allocation-free.
+   */
+  syncGroundGridForCamera() {
+    const frustumHeight = (this.camera.top - this.camera.bottom) / this.camera.zoom;
+    const frustumWidth = (this.camera.right - this.camera.left) / (this.camera.top - this.camera.bottom) * frustumHeight;
+    const halfDiagonal = Math.sqrt(frustumHeight * frustumHeight + frustumWidth * frustumWidth) / 2;
+    this.groundGrid.updateForViewport(halfDiagonal);
+  }
   renderViewCube() {
     const viewport = this.viewCube.getViewport();
     const previousAutoClear = this.renderer.autoClear;
@@ -37199,6 +37646,9 @@ class Renderer {
       }
     }
     this.controller.syncTransformedBounds(this.mergeBounds(models));
+    this.refreshGroundGrid(
+      this.collectPresentModels(this.activeStoneModel, this.activeBaseModel)
+    );
   }
   /**
    * Atomically replaces the committed active scene. New model references are
@@ -37273,6 +37723,7 @@ class Renderer {
     };
     this.gizmoController.setActiveScene(activeScene);
     this.applyGizmoVisibility();
+    this.refreshGroundGrid(candidateModels);
     this.sceneRevision += 1;
     this.sceneResourceRevision = this.sceneRevision;
     this.pendingFirstFramePerformance = {
@@ -37282,6 +37733,7 @@ class Renderer {
     };
     session.performanceTrace.markStage("import-promise-resolved", "scene");
     session.performanceTrace.endStage(sceneCommitStage, "success");
+    session.progressTracker.completeScene();
     this.finishImportSession(session);
     this.releasePair(previousStone, previousBase);
     this.requestRender();
@@ -37405,6 +37857,13 @@ class Renderer {
       this.notifyWorkspaceState();
     }
   }
+  handleImportProgressChanged(_source) {
+    this.notifyWorkspaceState();
+  }
+  createImportProgressTracker(resources) {
+    const roles = resources.base === void 0 ? ["stone"] : ["stone", "base"];
+    return new ImportProgressTracker(roles, this.handleImportProgressChanged.bind(this));
+  }
   notifyWorkspaceState() {
     this.workspaceStateListener?.(this.getWorkspaceState());
   }
@@ -37453,6 +37912,7 @@ class Renderer {
     this.renderer.setSize(width, height, false);
     this.controller.resize(width, height);
     this.viewCube.resize(width, height, pixelRatio);
+    this.groundGrid.setPixelRatio(pixelRatio);
     this.requestRender();
   }
   invalidateActiveImport(code) {
@@ -37498,7 +37958,7 @@ class Renderer {
       this.notifyWorkspaceState();
     }
   }
-  startImportSession(performanceTrace) {
+  startImportSession(performanceTrace, progressTracker) {
     this.cancelSimulation();
     this.cancelBooleanOperation();
     this.cancelPendingFirstFramePerformance("cancelled");
@@ -37511,7 +37971,8 @@ class Renderer {
     const session = {
       controller: new AbortController(),
       invalidationCode: void 0,
-      performanceTrace
+      performanceTrace,
+      progressTracker
     };
     performanceTrace.markStage("import-session-start", "scene");
     this.activeImport = session;
@@ -37752,6 +38213,8 @@ class ArchiveImportWorkerMessageParser {
         return this.parseEntryStart(record, taskId);
       case "error":
         return typeof record["message"] === "string" ? { message: record["message"], taskId, type: "error" } : void 0;
+      case "progress":
+        return this.parseProgress(record, taskId);
       default:
         return void 0;
     }
@@ -37769,6 +38232,17 @@ class ArchiveImportWorkerMessageParser {
   isPositiveSafeInteger(value) {
     return typeof value === "number" && Number.isSafeInteger(value) && value > 0;
   }
+  isNonNegativeSafeInteger(value) {
+    return typeof value === "number" && Number.isSafeInteger(value) && value >= 0;
+  }
+  parseProgress(record, taskId) {
+    const bytesLoaded = record["bytesLoaded"];
+    const bytesTotal = record["bytesTotal"];
+    if (!this.isNonNegativeSafeInteger(bytesLoaded) || !this.isNonNegativeSafeInteger(bytesTotal)) {
+      return void 0;
+    }
+    return { bytesLoaded, bytesTotal, taskId, type: "progress" };
+  }
   isRecord(value) {
     return typeof value === "object" && value !== null && !Array.isArray(value);
   }
@@ -37828,7 +38302,7 @@ class BrowserArchiveImportWorkerEndpoint {
   constructor() {
     this.worker = new Worker(new URL(
       /* @vite-ignore */
-      "" + new URL("assets/ArchiveImportWorkerEntry-Dh4RZo22.js", import.meta.url).href,
+      "" + new URL("assets/ArchiveImportWorkerEntry-wkxjE56k.js", import.meta.url).href,
       import.meta.url
     ), {
       type: "module"
@@ -37868,9 +38342,11 @@ class ArchiveImportWorkerClient {
   jobValidator = new ArchiveImportJobValidator();
   lastStartedTaskId = 0;
   messageParser = new ArchiveImportWorkerMessageParser();
+  onProgress;
   workerFactory;
-  constructor(workerFactory = new BrowserArchiveImportWorkerFactory()) {
+  constructor(workerFactory = new BrowserArchiveImportWorkerFactory(), onProgress) {
     this.workerFactory = workerFactory;
+    this.onProgress = onProgress;
   }
   cancel(taskId) {
     const task = this.activeTask;
@@ -37945,6 +38421,10 @@ class ArchiveImportWorkerClient {
               outbound.message
             )
           );
+          return;
+        case "progress":
+          this.handleProgress(outbound);
+          return;
       }
     } catch (error2) {
       this.rejectTask(task, this.toError(error2));
@@ -38014,6 +38494,10 @@ class ArchiveImportWorkerClient {
       type: "acknowledge-chunk"
     });
   }
+  handleProgress(message) {
+    const percent = message.bytesTotal <= 0 ? 0 : Math.min(100, Math.floor(message.bytesLoaded / message.bytesTotal * 100));
+    this.onProgress?.(percent);
+  }
   rejectTask(task, error2) {
     if (this.activeTask !== task) {
       return;
@@ -38195,6 +38679,26 @@ var ImportPerformanceMode = /* @__PURE__ */ ((ImportPerformanceMode2) => {
   ImportPerformanceMode2["Verbose"] = "verbose";
   return ImportPerformanceMode2;
 })(ImportPerformanceMode || {});
+const ARCHIVE_SEGMENT_PERCENT = 20;
+class ImportProgressCompositor {
+  compose(input) {
+    const archiveProgress = this.clampPercent(input.archiveProgress);
+    const rendererProgress = this.clampPercent(input.rendererProgress);
+    if (archiveProgress === void 0) {
+      return rendererProgress;
+    }
+    if (rendererProgress === void 0) {
+      return Math.floor(archiveProgress / 100 * ARCHIVE_SEGMENT_PERCENT);
+    }
+    return ARCHIVE_SEGMENT_PERCENT + Math.floor(rendererProgress / 100 * (100 - ARCHIVE_SEGMENT_PERCENT));
+  }
+  clampPercent(percent) {
+    if (percent === void 0) {
+      return void 0;
+    }
+    return Math.max(0, Math.min(100, percent));
+  }
+}
 class DownloadSaveSink {
   aborted = false;
   blobChunks = [];
@@ -39914,7 +40418,7 @@ var StoneBasePoseMode = /* @__PURE__ */ ((StoneBasePoseMode2) => {
   StoneBasePoseMode2["PreservePose"] = "preserve-pose";
   return StoneBasePoseMode2;
 })(StoneBasePoseMode || {});
-const studioWorkspaceStyles = ".lingbi-studio-workspace {\n    position: relative;\n    display: block;\n    width: 100%;\n    height: 100%;\n    min-width: 0;\n    min-height: 0;\n    overflow: hidden;\n}\n\n.lingbi-studio-viewport {\n    width: 100%;\n    height: 100%;\n    min-width: 0;\n    min-height: 0;\n    overflow: hidden;\n}\n\n.lingbi-studio-viewport > canvas {\n    display: block;\n    width: 100%;\n    height: 100%;\n    min-width: 0;\n    min-height: 0;\n    overflow: hidden;\n    background: #3d3f41;\n}\n\n.lingbi-studio-boolean-operation-overlay {\n    position: absolute;\n    z-index: 3;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 12px;\n    background: rgba(17, 17, 17, 0.32);\n    color: #ffffff;\n    cursor: wait;\n}\n\n.lingbi-studio-boolean-operation-overlay[hidden] {\n    display: none;\n}\n\n.lingbi-studio-boolean-edit-confirmation {\n    position: absolute;\n    z-index: 4;\n    top: 50%;\n    left: 50%;\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 12px;\n    width: min(420px, calc(100% - 32px));\n    padding: 24px;\n    border-radius: 8px;\n    background: #ffffff;\n    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);\n    transform: translate(-50%, -50%);\n    box-sizing: border-box;\n}\n\n.lingbi-studio-boolean-edit-confirmation[hidden] {\n    display: none;\n}\n\n.lingbi-studio-boolean-edit-confirmation-text {\n    grid-column: 1 / -1;\n    margin: 0 0 8px;\n    color: #171717;\n    font-size: 16px;\n    font-weight: 500;\n    line-height: 24px;\n    text-align: center;\n}\n\n.lingbi-studio-boolean-edit-confirmation-cancel,\n.lingbi-studio-boolean-edit-confirmation-continue {\n    height: 40px;\n    border: 1px solid #d9d9d9;\n    border-radius: 4px;\n    font: inherit;\n    font-size: 16px;\n    font-weight: 500;\n    line-height: 24px;\n    cursor: pointer;\n}\n\n.lingbi-studio-boolean-edit-confirmation-cancel {\n    background: #ffffff;\n    color: #171717;\n}\n\n.lingbi-studio-boolean-edit-confirmation-continue {\n    border-color: #f27c38;\n    background: #f27c38;\n    color: #ffffff;\n}\n\n.lingbi-studio-boolean-operation-spinner {\n    width: 32px;\n    height: 32px;\n    border: 3px solid rgba(255, 105, 0, 0.28);\n    border-top-color: #ff6900;\n    border-radius: 50%;\n    animation: lingbi-studio-boolean-operation-spin 0.8s linear infinite;\n    box-sizing: border-box;\n}\n\n.lingbi-studio-boolean-operation-status {\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    letter-spacing: 0;\n}\n\n.lingbi-studio-bottom-toolbar {\n    position: absolute;\n    z-index: 1;\n    bottom: 36px;\n    left: 50%;\n    display: grid;\n    align-items: center;\n    grid-template-columns: minmax(0, 1fr);\n    width: min(120px, calc(100% - 32px));\n    height: 64px;\n    padding: 8px 12px;\n    transform: translateX(-50%);\n    box-sizing: border-box;\n    border-radius: 8px;\n    background: #f4f4f4;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);\n}\n\n.lingbi-studio-bottom-toolbar.has-edit-control {\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n    width: min(480px, calc(100% - 32px));\n}\n\n.lingbi-studio-bottom-toolbar.has-inventory-control {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    width: min(240px, calc(100% - 32px));\n}\n\n.lingbi-studio-bottom-toolbar.has-edit-control.has-inventory-control {\n    grid-template-columns: repeat(5, minmax(0, 1fr));\n    width: min(600px, calc(100% - 32px));\n}\n\n.lingbi-studio-bottom-toolbar.has-model-control.has-inventory-control {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    width: min(360px, calc(100% - 32px));\n}\n\n.lingbi-studio-bottom-toolbar.has-model-control.has-edit-control {\n    grid-template-columns: repeat(5, minmax(0, 1fr));\n    width: min(600px, calc(100% - 32px));\n}\n\n.lingbi-studio-bottom-toolbar.has-model-control.has-edit-control.has-inventory-control {\n    grid-template-columns: repeat(6, minmax(0, 1fr));\n    width: min(720px, calc(100% - 32px));\n}\n\n.lingbi-studio-model-visibility {\n    position: absolute;\n    z-index: 1;\n    bottom: 108px;\n    left: 50%;\n    display: grid;\n    gap: 8px;\n    width: 144px;\n    padding: 12px;\n    border-radius: 8px;\n    background: #f4f4f4;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);\n    transform: translateX(-240px);\n    box-sizing: border-box;\n}\n\n.lingbi-studio-model-visibility[hidden] {\n    display: none;\n}\n\n.lingbi-studio-model-visibility-title {\n    color: #171717;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 20px;\n}\n\n.lingbi-studio-model-visibility-row {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) auto;\n    gap: 8px;\n    align-items: center;\n    color: #171717;\n    font-size: 14px;\n    line-height: 20px;\n}\n\n.lingbi-studio-model-visibility-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    appearance: none;\n    width: 20px;\n    height: 28px;\n    padding: 0;\n    border: 0;\n    border-radius: 0;\n    background: transparent;\n    box-shadow: none;\n    color: #171717;\n    cursor: not-allowed;\n    font: inherit;\n    line-height: 0;\n    outline: none;\n    box-sizing: border-box;\n}\n\n.lingbi-studio-model-visibility-icon {\n    display: block;\n    width: 18px;\n    height: 18px;\n    flex: 0 0 auto;\n    pointer-events: none;\n}\n\n.lingbi-studio-model-visibility-button:not(:disabled) {\n    cursor: pointer;\n}\n\n.lingbi-studio-model-visibility-button:disabled {\n    color: #8c8c8c;\n}\n\n.lingbi-studio-model-button.is-active,\n.lingbi-studio-model-button.is-active:disabled {\n    color: #ff6900;\n    font-weight: 600;\n}\n\n.lingbi-studio-boolean-button,\n.lingbi-studio-simulation-button,\n.lingbi-studio-download-button,\n.lingbi-studio-inventory-button,\n.lingbi-studio-edit-button,\n.lingbi-studio-model-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    min-width: 0;\n    height: 48px;\n    padding: 0 8px;\n    border: 0;\n    border-radius: 4px;\n    background: transparent;\n    color: #171717;\n    cursor: not-allowed;\n    font: inherit;\n    font-size: 18px;\n    font-weight: 500;\n    line-height: 24px;\n    letter-spacing: 0;\n    opacity: 1;\n    box-sizing: border-box;\n    white-space: nowrap;\n    transition:\n        background-color 140ms ease,\n        color 140ms ease;\n}\n\n.lingbi-studio-operation-button-wrapper {\n    display: block;\n    width: 100%;\n    min-width: 0;\n    height: 48px;\n    box-sizing: border-box;\n}\n\n.lingbi-studio-operation-button-wrapper > button:disabled {\n    pointer-events: none;\n}\n\n.lingbi-studio-boolean-button[hidden],\n.lingbi-studio-simulation-button[hidden],\n.lingbi-studio-download-button[hidden],\n.lingbi-studio-inventory-button[hidden],\n.lingbi-studio-edit-button[hidden],\n.lingbi-studio-model-button[hidden] {\n    display: none;\n}\n\n.lingbi-studio-boolean-button:not(:disabled),\n.lingbi-studio-simulation-button:not(:disabled),\n.lingbi-studio-download-button:not(:disabled),\n.lingbi-studio-inventory-button:not(:disabled),\n.lingbi-studio-edit-button:not(:disabled),\n.lingbi-studio-model-button:not(:disabled) {\n    cursor: pointer;\n}\n\n.lingbi-studio-boolean-button:disabled,\n.lingbi-studio-simulation-button:disabled,\n.lingbi-studio-download-button:disabled,\n.lingbi-studio-inventory-button:disabled,\n.lingbi-studio-edit-button:disabled,\n.lingbi-studio-model-button:disabled,\n.lingbi-studio-model-visibility-button:disabled {\n    background: transparent;\n    color: #8c8c8c;\n    opacity: 1;\n}\n\n.lingbi-studio-edit-button.is-active,\n.lingbi-studio-edit-button.is-active:disabled,\n.lingbi-studio-model-button.is-active,\n.lingbi-studio-model-button.is-active:disabled {\n    color: #ff6900;\n    font-weight: 600;\n}\n\n.lingbi-studio-download-status {\n    position: absolute;\n    z-index: 2;\n    top: 24px;\n    left: 50%;\n    max-width: calc(100% - 24px);\n    padding: 6px 10px;\n    border: 1px solid #f4b5b0;\n    border-radius: 4px;\n    background: #fff1f0;\n    color: #b42318;\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 20px;\n    text-align: center;\n    transform: translateX(-50%);\n    box-sizing: border-box;\n}\n\n.lingbi-studio-download-status[hidden] {\n    display: none;\n}\n\n.lingbi-studio-download-success {\n    position: absolute;\n    z-index: 2;\n    top: 24px;\n    left: 50%;\n    max-width: calc(100% - 24px);\n    padding: 8px 16px;\n    border: 1px solid #86d39a;\n    border-radius: 6px;\n    background: #f0fff4;\n    color: #176b32;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    text-align: center;\n    transform: translateX(-50%);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);\n    box-sizing: border-box;\n}\n\n.lingbi-studio-download-success[hidden] {\n    display: none;\n}\n\n.lingbi-studio-edit-status {\n    position: absolute;\n    z-index: 2;\n    bottom: 112px;\n    left: 50%;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    max-width: calc(100% - 24px);\n    padding: 10px 14px;\n    border: 0;\n    border-radius: 8px;\n    background: #e9e9e9;\n    color: #171717;\n    transform: translateX(-50%);\n    box-sizing: border-box;\n}\n\n.lingbi-studio-edit-status[hidden] {\n    display: none;\n}\n\n.lingbi-studio-edit-status-text {\n    display: inline-block;\n    min-width: 0;\n    font-size: 20px;\n    line-height: 28px;\n    letter-spacing: 0;\n}\n\n.lingbi-studio-exit-button {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    height: 40px;\n    padding: 0 18px;\n    border: 1px solid transparent;\n    border-radius: 8px;\n    background: #f27c38;\n    color: #ffffff;\n    cursor: pointer;\n    font: inherit;\n    font-size: 18px;\n    font-weight: 600;\n    line-height: 24px;\n    letter-spacing: 0;\n    transition:\n        background-color 140ms ease,\n        color 140ms ease;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .lingbi-studio-boolean-button:not(:disabled):hover,\n    .lingbi-studio-simulation-button:not(:disabled):hover,\n    .lingbi-studio-download-button:not(:disabled):hover,\n    .lingbi-studio-inventory-button:not(:disabled):hover,\n    .lingbi-studio-edit-button:not(:disabled):hover,\n    .lingbi-studio-model-button:not(:disabled):hover {\n        background: #e8e8e8;\n    }\n\n    .lingbi-studio-simulation-button:not(:disabled):hover,\n    .lingbi-studio-download-button:not(:disabled):hover,\n    .lingbi-studio-inventory-button:not(:disabled):hover,\n    .lingbi-studio-edit-button:not(:disabled):hover,\n    .lingbi-studio-model-button:not(:disabled):hover {\n        color: #f06400;\n    }\n\n    .lingbi-studio-model-visibility-button:not(:disabled):hover {\n        background: transparent;\n    }\n\n    .lingbi-studio-exit-button:hover {\n        background: #ff8a1f;\n    }\n\n    .lingbi-studio-boolean-edit-confirmation-cancel:hover {\n        background: #f5f5f5;\n    }\n\n    .lingbi-studio-boolean-edit-confirmation-continue:hover {\n        background: #ff8a1f;\n    }\n}\n\n.lingbi-studio-boolean-button:not(:disabled):active,\n.lingbi-studio-download-button:not(:disabled):active,\n.lingbi-studio-inventory-button:not(:disabled):active,\n.lingbi-studio-edit-button:not(:disabled):active,\n.lingbi-studio-model-button:not(:disabled):active,\n.lingbi-studio-model-visibility-button:not(:disabled):active {\n    background: transparent;\n}\n\n.lingbi-studio-exit-button:active {\n    background: #e66d00;\n}\n\n@keyframes lingbi-studio-boolean-operation-spin {\n    to {\n        transform: rotate(360deg);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .lingbi-studio-boolean-button,\n    .lingbi-studio-simulation-button,\n    .lingbi-studio-download-button,\n    .lingbi-studio-inventory-button,\n    .lingbi-studio-edit-button,\n    .lingbi-studio-model-button,\n    .lingbi-studio-exit-button {\n        transition: none;\n    }\n\n    .lingbi-studio-boolean-operation-spinner {\n        animation: none;\n    }\n}\n\n@media (max-width: 420px) {\n    .lingbi-studio-bottom-toolbar.has-edit-control {\n        width: calc(100% - 16px);\n        padding: 8px 4px;\n    }\n\n    .lingbi-studio-bottom-toolbar.has-model-control.has-edit-control {\n        width: calc(100% - 16px);\n    }\n\n    .lingbi-studio-bottom-toolbar.has-model-control.has-edit-control.has-inventory-control {\n        width: calc(100% - 16px);\n    }\n\n    .lingbi-studio-model-visibility {\n        left: 8px;\n        transform: none;\n    }\n\n    .lingbi-studio-boolean-button,\n    .lingbi-studio-simulation-button,\n    .lingbi-studio-download-button,\n    .lingbi-studio-inventory-button,\n    .lingbi-studio-edit-button,\n    .lingbi-studio-model-button {\n        padding: 0 2px;\n        font-size: 16px;\n    }\n\n    .lingbi-studio-edit-status-text {\n        font-size: 16px;\n        line-height: 24px;\n    }\n\n    .lingbi-studio-exit-button {\n        height: 36px;\n        padding: 0 14px;\n        font-size: 16px;\n    }\n}\n\n.lingbi-studio-viewport > canvas:focus-visible,\n.lingbi-studio-boolean-button:focus-visible,\n.lingbi-studio-simulation-button:focus-visible,\n.lingbi-studio-download-button:focus-visible,\n.lingbi-studio-inventory-button:focus-visible,\n.lingbi-studio-edit-button:focus-visible,\n.lingbi-studio-model-button:focus-visible,\n.lingbi-studio-model-visibility-button:focus-visible,\n.lingbi-studio-exit-button:focus-visible,\n.lingbi-studio-boolean-edit-confirmation-cancel:focus-visible,\n.lingbi-studio-boolean-edit-confirmation-continue:focus-visible {\n    outline: 2px solid #7cc0ff;\n    outline-offset: 2px;\n}\n";
+const studioWorkspaceStyles = ".lingbi-studio-workspace {\n    position: relative;\n    display: block;\n    width: 100%;\n    height: 100%;\n    min-width: 0;\n    min-height: 0;\n    overflow: hidden;\n}\n\n.lingbi-studio-viewport {\n    width: 100%;\n    height: 100%;\n    min-width: 0;\n    min-height: 0;\n    overflow: hidden;\n}\n\n.lingbi-studio-viewport > canvas {\n    display: block;\n    width: 100%;\n    height: 100%;\n    min-width: 0;\n    min-height: 0;\n    overflow: hidden;\n    background: #3d3f41;\n}\n\n.lingbi-studio-boolean-operation-overlay {\n    position: absolute;\n    z-index: 3;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 12px;\n    background: rgba(17, 17, 17, 0.32);\n    color: #ffffff;\n    cursor: wait;\n}\n\n.lingbi-studio-boolean-operation-overlay[hidden] {\n    display: none;\n}\n\n.lingbi-studio-boolean-edit-confirmation {\n    position: absolute;\n    z-index: 4;\n    top: 50%;\n    left: 50%;\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 12px;\n    width: min(420px, calc(100% - 32px));\n    padding: 24px;\n    border-radius: 8px;\n    background: #ffffff;\n    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);\n    transform: translate(-50%, -50%);\n    box-sizing: border-box;\n}\n\n.lingbi-studio-boolean-edit-confirmation[hidden] {\n    display: none;\n}\n\n.lingbi-studio-boolean-edit-confirmation-text {\n    grid-column: 1 / -1;\n    margin: 0 0 8px;\n    color: #171717;\n    font-size: 16px;\n    font-weight: 500;\n    line-height: 24px;\n    text-align: center;\n}\n\n.lingbi-studio-boolean-edit-confirmation-cancel,\n.lingbi-studio-boolean-edit-confirmation-continue {\n    height: 40px;\n    border: 1px solid #d9d9d9;\n    border-radius: 4px;\n    font: inherit;\n    font-size: 16px;\n    font-weight: 500;\n    line-height: 24px;\n    cursor: pointer;\n}\n\n.lingbi-studio-boolean-edit-confirmation-cancel {\n    background: #ffffff;\n    color: #171717;\n}\n\n.lingbi-studio-boolean-edit-confirmation-continue {\n    border-color: #f27c38;\n    background: #f27c38;\n    color: #ffffff;\n}\n\n.lingbi-studio-boolean-operation-spinner {\n    width: 32px;\n    height: 32px;\n    border: 3px solid rgba(255, 105, 0, 0.28);\n    border-top-color: #ff6900;\n    border-radius: 50%;\n    animation: lingbi-studio-boolean-operation-spin 0.8s linear infinite;\n    box-sizing: border-box;\n}\n\n.lingbi-studio-boolean-operation-status {\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    letter-spacing: 0;\n}\n\n.lingbi-studio-import-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.lingbi-studio-import-row[hidden] {\n    display: none;\n}\n\n.lingbi-studio-import-progress {\n    display: block;\n    width: 160px;\n    height: 4px;\n    overflow: hidden;\n    border-radius: 999px;\n    background: rgba(255, 105, 0, 0.28);\n    box-sizing: border-box;\n}\n\n.lingbi-studio-import-progress[hidden] {\n    display: none;\n}\n\n.lingbi-studio-import-progress-fill {\n    width: 0;\n    height: 100%;\n    border-radius: 999px;\n    background: #ff6900;\n}\n\n.lingbi-studio-import-percent {\n    min-width: 36px;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    text-align: left;\n}\n\n.lingbi-studio-bottom-toolbar {\n    position: absolute;\n    z-index: 1;\n    bottom: 36px;\n    left: 50%;\n    display: grid;\n    align-items: center;\n    grid-template-columns: minmax(0, 1fr);\n    width: min(120px, calc(100% - 32px));\n    height: 64px;\n    padding: 8px 12px;\n    transform: translateX(-50%);\n    box-sizing: border-box;\n    border-radius: 8px;\n    background: #f4f4f4;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);\n}\n\n.lingbi-studio-bottom-toolbar.has-edit-control {\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n    width: min(480px, calc(100% - 32px));\n}\n\n.lingbi-studio-bottom-toolbar.has-inventory-control {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    width: min(240px, calc(100% - 32px));\n}\n\n.lingbi-studio-bottom-toolbar.has-edit-control.has-inventory-control {\n    grid-template-columns: repeat(5, minmax(0, 1fr));\n    width: min(600px, calc(100% - 32px));\n}\n\n.lingbi-studio-bottom-toolbar.has-model-control.has-inventory-control {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    width: min(360px, calc(100% - 32px));\n}\n\n.lingbi-studio-bottom-toolbar.has-model-control.has-edit-control {\n    grid-template-columns: repeat(5, minmax(0, 1fr));\n    width: min(600px, calc(100% - 32px));\n}\n\n.lingbi-studio-bottom-toolbar.has-model-control.has-edit-control.has-inventory-control {\n    grid-template-columns: repeat(6, minmax(0, 1fr));\n    width: min(720px, calc(100% - 32px));\n}\n\n.lingbi-studio-model-visibility {\n    position: absolute;\n    z-index: 1;\n    bottom: 108px;\n    left: 50%;\n    display: grid;\n    gap: 8px;\n    width: 144px;\n    padding: 12px;\n    border-radius: 8px;\n    background: #f4f4f4;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);\n    transform: translateX(-240px);\n    box-sizing: border-box;\n}\n\n.lingbi-studio-model-visibility[hidden] {\n    display: none;\n}\n\n.lingbi-studio-model-visibility-title {\n    color: #171717;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 20px;\n}\n\n.lingbi-studio-model-visibility-row {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) auto;\n    gap: 8px;\n    align-items: center;\n    color: #171717;\n    font-size: 14px;\n    line-height: 20px;\n}\n\n.lingbi-studio-model-visibility-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    appearance: none;\n    width: 20px;\n    height: 28px;\n    padding: 0;\n    border: 0;\n    border-radius: 0;\n    background: transparent;\n    box-shadow: none;\n    color: #171717;\n    cursor: not-allowed;\n    font: inherit;\n    line-height: 0;\n    outline: none;\n    box-sizing: border-box;\n}\n\n.lingbi-studio-model-visibility-icon {\n    display: block;\n    width: 18px;\n    height: 18px;\n    flex: 0 0 auto;\n    pointer-events: none;\n}\n\n.lingbi-studio-model-visibility-button:not(:disabled) {\n    cursor: pointer;\n}\n\n.lingbi-studio-model-visibility-button:disabled {\n    color: #8c8c8c;\n}\n\n.lingbi-studio-model-button.is-active,\n.lingbi-studio-model-button.is-active:disabled {\n    color: #ff6900;\n    font-weight: 600;\n}\n\n.lingbi-studio-boolean-button,\n.lingbi-studio-simulation-button,\n.lingbi-studio-download-button,\n.lingbi-studio-inventory-button,\n.lingbi-studio-edit-button,\n.lingbi-studio-model-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    min-width: 0;\n    height: 48px;\n    padding: 0 8px;\n    border: 0;\n    border-radius: 4px;\n    background: transparent;\n    color: #171717;\n    cursor: not-allowed;\n    font: inherit;\n    font-size: 18px;\n    font-weight: 500;\n    line-height: 24px;\n    letter-spacing: 0;\n    opacity: 1;\n    box-sizing: border-box;\n    white-space: nowrap;\n    transition:\n        background-color 140ms ease,\n        color 140ms ease;\n}\n\n.lingbi-studio-operation-button-wrapper {\n    display: block;\n    width: 100%;\n    min-width: 0;\n    height: 48px;\n    box-sizing: border-box;\n}\n\n.lingbi-studio-operation-button-wrapper > button:disabled {\n    pointer-events: none;\n}\n\n.lingbi-studio-boolean-button[hidden],\n.lingbi-studio-simulation-button[hidden],\n.lingbi-studio-download-button[hidden],\n.lingbi-studio-inventory-button[hidden],\n.lingbi-studio-edit-button[hidden],\n.lingbi-studio-model-button[hidden] {\n    display: none;\n}\n\n.lingbi-studio-boolean-button:not(:disabled),\n.lingbi-studio-simulation-button:not(:disabled),\n.lingbi-studio-download-button:not(:disabled),\n.lingbi-studio-inventory-button:not(:disabled),\n.lingbi-studio-edit-button:not(:disabled),\n.lingbi-studio-model-button:not(:disabled) {\n    cursor: pointer;\n}\n\n.lingbi-studio-boolean-button:disabled,\n.lingbi-studio-simulation-button:disabled,\n.lingbi-studio-download-button:disabled,\n.lingbi-studio-inventory-button:disabled,\n.lingbi-studio-edit-button:disabled,\n.lingbi-studio-model-button:disabled,\n.lingbi-studio-model-visibility-button:disabled {\n    background: transparent;\n    color: #8c8c8c;\n    opacity: 1;\n}\n\n.lingbi-studio-edit-button.is-active,\n.lingbi-studio-edit-button.is-active:disabled,\n.lingbi-studio-model-button.is-active,\n.lingbi-studio-model-button.is-active:disabled {\n    color: #ff6900;\n    font-weight: 600;\n}\n\n.lingbi-studio-download-status {\n    position: absolute;\n    z-index: 2;\n    top: 24px;\n    left: 50%;\n    max-width: calc(100% - 24px);\n    padding: 6px 10px;\n    border: 1px solid #f4b5b0;\n    border-radius: 4px;\n    background: #fff1f0;\n    color: #b42318;\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 20px;\n    text-align: center;\n    transform: translateX(-50%);\n    box-sizing: border-box;\n}\n\n.lingbi-studio-download-status[hidden] {\n    display: none;\n}\n\n.lingbi-studio-download-success {\n    position: absolute;\n    z-index: 2;\n    top: 24px;\n    left: 50%;\n    max-width: calc(100% - 24px);\n    padding: 8px 16px;\n    border: 1px solid #86d39a;\n    border-radius: 6px;\n    background: #f0fff4;\n    color: #176b32;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    text-align: center;\n    transform: translateX(-50%);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);\n    box-sizing: border-box;\n}\n\n.lingbi-studio-download-success[hidden] {\n    display: none;\n}\n\n.lingbi-studio-edit-status {\n    position: absolute;\n    z-index: 2;\n    bottom: 112px;\n    left: 50%;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    max-width: calc(100% - 24px);\n    padding: 10px 14px;\n    border: 0;\n    border-radius: 8px;\n    background: #e9e9e9;\n    color: #171717;\n    transform: translateX(-50%);\n    box-sizing: border-box;\n}\n\n.lingbi-studio-edit-status[hidden] {\n    display: none;\n}\n\n.lingbi-studio-edit-status-text {\n    display: inline-block;\n    min-width: 0;\n    font-size: 20px;\n    line-height: 28px;\n    letter-spacing: 0;\n}\n\n.lingbi-studio-exit-button {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    height: 40px;\n    padding: 0 18px;\n    border: 1px solid transparent;\n    border-radius: 8px;\n    background: #f27c38;\n    color: #ffffff;\n    cursor: pointer;\n    font: inherit;\n    font-size: 18px;\n    font-weight: 600;\n    line-height: 24px;\n    letter-spacing: 0;\n    transition:\n        background-color 140ms ease,\n        color 140ms ease;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .lingbi-studio-boolean-button:not(:disabled):hover,\n    .lingbi-studio-simulation-button:not(:disabled):hover,\n    .lingbi-studio-download-button:not(:disabled):hover,\n    .lingbi-studio-inventory-button:not(:disabled):hover,\n    .lingbi-studio-edit-button:not(:disabled):hover,\n    .lingbi-studio-model-button:not(:disabled):hover {\n        background: #e8e8e8;\n    }\n\n    .lingbi-studio-simulation-button:not(:disabled):hover,\n    .lingbi-studio-download-button:not(:disabled):hover,\n    .lingbi-studio-inventory-button:not(:disabled):hover,\n    .lingbi-studio-edit-button:not(:disabled):hover,\n    .lingbi-studio-model-button:not(:disabled):hover {\n        color: #f06400;\n    }\n\n    .lingbi-studio-model-visibility-button:not(:disabled):hover {\n        background: transparent;\n    }\n\n    .lingbi-studio-exit-button:hover {\n        background: #ff8a1f;\n    }\n\n    .lingbi-studio-boolean-edit-confirmation-cancel:hover {\n        background: #f5f5f5;\n    }\n\n    .lingbi-studio-boolean-edit-confirmation-continue:hover {\n        background: #ff8a1f;\n    }\n}\n\n.lingbi-studio-boolean-button:not(:disabled):active,\n.lingbi-studio-download-button:not(:disabled):active,\n.lingbi-studio-inventory-button:not(:disabled):active,\n.lingbi-studio-edit-button:not(:disabled):active,\n.lingbi-studio-model-button:not(:disabled):active,\n.lingbi-studio-model-visibility-button:not(:disabled):active {\n    background: transparent;\n}\n\n.lingbi-studio-exit-button:active {\n    background: #e66d00;\n}\n\n@keyframes lingbi-studio-boolean-operation-spin {\n    to {\n        transform: rotate(360deg);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .lingbi-studio-boolean-button,\n    .lingbi-studio-simulation-button,\n    .lingbi-studio-download-button,\n    .lingbi-studio-inventory-button,\n    .lingbi-studio-edit-button,\n    .lingbi-studio-model-button,\n    .lingbi-studio-exit-button {\n        transition: none;\n    }\n\n    .lingbi-studio-boolean-operation-spinner {\n        animation: none;\n    }\n}\n\n@media (max-width: 420px) {\n    .lingbi-studio-bottom-toolbar.has-edit-control {\n        width: calc(100% - 16px);\n        padding: 8px 4px;\n    }\n\n    .lingbi-studio-bottom-toolbar.has-model-control.has-edit-control {\n        width: calc(100% - 16px);\n    }\n\n    .lingbi-studio-bottom-toolbar.has-model-control.has-edit-control.has-inventory-control {\n        width: calc(100% - 16px);\n    }\n\n    .lingbi-studio-model-visibility {\n        left: 8px;\n        transform: none;\n    }\n\n    .lingbi-studio-boolean-button,\n    .lingbi-studio-simulation-button,\n    .lingbi-studio-download-button,\n    .lingbi-studio-inventory-button,\n    .lingbi-studio-edit-button,\n    .lingbi-studio-model-button {\n        padding: 0 2px;\n        font-size: 16px;\n    }\n\n    .lingbi-studio-edit-status-text {\n        font-size: 16px;\n        line-height: 24px;\n    }\n\n    .lingbi-studio-exit-button {\n        height: 36px;\n        padding: 0 14px;\n        font-size: 16px;\n    }\n}\n\n.lingbi-studio-viewport > canvas:focus-visible,\n.lingbi-studio-boolean-button:focus-visible,\n.lingbi-studio-simulation-button:focus-visible,\n.lingbi-studio-download-button:focus-visible,\n.lingbi-studio-inventory-button:focus-visible,\n.lingbi-studio-edit-button:focus-visible,\n.lingbi-studio-model-button:focus-visible,\n.lingbi-studio-model-visibility-button:focus-visible,\n.lingbi-studio-exit-button:focus-visible,\n.lingbi-studio-boolean-edit-confirmation-cancel:focus-visible,\n.lingbi-studio-boolean-edit-confirmation-continue:focus-visible {\n    outline: 2px solid #7cc0ff;\n    outline-offset: 2px;\n}\n";
 class StudioWorkspace {
   canvas;
   static SVG_NAMESPACE = "http://www.w3.org/2000/svg";
@@ -39925,7 +40429,12 @@ class StudioWorkspace {
   booleanButtonElement;
   simulationButtonElement;
   booleanOperationOverlayElement;
+  booleanOperationSpinnerElement;
   booleanOperationStatusElement;
+  importPercentElement;
+  importProgressElement;
+  importProgressFillElement;
+  importProgressRowElement;
   booleanEditConfirmationElement;
   bottomToolbarElement;
   downloadButtonElement;
@@ -39957,6 +40466,10 @@ class StudioWorkspace {
     const booleanOperationOverlayElement = ownerDocument.createElement("div");
     const booleanOperationSpinnerElement = ownerDocument.createElement("div");
     const booleanOperationStatusElement = ownerDocument.createElement("div");
+    const importPercentElement = ownerDocument.createElement("div");
+    const importProgressElement = ownerDocument.createElement("div");
+    const importProgressFillElement = ownerDocument.createElement("div");
+    const importProgressRowElement = ownerDocument.createElement("div");
     const booleanEditConfirmationElement = ownerDocument.createElement("div");
     const booleanEditConfirmationTextElement = ownerDocument.createElement("p");
     const booleanEditConfirmationCancelButtonElement = ownerDocument.createElement("button");
@@ -40006,10 +40519,24 @@ class StudioWorkspace {
     booleanOperationOverlayElement.hidden = true;
     booleanOperationSpinnerElement.className = "lingbi-studio-boolean-operation-spinner";
     booleanOperationSpinnerElement.setAttribute("aria-hidden", "true");
+    importProgressRowElement.className = "lingbi-studio-import-row";
+    importProgressRowElement.hidden = true;
+    importPercentElement.className = "lingbi-studio-import-percent";
+    importPercentElement.textContent = "0%";
+    importProgressElement.className = "lingbi-studio-import-progress";
+    importProgressElement.setAttribute("aria-label", "模型加载进度");
+    importProgressElement.setAttribute("aria-valuemax", "100");
+    importProgressElement.setAttribute("aria-valuemin", "0");
+    importProgressElement.setAttribute("aria-valuenow", "0");
+    importProgressElement.setAttribute("role", "progressbar");
+    importProgressFillElement.className = "lingbi-studio-import-progress-fill";
+    importProgressElement.append(importProgressFillElement);
+    importProgressRowElement.append(importProgressElement, importPercentElement);
     booleanOperationStatusElement.className = "lingbi-studio-boolean-operation-status";
     booleanOperationStatusElement.textContent = "布尔计算中";
     booleanOperationOverlayElement.append(
       booleanOperationSpinnerElement,
+      importProgressRowElement,
       booleanOperationStatusElement
     );
     booleanEditConfirmationElement.className = "lingbi-studio-boolean-edit-confirmation";
@@ -40137,7 +40664,12 @@ class StudioWorkspace {
     this.booleanButtonElement = booleanButtonElement;
     this.simulationButtonElement = simulationButtonElement;
     this.booleanOperationOverlayElement = booleanOperationOverlayElement;
+    this.booleanOperationSpinnerElement = booleanOperationSpinnerElement;
     this.booleanOperationStatusElement = booleanOperationStatusElement;
+    this.importPercentElement = importPercentElement;
+    this.importProgressElement = importProgressElement;
+    this.importProgressFillElement = importProgressFillElement;
+    this.importProgressRowElement = importProgressRowElement;
     this.booleanEditConfirmationElement = booleanEditConfirmationElement;
     this.bottomToolbarElement = bottomToolbarElement;
     this.downloadButtonElement = downloadButtonElement;
@@ -40260,11 +40792,14 @@ class StudioWorkspace {
   }
   /** Applies Application's combined renderer and download state. */
   setToolbarState(state) {
+    const importInProgress = state.importInProgress ?? false;
+    const importProgress = Math.max(0, Math.min(100, Math.floor(state.importProgress ?? 0)));
     const booleanOperationInProgress = state.booleanInProgress ?? false;
     const downloadInProgress = state.downloadInProgress ?? false;
     const inventoryInProgress = state.inventoryInProgress ?? false;
     const simulationInProgress = state.simulationInProgress ?? false;
-    const operationInProgress = booleanOperationInProgress || downloadInProgress || inventoryInProgress || simulationInProgress;
+    const otherOperationInProgress = booleanOperationInProgress || downloadInProgress || inventoryInProgress || simulationInProgress;
+    const operationInProgress = importInProgress || otherOperationInProgress;
     const confirmationVisible = state.booleanEditConfirmationVisible ?? false;
     const modelVisibility = state.modelVisibility;
     this.currentEditActive = state.editActive;
@@ -40288,7 +40823,15 @@ class StudioWorkspace {
     this.booleanButtonElement.setAttribute("aria-busy", String(booleanOperationInProgress));
     this.booleanOperationOverlayElement.hidden = !operationInProgress;
     this.booleanOperationOverlayElement.setAttribute("aria-busy", String(operationInProgress));
-    this.booleanOperationStatusElement.textContent = simulationInProgress ? "仿真计算中" : booleanOperationInProgress ? "布尔计算中" : inventoryInProgress ? "入库处理中" : "下载处理中";
+    this.booleanOperationSpinnerElement.hidden = importInProgress;
+    this.importProgressRowElement.hidden = !importInProgress;
+    if (importInProgress) {
+      const percentText = `${String(importProgress)}%`;
+      this.importProgressElement.setAttribute("aria-valuenow", String(importProgress));
+      this.importProgressFillElement.style.width = percentText;
+      this.importPercentElement.textContent = percentText;
+    }
+    this.booleanOperationStatusElement.textContent = importInProgress ? "模型加载中" : simulationInProgress ? "仿真计算中" : booleanOperationInProgress ? "布尔计算中" : inventoryInProgress ? "入库处理中" : "下载处理中";
     this.canvas.toggleAttribute("inert", operationInProgress || confirmationVisible);
     this.bottomToolbarElement.toggleAttribute(
       "inert",
@@ -40476,6 +41019,7 @@ class StudioWorkspace {
 class Application {
   archiveImportController;
   archiveImporting = false;
+  archiveImportProgress;
   booleanEditConfirmationVisible = false;
   disposed = false;
   downloadController;
@@ -40488,6 +41032,7 @@ class Application {
   editedArchiveResourceContext;
   importGeneration = 0;
   importPerformanceMode = ImportPerformanceMode.Off;
+  importProgressCompositor = new ImportProgressCompositor();
   inventoryConfirmationController;
   inventoryConfirming = false;
   inventoryError;
@@ -40545,7 +41090,10 @@ class Application {
         this.handleInventorySuccess.bind(this),
         this.handleInventoryStateChanged.bind(this)
       );
-      this.archiveImportController = new ArchiveImportWorkerClient();
+      this.archiveImportController = new ArchiveImportWorkerClient(
+        void 0,
+        this.handleArchiveImportProgress.bind(this)
+      );
       this.handleRendererWorkspaceStateChanged(renderer.getWorkspaceState());
     } catch (error2) {
       this.workspace = void 0;
@@ -40631,12 +41179,14 @@ class Application {
     }
     this.nextArchiveTaskId += 1;
     this.archiveImporting = true;
+    this.archiveImportProgress = 0;
     this.downloadError = void 0;
     this.downloadSuccess = void 0;
     this.publishWorkspaceState();
     const controller = this.archiveImportController;
     if (controller === void 0) {
       this.archiveImporting = false;
+      this.archiveImportProgress = void 0;
       this.publishWorkspaceState();
       return Promise.resolve({
         code: ObjImportFailureCode.Unavailable,
@@ -40694,6 +41244,7 @@ class Application {
   cancelArchiveImport() {
     this.archiveImportController?.cancel();
     this.archiveImporting = false;
+    this.archiveImportProgress = void 0;
     this.invalidateImportGeneration();
   }
   async completeModelResourceSceneImport(source, candidate, generation) {
@@ -40764,6 +41315,7 @@ class Application {
     } finally {
       if (this.isCurrentImportGeneration(generation)) {
         this.archiveImporting = false;
+        this.archiveImportProgress = void 0;
         this.publishWorkspaceState();
       }
     }
@@ -40771,6 +41323,7 @@ class Application {
   completeEditedArchiveImportFailure(generation, error2) {
     if (this.isCurrentImportGeneration(generation)) {
       this.archiveImporting = false;
+      this.archiveImportProgress = void 0;
       this.publishWorkspaceState();
     }
     return Promise.resolve(this.mapEditedArchiveError(error2));
@@ -41141,6 +41694,13 @@ class Application {
     }
     this.clearBooleanEditConfirmation();
   }
+  handleArchiveImportProgress(percent) {
+    if (this.disposed || !this.archiveImporting) {
+      return;
+    }
+    this.archiveImportProgress = percent;
+    this.publishWorkspaceState();
+  }
   handleRendererWorkspaceStateChanged(state) {
     if (this.disposed) {
       return;
@@ -41258,6 +41818,10 @@ class Application {
     if (workspace === void 0 || state === void 0) {
       return;
     }
+    const importProgress = this.importProgressCompositor.compose({
+      archiveProgress: this.archiveImportProgress,
+      rendererProgress: state.scene.importProgress
+    });
     const toolbarState = {
       simulationEnabled: state.simulation?.enabled === true && !this.downloading && !this.inventorying && !this.inventoryConfirming && !this.archiveImporting && !this.booleanEditConfirmationVisible,
       simulationInProgress: state.simulation?.inProgress ?? false,
@@ -41275,6 +41839,8 @@ class Application {
       editEnabled: state.edit.enabled && !this.downloading && !this.inventorying && !this.archiveImporting && !this.booleanEditConfirmationVisible,
       editVisible: state.edit.visible,
       ...this.editStatusMessage === void 0 ? {} : { editStatusMessage: this.editStatusMessage },
+      importInProgress: state.scene.importInProgress || this.archiveImporting,
+      ...importProgress === void 0 ? {} : { importProgress },
       inventoryEnabled: this.canInventory(state),
       ...this.inventoryError === void 0 ? {} : { inventoryError: this.inventoryError },
       inventoryInProgress: this.inventorying,
@@ -41320,9 +41886,11 @@ class Application {
       state.scene.available,
       state.scene.contextLost,
       state.scene.importInProgress,
+      state.scene.importProgress ?? null,
       state.scene.revision,
       state.scene.resourceRevision ?? null,
       this.archiveImporting,
+      this.archiveImportProgress ?? null,
       this.downloading,
       this.inventoryConfirming,
       this.inventorying,
@@ -41335,7 +41903,7 @@ class Application {
     ]);
   }
   isSameToolbarState(state, previousState) {
-    return previousState !== void 0 && state.simulationEnabled === previousState.simulationEnabled && state.simulationInProgress === previousState.simulationInProgress && state.simulationOutcome === previousState.simulationOutcome && state.booleanEnabled === previousState.booleanEnabled && state.booleanInProgress === previousState.booleanInProgress && state.booleanReediting === previousState.booleanReediting && state.booleanResultInvalidated === previousState.booleanResultInvalidated && state.booleanEditConfirmationVisible === previousState.booleanEditConfirmationVisible && state.downloadEnabled === previousState.downloadEnabled && state.downloadError === previousState.downloadError && state.downloadInProgress === previousState.downloadInProgress && state.downloadSuccess === previousState.downloadSuccess && state.editActive === previousState.editActive && state.editEnabled === previousState.editEnabled && state.editVisible === previousState.editVisible && state.editStatusMessage === previousState.editStatusMessage && state.inventoryEnabled === previousState.inventoryEnabled && state.inventoryError === previousState.inventoryError && state.inventoryInProgress === previousState.inventoryInProgress && state.inventoryVisible === previousState.inventoryVisible && this.isSameModelVisibility(state.modelVisibility, previousState.modelVisibility);
+    return previousState !== void 0 && state.simulationEnabled === previousState.simulationEnabled && state.simulationInProgress === previousState.simulationInProgress && state.simulationOutcome === previousState.simulationOutcome && state.booleanEnabled === previousState.booleanEnabled && state.booleanInProgress === previousState.booleanInProgress && state.booleanReediting === previousState.booleanReediting && state.booleanResultInvalidated === previousState.booleanResultInvalidated && state.booleanEditConfirmationVisible === previousState.booleanEditConfirmationVisible && state.downloadEnabled === previousState.downloadEnabled && state.downloadError === previousState.downloadError && state.downloadInProgress === previousState.downloadInProgress && state.downloadSuccess === previousState.downloadSuccess && state.editActive === previousState.editActive && state.editEnabled === previousState.editEnabled && state.editVisible === previousState.editVisible && state.editStatusMessage === previousState.editStatusMessage && state.importInProgress === previousState.importInProgress && state.importProgress === previousState.importProgress && state.inventoryEnabled === previousState.inventoryEnabled && state.inventoryError === previousState.inventoryError && state.inventoryInProgress === previousState.inventoryInProgress && state.inventoryVisible === previousState.inventoryVisible && this.isSameModelVisibility(state.modelVisibility, previousState.modelVisibility);
   }
   isSameModelVisibility(state, previousState) {
     return state?.baseVisible === previousState?.baseVisible && state?.enabled === previousState?.enabled && state?.stoneVisible === previousState?.stoneVisible;