Add resizable panes with drag handles, min widths, and persistence

src/app/App.tsx

@@ -1,19 +1,25 @@
 import { ConfirmDialog } from './components/ConfirmDialog';
 import { LivePreview } from './components/LivePreview';
+import { ResizeHandle } from './components/ResizeHandle';
 import { SnippetLibrary } from './components/SnippetLibrary';
 import { SpecEditor } from './components/SpecEditor';
 import { ThemeToggle } from './components/ThemeToggle';
+import { usePanesStore } from './stores/PanesStore';
 import styles from './App.module.css';
 
 /**
  * Application shell — the three-pane workspace from spec §01A
  * (library · editor · preview) under a fixed header.
  *
- * M1 fills the panes with the MVP authoring loop. Pane resizing/toggling,
- * modals, routing, and shortcuts arrive in later milestones (see
+ * The center editor flexes; the library and preview carry remembered widths and
+ * are resized via the drag handles between them (spec §01A). Pane show/hide
+ * toggling, modals, routing, and shortcuts arrive in later milestones (see
  * docs/IMPLEMENTATION-PLAN.md).
  */
 export function App() {
+  const libraryWidth = usePanesStore((s) => s.libraryWidth);
+  const previewWidth = usePanesStore((s) => s.previewWidth);
+
   return (
     <div className={styles.app}>
       <header className={styles.header}>
@@ -24,13 +30,19 @@ export function App() {
       </header>
 
       <main className={styles.panes}>
-        <section className={styles.pane} aria-label="Snippet library">
+        <section
+          className={styles.pane}
+          style={{ width: libraryWidth }}
+          aria-label="Snippet library"
+        >
           <SnippetLibrary />
         </section>
+        <ResizeHandle side="library" label="Resize snippet library" />
         <section className={styles.paneEditor} aria-label="Spec editor">
           <SpecEditor />
         </section>
-        <section className={styles.pane} aria-label="Live preview">
+        <ResizeHandle side="preview" label="Resize live preview" />
+        <section className={styles.pane} style={{ width: previewWidth }} aria-label="Live preview">
           <LivePreview />
         </section>
       </main>