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:
+- 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:
+
--Where Thob is better:
+- Main differences:
--Where Thob is weaker:
+  - **Vanilla**: Powerful but requires manual state management and more code
--What feels awkward or unclear:
+  - **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
+- [ ] Editor UX limitation
--[ ] Runtime limitation
+- [x] Runtime limitation (event execution unclear)
--[ ] Schema / data model limitation
+- [ ] Schema / data model limitation
--[ ] Component limitation
+- [ ] Component limitation
--[ ] Event system limitation
+- [x] Event system limitation
--[ ] Asset pipeline limitation
+- [x] Property binding limitation (no state system)
--[ ] Unknown / needs investigation
+- [ ] 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
--Is it:
+- Introduce a simple **state management system** (e.g., boolean variables)
-  -editor
+- Allow **property binding** between state and visual properties (e.g., color)
-  -runtime
+- Provide clearer feedback when interaction actions fail
-  -component
+
-  -UX
+- Is it:
-  -schema/data
+  - editor (Yes)
+  - runtime (Yes)
+  - component (No)
+  - UX (Yes)
+  - 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.

Week-1/Task-4/thob/notes.md

@@ -0,0 +1,71 @@
+# Builder Exploration Notes — Task 4: Click To Toggle Visual State
+
+## Capability Gap Identified
+
+- **Click Interaction Behavior**:
+  - `onClick` trigger is available in the UI, but did not produce visible state changes during testing
+  - Interaction execution appears inconsistent or unclear
+
+- **State Management**:
+  - No visible support for defining or managing state variables (e.g., boolean toggle)
+  - No clear mechanism to store or switch between visual states
+
+- **Visual State Transition**:
+  - Unable to toggle between two visual states (e.g., color change)
+  - Object remains in default appearance despite interaction attempts
+
+---
+
+## Observations
+
+- Interaction system UI is present but lacks clear connection between events and property updates
+- No built-in concept of "state" for managing toggles
+- Event-to-property binding is not intuitive or not functioning as expected
+
+---
+
+## Comparison vs Code
+
+- **Vanilla**:
+  - Requires raycasting + manual state handling
+  - Fully flexible but verbose
+
+- **R3F**:
+  - Simple toggle using `onClick` + `useState`
+  - Very clean and reliable
+
+- **Thob**:
+  - Click interaction present in UI
+  - Toggle behavior could not be achieved during testing
+
+---
+
+## Key Insight
+
+The builder currently lacks a clear state management system and reliable event-to-property binding, making it difficult to implement toggle-based interactions.
+
+---
+
+## Product Perspective
+
+Toggle interactions are essential for use cases like product configurators (e.g., switching colors, enabling features). Without reliable state handling, these use cases are difficult to implement.
+
+---
+
+## Improvement Recommendations
+
+1. **State Management UI**  
+   - Introduce simple state variables (e.g., `isActive`, `isSelected`)
+
+2. **Property Binding System**  
+   - Allow material properties (color, visibility, etc.) to be linked to state variables
+
+3. **Reliable Event Execution**  
+   - Ensure `onClick` triggers consistently update state and reflect changes in the UI
+
+---
+
+## Verdict
+
+Strong for **static visual configuration**  
+Limited for **state-driven interactions (toggle, dynamic behavior)**