angular-three-soba 2.2.0 → 2.3.0

package/fesm2022/angular-three-soba-abstractions.mjs

@@ -1,9 +1,8 @@
 import * as i0 from '@angular/core';
-import { input, viewChild, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, computed, afterNextRender, untracked, inject, signal, effect, output, DestroyRef } from '@angular/core';
+import { input, viewChild, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, computed, effect, untracked, inject, output, DestroyRef } from '@angular/core';
 import { omit, extend, injectBeforeRender, injectStore, pick, checkNeedsUpdate, NgtArgs, getLocalState, resolveRef } from 'angular-three';
 import { mergeInputs } from 'ngxtension/inject-inputs';
 import { Group, Quaternion, Vector3, Vector4, Vector2, Color, CatmullRomCurve3, CubicBezierCurve3, EdgesGeometry, CanvasTexture, BackSide, Plane, Mesh, PlaneGeometry, Object3D, Shape, ExtrudeGeometry, QuadraticBezierCurve3 } from 'three';
-import { injectAutoEffect } from 'ngxtension/auto-effect';
 import { LineSegments2, Line2, LineMaterial, LineSegmentsGeometry, LineGeometry, toCreasedNormals, TextGeometry, mergeVertices } from 'three-stdlib';
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { GridMaterial } from 'angular-three-soba/shaders';
@@ -49,8 +48,8 @@ class NgtsBillboard {
                 group.rotation.z = prevRotation.z;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsBillboard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsBillboard, isStandalone: true, selector: "ngts-billboard", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "innerRef", first: true, predicate: ["inner"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsBillboard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsBillboard, isStandalone: true, selector: "ngts-billboard", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "innerRef", first: true, predicate: ["inner"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-group #group [parameters]="parameters()">
 			<ngt-group #inner>
 				<ng-content />
@@ -58,7 +57,7 @@ class NgtsBillboard {
 		</ngt-group>
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsBillboard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsBillboard, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-billboard',
@@ -96,12 +95,13 @@ class NgtsLine {
         this.vertexColors = pick(this.options, 'vertexColors');
         this.dashed = pick(this.options, 'dashed');
         this.color = pick(this.options, 'color');
-        this.lineWidth = pick(this.options, 'lineWidth');
-        this.linewidth = pick(this.options, 'linewidth');
         this.vertex = computed(() => Boolean(this.vertexColors()));
         this.resolution = computed(() => [this.size().width, this.size().height]);
+        this.lineWidth = pick(this.options, 'lineWidth');
+        this.linewidth = pick(this.options, 'linewidth');
         this.line2 = computed(() => (this.segments() ? new LineSegments2() : new Line2()));
         this.lineMaterial = new LineMaterial();
+        this.actualLineWidth = computed(() => this.linewidth() ?? this.lineWidth() ?? 1);
         this.itemSize = computed(() => (this.vertexColors()?.[0]?.length === 4 ? 4 : 3));
         this.lineGeometry = computed(() => {
             const geom = this.segments() ? new LineSegmentsGeometry() : new LineGeometry();
@@ -126,29 +126,26 @@ class NgtsLine {
             }
             return geom;
         });
-        const autoEffect = injectAutoEffect();
-        afterNextRender(() => {
-            autoEffect(() => {
-                const [lineMaterial, dashed] = [this.lineMaterial, this.dashed()];
-                if (dashed) {
-                    lineMaterial.defines['USE_DASH'] = '';
-                }
-                else {
-                    delete lineMaterial.defines['USE_DASH'];
-                }
-                checkNeedsUpdate(lineMaterial);
-            });
-            autoEffect(() => {
-                const [lineGeometry, lineMaterial] = [this.lineGeometry(), this.lineMaterial];
-                return () => {
-                    lineGeometry.dispose();
-                    lineMaterial.dispose();
-                };
+        effect(() => {
+            const [lineMaterial, dashed] = [this.lineMaterial, this.dashed()];
+            if (dashed) {
+                lineMaterial.defines['USE_DASH'] = '';
+            }
+            else {
+                delete lineMaterial.defines['USE_DASH'];
+            }
+            checkNeedsUpdate(lineMaterial);
+        });
+        effect((onCleanup) => {
+            const [lineGeometry, lineMaterial] = [this.lineGeometry(), this.lineMaterial];
+            onCleanup(() => {
+                lineGeometry.dispose();
+                lineMaterial.dispose();
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsLine, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsLine, isStandalone: true, selector: "ngts-line", inputs: { points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "lineRef", first: true, predicate: ["line"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsLine, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsLine, isStandalone: true, selector: "ngts-line", inputs: { points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "lineRef", first: true, predicate: ["line"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-primitive *args="[line2()]" #line [parameters]="parameters()">
 			<ngt-primitive *args="[lineGeometry()]" attach="geometry" (attached)="onGeometryAttached($any($event))" />
 			<ngt-primitive
@@ -157,7 +154,7 @@ class NgtsLine {
 				[color]="color()"
 				[vertexColors]="vertex()"
 				[resolution]="resolution()"
-				[linewidth]="linewidth() ?? lineWidth() ?? 1"
+				[linewidth]="actualLineWidth()"
 				[dashed]="dashed()"
 				[transparent]="itemSize() === 4"
 				[parameters]="parameters()"
@@ -166,7 +163,7 @@ class NgtsLine {
 		</ngt-primitive>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsLine, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsLine, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-line',
@@ -180,7 +177,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
 				[color]="color()"
 				[vertexColors]="vertex()"
 				[resolution]="resolution()"
-				[linewidth]="linewidth() ?? lineWidth() ?? 1"
+				[linewidth]="actualLineWidth()"
 				[dashed]="dashed()"
 				[transparent]="itemSize() === 4"
 				[parameters]="parameters()"
@@ -242,14 +239,14 @@ class NgtsCatmullRomLine {
         });
         this.lineOptions = computed(() => ({ ...this.parameters(), vertexColors: this.interpolatedVertexColors() }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsCatmullRomLine, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsCatmullRomLine, isStandalone: true, selector: "ngts-catmull-rom-line", inputs: { points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "line", first: true, predicate: NgtsLine, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsCatmullRomLine, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsCatmullRomLine, isStandalone: true, selector: "ngts-catmull-rom-line", inputs: { points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "line", first: true, predicate: NgtsLine, descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngts-line [points]="segmentedPoints()" [options]="lineOptions()">
 			<ng-content />
 		</ngts-line>
 	`, isInline: true, dependencies: [{ kind: "component", type: NgtsLine, selector: "ngts-line", inputs: ["points", "options"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsCatmullRomLine, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsCatmullRomLine, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-catmull-rom-line',
@@ -287,14 +284,14 @@ class NgtsCubicBezierLine {
             return new CubicBezierCurve3(startV, midAV, midBV, endV).getPoints(segments);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsCubicBezierLine, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsCubicBezierLine, isStandalone: true, selector: "ngts-cubic-bezier-line", inputs: { start: { classPropertyName: "start", publicName: "start", isSignal: true, isRequired: true, transformFunction: null }, end: { classPropertyName: "end", publicName: "end", isSignal: true, isRequired: true, transformFunction: null }, midA: { classPropertyName: "midA", publicName: "midA", isSignal: true, isRequired: true, transformFunction: null }, midB: { classPropertyName: "midB", publicName: "midB", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "line", first: true, predicate: NgtsLine, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsCubicBezierLine, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsCubicBezierLine, isStandalone: true, selector: "ngts-cubic-bezier-line", inputs: { start: { classPropertyName: "start", publicName: "start", isSignal: true, isRequired: true, transformFunction: null }, end: { classPropertyName: "end", publicName: "end", isSignal: true, isRequired: true, transformFunction: null }, midA: { classPropertyName: "midA", publicName: "midA", isSignal: true, isRequired: true, transformFunction: null }, midB: { classPropertyName: "midB", publicName: "midB", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "line", first: true, predicate: NgtsLine, descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngts-line [points]="points()" [options]="parameters()">
 			<ng-content />
 		</ngts-line>
 	`, isInline: true, dependencies: [{ kind: "component", type: NgtsLine, selector: "ngts-line", inputs: ["points", "options"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsCubicBezierLine, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsCubicBezierLine, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-cubic-bezier-line',
@@ -320,44 +317,41 @@ class NgtsEdges {
         this.lineOptions = computed(() => ({ ...this.parameters(), raycast: () => null }));
         this.tmpPoints = [0, 0, 0, 1, 0, 0];
         this.line = viewChild.required(NgtsLine);
-        const autoEffect = injectAutoEffect();
-        afterNextRender(() => {
-            autoEffect(() => {
-                const line = this.line().lineRef()?.nativeElement;
-                if (!line)
-                    return;
-                const lS = getLocalState(line);
-                if (!lS)
-                    return;
-                const parent = lS.parent();
-                if (!parent)
-                    return;
-                const { geometry: explicitGeometry, threshold } = this.options();
-                const geometry = explicitGeometry ?? parent.geometry;
-                if (!geometry)
-                    return;
-                const cached = this.memoizedGeometry === geometry && this.memoizedThreshold === threshold;
-                if (cached)
-                    return;
-                this.memoizedGeometry = geometry;
-                this.memoizedThreshold = threshold;
-                const points = new EdgesGeometry(geometry, threshold).attributes['position']
-                    .array;
-                line.geometry.setPositions(points);
-                checkNeedsUpdate(line.geometry.attributes['instanceStart']);
-                checkNeedsUpdate(line.geometry.attributes['instanceEnd']);
-                line.computeLineDistances();
-            });
+        effect(() => {
+            const line = this.line().lineRef()?.nativeElement;
+            if (!line)
+                return;
+            const lS = getLocalState(line);
+            if (!lS)
+                return;
+            const parent = lS.parent();
+            if (!parent)
+                return;
+            const { geometry: explicitGeometry, threshold } = this.options();
+            const geometry = explicitGeometry ?? parent.geometry;
+            if (!geometry)
+                return;
+            const cached = this.memoizedGeometry === geometry && this.memoizedThreshold === threshold;
+            if (cached)
+                return;
+            this.memoizedGeometry = geometry;
+            this.memoizedThreshold = threshold;
+            const points = new EdgesGeometry(geometry, threshold).attributes['position']
+                .array;
+            line.geometry.setPositions(points);
+            checkNeedsUpdate(line.geometry.attributes['instanceStart']);
+            checkNeedsUpdate(line.geometry.attributes['instanceEnd']);
+            line.computeLineDistances();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsEdges, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsEdges, isStandalone: true, selector: "ngts-edges", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "line", first: true, predicate: NgtsLine, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsEdges, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsEdges, isStandalone: true, selector: "ngts-edges", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "line", first: true, predicate: NgtsLine, descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngts-line [points]="tmpPoints" [options]="lineOptions()">
 			<ng-content />
 		</ngts-line>
 	`, isInline: true, dependencies: [{ kind: "component", type: NgtsLine, selector: "ngts-line", inputs: ["points", "options"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsEdges, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsEdges, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-edges',
@@ -424,8 +418,8 @@ class NgtsGradientTexture {
         });
         extend({ CanvasTexture });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsGradientTexture, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtsGradientTexture, isStandalone: true, selector: "ngts-gradient-texture", inputs: { attach: { classPropertyName: "attach", publicName: "attach", isSignal: true, isRequired: false, transformFunction: null }, stops: { classPropertyName: "stops", publicName: "stops", isSignal: true, isRequired: true, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsGradientTexture, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtsGradientTexture, isStandalone: true, selector: "ngts-gradient-texture", inputs: { attach: { classPropertyName: "attach", publicName: "attach", isSignal: true, isRequired: false, transformFunction: null }, stops: { classPropertyName: "stops", publicName: "stops", isSignal: true, isRequired: true, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-canvas-texture
 			*args="[canvas()]"
 			[attach]="attach()"
@@ -436,7 +430,7 @@ class NgtsGradientTexture {
 		</ngt-canvas-texture>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsGradientTexture, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsGradientTexture, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-gradient-texture',
@@ -523,8 +517,8 @@ class NgtsGrid {
             worldPlanePosition.value.set(0, 0, 0).applyMatrix4(mesh.matrixWorld);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsGrid, isStandalone: true, selector: "ngts-grid", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "meshRef", first: true, predicate: ["mesh"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsGrid, isStandalone: true, selector: "ngts-grid", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "meshRef", first: true, predicate: ["mesh"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-mesh #mesh [frustumCulled]="false" [parameters]="parameters()">
 			<ngt-plane-geometry *args="planeArgs()" />
 			<ngt-grid-material [transparent]="true" [side]="side()" [parameters]="uniforms()">
@@ -534,7 +528,7 @@ class NgtsGrid {
 		</ngt-mesh>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsGrid, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsGrid, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-grid',
@@ -558,27 +552,25 @@ function injectHelper(object, helperConstructor, { injector, args = () => [], }
     return assertInjector(injectHelper, injector, () => {
         const store = injectStore();
         const scene = store.select('scene');
-        const helper = signal(null);
-        effect((onCleanup) => {
-            let currentHelper = undefined;
+        const helper = computed(() => {
             const maybeObject3D = object();
             if (!maybeObject3D)
-                return;
+                return null;
             const object3D = resolveRef(maybeObject3D);
             if (!object3D)
-                return;
-            currentHelper = new (helperConstructor())(object3D, ...args());
+                return null;
+            const currentHelper = new (helperConstructor())(object3D, ...args());
+            currentHelper.traverse((child) => (child.raycast = () => null));
+            return currentHelper;
+        });
+        effect((onCleanup) => {
+            const currentHelper = helper();
             if (!currentHelper)
                 return;
-            untracked(() => {
-                helper.set(currentHelper);
-            });
-            // Prevent the helpers from blocking rays
-            currentHelper.traverse((child) => (child.raycast = () => null));
-            scene().add(currentHelper);
+            const _scene = scene();
+            _scene.add(currentHelper);
             onCleanup(() => {
-                helper.set(null);
-                scene().remove(currentHelper);
+                _scene.remove(currentHelper);
                 currentHelper.dispose?.();
             });
         });
@@ -587,7 +579,7 @@ function injectHelper(object, helperConstructor, { injector, args = () => [], }
             if (currentHelper)
                 currentHelper.update();
         });
-        return helper.asReadonly();
+        return helper;
     });
 }
 class NgtsHelper {
@@ -607,12 +599,12 @@ class NgtsHelper {
         this.helper = injectHelper(this.parent, this.type, { args: this.options });
         extend({ Object3D });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsHelper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsHelper, isStandalone: true, selector: "ngts-helper", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "helperRef", first: true, predicate: ["helper"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsHelper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsHelper, isStandalone: true, selector: "ngts-helper", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "helperRef", first: true, predicate: ["helper"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-object3D #helper />
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsHelper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsHelper, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -643,14 +635,14 @@ class NgtsPrismGeometry {
         this.geometryRef = viewChild('geometry');
         extend({ ExtrudeGeometry });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsPrismGeometry, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsPrismGeometry, isStandalone: true, selector: "ngts-prism-geometry", inputs: { attach: { classPropertyName: "attach", publicName: "attach", isSignal: true, isRequired: false, transformFunction: null }, vertices: { classPropertyName: "vertices", publicName: "vertices", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "geometryRef", first: true, predicate: ["geometry"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsPrismGeometry, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsPrismGeometry, isStandalone: true, selector: "ngts-prism-geometry", inputs: { attach: { classPropertyName: "attach", publicName: "attach", isSignal: true, isRequired: false, transformFunction: null }, vertices: { classPropertyName: "vertices", publicName: "vertices", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "geometryRef", first: true, predicate: ["geometry"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-extrude-geometry #geometry *args="[shape(), parameters()]" [attach]="attach()">
 			<ng-content />
 		</ngt-extrude-geometry>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsPrismGeometry, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsPrismGeometry, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-prism-geometry',
@@ -711,14 +703,14 @@ class NgtsQuadraticBezierLine {
         }
         return this.curve.getPoints(segments);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsQuadraticBezierLine, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsQuadraticBezierLine, isStandalone: true, selector: "ngts-quadratic-bezier-line", inputs: { start: { classPropertyName: "start", publicName: "start", isSignal: true, isRequired: false, transformFunction: null }, end: { classPropertyName: "end", publicName: "end", isSignal: true, isRequired: false, transformFunction: null }, mid: { classPropertyName: "mid", publicName: "mid", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "line", first: true, predicate: NgtsLine, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsQuadraticBezierLine, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsQuadraticBezierLine, isStandalone: true, selector: "ngts-quadratic-bezier-line", inputs: { start: { classPropertyName: "start", publicName: "start", isSignal: true, isRequired: false, transformFunction: null }, end: { classPropertyName: "end", publicName: "end", isSignal: true, isRequired: false, transformFunction: null }, mid: { classPropertyName: "mid", publicName: "mid", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "line", first: true, predicate: NgtsLine, descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngts-line [points]="points()" [options]="parameters()">
 			<ng-content />
 		</ngts-line>
 	`, isInline: true, dependencies: [{ kind: "component", type: NgtsLine, selector: "ngts-line", inputs: ["points", "options"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsQuadraticBezierLine, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsQuadraticBezierLine, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-quadratic-bezier-line',
@@ -799,28 +791,23 @@ class NgtsRoundedBox {
             };
         });
         extend({ ExtrudeGeometry, Mesh });
-        const autoEffect = injectAutoEffect();
-        afterNextRender(() => {
-            autoEffect(() => {
-                const geometry = this.geometryRef()?.nativeElement;
-                if (!geometry)
-                    return;
-                this.shape();
-                this.params();
-                geometry.center();
-                toCreasedNormals(geometry, untracked(this.creaseAngle));
-            });
+        effect(() => {
+            const geometry = this.geometryRef()?.nativeElement;
+            if (!geometry)
+                return;
+            geometry.center();
+            toCreasedNormals(geometry, untracked(this.creaseAngle));
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsRoundedBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsRoundedBox, isStandalone: true, selector: "ngts-rounded-box", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "meshRef", first: true, predicate: ["mesh"], descendants: true, isSignal: true }, { propertyName: "geometryRef", first: true, predicate: ["geometry"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsRoundedBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsRoundedBox, isStandalone: true, selector: "ngts-rounded-box", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "meshRef", first: true, predicate: ["mesh"], descendants: true, isSignal: true }, { propertyName: "geometryRef", first: true, predicate: ["geometry"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-mesh #mesh [parameters]="parameters()">
 			<ngt-extrude-geometry #geometry *args="[shape(), params()]" />
 			<ng-content />
 		</ngt-mesh>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsRoundedBox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsRoundedBox, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-rounded-box',
@@ -849,7 +836,6 @@ class NgtsText {
         this.options = input(defaultOptions$1, { transform: mergeInputs(defaultOptions$1) });
         this.parameters = omit(this.options, ['font', 'fontSize', 'sdfGlyphSize', 'anchorX', 'anchorY', 'characters']);
         this.synced = output();
-        this.autoEffect = injectAutoEffect();
         this.store = injectStore();
         this.invalidate = this.store.select('invalidate');
         this.characters = pick(this.options, 'characters');
@@ -862,25 +848,22 @@ class NgtsText {
         inject(DestroyRef).onDestroy(() => {
             this.troikaMesh.dispose();
         });
-        // NOTE: this could be just effect but autoEffect is used for consistency
-        this.autoEffect(() => {
+        effect(() => {
             const [font, characters, invalidate] = [this.font(), this.characters(), this.invalidate()];
             if (font) {
                 preloadFont({ font, characters }, () => invalidate());
             }
         });
-        afterNextRender(() => {
-            this.autoEffect(() => {
-                const [invalidate] = [this.invalidate(), this.text(), this.options()];
-                this.troikaMesh.sync(() => {
-                    invalidate();
-                    this.synced.emit(this.troikaMesh);
-                });
+        effect(() => {
+            const [invalidate] = [this.invalidate(), this.text(), this.options()];
+            this.troikaMesh.sync(() => {
+                invalidate();
+                this.synced.emit(this.troikaMesh);
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsText, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtsText, isStandalone: true, selector: "ngts-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { synced: "synced" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsText, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtsText, isStandalone: true, selector: "ngts-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { synced: "synced" }, ngImport: i0, template: `
 		<ngt-primitive
 			*args="[troikaMesh]"
 			[text]="text()"
@@ -895,7 +878,7 @@ class NgtsText {
 		</ngt-primitive>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsText, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-text',
@@ -972,28 +955,26 @@ class NgtsText3D {
             return [text, { font, ...textOptions }];
         });
         extend({ Mesh, TextGeometry });
-        const autoEffect = injectAutoEffect();
-        afterNextRender(() => {
-            autoEffect(() => {
-                const [mesh, smooth, textArgs] = [this.meshRef()?.nativeElement, this.smooth(), this.textArgs()];
-                if (!textArgs || !mesh)
-                    return;
-                if (smooth) {
-                    mesh.geometry = mergeVertices(mesh.geometry, smooth);
-                    mesh.geometry.computeVertexNormals();
-                }
-            });
+        effect(() => {
+            const [mesh, textArgs] = [this.meshRef()?.nativeElement, this.textArgs()];
+            if (!textArgs || !mesh)
+                return;
+            const smooth = this.smooth();
+            if (smooth) {
+                mesh.geometry = mergeVertices(mesh.geometry, smooth);
+                mesh.geometry.computeVertexNormals();
+            }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsText3D, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsText3D, isStandalone: true, selector: "ngts-text-3d", inputs: { font: { classPropertyName: "font", publicName: "font", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "meshRef", first: true, predicate: ["mesh"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsText3D, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsText3D, isStandalone: true, selector: "ngts-text-3d", inputs: { font: { classPropertyName: "font", publicName: "font", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "meshRef", first: true, predicate: ["mesh"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-mesh #mesh [parameters]="parameters()">
 			<ngt-text-geometry *args="textArgs()" />
 			<ng-content />
 		</ngt-mesh>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsText3D, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsText3D, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-text-3d',