docs: complete task-1 comparison report and capability mapping

Week-1/Task-1/report.md

@@ -1,60 +1,63 @@
-# Task: [Feature Name]
+# Task 1: [Basic Material Color Change]
 
 ## Objective
-What is the feature trying to do?
+Create a single 3D object and interactively change its material color using three different approaches.
 
-## Vanilla three.js
--Possible: Yes / Partial / No
--Notes:
--Key concepts:
--Complexity: Easy / Medium / Hard
+## Vanilla Three.js
+-Possible: **Yes**
+-Notes: Requires manual setup of the Scene, Camera, and Renderer boilerplate. Interaction requires a `window` click event or a `Raycaster` to detect mesh clicks.
+-Key concepts: `Object mutation`, `Manual Animation Loop`, `Event Listeners`.
+-Complexity: **Easy** (High boilerplate).
 
 ## R3F
--Possible: Yes / Partial / No
--Notes:
--What R3F abstracted:
--Complexity: Easy / Medium / Hard
+-Possible: **Yes**
+-Notes: Extremely efficient. Declarative structure makes it easy to read. Raycasting is abstracted into the `onClick` prop.
+-What R3F abstracted: `Raycasting`, `Re-rendering`, `State Hooks`, `Scene Management`.
+-Complexity: **Easy** (Very concise).
 
 ## Thob Page Builder
--Possible: Yes / Partial / No
--Notes:
--Builder steps:
--Complexity: Easy / Medium / Hard
+-Possible: **Partial**
+-Notes: **Excellent for static visual editing** via the side-panel color picker. However, **dynamic interaction** (changing color on click) is currently difficult and resulted in scripting errors.
+-Builder steps: `Canvas > Add Mesh > Select meshStandardMaterial > Use Color Picker`.
+-Complexity: **Easy** (for static) / **Hard** (for dynamic/interactive).
 
 ## Comparison Summary
--Possible in all 3? Yes / Partial / No
+-Possible in all 3? **Partial** (Dynamic interaction only supported in Code).
 -Main differences:
--Where Thob is better:
--Where Thob is weaker:
--What feels awkward or unclear:
+  - **Vanilla**: Gives you full control, but requires a lot of extra code.
+  - **R3F**: The fastest way to write complex interactions with simple code.
+  - **Thob**: Best for visual editing; lacks simple "No-Code" interaction logic.
+-Where Thob is better: **Instantly seeing visual changes** without any code.
+-Where Thob is weaker: **Interactive logic** (e.g., "if I click this, change that").
+-What feels awkward or unclear: The lack of a clear "No-Code" interaction system makes dynamic updates difficult.
 
 ## Limitation Type (if any)
--[ ] Editor UX limitation
--[ ] Runtime limitation
--[ ] Schema / data model limitation
--[ ] Component limitation
--[ ] Event system limitation
--[ ] Asset pipeline limitation
--[ ] Unknown / needs investigation
+- [ ] Editor UX limitation
+- [ ] Runtime limitation
+- [ ] Schema / data model limitation
+- [ ] Component limitation
+- [x] Event system limitation
+- [x] Property binding limitation
+- [ ] Asset pipeline limitation
+- [ ] Unknown / needs investigation
 
 ## Workaround
--Is there a workaround?
--If yes, what is it?
+-Is there a workaround? **No reliable workaround found for 100% no-code dynamic updates.** Toggling visibility between two pre-colored objects might work but is not an efficient solution.
 
 ## Suggested Improvement
--What should improve in Thob?
+-What should improve in Thob? **Add a "Set Property" action for event triggers and better error feedback.**
 -Is it:
-  -editor
-  -runtime
-  -component
-  -UX
-  -schema/data
+- editor (Yes)
+- runtime (Yes)
+- component (No)
+- UX (Yes)
+- schema/data (Yes)
 
 ## Difficulty Estimate
--Easy / Medium / Hard
+- **Easy**
 
 ## Business Value
--Low / Medium / High
+- **Medium/High** (Essential for product configurators and UI/UX mockups).
 
 ## Recommendation
-Should Thob support this better? Why?
+Thob **should** support this better. Material color swapping is a core feature for product customization (e.g., choosing a sofa color), which is a major use case for 3D page builders. 

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

@@ -0,0 +1,36 @@
+# Builder Exploration Notes — Task 1: Material Color Change
+
+## Thob Capabilities Observed
+*   **Static Editing**: 100% Supported. The side panel color picker is intuitive and updates the `meshStandardMaterial` in real-time.
+*   **Layer Hierarchy**: The tree structure (`Canvas > mesh > meshStandardMaterial`) is logical and matches the Three.js/R3F scene graph.
+*   **Lighting Defaults**: Default `ambientLight` and `pointLight` are provided, which makes the initial setup faster than code.
+
+## Limitations Identified
+*   **Dynamic Mutation (Runtime)**: Attempting to change the material color via an `onClick` event script failed.
+*   **Expression Error**: Direct property assignment like `meshStandardMaterial.color = 'pink'` is not currently interpreted correctly by the builder's internal script runner.
+*   **Property Binding**: There is no "No-Code" way to bind a click event directly to a material property (unlike R3F's simple `onClick`).
+
+## Console Warnings & Diagnostics
+During the exploration, the following engine-level issues were noted in the console (see screenshots):
+
+1.  **Hydration Mismatch (`No HydrateFallback`)**: 
+    *   *Observation*: React is complaining about a missing fallback during initial hydration. 
+    *   *Impact*: Minor. Suggests a slight desync between server-side rendering and client-side activation in the editor.
+2.  **Controlled vs. Uncontrolled Inputs**:
+    *   *Observation*: `undefined` value is changing from uncontrolled to controlled.
+    *   *Impact*: Mid. This often causes "jumping" or resetting behavior in UI sliders or color pickers.
+3.  **404 Resource Failure**: 
+    *   *Observation*: A specific resource ID failed to load (`670e...f891f:1`).
+    *   *Impact*: Likely a missing texture or a broken internal reference to a metadata object.
+
+## Comparison vs. Code
+*   **Workflow Speed**: Thob is **faster** for initially placing an object and picking a color.
+*   **Interaction Logic**: R3F is **significantly more powerful**. Writing simple React code for a toggle is easier than trying to find a workaround in the builder's current event system.
+
+## Improvement Recommendations
+1.  **Event-to-Property Action**: Add a preset action for "Set Material Property" inside the `onClick` event trigger so no code is required.
+2.  **Error Feedback**: Provide a user-friendly "Scripting Error" toast inside the builder instead of failing silently in the browser console.
+
+---
+
+**Verdict**: Strong for **Visual Prototyping**; Limited for **Interactive Product Logic**.