feat: make app workspaces resizable

apps/dataset-builder/main.js

@@ -2,6 +2,7 @@ import { encodeMonoPcm16Wav } from "/packages/acoustics-core/wav.js";
 import { decodeAudioFile, MAX_DECODED_AUDIO_BYTES } from "/packages/audio-io/browser-audio.js";
 import { downloadBlob, downloadJson, readJsonFile, sha256File } from "/packages/contracts/io.js";
 import { validateScene } from "/packages/contracts/validation.js";
+import { createSplitPane } from "/packages/ui/split-pane.js";
 import { createAudioRuntime } from "./audio-runtime.js";
 import { createSceneCanvas } from "./canvas-view.js";
 import {
@@ -51,6 +52,19 @@ const elements = Object.fromEntries(
 );
 elements.validationCard = document.querySelector(".validation-card");
 
+const layoutSplitPane = createSplitPane({
+  container: byId("builder-layout"),
+  separator: byId("builder-split-handle"),
+  panel: byId("builder-controls"),
+  panelSide: "end",
+  storageKey: "micarrsim.builder.control-panel-width",
+  defaultSize: 430,
+  minSize: 360,
+  maxSize: 720,
+  minMainSize: 560,
+  enabledMediaQuery: "(min-width: 1101px)",
+});
+
 const state = {
   scene: null,
   selectedSourceId: null,
@@ -173,12 +187,14 @@ function renderSourceCards() {
     dot.className = "source-card__dot";
     const name = document.createElement("strong");
     name.textContent = source.name;
+    name.title = source.name;
     heading.append(dot, name);
     const signal = document.createElement("small");
     signal.textContent = describeSignal(source.signal);
     const position = document.createElement("small");
     const motion = Array.isArray(source.trajectory) ? ` · 이동 ${source.trajectory.length}점` : "";
     position.textContent = `x ${source.position[0].toFixed(2)} · y ${source.position[1].toFixed(2)} · z ${source.position[2].toFixed(2)} m${motion}`;
+    button.title = [source.name, signal.textContent, position.textContent].join("\n");
     button.append(heading, signal, position);
     button.addEventListener("click", () => {
       state.selectedSourceId = source.id;
@@ -369,7 +385,6 @@ function renderAssetList() {
     const label = document.createElement("span");
     label.className = "asset-chip__label";
     label.textContent = `${asset.kind} · ${asset.fileName}`;
-    label.title = `${asset.id}${asset.sha256 ? ` · ${asset.sha256}` : ""}`;
     const availability = document.createElement("span");
     availability.className = "asset-chip__state";
     availability.textContent = state.assetErrors.has(asset.id)
@@ -384,6 +399,7 @@ function renderAssetList() {
     remove.disabled = referenced;
     remove.title = referenced ? "먼저 이 asset을 사용하는 image/source/ambient를 변경하세요." : `${asset.fileName} 제거`;
     remove.addEventListener("click", () => removeAsset(asset.id));
+    label.title = [asset.fileName, asset.id, asset.sha256].filter(Boolean).join(" · ");
     chip.append(label, availability, remove);
     list.append(chip);
   }
@@ -1048,6 +1064,7 @@ window.addEventListener("beforeunload", (event) => {
 window.addEventListener("unload", () => {
   if (state.imageUrl) URL.revokeObjectURL(state.imageUrl);
   audioRuntime.dispose();
+  layoutSplitPane.destroy();
 });
 
 initialize().catch((error) => {