[WV2] Update migration status doc

docs/wardrobe-v2-migration.md

@@ -13,7 +13,7 @@ Replace the complex React outfit editor (`app/javascript/wardrobe-2020/`) with a
 
 ## Current Status
 
-**Wardrobe V2 is in early prototype/proof-of-concept stage.** It's accessible at `/wardrobe/v2` but is not yet linked from the main UI.
+**Wardrobe V2 is in active development.** It's accessible at `/wardrobe/v2` but is not yet linked from the main UI. Core outfit editing works: species/color/pose selection, item search, add/remove items.
 
 ### What's Implemented
 
@@ -21,7 +21,7 @@ Replace the complex React outfit editor (`app/javascript/wardrobe-2020/`) with a
 
 **Route & Controller** ([wardrobe_controller.rb](app/controllers/wardrobe_controller.rb))
 - `GET /wardrobe/v2` - Main wardrobe endpoint
-- Takes URL params: `species`, `color`, `objects[]` (item IDs)
+- Takes URL params: `species`, `color`, `pose`, `objects[]` (item IDs)
 - Returns full HTML page (no layout, designed to work standalone)
 - Defaults to Blue Acara if no pet specified
 
@@ -29,8 +29,10 @@ Replace the complex React outfit editor (`app/javascript/wardrobe-2020/`) with a
 - Full-page layout with preview (left) and controls (right)
 - Responsive: stacks vertically on mobile (< 800px)
 - Uses existing `outfit_viewer` partial for rendering
+- Split into partials: `_species_color_picker`, `_pose_picker`, `_pose_option`, `_item_card`, `_search_results`
 - Custom CSS in [wardrobe/show.css](app/assets/stylesheets/wardrobe/show.css)
 - Minimal JavaScript in [wardrobe/show.js](app/assets/javascripts/wardrobe/show.js)
+- Uses Idiomorph for DOM morphing on full-page navigations, so `<outfit-viewer>` layers are reused across navigations (smooth transitions instead of full re-renders)
 
 **Pet Selection** ([show.html.haml:31-42](app/views/wardrobe/show.html.haml#L31-L42))
 - Species/color picker using `<species-color-picker>` web component
@@ -40,7 +42,19 @@ Replace the complex React outfit editor (`app/javascript/wardrobe-2020/`) with a
 - Filters colors to only those compatible with selected species
 - Advanced fallback: if species+color combo doesn't exist, falls back to simple color ([wardrobe_controller.rb:13-16](app/controllers/wardrobe_controller.rb#L13-L16))
 
-**Item Display** ([show.html.haml:47-64](app/views/wardrobe/show.html.haml#L47-L64))
+**Pose Selection** ([_pose_picker.html.haml](app/views/wardrobe/_pose_picker.html.haml))
+- Pose picker button in preview overlay, showing emoji + label (e.g., "😀 Happy")
+- Opens popover with 3×2 grid: Happy/Sad/Sick × Masc/Fem
+- Visual thumbnails: each pose option renders a tiny `outfit-viewer` of the pet in that pose
+- Unavailable poses shown grayed out with ❓ indicator
+- Auto-submits form on radio button change via `<pose-picker-popover>` web component
+- Progressive enhancement: submit button fallback if JS disabled
+- Uses native HTML popover API with CSS anchor positioning
+- `pose` URL param preserved across all interactions
+- Falls back to canonical pose if selected pose isn't available for the pet type
+- Controller preloads SwfAsset manifests for all pose thumbnails for efficient rendering
+
+**Item Display** ([show.html.haml](app/views/wardrobe/show.html.haml))
 - Groups worn items by zone (Hat, Jacket, Wings, etc.)
 - Smart multi-zone simplification: hides redundant single-item zones
 - Shows items that occupy multiple zones in conflict zones only
@@ -91,9 +105,14 @@ Replace the complex React outfit editor (`app/javascript/wardrobe-2020/`) with a
 - Displays pet + item layers using HTML5 Canvas/iframes
 - Reused from existing codebase (also used on item pages, alt style pages, etc.)
 
+**`pose_emoji_and_label`** ([wardrobe_helper.rb](app/helpers/wardrobe_helper.rb))
+- Maps pose strings to emoji + text label (e.g., `HAPPY_MASC` → `{emoji: "😀", label: "Happy"}`)
+- Used by pose picker button display
+
 **Web Components**
 - `<species-color-picker>` - Auto-submit form on change ([species-color-picker.js](app/assets/javascripts/species-color-picker.js))
-- `<outfit-viewer>` - Pet/item layer rendering ([outfit-viewer.js](app/assets/javascripts/outfit-viewer.js))
+- `<pose-picker-popover>` - Auto-submit form on radio change, with CSS state for progressive enhancement ([pose-picker.js](app/assets/javascripts/pose-picker.js))
+- `<outfit-viewer>` - Pet/item layer rendering, with Idiomorph integration for smooth DOM morphing across navigations ([outfit-viewer.js](app/assets/javascripts/outfit-viewer.js))
 - `<outfit-layer>` - Individual layer loading/error states
 
 #### Model Support
@@ -111,7 +130,7 @@ Replace the complex React outfit editor (`app/javascript/wardrobe-2020/`) with a
 - Returns array of `SwfAsset` layers to render
 - Combines pet biology layers + compatible item layers
 - Filters by zone restrictions
-- Note: Doesn't currently handle alt styles (TODO in code)
+- Handles alt styles: switches biology layers to alt_style, filters item layers to body_id=0
 
 **`Item.appearances_for`**
 - Batch-loads item appearances for multiple items on a pet type
@@ -162,15 +181,14 @@ Below is a comprehensive comparison with the full feature set of Wardrobe 2020 (
 
 **Pose/Emotion Selection**
 - ✅ Has: Species and color pickers
-- ❌ No pose picker UI
+- ✅ Has: Pose picker UI with 3×2 emotion grid (Happy/Sad/Sick × Masc/Fem)
-- ❌ Locked to canonical pose for pet type
+- ✅ Has: Visual pose preview thumbnails (tiny outfit-viewer renders)
+- ✅ Has: Pose availability indicators (grayed out with ❓)
+- ✅ Has: Auto-recovery when pose becomes invalid (falls back to canonical)
+- ✅ Has: `pose` URL param preserved across interactions
 - ❌ Missing from Wardrobe 2020:
   - Tabbed interface (Expressions tab, Styles tab)
-  - Expression grid (3×2 matrix: Happy/Sad/Sick × Masc/Fem)
-  - Visual pose preview thumbnails
   - Unconverted (UC) pose option with warning
-  - Pose availability indicators (grayed out with "?")
-  - Auto-recovery when pose becomes invalid
   - Alt Styles/Pet Styles picker (Styles tab)
   - "Default" option to return to normal appearance
   - Visual thumbnails for each alt style
@@ -220,14 +238,12 @@ Below is a comprehensive comparison with the full feature set of Wardrobe 2020 (
 - ❌ Can't filter search by owned/wanted items
 
 **URL State**
-- ✅ Has: Basic state (species, color, items)
+- ✅ Has: Species, color, pose, items
 - ❌ Missing parameters:
   - `name` - Outfit name
-  - `pose` - Pose string (e.g., HAPPY_FEM)
+  - `style` - Alt Style ID (model supports it, but not wired to URL yet)
-  - `style` - Alt Style ID
   - `state` - Appearance ID (pose version pinning)
   - `closet[]` - Closeted items array
-- ❌ No browser back/forward support (full page reloads)
 - ❌ No legacy URL format support (#params)
 
 #### UI/UX Gaps
@@ -254,6 +270,7 @@ Below is a comprehensive comparison with the full feature set of Wardrobe 2020 (
 
 **Performance**
 - ❌ No optimistic updates (every change is full page navigation)
+- ✅ Has: Idiomorph DOM morphing for full-page navigations (outfit-viewer layers reused smoothly)
 - ❌ Could benefit from Turbo Frames for partial updates
 - ❌ No prefetching/preloading
 - ❌ Missing from Wardrobe 2020:
@@ -382,7 +399,7 @@ Browser displays (instant if Turbo, full page otherwise)
 ### Data Model Gaps
 
 **Current Issues:**
-- Alt style support not implemented in `visible_layers`
+- ~~Alt style support not implemented in `visible_layers`~~ (Done! Handles biology layers + body_id=0 filtering)
 - Outfit model designed around saved outfits (has `user_id`, `name`)
 - Need to handle unsaved/anonymous outfits better
 
@@ -390,11 +407,12 @@ Browser displays (instant if Turbo, full page otherwise)
 
 **Full Page Loads**
 - Every species/color/item change triggers new page load
-- Could use Turbo Frames to update only changed sections
+- Mitigated by Idiomorph: DOM morphing reuses outfit-viewer layers across navigations, avoiding full re-renders
+- Could further optimize with Turbo Frames for partial updates
 - Need to measure actual performance impact
 
 **Asset Preloading**
-- Currently preloads all visible layer manifests ([outfits_controller.rb:112](app/controllers/outfits_controller.rb#L112))
+- Preloads all visible layer manifests + pose thumbnail manifests ([wardrobe_controller.rb](app/controllers/wardrobe_controller.rb))
 - Good for parallelization, but loads data that might not be needed
 - Could be more selective
 
@@ -420,6 +438,11 @@ Browser displays (instant if Turbo, full page otherwise)
 ## Next Steps
 
 **Recently Completed:**
+- ✅ Pose selection (January 2026)
+  - 3×2 emotion grid with visual thumbnails
+  - Pose availability indicators and canonical fallback
+  - `pose` URL param with state preservation
+  - Progressive enhancement via `<pose-picker-popover>` web component
 - ✅ Basic item search functionality (November 2025)
   - Text search with auto-filtering by pet compatibility
   - Pagination with 30 items per page
@@ -459,22 +482,22 @@ Browser displays (instant if Turbo, full page otherwise)
      - [ ] Navigation blocking for unsaved changes
      - [ ] Outfit menu (Delete, Edit a Copy)
 
-3. **Pose Selection** 🟡 Important
+3. **Pose Selection** 🟢 Complete (core), 🟡 Enhancements pending
-   - [ ] Pose picker UI (emotion grid)
+   - [x] Pose picker UI (3×2 emotion grid with popover)
-   - [ ] Visual pose thumbnails (tiny pet renders)
+   - [x] Visual pose thumbnails (tiny outfit-viewer renders)
-   - [ ] Update pet_state via URL params
+   - [x] Update pet_state via URL params
-   - [ ] Handle missing/invalid poses gracefully
+   - [x] Handle missing/invalid poses gracefully (canonical fallback)
-   - [ ] Add `pose` param to URL state
+   - [x] Add `pose` param to URL state
+   - [x] Pose availability indicators (gray out unavailable with ❓)
+   - [x] Auto-recovery when pose becomes invalid
    - Optional enhancements:
      - [ ] Tabbed interface (Expressions / Styles)
-     - [ ] Pose availability indicators (gray out unavailable)
-     - [ ] Auto-recovery when pose becomes invalid
 
 4. **Alt Styles Support** 🟡 Important
-   - [ ] Alt styles picker (Styles tab in pose picker?)
+   - [ ] Alt styles picker UI (Styles tab in pose picker?)
    - [ ] Visual thumbnails for each style
    - [ ] Add `style` param to URL state
-   - [ ] Update `Outfit#visible_layers` to handle alt styles
+   - [x] `Outfit#visible_layers` handles alt styles (biology layers + body_id=0 filtering)
    - [ ] "Default" option to return to normal
    - Optional enhancements:
      - [ ] Link to Rainbow Pool Styles info
@@ -556,7 +579,8 @@ Browser displays (instant if Turbo, full page otherwise)
     - [ ] Item restoration logic
 
 14. **URL Enhancements**
-    - [ ] Add missing params (pose, style, state, closet[])
+    - [x] `pose` param
+    - [ ] Add missing params (style, state, closet[])
     - [ ] Browser back/forward support (Turbo handles this?)
     - [ ] Legacy URL format support (#params)
     - [ ] Clean URL generation
@@ -622,12 +646,12 @@ Browser displays (instant if Turbo, full page otherwise)
 ### Success Criteria for Each Phase
 
 **Phase 1 (MVP):**
-- ✅ Can search for and add items
+- ✅ Can search for and add items *(done)*
-- ✅ Can remove items
+- ✅ Can remove items *(done)*
-- ✅ Can change species/color/pose
+- ✅ Can change species/color/pose *(done)*
 - ✅ Can save and load outfits
 - ✅ Can use alt styles
-- ✅ Works without JavaScript (progressive enhancement)
+- ✅ Works without JavaScript (progressive enhancement) *(done)*
 
 **Phase 2 (Polish):**
 - ✅ Feels responsive and smooth
@@ -971,13 +995,19 @@ This section documents ALL features in the React-based Wardrobe 2020 for referen
 **Wardrobe V2 Files:**
 - Controller: [app/controllers/wardrobe_controller.rb](../app/controllers/wardrobe_controller.rb)
 - View: [app/views/wardrobe/show.html.haml](../app/views/wardrobe/show.html.haml)
-- Search results partial: [app/views/wardrobe/_search_results.html.haml](../app/views/wardrobe/_search_results.html.haml)
+- Partials:
+  - [app/views/wardrobe/_species_color_picker.html.haml](../app/views/wardrobe/_species_color_picker.html.haml)
+  - [app/views/wardrobe/_pose_picker.html.haml](../app/views/wardrobe/_pose_picker.html.haml)
+  - [app/views/wardrobe/_pose_option.html.haml](../app/views/wardrobe/_pose_option.html.haml)
+  - [app/views/wardrobe/_item_card.html.haml](../app/views/wardrobe/_item_card.html.haml)
+  - [app/views/wardrobe/_search_results.html.haml](../app/views/wardrobe/_search_results.html.haml)
 - Helpers: [app/helpers/wardrobe_helper.rb](../app/helpers/wardrobe_helper.rb)
 - Tests: [spec/helpers/wardrobe_helper_spec.rb](../spec/helpers/wardrobe_helper_spec.rb)
 - Styles: [app/assets/stylesheets/wardrobe/show.css](../app/assets/stylesheets/wardrobe/show.css)
 - JavaScript: [app/assets/javascripts/wardrobe/show.js](../app/assets/javascripts/wardrobe/show.js)
 - Web Components:
   - [app/assets/javascripts/species-color-picker.js](../app/assets/javascripts/species-color-picker.js)
+  - [app/assets/javascripts/pose-picker.js](../app/assets/javascripts/pose-picker.js)
   - [app/assets/javascripts/outfit-viewer.js](../app/assets/javascripts/outfit-viewer.js)
 
 **Wardrobe 2020 Files (React):**
@@ -991,5 +1021,5 @@ This section documents ALL features in the React-based Wardrobe 2020 for referen
 ---
 
 **Document Status:** Living document - update as migration progresses
-**Last Updated:** 2025-11-03
+**Last Updated:** 2026-02-05
 **Current Branch:** `feature/wardrobe-v2`