Replan transform tools and saving

TODO.md

@@ -111,25 +111,42 @@ A step-by-step checklist for porting MatterControl's design features to a Vue +
 
 ## Phase 5: Transform Tools
 
-### Transform Gizmos
-- [ ] Install three.js `TransformControls`
+### Translate Mode (Default with Selection)
+- [ ] Create custom translate gizmo with 3 axis arrows (colored by axis)
 - [ ] Attach gizmo to selected object(s)
-- [ ] Implement translate mode
-- [ ] Implement rotate mode
-- [ ] Implement scale mode
+- [ ] Left-drag handle: free translate along axis
+- [ ] Right-drag handle: grid-aligned translate along axis
+- [ ] Mouse wheel on handle: change grid granularity
 - [ ] Hide gizmo when nothing selected
 
-### Tool Switching
-- [ ] Create toolbar with tool buttons (Select, Move, Rotate, Scale)
-- [ ] Add keyboard shortcuts (Q=Select, W=Move, E=Rotate, R=Scale)
-- [ ] Show active tool indicator
-- [ ] Add Escape to switch to Select tool
+### Rotation Mode (Ctrl Modifier)
+- [ ] Create custom rotation gizmo with flat ring handles per axis
+- [ ] Show rotation rings when Ctrl held with selection
+- [ ] Hover effect: ring thickens and brightens
+- [ ] Left-drag ring: free (by-pixel) rotation
+- [ ] Right-drag ring: constrained rotation (15°, 30°, 45° based on mouse distance from control)
+- [ ] Display angle wheel during constrained rotation (world-oriented)
+- [ ] Track object rotation state for world-oriented snapping
 
-### Transform Options
-- [ ] Add snap-to-grid toggle for translate
-- [ ] Add grid size input (1, 0.5, 0.1, etc.)
-- [ ] Add angle snap toggle for rotate
-- [ ] Add angle snap size (15°, 45°, 90°)
+### Scale Mode (Ctrl+Shift Modifier)
+- [ ] Create bounding box visualization for selection
+- [ ] Show scale handles when Ctrl+Shift held with selection
+- [ ] Corner handles: white cubes for uniform scaling
+  - [ ] Left-drag: free scale
+  - [ ] Right-drag: symmetrical proportional scale from center
+- [ ] Face center handles: colored cubes (by axis) for stretch
+  - [ ] Left-drag: one-directional stretch along axis
+  - [ ] Right-drag: symmetrical stretch from center along axis
+- [ ] Hover effect: handles grow subtly and brighten
+
+### Camera Mode (Alt Modifier)
+- [ ] Left-drag: orbit camera
+- [ ] Right-drag: pan camera
+- [ ] Left-click object: center/zoom camera on object
+
+### Shift Modifier Behaviors
+- [ ] Click with Shift: add to selection (already in Phase 4)
+- [ ] Drag translate handle with Shift: duplicate selection along axis
 
 ---
 
@@ -259,38 +276,27 @@ A step-by-step checklist for porting MatterControl's design features to a Vue +
 
 ---
 
-## Phase 11: Persistence (IndexedDB)
+## Phase 11: Continuous Autosave
 
 ### Database Setup
 - [ ] Install `idb` library (IndexedDB wrapper)
 - [ ] Define database schema version 1
-- [ ] Create `projects` object store
+- [ ] Create `scene` object store for current scene state
 - [ ] Create `settings` object store
 - [ ] Implement database open/migration
 
-### Project Storage
-- [ ] Define `Project` interface (id, name, created, modified)
-- [ ] Implement `saveProject()` - serialize scene
-- [ ] Implement `loadProject()` - deserialize scene
-- [ ] Implement `listProjects()` - get all projects
-- [ ] Implement `deleteProject()`
-
 ### Scene Serialization
 - [ ] Serialize mesh geometry (positions, normals, indices)
 - [ ] Serialize object transforms and metadata
 - [ ] Serialize group hierarchy
 - [ ] Handle large meshes efficiently (binary format)
 
-### Unsaved Changes
-- [ ] Track "dirty" state when scene modified
-- [ ] Show unsaved indicator in header
-- [ ] Warn before closing with unsaved changes
-- [ ] Warn before "New Project" with unsaved changes
-
-### Auto-Save
-- [ ] Add debounced auto-save on scene changes
-- [ ] Store current project ID in localStorage
-- [ ] Load last project on app start
+### Continuous Autosave
+- [ ] Implement autosave on every scene change (debounced)
+- [ ] Save immediately on significant actions (add/delete object, transform complete)
+- [ ] Load saved scene automatically on app start
+- [ ] Handle serialization errors gracefully
+- [ ] Show subtle save indicator during autosave (optional)
 
 ---