@praxisjs/decorators 0.8.1 → 1.0.1

package/dist/component/lazy.js

@@ -1,12 +1,12 @@
 import { signal } from "@praxisjs/core/internal";
 import { ClassBehavior, createClassDecorator } from "../create-class-decorator";
 class LazyBehavior extends ClassBehavior {
-    constructor(placeholder) {
+    constructor(options) {
         super();
-        this.placeholder = placeholder;
+        this.options = options;
     }
     create(instance) {
-        const placeholder = this.placeholder;
+        const { placeholder = 200, root, rootMargin = "100px" } = this.options;
         const visible = signal(false);
         let observer;
         return {
@@ -20,27 +20,33 @@ class LazyBehavior extends ClassBehavior {
                 }
                 if (!visible())
                     el.style.minHeight = `${String(placeholder)}px`;
+                const rootEl = root === undefined || root === null ? null : root.current ?? null;
                 observer = new IntersectionObserver((entries) => {
                     if (entries[0]?.isIntersecting) {
                         visible.set(true);
                         el.style.minHeight = "";
                         observer?.disconnect();
                     }
-                }, { rootMargin: "100px" });
+                }, { root: rootEl, rootMargin });
                 observer.observe(el);
             },
             onUnmount() {
                 observer?.disconnect();
             },
             render(originalRender) {
-                if (!visible())
-                    return null;
-                return originalRender();
+                return (() => {
+                    if (!visible())
+                        return null;
+                    return originalRender();
+                });
             },
         };
     }
 }
-export function Lazy(placeholder = 200) {
-    return createClassDecorator(new LazyBehavior(placeholder));
+export function Lazy(placeholderOrOptions = 200) {
+    const options = typeof placeholderOrOptions === "number"
+        ? { placeholder: placeholderOrOptions }
+        : placeholderOrOptions;
+    return createClassDecorator(new LazyBehavior(options));
 }
 //# sourceMappingURL=lazy.js.map

package/dist/component/lazy.js.map

@@ -1 +1 @@
-{"version":3,"file":"lazy.js","sourceRoot":"","sources":["../../src/component/lazy.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAErE,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAyB,MAAM,2BAA2B,CAAC;AAEvG,MAAM,YAAa,SAAQ,aAAa;IACtC,YAA6B,WAAmB;QAC9C,KAAK,EAAE,CAAC;QADmB,gBAAW,GAAX,WAAW,CAAQ;IAEhD,CAAC;IAED,MAAM,CAAC,QAAuB;QAC5B,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACrC,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,QAA0C,CAAC;QAE/C,OAAO;YACL,OAAO;gBACL,MAAM,EAAE,GACL,QAAkC,CAAC,OAAO,EAAE,aAAa,IAAI,IAAI,CAAC;gBACrE,IAAI,CAAC,EAAE;oBAAE,OAAO;gBAEhB,IAAI,CAAC,CAAC,sBAAsB,IAAI,MAAM,CAAC,EAAE,CAAC;oBACxC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;oBAClB,OAAO;gBACT,CAAC;gBAED,IAAI,CAAC,OAAO,EAAE;oBAAE,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC;gBAEhE,QAAQ,GAAG,IAAI,oBAAoB,CACjC,CAAC,OAAO,EAAE,EAAE;oBACV,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,CAAC;wBAC/B,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;wBAClB,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;wBACxB,QAAQ,EAAE,UAAU,EAAE,CAAC;oBACzB,CAAC;gBACH,CAAC,EACD,EAAE,UAAU,EAAE,OAAO,EAAE,CACxB,CAAC;gBAEF,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YACvB,CAAC;YAED,SAAS;gBACP,QAAQ,EAAE,UAAU,EAAE,CAAC;YACzB,CAAC;YAED,MAAM,CAAC,cAAc;gBACnB,IAAI,CAAC,OAAO,EAAE;oBAAE,OAAO,IAAI,CAAC;gBAC5B,OAAO,cAAc,EAAE,CAAC;YAC1B,CAAC;SACF,CAAC;IACJ,CAAC;CACF;AAED,MAAM,UAAU,IAAI,CAAC,WAAW,GAAG,GAAG;IACpC,OAAO,oBAAoB,CAAC,IAAI,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC;AAC7D,CAAC"}
+{"version":3,"file":"lazy.js","sourceRoot":"","sources":["../../src/component/lazy.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAErE,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAyB,MAAM,2BAA2B,CAAC;AAevG,MAAM,YAAa,SAAQ,aAAa;IACtC,YAA6B,OAAoB;QAC/C,KAAK,EAAE,CAAC;QADmB,YAAO,GAAP,OAAO,CAAa;IAEjD,CAAC;IAED,MAAM,CAAC,QAAuB;QAC5B,MAAM,EAAE,WAAW,GAAG,GAAG,EAAE,IAAI,EAAE,UAAU,GAAG,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;QACvE,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,QAA0C,CAAC;QAE/C,OAAO;YACL,OAAO;gBACL,MAAM,EAAE,GACL,QAAkC,CAAC,OAAO,EAAE,aAAa,IAAI,IAAI,CAAC;gBACrE,IAAI,CAAC,EAAE;oBAAE,OAAO;gBAEhB,IAAI,CAAC,CAAC,sBAAsB,IAAI,MAAM,CAAC,EAAE,CAAC;oBACxC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;oBAClB,OAAO;gBACT,CAAC;gBAED,IAAI,CAAC,OAAO,EAAE;oBAAE,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC;gBAEhE,MAAM,MAAM,GACV,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC;gBAEpE,QAAQ,GAAG,IAAI,oBAAoB,CACjC,CAAC,OAAO,EAAE,EAAE;oBACV,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,CAAC;wBAC/B,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;wBAClB,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;wBACxB,QAAQ,EAAE,UAAU,EAAE,CAAC;oBACzB,CAAC;gBACH,CAAC,EACD,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,CAC7B,CAAC;gBAEF,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YACvB,CAAC;YAED,SAAS;gBACP,QAAQ,EAAE,UAAU,EAAE,CAAC;YACzB,CAAC;YAED,MAAM,CAAC,cAAc;gBACnB,OAAO,CAAC,GAAG,EAAE;oBACX,IAAI,CAAC,OAAO,EAAE;wBAAE,OAAO,IAAI,CAAC;oBAC5B,OAAO,cAAc,EAAE,CAAC;gBAC1B,CAAC,CAAoB,CAAC;YACxB,CAAC;SACF,CAAC;IACJ,CAAC;CACF;AAED,MAAM,UAAU,IAAI,CAAC,uBAA6C,GAAG;IACnE,MAAM,OAAO,GACX,OAAO,oBAAoB,KAAK,QAAQ;QACtC,CAAC,CAAC,EAAE,WAAW,EAAE,oBAAoB,EAAE;QACvC,CAAC,CAAC,oBAAoB,CAAC;IAC3B,OAAO,oBAAoB,CAAC,IAAI,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;AACzD,CAAC"}

package/dist/create-class-decorator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-class-decorator.d.ts","sourceRoot":"","sources":["../src/create-class-decorator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,SAAS,CAAC,IAAI,IAAI,CAAC;IACnB,MAAM,CAAC,CACL,cAAc,EAAE,MAAM,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,GACzC,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;CACzB;AAED,8BAAsB,aAAa;IACjC,QAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE,aAAa,GAAG,gBAAgB;IAE1D;;;OAGG;IAEH,UAAU,CAAC,CAAC,SAAS,EAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,EAAE,SAAS,EAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,GAAG,IAAI;CAC1G;AAED,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,aAAa,IAGxD,CAAC,SAAS,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,EACpE,aAAa,CAAC,EAAE,UAAU,qBAAqB,KAAG,CAAC,CAmCtD"}
+{"version":3,"file":"create-class-decorator.d.ts","sourceRoot":"","sources":["../src/create-class-decorator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,SAAS,CAAC,IAAI,IAAI,CAAC;IACnB,MAAM,CAAC,CACL,cAAc,EAAE,MAAM,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,GACzC,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;CACzB;AAED,8BAAsB,aAAa;IACjC,QAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE,aAAa,GAAG,gBAAgB;IAE1D;;;OAGG;IAEH,UAAU,CAAC,CAAC,SAAS,EAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,EAAE,SAAS,EAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,GAAG,IAAI;CAC1G;AAQD,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,aAAa,IAGxD,CAAC,SAAS,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,EACpE,aAAa,CAAC,EAAE,UAAU,qBAAqB,KAAG,CAAC,CAyCtD"}

package/dist/create-class-decorator.js

@@ -1,5 +1,10 @@
 export class ClassBehavior {
 }
+// Tracks instances whose render is currently being called as `originalRender`
+// from within an enhancement. When set, the Enhanced render skips the
+// this._enh.render dispatch so stacked decorators (e.g. @Lazy + @Component)
+// don't re-enter the outermost enhancement recursively.
+const _originalRenderInProgress = new WeakSet();
 export function createClassDecorator(behavior) {
     return function (constructor, _context) {
         const Enhanced = class extends constructor {
@@ -16,11 +21,19 @@ export function createClassDecorator(behavior) {
                 this._enh.onUnmount?.();
             }
             render(...args) {
-                const originalRender = () => constructor.prototype.render.apply(this, args);
-                if (this._enh.render) {
+                const originalRender = () => {
+                    _originalRenderInProgress.add(this);
+                    try {
+                        return constructor.prototype.render.apply(this, args);
+                    }
+                    finally {
+                        _originalRenderInProgress.delete(this);
+                    }
+                };
+                if (this._enh.render && !_originalRenderInProgress.has(this)) {
                     return this._enh.render(originalRender);
                 }
-                return originalRender();
+                return constructor.prototype.render.apply(this, args);
             }
         };
         // If the original class has no render, remove the wrapper so instances see `undefined`.

package/dist/create-class-decorator.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-class-decorator.js","sourceRoot":"","sources":["../src/create-class-decorator.ts"],"names":[],"mappings":"AAUA,MAAM,OAAgB,aAAa;CASlC;AAED,MAAM,UAAU,oBAAoB,CAAC,QAAuB;IAC1D,OAAO,UAGL,WAAc,EAAE,QAA+B;QAC/C,MAAM,QAAQ,GAAG,KAAM,SAAQ,WAAW;YAAzB;;gBACE,SAAI,GAAqB,QAAQ,CAAC,MAAM,CACvD,IAAgC,CACjC,CAAC;YAoBJ,CAAC;YAlBC,OAAO;gBACL,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC;gBAClB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;YACxB,CAAC;YAED,SAAS;gBACP,KAAK,CAAC,SAAS,EAAE,EAAE,CAAC;gBACpB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC;YAC1B,CAAC;YAED,MAAM,CAAC,GAAG,IAAe;gBACvB,MAAM,cAAc,GAAG,GAAG,EAAE,CACzB,WAAW,CAAC,SAAmE,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;gBAC5G,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;oBACrB,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;gBAC1C,CAAC;gBACD,OAAO,cAAc,EAAE,CAAC;YAC1B,CAAC;SACF,CAAC;QAEF,wFAAwF;QACxF,IAAI,OAAQ,WAAW,CAAC,SAAkC,CAAC,MAAM,KAAK,UAAU,EAAE,CAAC;YACjF,OAAQ,QAAQ,CAAC,SAAkC,CAAC,MAAM,CAAC;QAC7D,CAAC;QAED,MAAM,CAAC,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC;QACrE,QAAQ,CAAC,UAAU,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;QAC7C,OAAO,QAAwB,CAAC;IAClC,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"create-class-decorator.js","sourceRoot":"","sources":["../src/create-class-decorator.ts"],"names":[],"mappings":"AAUA,MAAM,OAAgB,aAAa;CASlC;AAED,8EAA8E;AAC9E,sEAAsE;AACtE,4EAA4E;AAC5E,wDAAwD;AACxD,MAAM,yBAAyB,GAAG,IAAI,OAAO,EAAE,CAAC;AAEhD,MAAM,UAAU,oBAAoB,CAAC,QAAuB;IAC1D,OAAO,UAGL,WAAc,EAAE,QAA+B;QAC/C,MAAM,QAAQ,GAAG,KAAM,SAAQ,WAAW;YAAzB;;gBACE,SAAI,GAAqB,QAAQ,CAAC,MAAM,CACvD,IAAgC,CACjC,CAAC;YA0BJ,CAAC;YAxBC,OAAO;gBACL,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC;gBAClB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;YACxB,CAAC;YAED,SAAS;gBACP,KAAK,CAAC,SAAS,EAAE,EAAE,CAAC;gBACpB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC;YAC1B,CAAC;YAED,MAAM,CAAC,GAAG,IAAe;gBACvB,MAAM,cAAc,GAAG,GAAG,EAAE;oBAC1B,yBAAyB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;oBACpC,IAAI,CAAC;wBACH,OAAQ,WAAW,CAAC,SAAmE,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;oBACnH,CAAC;4BAAS,CAAC;wBACT,yBAAyB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;oBACzC,CAAC;gBACH,CAAC,CAAC;gBACF,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,yBAAyB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;oBAC7D,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;gBAC1C,CAAC;gBACD,OAAQ,WAAW,CAAC,SAAmE,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;YACnH,CAAC;SACF,CAAC;QAEF,wFAAwF;QACxF,IAAI,OAAQ,WAAW,CAAC,SAAkC,CAAC,MAAM,KAAK,UAAU,EAAE,CAAC;YACjF,OAAQ,QAAQ,CAAC,SAAkC,CAAC,MAAM,CAAC;QAC7D,CAAC;QAED,MAAM,CAAC,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC;QACrE,QAAQ,CAAC,UAAU,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;QAC7C,OAAO,QAAwB,CAAC;IAClC,CAAC,CAAC;AACJ,CAAC"}

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-export { Component, Lazy, Virtual } from "./component";
+export { Component, Lazy } 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, Synced, DeepState, } from "./properties";
+export { Prop, State, Computed, Persisted, Slot, initSlots, History, type HistoryOf, Compose, getter, 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 { type ReactiveHost } from "./reactive-host";

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,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,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,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,MAAM,aAAa,CAAC;AAC9C,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,MAAM,EACN,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,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,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 { Component, Lazy } 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, Synced, DeepState, } from "./properties";
+export { Prop, State, Computed, Persisted, Slot, initSlots, History, Compose, getter, 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,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;AAElC,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,MAAM,aAAa,CAAC;AAC9C,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,MAAM,EACN,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;AAElC,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/compose.d.ts

@@ -1,3 +1,10 @@
 import type { StatefulComponent, Composable } from "@praxisjs/core";
+interface ComposeFactory {
+    __isComposeFactory: true;
+    resolve: (instance: object) => unknown;
+}
+/** Wraps a property as a live getter — passes `() => instance[propName]` to the composable. */
+export declare function getter(propName: string): ComposeFactory;
 export declare function Compose(ComposableClass: new (...args: any[]) => Composable, ...ctorArgs: unknown[]): <This extends StatefulComponent, Value = unknown>(_value: undefined, context: ClassFieldDecoratorContext<This, Value>) => void;
+export {};
 //# sourceMappingURL=compose.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"compose.d.ts","sourceRoot":"","sources":["../../src/properties/compose.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AA6BpE,wBAAgB,OAAO,CAErB,eAAe,EAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,UAAU,EACnD,GAAG,QAAQ,EAAE,OAAO,EAAE,kIAoBvB"}
+{"version":3,"file":"compose.d.ts","sourceRoot":"","sources":["../../src/properties/compose.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAIpE,UAAU,cAAc;IAAG,kBAAkB,EAAE,IAAI,CAAC;IAAC,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAA;CAAE;AAE7F,+FAA+F;AAC/F,wBAAgB,MAAM,CAAC,QAAQ,EAAE,MAAM,GAAG,cAAc,CAKvD;AA6BD,wBAAgB,OAAO,CAErB,eAAe,EAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,UAAU,EACnD,GAAG,QAAQ,EAAE,OAAO,EAAE,kIAqBvB"}

package/dist/properties/compose.js

@@ -1,4 +1,14 @@
 import { createFieldDecorator } from "../create-field-decorator";
+/** Wraps a property as a live getter — passes `() => instance[propName]` to the composable. */
+export function getter(propName) {
+    return {
+        __isComposeFactory: true,
+        resolve: (instance) => () => instance[propName],
+    };
+}
+function isFactory(value) {
+    return typeof value === "object" && value !== null && "__isComposeFactory" in value;
+}
 function isReactive(value) {
     return (typeof value === "function" &&
         ("__isSignal" in value || "__isComputed" in value));
@@ -24,9 +34,14 @@ export function Compose(
 ComposableClass, ...ctorArgs) {
     return createFieldDecorator({
         bind(instance, _name, _initialValue) {
-            const resolvedArgs = ctorArgs.map((arg) => typeof arg === "string"
-                ? instance[arg]
-                : arg);
+            const resolvedArgs = ctorArgs.map((arg) => {
+                if (isFactory(arg))
+                    return arg.resolve(instance);
+                if (typeof arg !== "string")
+                    return arg;
+                const prop = instance[arg];
+                return prop !== undefined ? prop : arg;
+            });
             const composable = new ComposableClass(...resolvedArgs);
             const view = buildView(composable.setup());
             return {

package/dist/properties/compose.js.map

@@ -1 +1 @@
-{"version":3,"file":"compose.js","sourceRoot":"","sources":["../../src/properties/compose.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,SAAS,UAAU,CACjB,KAAc;IAEd,OAAO,CACL,OAAO,KAAK,KAAK,UAAU;QAC3B,CAAC,YAAY,IAAK,KAAgB,IAAI,cAAc,IAAK,KAAgB,CAAC,CAC3E,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,QAAiC;IAClD,MAAM,IAAI,GAA4B,EAAE,CAAC;IACzC,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;QACpD,IAAI,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;YACtB,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,GAAG,EAAE;gBAC/B,GAAG,EAAE,GAAG,EAAE,CAAE,KAAuB,EAAE;gBACrC,UAAU,EAAE,IAAI;gBAChB,YAAY,EAAE,IAAI;aACnB,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;QACpB,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,OAAO;AACrB,8DAA8D;AAC9D,eAAmD,EACnD,GAAG,QAAmB;IAEtB,OAAO,oBAAoB,CAAC;QAC1B,IAAI,CAAC,QAA2B,EAAE,KAAa,EAAE,aAAsB;YACrE,MAAM,YAAY,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CACxC,OAAO,GAAG,KAAK,QAAQ;gBACrB,CAAC,CAAE,QAA+C,CAAC,GAAG,CAAC;gBACvD,CAAC,CAAC,GAAG,CACR,CAAC;YAEF,MAAM,UAAU,GAAG,IAAI,eAAe,CAAC,GAAG,YAAY,CAAC,CAAC;YACxD,MAAM,IAAI,GAAG,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,CAAC;YAE3C,OAAO;gBACL,UAAU,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE;gBAC/B,OAAO,EAAE,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC;gBAC7C,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC;aAClD,CAAC;QACJ,CAAC;KACF,CAAC,CAAC;AACL,CAAC"}
+{"version":3,"file":"compose.js","sourceRoot":"","sources":["../../src/properties/compose.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAIjE,+FAA+F;AAC/F,MAAM,UAAU,MAAM,CAAC,QAAgB;IACrC,OAAO;QACL,kBAAkB,EAAE,IAAI;QACxB,OAAO,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,GAAG,EAAE,CAAE,QAAoC,CAAC,QAAQ,CAAC;KAC7E,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,KAAc;IAC/B,OAAO,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,oBAAoB,IAAI,KAAK,CAAC;AACtF,CAAC;AAED,SAAS,UAAU,CAAC,KAAc;IAChC,OAAO,CACL,OAAO,KAAK,KAAK,UAAU;QAC3B,CAAC,YAAY,IAAK,KAAgB,IAAI,cAAc,IAAK,KAAgB,CAAC,CAC3E,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,QAAiC;IAClD,MAAM,IAAI,GAA4B,EAAE,CAAC;IACzC,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;QACpD,IAAI,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;YACtB,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,GAAG,EAAE;gBAC/B,GAAG,EAAE,GAAG,EAAE,CAAE,KAAuB,EAAE;gBACrC,UAAU,EAAE,IAAI;gBAChB,YAAY,EAAE,IAAI;aACnB,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;QACpB,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,OAAO;AACrB,8DAA8D;AAC9D,eAAmD,EACnD,GAAG,QAAmB;IAEtB,OAAO,oBAAoB,CAAC;QAC1B,IAAI,CAAC,QAA2B,EAAE,KAAa,EAAE,aAAsB;YACrE,MAAM,YAAY,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;gBACxC,IAAI,SAAS,CAAC,GAAG,CAAC;oBAAE,OAAO,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;gBACjD,IAAI,OAAO,GAAG,KAAK,QAAQ;oBAAE,OAAO,GAAG,CAAC;gBACxC,MAAM,IAAI,GAAI,QAA+C,CAAC,GAAG,CAAC,CAAC;gBACnE,OAAO,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC;YACzC,CAAC,CAAC,CAAC;YAEH,MAAM,UAAU,GAAG,IAAI,eAAe,CAAC,GAAG,YAAY,CAAC,CAAC;YACxD,MAAM,IAAI,GAAG,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,CAAC;YAE3C,OAAO;gBACL,UAAU,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE;gBAC/B,OAAO,EAAE,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC;gBAC7C,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC;aAClD,CAAC;QACJ,CAAC;KACF,CAAC,CAAC;AACL,CAAC"}

package/dist/properties/index.d.ts

@@ -4,7 +4,7 @@ export { Computed } from "./computed";
 export { Persisted } from "./persisted";
 export { Slot, initSlots } from "./slot";
 export { History, type HistoryOf } from "./history";
-export { Compose } from "./compose";
+export { Compose, getter } from "./compose";
 export { Resource, type ResourceInstance, type ResourceOptions } from "./resource";
 export { Synced } from "./synced";
 export { DeepState } from "./deep-state";

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;AACnF,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,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,EAAE,MAAM,WAAW,CAAC;AAC5C,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

@@ -4,7 +4,7 @@ export { Computed } from "./computed";
 export { Persisted } from "./persisted";
 export { Slot, initSlots } from "./slot";
 export { History } from "./history";
-export { Compose } from "./compose";
+export { Compose, getter } from "./compose";
 export { Resource } from "./resource";
 export { Synced } from "./synced";
 export { DeepState } from "./deep-state";

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;AACnF,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,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,EAAE,MAAM,WAAW,CAAC;AAC5C,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/package.json

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

package/src/__tests__/lazy.test.ts

@@ -3,13 +3,20 @@ import { beforeEach, afterEach, describe, it, expect, vi } from "vitest";
 
 import { StatefulComponent } from "@praxisjs/core";
 import { Lazy } from "../component/lazy";
+import type { LazyOptions } from "../component/lazy";
 
 type AnyConstructor = new (...args: unknown[]) => StatefulComponent;
 
-function applyLazy<T extends AnyConstructor>(cls: T, placeholder?: number): T {
-  return placeholder !== undefined
-    ? Lazy(placeholder)(cls, {} as ClassDecoratorContext)
-    : Lazy()(cls, {} as ClassDecoratorContext);
+function applyLazy<T extends AnyConstructor>(cls: T, placeholderOrOptions?: number | LazyOptions): T {
+  if (placeholderOrOptions === undefined) return Lazy()(cls, {} as ClassDecoratorContext);
+  return Lazy(placeholderOrOptions)(cls, {} as ClassDecoratorContext);
+}
+
+/** render() now returns a reactive thunk — resolve it to get the actual DOM output. */
+function resolveRender(instance: StatefulComponent): Node | Node[] | null {
+  const result = instance.render();
+  if (typeof result === "function") return (result as () => Node | Node[] | null)();
+  return result;
 }
 
 class BaseComp extends StatefulComponent {
@@ -45,7 +52,7 @@ describe("Lazy decorator", () => {
   it("returns null from render before visibility", () => {
     const Wrapped = applyLazy(BaseComp as AnyConstructor);
     const instance = new Wrapped();
-    expect(instance.render()).toBeNull();
+    expect(resolveRender(instance)).toBeNull();
   });
 
   it("sets _lazyVisible to true when IntersectionObserver is not supported", () => {
@@ -95,7 +102,7 @@ describe("Lazy decorator", () => {
     (instance as unknown as { _anchor: Comment })._anchor = anchor;
 
     instance.onMount?.();
-    expect(instance.render()).toBeNull();
+    expect(resolveRender(instance)).toBeNull();
 
     intersectionCallback(
       [{ isIntersecting: true } as IntersectionObserverEntry],
@@ -103,7 +110,7 @@ describe("Lazy decorator", () => {
     );
 
     expect(parent.style.minHeight).toBe("");
-    expect(instance.render()).not.toBeNull(); // component became visible after intersection
+    expect(resolveRender(instance)).not.toBeNull(); // component became visible after intersection
     expect(mockDisconnect).toHaveBeenCalled();
     document.body.removeChild(parent);
   });
@@ -153,7 +160,7 @@ describe("Lazy decorator", () => {
     (instance as unknown as { _anchor: Comment })._anchor = anchor;
 
     instance.onMount?.();
-    expect(instance.render()).toBeNull(); // not yet visible
+    expect(resolveRender(instance)).toBeNull(); // not yet visible
 
     intersectionCallback(
       [{ isIntersecting: true } as IntersectionObserverEntry],
@@ -161,7 +168,7 @@ describe("Lazy decorator", () => {
     );
 
     // Now visible: render() must delegate to the original render()
-    const result = instance.render();
+    const result = resolveRender(instance);
     expect(result).not.toBeNull();
     document.body.removeChild(parent);
   });
@@ -184,12 +191,83 @@ describe("Lazy decorator", () => {
       null as unknown as IntersectionObserver,
     );
 
-    expect(instance.render()).toBeNull();
+    expect(resolveRender(instance)).toBeNull();
     expect(mockDisconnect).not.toHaveBeenCalled();
     expect(parent.style.minHeight).toBe("200px");
     document.body.removeChild(parent);
   });
 
+  it("accepts a LazyOptions object instead of a number (line 74 false branch)", () => {
+    const Wrapped = applyLazy(BaseComp as AnyConstructor, { placeholder: 150, rootMargin: "50px" });
+    const instance = new Wrapped();
+
+    const parent = document.createElement("div");
+    document.body.appendChild(parent);
+    const anchor = document.createComment("end");
+    parent.appendChild(anchor);
+    (instance as unknown as { _anchor: Comment })._anchor = anchor;
+
+    instance.onMount?.();
+    expect(parent.style.minHeight).toBe("150px");
+    document.body.removeChild(parent);
+  });
+
+  it("uses root.current as the IntersectionObserver root when provided (line 42 false branch)", () => {
+    const rootEl = document.createElement("div");
+    document.body.appendChild(rootEl);
+
+    let capturedInit: IntersectionObserverInit | undefined;
+    globalThis.IntersectionObserver = class {
+      constructor(cb: IntersectionObserverCallback, init?: IntersectionObserverInit) {
+        intersectionCallback = cb;
+        capturedInit = init;
+      }
+      observe = mockObserve;
+      disconnect = mockDisconnect;
+    } as unknown as typeof IntersectionObserver;
+
+    const Wrapped = applyLazy(BaseComp as AnyConstructor, { root: { current: rootEl } });
+    const instance = new Wrapped();
+
+    const parent = document.createElement("div");
+    document.body.appendChild(parent);
+    const anchor = document.createComment("end");
+    parent.appendChild(anchor);
+    (instance as unknown as { _anchor: Comment })._anchor = anchor;
+
+    instance.onMount?.();
+    expect(capturedInit?.root).toBe(rootEl);
+
+    document.body.removeChild(parent);
+    document.body.removeChild(rootEl);
+  });
+
+  it("falls back to null root when root.current is null (line 42 ?? null branch)", () => {
+    let capturedInit: IntersectionObserverInit | undefined;
+    globalThis.IntersectionObserver = class {
+      constructor(cb: IntersectionObserverCallback, init?: IntersectionObserverInit) {
+        intersectionCallback = cb;
+        capturedInit = init;
+      }
+      observe = mockObserve;
+      disconnect = mockDisconnect;
+    } as unknown as typeof IntersectionObserver;
+
+    const Wrapped = applyLazy(BaseComp as AnyConstructor, { root: { current: null } });
+    const instance = new Wrapped();
+
+    const parent = document.createElement("div");
+    document.body.appendChild(parent);
+    const anchor = document.createComment("end");
+    parent.appendChild(anchor);
+    (instance as unknown as { _anchor: Comment })._anchor = anchor;
+
+    instance.onMount?.();
+    expect(capturedInit?.root).toBeNull();
+
+    document.body.removeChild(parent);
+  });
+
   it("does not re-apply minHeight on remount when already visible", () => {
     const Wrapped = applyLazy(BaseComp as AnyConstructor, 300);
     const instance = new Wrapped();

package/src/__tests__/properties.test.ts

@@ -967,7 +967,7 @@ describe("@Compose decorator — new cases", () => {
     }).toThrow("setup failed");
   });
 
-  it("string argument resolution where the instance property is undefined", () => {
+  it("string argument that matches no instance property falls back to the literal string", () => {
     class ArgComposable {
       constructor(private val: unknown) {}
       setup() { return { resolved: this.val }; }
@@ -978,11 +978,79 @@ describe("@Compose decorator — new cases", () => {
     Compose(ArgComposable as any, "missingProp")(undefined, ctx);
 
     const instance = new TestComponent();
-    // missingProp is not set on instance — resolves to undefined
+    // missingProp is not set on instance — falls back to the literal "missingProp"
     run(instance);
 
     const view = (instance as unknown as Record<string, unknown>).strArgUndef as Record<string, unknown>;
-    expect(view.resolved).toBeUndefined();
+    expect(view.resolved).toBe("missingProp");
+  });
+
+  it("string argument that matches an instance property resolves to its value", () => {
+    class ArgComposable {
+      constructor(private val: unknown) {}
+      setup() { return { resolved: this.val }; }
+    }
+
+    const { ctx, run } = fieldCtx("strArgFound");
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Compose(ArgComposable as any, "myProp")(undefined, ctx);
+
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).myProp = 42;
+    run(instance);
+
+    const view = (instance as unknown as Record<string, unknown>).strArgFound as Record<string, unknown>;
+    expect(view.resolved).toBe(42);
+  });
+});
+
+// ── getter() helper ───────────────────────────────────────────────────────────
+
+import { getter } from "../properties/compose";
+
+describe("getter() factory", () => {
+  it("resolves to a function that reads the named property from the instance", () => {
+    class ArgComposable {
+      constructor(private getVal: () => unknown) {}
+      setup() { return { current: this.getVal() }; }
+    }
+
+    const { ctx, run } = fieldCtx("withGetter");
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Compose(ArgComposable as any, getter("dynProp"))(undefined, ctx);
+
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).dynProp = 99;
+    run(instance);
+
+    const view = (instance as unknown as Record<string, unknown>).withGetter as Record<string, unknown>;
+    expect(view.current).toBe(99);
+  });
+
+  it("getter() produces a live reader — reads the property at call time", () => {
+    class ArgComposable {
+      constructor(private getVal: () => unknown) {}
+      setup() { return { read: this.getVal }; }
+    }
+
+    const { ctx, run } = fieldCtx("liveGetter");
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Compose(ArgComposable as any, getter("mutableProp"))(undefined, ctx);
+
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).mutableProp = "first";
+    run(instance);
+
+    const view = (instance as unknown as Record<string, unknown>).liveGetter as Record<string, () => unknown>;
+    expect(view.read()).toBe("first");
+
+    (instance as unknown as Record<string, unknown>).mutableProp = "second";
+    expect(view.read()).toBe("second");
+  });
+
+  it("getter() is marked as a ComposeFactory (has __isComposeFactory)", () => {
+    const g = getter("foo");
+    expect((g as unknown as Record<string, unknown>).__isComposeFactory).toBe(true);
   });
 });
 

package/src/component/index.ts

@@ -1,3 +1,2 @@
 export { Component } from "./component";
 export { Lazy } from "./lazy";
-export { Virtual } from "./virtual";

package/src/component/lazy.ts

@@ -2,13 +2,26 @@ import { type RootComponent, signal } from "@praxisjs/core/internal";
 
 import { ClassBehavior, createClassDecorator, type ClassEnhancement } from "../create-class-decorator";
 
+export interface LazyOptions {
+  /** Placeholder height in pixels while the component is off-screen. */
+  placeholder?: number;
+  /**
+   * Scroll container to observe against. Defaults to the viewport (`null`).
+   * Pass a ref object `{ current: HTMLElement | null }` to scope intersection
+   * to a specific scrollable container.
+   */
+  root?: { current: HTMLElement | null } | null;
+  /** Extra margin around the root before triggering (e.g. `"200px"`). Defaults to `"100px"`. */
+  rootMargin?: string;
+}
+
 class LazyBehavior extends ClassBehavior {
-  constructor(private readonly placeholder: number) {
+  constructor(private readonly options: LazyOptions) {
     super();
   }
 
   create(instance: RootComponent): ClassEnhancement {
-    const placeholder = this.placeholder;
+    const { placeholder = 200, root, rootMargin = "100px" } = this.options;
     const visible = signal(false);
     let observer: IntersectionObserver | undefined;
 
@@ -25,6 +38,9 @@ class LazyBehavior extends ClassBehavior {
 
         if (!visible()) el.style.minHeight = `${String(placeholder)}px`;
 
+        const rootEl =
+          root === undefined || root === null ? null : root.current ?? null;
+
         observer = new IntersectionObserver(
           (entries) => {
             if (entries[0]?.isIntersecting) {
@@ -33,7 +49,7 @@ class LazyBehavior extends ClassBehavior {
               observer?.disconnect();
             }
           },
-          { rootMargin: "100px" },
+          { root: rootEl, rootMargin },
         );
 
         observer.observe(el);
@@ -44,13 +60,19 @@ class LazyBehavior extends ClassBehavior {
       },
 
       render(originalRender) {
-        if (!visible()) return null;
-        return originalRender();
+        return (() => {
+          if (!visible()) return null;
+          return originalRender();
+        }) as unknown as Node;
       },
     };
   }
 }
 
-export function Lazy(placeholder = 200) {
-  return createClassDecorator(new LazyBehavior(placeholder));
+export function Lazy(placeholderOrOptions: number | LazyOptions = 200) {
+  const options: LazyOptions =
+    typeof placeholderOrOptions === "number"
+      ? { placeholder: placeholderOrOptions }
+      : placeholderOrOptions;
+  return createClassDecorator(new LazyBehavior(options));
 }

package/src/create-class-decorator.ts

@@ -19,6 +19,12 @@ export abstract class ClassBehavior {
   initialize?(_Enhanced: new (...args: any[]) => unknown, _original: new (...args: any[]) => unknown): void;
 }
 
+// Tracks instances whose render is currently being called as `originalRender`
+// from within an enhancement. When set, the Enhanced render skips the
+// this._enh.render dispatch so stacked decorators (e.g. @Lazy + @Component)
+// don't re-enter the outermost enhancement recursively.
+const _originalRenderInProgress = new WeakSet();
+
 export function createClassDecorator(behavior: ClassBehavior) {
   return function <
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -40,12 +46,18 @@ export function createClassDecorator(behavior: ClassBehavior) {
       }
 
       render(...args: unknown[]): Node | Node[] | null {
-        const originalRender = () =>
-          (constructor.prototype as { render: (...a: unknown[]) => Node | Node[] | null }).render.apply(this, args);
-        if (this._enh.render) {
+        const originalRender = () => {
+          _originalRenderInProgress.add(this);
+          try {
+            return (constructor.prototype as { render: (...a: unknown[]) => Node | Node[] | null }).render.apply(this, args);
+          } finally {
+            _originalRenderInProgress.delete(this);
+          }
+        };
+        if (this._enh.render && !_originalRenderInProgress.has(this)) {
           return this._enh.render(originalRender);
         }
-        return originalRender();
+        return (constructor.prototype as { render: (...a: unknown[]) => Node | Node[] | null }).render.apply(this, args);
       }
     };
 

package/src/index.ts

@@ -1,4 +1,4 @@
-export { Component, Lazy, Virtual } from "./component";
+export { Component, Lazy } from "./component";
 export {
   Memo,
   Bind,
@@ -23,6 +23,7 @@ export {
   History,
   type HistoryOf,
   Compose,
+  getter,
   Resource,
   type ResourceInstance,
   type ResourceOptions,