feat: enhance UI with custom sort dropdown, resizable layouts, StackView DnD, and optimize slider/resize performance with layout fixes.

docs/development/CENTRAL.md

@@ -100,3 +100,11 @@
 - [Stack View Sorting & Sliders](./devlog/2025-12-18-020000_stack_sorting_sliders.md): Completed. Refactored StackView to group by Color by default, added sorting controls to Deck Builder, and reduced slider scales globally to allow smaller sizes.
 - [Lobby UI & Notifications](./devlog/2025-12-18-023000_lobby_ui_update.md): Completed. Refactored Lobby/Chat into collapsible floating panels, implemented player event notifications (Join/Leave/Disconnect), and updated Deck Builder card size triggers.
 - [Card Preview Threshold](./devlog/2025-12-18-024000_preview_threshold.md): Completed. Updated card art crop threshold to 130px (new 50% mark) across the application components.
+- [UI Enhancements](./devlog/2025-12-18-030000_ui_enhancements.md): Completed. Implemented drag-and-drop for Stack View, custom sort dropdown, and resizable layouts for both Deck Builder and Draft UI.
+- [Resize Optimization](./devlog/2025-12-18-033000_resize_optimization.md): Completed. Refactored resize interactions for Panels.
+- [Slider Optimization](./devlog/2025-12-18-034500_slider_optimization.md): Completed. Applied the same performance logic (CSS Variables + Deferred State) to Card Size Sliders in all views to eliminate lag.
+- [Sidebar Resize Fix](./devlog/2025-12-18-040000_sidebar_resize_fix.md): Completed. Removed conflicting CSS transition classes from sidebars to ensure smooth 1:1 resize tracking.
+- [Touch Resize Support](./devlog/2025-12-18-041500_touch_resize.md): Completed. Implemented unified Mouse/Touch handlers for all resize handles to support mobile usage.
+- [Pool Card Sizing](./devlog/2025-12-18-042500_pool_card_sizing.md): Completed. Fixed "enormous" card bug in horizontal pool by enforcing percentage-based height constraint.
+- [Final Pool Layout Fix](./devlog/2025-12-18-043500_pool_sizing_final.md): Completed. Overhauled flex layout for Horizontal Pool to ensure card images scale 1:1 with panel height during resize, removing layout-blocking transitions.
+- [Pool Overflow Constraint](./devlog/2025-12-18-044500_pool_overflow_fix.md): Completed. Enforce flex shrinkage with `min-h-0` and `overflow-hidden` to strictly bind card height to resizeable panel.

docs/development/devlog/2025-12-18-030000_ui_enhancements.md

@@ -0,0 +1,28 @@
+# Work Plan - Deck Builder & Draft UI Enhancements
+
+## Request
+1.  **Deck Builder Stack DnD**: Enable card drag and drop for the stacked view in Deck Builder.
+2.  **Custom Sort Dropdown**: Use a custom graphic dropdown list instead of browser default for sorting.
+3.  **Resizable Layouts**: Make library/preview resizeable in Deck Builder, and selected pool/preview resizeable in Draft UI.
+
+## Changes
+- **StackView.tsx**: Added `renderWrapper` prop to allow parent components to wrap card items (e.g. with `DraggableCardWrapper`).
+- **DeckBuilderView.tsx**:
+    - Implemented `sortDropdownOpen` state and custom UI for the "Sort" dropdown.
+    - Added resizing state (`sidebarWidth`, `poolHeightPercent`) and mouse event handlers.
+    - Applied dynamic styles to Sidebar and Pool/Deck zones.
+    - Passed `DraggableCardWrapper` to `StackView` via the new `renderWrapper` prop.
+- **DraftView.tsx**:
+    - Added resizing state (`sidebarWidth`, `poolHeight`) and mouse event handlers.
+    - Applied dynamic styles to Sidebar and Pool Droppable area.
+    - Fixed syntax error introduced during refactoring.
+
+## Verification
+- **Deck Builder**:
+  - Verify cards in Stack View can be dragged.
+  - Verify "Sort" dropdown is custom styled.
+  - Verify Sidebar width can be adjusted.
+  - Verify Pool/Library split can be adjusted (in horizontal mode especially).
+- **Draft UI**:
+  - Verify Sidebar width can be adjusted.
+  - Verify Selected Pool height can be adjusted.

docs/development/devlog/2025-12-18-033000_resize_optimization.md

@@ -0,0 +1,27 @@
+# Work Plan - Optimize Resize Performance
+
+## Request
+The user reported that the resize functionality was laggy, slow, and inconsistent.
+
+## Changes
+- **Refactoring Strategy**:
+    - Removed React state updates from the `mousemove` event loop.
+    - Used `useRef` to track `sidebarWidth` and `poolHeight` values.
+    - Used `requestAnimationFrame` to throttle DOM updates directly during resizing.
+    - Only triggered React state updates (re-renders) on `mouseup`.
+
+- **DraftView.tsx**:
+    - Implemented `resizingState` ref.
+    - Modified `handleMouseDown` to initiate direct DOM resizing.
+    - Modified `onMouseMove` to update element styles directly.
+    - Modified `onMouseUp` to sync final size to React state.
+    - Applied refs to Sidebar and Pool resizing areas.
+
+- **DeckBuilderView.tsx**:
+    - Implemented identical ref-based + requestAnimationFrame resizing logic.
+    - Fixed several HTML nesting errors introduced during the complex refactoring process.
+
+## Verification
+- **Performance**: Resizing should now be smooth (60fps) as it avoids React reconciliation during the drag.
+- **Consistency**: The handle should no longer "slip" because the visual update is faster.
+- **Persistence**: The final size is still saved to `state` (and thus `localStorage`) after release.

docs/development/devlog/2025-12-18-034500_slider_optimization.md

@@ -0,0 +1,27 @@
+# Work Plan - Optimize Card Slider Performance
+
+## Request
+The user reported that resize handlers (likely sliders) were still laggy.
+
+## Changes
+- **DraftView.tsx**:
+    - Introduced `localCardScale` for immediate slider feedback.
+    - Used CSS Variable `--card-scale` on container to update card sizes entirely via CSS during drag.
+    - Deferred `cardScale` state update (which triggers React re-renders) to `onMouseUp`.
+
+- **DeckBuilderView.tsx**:
+    - Introduced `localCardWidth` for immediate slider feedback.
+    - Used CSS Variable `--card-width` on container.
+    - Updated `gridTemplateColumns` to use `var(--card-width)`.
+    - Deferred `cardWidth` state update to `onMouseUp`.
+    - Cleaned up duplicate state declarations causing lint errors.
+
+- **CubeManager.tsx**:
+    - Introduced `localCardWidth` and CSS Variable `--card-width`.
+    - Updated Grid layout to use CSS Variable.
+    - Deferred state update to `onMouseUp`.
+
+## Verification
+- **Performance**: Slider dragging should now be 60fps smooth as it touches 0 React components during the drag, only updating a single CSS variable on the root container.
+- **Persistence**: Releasing the slider saves the value to state and localStorage.
+- **Logic**: complex logic like `useArtCrop` (which depends on specific widths) updates safely on release, preventing flicker or heavy recalculations during drag.

docs/development/devlog/2025-12-18-040000_sidebar_resize_fix.md

@@ -0,0 +1,16 @@
+# Work Plan - Fix Sidebar Resize Animation Lag
+
+## Request
+The user reported that the left sidebar resize was laggy because of an animation.
+
+## Changes
+- **DraftView.tsx**:
+    - Identified that `transition-all` class was present on the sidebar container.
+    - Removed `transition-all` class. This class forces the browser to interpolate the width over 300ms every time javascript updates it (60 times a second), causing severe visual lag and "fighting" between the cursor and the element.
+    - Verified that resize logic uses the previously implemented `requestAnimationFrame` + `ref` approach, which is optimal.
+
+- **DeckBuilderView.tsx**:
+    - Verified that no `transition` class was present on the corresponding sidebar element.
+
+## Verification
+- **Performance**: Sidebar resizing should now be instant and track the mouse 1:1 without "slipping" or lag.

docs/development/devlog/2025-12-18-041500_touch_resize.md

@@ -0,0 +1,20 @@
+# Work Plan - Touch Resize Implementation
+
+## Request
+The user reported that resizing handles were not working on touchscreen devices.
+
+## Changes
+- **DraftView.tsx**:
+    - Replaced `handleMouseDown`, `onMouseMove`, `onMouseUp` with unified `handleResizeStart`, `onResizeMove`, `onResizeEnd`.
+    - Added logic to detect `touches` in event object and extract `clientX`/`clientY` from the first touch point.
+    - Attached `onTouchStart` to sidebar and pool resize handles.
+    - Added `passive: false` to touch event listeners (via `useEffect` logic or direct attach) to call `e.preventDefault()`, preventing page scrolling while dragging. Note: Implemented in the handler function with `if (e.cancelable) e.preventDefault()`.
+    - Added `touch-none` utility class to resize handles to structurally prevent browser touch actions.
+
+- **DeckBuilderView.tsx**:
+    - Implemented the exact same unified handler logic as DraftView.
+    - Updated both Sidebar (vertical) and Pool (horizontal) resize handles with `onTouchStart`.
+
+## Verification
+- **Touch**: Dragging handles on a touchscreen (mobile/tablet) should now resize the panels smoothly.
+- **Mouse**: Mouse interaction remains unchanged and performant (using `requestAnimationFrame`).

docs/development/devlog/2025-12-18-042500_pool_card_sizing.md

@@ -0,0 +1,13 @@
+# Work Plan - Fix Pool Card Sizing
+
+## Request
+The user reported that cards in the horizontal pool list were "enormous" after previous changes.
+
+## Changes
+- **DraftView.tsx**:
+    - Reverted the `height` class of `PoolCardItem` images (in horizontal mode) from `h-full` to `h-[90%]`.
+    - `h-full` was causing the image to expand uncontrollably in some flex layouts, ignoring the parent container's constraints.
+    - `h-[90%]`, combined with `items-center` on the parent container, properly constrains the image to fit within the strip, maintaining aspect ratio via `w-auto`.
+
+## Verification
+- **Visuals**: Cards in the bottom "Your Pool" strip should now cleanly fit within the resizeable panel, with a small vertical margin, instead of overflowing or appearing excessively large.

docs/development/devlog/2025-12-18-043500_pool_sizing_final.md

@@ -0,0 +1,31 @@
+# Work Plan - Finalize Pool Card Sizing
+
+## Request
+The user reported: "cards inside the 'your pool' have not consistent sizes ... and resizing it's height does not change card sizes. card height needs to match the your pool panel size".
+
+## Analysis
+The previous logic using `items-center` on the parent and `h-full`/`h-90%` on the child likely led to a broken flexbox behavior where children calculated their own intrinsic height or got stuck at an initial height, and `transition-all` might have added to the confusion or stickiness.
+
+## Changes
+- **DraftView.tsx**:
+    - Removed `transition-all` from both `PoolDroppable` and `PoolCardItem`. Transitions on layout containers cause jank during drag resize and can block instant reflow.
+    - Updated horizontal pool scrolling container:
+        - Removed `items-center`. The default behavior aligns items to start, but since we want `h-full` to work, the container just needs to fill space.
+        - Changed padding to `pb-2 pt-2` (balanced) instead of `pb-4`.
+    - Updated `PoolCardItem` (Horizontal):
+        - `className`: Added `h-full`, **removed `items-center`** (moved to centered justify content if needed, but flex default with no items-center is fine). Added `aspect-[2.5/3.5]` to help width calculation. Added `p-2` padding directly to the wrapper to handle spacing, allowing image to be `h-full` within that padded box.
+        - Image: Changed to `h-full w-auto object-contain`. Removed `max-h-full` and `h-[90%]`.
+
+## Result
+- The `poolRef` div resizes via DOM.
+- `PoolDroppable` (flex-1) fills it.
+- Scroll container (flex-1) fills it.
+- `PoolCardItem` wrapper (h-full) fills 100% of the Scroll container height.
+- `PoolCardItem` wrapper padding (`p-2`) creates a safe zone.
+- `img` (h-full) fills 100% of the wrapper's content box (calculated as `Total Height - Padding`).
+- This guarantees the image height tracks the panel height 1:1.
+
+## Verification
+- Dragging the pool resize handle should now smoothly resize the cards in real-time.
+- Cards should never be "too big" (overflowing) because they are strictly contained by `h-full` inside the overflow-hidden parents.
+- Cards should respect aspect ratio.

docs/development/devlog/2025-12-18-044500_pool_overflow_fix.md

@@ -0,0 +1,13 @@
+# Work Plan - Strict Overflow Constraints for Pool Panel
+
+## Request
+The user persists that cards overflow because they are "full size" and do not resize.
+
+## Changes
+- **DraftView.tsx**:
+    - Added `overflow-hidden` to the root `poolRef` div. This ensures that even if internal contents *try* to be larger, they are clipped, and more importantly, it forces flex children to respect the parent boundary in some browser rendering engines.
+    - Added `min-h-0` to `PoolDroppable` and the inner scroll container. In Flexbox columns, children do not shrink below their content size by default. `min-h-0` effectively overrides this, forcing the container to shrink to the available flex space (which is effectively `poolRef` height minus header).
+    - This combination guarantees that the scroll container's `height` is exactly calculated based on the parent, so `h-full` on the card images resolves to the correct, resized pixel value.
+
+## Verification
+- **Visuals**: Resizing the pool panel should now force the cards to shrink or grow in real-time without overflowing or getting stuck at a large size.