[web-demo] 控制欄可收合、可拖曳調整寬度並記憶版面

[doggy8088]

背景脈絡

Browser Lab（web-demo）目前是固定版面：左側控制欄（Workbook / Selection / Rows / Analyze / RAG / Markdown / Export）固定為 380px，與右側預覽面板之間只有固定的 16px 間距，既沒有收合機制，也沒有可拖曳的分隔線。

這個版面在下列情境會造成困擾：

• 只想檢視結果時，控制欄仍佔用約三分之一的工作區寬度。
• 檢視寬表格或長 JSON／Markdown 輸出時，預覽寬度不足。
• 需要同時看到完整控制項時，380px 又不夠寬（例如 Analyze 的條件與彙總編輯列）。
• 重新載入頁面後，使用者調整過的版面無法保留。

需求

1. 可收合（Toggle）：提供一個圖示切換鈕，可隱藏／顯示左側控制欄；收合後預覽面板應佔滿整個工作區。
2. 可拖曳調整寬度：左右兩側之間的分隔線必須能用滑鼠自由拖曳，即時改變控制欄寬度。
3. 狀態記憶：切換狀態與拖曳後的寬度都要寫入 localStorage，下次載入時還原。
4. 不破壞既有行為：桌面版與行動版（含 320px 最窄寬度）都不得出現橫向溢位；900px 以下的堆疊版面應保持單欄滿版。

期望行為

• 切換鈕位於預覽面板標題列左側，使用內嵌 SVG 的面板圖示，並透過 aria-expanded 反映目前狀態。
• 分隔線使用 role="separator"、aria-orientation="vertical" 與 aria-valuenow，可被鍵盤聚焦。
• 滑鼠拖曳需使用 pointer capture，讓游標移出分隔線時仍能持續調整。
• 雙擊分隔線可還原預設 380px。
• 鍵盤 ArrowLeft／ArrowRight 以 16px 為單位調整，Home／End 跳到最小／最大寬度。
• 寬度限制在 260px～720px，且不超過工作區寬度的 60%，確保預覽面板仍保有可用寬度。
• 儲存值無效或 localStorage 不可用時，回退為「展開、380px」的預設版面。

驗收條件

• 桌面版：切換後控制欄隱藏且預覽面板變寬，重新載入仍維持收合；再次切換可還原並同樣持久化。
• 桌面版：拖曳後寬度改變並在重新載入後還原；雙擊回到 380px；鍵盤調整亦會持久化。
• 桌面版：儲存值為無效內容時回退為預設值。
• 行動版（Pixel 7 與 320px）：分隔線不存在、單欄版面不變，切換收合後無橫向溢位，且重新載入仍維持收合。

影響範圍

• web-demo/public/index.html、web-demo/public/styles.css、web-demo/public/app.js：新增切換鈕、分隔線與版面狀態邏輯。
• web-demo/tests/browser.spec.mjs：新增桌面版與行動版 Playwright 回歸測試。
• 不涉及 Rust 核心、WASM API、CLI 或任何 XLSX 行為變更。