angular-three-soba 1.14.0 → 2.0.0-beta.3

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

@@ -1,21 +1,17 @@
 import * as i0 from '@angular/core';
-import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Directive, inject, InjectionToken, EventEmitter, TemplateRef, Output, ContentChild } from '@angular/core';
-import { extend, NgtRxStore, injectNgtRef, NgtStore, startWithUndefined, NgtArgs, NgtPortal, NgtPortalContent, NgtRepeat, NgtPush } from 'angular-three';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, computed, Directive, inject, effect, InjectionToken, EventEmitter, TemplateRef, Output, ContentChild, signal, DestroyRef } from '@angular/core';
+import { extend, NgtSignalStore, injectNgtRef, injectBeforeRender, NgtStore, requestAnimationInInjectionContext, NgtArgs, NgtPortal, NgtPortalContent, NgtRepeat } from 'angular-three';
 import * as THREE from 'three';
 import { Group, CatmullRomCurve3, LineSegments, LineBasicMaterial, Vector3, Quaternion, Object3D, Matrix4, Mesh, BoxGeometry, MeshBasicMaterial, MeshLambertMaterial, CanvasTexture, AmbientLight, PointLight, Sprite, SpriteMaterial } from 'three';
-import { combineLatest, map, switchMap, of } from 'rxjs';
-import { LineMaterial, LineSegmentsGeometry, LineGeometry, LineSegments2, Line2, TextGeometry, FontLoader } from 'three-stdlib';
+import { LineSegmentsGeometry, LineGeometry, LineMaterial, LineSegments2, Line2, TextGeometry, FontLoader } from 'three-stdlib';
 import { NgIf, NgTemplateOutlet, DOCUMENT, NgFor } from '@angular/common';
 import { NgtsOrthographicCamera } from 'angular-three-soba/cameras';
-import { RxActionFactory } from '@rx-angular/state/actions';
+import { toSignal, toObservable } from '@angular/core/rxjs-interop';
+import { switchMap, of, map } from 'rxjs';
 import { Text, preloadFont } from 'troika-three-text';
 
 extend({ Group });
-class NgtsBillboard extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.billboardRef = injectNgtRef();
-    }
+class NgtsBillboard extends NgtSignalStore {
     set follow(follow) {
         this.set({ follow });
     }
@@ -28,29 +24,30 @@ class NgtsBillboard extends NgtRxStore {
     set lockZ(lockZ) {
         this.set({ lockZ });
     }
-    initialize() {
-        super.initialize();
-        this.set({ follow: true, lockX: false, lockY: false, lockZ: false });
-    }
-    onBeforeRender({ state, object }) {
-        const { follow, lockX, lockY, lockZ } = this.get();
-        if (!follow)
-            return;
-        // save prev rotation in case we're locking axises
-        const prevRotation = object.rotation.clone();
-        // always face the camera
-        state.camera.getWorldQuaternion(object.quaternion);
-        // readjust any axis that is locked
-        if (lockX)
-            object.rotation.x = prevRotation.x;
-        if (lockY)
-            object.rotation.y = prevRotation.y;
-        if (lockZ)
-            object.rotation.z = prevRotation.z;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsBillboard, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    constructor() {
+        super({ follow: true, lockX: false, lockY: false, lockZ: false });
+        this.billboardRef = injectNgtRef();
+        injectBeforeRender(({ camera }) => {
+            const ref = this.billboardRef.untracked;
+            const { follow, lockX, lockY, lockZ } = this.get();
+            if (!ref || !follow)
+                return;
+            // save previous rotation in case we're locking an axis
+            const prevRotation = ref.rotation.clone();
+            // always face the camera
+            camera.getWorldQuaternion(ref.quaternion);
+            // re-adjust any axis that is locked
+            if (lockX)
+                ref.rotation.x = prevRotation.x;
+            if (lockY)
+                ref.rotation.y = prevRotation.y;
+            if (lockZ)
+                ref.rotation.z = prevRotation.z;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsBillboard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsBillboard, isStandalone: true, selector: "ngts-billboard", inputs: { billboardRef: "billboardRef", follow: "follow", lockX: "lockX", lockY: "lockY", lockZ: "lockZ" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-group ngtCompound [ref]="billboardRef" (beforeRender)="onBeforeRender($any($event))">
+        <ngt-group ngtCompound [ref]="billboardRef">
             <ng-content />
         </ngt-group>
     `, isInline: true }); }
@@ -61,13 +58,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     selector: 'ngts-billboard',
                     standalone: true,
                     template: `
-        <ngt-group ngtCompound [ref]="billboardRef" (beforeRender)="onBeforeRender($any($event))">
+        <ngt-group ngtCompound [ref]="billboardRef">
             <ng-content />
         </ngt-group>
     `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { billboardRef: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { billboardRef: [{
                 type: Input
             }], follow: [{
                 type: Input
@@ -79,7 +76,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Input
             }] } });
 
-class NgtsLineInput extends NgtRxStore {
+class NgtsLineInputs extends NgtSignalStore {
     set vertexColors(vertexColors) {
         this.set({ vertexColors });
     }
@@ -116,16 +113,53 @@ class NgtsLineInput extends NgtRxStore {
     set worldUnits(worldUnits) {
         this.set({ worldUnits });
     }
-    initialize() {
-        super.initialize();
-        this.set({ color: 'black' });
+    #color;
+    #vertexColors;
+    #resolution;
+    #linewidth;
+    #alphaToCoverage;
+    #dashed;
+    #dashScale;
+    #dashSize;
+    #dashOffset;
+    #gapSize;
+    #wireframe;
+    #worldUnits;
+    constructor() {
+        super({ color: 'black' });
+        this.#color = this.select('color');
+        this.#vertexColors = this.select('vertexColors');
+        this.#resolution = this.select('resolution');
+        this.#linewidth = this.select('lineWidth');
+        this.#alphaToCoverage = this.select('alphaToCoverage');
+        this.#dashed = this.select('dashed');
+        this.#dashScale = this.select('dashScale');
+        this.#dashSize = this.select('dashSize');
+        this.#dashOffset = this.select('dashOffset');
+        this.#gapSize = this.select('gapSize');
+        this.#wireframe = this.select('wireframe');
+        this.#worldUnits = this.select('worldUnits');
+        this.lineParameters = computed(() => ({
+            color: this.#color(),
+            vertexColors: this.#vertexColors(),
+            resolution: this.#resolution(),
+            linewidth: this.#linewidth(),
+            alphaToCoverage: this.#alphaToCoverage(),
+            dashed: this.#dashed(),
+            dashScale: this.#dashScale(),
+            dashSize: this.#dashSize(),
+            dashOffset: this.#dashOffset(),
+            gapSize: this.#gapSize(),
+            wireframe: this.#wireframe(),
+            worldUnits: this.#worldUnits(),
+        }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsLineInput, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtsLineInput, inputs: { vertexColors: "vertexColors", lineWidth: "lineWidth", alphaToCoverage: "alphaToCoverage", color: "color", dashed: "dashed", dashScale: "dashScale", dashSize: "dashSize", dashOffset: "dashOffset", gapSize: "gapSize", resolution: "resolution", wireframe: "wireframe", worldUnits: "worldUnits" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsLineInputs, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtsLineInputs, inputs: { vertexColors: "vertexColors", lineWidth: "lineWidth", alphaToCoverage: "alphaToCoverage", color: "color", dashed: "dashed", dashScale: "dashScale", dashSize: "dashSize", dashOffset: "dashOffset", gapSize: "gapSize", resolution: "resolution", wireframe: "wireframe", worldUnits: "worldUnits" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsLineInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsLineInputs, decorators: [{
             type: Directive
-        }], propDecorators: { vertexColors: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { vertexColors: [{
                 type: Input
             }], lineWidth: [{
                 type: Input
@@ -151,86 +185,122 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Input
             }] } });
 
-class NgtsLine extends NgtsLineInput {
-    constructor() {
-        super(...arguments);
-        this.Boolean = Boolean;
-        this.lineMaterial = new LineMaterial();
-        this.store = inject(NgtStore);
-        this.line = null;
-        this.lineRef = injectNgtRef();
-    }
+class NgtsLine extends NgtsLineInputs {
     set points(points) {
         this.set({ points });
     }
     set segments(segments) {
         this.set({ segments });
     }
-    onAfterAttach({ parent }) {
-        parent.computeLineDistances();
-    }
-    initialize() {
-        super.initialize();
-        this.set({ segments: false });
-        this.connect('lineGeometry', combineLatest([
-            this.select('points'),
-            this.select('segments'),
-            this.select('vertexColors').pipe(startWithUndefined()),
-        ]).pipe(map(([points, segments, vertexColors]) => {
-            const geometry = segments ? new LineSegmentsGeometry() : new LineGeometry();
-            const pValues = points.map((p) => {
-                const isArray = Array.isArray(p);
-                return p instanceof THREE.Vector3
-                    ? [p.x, p.y, p.z]
-                    : p instanceof THREE.Vector2
-                        ? [p.x, p.y, 0]
-                        : isArray && p.length === 3
-                            ? [p[0], p[1], p[2]]
-                            : isArray && p.length === 2
-                                ? [p[0], p[1], 0]
-                                : p;
-            });
-            geometry.setPositions(pValues.flat());
-            if (vertexColors) {
-                const cValues = vertexColors.map((c) => c instanceof THREE.Color ? c.toArray() : c);
-                geometry.setColors(cValues.flat());
+    #store;
+    #size;
+    #lineResolution;
+    #resolution;
+    #points;
+    #pointValues;
+    #vertexColors;
+    #vertexColorValues;
+    #segments;
+    constructor() {
+        super();
+        this.lineRef = injectNgtRef();
+        this.#store = inject(NgtStore);
+        this.#size = this.#store.select('size');
+        this.#lineResolution = this.select('resolution');
+        this.#resolution = computed(() => this.#lineResolution() ? this.#lineResolution() : [this.#size().width, this.#size().height]);
+        this.#points = this.select('points');
+        this.#pointValues = computed(() => this.#points().map((p) => {
+            const isArray = Array.isArray(p);
+            return p instanceof THREE.Vector3
+                ? [p.x, p.y, p.z]
+                : p instanceof THREE.Vector2
+                    ? [p.x, p.y, 0]
+                    : isArray && p.length === 3
+                        ? [p[0], p[1], p[2]]
+                        : isArray && p.length === 2
+                            ? [p[0], p[1], 0]
+                            : p;
+        }));
+        this.#vertexColors = this.select('vertexColors');
+        this.#vertexColorValues = computed(() => (this.#vertexColors() || []).map((c) => (c instanceof THREE.Color ? c.toArray() : c)));
+        this.#segments = this.select('segments');
+        this.lineGeometry = computed(() => {
+            const pointValues = this.#pointValues();
+            const vertexColors = this.#vertexColorValues();
+            const geometry = this.#segments() ? new LineSegmentsGeometry() : new LineGeometry();
+            geometry.setPositions(pointValues.flat());
+            if (vertexColors.length) {
+                geometry.setColors(vertexColors.flat());
             }
             return geometry;
-        })));
+        });
+        this.lineMaterial = new LineMaterial();
+        this.line = computed(() => (this.#segments() ? new LineSegments2() : new Line2()));
+        this.lineMaterialParameters = computed(() => {
+            const parameters = this.lineParameters();
+            const resolution = this.#resolution();
+            const vertexColors = Boolean(parameters.vertexColors);
+            if (vertexColors) {
+                parameters.color = undefined;
+            }
+            return {
+                ...parameters,
+                vertexColors,
+                resolution,
+                dashScale: parameters.dashScale ?? this.lineMaterial.dashScale,
+                dashSize: parameters.dashSize ?? this.lineMaterial.dashSize,
+                dashOffset: parameters.dashOffset ?? this.lineMaterial.dashOffset,
+                gapSize: parameters.gapSize ?? this.lineMaterial.gapSize,
+                wireframe: parameters.wireframe ?? this.lineMaterial.wireframe,
+                worldUnits: parameters.worldUnits ?? this.lineMaterial.worldUnits,
+            };
+        });
+        this.set({ segments: false });
+        requestAnimationInInjectionContext(() => {
+            this.#disposeGeometry();
+            this.#computeLineDistances();
+        });
     }
-    ngOnInit() {
-        this.connect('materialResolution', combineLatest([this.store.select('size'), this.select('resolution').pipe(startWithUndefined())]).pipe(map(([size, resolution]) => resolution ?? [size.width, size.height])));
-        this.line = this.get('segments') ? new LineSegments2() : new Line2();
-        this.disposeGeometry();
+    #computeLineDistances() {
+        const points = this.select('points');
+        const trigger = computed(() => {
+            const lineGeometry = this.lineGeometry();
+            const line = this.lineRef.nativeElement;
+            const children = this.lineRef.children('nonObjects');
+            return { points: points(), lineGeometry, line, children: children() };
+        });
+        effect(() => {
+            const { line } = trigger();
+            if (!line)
+                return;
+            line.computeLineDistances();
+        });
     }
-    disposeGeometry() {
-        this.effect(this.select('lineGeometry'), (lineGeometry) => {
-            return () => lineGeometry.dispose();
+    #disposeGeometry() {
+        effect((onCleanup) => {
+            const lineGeometry = this.lineGeometry();
+            onCleanup(() => lineGeometry.dispose());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsLine, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsLine, isStandalone: true, selector: "ngts-line[points]", inputs: { lineRef: "lineRef", points: "points", segments: "segments" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-primitive *args="[line]" [ref]="lineRef" ngtCompound>
-            <ngt-primitive
-                *args="[get('lineGeometry')]"
-                attach="geometry"
-                (afterAttach)="onAfterAttach($any($event))"
-            />
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsLine, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsLine, isStandalone: true, selector: "ngts-line", inputs: { lineRef: "lineRef", points: "points", segments: "segments" }, usesInheritance: true, ngImport: i0, template: `
+        <ngt-primitive *args="[line()]" [ref]="lineRef" ngtCompound>
+            <ngt-primitive *args="[lineGeometry()]" attach="geometry" />
             <ngt-primitive
                 *args="[lineMaterial]"
                 attach="material"
-                [color]="get('color')"
-                [vertexColors]="Boolean(get('vertexColors'))"
-                [resolution]="get('materialResolution')"
-                [linewidth]="get('lineWidth')"
-                [alphaToCoverage]="get('alphaToCoverage')"
-                [dashed]="get('dashed')"
-                [dashScale]="get('dashScale') ?? lineMaterial.dashScale"
-                [dashSize]="get('dashSize') ?? lineMaterial.dashSize"
-                [dashOffset]="get('dashOffset') ?? lineMaterial.dashOffset"
-                [gapSize]="get('gapSize') ?? lineMaterial.gapSize"
-                [wireframe]="get('wireframe') ?? lineMaterial.wireframe"
-                [worldUnits]="get('worldUnits')"
+                [resolution]="lineMaterialParameters().resolution"
+                [color]="lineMaterialParameters().color"
+                [vertexColors]="lineMaterialParameters().vertexColors"
+                [linewidth]="lineMaterialParameters().linewidth"
+                [alphaToCoverage]="lineMaterialParameters().alphaToCoverage"
+                [dashed]="lineMaterialParameters().dashed"
+                [dashScale]="lineMaterialParameters().dashScale"
+                [dashSize]="lineMaterialParameters().dashSize"
+                [dashOffset]="lineMaterialParameters().dashOffset"
+                [gapSize]="lineMaterialParameters().gapSize"
+                [wireframe]="lineMaterialParameters().wireframe"
+                [worldUnits]="lineMaterialParameters().worldUnits"
             />
         </ngt-primitive>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
@@ -238,49 +308,42 @@ class NgtsLine extends NgtsLineInput {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsLine, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngts-line[points]',
+                    selector: 'ngts-line',
                     standalone: true,
                     template: `
-        <ngt-primitive *args="[line]" [ref]="lineRef" ngtCompound>
-            <ngt-primitive
-                *args="[get('lineGeometry')]"
-                attach="geometry"
-                (afterAttach)="onAfterAttach($any($event))"
-            />
+        <ngt-primitive *args="[line()]" [ref]="lineRef" ngtCompound>
+            <ngt-primitive *args="[lineGeometry()]" attach="geometry" />
             <ngt-primitive
                 *args="[lineMaterial]"
                 attach="material"
-                [color]="get('color')"
-                [vertexColors]="Boolean(get('vertexColors'))"
-                [resolution]="get('materialResolution')"
-                [linewidth]="get('lineWidth')"
-                [alphaToCoverage]="get('alphaToCoverage')"
-                [dashed]="get('dashed')"
-                [dashScale]="get('dashScale') ?? lineMaterial.dashScale"
-                [dashSize]="get('dashSize') ?? lineMaterial.dashSize"
-                [dashOffset]="get('dashOffset') ?? lineMaterial.dashOffset"
-                [gapSize]="get('gapSize') ?? lineMaterial.gapSize"
-                [wireframe]="get('wireframe') ?? lineMaterial.wireframe"
-                [worldUnits]="get('worldUnits')"
+                [resolution]="lineMaterialParameters().resolution"
+                [color]="lineMaterialParameters().color"
+                [vertexColors]="lineMaterialParameters().vertexColors"
+                [linewidth]="lineMaterialParameters().linewidth"
+                [alphaToCoverage]="lineMaterialParameters().alphaToCoverage"
+                [dashed]="lineMaterialParameters().dashed"
+                [dashScale]="lineMaterialParameters().dashScale"
+                [dashSize]="lineMaterialParameters().dashSize"
+                [dashOffset]="lineMaterialParameters().dashOffset"
+                [gapSize]="lineMaterialParameters().gapSize"
+                [wireframe]="lineMaterialParameters().wireframe"
+                [worldUnits]="lineMaterialParameters().worldUnits"
             />
         </ngt-primitive>
     `,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { lineRef: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { lineRef: [{
                 type: Input
             }], points: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], segments: [{
                 type: Input
             }] } });
 
-class NgtsCatmullRomLine extends NgtsLineInput {
-    constructor() {
-        super(...arguments);
-        this.lineRef = injectNgtRef();
-    }
+class NgtsCatmullRomLine extends NgtsLineInputs {
     set points(points) {
         this.set({ points });
     }
@@ -296,20 +359,33 @@ class NgtsCatmullRomLine extends NgtsLineInput {
     set segments(segments) {
         this.set({ segments });
     }
-    initialize() {
-        super.initialize();
-        this.set({ closed: false, curveType: 'centripetal', tension: 0.5, segments: 64 });
-        this.connect('curve', combineLatest([
-            this.select('points'),
-            this.select('closed'),
-            this.select('curveType'),
-            this.select('tension'),
-        ]).pipe(map(([points, closed, curveType, tension]) => {
-            const mappedPoints = points.map((p) => p instanceof THREE.Vector3 ? p : new THREE.Vector3(...p));
-            return new CatmullRomCurve3(mappedPoints, closed, curveType, tension);
-        })));
-        this.connect('segmentedPoints', combineLatest([this.select('curve'), this.select('segments')]).pipe(map(([curve, segments]) => curve.getPoints(segments))));
-        this.connect('interpolatedVertexColors', combineLatest([this.select('vertexColors').pipe(startWithUndefined()), this.select('segments')]).pipe(map(([vertexColors, segments]) => {
+    #points;
+    #closed;
+    #curveType;
+    #tension;
+    #vertexColors;
+    #curve;
+    #segments;
+    constructor() {
+        super();
+        this.lineRef = injectNgtRef();
+        this.#points = this.select('points');
+        this.#closed = this.select('closed');
+        this.#curveType = this.select('curveType');
+        this.#tension = this.select('tension');
+        this.#vertexColors = this.select('vertexColors');
+        this.#curve = computed(() => {
+            const mappedPoints = this.#points().map((p) => p instanceof THREE.Vector3 ? p : new THREE.Vector3(...p));
+            return new CatmullRomCurve3(mappedPoints, this.#closed(), this.#curveType(), this.#tension());
+        });
+        this.#segments = this.select('segments');
+        this.segmentedPoints = computed(() => {
+            const curve = this.#curve();
+            return curve.getPoints(this.#segments());
+        });
+        this.interpolatedVertexColors = computed(() => {
+            const vertexColors = this.#vertexColors();
+            const segments = this.#segments();
             if (!vertexColors || vertexColors.length < 2)
                 return undefined;
             if (vertexColors.length === segments + 1)
@@ -325,58 +401,61 @@ class NgtsCatmullRomLine extends NgtsLineInput {
                 iColors.push(mappedColors[colorIndex].clone().lerp(mappedColors[colorIndex + 1], alpha));
             }
             iColors.push(mappedColors[mappedColors.length - 1]);
-        })));
+            return iColors;
+        });
+        this.set({ closed: false, curveType: 'centripetal', tension: 0.5, segments: 64 });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsCatmullRomLine, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsCatmullRomLine, isStandalone: true, selector: "ngts-catmull-rom-line[points]", inputs: { lineRef: "lineRef", points: "points", closed: "closed", curveType: "curveType", tension: "tension", segments: "segments" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsCatmullRomLine, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsCatmullRomLine, isStandalone: true, selector: "ngts-catmull-rom-line", inputs: { lineRef: "lineRef", points: "points", closed: "closed", curveType: "curveType", tension: "tension", segments: "segments" }, usesInheritance: true, ngImport: i0, template: `
         <ngts-line
             [lineRef]="lineRef"
-            [points]="get('segmentedPoints')"
-            [color]="get('color')"
-            [vertexColors]="get('interpolatedVertexColors')"
-            [resolution]="get('resolution')"
-            [lineWidth]="get('lineWidth')"
-            [alphaToCoverage]="get('alphaToCoverage')"
-            [dashed]="get('dashed')"
-            [dashScale]="get('dashScale')"
-            [dashOffset]="get('dashOffset')"
-            [dashSize]="get('dashSize')"
-            [gapSize]="get('gapSize')"
-            [wireframe]="get('wireframe')"
-            [worldUnits]="get('worldUnits')"
+            [points]="segmentedPoints()"
+            [vertexColors]="interpolatedVertexColors()"
+            [color]="lineParameters().color"
+            [resolution]="lineParameters().resolution"
+            [lineWidth]="lineParameters().linewidth"
+            [alphaToCoverage]="lineParameters().alphaToCoverage"
+            [dashed]="lineParameters().dashed"
+            [dashScale]="lineParameters().dashScale"
+            [dashSize]="lineParameters().dashSize"
+            [dashOffset]="lineParameters().dashOffset"
+            [gapSize]="lineParameters().gapSize"
+            [wireframe]="lineParameters().wireframe"
+            [worldUnits]="lineParameters().worldUnits"
         />
-    `, isInline: true, dependencies: [{ kind: "component", type: NgtsLine, selector: "ngts-line[points]", inputs: ["lineRef", "points", "segments"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: NgtsLine, selector: "ngts-line", inputs: ["lineRef", "points", "segments"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsCatmullRomLine, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngts-catmull-rom-line[points]',
+                    selector: 'ngts-catmull-rom-line',
                     standalone: true,
                     template: `
         <ngts-line
             [lineRef]="lineRef"
-            [points]="get('segmentedPoints')"
-            [color]="get('color')"
-            [vertexColors]="get('interpolatedVertexColors')"
-            [resolution]="get('resolution')"
-            [lineWidth]="get('lineWidth')"
-            [alphaToCoverage]="get('alphaToCoverage')"
-            [dashed]="get('dashed')"
-            [dashScale]="get('dashScale')"
-            [dashOffset]="get('dashOffset')"
-            [dashSize]="get('dashSize')"
-            [gapSize]="get('gapSize')"
-            [wireframe]="get('wireframe')"
-            [worldUnits]="get('worldUnits')"
+            [points]="segmentedPoints()"
+            [vertexColors]="interpolatedVertexColors()"
+            [color]="lineParameters().color"
+            [resolution]="lineParameters().resolution"
+            [lineWidth]="lineParameters().linewidth"
+            [alphaToCoverage]="lineParameters().alphaToCoverage"
+            [dashed]="lineParameters().dashed"
+            [dashScale]="lineParameters().dashScale"
+            [dashSize]="lineParameters().dashSize"
+            [dashOffset]="lineParameters().dashOffset"
+            [gapSize]="lineParameters().gapSize"
+            [wireframe]="lineParameters().wireframe"
+            [worldUnits]="lineParameters().worldUnits"
         />
     `,
                     imports: [NgtsLine],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { lineRef: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { lineRef: [{
                 type: Input
             }], points: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], closed: [{
                 type: Input
             }], curveType: [{
@@ -387,11 +466,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Input
             }] } });
 
-class NgtsCubicBezierLine extends NgtsLineInput {
-    constructor() {
-        super(...arguments);
-        this.lineRef = injectNgtRef();
-    }
+class NgtsCubicBezierLine extends NgtsLineInputs {
     set start(start) {
         this.set({ start });
     }
@@ -407,85 +482,98 @@ class NgtsCubicBezierLine extends NgtsLineInput {
     set segments(segments) {
         this.set({ segments });
     }
-    initialize() {
-        super.initialize();
-        this.set({ segments: 10 });
-        this.connect('points', this.select(['start', 'end', 'midA', 'midB', 'segments'], ({ start, end, midA, midB, segments }) => {
+    #start;
+    #end;
+    #midA;
+    #midB;
+    #segments;
+    constructor() {
+        super();
+        this.lineRef = injectNgtRef();
+        this.#start = this.select('start');
+        this.#end = this.select('end');
+        this.#midA = this.select('midA');
+        this.#midB = this.select('midB');
+        this.#segments = this.select('segments');
+        this.points = computed(() => {
+            const start = this.#start();
+            const end = this.#end();
+            const midA = this.#midA();
+            const midB = this.#midB();
+            const segments = this.#segments();
             const startV = start instanceof THREE.Vector3 ? start : new THREE.Vector3(...start);
             const endV = end instanceof THREE.Vector3 ? end : new THREE.Vector3(...end);
             const midAV = midA instanceof THREE.Vector3 ? midA : new THREE.Vector3(...midA);
             const midBV = midB instanceof THREE.Vector3 ? midB : new THREE.Vector3(...midB);
             return new THREE.CubicBezierCurve3(startV, midAV, midBV, endV).getPoints(segments);
-        }));
+        });
+        this.set({ segments: 10 });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsCubicBezierLine, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsCubicBezierLine, isStandalone: true, selector: "ngts-cubic-bezier-line[start][end][midA][midB]", inputs: { lineRef: "lineRef", start: "start", end: "end", midA: "midA", midB: "midB", segments: "segments" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsCubicBezierLine, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsCubicBezierLine, isStandalone: true, selector: "ngts-cubic-bezier-line", inputs: { lineRef: "lineRef", start: "start", end: "end", midA: "midA", midB: "midB", segments: "segments" }, usesInheritance: true, ngImport: i0, template: `
         <ngts-line
             [lineRef]="lineRef"
-            [points]="get('points')"
-            [color]="get('color')"
-            [vertexColors]="get('vertexColors')"
-            [resolution]="get('resolution')"
-            [lineWidth]="get('lineWidth')"
-            [alphaToCoverage]="get('alphaToCoverage')"
-            [dashed]="get('dashed')"
-            [dashScale]="get('dashScale')"
-            [dashSize]="get('dashSize')"
-            [dashOffset]="get('dashOffset')"
-            [gapSize]="get('gapSize')"
-            [wireframe]="get('wireframe')"
-            [worldUnits]="get('worldUnits')"
+            [points]="points()"
+            [color]="lineParameters().color"
+            [vertexColors]="lineParameters().vertexColors"
+            [resolution]="lineParameters().resolution"
+            [lineWidth]="lineParameters().linewidth"
+            [alphaToCoverage]="lineParameters().alphaToCoverage"
+            [dashed]="lineParameters().dashed"
+            [dashScale]="lineParameters().dashScale"
+            [dashSize]="lineParameters().dashSize"
+            [dashOffset]="lineParameters().dashOffset"
+            [gapSize]="lineParameters().gapSize"
+            [wireframe]="lineParameters().wireframe"
+            [worldUnits]="lineParameters().worldUnits"
         />
-    `, isInline: true, dependencies: [{ kind: "component", type: NgtsLine, selector: "ngts-line[points]", inputs: ["lineRef", "points", "segments"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: NgtsLine, selector: "ngts-line", inputs: ["lineRef", "points", "segments"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsCubicBezierLine, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngts-cubic-bezier-line[start][end][midA][midB]',
+                    selector: 'ngts-cubic-bezier-line',
                     standalone: true,
                     template: `
         <ngts-line
             [lineRef]="lineRef"
-            [points]="get('points')"
-            [color]="get('color')"
-            [vertexColors]="get('vertexColors')"
-            [resolution]="get('resolution')"
-            [lineWidth]="get('lineWidth')"
-            [alphaToCoverage]="get('alphaToCoverage')"
-            [dashed]="get('dashed')"
-            [dashScale]="get('dashScale')"
-            [dashSize]="get('dashSize')"
-            [dashOffset]="get('dashOffset')"
-            [gapSize]="get('gapSize')"
-            [wireframe]="get('wireframe')"
-            [worldUnits]="get('worldUnits')"
+            [points]="points()"
+            [color]="lineParameters().color"
+            [vertexColors]="lineParameters().vertexColors"
+            [resolution]="lineParameters().resolution"
+            [lineWidth]="lineParameters().linewidth"
+            [alphaToCoverage]="lineParameters().alphaToCoverage"
+            [dashed]="lineParameters().dashed"
+            [dashScale]="lineParameters().dashScale"
+            [dashSize]="lineParameters().dashSize"
+            [dashOffset]="lineParameters().dashOffset"
+            [gapSize]="lineParameters().gapSize"
+            [wireframe]="lineParameters().wireframe"
+            [worldUnits]="lineParameters().worldUnits"
         />
     `,
-                    imports: [NgtsLine, NgIf],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    imports: [NgtsLine],
                 }]
-        }], propDecorators: { lineRef: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { lineRef: [{
                 type: Input
             }], start: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], end: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], midA: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], midB: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], segments: [{
                 type: Input
             }] } });
 
 extend({ LineSegments, LineBasicMaterial });
-class NgtsEdges extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.edgesRef = injectNgtRef();
-        this.withChildren = false;
-        this.noop = () => null;
-    }
+class NgtsEdges extends NgtSignalStore {
     set threshold(threshold) {
         this.set({ threshold });
     }
@@ -498,32 +586,35 @@ class NgtsEdges extends NgtRxStore {
     set userData(userData) {
         this.set({ userData });
     }
-    initialize() {
-        super.initialize();
-        this.set({
+    constructor() {
+        super({
             threshold: 15,
             color: 'black',
             userData: {},
         });
-    }
-    ngOnInit() {
-        this.setupGeometry();
-    }
-    setupGeometry() {
-        this.hold(this.edgesRef.$, (segments) => {
-            const parent = segments.parent;
+        this.edgesRef = injectNgtRef();
+        this.withChildren = false;
+        this.noop = () => null;
+        this.#setupGeometry();
+    }
+    #setupGeometry() {
+        effect(() => {
+            const edges = this.edgesRef.nativeElement;
+            if (!edges)
+                return;
+            const parent = edges.parent;
             if (parent) {
                 const geom = this.get('geometry') || parent.geometry;
                 const threshold = this.get('threshold');
-                if (geom !== segments.userData['currentGeom'] || threshold !== segments.userData['currentThreshold']) {
-                    segments.userData['currentGeom'] = geom;
-                    segments.userData['currentThreshold'] = threshold;
-                    segments.geometry = new THREE.EdgesGeometry(geom, threshold);
+                if (geom !== edges.userData['currentGeom'] || threshold !== edges.userData['currentThreshold']) {
+                    edges.userData['currentGeom'] = geom;
+                    edges.userData['currentThreshold'] = threshold;
+                    edges.geometry = new THREE.EdgesGeometry(geom, threshold);
                 }
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsEdges, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsEdges, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsEdges, isStandalone: true, selector: "ngts-edges", inputs: { edgesRef: "edgesRef", threshold: "threshold", color: "color", geometry: "geometry", userData: "userData", withChildren: "withChildren" }, usesInheritance: true, ngImport: i0, template: `
         <ngt-line-segments [ref]="edgesRef" [raycast]="noop" ngtCompound>
             <ng-container *ngIf="withChildren; else noChildren">
@@ -553,7 +644,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     imports: [NgIf],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { edgesRef: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { edgesRef: [{
                 type: Input
             }], threshold: [{
                 type: Input
@@ -567,30 +658,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Input
             }] } });
 
-const isOrbitControls = (controls) => {
-    return 'minPolarAngle' in controls;
-};
+const isOrbitControls = (controls) => 'minPolarAngle' in controls;
 const NGTS_GIZMO_HELPER_API = new InjectionToken('NgtsGizmoHelper API');
-function gizmoHelperApiFactory(gizmo) {
-    const store = inject(NgtStore);
-    return {
-        tweenCamera: (direction) => {
-            const { controls, camera, invalidate } = store.get();
-            const defaultControls = controls;
-            gizmo.animating = true;
-            if (defaultControls)
-                gizmo.focusPoint = defaultControls.target;
-            gizmo.radius = camera.position.distanceTo(gizmo.target);
-            // rotate from current camera orientation
-            gizmo.q1.copy(camera.quaternion);
-            // to new current camera orientation
-            gizmo.targetPosition.copy(direction).multiplyScalar(gizmo.radius).add(gizmo.target);
-            gizmo.dummy.lookAt(gizmo.targetPosition);
-            gizmo.q2.copy(gizmo.dummy.quaternion);
-            invalidate();
-        },
-    };
-}
 extend({ Group });
 class NgtsGizmoHelperContent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoHelperContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -598,30 +667,9 @@ class NgtsGizmoHelperContent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoHelperContent, decorators: [{
             type: Directive,
-            args: [{
-                    selector: 'ng-template[ngtsGizmoHelperContent]',
-                    standalone: true,
-                }]
+            args: [{ selector: 'ng-template[ngtsGizmoHelperContent]', standalone: true }]
         }] });
-class NgtsGizmoHelper extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.store = inject(NgtStore);
-        this.gizmoRef = injectNgtRef();
-        this.virtualCameraRef = injectNgtRef();
-        this.animating = false;
-        this.radius = 0;
-        this.focusPoint = new Vector3(0, 0, 0);
-        this.q1 = new Quaternion();
-        this.q2 = new Quaternion();
-        this.target = new Vector3();
-        this.targetPosition = new Vector3();
-        this.dummy = new Object3D();
-        this.defaultUp = new Vector3(0, 0, 0);
-        this.turnRate = 2 * Math.PI; // turn rate in angles per sec
-        this.matrix = new Matrix4();
-        this.updated = new EventEmitter();
-    }
+class NgtsGizmoHelper extends NgtSignalStore {
     set alignment(alignment) {
         this.set({ alignment });
     }
@@ -634,41 +682,105 @@ class NgtsGizmoHelper extends NgtRxStore {
     set autoClear(autoClear) {
         this.set({ autoClear });
     }
-    initialize() {
-        super.initialize();
-        this.set({ alignment: 'bottom-right', margin: [80, 80], renderPriority: 1 });
-    }
-    ngOnInit() {
-        this.updateDefaultUp();
-        this.setGizmoPosition();
+    #store;
+    #camera;
+    #size;
+    #alignment;
+    #margin;
+    #animating;
+    #radius;
+    #focusPoint;
+    #q1;
+    #q2;
+    #target;
+    #targetPosition;
+    #dummy;
+    #defaultUp;
+    #turnRate; // turn rate in angles per sec
+    #matrix;
+    constructor() {
+        super({ alignment: 'bottom-right', margin: [80, 80], renderPriority: 1 });
+        this.gizmoRef = injectNgtRef();
+        this.virtualCameraRef = injectNgtRef();
+        this.updated = new EventEmitter();
+        this.#store = inject(NgtStore);
+        this.#camera = this.#store.select('camera');
+        this.#size = this.#store.select('size');
+        this.#alignment = this.select('alignment');
+        this.#margin = this.select('margin');
+        this.#animating = false;
+        this.#radius = 0;
+        this.#focusPoint = new Vector3(0, 0, 0);
+        this.#q1 = new Quaternion();
+        this.#q2 = new Quaternion();
+        this.#target = new Vector3();
+        this.#targetPosition = new Vector3();
+        this.#dummy = new Object3D();
+        this.#defaultUp = new Vector3(0, 0, 0);
+        this.#turnRate = 2 * Math.PI; // turn rate in angles per sec
+        this.#matrix = new Matrix4();
+        this.priority = this.select('renderPriority');
+        this.position = computed(() => {
+            const size = this.#size();
+            const alignment = this.#alignment();
+            const margin = this.#margin();
+            const [marginX, marginY] = margin;
+            const x = alignment.endsWith('-center')
+                ? 0
+                : alignment.endsWith('-left')
+                    ? -size.width / 2 + marginX
+                    : size.width / 2 - marginX;
+            const y = alignment.startsWith('center-')
+                ? 0
+                : alignment.startsWith('top-')
+                    ? size.height / 2 - marginY
+                    : -size.height / 2 + marginY;
+            return [x, y, 0];
+        });
+        this.api = computed(() => (direction) => {
+            const { controls, camera, invalidate } = this.#store.get();
+            const defaultControls = controls;
+            this.#animating = true;
+            if (defaultControls)
+                this.#focusPoint = defaultControls.target;
+            this.#radius = camera.position.distanceTo(this.#target);
+            // rotate from current camera orientation
+            this.#q1.copy(camera.quaternion);
+            // to new current camera orientation
+            this.#targetPosition.copy(direction).multiplyScalar(this.#radius).add(this.#target);
+            this.#dummy.lookAt(this.#targetPosition);
+            this.#q2.copy(this.#dummy.quaternion);
+            invalidate();
+        });
+        this.#updateDefaultUp();
     }
     onBeforeRender(delta) {
         if (this.virtualCameraRef.nativeElement && this.gizmoRef.nativeElement) {
-            const { controls, camera: mainCamera, invalidate } = this.store.get();
+            const { controls, camera: mainCamera, invalidate } = this.#store.get();
             const defaultControls = controls;
             // Animate step
-            if (this.animating) {
-                if (this.q1.angleTo(this.q2) < 0.01) {
-                    this.animating = false;
+            if (this.#animating) {
+                if (this.#q1.angleTo(this.#q2) < 0.01) {
+                    this.#animating = false;
                     // Orbit controls uses UP vector as the orbit axes,
                     // so we need to reset it after the animation is done
                     // moving it around for the controls to work correctly
                     if (isOrbitControls(defaultControls)) {
-                        mainCamera.up.copy(this.defaultUp);
+                        mainCamera.up.copy(this.#defaultUp);
                     }
                 }
                 else {
-                    const step = delta * this.turnRate;
+                    const step = delta * this.#turnRate;
                     // animate position by doing a slerp and then scaling the position on the unit sphere
-                    this.q1.rotateTowards(this.q2, step);
+                    this.#q1.rotateTowards(this.#q2, step);
                     // animate orientation
                     mainCamera.position
                         .set(0, 0, 1)
-                        .applyQuaternion(this.q1)
-                        .multiplyScalar(this.radius)
-                        .add(this.focusPoint);
-                    mainCamera.up.set(0, 1, 0).applyQuaternion(this.q1).normalize();
-                    mainCamera.quaternion.copy(this.q1);
+                        .applyQuaternion(this.#q1)
+                        .multiplyScalar(this.#radius)
+                        .add(this.#focusPoint);
+                    mainCamera.up.set(0, 1, 0).applyQuaternion(this.#q1).normalize();
+                    mainCamera.quaternion.copy(this.#q1);
                     if (this.updated.observed)
                         this.updated.emit();
                     else if (defaultControls) {
@@ -678,51 +790,30 @@ class NgtsGizmoHelper extends NgtRxStore {
                 }
             }
             // Sync Gizmo with main camera orientation
-            this.matrix.copy(mainCamera.matrix).invert();
-            this.gizmoRef.nativeElement.quaternion.setFromRotationMatrix(this.matrix);
+            this.#matrix.copy(mainCamera.matrix).invert();
+            this.gizmoRef.nativeElement.quaternion.setFromRotationMatrix(this.#matrix);
         }
     }
-    setGizmoPosition() {
-        this.connect('gizmoPosition', combineLatest([
-            this.store.select('size'),
-            combineLatest({
-                alignment: this.select('alignment'),
-                margin: this.select('margin'),
-            }),
-        ]).pipe(map(([size, { alignment, margin }]) => {
-            const [marginX, marginY] = margin;
-            const x = alignment.endsWith('-center')
-                ? 0
-                : alignment.endsWith('-left')
-                    ? -size.width / 2 + marginX
-                    : size.width / 2 - marginX;
-            const y = alignment.startsWith('center-')
-                ? 0
-                : alignment.startsWith('top-')
-                    ? size.height / 2 - marginY
-                    : -size.height / 2 + marginY;
-            return [x, y, 0];
-        })));
-    }
-    updateDefaultUp() {
-        this.hold(this.store.select('camera'), (camera) => {
-            this.defaultUp.copy(camera.up);
+    #updateDefaultUp() {
+        effect(() => {
+            const camera = this.#camera();
+            if (!camera)
+                return;
+            this.#defaultUp.copy(camera.up);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoHelper, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsGizmoHelper, isStandalone: true, selector: "ngts-gizmo-helper", inputs: { alignment: "alignment", margin: "margin", renderPriority: "renderPriority", autoClear: "autoClear" }, outputs: { updated: "updated" }, providers: [{ provide: NGTS_GIZMO_HELPER_API, useFactory: gizmoHelperApiFactory, deps: [NgtsGizmoHelper] }], queries: [{ propertyName: "gizmoHelperContent", first: true, predicate: NgtsGizmoHelperContent, descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: `
-        <ngt-portal [renderPriority]="get('renderPriority')">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoHelper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsGizmoHelper, isStandalone: true, selector: "ngts-gizmo-helper", inputs: { alignment: "alignment", margin: "margin", renderPriority: "renderPriority", autoClear: "autoClear" }, outputs: { updated: "updated" }, providers: [
+            { provide: NGTS_GIZMO_HELPER_API, useFactory: (gizmo) => gizmo.api, deps: [NgtsGizmoHelper] },
+        ], queries: [{ propertyName: "gizmoHelperContent", first: true, predicate: NgtsGizmoHelperContent, descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: `
+        <ngt-portal [renderPriority]="priority()">
             <ng-template ngtPortalContent>
                 <ngts-orthographic-camera
                     [cameraRef]="virtualCameraRef"
                     [makeDefault]="true"
                     [position]="[0, 0, 200]"
                 />
-                <ngt-group
-                    [ref]="gizmoRef"
-                    [position]="get('gizmoPosition')"
-                    (beforeRender)="onBeforeRender($any($event).state.delta)"
-                >
+                <ngt-group [ref]="gizmoRef" [position]="position()" (beforeRender)="onBeforeRender($event.state.delta)">
                     <ng-container *ngTemplateOutlet="gizmoHelperContent" />
                 </ngt-group>
             </ng-template>
@@ -735,28 +826,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     selector: 'ngts-gizmo-helper',
                     standalone: true,
                     template: `
-        <ngt-portal [renderPriority]="get('renderPriority')">
+        <ngt-portal [renderPriority]="priority()">
             <ng-template ngtPortalContent>
                 <ngts-orthographic-camera
                     [cameraRef]="virtualCameraRef"
                     [makeDefault]="true"
                     [position]="[0, 0, 200]"
                 />
-                <ngt-group
-                    [ref]="gizmoRef"
-                    [position]="get('gizmoPosition')"
-                    (beforeRender)="onBeforeRender($any($event).state.delta)"
-                >
+                <ngt-group [ref]="gizmoRef" [position]="position()" (beforeRender)="onBeforeRender($event.state.delta)">
                     <ng-container *ngTemplateOutlet="gizmoHelperContent" />
                 </ngt-group>
             </ng-template>
         </ngt-portal>
     `,
                     imports: [NgtPortal, NgtPortalContent, NgtsOrthographicCamera, NgTemplateOutlet],
-                    providers: [{ provide: NGTS_GIZMO_HELPER_API, useFactory: gizmoHelperApiFactory, deps: [NgtsGizmoHelper] }],
+                    providers: [
+                        { provide: NGTS_GIZMO_HELPER_API, useFactory: (gizmo) => gizmo.api, deps: [NgtsGizmoHelper] },
+                    ],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { alignment: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { alignment: [{
                 type: Input
             }], margin: [{
                 type: Input
@@ -801,10 +890,16 @@ const edges = [
 ].map(makePositionVector);
 const edgeDimensions = edges.map((edge) => edge.toArray().map((axis) => (axis == 0 ? 0.5 : 0.25)));
 
-class NgtsGizmoViewcubeInputs extends NgtRxStore {
+class NgtsGizmoViewcubeInputs extends NgtSignalStore {
     constructor() {
         super(...arguments);
-        this.store = inject(NgtStore);
+        this.viewcubeHoverColor = this.select('hoverColor');
+        this.viewcubeOpacity = this.select('opacity');
+        this.viewcubeTextColor = this.select('textColor');
+        this.viewcubeStrokeColor = this.select('strokeColor');
+        this.viewcubeFaces = this.select('faces');
+        this.viewcubeFont = this.select('font');
+        this.viewcubeColor = this.select('color');
     }
     set opacity(opacity) {
         this.set({ opacity });
@@ -821,11 +916,17 @@ class NgtsGizmoViewcubeInputs extends NgtRxStore {
     set faces(faces) {
         this.set({ faces });
     }
+    set font(font) {
+        this.set({ font });
+    }
+    set color(color) {
+        this.set({ color });
+    }
     set clickEmitter(clickEmitter) {
         this.set({ clickEmitter });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcubeInputs, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtsGizmoViewcubeInputs, inputs: { opacity: "opacity", hoverColor: "hoverColor", textColor: "textColor", strokeColor: "strokeColor", faces: "faces", clickEmitter: "clickEmitter" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtsGizmoViewcubeInputs, inputs: { opacity: "opacity", hoverColor: "hoverColor", textColor: "textColor", strokeColor: "strokeColor", faces: "faces", font: "font", color: "color", clickEmitter: "clickEmitter" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcubeInputs, decorators: [{
             type: Directive
@@ -839,59 +940,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Input
             }], faces: [{
                 type: Input
+            }], font: [{
+                type: Input
+            }], color: [{
+                type: Input
             }], clickEmitter: [{
                 type: Input
             }] } });
 
 extend({ Mesh, BoxGeometry, MeshBasicMaterial });
-class NgtsGizmoViewcubeEdgeCube extends NgtsGizmoViewcubeInputs {
-    constructor() {
-        super(...arguments);
-        this.gizmoHelperApi = inject(NGTS_GIZMO_HELPER_API);
-        this.hover = false;
-    }
+class NgtsGizmoViewcubeEdgeCube extends NgtSignalStore {
+    #gizmoHelperApi;
     set dimensions(dimensions) {
         this.set({ dimensions });
     }
     set position(position) {
         this.set({ position });
     }
-    initialize() {
-        super.initialize();
-        this.set({ hoverColor: colors.hover });
+    constructor() {
+        super();
+        this.#gizmoHelperApi = inject(NGTS_GIZMO_HELPER_API);
+        this.viewcubeInputs = inject(NgtsGizmoViewcubeInputs);
+        this.hover = signal(false);
+        this.edgePosition = this.select('position');
+        this.edgeDimensions = this.select('dimensions');
+        this.viewcubeInputs.patch({ hoverColor: colors.hover });
     }
     onPointerMove(event) {
         event.stopPropagation();
-        this.hover = true;
+        this.hover.set(true);
     }
     onPointerOut(event) {
         event.stopPropagation();
-        this.hover = false;
+        this.hover.set(false);
     }
     onClick(event) {
-        if (this.get('clickEmitter')?.observed) {
-            this.get('clickEmitter').emit(event);
+        if (this.viewcubeInputs.get('clickEmitter')?.observed) {
+            this.viewcubeInputs.get('clickEmitter').emit(event);
         }
         else {
             event.stopPropagation();
-            this.gizmoHelperApi.tweenCamera(this.get('position'));
+            this.#gizmoHelperApi()(this.get('position'));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcubeEdgeCube, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsGizmoViewcubeEdgeCube, isStandalone: true, selector: "ngts-gizmo-viewcube-edge-cube[dimensions][position]", inputs: { dimensions: "dimensions", position: "position" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcubeEdgeCube, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsGizmoViewcubeEdgeCube, isStandalone: true, selector: "ngts-gizmo-viewcube-edge-cube", inputs: { dimensions: "dimensions", position: "position" }, usesInheritance: true, ngImport: i0, template: `
         <ngt-mesh
             [scale]="1.01"
-            [position]="get('position')"
-            (pointermove)="onPointerMove($any($event))"
-            (pointerout)="onPointerOut($any($event))"
-            (click)="onClick($any($event))"
+            [position]="edgePosition()"
+            (pointermove)="onPointerMove($event)"
+            (pointerout)="onPointerOut($event)"
+            (click)="onClick($event)"
         >
-            <ngt-box-geometry *args="get('dimensions')" />
+            <ngt-box-geometry *args="edgeDimensions()" />
             <ngt-mesh-basic-material
-                [color]="hover ? get('hoverColor') : 'white'"
+                [color]="hover() ? viewcubeInputs.viewcubeHoverColor() : 'white'"
                 [transparent]="true"
                 [opacity]="0.6"
-                [visible]="hover"
+                [visible]="hover()"
             />
         </ngt-mesh>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
@@ -899,65 +1005,62 @@ class NgtsGizmoViewcubeEdgeCube extends NgtsGizmoViewcubeInputs {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcubeEdgeCube, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngts-gizmo-viewcube-edge-cube[dimensions][position]',
+                    selector: 'ngts-gizmo-viewcube-edge-cube',
                     standalone: true,
                     template: `
         <ngt-mesh
             [scale]="1.01"
-            [position]="get('position')"
-            (pointermove)="onPointerMove($any($event))"
-            (pointerout)="onPointerOut($any($event))"
-            (click)="onClick($any($event))"
+            [position]="edgePosition()"
+            (pointermove)="onPointerMove($event)"
+            (pointerout)="onPointerOut($event)"
+            (click)="onClick($event)"
         >
-            <ngt-box-geometry *args="get('dimensions')" />
+            <ngt-box-geometry *args="edgeDimensions()" />
             <ngt-mesh-basic-material
-                [color]="hover ? get('hoverColor') : 'white'"
+                [color]="hover() ? viewcubeInputs.viewcubeHoverColor() : 'white'"
                 [transparent]="true"
                 [opacity]="0.6"
-                [visible]="hover"
+                [visible]="hover()"
             />
         </ngt-mesh>
     `,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { dimensions: [{
-                type: Input
+        }], ctorParameters: function () { return []; }, propDecorators: { dimensions: [{
+                type: Input,
+                args: [{ required: true }]
             }], position: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }] } });
 
 extend({ MeshLambertMaterial, Mesh, BoxGeometry });
-class NgtsGizmoViewcubeFaceMaterial extends NgtsGizmoViewcubeInputs {
-    constructor() {
-        super(...arguments);
-        this.document = inject(DOCUMENT);
-    }
+class NgtsGizmoViewcubeFaceMaterial extends NgtSignalStore {
+    #document;
+    #store;
     set index(index) {
         this.set({ index });
     }
     set hover(hover) {
         this.set({ hover });
     }
-    set font(font) {
-        this.set({ font });
-    }
-    set color(color) {
-        this.set({ color });
-    }
-    initialize() {
-        super.initialize();
-        this.set({
-            font: '20px Inter var, Arial, sans-serif',
-            faces: defaultFaces,
-            color: colors.bg,
-            hoverColor: colors.hover,
-            textColor: colors.text,
-            strokeColor: colors.stroke,
-            opacity: 1,
-        });
-        this.connect('texture', this.select(['index', 'faces', 'color', 'font', 'textColor', 'strokeColor'], ({ index, faces, color, font, textColor, strokeColor }) => {
-            const canvas = this.document.createElement('canvas');
+    constructor() {
+        super();
+        this.#document = inject(DOCUMENT);
+        this.#store = inject(NgtStore);
+        this.gl = this.#store.select('gl');
+        this.viewcubeInputs = inject(NgtsGizmoViewcubeInputs);
+        this.faceIndex = this.select('index');
+        this.faceHover = this.select('hover');
+        this.texture = computed(() => {
+            const index = this.faceIndex();
+            const color = this.viewcubeInputs.viewcubeColor();
+            const font = this.viewcubeInputs.viewcubeFont();
+            const faces = this.viewcubeInputs.viewcubeFaces();
+            const textColor = this.viewcubeInputs.viewcubeTextColor();
+            const strokeColor = this.viewcubeInputs.viewcubeStrokeColor();
+            const canvas = this.#document.createElement('canvas');
             canvas.width = 128;
             canvas.height = 128;
             const context = canvas.getContext('2d');
@@ -970,101 +1073,92 @@ class NgtsGizmoViewcubeFaceMaterial extends NgtsGizmoViewcubeInputs {
             context.fillStyle = textColor;
             context.fillText(faces[index].toUpperCase(), 64, 76);
             return new CanvasTexture(canvas);
-        }));
+        });
+        this.viewcubeInputs.patch({
+            color: colors.bg,
+            font: '20px Inter var, Arial, sans-serif',
+            faces: defaultFaces,
+            hoverColor: colors.hover,
+            textColor: colors.text,
+            strokeColor: colors.stroke,
+            opacity: 1,
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcubeFaceMaterial, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsGizmoViewcubeFaceMaterial, isStandalone: true, selector: "ngts-gizmo-viewcube-face-material[hover][index]", inputs: { index: "index", hover: "hover", font: "font", color: "color" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcubeFaceMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsGizmoViewcubeFaceMaterial, isStandalone: true, selector: "ngts-gizmo-viewcube-face-material", inputs: { index: "index", hover: "hover" }, usesInheritance: true, ngImport: i0, template: `
         <ngt-mesh-lambert-material
-            [attach]="['material', get('index')]"
-            [map]="get('texture')"
-            [color]="get('hover') ? get('hoverColor') : get('color')"
-            [opacity]="get('opacity')"
+            [attach]="['material', faceIndex()]"
+            [map]="texture()"
+            [color]="faceHover() ? viewcubeInputs.viewcubeHoverColor() : viewcubeInputs.viewcubeColor()"
+            [opacity]="viewcubeInputs.viewcubeOpacity()"
             [transparent]="true"
         >
-            <ngt-value [rawValue]="store.get('gl').outputEncoding" attach="map.encoding" />
-            <ngt-value [rawValue]="store.get('gl').capabilities.getMaxAnisotropy() || 1" attach="map.anisotrophy" />
+            <ngt-value [rawValue]="gl().outputEncoding" attach="map.encoding" />
+            <ngt-value [rawValue]="gl().capabilities.getMaxAnisotropy() || 1" attach="map.anisotrophy" />
         </ngt-mesh-lambert-material>
     `, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcubeFaceMaterial, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngts-gizmo-viewcube-face-material[hover][index]',
+                    selector: 'ngts-gizmo-viewcube-face-material',
                     standalone: true,
                     template: `
         <ngt-mesh-lambert-material
-            [attach]="['material', get('index')]"
-            [map]="get('texture')"
-            [color]="get('hover') ? get('hoverColor') : get('color')"
-            [opacity]="get('opacity')"
+            [attach]="['material', faceIndex()]"
+            [map]="texture()"
+            [color]="faceHover() ? viewcubeInputs.viewcubeHoverColor() : viewcubeInputs.viewcubeColor()"
+            [opacity]="viewcubeInputs.viewcubeOpacity()"
             [transparent]="true"
         >
-            <ngt-value [rawValue]="store.get('gl').outputEncoding" attach="map.encoding" />
-            <ngt-value [rawValue]="store.get('gl').capabilities.getMaxAnisotropy() || 1" attach="map.anisotrophy" />
+            <ngt-value [rawValue]="gl().outputEncoding" attach="map.encoding" />
+            <ngt-value [rawValue]="gl().capabilities.getMaxAnisotropy() || 1" attach="map.anisotrophy" />
         </ngt-mesh-lambert-material>
     `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { index: [{
-                type: Input
+        }], ctorParameters: function () { return []; }, propDecorators: { index: [{
+                type: Input,
+                args: [{ required: true }]
             }], hover: [{
-                type: Input
-            }], font: [{
-                type: Input
-            }], color: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }] } });
-class NgtsGizmoViewcubeFaceCube extends NgtsGizmoViewcubeInputs {
+class NgtsGizmoViewcubeFaceCube {
     constructor() {
-        super(...arguments);
-        this.gizmoHelperApi = inject(NGTS_GIZMO_HELPER_API);
-        this.hover = -1;
-    }
-    set font(font) {
-        this.set({ font });
-    }
-    set color(color) {
-        this.set({ color });
+        this.#gizmoHelperApi = inject(NGTS_GIZMO_HELPER_API);
+        this.viewcubeInputs = inject(NgtsGizmoViewcubeInputs);
+        this.hover = signal(-1);
     }
+    #gizmoHelperApi;
     onPointerMove(event) {
         event.stopPropagation();
-        this.hover = Math.floor(event.faceIndex / 2);
+        this.hover.set(Math.floor(event.faceIndex / 2));
     }
     onPointerOut(event) {
         event.stopPropagation();
-        this.hover = -1;
+        this.hover.set(-1);
     }
     onClick(event) {
-        if (this.get('clickEmitter')?.observed) {
-            this.get('clickEmitter').emit(event);
+        if (this.viewcubeInputs.get('clickEmitter')?.observed) {
+            this.viewcubeInputs.get('clickEmitter').emit(event);
         }
         else {
             event.stopPropagation();
-            this.gizmoHelperApi.tweenCamera(event.face.normal);
+            this.#gizmoHelperApi()(event.face.normal);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcubeFaceCube, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsGizmoViewcubeFaceCube, isStandalone: true, selector: "ngts-gizmo-viewcube-face-cube", inputs: { font: "font", color: "color" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcubeFaceCube, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsGizmoViewcubeFaceCube, isStandalone: true, selector: "ngts-gizmo-viewcube-face-cube", ngImport: i0, template: `
         <ngt-mesh
             (pointermove)="onPointerMove($any($event))"
             (pointerout)="onPointerOut($any($event))"
             (click)="onClick($any($event))"
         >
             <ngt-box-geometry />
-            <ngts-gizmo-viewcube-face-material
-                *ngFor="let i; repeat: 6"
-                [hover]="hover === i"
-                [index]="i"
-                [font]="get('font')"
-                [color]="get('color')"
-                [opacity]="get('opacity')"
-                [hoverColor]="get('hoverColor')"
-                [textColor]="get('textColor')"
-                [strokeColor]="get('strokeColor')"
-                [faces]="get('faces')"
-            />
+            <ngts-gizmo-viewcube-face-material *ngFor="let i; repeat: 6" [hover]="hover() === i" [index]="i" />
         </ngt-mesh>
-    `, isInline: true, dependencies: [{ kind: "component", type: NgtsGizmoViewcubeFaceMaterial, selector: "ngts-gizmo-viewcube-face-material[hover][index]", inputs: ["index", "hover", "font", "color"] }, { kind: "directive", type: NgtRepeat, selector: "[ngFor][ngForRepeat]", inputs: ["ngForRepeat"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: NgtsGizmoViewcubeFaceMaterial, selector: "ngts-gizmo-viewcube-face-material", inputs: ["index", "hover"] }, { kind: "directive", type: NgtRepeat, selector: "[ngFor][ngForRepeat]", inputs: ["ngForRepeat"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcubeFaceCube, decorators: [{
             type: Component,
@@ -1078,91 +1172,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
             (click)="onClick($any($event))"
         >
             <ngt-box-geometry />
-            <ngts-gizmo-viewcube-face-material
-                *ngFor="let i; repeat: 6"
-                [hover]="hover === i"
-                [index]="i"
-                [font]="get('font')"
-                [color]="get('color')"
-                [opacity]="get('opacity')"
-                [hoverColor]="get('hoverColor')"
-                [textColor]="get('textColor')"
-                [strokeColor]="get('strokeColor')"
-                [faces]="get('faces')"
-            />
+            <ngts-gizmo-viewcube-face-material *ngFor="let i; repeat: 6" [hover]="hover() === i" [index]="i" />
         </ngt-mesh>
     `,
                     imports: [NgtsGizmoViewcubeFaceMaterial, NgtRepeat],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { font: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }] } });
+        }] });
 
 extend({ Group, AmbientLight, PointLight });
 class NgtsGizmoViewcube extends NgtsGizmoViewcubeInputs {
     constructor() {
-        super(...arguments);
+        super();
         this.edges = edges;
         this.edgeDimensions = edgeDimensions;
         this.corners = corners;
         this.cornerDimensions = cornerDimensions;
         this.clicked = new EventEmitter();
+        requestAnimationInInjectionContext(() => {
+            if (this.clicked.observed) {
+                this.set({ clickEmitter: this.clicked });
+            }
+        });
     }
-    set font(font) {
-        this.set({ font });
-    }
-    set color(color) {
-        this.set({ color });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcube, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsGizmoViewcube, isStandalone: true, selector: "ngts-gizmo-viewcube", inputs: { font: "font", color: "color" }, outputs: { clicked: "clicked" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcube, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsGizmoViewcube, isStandalone: true, selector: "ngts-gizmo-viewcube", outputs: { clicked: "clicked" }, providers: [{ provide: NgtsGizmoViewcubeInputs, useExisting: NgtsGizmoViewcube }], usesInheritance: true, ngImport: i0, template: `
         <ngt-group [scale]="60">
-            <ngts-gizmo-viewcube-face-cube
-                [font]="get('font')"
-                [color]="get('color')"
-                [opacity]="get('opacity')"
-                [hoverColor]="get('hoverColor')"
-                [textColor]="get('textColor')"
-                [strokeColor]="get('strokeColor')"
-                [faces]="get('faces')"
-                [clickEmitter]="clicked"
-            />
+            <ngts-gizmo-viewcube-face-cube />
 
             <ngts-gizmo-viewcube-edge-cube
                 *ngFor="let edge of edges; let i = index"
                 [position]="edge"
                 [dimensions]="edgeDimensions[i]"
-                [font]="get('font')"
-                [color]="get('color')"
-                [opacity]="get('opacity')"
-                [hoverColor]="get('hoverColor')"
-                [textColor]="get('textColor')"
-                [strokeColor]="get('strokeColor')"
-                [faces]="get('faces')"
-                [clickEmitter]="clicked"
             />
 
             <ngts-gizmo-viewcube-edge-cube
                 *ngFor="let corner of corners"
                 [position]="corner"
                 [dimensions]="cornerDimensions"
-                [font]="get('font')"
-                [color]="get('color')"
-                [opacity]="get('opacity')"
-                [hoverColor]="get('hoverColor')"
-                [textColor]="get('textColor')"
-                [strokeColor]="get('strokeColor')"
-                [faces]="get('faces')"
-                [clickEmitter]="clicked"
             />
 
             <ngt-ambient-light [intensity]="0.5" />
             <ngt-point-light [position]="10" [intensity]="0.5" />
         </ngt-group>
-    `, isInline: true, dependencies: [{ kind: "component", type: NgtsGizmoViewcubeEdgeCube, selector: "ngts-gizmo-viewcube-edge-cube[dimensions][position]", inputs: ["dimensions", "position"] }, { kind: "component", type: NgtsGizmoViewcubeFaceCube, selector: "ngts-gizmo-viewcube-face-cube", inputs: ["font", "color"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: NgtsGizmoViewcubeEdgeCube, selector: "ngts-gizmo-viewcube-edge-cube", inputs: ["dimensions", "position"] }, { kind: "component", type: NgtsGizmoViewcubeFaceCube, selector: "ngts-gizmo-viewcube-face-cube" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcube, decorators: [{
             type: Component,
@@ -1171,43 +1224,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     standalone: true,
                     template: `
         <ngt-group [scale]="60">
-            <ngts-gizmo-viewcube-face-cube
-                [font]="get('font')"
-                [color]="get('color')"
-                [opacity]="get('opacity')"
-                [hoverColor]="get('hoverColor')"
-                [textColor]="get('textColor')"
-                [strokeColor]="get('strokeColor')"
-                [faces]="get('faces')"
-                [clickEmitter]="clicked"
-            />
+            <ngts-gizmo-viewcube-face-cube />
 
             <ngts-gizmo-viewcube-edge-cube
                 *ngFor="let edge of edges; let i = index"
                 [position]="edge"
                 [dimensions]="edgeDimensions[i]"
-                [font]="get('font')"
-                [color]="get('color')"
-                [opacity]="get('opacity')"
-                [hoverColor]="get('hoverColor')"
-                [textColor]="get('textColor')"
-                [strokeColor]="get('strokeColor')"
-                [faces]="get('faces')"
-                [clickEmitter]="clicked"
             />
 
             <ngts-gizmo-viewcube-edge-cube
                 *ngFor="let corner of corners"
                 [position]="corner"
                 [dimensions]="cornerDimensions"
-                [font]="get('font')"
-                [color]="get('color')"
-                [opacity]="get('opacity')"
-                [hoverColor]="get('hoverColor')"
-                [textColor]="get('textColor')"
-                [strokeColor]="get('strokeColor')"
-                [faces]="get('faces')"
-                [clickEmitter]="clicked"
             />
 
             <ngt-ambient-light [intensity]="0.5" />
@@ -1215,18 +1243,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
         </ngt-group>
     `,
                     imports: [NgtsGizmoViewcubeEdgeCube, NgtsGizmoViewcubeFaceCube, NgFor],
+                    providers: [{ provide: NgtsGizmoViewcubeInputs, useExisting: NgtsGizmoViewcube }],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { font: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], clicked: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { clicked: [{
                 type: Output
             }] } });
 
 extend({ Group, Mesh, BoxGeometry, MeshBasicMaterial, Sprite, SpriteMaterial });
-class NgtsGizmoViewportAxis extends NgtRxStore {
+class NgtsGizmoViewportAxis extends NgtSignalStore {
     set color(color) {
         this.set({ color });
     }
@@ -1234,18 +1259,20 @@ class NgtsGizmoViewportAxis extends NgtRxStore {
         this.set({ rotation });
     }
     set scale(scale) {
-        this.set({ scale: scale === undefined ? this.get('scale') : scale });
-    }
-    initialize() {
-        super.initialize();
-        this.set({ scale: [0.8, 0.05, 0.05] });
+        this.set({ scale });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewportAxis, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsGizmoViewportAxis, isStandalone: true, selector: "ngts-gizmo-viewport-axis[color][rotation]", inputs: { color: "color", rotation: "rotation", scale: "scale" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-group [rotation]="get('rotation')">
+    constructor() {
+        super({ scale: [0.8, 0.05, 0.05] });
+        this.axisRotation = this.select('rotation');
+        this.axisColor = this.select('color');
+        this.axisScale = this.select('scale');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewportAxis, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsGizmoViewportAxis, isStandalone: true, selector: "ngts-gizmo-viewport-axis", inputs: { color: "color", rotation: "rotation", scale: "scale" }, usesInheritance: true, ngImport: i0, template: `
+        <ngt-group [rotation]="axisRotation()">
             <ngt-mesh [position]="[0.4, 0, 0]">
-                <ngt-box-geometry *args="get('scale')" />
-                <ngt-mesh-basic-material [color]="get('color')" [toneMapped]="false" />
+                <ngt-box-geometry *args="axisScale()" />
+                <ngt-mesh-basic-material [color]="axisColor()" [toneMapped]="false" />
             </ngt-mesh>
         </ngt-group>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
@@ -1253,33 +1280,31 @@ class NgtsGizmoViewportAxis extends NgtRxStore {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewportAxis, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngts-gizmo-viewport-axis[color][rotation]',
+                    selector: 'ngts-gizmo-viewport-axis',
                     standalone: true,
                     template: `
-        <ngt-group [rotation]="get('rotation')">
+        <ngt-group [rotation]="axisRotation()">
             <ngt-mesh [position]="[0.4, 0, 0]">
-                <ngt-box-geometry *args="get('scale')" />
-                <ngt-mesh-basic-material [color]="get('color')" [toneMapped]="false" />
+                <ngt-box-geometry *args="axisScale()" />
+                <ngt-mesh-basic-material [color]="axisColor()" [toneMapped]="false" />
             </ngt-mesh>
         </ngt-group>
     `,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { color: [{
-                type: Input
+        }], ctorParameters: function () { return []; }, propDecorators: { color: [{
+                type: Input,
+                args: [{ required: true }]
             }], rotation: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], scale: [{
                 type: Input
             }] } });
-class NgtsGizmoViewportAxisHead extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.document = inject(DOCUMENT);
-        this.store = inject(NgtStore);
-        this.gl = this.store.get('gl');
-    }
+class NgtsGizmoViewportAxisHead extends NgtSignalStore {
+    #document;
+    #store;
     set arcStyle(arcStyle) {
         this.set({ arcStyle });
     }
@@ -1301,16 +1326,27 @@ class NgtsGizmoViewportAxisHead extends NgtRxStore {
     set clickEmitter(clickEmitter) {
         this.set({ clickEmitter });
     }
-    initialize() {
-        super.initialize();
-        this.set({ axisHeadScale: 1, active: false });
-        this.connect('texture', combineLatest([
-            this.select('arcStyle'),
-            this.select('labelColor'),
-            this.select('font'),
-            this.select('label').pipe(startWithUndefined()),
-        ]).pipe(map(([arcStyle, labelColor, font, label]) => {
-            const canvas = this.document.createElement('canvas');
+    #arcStyle;
+    #labelColor;
+    #font;
+    #axisHeadScale;
+    constructor() {
+        super({ axisHeadScale: 1 });
+        this.#document = inject(DOCUMENT);
+        this.#store = inject(NgtStore);
+        this.gl = this.#store.select('gl');
+        this.active = signal(false);
+        this.#arcStyle = this.select('arcStyle');
+        this.#labelColor = this.select('labelColor');
+        this.#font = this.select('font');
+        this.#axisHeadScale = this.select('axisHeadScale');
+        this.axisLabel = this.select('label');
+        this.texture = computed(() => {
+            const arcStyle = this.#arcStyle();
+            const labelColor = this.#labelColor();
+            const font = this.#font();
+            const label = this.axisLabel();
+            const canvas = this.#document.createElement('canvas');
             canvas.width = 64;
             canvas.height = 64;
             const context = canvas.getContext('2d');
@@ -1326,17 +1362,18 @@ class NgtsGizmoViewportAxisHead extends NgtRxStore {
                 context.fillText(label, 32, 41);
             }
             return new CanvasTexture(canvas);
-        })));
-        this.connect('scale', combineLatest([
-            this.select('active'),
-            this.select('axisHeadScale'),
-            this.select('label').pipe(startWithUndefined()),
-        ]).pipe(map(([active, axisHeadScale, label]) => (label ? 1 : 0.75) * (active ? 1.2 : 1) * axisHeadScale)));
+        });
+        this.scale = computed(() => {
+            const active = this.active();
+            const axisHeadScale = this.#axisHeadScale();
+            const label = this.axisLabel();
+            return (label ? 1 : 0.75) * (active ? 1.2 : 1) * axisHeadScale;
+        });
     }
     onPointerOver(event) {
         if (!this.get('disabled')) {
             event.stopPropagation();
-            this.set({ active: true });
+            this.active.set(true);
         }
     }
     onPointerOut(event) {
@@ -1346,26 +1383,26 @@ class NgtsGizmoViewportAxisHead extends NgtRxStore {
             }
             else {
                 event.stopPropagation();
-                this.set({ active: false });
+                this.active.set(false);
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewportAxisHead, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewportAxisHead, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsGizmoViewportAxisHead, isStandalone: true, selector: "ngts-gizmo-viewport-axis-head", inputs: { arcStyle: "arcStyle", label: "label", labelColor: "labelColor", axisHeadScale: "axisHeadScale", disabled: "disabled", font: "font", clickEmitter: "clickEmitter" }, usesInheritance: true, ngImport: i0, template: `
         <ngt-sprite
             ngtCompound
-            [scale]="get('scale')"
-            (pointerover)="onPointerOver($any($event))"
-            (pointerout)="onPointerOut($any($event))"
+            [scale]="scale()"
+            (pointerover)="onPointerOver($event)"
+            (pointerout)="onPointerOut($event)"
         >
             <ngt-sprite-material
-                [map]="get('texture')"
-                [opacity]="get('label') ? 1 : 0.75"
+                [map]="texture()"
+                [opacity]="axisLabel() ? 1 : 0.75"
                 [alphaTest]="0.3"
                 [toneMapped]="false"
             >
-                <ngt-value [rawValue]="gl.outputEncoding" attach="map.encoding" />
-                <ngt-value [rawValue]="gl.capabilities.getMaxAnisotropy() || 1" attach="map.anisotropy" />
+                <ngt-value [rawValue]="gl().outputEncoding" attach="map.encoding" />
+                <ngt-value [rawValue]="gl().capabilities.getMaxAnisotropy() || 1" attach="map.anisotropy" />
             </ngt-sprite-material>
         </ngt-sprite>
     `, isInline: true }); }
@@ -1378,25 +1415,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     template: `
         <ngt-sprite
             ngtCompound
-            [scale]="get('scale')"
-            (pointerover)="onPointerOver($any($event))"
-            (pointerout)="onPointerOut($any($event))"
+            [scale]="scale()"
+            (pointerover)="onPointerOver($event)"
+            (pointerout)="onPointerOut($event)"
         >
             <ngt-sprite-material
-                [map]="get('texture')"
-                [opacity]="get('label') ? 1 : 0.75"
+                [map]="texture()"
+                [opacity]="axisLabel() ? 1 : 0.75"
                 [alphaTest]="0.3"
                 [toneMapped]="false"
             >
-                <ngt-value [rawValue]="gl.outputEncoding" attach="map.encoding" />
-                <ngt-value [rawValue]="gl.capabilities.getMaxAnisotropy() || 1" attach="map.anisotropy" />
+                <ngt-value [rawValue]="gl().outputEncoding" attach="map.encoding" />
+                <ngt-value [rawValue]="gl().capabilities.getMaxAnisotropy() || 1" attach="map.anisotropy" />
             </ngt-sprite-material>
         </ngt-sprite>
     `,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { arcStyle: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { arcStyle: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -1413,13 +1450,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
             }] } });
 
 extend({ Group, AmbientLight, PointLight });
-class NgtsGizmoViewport extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.gizmoHelperApi = inject(NGTS_GIZMO_HELPER_API);
-        this.Math = Math;
-        this.clicked = new EventEmitter();
-    }
+class NgtsGizmoViewport extends NgtSignalStore {
+    #gizmoHelperApi;
     set axisColors(axisColors) {
         this.set({ axisColors });
     }
@@ -1447,103 +1479,114 @@ class NgtsGizmoViewport extends NgtRxStore {
     set font(font) {
         this.set({ font });
     }
-    initialize() {
-        super.initialize();
-        this.set({
+    constructor() {
+        super({
             font: '18px Inter var, Arial, sans-serif',
             axisColors: ['#ff2060', '#20df80', '#2080ff'],
             axisHeadScale: 1,
             labels: ['X', 'Y', 'Z'],
             labelColor: '#000',
         });
+        this.#gizmoHelperApi = inject(NGTS_GIZMO_HELPER_API);
+        this.Math = Math;
+        this.clicked = new EventEmitter();
+        this.viewportAxisColors = this.select('axisColors');
+        this.viewportAxisScale = this.select('axisScale');
+        this.viewportLabels = this.select('labels');
+        this.viewportAxisHeadScale = this.select('axisHeadScale');
+        this.viewportLabelColor = this.select('labelColor');
+        this.viewportHideNegativeAxes = this.select('hideNegativeAxes');
+        this.viewportHideAxisHeads = this.select('hideAxisHeads');
+        this.viewportDisabled = this.select('disabled');
+        this.viewportFont = this.select('font');
     }
     onPointerDown(event) {
         if (!this.get('disabled')) {
             event.stopPropagation();
-            this.gizmoHelperApi.tweenCamera(event.object.position);
+            this.#gizmoHelperApi()(event.object.position);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewport, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewport, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsGizmoViewport, isStandalone: true, selector: "ngts-gizmo-viewport", inputs: { axisColors: "axisColors", axisScale: "axisScale", labels: "labels", axisHeadScale: "axisHeadScale", labelColor: "labelColor", hideNegativeAxes: "hideNegativeAxes", hideAxisHeads: "hideAxisHeads", disabled: "disabled", font: "font" }, outputs: { clicked: "clicked" }, usesInheritance: true, ngImport: i0, template: `
         <ngt-group ngtCompound [scale]="40">
             <ngts-gizmo-viewport-axis
-                [color]="get('axisColors')[0]"
+                [color]="viewportAxisColors()[0]"
                 [rotation]="[0, 0, 0]"
-                [scale]="get('axisScale')"
+                [scale]="viewportAxisScale()"
             ></ngts-gizmo-viewport-axis>
             <ngts-gizmo-viewport-axis
-                [color]="get('axisColors')[1]"
+                [color]="viewportAxisColors()[1]"
                 [rotation]="[0, 0, Math.PI / 2]"
-                [scale]="get('axisScale')"
+                [scale]="viewportAxisScale()"
             ></ngts-gizmo-viewport-axis>
             <ngts-gizmo-viewport-axis
-                [color]="get('axisColors')[2]"
+                [color]="viewportAxisColors()[2]"
                 [rotation]="[0, -Math.PI / 2, 0]"
-                [scale]="get('axisScale')"
+                [scale]="viewportAxisScale()"
             ></ngts-gizmo-viewport-axis>
-            <ng-container *ngIf="!get('hideAxisHeads')">
+            <ng-container *ngIf="!viewportHideAxisHeads()">
                 <ngts-gizmo-viewport-axis-head
-                    [arcStyle]="get('axisColors')[0]"
+                    [arcStyle]="viewportAxisColors()[0]"
                     [position]="[1, 0, 0]"
-                    [label]="get('labels')[0]"
-                    [font]="get('font')"
-                    [disabled]="get('disabled')"
-                    [labelColor]="get('labelColor')"
+                    [label]="viewportLabels()[0]"
+                    [font]="viewportFont()"
+                    [disabled]="viewportDisabled()"
+                    [labelColor]="viewportLabelColor()"
                     [clickEmitter]="clicked"
-                    [axisHeadScale]="get('axisHeadScale')"
+                    [axisHeadScale]="viewportAxisHeadScale()"
                     (pointerdown)="onPointerDown($any($event))"
                 ></ngts-gizmo-viewport-axis-head>
                 <ngts-gizmo-viewport-axis-head
-                    [arcStyle]="get('axisColors')[1]"
+                    [arcStyle]="viewportAxisColors()[1]"
                     [position]="[0, 1, 0]"
-                    [label]="get('labels')[1]"
-                    [font]="get('font')"
-                    [disabled]="get('disabled')"
-                    [labelColor]="get('labelColor')"
+                    [label]="viewportLabels()[1]"
+                    [font]="viewportFont()"
+                    [disabled]="viewportDisabled()"
+                    [labelColor]="viewportLabelColor()"
                     [clickEmitter]="clicked"
-                    [axisHeadScale]="get('axisHeadScale')"
+                    [axisHeadScale]="viewportAxisHeadScale()"
                     (pointerdown)="onPointerDown($any($event))"
                 ></ngts-gizmo-viewport-axis-head>
                 <ngts-gizmo-viewport-axis-head
-                    [arcStyle]="get('axisColors')[2]"
+                    [arcStyle]="viewportAxisColors()[2]"
                     [position]="[0, 0, 1]"
-                    [label]="get('labels')[2]"
-                    [font]="get('font')"
-                    [disabled]="get('disabled')"
-                    [labelColor]="get('labelColor')"
+                    [label]="viewportLabels()[2]"
+                    [font]="viewportFont()"
+                    [disabled]="viewportDisabled()"
+                    [labelColor]="viewportLabelColor()"
                     [clickEmitter]="clicked"
-                    [axisHeadScale]="get('axisHeadScale')"
+                    [axisHeadScale]="viewportAxisHeadScale()"
                     (pointerdown)="onPointerDown($any($event))"
                 ></ngts-gizmo-viewport-axis-head>
-                <ng-container *ngIf="!get('hideNegativeAxes')">
+                <ng-container *ngIf="!viewportHideNegativeAxes()">
                     <ngts-gizmo-viewport-axis-head
-                        [arcStyle]="get('axisColors')[0]"
+                        [arcStyle]="viewportAxisColors()[0]"
                         [position]="[-1, 0, 0]"
-                        [font]="get('font')"
-                        [disabled]="get('disabled')"
-                        [labelColor]="get('labelColor')"
+                        [font]="viewportFont()"
+                        [disabled]="viewportDisabled()"
+                        [labelColor]="viewportLabelColor()"
                         [clickEmitter]="clicked"
-                        [axisHeadScale]="get('axisHeadScale')"
+                        [axisHeadScale]="viewportAxisHeadScale()"
                         (pointerdown)="onPointerDown($any($event))"
                     ></ngts-gizmo-viewport-axis-head>
                     <ngts-gizmo-viewport-axis-head
-                        [arcStyle]="get('axisColors')[1]"
+                        [arcStyle]="viewportAxisColors()[1]"
                         [position]="[0, -1, 0]"
-                        [font]="get('font')"
-                        [disabled]="get('disabled')"
-                        [labelColor]="get('labelColor')"
+                        [font]="viewportFont()"
+                        [disabled]="viewportDisabled()"
+                        [labelColor]="viewportLabelColor()"
                         [clickEmitter]="clicked"
-                        [axisHeadScale]="get('axisHeadScale')"
+                        [axisHeadScale]="viewportAxisHeadScale()"
                         (pointerdown)="onPointerDown($any($event))"
                     ></ngts-gizmo-viewport-axis-head>
                     <ngts-gizmo-viewport-axis-head
-                        [arcStyle]="get('axisColors')[2]"
+                        [arcStyle]="viewportAxisColors()[2]"
                         [position]="[0, 0, -1]"
-                        [font]="get('font')"
-                        [disabled]="get('disabled')"
-                        [labelColor]="get('labelColor')"
+                        [font]="viewportFont()"
+                        [disabled]="viewportDisabled()"
+                        [labelColor]="viewportLabelColor()"
                         [clickEmitter]="clicked"
-                        [axisHeadScale]="get('axisHeadScale')"
+                        [axisHeadScale]="viewportAxisHeadScale()"
                         (pointerdown)="onPointerDown($any($event))"
                     ></ngts-gizmo-viewport-axis-head>
                 </ng-container>
@@ -1551,7 +1594,7 @@ class NgtsGizmoViewport extends NgtRxStore {
             <ngt-ambient-light intensity="0.5"></ngt-ambient-light>
             <ngt-point-light position="10" intensity="0.5"></ngt-point-light>
         </ngt-group>
-    `, isInline: true, dependencies: [{ kind: "component", type: NgtsGizmoViewportAxis, selector: "ngts-gizmo-viewport-axis[color][rotation]", inputs: ["color", "rotation", "scale"] }, { kind: "component", type: NgtsGizmoViewportAxisHead, selector: "ngts-gizmo-viewport-axis-head", inputs: ["arcStyle", "label", "labelColor", "axisHeadScale", "disabled", "font", "clickEmitter"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: NgtsGizmoViewportAxis, selector: "ngts-gizmo-viewport-axis", inputs: ["color", "rotation", "scale"] }, { kind: "component", type: NgtsGizmoViewportAxisHead, selector: "ngts-gizmo-viewport-axis-head", inputs: ["arcStyle", "label", "labelColor", "axisHeadScale", "disabled", "font", "clickEmitter"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewport, decorators: [{
             type: Component,
@@ -1561,83 +1604,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     template: `
         <ngt-group ngtCompound [scale]="40">
             <ngts-gizmo-viewport-axis
-                [color]="get('axisColors')[0]"
+                [color]="viewportAxisColors()[0]"
                 [rotation]="[0, 0, 0]"
-                [scale]="get('axisScale')"
+                [scale]="viewportAxisScale()"
             ></ngts-gizmo-viewport-axis>
             <ngts-gizmo-viewport-axis
-                [color]="get('axisColors')[1]"
+                [color]="viewportAxisColors()[1]"
                 [rotation]="[0, 0, Math.PI / 2]"
-                [scale]="get('axisScale')"
+                [scale]="viewportAxisScale()"
             ></ngts-gizmo-viewport-axis>
             <ngts-gizmo-viewport-axis
-                [color]="get('axisColors')[2]"
+                [color]="viewportAxisColors()[2]"
                 [rotation]="[0, -Math.PI / 2, 0]"
-                [scale]="get('axisScale')"
+                [scale]="viewportAxisScale()"
             ></ngts-gizmo-viewport-axis>
-            <ng-container *ngIf="!get('hideAxisHeads')">
+            <ng-container *ngIf="!viewportHideAxisHeads()">
                 <ngts-gizmo-viewport-axis-head
-                    [arcStyle]="get('axisColors')[0]"
+                    [arcStyle]="viewportAxisColors()[0]"
                     [position]="[1, 0, 0]"
-                    [label]="get('labels')[0]"
-                    [font]="get('font')"
-                    [disabled]="get('disabled')"
-                    [labelColor]="get('labelColor')"
+                    [label]="viewportLabels()[0]"
+                    [font]="viewportFont()"
+                    [disabled]="viewportDisabled()"
+                    [labelColor]="viewportLabelColor()"
                     [clickEmitter]="clicked"
-                    [axisHeadScale]="get('axisHeadScale')"
+                    [axisHeadScale]="viewportAxisHeadScale()"
                     (pointerdown)="onPointerDown($any($event))"
                 ></ngts-gizmo-viewport-axis-head>
                 <ngts-gizmo-viewport-axis-head
-                    [arcStyle]="get('axisColors')[1]"
+                    [arcStyle]="viewportAxisColors()[1]"
                     [position]="[0, 1, 0]"
-                    [label]="get('labels')[1]"
-                    [font]="get('font')"
-                    [disabled]="get('disabled')"
-                    [labelColor]="get('labelColor')"
+                    [label]="viewportLabels()[1]"
+                    [font]="viewportFont()"
+                    [disabled]="viewportDisabled()"
+                    [labelColor]="viewportLabelColor()"
                     [clickEmitter]="clicked"
-                    [axisHeadScale]="get('axisHeadScale')"
+                    [axisHeadScale]="viewportAxisHeadScale()"
                     (pointerdown)="onPointerDown($any($event))"
                 ></ngts-gizmo-viewport-axis-head>
                 <ngts-gizmo-viewport-axis-head
-                    [arcStyle]="get('axisColors')[2]"
+                    [arcStyle]="viewportAxisColors()[2]"
                     [position]="[0, 0, 1]"
-                    [label]="get('labels')[2]"
-                    [font]="get('font')"
-                    [disabled]="get('disabled')"
-                    [labelColor]="get('labelColor')"
+                    [label]="viewportLabels()[2]"
+                    [font]="viewportFont()"
+                    [disabled]="viewportDisabled()"
+                    [labelColor]="viewportLabelColor()"
                     [clickEmitter]="clicked"
-                    [axisHeadScale]="get('axisHeadScale')"
+                    [axisHeadScale]="viewportAxisHeadScale()"
                     (pointerdown)="onPointerDown($any($event))"
                 ></ngts-gizmo-viewport-axis-head>
-                <ng-container *ngIf="!get('hideNegativeAxes')">
+                <ng-container *ngIf="!viewportHideNegativeAxes()">
                     <ngts-gizmo-viewport-axis-head
-                        [arcStyle]="get('axisColors')[0]"
+                        [arcStyle]="viewportAxisColors()[0]"
                         [position]="[-1, 0, 0]"
-                        [font]="get('font')"
-                        [disabled]="get('disabled')"
-                        [labelColor]="get('labelColor')"
+                        [font]="viewportFont()"
+                        [disabled]="viewportDisabled()"
+                        [labelColor]="viewportLabelColor()"
                         [clickEmitter]="clicked"
-                        [axisHeadScale]="get('axisHeadScale')"
+                        [axisHeadScale]="viewportAxisHeadScale()"
                         (pointerdown)="onPointerDown($any($event))"
                     ></ngts-gizmo-viewport-axis-head>
                     <ngts-gizmo-viewport-axis-head
-                        [arcStyle]="get('axisColors')[1]"
+                        [arcStyle]="viewportAxisColors()[1]"
                         [position]="[0, -1, 0]"
-                        [font]="get('font')"
-                        [disabled]="get('disabled')"
-                        [labelColor]="get('labelColor')"
+                        [font]="viewportFont()"
+                        [disabled]="viewportDisabled()"
+                        [labelColor]="viewportLabelColor()"
                         [clickEmitter]="clicked"
-                        [axisHeadScale]="get('axisHeadScale')"
+                        [axisHeadScale]="viewportAxisHeadScale()"
                         (pointerdown)="onPointerDown($any($event))"
                     ></ngts-gizmo-viewport-axis-head>
                     <ngts-gizmo-viewport-axis-head
-                        [arcStyle]="get('axisColors')[2]"
+                        [arcStyle]="viewportAxisColors()[2]"
                         [position]="[0, 0, -1]"
-                        [font]="get('font')"
-                        [disabled]="get('disabled')"
-                        [labelColor]="get('labelColor')"
+                        [font]="viewportFont()"
+                        [disabled]="viewportDisabled()"
+                        [labelColor]="viewportLabelColor()"
                         [clickEmitter]="clicked"
-                        [axisHeadScale]="get('axisHeadScale')"
+                        [axisHeadScale]="viewportAxisHeadScale()"
                         (pointerdown)="onPointerDown($any($event))"
                     ></ngts-gizmo-viewport-axis-head>
                 </ng-container>
@@ -1649,7 +1692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     imports: [NgtsGizmoViewportAxis, NgtsGizmoViewportAxisHead, NgIf],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { axisColors: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { axisColors: [{
                 type: Input
             }], axisScale: [{
                 type: Input
@@ -1672,12 +1715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
             }] } });
 
 const v = new THREE.Vector3();
-class NgtsQuadraticBezierLine extends NgtsLineInput {
-    constructor() {
-        super(...arguments);
-        this.curve = new THREE.QuadraticBezierCurve3(undefined, undefined, undefined);
-        this.lineRef = injectNgtRef();
-    }
+class NgtsQuadraticBezierLine extends NgtsLineInputs {
     set start(start) {
         this.set({ start });
     }
@@ -1690,68 +1728,75 @@ class NgtsQuadraticBezierLine extends NgtsLineInput {
     set segments(segments) {
         this.set({ segments });
     }
-    initialize() {
-        super.initialize();
+    #curve;
+    #start;
+    #end;
+    #mid;
+    #segments;
+    constructor() {
+        super();
+        this.lineRef = injectNgtRef();
+        this.#curve = new THREE.QuadraticBezierCurve3(undefined, undefined, undefined);
+        this.#start = this.select('start');
+        this.#end = this.select('end');
+        this.#mid = this.select('mid');
+        this.#segments = this.select('segments');
+        this.points = computed(() => this.#getPoints(this.#start(), this.#end(), this.#mid(), this.#segments()));
         this.set({ start: [0, 0, 0], end: [0, 0, 0], segments: 20 });
+        this.#replaceSetPoints();
     }
-    ngOnInit() {
-        this.connect('points', combineLatest([
-            this.select('start'),
-            this.select('end'),
-            this.select('mid').pipe(startWithUndefined()),
-            this.select('segments'),
-        ]).pipe(map(([start, end, mid, segments]) => this.getPoints(start, end, mid, segments))));
-        this.replaceSetPoints();
-    }
-    replaceSetPoints() {
-        this.hold(this.lineRef.$, (line) => {
+    #replaceSetPoints() {
+        effect(() => {
+            const line = this.lineRef.nativeElement;
+            if (!line)
+                return;
             line.setPoints = (start, end, mid) => {
-                const points = this.getPoints(start, end, mid);
-                if (this.lineRef.nativeElement.geometry) {
-                    this.lineRef.nativeElement.geometry.setPositions(points.map((p) => p.toArray()).flat());
+                const points = this.#getPoints(start, end, mid);
+                if (line.geometry) {
+                    line.geometry.setPositions(points.map((p) => p.toArray()).flat());
                 }
             };
         });
     }
-    getPoints(start, end, mid, segments = 20) {
+    #getPoints(start, end, mid, segments = 20) {
         if (start instanceof THREE.Vector3)
-            this.curve.v0.copy(start);
+            this.#curve.v0.copy(start);
         else
-            this.curve.v0.set(...start);
+            this.#curve.v0.set(...start);
         if (end instanceof THREE.Vector3)
-            this.curve.v2.copy(end);
+            this.#curve.v2.copy(end);
         else
-            this.curve.v2.set(...end);
+            this.#curve.v2.set(...end);
         if (mid instanceof THREE.Vector3) {
-            this.curve.v1.copy(mid);
+            this.#curve.v1.copy(mid);
         }
         else {
-            this.curve.v1.copy(this.curve.v0
+            this.#curve.v1.copy(this.#curve.v0
                 .clone()
-                .add(this.curve.v2.clone().sub(this.curve.v0))
-                .add(v.set(0, this.curve.v0.y - this.curve.v2.y, 0)));
+                .add(this.#curve.v2.clone().sub(this.#curve.v0))
+                .add(v.set(0, this.#curve.v0.y - this.#curve.v2.y, 0)));
         }
-        return this.curve.getPoints(segments);
+        return this.#curve.getPoints(segments);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsQuadraticBezierLine, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsQuadraticBezierLine, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsQuadraticBezierLine, isStandalone: true, selector: "ngts-quadratic-bezier-line", inputs: { lineRef: "lineRef", start: "start", end: "end", mid: "mid", segments: "segments" }, usesInheritance: true, ngImport: i0, template: `
         <ngts-line
             [lineRef]="lineRef"
-            [points]="get('points')"
-            [color]="get('color')"
-            [vertexColors]="get('vertexColors')"
-            [resolution]="get('resolution')"
-            [lineWidth]="get('lineWidth')"
-            [alphaToCoverage]="get('alphaToCoverage')"
-            [dashed]="get('dashed')"
-            [dashScale]="get('dashScale')"
-            [dashSize]="get('dashSize')"
-            [dashOffset]="get('dashOffset')"
-            [gapSize]="get('gapSize')"
-            [wireframe]="get('wireframe')"
-            [worldUnits]="get('worldUnits')"
+            [points]="points()"
+            [color]="lineParameters().color"
+            [vertexColors]="lineParameters().vertexColors"
+            [resolution]="lineParameters().resolution"
+            [lineWidth]="lineParameters().linewidth"
+            [alphaToCoverage]="lineParameters().alphaToCoverage"
+            [dashed]="lineParameters().dashed"
+            [dashScale]="lineParameters().dashScale"
+            [dashSize]="lineParameters().dashSize"
+            [dashOffset]="lineParameters().dashOffset"
+            [gapSize]="lineParameters().gapSize"
+            [wireframe]="lineParameters().wireframe"
+            [worldUnits]="lineParameters().worldUnits"
         />
-    `, isInline: true, dependencies: [{ kind: "component", type: NgtsLine, selector: "ngts-line[points]", inputs: ["lineRef", "points", "segments"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: NgtsLine, selector: "ngts-line", inputs: ["lineRef", "points", "segments"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsQuadraticBezierLine, decorators: [{
             type: Component,
@@ -1761,25 +1806,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     template: `
         <ngts-line
             [lineRef]="lineRef"
-            [points]="get('points')"
-            [color]="get('color')"
-            [vertexColors]="get('vertexColors')"
-            [resolution]="get('resolution')"
-            [lineWidth]="get('lineWidth')"
-            [alphaToCoverage]="get('alphaToCoverage')"
-            [dashed]="get('dashed')"
-            [dashScale]="get('dashScale')"
-            [dashSize]="get('dashSize')"
-            [dashOffset]="get('dashOffset')"
-            [gapSize]="get('gapSize')"
-            [wireframe]="get('wireframe')"
-            [worldUnits]="get('worldUnits')"
+            [points]="points()"
+            [color]="lineParameters().color"
+            [vertexColors]="lineParameters().vertexColors"
+            [resolution]="lineParameters().resolution"
+            [lineWidth]="lineParameters().linewidth"
+            [alphaToCoverage]="lineParameters().alphaToCoverage"
+            [dashed]="lineParameters().dashed"
+            [dashScale]="lineParameters().dashScale"
+            [dashSize]="lineParameters().dashSize"
+            [dashOffset]="lineParameters().dashOffset"
+            [gapSize]="lineParameters().gapSize"
+            [wireframe]="lineParameters().wireframe"
+            [worldUnits]="lineParameters().worldUnits"
         />
     `,
                     imports: [NgtsLine],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { lineRef: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { lineRef: [{
                 type: Input
             }], start: [{
                 type: Input
@@ -1792,44 +1836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
             }] } });
 
 extend({ Mesh, TextGeometry });
-class NgtsText3D extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.font$ = this.select('font').pipe(switchMap((font) => {
-            if (typeof font === 'string')
-                return fetch(font).then((res) => res.json());
-            return of(font);
-        }), map((fontData) => new FontLoader().parse(fontData)));
-        this.geometryArgs$ = combineLatest([
-            this.font$,
-            this.select('text'),
-            this.select('size'),
-            this.select('height'),
-            this.select('bevelThickness'),
-            this.select('bevelSize'),
-            this.select('bevelEnabled'),
-            this.select('bevelSegments'),
-            this.select('bevelOffset'),
-            this.select('curveSegments'),
-            this.select('letterSpacing'),
-            this.select('lineHeight'),
-        ]).pipe(map(([font, text, size, height, bevelThickness, bevelSize, bevelEnabled, bevelSegments, bevelOffset, curveSegments, letterSpacing, lineHeight,]) => [
-            text,
-            {
-                font,
-                size,
-                height,
-                bevelThickness,
-                bevelSize,
-                bevelSegments,
-                bevelEnabled,
-                bevelOffset,
-                curveSegments,
-                letterSpacing,
-                lineHeight,
-            },
-        ]));
-    }
+class NgtsText3D extends NgtSignalStore {
     set font(font) {
         this.set({ font });
     }
@@ -1866,11 +1873,13 @@ class NgtsText3D extends NgtRxStore {
     set letterSpacing(letterSpacing) {
         this.set({ letterSpacing });
     }
-    initialize() {
-        super.initialize();
-        this.set({
-            letterSpacing: 0,
+    set smooth(smooth) {
+        this.set({ smooth });
+    }
+    constructor() {
+        super({
             lineHeight: 1,
+            letterSpacing: 0,
             size: 1,
             height: 0.2,
             bevelThickness: 0.1,
@@ -1880,33 +1889,87 @@ class NgtsText3D extends NgtRxStore {
             bevelSegments: 4,
             curveSegments: 8,
         });
+        this.textRef = injectNgtRef();
+        this.#fontData = toSignal(toObservable(this.select('font')).pipe(switchMap((font) => {
+            if (typeof font === 'string')
+                return fetch(font).then((res) => res.json());
+            return of(font);
+        }), map((fontData) => new FontLoader().parse(fontData))));
+        this.#text = this.select('text');
+        this.#size = this.select('size');
+        this.#height = this.select('height');
+        this.#bevelThickness = this.select('bevelThickness');
+        this.#bevelSize = this.select('bevelSize');
+        this.#bevelEnabled = this.select('bevelEnabled');
+        this.#bevelSegments = this.select('bevelSegments');
+        this.#bevelOffset = this.select('bevelOffset');
+        this.#curveSegments = this.select('curveSegments');
+        this.#letterSpacing = this.select('letterSpacing');
+        this.#lineHeight = this.select('lineHeight');
+        this.geometryArgs = computed(() => {
+            const fontData = this.#fontData();
+            if (!fontData)
+                return null;
+            return [
+                this.#text(),
+                {
+                    font: fontData,
+                    size: this.#size(),
+                    height: this.#height(),
+                    bevelThickness: this.#bevelThickness(),
+                    bevelSize: this.#bevelSize(),
+                    bevelSegments: this.#bevelSegments(),
+                    bevelEnabled: this.#bevelEnabled(),
+                    bevelOffset: this.#bevelOffset(),
+                    curveSegments: this.#curveSegments(),
+                    letterSpacing: this.#letterSpacing(),
+                    lineHeight: this.#lineHeight(),
+                },
+            ];
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsText3D, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsText3D, isStandalone: true, selector: "ngts-text-3d[font]", inputs: { font: "font", text: "text", bevelEnabled: "bevelEnabled", bevelOffset: "bevelOffset", bevelSize: "bevelSize", bevelThickness: "bevelThickness", curveSegments: "curveSegments", bevelSegments: "bevelSegments", height: "height", size: "size", lineHeight: "lineHeight", letterSpacing: "letterSpacing" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-mesh ngtCompound>
-            <ngt-text-geometry *args="geometryArgs$ | ngtPush : null" />
+    #fontData;
+    #text;
+    #size;
+    #height;
+    #bevelThickness;
+    #bevelSize;
+    #bevelEnabled;
+    #bevelSegments;
+    #bevelOffset;
+    #curveSegments;
+    #letterSpacing;
+    #lineHeight;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsText3D, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsText3D, isStandalone: true, selector: "ngts-text-3d", inputs: { textRef: "textRef", font: "font", text: "text", bevelEnabled: "bevelEnabled", bevelOffset: "bevelOffset", bevelSize: "bevelSize", bevelThickness: "bevelThickness", curveSegments: "curveSegments", bevelSegments: "bevelSegments", height: "height", size: "size", lineHeight: "lineHeight", letterSpacing: "letterSpacing", smooth: "smooth" }, usesInheritance: true, ngImport: i0, template: `
+        <ngt-mesh ngtCompound [ref]="textRef">
+            <ngt-text-geometry *args="geometryArgs()" />
             <ng-content />
         </ngt-mesh>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }, { kind: "pipe", type: NgtPush, name: "ngtPush" }] }); }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsText3D, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngts-text-3d[font]',
+                    selector: 'ngts-text-3d',
                     standalone: true,
                     template: `
-        <ngt-mesh ngtCompound>
-            <ngt-text-geometry *args="geometryArgs$ | ngtPush : null" />
+        <ngt-mesh ngtCompound [ref]="textRef">
+            <ngt-text-geometry *args="geometryArgs()" />
             <ng-content />
         </ngt-mesh>
     `,
-                    imports: [NgtArgs, NgtPush],
+                    imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { font: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { textRef: [{
                 type: Input
+            }], font: [{
+                type: Input,
+                args: [{ required: true }]
             }], text: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], bevelEnabled: [{
                 type: Input
             }], bevelOffset: [{
@@ -1927,112 +1990,275 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Input
             }], letterSpacing: [{
                 type: Input
+            }], smooth: [{
+                type: Input
             }] } });
 
-class NgtsText extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.textRef = injectNgtRef();
-        this.sync = new EventEmitter();
-        this.store = inject(NgtStore);
-        this.troikaText = new Text();
-    }
+class NgtsText extends NgtSignalStore {
     set text(text) {
         this.set({ text });
     }
-    set characters(characters) {
-        this.set({ characters });
-    }
     set font(font) {
         this.set({ font });
     }
+    set fontSize(fontSize) {
+        this.set({ fontSize });
+    }
     set anchorX(anchorX) {
         this.set({ anchorX });
     }
     set anchorY(anchorY) {
         this.set({ anchorY });
     }
-    initialize() {
-        super.initialize();
-        this.set({ anchorX: 'center', anchorY: 'middle', text: '' });
+    set sdfGlyphSize(sdfGlyphSize) {
+        this.set({ sdfGlyphSize });
     }
-    ngOnInit() {
-        this.preloadFont();
-        this.syncText();
+    set characters(characters) {
+        this.set({ characters });
     }
-    ngOnDestroy() {
-        this.troikaText.dispose();
-        super.ngOnDestroy();
+    set color(color) {
+        this.set({ color });
     }
-    preloadFont() {
-        const { font, characters } = this.get();
-        if (font && characters) {
-            preloadFont({ font, characters });
-        }
+    set maxWidth(maxWidth) {
+        this.set({ maxWidth });
+    }
+    set lineHeight(lineHeight) {
+        this.set({ lineHeight });
+    }
+    set letterSpacing(letterSpacing) {
+        this.set({ letterSpacing });
+    }
+    set textAlign(textAlign) {
+        this.set({ textAlign });
+    }
+    set clipRect(clipRect) {
+        this.set({ clipRect });
+    }
+    set depthOffset(depthOffset) {
+        this.set({ depthOffset });
+    }
+    set direction(direction) {
+        this.set({ direction });
+    }
+    set overflowWrap(overflowWrap) {
+        this.set({ overflowWrap });
+    }
+    set whiteSpace(whiteSpace) {
+        this.set({ whiteSpace });
+    }
+    set outlineWidth(outlineWidth) {
+        this.set({ outlineWidth });
     }
-    syncText() {
-        this.hold(this.select(), () => {
-            const invalidate = this.store.get('invalidate');
+    set outlineOffsetX(outlineOffsetX) {
+        this.set({ outlineOffsetX });
+    }
+    set outlineOffsetY(outlineOffsetY) {
+        this.set({ outlineOffsetY });
+    }
+    set outlineBlur(outlineBlur) {
+        this.set({ outlineBlur });
+    }
+    set outlineColor(outlineColor) {
+        this.set({ outlineColor });
+    }
+    set outlineOpacity(outlineOpacity) {
+        this.set({ outlineOpacity });
+    }
+    set strokeWidth(strokeWidth) {
+        this.set({ strokeWidth });
+    }
+    set strokeColor(strokeColor) {
+        this.set({ strokeColor });
+    }
+    set strokeOpacity(strokeOpacity) {
+        this.set({ strokeOpacity });
+    }
+    set fillOpacity(fillOpacity) {
+        this.set({ fillOpacity });
+    }
+    set debugSDF(debugSDF) {
+        this.set({ debugSDF });
+    }
+    #store;
+    constructor() {
+        super({ fontSize: 1, sdfGlyphSize: 64, anchorX: 'center', anchorY: 'middle' });
+        this.textRef = injectNgtRef();
+        this.sync = new EventEmitter();
+        this.troikaText = new Text();
+        this.#store = inject(NgtStore);
+        this.state = this.select();
+        inject(DestroyRef).onDestroy(() => {
+            this.troikaText.dispose();
+        });
+        this.#preloadFont();
+        this.#syncText();
+    }
+    #preloadFont() {
+        const font = this.select('font');
+        const characters = this.select('characters');
+        const trigger = computed(() => ({ font: font(), characters: characters() }));
+        effect(() => {
+            const { font, characters } = trigger();
+            const invalidate = this.#store.get('invalidate');
+            preloadFont({ font, characters }, () => invalidate());
+        });
+    }
+    #syncText() {
+        const state = this.select();
+        effect(() => {
+            state();
+            const invalidate = this.#store.get('invalidate');
             this.troikaText.sync(() => {
                 invalidate();
-                if (this.sync.observed)
-                    this.sync.next(this.troikaText);
+                if (this.sync.observed) {
+                    this.sync.emit(this.troikaText);
+                }
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsText, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsText, isStandalone: true, selector: "ngts-text[text]", inputs: { textRef: "textRef", text: "text", characters: "characters", font: "font", anchorX: "anchorX", anchorY: "anchorY" }, outputs: { sync: "sync" }, providers: [RxActionFactory], usesInheritance: true, ngImport: i0, template: `
-        <ng-container>
-            <ngt-primitive
-                ngtCompound
-                *args="[troikaText]"
-                [ref]="textRef"
-                [text]="get('text')"
-                [anchorX]="get('anchorX')"
-                [anchorY]="get('anchorY')"
-                [font]="get('font')"
-            >
-                <ng-content />
-            </ngt-primitive>
-        </ng-container>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsText, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsText, isStandalone: true, selector: "ngts-text", inputs: { textRef: "textRef", text: "text", font: "font", fontSize: "fontSize", anchorX: "anchorX", anchorY: "anchorY", sdfGlyphSize: "sdfGlyphSize", characters: "characters", color: "color", maxWidth: "maxWidth", lineHeight: "lineHeight", letterSpacing: "letterSpacing", textAlign: "textAlign", clipRect: "clipRect", depthOffset: "depthOffset", direction: "direction", overflowWrap: "overflowWrap", whiteSpace: "whiteSpace", outlineWidth: "outlineWidth", outlineOffsetX: "outlineOffsetX", outlineOffsetY: "outlineOffsetY", outlineBlur: "outlineBlur", outlineColor: "outlineColor", outlineOpacity: "outlineOpacity", strokeWidth: "strokeWidth", strokeColor: "strokeColor", strokeOpacity: "strokeOpacity", fillOpacity: "fillOpacity", debugSDF: "debugSDF" }, outputs: { sync: "sync" }, usesInheritance: true, ngImport: i0, template: `
+        <ngt-primitive
+            ngtCompound
+            *args="[troikaText]"
+            [ref]="textRef"
+            [text]="state().text"
+            [anchorX]="state().anchorX"
+            [anchorY]="state().anchorY"
+            [font]="state().font"
+            [fontSize]="state().fontSize"
+            [sdfGlyphSize]="state().sdfGlyphSize"
+            [characters]="state().characters"
+            [color]="state().color"
+            [maxWidth]="state().maxWidth"
+            [lineHeight]="state().lineHeight"
+            [letterSpacing]="state().letterSpacing"
+            [textAlign]="state().textAlign"
+            [clipRect]="state().clipRect"
+            [depthOffset]="state().depthOffset"
+            [direction]="state().direction"
+            [overflowWrap]="state().overflowWrap"
+            [whiteSpace]="state().whiteSpace"
+            [outlineWidth]="state().outlineWidth"
+            [outlineOffsetX]="state().outlineOffsetX"
+            [outlineOffsetY]="state().outlineOffsetY"
+            [outlineBlur]="state().outlineBlur"
+            [outlineColor]="state().outlineColor"
+            [outlineOpacity]="state().outlineOpacity"
+            [strokeWidth]="state().strokeWidth"
+            [strokeColor]="state().strokeColor"
+            [strokeOpacity]="state().strokeOpacity"
+            [fillOpacity]="state().fillOpacity"
+            [debugSDF]="state().debugSDF"
+        >
+            <ng-content />
+        </ngt-primitive>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsText, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngts-text[text]',
+                    selector: 'ngts-text',
                     standalone: true,
                     template: `
-        <ng-container>
-            <ngt-primitive
-                ngtCompound
-                *args="[troikaText]"
-                [ref]="textRef"
-                [text]="get('text')"
-                [anchorX]="get('anchorX')"
-                [anchorY]="get('anchorY')"
-                [font]="get('font')"
-            >
-                <ng-content />
-            </ngt-primitive>
-        </ng-container>
+        <ngt-primitive
+            ngtCompound
+            *args="[troikaText]"
+            [ref]="textRef"
+            [text]="state().text"
+            [anchorX]="state().anchorX"
+            [anchorY]="state().anchorY"
+            [font]="state().font"
+            [fontSize]="state().fontSize"
+            [sdfGlyphSize]="state().sdfGlyphSize"
+            [characters]="state().characters"
+            [color]="state().color"
+            [maxWidth]="state().maxWidth"
+            [lineHeight]="state().lineHeight"
+            [letterSpacing]="state().letterSpacing"
+            [textAlign]="state().textAlign"
+            [clipRect]="state().clipRect"
+            [depthOffset]="state().depthOffset"
+            [direction]="state().direction"
+            [overflowWrap]="state().overflowWrap"
+            [whiteSpace]="state().whiteSpace"
+            [outlineWidth]="state().outlineWidth"
+            [outlineOffsetX]="state().outlineOffsetX"
+            [outlineOffsetY]="state().outlineOffsetY"
+            [outlineBlur]="state().outlineBlur"
+            [outlineColor]="state().outlineColor"
+            [outlineOpacity]="state().outlineOpacity"
+            [strokeWidth]="state().strokeWidth"
+            [strokeColor]="state().strokeColor"
+            [strokeOpacity]="state().strokeOpacity"
+            [fillOpacity]="state().fillOpacity"
+            [debugSDF]="state().debugSDF"
+        >
+            <ng-content />
+        </ngt-primitive>
     `,
                     imports: [NgtArgs],
-                    providers: [RxActionFactory],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { textRef: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { textRef: [{
                 type: Input
             }], text: [{
-                type: Input
-            }], characters: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], font: [{
                 type: Input
+            }], fontSize: [{
+                type: Input
             }], anchorX: [{
                 type: Input
             }], anchorY: [{
                 type: Input
+            }], sdfGlyphSize: [{
+                type: Input
+            }], characters: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }], lineHeight: [{
+                type: Input
+            }], letterSpacing: [{
+                type: Input
+            }], textAlign: [{
+                type: Input
+            }], clipRect: [{
+                type: Input
+            }], depthOffset: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], overflowWrap: [{
+                type: Input
+            }], whiteSpace: [{
+                type: Input
+            }], outlineWidth: [{
+                type: Input
+            }], outlineOffsetX: [{
+                type: Input
+            }], outlineOffsetY: [{
+                type: Input
+            }], outlineBlur: [{
+                type: Input
+            }], outlineColor: [{
+                type: Input
+            }], outlineOpacity: [{
+                type: Input
+            }], strokeWidth: [{
+                type: Input
+            }], strokeColor: [{
+                type: Input
+            }], strokeOpacity: [{
+                type: Input
+            }], fillOpacity: [{
+                type: Input
+            }], debugSDF: [{
+                type: Input
             }], sync: [{
                 type: Output
             }] } });