@lingbi/studio 0.8.3 → 0.9.1

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;
@@ -32014,6 +32221,85 @@ class OBJLoader extends Loader {
     return container;
   }
 }
+class StreamingResourceReader {
+  async readText(url, signal, progress) {
+    const response = await this.fetchOk(url, signal);
+    const streamedBody = this.getStreamedBody(response, progress);
+    if (streamedBody === null) {
+      return response.text();
+    }
+    return new TextDecoder().decode(
+      await this.readStreamingBody(
+        streamedBody.stream,
+        streamedBody.contentLength,
+        streamedBody.progress
+      )
+    );
+  }
+  async readArrayBuffer(url, signal, progress) {
+    const response = await this.fetchOk(url, signal);
+    const streamedBody = this.getStreamedBody(response, progress);
+    if (streamedBody === null) {
+      return response.arrayBuffer();
+    }
+    const bytes = await this.readStreamingBody(
+      streamedBody.stream,
+      streamedBody.contentLength,
+      streamedBody.progress
+    );
+    return bytes.buffer;
+  }
+  async fetchOk(url, signal) {
+    const response = await fetch(url, { signal });
+    if (!response.ok) {
+      throw new Error(`Unable to load resource: ${url}`);
+    }
+    return response;
+  }
+  getStreamedBody(response, progress) {
+    if (progress === void 0) {
+      return null;
+    }
+    const contentLength = this.parseContentLength(response);
+    if (contentLength === void 0) {
+      return null;
+    }
+    const stream = response.body;
+    return stream === null ? null : { contentLength, progress, stream };
+  }
+  async readStreamingBody(stream, contentLength, progress) {
+    const reader = stream.getReader();
+    const chunks = [];
+    let loaded = 0;
+    for (; ; ) {
+      const next = await reader.read();
+      if (next.done) {
+        break;
+      }
+      chunks.push(next.value);
+      loaded += next.value.byteLength;
+      progress(Math.min(1, loaded / contentLength));
+    }
+    return this.mergeChunks(chunks, loaded);
+  }
+  mergeChunks(chunks, total) {
+    const merged = new Uint8Array(total);
+    let offset = 0;
+    for (const chunk of chunks) {
+      merged.set(chunk, offset);
+      offset += chunk.byteLength;
+    }
+    return merged;
+  }
+  parseContentLength(response) {
+    const raw = response.headers.get("Content-Length");
+    if (raw === null) {
+      return void 0;
+    }
+    const parsed = Number(raw);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : void 0;
+  }
+}
 const DEFAULT_MODEL_COLOR$1 = 10265519;
 const DEFAULT_POINT_SIZE$1 = 3;
 class TextureLoadMonitor {
@@ -32022,12 +32308,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 +32327,9 @@ class TextureLoadMonitor {
     this.finishedScheduling = true;
     this.resolveIfSettled();
   }
+  getScheduledTextureCount() {
+    return this.scheduledTextureCount;
+  }
   getTextures() {
     return [...this.textures];
   }
@@ -32065,14 +32357,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,
@@ -32105,18 +32400,20 @@ class TextureLoadMonitor {
 }
 class ObjLoader {
   parser;
+  resourceReader = new StreamingResourceReader();
   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,
@@ -32128,8 +32425,9 @@ class ObjLoader {
     let warnings = [];
     try {
       const objFetchStage = performanceTrace.startStage("obj-fetch", role);
-      const objSource = await this.loadText(resources.objUrl, signal);
+      const objSource = await this.loadText(resources.objUrl, signal, progress);
       performanceTrace.endStage(objFetchStage, "success");
+      progress?.markModelFetched();
       this.assertNotCancelled(signal);
       const materialScanStage = performanceTrace.startStage("obj-material-scan", role);
       const materialReferences = this.getMaterialLibraryReferences(objSource);
@@ -32149,9 +32447,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 +32475,7 @@ class ObjLoader {
         resources.upAxis
       );
       performanceTrace.endStage(modelCreateStage, "success");
+      progress?.markModelParsed();
       if (!this.hasRenderablePrimitive(group) || !model.hasFiniteBounds()) {
         model.dispose();
         return {
@@ -32335,6 +32636,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 +32759,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 +32771,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 +32782,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);
@@ -32545,14 +32857,12 @@ class ObjLoader {
     }
     return outcome;
   }
-  async loadText(url, signal) {
-    const response = await fetch(url, {
-      signal
-    });
-    if (!response.ok) {
-      throw new Error(`Unable to load OBJ resource: ${url}`);
-    }
-    return response.text();
+  async loadText(url, signal, progress) {
+    return this.resourceReader.readText(
+      url,
+      signal,
+      progress === void 0 ? void 0 : progress.markModelFetchProgress.bind(progress)
+    );
   }
   getImportPerformanceFailureStatus(signal) {
     return signal.aborted ? "cancelled" : "failure";
@@ -33445,22 +33755,24 @@ const DEFAULT_POINT_SIZE = 3;
 const MAX_HEADER_BYTES = 65536;
 class PlyLoader {
   parser;
+  resourceReader = new StreamingResourceReader();
   textureLoader;
   constructor(parser = new PLYLoader(), textureLoader = new PlyTextureLoader()) {
     this.parser = parser;
     this.textureLoader = textureLoader;
   }
-  async load(resources, signal) {
+  async load(resources, signal, progress) {
     if (signal.aborted) {
       return {
         code: ObjImportFailureCode$1.Cancelled,
         success: false
       };
     }
-    const source = await this.fetchSource(resources.plyUrl, signal);
+    const source = await this.fetchSource(resources.plyUrl, signal, progress);
     if (!(source instanceof ArrayBuffer)) {
       return source;
     }
+    progress?.markModelFetched();
     let geometry;
     let metadata;
     try {
@@ -33486,7 +33798,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 +33833,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 +33852,7 @@ class PlyLoader {
           success: false
         };
       }
+      progress?.markTextureSettled();
       if (textureResult.outcome === "succeeded") {
         texture = textureResult.texture;
       } else {
@@ -33573,16 +33894,13 @@ class PlyLoader {
       warnings: []
     };
   }
-  async fetchSource(url, signal) {
+  async fetchSource(url, signal, progress) {
     try {
-      const response = await fetch(url, { signal });
-      if (!response.ok) {
-        return {
-          code: ObjImportFailureCode$1.InvalidSource,
-          success: false
-        };
-      }
-      return await response.arrayBuffer();
+      return await this.resourceReader.readArrayBuffer(
+        url,
+        signal,
+        progress === void 0 ? void 0 : progress.markModelFetchProgress.bind(progress)
+      );
     } catch {
       return {
         code: signal.aborted ? ObjImportFailureCode$1.Cancelled : ObjImportFailureCode$1.InvalidSource,
@@ -33617,6 +33935,66 @@ 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();
+  }
+  markModelFetchProgress(fraction) {
+    this.tracker.setRolePosition(
+      this.role,
+      this.profile.fetchedPosition * this.clampFraction(fraction)
+    );
+  }
+  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
+    );
+  }
+  clampFraction(fraction) {
+    return Math.max(0, Math.min(1, fraction));
+  }
+}
 class SimulationSnapshotFactory {
   constructor(scheduler) {
     this.scheduler = scheduler;
@@ -35922,6 +36300,7 @@ class Renderer {
   fillLight;
   frameHandle;
   gizmoController;
+  groundGrid;
   hemisphereLight;
   pendingFirstFramePerformance;
   importPerformanceTracer = new ImportPerformanceTracer();
@@ -35959,6 +36338,7 @@ class Renderer {
     let contextRestoreListenerAttached = false;
     let controller;
     let gizmoController;
+    let groundGrid;
     let resizeObserver;
     let viewCube;
     this.canvas = canvas;
@@ -35991,6 +36371,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,
@@ -36044,9 +36427,13 @@ class Renderer {
                     viewCube?.dispose();
                   } finally {
                     try {
-                      controller?.dispose();
+                      groundGrid?.dispose();
                     } finally {
-                      renderer.dispose();
+                      try {
+                        controller?.dispose();
+                      } finally {
+                        renderer.dispose();
+                      }
                     }
                   }
                 }
@@ -36093,25 +36480,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();
+                        }
                       }
                     }
                   }
@@ -36149,7 +36540,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 {
@@ -36191,7 +36585,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 {
@@ -36238,6 +36635,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
@@ -36700,12 +37098,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);
       }
@@ -36750,6 +37158,7 @@ class Renderer {
         };
       }
       loadStatus = "success";
+      session.progressTracker.completeRole(role);
       return {
         model: result.model,
         warnings: result.warnings ?? []
@@ -36837,6 +37246,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();
@@ -37153,6 +37563,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;
@@ -37201,6 +37612,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;
@@ -37249,6 +37672,7 @@ class Renderer {
   }
   renderScene(includeViewCube = true) {
     this.syncTransformedSceneBounds();
+    this.syncGroundGridForCamera();
     this.gizmoController.updateForRender();
     if (includeViewCube) {
       this.viewCube.update(this.camera);
@@ -37258,6 +37682,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;
@@ -37296,6 +37731,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
@@ -37370,6 +37808,7 @@ class Renderer {
     };
     this.gizmoController.setActiveScene(activeScene);
     this.applyGizmoVisibility();
+    this.refreshGroundGrid(candidateModels);
     this.sceneRevision += 1;
     this.sceneResourceRevision = this.sceneRevision;
     this.pendingFirstFramePerformance = {
@@ -37379,6 +37818,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();
@@ -37502,6 +37942,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());
   }
@@ -37550,6 +37997,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) {
@@ -37595,7 +38043,7 @@ class Renderer {
       this.notifyWorkspaceState();
     }
   }
-  startImportSession(performanceTrace) {
+  startImportSession(performanceTrace, progressTracker) {
     this.cancelSimulation();
     this.cancelBooleanOperation();
     this.cancelPendingFirstFramePerformance("cancelled");
@@ -37608,7 +38056,8 @@ class Renderer {
     const session = {
       controller: new AbortController(),
       invalidationCode: void 0,
-      performanceTrace
+      performanceTrace,
+      progressTracker
     };
     performanceTrace.markStage("import-session-start", "scene");
     this.activeImport = session;
@@ -37849,6 +38298,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;
     }
@@ -37866,6 +38317,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);
   }
@@ -37925,7 +38387,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"
@@ -37965,9 +38427,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;
@@ -38042,6 +38506,10 @@ class ArchiveImportWorkerClient {
               outbound.message
             )
           );
+          return;
+        case "progress":
+          this.handleProgress(outbound);
+          return;
       }
     } catch (error2) {
       this.rejectTask(task, this.toError(error2));
@@ -38111,6 +38579,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;
@@ -38292,6 +38764,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 = [];
@@ -40011,7 +40503,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";
@@ -40022,7 +40514,12 @@ class StudioWorkspace {
   booleanButtonElement;
   simulationButtonElement;
   booleanOperationOverlayElement;
+  booleanOperationSpinnerElement;
   booleanOperationStatusElement;
+  importPercentElement;
+  importProgressElement;
+  importProgressFillElement;
+  importProgressRowElement;
   booleanEditConfirmationElement;
   bottomToolbarElement;
   downloadButtonElement;
@@ -40054,6 +40551,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");
@@ -40103,10 +40604,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";
@@ -40234,7 +40749,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;
@@ -40357,11 +40877,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;
@@ -40385,7 +40908,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",
@@ -40573,6 +41104,7 @@ class StudioWorkspace {
 class Application {
   archiveImportController;
   archiveImporting = false;
+  archiveImportProgress;
   booleanEditConfirmationVisible = false;
   disposed = false;
   downloadController;
@@ -40585,6 +41117,7 @@ class Application {
   editedArchiveResourceContext;
   importGeneration = 0;
   importPerformanceMode = ImportPerformanceMode.Off;
+  importProgressCompositor = new ImportProgressCompositor();
   inventoryConfirmationController;
   inventoryConfirming = false;
   inventoryError;
@@ -40642,7 +41175,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;
@@ -40728,12 +41264,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,
@@ -40791,6 +41329,7 @@ class Application {
   cancelArchiveImport() {
     this.archiveImportController?.cancel();
     this.archiveImporting = false;
+    this.archiveImportProgress = void 0;
     this.invalidateImportGeneration();
   }
   async completeModelResourceSceneImport(source, candidate, generation) {
@@ -40861,6 +41400,7 @@ class Application {
     } finally {
       if (this.isCurrentImportGeneration(generation)) {
         this.archiveImporting = false;
+        this.archiveImportProgress = void 0;
         this.publishWorkspaceState();
       }
     }
@@ -40868,6 +41408,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));
@@ -41238,6 +41779,13 @@ class Application {
     }
     this.clearBooleanEditConfirmation();
   }
+  handleArchiveImportProgress(percent) {
+    if (this.disposed || !this.archiveImporting) {
+      return;
+    }
+    this.archiveImportProgress = percent;
+    this.publishWorkspaceState();
+  }
   handleRendererWorkspaceStateChanged(state) {
     if (this.disposed) {
       return;
@@ -41355,6 +41903,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,
@@ -41372,6 +41924,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,
@@ -41417,9 +41971,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,
@@ -41432,7 +41988,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;