fix: collapsible bottom sheet + pinch-to-zoom on mobile

- Bottom sheet starts collapsed (handle bar only), swipe up to expand
- Tabs visible when collapsed in puzzle view, content hidden
- Swipe down or tap handle to collapse
- Add usePinchZoom hook: two-finger pinch gesture controls canvas zoom
- Pinch zoom wired into both Sandbox and Puzzle View canvases

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/BottomSheet.jsx

@@ -3,7 +3,6 @@ import { useState, useRef, useCallback } from 'react';
 export default function BottomSheet({ tabs, activeTab, onTabChange, children, className = '' }) {
   const [expanded, setExpanded] = useState(false);
   const startY = useRef(0);
-  const sheetRef = useRef(null);
 
   const handleTouchStart = useCallback((e) => {
     startY.current = e.touches[0].clientY;
@@ -11,28 +10,30 @@ export default function BottomSheet({ tabs, activeTab, onTabChange, children, cl
 
   const handleTouchEnd = useCallback((e) => {
     const deltaY = e.changedTouches[0].clientY - startY.current;
-    if (deltaY < -40) setExpanded(true);
-    if (deltaY > 40) setExpanded(false);
+    if (deltaY < -30) setExpanded(true);
+    if (deltaY > 30) setExpanded(false);
   }, []);
 
   return (
     <div
-      ref={sheetRef}
-      className={`bottom-sheet ${expanded ? 'expanded' : ''} ${className}`}
+      className={`bottom-sheet ${expanded ? 'expanded' : 'collapsed'} ${className}`}
       onTouchStart={handleTouchStart}
       onTouchEnd={handleTouchEnd}
     >
-      <div className="bottom-sheet-handle" onClick={() => setExpanded(e => !e)}>
+      <div className="bottom-sheet-handle" onClick={() => setExpanded(v => !v)}>
         <div className="bottom-sheet-handle-bar" />
+        {!expanded && !tabs && (
+          <span className="bottom-sheet-peek-label">Modulos ▲</span>
+        )}
       </div>
 
       {tabs && tabs.length > 0 && (
-        <div className="bottom-sheet-tabs">
+        <div className="bottom-sheet-tabs" onClick={() => !expanded && setExpanded(true)}>
           {tabs.map(tab => (
             <button
               key={tab.id}
               className={`bottom-sheet-tab ${activeTab === tab.id ? 'active' : ''}`}
-              onClick={() => onTabChange?.(tab.id)}
+              onClick={() => { onTabChange?.(tab.id); setExpanded(true); }}
             >
               {tab.label}
               {activeTab === tab.id && <div className="bottom-sheet-tab-line" />}
@@ -41,9 +42,11 @@ export default function BottomSheet({ tabs, activeTab, onTabChange, children, cl
         </div>
       )}
 
-      <div className="bottom-sheet-content">
-        {children}
-      </div>
+      {expanded && (
+        <div className="bottom-sheet-content">
+          {children}
+        </div>
+      )}
     </div>
   );
 }