feat: make app workspaces resizable

apps/acoustic-camera/main.js

@@ -6,6 +6,7 @@ import {
   localizationAlgorithmSupportsBackend,
 } from "/packages/acoustics-core/localization-algorithms.js";
 import { downloadJson, readJsonFile } from "/packages/contracts/io.js";
+import { createSplitPane } from "/packages/ui/split-pane.js";
 import {
   validateArrayDefinition,
   validateExperiment,
@@ -136,6 +137,19 @@ const elements = {
   validationMessage: byId("validation-message"),
 };
 
+const layoutSplitPane = createSplitPane({
+  container: byId("camera-layout"),
+  separator: byId("camera-split-handle"),
+  panel: byId("camera-controls"),
+  panelSide: "start",
+  storageKey: "micarrsim.camera.control-panel-width",
+  defaultSize: 420,
+  minSize: 320,
+  maxSize: 720,
+  minMainSize: 560,
+  enabledMediaQuery: "(min-width: 981px)",
+});
+
 const state = {
   arrayDefinition: null,
   scene: null,
@@ -472,11 +486,13 @@ function renderDocumentSummary() {
     line.className = "source-line";
     const name = document.createElement("strong");
     name.textContent = source.name;
+    name.title = source.name;
     const detail = document.createElement("span");
     detail.textContent =
       `${describeSignal(source.signal)} · ` +
       `(${source.position.map((value) => formatNumber(value, 2)).join(", ")}) m` +
       (source.trajectory?.length ? ` · 이동 ${source.trajectory.length} keyframes` : "");
+    detail.title = detail.textContent;
     line.append(name, detail);
     elements.sourceSummary.append(line);
   }
@@ -499,6 +515,7 @@ function renderAssets() {
     row.className = `asset-status ${status.ready ? "is-ready" : status.error ? "is-error" : ""}`;
     const label = document.createElement("strong");
     label.textContent = status.descriptor.fileName;
+    label.title = status.descriptor.fileName;
     const value = document.createElement("span");
     value.textContent = status.ready ? "연결됨" : status.error ? "오류" : "파일 필요";
     value.title = status.error ?? "";
@@ -526,6 +543,8 @@ function renderBandEditors() {
       input.dataset.bandIndex = String(index);
       input.dataset.bandKey = key;
       input.setAttribute("aria-label", `${band.id} ${label}`);
+      input.title = label;
+      if (type !== "color") input.placeholder = label;
       if (type === "number") {
         input.min = "0";
         input.step = "1";
@@ -1879,6 +1898,7 @@ function installActionListeners() {
     sceneVisualization.destroy();
     arrayVisualization.destroy();
     assetRuntime.dispose();
+    layoutSplitPane.destroy();
   });
 }