@jucie.io/reactive 1.0.24 → 1.0.26

package/README.md

@@ -55,21 +55,42 @@ console.log(doubled()); // 10
 
 ### Surfaces
 
-Declarative reactive components:
+Declarative reactive components with automatic value unwrapping:
+
+**Key Concepts:**
+- **Unwrapped Values**: Returned signals and computed values are automatically unwrapped. Access them as properties (e.g., `counter.count`, `counter.doubled`) instead of calling them as functions.
+- **Context (`ctx`)**: Inside computed values and actions, the `ctx` parameter provides access to the unwrapped values of **only what was returned** from the surface. This creates a clean API boundary between public and private state.
 
 ```javascript
 import { defineSurface } from '@jucie.io/reactive';
 
-const useCounter = defineSurface(({ value, computed, action }) => ({
-  count: value(0),
-  doubled: computed((ctx) => ctx.count * 2),
-  increment: action((ctx) => ctx.count++),
-  decrement: action((ctx) => ctx.count--)
-}));
+const useCounter = defineSurface(({ signal, computed, action }) => {
+  const count = signal(0);
+  const updateCount = signal(0); // Private signal - NOT in ctx
+
+  const doubled = computed((ctx) => {
+    // ctx.count is available because 'count' is returned
+    // ctx.updateCount is NOT available because 'updateCount' is not returned
+    return ctx.count * 2
+  })
+
+  const increment = action((ctx) => {
+    // Inside actions, call signals as functions
+    updateCount(prevUpdateCount => prevUpdateCount + 1)
+    ctx.count++
+  })
+
+  return {
+    count,    // Exposed publicly
+    doubled,  // Exposed publicly
+    increment // Exposed publicly
+    // updateCount is NOT returned, so it's private
+  }
+});
 
 const counter = useCounter();
-console.log(counter.count); // 0
-console.log(counter.doubled); // 0
+console.log(counter.count); // 0 - accessed as property, not counter.count()
+console.log(counter.doubled); // 0 - accessed as property, not counter.doubled()
 
 counter.increment();
 console.log(counter.count); // 1
@@ -163,24 +184,6 @@ count(8);
 console.log(delta()); // 3 (8 - 5)
 ```
 
-### Async Computed
-
-Computed values also support async:
-
-```javascript
-import { createSignal, createComputed } from '@jucie.io/reactive';
-
-const userId = createSignal(1);
-
-const userData = createComputed(async () => {
-  const response = await fetch(`/api/users/${userId()}`);
-  return response.json();
-});
-
-// Returns a promise
-const data = await userData();
-```
-
 ### Surface with Object Configuration
 
 ```javascript
@@ -208,6 +211,12 @@ const useApp = defineSurface({
     console.log('Surface destroyed');
   }
 });
+
+const app = useApp();
+
+app.count // 0
+app.message // Hello
+
 ```
 
 ### Effects
@@ -268,7 +277,7 @@ count(1); // Logs: "Effect: 1"
 
 ## Configuration Options
 
-### Signal/Computed Config
+### Signal
 
 ```javascript
 {
@@ -280,7 +289,7 @@ count(1); // Logs: "Effect: 1"
 }
 ```
 
-### Binding Config
+### Binding/Computed Config
 
 ```javascript
 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jucie.io/reactive",
-  "version": "1.0.24",
+  "version": "1.0.26",
   "description": "Fine-grained reactivity with signals, computed values, and effects (includes core + extensions)",
   "type": "module",
   "main": "./dist/main.js",