docs: update task-4 comparison report

Week-1/Task-4/report.md

@@ -1,60 +1,81 @@
-# Task: [Feature Name]
+# Task 4 Report: [Click To Toggle Visual State]
 
 ## Objective
-What is the feature trying to do?
+Click an object and persistently toggle between two visual states (e.g., color lime/blue).
 
-## Vanilla three.js
+## Vanilla Three.js
--Possible: Yes / Partial / No
+- Possible: **Yes**
--Notes:
+- Notes: Requires setting up a `Raycaster` + `mousedown` event, manually tracking a boolean state variable, and updating the material color on every click hit.
--Key concepts:
+- Key concepts: `Persistent State Variable`, `if/else logic`, `Mutation Loop`.
--Complexity: Easy / Medium / Hard
+- Complexity: **Medium**.
 
 ## R3F
--Possible: Yes / Partial / No
+- Possible: **Yes**
--Notes:
+- Notes: Inherently simple. React's `useState` hook naturally handles the persistent toggle, and the `mesh` declarative `onClick` prop makes wiring it trivial.
--What R3F abstracted:
+- What R3F abstracted: `Raycaster computation`, `State-to-Visual binding`.
--Complexity: Easy / Medium / Hard
+- Complexity: **Easy** (Very concise).
 
 ## Thob Page Builder
--Possible: Yes / Partial / No
+- Possible: **No (based on current testing)**
 - Notes:
--Builder steps:
+  - The `onClick` trigger is visible in the UI, but did not result in observable state changes during testing
--Complexity: Easy / Medium / Hard
+  - No clear mechanism for defining or managing persistent state (e.g., toggle variable)
+  - Unable to switch between two visual states using interaction
+- Builder steps: `N/A`
+- Complexity: **Limited** (interaction + state system not clearly supported)
 
 ## Comparison Summary
--Possible in all 3? Yes / Partial / No
+- Possible in all 3? **No** (toggle interaction not achieved in builder)
+
 - Main differences:
+  - **Vanilla**: Powerful but requires manual state management and more code
+  - **R3F**: Clean and efficient for state-driven interactions
+  - **Thob**: Interaction system present but lacks clear state handling and reliable execution
+
 - Where Thob is better:
+  - Static visual configuration
+
 - Where Thob is weaker:
+  - Lack of state management system
+  - Unclear event-to-property binding
+  - Interaction execution is not reliable during testing
+
 - What feels awkward or unclear:
+  - No visible way to define or store state (e.g., toggle)
+  - Interaction triggers exist but do not clearly connect to visual updates
 
 ## Limitation Type (if any)
 - [ ] Editor UX limitation
--[ ] Runtime limitation
+- [x] Runtime limitation (event execution unclear)
 - [ ] Schema / data model limitation
 - [ ] Component limitation
--[ ] Event system limitation
+- [x] Event system limitation
+- [x] Property binding limitation (no state system)
 - [ ] Asset pipeline limitation
 - [ ] Unknown / needs investigation
 
 ## Workaround
--Is there a workaround?
+- No reliable workaround found for toggle interaction
--If yes, what is it?
+- May require additional configuration or future feature support
 
 ## Suggested Improvement
--What should improve in Thob?
+- Improve reliability of `onClick` event execution
+- Introduce a simple **state management system** (e.g., boolean variables)
+- Allow **property binding** between state and visual properties (e.g., color)
+- Provide clearer feedback when interaction actions fail
+
 - Is it:
-  -editor
+  - editor (Yes)
-  -runtime
+  - runtime (Yes)
-  -component
+  - component (No)
-  -UX
+  - UX (Yes)
-  -schema/data
+  - schema/data (Yes)
 
 ## Difficulty Estimate
--Easy / Medium / Hard
+- **Medium**
 
 ## Business Value
--Low / Medium / High
+- **Critical** (Toggle interactions are essential for product configurators and interactive experiences)
 
 ## Recommendation
-Should Thob support this better? Why?
+To support real-world interactive use cases, the builder should improve its event system and introduce a clear state management mechanism, enabling reliable toggle-based interactions.