Refine STL visibility and pose panels

DICOM_and_UPP配准/static/app.js

@@ -65,6 +65,12 @@ const AUTO_PROGRESS_STEPS = [
   { id: "score", label: "评分" },
   { id: "apply", label: "应用" },
 ];
+const STL_DISPLAY_MODES = ["hidden", "solid", "translucent"];
+const STL_DISPLAY_LABELS = {
+  hidden: "取消显示",
+  solid: "实体显示",
+  translucent: "半透明",
+};
 
 const state = {
   token: localStorage.getItem("dicom_upp_registration_token") || "",
@@ -92,6 +98,8 @@ const state = {
   registrationSeriesUid: "",
   stlFiles: [],
   selectedStlIds: new Set(),
+  stlDisplayModes: {},
+  collapsedStlFamilies: new Set(),
   algorithmModel: "",
   registrationStatus: "unregistered",
   pose: { ...DEFAULT_POSE },
@@ -109,6 +117,7 @@ const state = {
   autoDeltaBaseline: null,
   autoFineRunning: false,
   poseControlsLocked: false,
+  collapsedPoseSections: { manual: false, auto: false },
   dirty: false,
   dirtyReason: "",
   savedPoseSignature: "",
@@ -533,7 +542,7 @@ function stlSelectionSignature() {
 }
 
 function visibleModelRecords() {
-  return state.modelMeshes.filter((record) => state.selectedStlIds.has(Number(record.file?.id)) && record.mesh?.visible !== false);
+  return state.modelMeshes.filter((record) => stlMode(record.file) !== "hidden" && record.mesh?.visible !== false);
 }
 
 function modelPoseMatrix() {
@@ -609,6 +618,8 @@ function clearDetail() {
   state.series = [];
   state.stlFiles = [];
   state.selectedStlIds = new Set();
+  state.stlDisplayModes = {};
+  state.collapsedStlFamilies = new Set();
   state.selectedSeriesUid = "";
   state.registrationSeriesUid = "";
   $("activeTitle").textContent = "未选择 CT";
@@ -662,6 +673,8 @@ async function selectCase(ctNumber, algorithmModel = "未指定模型") {
 
     const savedIds = new Set((registration.selected_stl_files || []).map((item) => Number(item.id)).filter(Number.isFinite));
     state.selectedStlIds = savedIds.size ? savedIds : pickDefaultStlIds(state.stlFiles);
+    state.stlDisplayModes = initStlDisplayModes(state.stlFiles, state.selectedStlIds, registration.module_styles || {});
+    state.collapsedStlFamilies = new Set();
     const defaultSeries = pickDefaultSeries(state.series);
     const savedSeries = state.series.find((item) => item.series_uid === registration.series_instance_uid);
     const shouldUseSavedSeries = registration.registration_status === "registered" && savedSeries;
@@ -728,6 +741,101 @@ function pickDefaultStlIds(files) {
   return new Set(ranked.slice(0, Math.min(6, ranked.length)).map((file) => Number(file.id)));
 }
 
+function normalizedStlId(fileOrId) {
+  const id = typeof fileOrId === "object" ? Number(fileOrId?.id) : Number(fileOrId);
+  return Number.isFinite(id) ? id : null;
+}
+
+function validStlDisplayMode(mode) {
+  return STL_DISPLAY_MODES.includes(mode) ? mode : "";
+}
+
+function stlMode(fileOrId) {
+  const id = normalizedStlId(fileOrId);
+  if (id == null || !state.selectedStlIds.has(id)) return "hidden";
+  return validStlDisplayMode(state.stlDisplayModes[id]) || "translucent";
+}
+
+function stlFamilyLabel(file) {
+  return String(file.family || "未分类");
+}
+
+function stlFileIndex(file) {
+  const id = normalizedStlId(file);
+  const index = state.stlFiles.findIndex((item) => normalizedStlId(item) === id);
+  return index >= 0 ? index : 0;
+}
+
+function stlColor(file, fallbackIndex = 0) {
+  const index = stlFileIndex(file);
+  return cssColor(index >= 0 ? index : fallbackIndex);
+}
+
+function syncStlDisplayModesForSelection(defaultMode = "translucent") {
+  const next = {};
+  state.stlFiles.forEach((file) => {
+    const id = normalizedStlId(file);
+    if (id == null || !state.selectedStlIds.has(id)) return;
+    next[id] = validStlDisplayMode(state.stlDisplayModes[id]) || defaultMode;
+  });
+  state.stlDisplayModes = next;
+}
+
+function initStlDisplayModes(files, selectedIds, moduleStyles = {}) {
+  const modes = {};
+  files.forEach((file) => {
+    const id = normalizedStlId(file);
+    if (id == null || !selectedIds.has(id)) return;
+    const style = moduleStyles?.[file.file_name] || moduleStyles?.[file.segment_name] || {};
+    const savedMode = validStlDisplayMode(style.mode);
+    if (savedMode && savedMode !== "hidden") {
+      modes[id] = savedMode;
+      return;
+    }
+    modes[id] = Number(style.opacity) >= 0.95 ? "solid" : "translucent";
+  });
+  return modes;
+}
+
+async function setStlMode(fileOrId, mode) {
+  const id = normalizedStlId(fileOrId);
+  const nextMode = validStlDisplayMode(mode);
+  if (id == null || !nextMode) return;
+  if (nextMode === "hidden") {
+    state.selectedStlIds.delete(id);
+    delete state.stlDisplayModes[id];
+  } else {
+    state.selectedStlIds.add(id);
+    state.stlDisplayModes[id] = nextMode;
+  }
+  await applyStlSelectionChange();
+}
+
+async function cycleStlMode(file) {
+  const next = {
+    hidden: "solid",
+    solid: "translucent",
+    translucent: "hidden",
+  }[stlMode(file)] || "translucent";
+  await setStlMode(file, next);
+}
+
+async function setAllStlMode(mode) {
+  const nextMode = validStlDisplayMode(mode);
+  if (!state.stlFiles.length || !nextMode) return;
+  if (nextMode === "hidden") {
+    state.selectedStlIds = new Set();
+    state.stlDisplayModes = {};
+  } else {
+    state.selectedStlIds = new Set(state.stlFiles.map((file) => normalizedStlId(file)).filter((id) => id != null));
+    state.stlDisplayModes = {};
+    state.selectedStlIds.forEach((id) => {
+      state.stlDisplayModes[id] = nextMode;
+    });
+  }
+  await applyStlSelectionChange();
+}
+
 function currentSeries() {
   return state.series.find((item) => item.series_uid === state.selectedSeriesUid) || null;
 }
@@ -829,56 +937,91 @@ async function selectSeries(uid, options = {}) {
 }
 
 function renderStl() {
-  $("stlCount").textContent = state.stlFiles.length;
+  $("stlCount").textContent = state.stlFiles.length ? `${state.selectedStlIds.size}/${state.stlFiles.length}` : "0";
   const models = [...new Set(state.stlFiles.map((item) => item.algorithm_model || state.algorithmModel || "未指定模型"))];
   $("modelRail").innerHTML = models.map((model) => `<span class="chip active">${escapeHtml(model)}</span>`).join("");
-  $("stlList").innerHTML = state.stlFiles.length
+  if (!state.stlFiles.length) {
-    ? state.stlFiles
+    $("stlList").innerHTML = `<div class="empty-state">当前算法模型没有 STL 文件</div>`;
-        .map((file, index) => {
+    renderAutoBoneOptions();
-          const checked = state.selectedStlIds.has(Number(file.id));
+    return;
-          return `
+  }
-            <label class="stl-row ${checked ? "active" : ""}" title="${escapeHtml(file.file_name)}">
+  const grouped = new Map();
-              <input type="checkbox" data-stl="${Number(file.id)}" ${checked ? "checked" : ""} />
+  state.stlFiles.forEach((file, index) => {
-              <span>
+    const family = stlFamilyLabel(file);
-                <strong>${escapeHtml(file.segment_name || file.file_name)}</strong>
+    if (!grouped.has(family)) grouped.set(family, []);
-                <small>${escapeHtml(file.family || "未分类")} · ${escapeHtml(file.category || "")} · ${formatBytes(file.size_bytes)}</small>
+    grouped.get(family).push({ file, index });
-                <small style="color:${cssColor(index)}">${escapeHtml(file.file_name)}</small>
+  });
-              </span>
+  $("stlList").innerHTML = [...grouped.entries()].map(([family, rows]) => {
-            </label>
+    const visibleCount = rows.filter(({ file }) => stlMode(file) !== "hidden").length;
-          `;
+    const collapsed = state.collapsedStlFamilies.has(family);
-        })
+    return `
-        .join("")
+      <section class="stl-family ${collapsed ? "collapsed" : ""}">
-    : `<div class="empty-state">当前算法模型没有 STL 文件</div>`;
+        <button class="stl-family-head" type="button" data-family-toggle="${escapeHtml(family)}" title="收起/展开 ${escapeHtml(family)}">
-  $("stlList").querySelectorAll("input[data-stl]").forEach((input) => {
+          <span>${escapeHtml(family)}</span>
-    input.addEventListener("change", async () => {
+          <em>${visibleCount}/${rows.length}</em>
-      const id = Number(input.dataset.stl);
+          <i></i>
-      if (input.checked) state.selectedStlIds.add(id);
+        </button>
-      else state.selectedStlIds.delete(id);
+        <div class="stl-family-list">
-      await applyStlSelectionChange();
+          ${rows.map(({ file, index }) => {
+            const id = normalizedStlId(file);
+            const mode = stlMode(file);
+            const color = stlColor(file, index);
+            return `
+              <button class="stl-row stl-mode-${mode} ${mode !== "hidden" ? "active" : ""}" type="button" data-stl-mode="${id}" style="--stl-color:${escapeHtml(color)}" title="${escapeHtml(file.file_name)}">
+                <span class="stl-row-main">
+                  <strong>${escapeHtml(file.segment_name || file.file_name)}</strong>
+                  <small>${escapeHtml(file.family || "未分类")} · ${escapeHtml(file.category || "")} · ${formatBytes(file.size_bytes)}</small>
+                  <small class="stl-file-name">${escapeHtml(file.file_name)}</small>
+                </span>
+                <span class="stl-visibility-swatch ${mode}" aria-label="${escapeHtml(STL_DISPLAY_LABELS[mode])}"></span>
+              </button>
+            `;
+          }).join("")}
+        </div>
+      </section>
+    `;
+  }).join("");
+  $("stlList").querySelectorAll("[data-family-toggle]").forEach((button) => {
+    button.addEventListener("click", () => {
+      const family = button.dataset.familyToggle;
+      if (state.collapsedStlFamilies.has(family)) state.collapsedStlFamilies.delete(family);
+      else state.collapsedStlFamilies.add(family);
+      renderStl();
+    });
+  });
+  $("stlList").querySelectorAll("[data-stl-mode]").forEach((button) => {
+    button.addEventListener("click", async () => {
+      const id = Number(button.dataset.stlMode);
+      const file = state.stlFiles.find((item) => normalizedStlId(item) === id);
+      if (file) await cycleStlMode(file);
     });
   });
   renderAutoBoneOptions();
 }
 
 async function selectAllStl() {
-  if (!state.stlFiles.length) return;
+  await setAllStlMode("translucent");
-  state.selectedStlIds = new Set(state.stlFiles.map((file) => Number(file.id)).filter(Number.isFinite));
-  await applyStlSelectionChange();
 }
 
 async function invertStlSelection() {
   if (!state.stlFiles.length) return;
-  const next = new Set();
+  const nextSelected = new Set();
+  const nextModes = {};
   state.stlFiles.forEach((file) => {
-    const id = Number(file.id);
+    const id = normalizedStlId(file);
-    if (Number.isFinite(id) && !state.selectedStlIds.has(id)) next.add(id);
+    if (id != null && !state.selectedStlIds.has(id)) {
+      nextSelected.add(id);
+      nextModes[id] = "translucent";
+    }
   });
-  state.selectedStlIds = next;
+  state.selectedStlIds = nextSelected;
+  state.stlDisplayModes = nextModes;
   await applyStlSelectionChange();
 }
 
 async function applyStlSelectionChange() {
   markDirty("stl");
+  syncStlDisplayModesForSelection();
   renderStl();
   const loadedIds = new Set(state.modelMeshes.map((record) => Number(record.file?.id)).filter(Number.isFinite));
   const needsLoad = [...state.selectedStlIds].some((id) => !loadedIds.has(Number(id)));
@@ -1090,6 +1233,15 @@ function updateStretchButtons() {
   });
 }
 
+function renderPoseSectionCollapse() {
+  const manualCollapsed = Boolean(state.collapsedPoseSections.manual);
+  const autoCollapsed = Boolean(state.collapsedPoseSections.auto);
+  $("poseManualBody")?.classList.toggle("collapsed", manualCollapsed);
+  $("poseAutoBody")?.classList.toggle("collapsed", autoCollapsed);
+  $("poseManualToggle")?.classList.toggle("collapsed", manualCollapsed);
+  $("poseAutoToggle")?.classList.toggle("collapsed", autoCollapsed);
+}
+
 function applyPoseLockState() {
   const locked = Boolean(state.poseControlsLocked);
   const selectors = [
@@ -1099,6 +1251,7 @@ function applyPoseLockState() {
     "#resetRotationBtn",
     "#resetTransformBtn",
     "#resetFlipBtn",
+    "#openAutoModalBtn",
     "#autoSettingsPanel input",
     "#autoSettingsPanel button",
     "#savePoseBtn",
@@ -1518,9 +1671,11 @@ function applyModelDetail() {
   state.modelMeshes.forEach((record) => {
     const material = record.mesh.material;
     if (!material) return;
-    material.opacity = detail.opacity;
+    const mode = stlMode(record.file);
-    material.transparent = detail.opacity < 1;
+    const opacity = mode === "solid" ? 1 : Math.min(0.52, detail.opacity);
-    material.depthWrite = detail.depthWrite;
+    material.opacity = opacity;
+    material.transparent = opacity < 1;
+    material.depthWrite = mode === "solid" ? true : false;
     material.wireframe = detail.wireframe;
     material.metalness = detail.metalness;
     material.roughness = detail.roughness;
@@ -1530,9 +1685,8 @@ function applyModelDetail() {
 }
 
 function applyStlVisibility() {
-  const selected = state.selectedStlIds;
   state.modelMeshes.forEach((record) => {
-    record.mesh.visible = selected.has(Number(record.file?.id));
+    record.mesh.visible = stlMode(record.file) !== "hidden";
   });
   if (state.modelBoundsFrame) state.modelBoundsFrame.visible = state.modelMeshes.some((record) => record.mesh.visible);
   if (state.dicomGroup) state.dicomGroup.visible = state.fusionMode !== "model";
@@ -2325,8 +2479,9 @@ async function buildStlModels(volume, onProgress = null) {
     const geometry = await loader.loadAsync(`/api/stl/file?${params.toString()}`);
     geometry.computeVertexNormals();
     geometry.computeBoundingBox();
+    const color = stlColor(file, index);
     const material = new THREE.MeshStandardMaterial({
-      color: STL_COLORS[index % STL_COLORS.length],
+      color,
       metalness: detail.metalness,
       roughness: detail.roughness,
       transparent: true,
@@ -2338,9 +2493,9 @@ async function buildStlModels(volume, onProgress = null) {
     const mesh = new THREE.Mesh(geometry, material);
     mesh.name = file.segment_name || file.file_name;
     mesh.userData.file = file;
-    mesh.userData.color = cssColor(index);
+    mesh.userData.color = color;
     state.rawModelGroup.add(mesh);
-    const record = { mesh, file, color: cssColor(Number(file.id) || index), index: Number(file.id) || index };
+    const record = { mesh, file, color, index };
     state.modelMeshes.push(record);
     freshRecords.push(record);
     onProgress?.(((index + 1) / Math.max(files.length, 1)) * 100);
@@ -2385,6 +2540,7 @@ async function buildStlModels(volume, onProgress = null) {
   updateBaseModelScaleFromBounds();
   if (size.x || size.y || size.z) addModelBoundsFrame(size);
   applyStlVisibility();
+  applyModelDetail();
   applyPose();
   scheduleMappingDraw();
   onProgress?.(100);
@@ -2524,6 +2680,39 @@ function readAutoSettings() {
   };
 }
 
+function resetAutoSettings() {
+  if (state.poseControlsLocked) return;
+  const checkedDefaults = {
+    autoX: true,
+    autoY: true,
+    autoZ: true,
+    autoScale: true,
+  };
+  Object.entries(checkedDefaults).forEach(([id, value]) => {
+    const input = $(id);
+    if (input) input.checked = value;
+  });
+  const valueDefaults = {
+    autoSampleSlices: 9,
+    autoSampleSlicesNumber: 9,
+    autoBoneReward: 1,
+    autoOutsidePenalty: 0.1,
+    autoMovePenalty: 0,
+    autoScalePenalty: 0,
+    autoIterations: 30,
+    autoCandidates: 36,
+  };
+  Object.entries(valueDefaults).forEach(([id, value]) => {
+    const input = $(id);
+    if (input) input.value = value;
+  });
+  renderAutoBoneOptions();
+  state.autoResult = null;
+  setAutoProgress(false);
+  setAutoState("已恢复", "ok");
+  $("autoResult").textContent = "迭代参数已恢复初始设置。";
+}
+
 function poseDelta(from, to) {
   return {
     rotateX: Number(((to.rotateX || 0) - (from.rotateX || 0)).toFixed(3)),
@@ -2999,7 +3188,15 @@ async function saveRegistration(nextStatus = null) {
           algorithm_model: file.algorithm_model,
         })),
         transform: state.pose,
-        module_styles: Object.fromEntries(selectedFiles.map((file, index) => [file.file_name, { color: cssColor(index), opacity: modelDetailSettings().opacity, detail: state.modelDetail }])),
+        module_styles: Object.fromEntries(selectedFiles.map((file, index) => {
+          const mode = stlMode(file);
+          return [file.file_name, {
+            color: stlColor(file, index),
+            opacity: mode === "solid" ? 1 : 0.52,
+            detail: state.modelDetail,
+            mode,
+          }];
+        })),
         dicom_reference: {
           series_uid: selectedSeries.series_uid,
           series_number: selectedSeries.series_number,
@@ -3128,17 +3325,24 @@ function wireEvents() {
   $("saveBtn").addEventListener("click", () => saveRegistration());
   $("statusBtn").addEventListener("click", () => saveRegistration(state.registrationStatus === "registered" ? "unregistered" : "registered"));
   $("notes").addEventListener("input", () => markDirty("notes"));
-  $("selectAllStlBtn").addEventListener("click", selectAllStl);
+  $("hideAllStlBtn").addEventListener("click", () => setAllStlMode("hidden"));
-  $("invertStlBtn").addEventListener("click", invertStlSelection);
+  $("solidAllStlBtn").addEventListener("click", () => setAllStlMode("solid"));
+  $("translucentAllStlBtn").addEventListener("click", () => setAllStlMode("translucent"));
   $("resetRotationBtn").addEventListener("click", () => resetPose("rotation"));
   $("resetTransformBtn").addEventListener("click", () => resetPose("transform"));
   $("resetFlipBtn").addEventListener("click", () => resetPose("flip"));
+  $("poseManualToggle").addEventListener("click", () => {
+    state.collapsedPoseSections.manual = !state.collapsedPoseSections.manual;
+    renderPoseSectionCollapse();
+  });
+  $("poseAutoToggle").addEventListener("click", () => {
+    state.collapsedPoseSections.auto = !state.collapsedPoseSections.auto;
+    renderPoseSectionCollapse();
+  });
   $("stretchXBtn").addEventListener("click", () => stretchAxis("x"));
   $("stretchYBtn").addEventListener("click", () => stretchAxis("y"));
   $("stretchZBtn").addEventListener("click", () => stretchAxis("z"));
-  $("openAutoModalBtn").addEventListener("click", () => {
+  $("openAutoModalBtn").addEventListener("click", resetAutoSettings);
-    $("autoSettingsPanel").scrollIntoView({ block: "nearest", behavior: "smooth" });
-  });
   $("suggestBoneBtn").addEventListener("click", suggestBoneSelection);
   $("autoCoarseBtn")?.addEventListener("click", runAutoCoarse);
   $("autoFineBtn")?.addEventListener("click", runAutoFine);
@@ -3308,6 +3512,7 @@ function wireEvents() {
 }
 
 wireEvents();
+renderPoseSectionCollapse();
 
 if (state.token) {
   bootstrap();

DICOM_and_UPP配准/static/index.html

@@ -169,9 +169,10 @@
               </div>
               <div class="tool-section-title compact-title">
                 <span>STL</span>
-                <div class="title-actions">
+                <div class="title-actions model-visibility-actions">
-                  <button id="selectAllStlBtn" type="button">全选</button>
+                  <button id="hideAllStlBtn" class="model-eye-btn hidden-eye" type="button" title="全部取消显示" aria-label="全部取消显示"><span></span></button>
-                  <button id="invertStlBtn" type="button">反选</button>
+                  <button id="solidAllStlBtn" class="model-eye-btn solid-eye" type="button" title="全部实显" aria-label="全部实显"><span></span></button>
+                  <button id="translucentAllStlBtn" class="model-eye-btn translucent-eye" type="button" title="全部半透明" aria-label="全部半透明"><span></span></button>
                 </div>
                 <em id="stlCount">0</em>
               </div>
@@ -182,26 +183,30 @@
             <section class="tool-pane" data-tool-pane="pose">
               <div class="tool-section-title">
                 <span>位姿手动调整</span>
+                <button id="poseManualToggle" class="section-toggle" type="button" title="收起/展开位姿手动调整" aria-label="收起或展开位姿手动调整"><span></span></button>
                 <em id="saveState">未保存</em>
               </div>
-              <div class="pose-actions">
+              <div id="poseManualBody" class="pose-section-body">
-                <button id="resetRotationBtn" type="button">重置旋转</button>
+                <div class="pose-actions">
-                <button id="resetTransformBtn" type="button">重置平移缩放</button>
+                  <button id="resetRotationBtn" type="button">重置旋转</button>
-                <button id="resetFlipBtn" type="button">重置镜像</button>
+                  <button id="resetTransformBtn" type="button">重置平移缩放</button>
+                  <button id="resetFlipBtn" type="button">重置镜像</button>
+                </div>
+                <div class="flip-row">
+                  <button data-flip="flipX">镜像 X</button>
+                  <button data-flip="flipY">镜像 Y</button>
+                  <button data-flip="flipZ">镜像 Z</button>
+                </div>
+                <div id="poseGrid" class="pose-grid"></div>
               </div>
-              <div class="flip-row">
-                <button data-flip="flipX">镜像 X</button>
-                <button data-flip="flipY">镜像 Y</button>
-                <button data-flip="flipZ">镜像 Z</button>
-              </div>
-              <div id="poseGrid" class="pose-grid"></div>
 
               <div class="tool-section-title">
                 <span>位姿自动调整</span>
+                <button id="poseAutoToggle" class="section-toggle" type="button" title="收起/展开位姿自动调整" aria-label="收起或展开位姿自动调整"><span></span></button>
                 <em id="autoState">未运行</em>
               </div>
-              <div class="auto-box compact-auto">
+              <div id="poseAutoBody" class="pose-section-body auto-box compact-auto">
-                <button id="openAutoModalBtn" class="wide-action" type="button">自动调整设置</button>
+                <button id="openAutoModalBtn" class="wide-action" type="button">恢复初始设置</button>
                 <div id="autoSettingsPanel" class="auto-settings-panel">
                   <div class="auto-options modal-options">
                     <label><input id="autoX" type="checkbox" checked /> X 方向</label>
@@ -228,6 +233,7 @@
                       </div>
                     </section>
                   </div>
+                  <div class="iteration-section-title">迭代参数</div>
                   <div class="auto-weight-grid">
                     <label>命中奖励<input id="autoBoneReward" type="number" step="0.1" value="1" /></label>
                     <label>区域惩罚<input id="autoOutsidePenalty" type="number" step="0.05" value="0.1" /></label>
@@ -236,9 +242,7 @@
                     <label>迭代轮次<input id="autoIterations" type="number" min="1" max="100" value="30" /></label>
                     <label>每轮候选<input id="autoCandidates" type="number" min="6" max="96" value="36" /></label>
                   </div>
-                  <div class="registration-operation-hint">
+                  <div class="iteration-section-title">迭代操作区</div>
-                    下方为配准操作区：保存当前位姿、保存并迭代自动微调，或退回上次自动调整前位姿。
-                  </div>
                   <div class="pose-actions modal-actions save-pose-actions">
                     <button id="savePoseBtn" type="button">保存位姿</button>
                     <button id="saveIterateBtn" type="button">保存并迭代</button>

DICOM_and_UPP配准/static/styles.css

@@ -812,6 +812,89 @@ button {
   margin-left: auto;
 }
 
+.model-visibility-actions {
+  gap: 5px;
+}
+
+.tool-section-title button.model-eye-btn {
+  width: 30px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.model-eye-btn span {
+  position: relative;
+  width: 18px;
+  height: 13px;
+  display: block;
+}
+
+.model-eye-btn span::before {
+  content: "";
+  position: absolute;
+  inset: 1px 0;
+  border: 2px solid #c8f7ff;
+  border-radius: 50% / 60%;
+}
+
+.model-eye-btn span::after {
+  content: "";
+  position: absolute;
+  top: 5px;
+  left: 7px;
+  width: 5px;
+  height: 5px;
+  border-radius: 999px;
+  background: #c8f7ff;
+}
+
+.solid-eye span::before {
+  background: rgba(45, 212, 191, 0.28);
+}
+
+.translucent-eye span::before {
+  background:
+    linear-gradient(45deg, rgba(15, 23, 42, 0.82) 25%, transparent 25% 50%, rgba(15, 23, 42, 0.82) 50% 75%, transparent 75%) 0 0 / 5px 5px,
+    rgba(45, 212, 191, 0.22);
+}
+
+.hidden-eye span::after {
+  top: 5px;
+  left: -2px;
+  width: 22px;
+  height: 2px;
+  border-radius: 99px;
+  background: #cbd5e1;
+  transform: rotate(-38deg);
+}
+
+.section-toggle {
+  width: 30px;
+  height: 28px;
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  padding: 0 !important;
+}
+
+.section-toggle span {
+  width: 8px;
+  height: 8px;
+  border-right: 2px solid #c8f7ff;
+  border-bottom: 2px solid #c8f7ff;
+  transform: rotate(45deg);
+  transition: transform 0.16s ease;
+}
+
+.section-toggle.collapsed span {
+  transform: rotate(-45deg);
+}
+
 .tool-section-title em {
   color: var(--muted);
   font-size: 12px;
@@ -1486,17 +1569,18 @@ button {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
-  gap: 12px;
+  gap: 0;
   border-left: 1px solid rgba(148, 163, 184, 0.18);
   background: #0f172a;
+  padding: 12px 0 38px;
 }
 
 .mapping-slice-rail::before {
   content: "";
   position: absolute;
-  top: 26px;
+  top: 12px;
-  bottom: 56px;
+  bottom: 38px;
   left: 50%;
   width: 8px;
   transform: translateX(-50%);
@@ -1507,15 +1591,19 @@ button {
 #mappingSliceSlider {
   position: relative;
   z-index: 1;
-  width: min(66vh, 520px);
+  width: 34px;
-  height: 34px;
+  height: 100%;
-  transform: rotate(-90deg);
+  min-height: 180px;
+  transform: none;
+  writing-mode: vertical-lr;
+  direction: rtl;
   appearance: none;
   background: transparent;
 }
 
 #mappingSliceSlider::-webkit-slider-runnable-track {
-  height: 8px;
+  width: 8px;
+  height: 100%;
   border-radius: 999px;
   background: rgba(148, 163, 184, 0.2);
 }
@@ -1524,7 +1612,8 @@ button {
   appearance: none;
   width: 25px;
   height: 25px;
-  margin-top: -8.5px;
+  margin-left: -8.5px;
+  margin-top: 0;
   border: 3px solid #93c5fd;
   border-radius: 7px;
   background: #60a5fa;
@@ -1532,7 +1621,8 @@ button {
 }
 
 #mappingSliceSlider::-moz-range-track {
-  height: 8px;
+  width: 8px;
+  height: 100%;
   border-radius: 999px;
   background: rgba(148, 163, 184, 0.2);
 }
@@ -1711,15 +1801,17 @@ input[type="range"] {
 
 .stl-row {
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr) 30px;
-  gap: 10px;
+  gap: 12px;
-  align-items: start;
+  align-items: center;
   padding: 10px;
+  cursor: pointer;
+  transition: border-color 0.16s ease, background 0.16s ease, opacity 0.16s ease;
 }
 
-.stl-row input {
+.stl-row.stl-mode-hidden {
-  margin-top: 3px;
+  opacity: 0.62;
-  accent-color: var(--cyan);
+  background: rgba(8, 12, 18, 0.78);
 }
 
 .stl-row strong {
@@ -1731,6 +1823,101 @@ input[type="range"] {
   white-space: nowrap;
 }
 
+.stl-file-name {
+  color: var(--stl-color) !important;
+}
+
+.stl-family {
+  margin-bottom: 10px;
+}
+
+.stl-family-head {
+  width: 100%;
+  min-height: 32px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto 14px;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 7px;
+  border: 1px solid rgba(45, 212, 191, 0.35);
+  border-radius: 10px;
+  background: rgba(20, 184, 166, 0.08);
+  color: #dffcff;
+  font-size: 12px;
+  font-weight: 950;
+  text-align: left;
+  padding: 0 10px;
+  cursor: pointer;
+}
+
+.stl-family-head span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stl-family-head em {
+  color: #9debf4;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  font-style: normal;
+}
+
+.stl-family-head i {
+  width: 8px;
+  height: 8px;
+  border-right: 2px solid #9debf4;
+  border-bottom: 2px solid #9debf4;
+  transform: rotate(45deg);
+  transition: transform 0.16s ease;
+}
+
+.stl-family.collapsed .stl-family-list {
+  display: none;
+}
+
+.stl-family.collapsed .stl-family-head i {
+  transform: rotate(-45deg);
+}
+
+.stl-visibility-swatch {
+  width: 24px;
+  height: 24px;
+  justify-self: end;
+  border: 2px solid rgba(226, 232, 240, 0.68);
+  border-radius: 5px;
+  background: transparent;
+  box-shadow: inset 0 0 0 1px rgba(2, 6, 23, 0.78);
+}
+
+.stl-visibility-swatch.solid {
+  border-color: color-mix(in srgb, var(--stl-color) 78%, #ffffff 22%);
+  background: var(--stl-color);
+}
+
+.stl-visibility-swatch.translucent {
+  border-color: color-mix(in srgb, var(--stl-color) 72%, #ffffff 28%);
+  background:
+    linear-gradient(45deg, rgba(2, 6, 23, 0.82) 25%, transparent 25% 50%, rgba(2, 6, 23, 0.82) 50% 75%, transparent 75%) 0 0 / 8px 8px,
+    color-mix(in srgb, var(--stl-color) 48%, transparent);
+}
+
+.stl-visibility-swatch.hidden {
+  border-color: rgba(148, 163, 184, 0.66);
+  background: rgba(15, 23, 42, 0.5);
+}
+
+.stl-visibility-swatch.hidden::after {
+  content: "";
+  display: block;
+  width: 26px;
+  height: 2px;
+  margin: 9px 0 0 -3px;
+  border-radius: 99px;
+  background: rgba(226, 232, 240, 0.76);
+  transform: rotate(-45deg);
+}
+
 .pose-grid {
   display: grid;
   gap: 10px;
@@ -1830,6 +2017,18 @@ input[type="range"] {
   gap: 8px;
 }
 
+.pose-section-body.collapsed {
+  display: none;
+}
+
+.iteration-section-title {
+  margin: 2px 0 -2px;
+  color: #9debf4;
+  font-size: 12px;
+  font-weight: 950;
+  letter-spacing: 0;
+}
+
 .auto-settings-panel {
   display: grid;
   gap: 10px;
@@ -2039,18 +2238,6 @@ input[type="range"] {
   margin: 12px 0 0;
 }
 
-.registration-operation-hint {
-  border: 1px solid rgba(25, 214, 195, 0.26);
-  border-radius: 8px;
-  background: rgba(20, 184, 166, 0.08);
-  color: #a7f3d0;
-  font-size: 11px;
-  font-weight: 900;
-  line-height: 1.45;
-  margin-top: 12px;
-  padding: 9px 10px;
-}
-
 .auto-config-grid {
   display: grid;
   grid-template-columns: minmax(240px, 0.85fr) minmax(300px, 1.15fr);