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)
 
 ---
 

TWEAKS.md

@@ -0,0 +1,39 @@
+- Left click is object select
+- Left click drag is lasso
+
+- Right click is context menu
+- Right click drag is nothing special
+
+- Translate mode is default with a selection
+    - 3 arrows colored by axis
+    - Left click dragging a handle is free translate along axis
+    - Right click dragging a handle is grid aligned translate along axis
+    - Mouse wheel up and down changes the granularity of the grid
+
+- Holding shift activates a special mode
+    - Allows adding to selection
+    - Dragging translate handles duplicates the selection along that axis
+
+- Holding alt activates camera mode
+    - Left click drag orbits the camera
+    - Right click drag pans the camera
+    - Left clicking an object centers/zooms the camera on the object
+
+- Holding ctrl activates rotation mode
+    - Makes rotation handles visible on a selection
+        - Rotation handles are flat rings
+        - Hovering a rotation handle makes the ring thicken and slightly brighten
+        - Left click dragging is by-pixel rotation
+        - Right click dragging is constrained rotation, 15, 30 or 45 degrees depending on how far from the controls the mouse is moved. During constrained rotation, an angle wheel of the appropriate granularity is displayed. This wheel is oriented absolutely to the world, not the object's current rotation. This means that the object needs to keep track of its rotation.
+
+- Holding ctrl+shift activates scale mode
+    - A bounding box appears on the selection
+        - Hovering a scale handle makes them grow subtly and slightly brighten
+    - The corners of the bounding box have white cubes that are scaling handles
+        - Left click dragging is free scale
+        - Right click dragging is symmetrical proportional scale (from the center of the bounding box)
+    - The centers of the faces of the bounding box have colored (by axis) cubes that are stretch handles
+        - Left click dragging is one-directional stretch along the axis
+        - Right click dragging is symmetrical stretch (from the center of the bounding box) along the axis
+
+- Continuous autosave