@praxisjs/decorators 0.7.5 → 0.8.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { Component, Lazy, Virtual } from "./component";
 export { Memo, Bind, Log, Once, Retry, Debounce, Throttle, When, Until, Watch, type WatchVal, type WatchVals, } from "./functions";
-export { Prop, State, Computed, Persisted, Slot, initSlots, History, type HistoryOf, Compose, Resource, type ResourceInstance, type ResourceOptions, } from "./properties";
+export { Prop, State, Computed, Persisted, Slot, initSlots, History, type HistoryOf, Compose, Resource, type ResourceInstance, type ResourceOptions, Synced, DeepState, } from "./properties";
 export { type Command, createCommand, Emit, OnCommand } from "./events";
 export { createFieldDecorator, type FieldBehavior, type FieldBinding, } from "./create-field-decorator";
 export { createClassDecorator, ClassBehavior, type ClassEnhancement, } from "./create-class-decorator";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,QAAQ,EACb,KAAK,SAAS,GACf,MAAM,aAAa,CAAC;AACrB,OAAO,EACL,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,SAAS,EACT,OAAO,EACP,KAAK,SAAS,EACd,OAAO,EACP,QAAQ,EACR,KAAK,gBAAgB,EACrB,KAAK,eAAe,GACrB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,KAAK,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACxE,OAAO,EACL,oBAAoB,EACpB,KAAK,aAAa,EAClB,KAAK,YAAY,GAClB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,oBAAoB,EACpB,aAAa,EACb,KAAK,gBAAgB,GACtB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,qBAAqB,EACrB,KAAK,cAAc,GACpB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,8BAA8B,EAC9B,KAAK,uBAAuB,GAC7B,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EACL,qBAAqB,EACrB,KAAK,cAAc,EACnB,6BAA6B,EAC7B,KAAK,sBAAsB,GAC5B,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,QAAQ,EACb,KAAK,SAAS,GACf,MAAM,aAAa,CAAC;AACrB,OAAO,EACL,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,SAAS,EACT,OAAO,EACP,KAAK,SAAS,EACd,OAAO,EACP,QAAQ,EACR,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,MAAM,EACN,SAAS,GACV,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,KAAK,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACxE,OAAO,EACL,oBAAoB,EACpB,KAAK,aAAa,EAClB,KAAK,YAAY,GAClB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,oBAAoB,EACpB,aAAa,EACb,KAAK,gBAAgB,GACtB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,qBAAqB,EACrB,KAAK,cAAc,GACpB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,8BAA8B,EAC9B,KAAK,uBAAuB,GAC7B,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EACL,qBAAqB,EACrB,KAAK,cAAc,EACnB,6BAA6B,EAC7B,KAAK,sBAAsB,GAC5B,MAAM,2BAA2B,CAAC"}

package/dist/index.js

@@ -1,6 +1,6 @@
 export { Component, Lazy, Virtual } from "./component";
 export { Memo, Bind, Log, Once, Retry, Debounce, Throttle, When, Until, Watch, } from "./functions";
-export { Prop, State, Computed, Persisted, Slot, initSlots, History, Compose, Resource, } from "./properties";
+export { Prop, State, Computed, Persisted, Slot, initSlots, History, Compose, Resource, Synced, DeepState, } from "./properties";
 export { createCommand, Emit, OnCommand } from "./events";
 export { createFieldDecorator, } from "./create-field-decorator";
 export { createClassDecorator, ClassBehavior, } from "./create-class-decorator";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,KAAK,GAGN,MAAM,aAAa,CAAC;AACrB,OAAO,EACL,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,SAAS,EACT,OAAO,EAEP,OAAO,EACP,QAAQ,GAGT,MAAM,cAAc,CAAC;AACtB,OAAO,EAAgB,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACxE,OAAO,EACL,oBAAoB,GAGrB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,oBAAoB,EACpB,aAAa,GAEd,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,qBAAqB,GAEtB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,8BAA8B,GAE/B,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EACL,qBAAqB,EAErB,6BAA6B,GAE9B,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,KAAK,GAGN,MAAM,aAAa,CAAC;AACrB,OAAO,EACL,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,SAAS,EACT,OAAO,EAEP,OAAO,EACP,QAAQ,EAGR,MAAM,EACN,SAAS,GACV,MAAM,cAAc,CAAC;AACtB,OAAO,EAAgB,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACxE,OAAO,EACL,oBAAoB,GAGrB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,oBAAoB,EACpB,aAAa,GAEd,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,qBAAqB,GAEtB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,8BAA8B,GAE/B,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EACL,qBAAqB,EAErB,6BAA6B,GAE9B,MAAM,2BAA2B,CAAC"}

package/dist/properties/deep-state.d.ts

@@ -0,0 +1,2 @@
+export declare function DeepState(): (_value: undefined, context: ClassFieldDecoratorContext<import("@praxisjs/core").StatefulComponent, unknown>) => void;
+//# sourceMappingURL=deep-state.d.ts.map

package/dist/properties/deep-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deep-state.d.ts","sourceRoot":"","sources":["../../src/properties/deep-state.ts"],"names":[],"mappings":"AA0BA,wBAAgB,SAAS,0HAiCxB"}

package/dist/properties/deep-state.js

@@ -0,0 +1,55 @@
+import { signal } from "@praxisjs/core/internal";
+import { createFieldDecorator } from "../create-field-decorator";
+function deepProxy(target, notify) {
+    return new Proxy(target, {
+        get(obj, key, receiver) {
+            const val = Reflect.get(obj, key, receiver);
+            if (val !== null && typeof val === "object") {
+                return deepProxy(val, notify);
+            }
+            return val;
+        },
+        set(obj, key, value) {
+            const result = Reflect.set(obj, key, value);
+            notify();
+            return result;
+        },
+        deleteProperty(obj, key) {
+            const result = Reflect.deleteProperty(obj, key);
+            notify();
+            return result;
+        },
+    });
+}
+export function DeepState() {
+    return createFieldDecorator({
+        bind(instance, _name, initialValue) {
+            const version = signal(0);
+            let current = initialValue;
+            let proxy = current !== null && typeof current === "object"
+                ? deepProxy(current, notify)
+                : current;
+            function notify() {
+                instance._stateDirty = true;
+                version.update((v) => v + 1);
+            }
+            return {
+                descriptor: {
+                    get() {
+                        version();
+                        return proxy;
+                    },
+                    set(value) {
+                        current = value;
+                        proxy =
+                            value !== null && typeof value === "object"
+                                ? deepProxy(value, notify)
+                                : value;
+                        notify();
+                    },
+                },
+            };
+        },
+    });
+}
+//# sourceMappingURL=deep-state.js.map

package/dist/properties/deep-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"deep-state.js","sourceRoot":"","sources":["../../src/properties/deep-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,SAAS,SAAS,CAAmB,MAAS,EAAE,MAAkB;IAChE,OAAO,IAAI,KAAK,CAAC,MAAM,EAAE;QACvB,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,QAAQ;YACpB,MAAM,GAAG,GAAY,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC;YACrD,IAAI,GAAG,KAAK,IAAI,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC5C,OAAO,SAAS,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;YAChC,CAAC;YACD,OAAO,GAAG,CAAC;QACb,CAAC;QACD,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK;YACjB,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;YAC5C,MAAM,EAAE,CAAC;YACT,OAAO,MAAM,CAAC;QAChB,CAAC;QACD,cAAc,CAAC,GAAG,EAAE,GAAG;YACrB,MAAM,MAAM,GAAG,OAAO,CAAC,cAAc,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;YAChD,MAAM,EAAE,CAAC;YACT,OAAO,MAAM,CAAC;QAChB,CAAC;KACF,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,SAAS;IACvB,OAAO,oBAAoB,CAAC;QAC1B,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,YAAY;YAChC,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YAC1B,IAAI,OAAO,GAAG,YAAY,CAAC;YAC3B,IAAI,KAAK,GACP,OAAO,KAAK,IAAI,IAAI,OAAO,OAAO,KAAK,QAAQ;gBAC7C,CAAC,CAAC,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC;gBAC5B,CAAC,CAAC,OAAO,CAAC;YAEd,SAAS,MAAM;gBACb,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC;gBAC5B,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;YAC/B,CAAC;YAED,OAAO;gBACL,UAAU,EAAE;oBACV,GAAG;wBACD,OAAO,EAAE,CAAC;wBACV,OAAO,KAAK,CAAC;oBACf,CAAC;oBACD,GAAG,CAAC,KAAc;wBAChB,OAAO,GAAG,KAAK,CAAC;wBAChB,KAAK;4BACH,KAAK,KAAK,IAAI,IAAI,OAAO,KAAK,KAAK,QAAQ;gCACzC,CAAC,CAAC,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC;gCAC1B,CAAC,CAAC,KAAK,CAAC;wBACZ,MAAM,EAAE,CAAC;oBACX,CAAC;iBACF;aACF,CAAC;QACJ,CAAC;KACF,CAAC,CAAC;AACL,CAAC"}

package/dist/properties/index.d.ts

@@ -6,4 +6,6 @@ export { Slot, initSlots } from "./slot";
 export { History, type HistoryOf } from "./history";
 export { Compose } from "./compose";
 export { Resource, type ResourceInstance, type ResourceOptions } from "./resource";
+export { Synced } from "./synced";
+export { DeepState } from "./deep-state";
 //# sourceMappingURL=index.d.ts.map

package/dist/properties/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/properties/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/properties/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AACnF,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/dist/properties/index.js

@@ -6,4 +6,6 @@ export { Slot, initSlots } from "./slot";
 export { History } from "./history";
 export { Compose } from "./compose";
 export { Resource } from "./resource";
+export { Synced } from "./synced";
+export { DeepState } from "./deep-state";
 //# sourceMappingURL=index.js.map

package/dist/properties/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/properties/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,EAAkB,MAAM,WAAW,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAA+C,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/properties/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,EAAkB,MAAM,WAAW,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAA+C,MAAM,YAAY,CAAC;AACnF,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/dist/properties/synced.d.ts

@@ -0,0 +1,2 @@
+export declare function Synced(channelName?: string): (_value: undefined, context: ClassFieldDecoratorContext<import("@praxisjs/core").StatefulComponent, unknown>) => void;
+//# sourceMappingURL=synced.d.ts.map

package/dist/properties/synced.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"synced.d.ts","sourceRoot":"","sources":["../../src/properties/synced.ts"],"names":[],"mappings":"AAMA,wBAAgB,MAAM,CAAC,WAAW,CAAC,EAAE,MAAM,yHAqB1C"}

package/dist/properties/synced.js

@@ -0,0 +1,26 @@
+import { syncedSignal } from "@praxisjs/core/internal";
+import { createFieldDecorator } from "../create-field-decorator";
+const signalMap = new WeakMap();
+export function Synced(channelName) {
+    return createFieldDecorator({
+        bind(instance, name, initialValue) {
+            const key = channelName ?? name;
+            if (!signalMap.has(instance))
+                signalMap.set(instance, new Map());
+            const map = signalMap.get(instance);
+            if (!map.has(key))
+                map.set(key, syncedSignal(key, initialValue));
+            const sig = map.get(key);
+            return {
+                descriptor: {
+                    get: () => sig(),
+                    set: (value) => { sig.set(value); },
+                },
+                onUnmount() {
+                    sig.close();
+                },
+            };
+        },
+    });
+}
+//# sourceMappingURL=synced.js.map

package/dist/properties/synced.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"synced.js","sourceRoot":"","sources":["../../src/properties/synced.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAqB,MAAM,yBAAyB,CAAC;AAE1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,MAAM,SAAS,GAAG,IAAI,OAAO,EAA8C,CAAC;AAE5E,MAAM,UAAU,MAAM,CAAC,WAAoB;IACzC,OAAO,oBAAoB,CAAC;QAC1B,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,YAAY;YAC/B,MAAM,GAAG,GAAG,WAAW,IAAI,IAAI,CAAC;YAEhC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC;gBAAE,SAAS,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,GAAG,EAAE,CAAC,CAAC;YACjE,MAAM,GAAG,GAAG,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAuC,CAAC;YAC1E,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC;gBAAE,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,YAAY,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC;YACjE,MAAM,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAA0B,CAAC;YAElD,OAAO;gBACL,UAAU,EAAE;oBACV,GAAG,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE;oBAChB,GAAG,EAAE,CAAC,KAAc,EAAE,EAAE,GAAG,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;iBAC7C;gBACD,SAAS;oBACP,GAAG,CAAC,KAAK,EAAE,CAAC;gBACd,CAAC;aACF,CAAC;QACJ,CAAC;KACF,CAAC,CAAC;AACL,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisjs/decorators",
-  "version": "0.7.5",
+  "version": "0.8.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -15,7 +15,7 @@
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@praxisjs/core": "1.4.1",
+    "@praxisjs/core": "1.5.0",
     "@praxisjs/shared": "0.2.0"
   },
   "scripts": {

package/src/__tests__/deep-state.test.ts

@@ -0,0 +1,185 @@
+import { describe, it, expect } from "vitest";
+
+import { StatefulComponent } from "@praxisjs/core";
+import { effect } from "@praxisjs/core/internal";
+
+import { DeepState } from "../properties/deep-state";
+
+class TestComponent extends StatefulComponent {
+  render() { return null; }
+}
+
+function fieldCtx(name: string) {
+  const initializers: Array<(this: unknown) => void> = [];
+  return {
+    ctx: {
+      name,
+      kind: "field" as const,
+      addInitializer(fn: (this: unknown) => void) { initializers.push(fn); },
+    } as ClassFieldDecoratorContext,
+    run(instance: unknown) {
+      initializers.forEach((fn) => { fn.call(instance); });
+    },
+  };
+}
+
+describe("@DeepState decorator", () => {
+  it("reads initial value", () => {
+    const { ctx, run } = fieldCtx("config");
+    DeepState()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).config = { theme: "light" };
+    run(instance);
+
+    const inst = instance as unknown as { config: { theme: string } };
+    expect(inst.config.theme).toBe("light");
+  });
+
+  it("nested object mutation triggers reactive effect", () => {
+    const { ctx, run } = fieldCtx("config");
+    DeepState()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).config = { theme: { mode: "light" } };
+    run(instance);
+
+    const inst = instance as unknown as { config: { theme: { mode: string } } };
+    const log: string[] = [];
+    effect(() => { log.push(inst.config.theme.mode); });
+
+    inst.config.theme.mode = "dark";
+    expect(log).toEqual(["light", "dark"]);
+  });
+
+  it("array push triggers reactive effect", () => {
+    const { ctx, run } = fieldCtx("items");
+    DeepState()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).items = [1, 2];
+    run(instance);
+
+    const inst = instance as unknown as { items: number[] };
+    const log: number[][] = [];
+    effect(() => { log.push([...inst.items]); });
+
+    inst.items.push(3);
+    expect(log[log.length - 1]).toEqual([1, 2, 3]);
+  });
+
+  it("array index assignment triggers reactive effect", () => {
+    const { ctx, run } = fieldCtx("list");
+    DeepState()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).list = ["a", "b"];
+    run(instance);
+
+    const inst = instance as unknown as { list: string[] };
+    const log: string[][] = [];
+    effect(() => { log.push([...inst.list]); });
+
+    inst.list[0] = "z";
+    expect(log[log.length - 1]).toEqual(["z", "b"]);
+  });
+
+  it("property deletion triggers reactive effect", () => {
+    const { ctx, run } = fieldCtx("obj");
+    DeepState()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).obj = { a: 1, b: 2 };
+    run(instance);
+
+    const inst = instance as unknown as { obj: Record<string, number> };
+    const log: string[][] = [];
+    effect(() => { log.push(Object.keys(inst.obj)); });
+
+    delete inst.obj.a;
+    expect(log[log.length - 1]).not.toContain("a");
+  });
+
+  it("direct assignment replaces root and triggers effect", () => {
+    const { ctx, run } = fieldCtx("data");
+    DeepState()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).data = { x: 1 };
+    run(instance);
+
+    const inst = instance as unknown as { data: { x: number } };
+    const log: number[] = [];
+    effect(() => { log.push(inst.data.x); });
+
+    inst.data = { x: 99 };
+    expect(log).toEqual([1, 99]);
+  });
+
+  it("mutations on new root after reassignment are reactive", () => {
+    const { ctx, run } = fieldCtx("cfg");
+    DeepState()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).cfg = { v: 0 };
+    run(instance);
+
+    const inst = instance as unknown as { cfg: { v: number } };
+    inst.cfg = { v: 10 };
+
+    const log: number[] = [];
+    effect(() => { log.push(inst.cfg.v); });
+
+    inst.cfg.v = 20;
+    expect(log).toEqual([10, 20]);
+  });
+
+  it("null initial value is handled gracefully", () => {
+    const { ctx, run } = fieldCtx("maybe");
+    DeepState()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).maybe = null;
+    run(instance);
+
+    const inst = instance as unknown as { maybe: null | { x: number } };
+    expect(inst.maybe).toBeNull();
+
+    const log: unknown[] = [];
+    effect(() => { log.push(inst.maybe); });
+
+    inst.maybe = { x: 5 };
+    expect(log).toEqual([null, { x: 5 }]);
+  });
+
+  it("setter with null value — proxy not created, value is null", () => {
+    const { ctx, run } = fieldCtx("nullable");
+    DeepState()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).nullable = { x: 1 };
+    run(instance);
+
+    const inst = instance as unknown as { nullable: { x: number } | null };
+    inst.nullable = null;
+    expect(inst.nullable).toBeNull();
+  });
+
+  it("setter with primitive value — value stored directly without proxy", () => {
+    const { ctx, run } = fieldCtx("num");
+    DeepState()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).num = { v: 0 };
+    run(instance);
+
+    const inst = instance as unknown as { num: number | { v: number } };
+    inst.num = 99;
+    expect(inst.num).toBe(99);
+  });
+
+  it("deeply nested mutation triggers effect", () => {
+    const { ctx, run } = fieldCtx("deep");
+    DeepState()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).deep = { a: { b: { c: 0 } } };
+    run(instance);
+
+    const inst = instance as unknown as { deep: { a: { b: { c: number } } } };
+    const log: number[] = [];
+    effect(() => { log.push(inst.deep.a.b.c); });
+
+    inst.deep.a.b.c = 42;
+    expect(log).toEqual([0, 42]);
+  });
+});

package/src/__tests__/properties.test.ts

@@ -3,6 +3,7 @@ import { describe, it, expect, vi } from "vitest";
 import { StatefulComponent } from "@praxisjs/core";
 import { signal, computed } from "@praxisjs/core/internal";
 
+import { createFieldDecorator } from "../create-field-decorator";
 import { Watch } from "../functions/watch";
 import { When } from "../functions/when";
 import { Compose } from "../properties/compose";
@@ -984,3 +985,35 @@ describe("@Compose decorator — new cases", () => {
     expect(view.resolved).toBeUndefined();
   });
 });
+
+// ── createFieldDecorator — additional property ────────────────────────────────
+
+describe("createFieldDecorator — additional property", () => {
+  it("defines extra properties on the instance when additional is returned", () => {
+    const decorator = createFieldDecorator({
+      bind(_instance, _name, initialValue) {
+        return {
+          descriptor: {
+            get() { return initialValue; },
+            set() { /* no-op */ },
+          },
+          additional: {
+            extraProp: {
+              configurable: true,
+              get() { return "extra"; },
+            },
+          },
+        };
+      },
+    });
+
+    const { ctx, run } = fieldCtx("myField");
+    decorator(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).myField = 42;
+    run(instance);
+
+    expect((instance as unknown as Record<string, unknown>).myField).toBe(42);
+    expect((instance as unknown as Record<string, unknown>).extraProp).toBe("extra");
+  });
+});

package/src/__tests__/synced.test.ts

@@ -0,0 +1,172 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+import { StatefulComponent } from "@praxisjs/core";
+import { effect } from "@praxisjs/core/internal";
+
+import { Synced } from "../properties/synced";
+
+// BroadcastChannel mock (same as core test)
+class MockBroadcastChannel {
+  static instances: MockBroadcastChannel[] = [];
+  static byChannel: Map<string, MockBroadcastChannel[]> = new Map();
+
+  onmessage: ((event: MessageEvent) => void) | null = null;
+  readonly name: string;
+  closed = false;
+
+  constructor(name: string) {
+    this.name = name;
+    MockBroadcastChannel.instances.push(this);
+    if (!MockBroadcastChannel.byChannel.has(name)) {
+      MockBroadcastChannel.byChannel.set(name, []);
+    }
+    MockBroadcastChannel.byChannel.get(name)!.push(this);
+  }
+
+  postMessage(data: unknown) {
+    MockBroadcastChannel.byChannel.get(this.name)?.forEach((ch) => {
+      if (ch !== this && ch.onmessage) {
+        ch.onmessage(new MessageEvent("message", { data }));
+      }
+    });
+  }
+
+  close() {
+    this.closed = true;
+    const list = MockBroadcastChannel.byChannel.get(this.name);
+    if (list) {
+      const idx = list.indexOf(this);
+      if (idx !== -1) list.splice(idx, 1);
+    }
+    MockBroadcastChannel.instances.splice(
+      MockBroadcastChannel.instances.indexOf(this),
+      1,
+    );
+  }
+}
+
+beforeEach(() => {
+  MockBroadcastChannel.instances = [];
+  MockBroadcastChannel.byChannel = new Map();
+  vi.stubGlobal("BroadcastChannel", MockBroadcastChannel);
+});
+
+class TestComponent extends StatefulComponent {
+  render() { return null; }
+}
+
+function fieldCtx(name: string) {
+  const initializers: Array<(this: unknown) => void> = [];
+  return {
+    ctx: {
+      name,
+      kind: "field" as const,
+      addInitializer(fn: (this: unknown) => void) { initializers.push(fn); },
+    } as ClassFieldDecoratorContext,
+    run(instance: unknown) {
+      initializers.forEach((fn) => { fn.call(instance); });
+    },
+  };
+}
+
+describe("@Synced decorator", () => {
+  it("reads and writes the field reactively", () => {
+    const { ctx, run } = fieldCtx("count");
+    Synced()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).count = 0;
+    run(instance);
+
+    const inst = instance as unknown as { count: number };
+    expect(inst.count).toBe(0);
+    inst.count = 5;
+    expect(inst.count).toBe(5);
+  });
+
+  it("uses field name as channel name by default", () => {
+    const { ctx, run } = fieldCtx("cart");
+    Synced()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).cart = [];
+    run(instance);
+
+    expect(MockBroadcastChannel.instances[0].name).toBe("cart");
+  });
+
+  it("uses custom channel name when provided", () => {
+    const { ctx, run } = fieldCtx("items");
+    Synced("my-channel")(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).items = [];
+    run(instance);
+
+    expect(MockBroadcastChannel.instances[0].name).toBe("my-channel");
+  });
+
+  it("triggers reactive effects on write", () => {
+    const { ctx, run } = fieldCtx("value");
+    Synced()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).value = 0;
+    run(instance);
+
+    const inst = instance as unknown as { value: number };
+    const log: number[] = [];
+    effect(() => { log.push(inst.value); });
+
+    inst.value = 10;
+    expect(log).toEqual([0, 10]);
+  });
+
+  it("updates field when a remote message arrives", () => {
+    const { ctx, run } = fieldCtx("score");
+    Synced()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).score = 0;
+    run(instance);
+
+    const inst = instance as unknown as { score: number };
+    const channel = MockBroadcastChannel.instances[0];
+    channel.onmessage!(new MessageEvent("message", { data: JSON.stringify(42) }));
+
+    expect(inst.score).toBe(42);
+  });
+
+  it("two @Synced fields on the same instance share the signalMap entry", () => {
+    const { ctx: ctx1, run: run1 } = fieldCtx("a");
+    const { ctx: ctx2, run: run2 } = fieldCtx("b");
+    Synced()(undefined, ctx1);
+    Synced()(undefined, ctx2);
+
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).a = 1;
+    (instance as unknown as Record<string, unknown>).b = 2;
+    run1(instance);
+    run2(instance);
+
+    const inst = instance as unknown as { a: number; b: number };
+    inst.a = 10;
+    inst.b = 20;
+    expect(inst.a).toBe(10);
+    expect(inst.b).toBe(20);
+
+    // Both fields have their own BroadcastChannel
+    expect(MockBroadcastChannel.instances.length).toBe(2);
+    instance.onUnmount?.();
+    expect(MockBroadcastChannel.instances.every((ch) => ch.closed)).toBe(true);
+  });
+
+  it("onUnmount closes the BroadcastChannel", () => {
+    const { ctx, run } = fieldCtx("data");
+    Synced()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).data = null;
+    run(instance);
+
+    const channel = MockBroadcastChannel.instances[0];
+    expect(channel.closed).toBe(false);
+    instance.onUnmount?.();
+    expect(channel.closed).toBe(true);
+  });
+});