angular-three-soba 1.14.1 → 2.0.0-beta.10

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

@@ -1,2038 +1,824 @@
 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, effect, TemplateRef, ContentChild, computed, EventEmitter, inject, DestroyRef, Output } from '@angular/core';
+import { extend, signalStore, injectNgtRef, injectBeforeRender, NgtArgs, injectNgtStore } 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 { NgIf, NgTemplateOutlet, DOCUMENT, NgFor } from '@angular/common';
-import { NgtsOrthographicCamera } from 'angular-three-soba/cameras';
-import { RxActionFactory } from '@rx-angular/state/actions';
+import { Group, LOD, LineSegments, LineBasicMaterial, Mesh, PlaneGeometry } from 'three';
+import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgtsSobaContent } from 'angular-three-soba/utils';
+import { GridMaterial } from 'angular-three-soba/shaders';
+import { toSignal, toObservable } from '@angular/core/rxjs-interop';
+import { switchMap, of, map } from 'rxjs';
+import { TextGeometry, FontLoader } from 'three-stdlib';
 import { Text, preloadFont } from 'troika-three-text';
 
 extend({ Group });
-class NgtsBillboard extends NgtRxStore {
+class NgtsBillboard {
+    set _follow(follow) {
+        this.inputs.set({ follow });
+    }
+    set _lockX(lockX) {
+        this.inputs.set({ lockX });
+    }
+    set _lockY(lockY) {
+        this.inputs.set({ lockY });
+    }
+    set _lockZ(lockZ) {
+        this.inputs.set({ lockZ });
+    }
     constructor() {
-        super(...arguments);
+        this.inputs = signalStore({ follow: true, lockX: false, lockY: false, lockZ: false });
         this.billboardRef = injectNgtRef();
+        injectBeforeRender(({ camera }) => {
+            const ref = this.billboardRef.untracked;
+            const { follow, lockX, lockY, lockZ } = this.inputs.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;
+        });
     }
-    set follow(follow) {
-        this.set({ follow });
-    }
-    set lockX(lockX) {
-        this.set({ lockX });
-    }
-    set lockY(lockY) {
-        this.set({ lockY });
-    }
-    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 }); }
-    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))">
-            <ng-content />
-        </ngt-group>
-    `, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsBillboard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NgtsBillboard, isStandalone: true, selector: "ngts-billboard", inputs: { billboardRef: "billboardRef", _follow: ["follow", "_follow"], _lockX: ["lockX", "_lockX"], _lockY: ["lockY", "_lockY"], _lockZ: ["lockZ", "_lockZ"] }, ngImport: i0, template: `
+		<ngt-group ngtCompound [ref]="billboardRef">
+			<ng-content />
+		</ngt-group>
+	`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsBillboard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsBillboard, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-billboard',
                     standalone: true,
                     template: `
-        <ngt-group ngtCompound [ref]="billboardRef" (beforeRender)="onBeforeRender($any($event))">
-            <ng-content />
-        </ngt-group>
-    `,
+		<ngt-group ngtCompound [ref]="billboardRef">
+			<ng-content />
+		</ngt-group>
+	`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { billboardRef: [{
-                type: Input
-            }], follow: [{
-                type: Input
-            }], lockX: [{
-                type: Input
-            }], lockY: [{
-                type: Input
-            }], lockZ: [{
-                type: Input
+        }], ctorParameters: function () { return []; }, propDecorators: { billboardRef: [{
+                type: Input
+            }], _follow: [{
+                type: Input,
+                args: [{ alias: 'follow' }]
+            }], _lockX: [{
+                type: Input,
+                args: [{ alias: 'lockX' }]
+            }], _lockY: [{
+                type: Input,
+                args: [{ alias: 'lockY' }]
+            }], _lockZ: [{
+                type: Input,
+                args: [{ alias: 'lockZ' }]
             }] } });
 
-class NgtsLineInput extends NgtRxStore {
-    set vertexColors(vertexColors) {
-        this.set({ vertexColors });
+extend({ LOD });
+class NgtsDetailed {
+    set _distances(distances) {
+        this.inputs.set({ distances });
     }
-    set lineWidth(lineWidth) {
-        this.set({ lineWidth });
-    }
-    set alphaToCoverage(alphaToCoverage) {
-        this.set({ alphaToCoverage });
-    }
-    set color(color) {
-        this.set({ color });
+    set _hysteresis(hysteresis) {
+        this.inputs.set({ hysteresis });
     }
-    set dashed(dashed) {
-        this.set({ dashed });
-    }
-    set dashScale(dashScale) {
-        this.set({ dashScale });
-    }
-    set dashSize(dashSize) {
-        this.set({ dashSize });
-    }
-    set dashOffset(dashOffset) {
-        this.set({ dashOffset });
-    }
-    set gapSize(gapSize) {
-        this.set({ gapSize });
-    }
-    set resolution(resolution) {
-        this.set({ resolution });
-    }
-    set wireframe(wireframe) {
-        this.set({ wireframe });
-    }
-    set worldUnits(worldUnits) {
-        this.set({ worldUnits });
-    }
-    initialize() {
-        super.initialize();
-        this.set({ color: 'black' });
-    }
-    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 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsLineInput, decorators: [{
-            type: Directive
-        }], propDecorators: { vertexColors: [{
-                type: Input
-            }], lineWidth: [{
-                type: Input
-            }], alphaToCoverage: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], dashed: [{
-                type: Input
-            }], dashScale: [{
-                type: Input
-            }], dashSize: [{
-                type: Input
-            }], dashOffset: [{
-                type: Input
-            }], gapSize: [{
-                type: Input
-            }], resolution: [{
-                type: Input
-            }], wireframe: [{
-                type: Input
-            }], worldUnits: [{
-                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();
-    }
-    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;
+        this.inputs = signalStore({ hysteresis: 0 });
+        this.lodRef = injectNgtRef();
+        this.updateChildren();
+    }
+    onBeforeRender({ object, state }) {
+        object.update(state.camera);
+    }
+    updateChildren() {
+        const lodChildren = this.lodRef.children();
+        const _distances = this.inputs.select('distances');
+        const _hysteresis = this.inputs.select('hysteresis');
+        effect(() => {
+            const lod = this.lodRef.nativeElement;
+            if (!lod)
+                return;
+            const [distances, hysteresis, children] = [_distances(), _hysteresis(), lodChildren()];
+            lod.levels.length = 0;
+            children.forEach((child, index) => {
+                lod.addLevel(child, distances[index], hysteresis);
             });
-            geometry.setPositions(pValues.flat());
-            if (vertexColors) {
-                const cValues = vertexColors.map((c) => c instanceof THREE.Color ? c.toArray() : c);
-                geometry.setColors(cValues.flat());
-            }
-            return geometry;
-        })));
-    }
-    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();
-    }
-    disposeGeometry() {
-        this.effect(this.select('lineGeometry'), (lineGeometry) => {
-            return () => 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))"
-            />
-            <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')"
-            />
-        </ngt-primitive>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsDetailed, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NgtsDetailed, isStandalone: true, selector: "ngts-detailed", inputs: { lodRef: "lodRef", _distances: ["distances", "_distances"], _hysteresis: ["hysteresis", "_hysteresis"] }, ngImport: i0, template: `
+		<ngt-lOD ngtCompound [ref]="lodRef" (beforeRender)="onBeforeRender($event)">
+			<ng-content />
+		</ngt-lOD>
+	`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsLine, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsDetailed, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngts-line[points]',
+                    selector: 'ngts-detailed',
                     standalone: true,
                     template: `
-        <ngt-primitive *args="[line]" [ref]="lineRef" ngtCompound>
-            <ngt-primitive
-                *args="[get('lineGeometry')]"
-                attach="geometry"
-                (afterAttach)="onAfterAttach($any($event))"
-            />
-            <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')"
-            />
-        </ngt-primitive>
-    `,
-                    imports: [NgtArgs],
+		<ngt-lOD ngtCompound [ref]="lodRef" (beforeRender)="onBeforeRender($event)">
+			<ng-content />
+		</ngt-lOD>
+	`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { lineRef: [{
-                type: Input
-            }], points: [{
-                type: Input
-            }], segments: [{
-                type: Input
-            }] } });
-
-class NgtsCatmullRomLine extends NgtsLineInput {
-    constructor() {
-        super(...arguments);
-        this.lineRef = injectNgtRef();
-    }
-    set points(points) {
-        this.set({ points });
-    }
-    set closed(closed) {
-        this.set({ closed });
-    }
-    set curveType(curveType) {
-        this.set({ curveType });
-    }
-    set tension(tension) {
-        this.set({ tension });
-    }
-    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]) => {
-            if (!vertexColors || vertexColors.length < 2)
-                return undefined;
-            if (vertexColors.length === segments + 1)
-                return vertexColors;
-            const mappedColors = vertexColors.map((color) => color instanceof THREE.Color ? color : new THREE.Color(...color));
-            if (this.get('closed'))
-                mappedColors.push(mappedColors[0].clone());
-            const iColors = [mappedColors[0]];
-            const divisions = segments / (mappedColors.length - 1);
-            for (let i = 0; i < segments; i++) {
-                const alpha = (i % divisions) / divisions;
-                const colorIndex = Math.floor(i / divisions);
-                iColors.push(mappedColors[colorIndex].clone().lerp(mappedColors[colorIndex + 1], alpha));
-            }
-            iColors.push(mappedColors[mappedColors.length - 1]);
-        })));
-    }
-    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: `
-        <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')"
-        />
-    `, isInline: true, dependencies: [{ kind: "component", type: NgtsLine, selector: "ngts-line[points]", 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]',
-                    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')"
-        />
-    `,
-                    imports: [NgtsLine],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], propDecorators: { lineRef: [{
-                type: Input
-            }], points: [{
-                type: Input
-            }], closed: [{
-                type: Input
-            }], curveType: [{
-                type: Input
-            }], tension: [{
-                type: Input
-            }], segments: [{
-                type: Input
-            }] } });
-
-class NgtsCubicBezierLine extends NgtsLineInput {
-    constructor() {
-        super(...arguments);
-        this.lineRef = injectNgtRef();
-    }
-    set start(start) {
-        this.set({ start });
-    }
-    set end(end) {
-        this.set({ end });
-    }
-    set midA(midA) {
-        this.set({ midA });
-    }
-    set midB(midB) {
-        this.set({ midB });
-    }
-    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 }) => {
-            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);
-        }));
-    }
-    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: `
-        <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')"
-        />
-    `, isInline: true, dependencies: [{ kind: "component", type: NgtsLine, selector: "ngts-line[points]", 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]',
-                    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')"
-        />
-    `,
-                    imports: [NgtsLine, NgIf],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], propDecorators: { lineRef: [{
-                type: Input
-            }], start: [{
-                type: Input
-            }], end: [{
-                type: Input
-            }], midA: [{
-                type: Input
-            }], midB: [{
-                type: Input
-            }], segments: [{
-                type: Input
+        }], ctorParameters: function () { return []; }, propDecorators: { lodRef: [{
+                type: Input
+            }], _distances: [{
+                type: Input,
+                args: [{ required: true, alias: 'distances' }]
+            }], _hysteresis: [{
+                type: Input,
+                args: [{ alias: 'hysteresis' }]
             }] } });
 
 extend({ LineSegments, LineBasicMaterial });
-class NgtsEdges extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.edgesRef = injectNgtRef();
-        this.withChildren = false;
-        this.noop = () => null;
-    }
-    set threshold(threshold) {
-        this.set({ threshold });
-    }
-    set color(color) {
-        this.set({ color });
-    }
-    set geometry(geometry) {
-        this.set({ geometry });
+class NgtsEdges {
+    set _threshold(threshold) {
+        this.inputs.set({ threshold });
     }
-    set userData(userData) {
-        this.set({ userData });
+    set _color(color) {
+        this.inputs.set({ color });
     }
-    initialize() {
-        super.initialize();
-        this.set({
-            threshold: 15,
-            color: 'black',
-            userData: {},
-        });
+    set _geometry(geometry) {
+        this.inputs.set({ geometry });
     }
-    ngOnInit() {
-        this.setupGeometry();
+    set _userData(userData) {
+        this.inputs.set({ userData });
     }
-    setupGeometry() {
-        this.hold(this.edgesRef.$, (segments) => {
-            const parent = segments.parent;
+    constructor() {
+        this.nullRaycast = () => null;
+        this.inputs = signalStore({ threshold: 15, color: 'black' });
+        this.edgesRef = injectNgtRef();
+        this.geometry = this.inputs.select('geometry');
+        this.threshold = this.inputs.select('threshold');
+        this.color = this.inputs.select('color');
+        effect(() => {
+            const edges = this.edgesRef.nativeElement;
+            if (!edges)
+                return;
+            const parent = this.edgesRef.nativeElement.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);
+                const [geometry, threshold] = [this.geometry() || parent.geometry, this.threshold()];
+                if (geometry !== edges.userData['currentGeom'] || threshold !== edges.userData['currentThreshold']) {
+                    edges.userData['currentGeom'] = geometry;
+                    edges.userData['currentThreshold'] = threshold;
+                    edges.geometry = new THREE.EdgesGeometry(geometry, 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.ɵ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">
-                <ng-content />
-            </ng-container>
-            <ng-template #noChildren>
-                <ngt-line-basic-material [color]="color" />
-            </ng-template>
-        </ngt-line-segments>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsEdges, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NgtsEdges, isStandalone: true, selector: "ngts-edges", inputs: { edgesRef: "edgesRef", _threshold: ["threshold", "_threshold"], _color: ["color", "_color"], _geometry: ["geometry", "_geometry"], _userData: ["userData", "_userData"] }, queries: [{ propertyName: "content", first: true, predicate: NgtsSobaContent, descendants: true, read: TemplateRef }], ngImport: i0, template: `
+		<ngt-line-segments [ref]="edgesRef" [raycast]="nullRaycast" ngtCompound>
+			<ng-container *ngIf="content; else defaultMaterial" [ngTemplateOutlet]="content" />
+			<ng-template #defaultMaterial>
+				<ngt-line-basic-material [color]="color()" />
+			</ng-template>
+		</ngt-line-segments>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsEdges, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsEdges, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-edges',
                     standalone: true,
                     template: `
-        <ngt-line-segments [ref]="edgesRef" [raycast]="noop" ngtCompound>
-            <ng-container *ngIf="withChildren; else noChildren">
-                <ng-content />
-            </ng-container>
-            <ng-template #noChildren>
-                <ngt-line-basic-material [color]="color" />
-            </ng-template>
-        </ngt-line-segments>
-    `,
-                    imports: [NgIf],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], propDecorators: { edgesRef: [{
-                type: Input
-            }], threshold: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], geometry: [{
-                type: Input
-            }], userData: [{
-                type: Input
-            }], withChildren: [{
-                type: Input
-            }] } });
-
-const isOrbitControls = (controls) => {
-    return '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 }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtsGizmoHelperContent, isStandalone: true, selector: "ng-template[ngtsGizmoHelperContent]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoHelperContent, decorators: [{
-            type: Directive,
-            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();
-    }
-    set alignment(alignment) {
-        this.set({ alignment });
-    }
-    set margin(margin) {
-        this.set({ margin });
-    }
-    set renderPriority(renderPriority) {
-        this.set({ renderPriority });
-    }
-    set autoClear(autoClear) {
-        this.set({ autoClear });
-    }
-    initialize() {
-        super.initialize();
-        this.set({ alignment: 'bottom-right', margin: [80, 80], renderPriority: 1 });
-    }
-    ngOnInit() {
-        this.updateDefaultUp();
-        this.setGizmoPosition();
-    }
-    onBeforeRender(delta) {
-        if (this.virtualCameraRef.nativeElement && this.gizmoRef.nativeElement) {
-            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;
-                    // 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);
-                    }
-                }
-                else {
-                    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);
-                    // 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);
-                    if (this.updated.observed)
-                        this.updated.emit();
-                    else if (defaultControls) {
-                        defaultControls.update();
-                    }
-                    invalidate();
-                }
-            }
-            // Sync Gizmo with main camera orientation
-            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);
-        });
-    }
-    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')">
-            <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)"
-                >
-                    <ng-container *ngTemplateOutlet="gizmoHelperContent" />
-                </ngt-group>
-            </ng-template>
-        </ngt-portal>
-    `, isInline: true, dependencies: [{ kind: "component", type: NgtPortal, selector: "ngt-portal", inputs: ["container", "state", "autoRender", "autoRenderPriority"], outputs: ["beforeRender"] }, { kind: "directive", type: NgtPortalContent, selector: "ng-template[ngtPortalContent]" }, { kind: "component", type: NgtsOrthographicCamera, selector: "ngts-orthographic-camera", inputs: ["left", "right", "top", "bottom"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoHelper, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-gizmo-helper',
-                    standalone: true,
-                    template: `
-        <ngt-portal [renderPriority]="get('renderPriority')">
-            <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)"
-                >
-                    <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] }],
+		<ngt-line-segments [ref]="edgesRef" [raycast]="nullRaycast" ngtCompound>
+			<ng-container *ngIf="content; else defaultMaterial" [ngTemplateOutlet]="content" />
+			<ng-template #defaultMaterial>
+				<ngt-line-basic-material [color]="color()" />
+			</ng-template>
+		</ngt-line-segments>
+	`,
+                    imports: [NgIf, NgTemplateOutlet],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { alignment: [{
-                type: Input
-            }], margin: [{
-                type: Input
-            }], renderPriority: [{
-                type: Input
-            }], autoClear: [{
-                type: Input
-            }], updated: [{
-                type: Output
-            }], gizmoHelperContent: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { content: [{
                 type: ContentChild,
-                args: [NgtsGizmoHelperContent, { static: true, read: TemplateRef }]
+                args: [NgtsSobaContent, { read: TemplateRef }]
+            }], edgesRef: [{
+                type: Input
+            }], _threshold: [{
+                type: Input,
+                args: [{ alias: 'threshold' }]
+            }], _color: [{
+                type: Input,
+                args: [{ alias: 'color' }]
+            }], _geometry: [{
+                type: Input,
+                args: [{ alias: 'geometry' }]
+            }], _userData: [{
+                type: Input,
+                args: [{ alias: 'userData' }]
             }] } });
 
-const colors = { bg: '#f0f0f0', hover: '#999', text: 'black', stroke: 'black' };
-const defaultFaces = ['Right', 'Left', 'Top', 'Bottom', 'Front', 'Back'];
-const makePositionVector = (xyz) => new THREE.Vector3(...xyz).multiplyScalar(0.38);
-const corners = [
-    [1, 1, 1],
-    [1, 1, -1],
-    [1, -1, 1],
-    [1, -1, -1],
-    [-1, 1, 1],
-    [-1, 1, -1],
-    [-1, -1, 1],
-    [-1, -1, -1],
-].map(makePositionVector);
-const cornerDimensions = [0.25, 0.25, 0.25];
-const edges = [
-    [1, 1, 0],
-    [1, 0, 1],
-    [1, 0, -1],
-    [1, -1, 0],
-    [0, 1, 1],
-    [0, 1, -1],
-    [0, -1, 1],
-    [0, -1, -1],
-    [-1, 1, 0],
-    [-1, 0, 1],
-    [-1, 0, -1],
-    [-1, -1, 0],
-].map(makePositionVector);
-const edgeDimensions = edges.map((edge) => edge.toArray().map((axis) => (axis == 0 ? 0.5 : 0.25)));
-
-class NgtsGizmoViewcubeInputs extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.store = inject(NgtStore);
+extend({ GridMaterial, Mesh, PlaneGeometry });
+class NgtsGrid {
+    set _cellSize(cellSize) {
+        this.inputs.set({ cellSize });
     }
-    set opacity(opacity) {
-        this.set({ opacity });
+    set _cellThickness(cellThickness) {
+        this.inputs.set({ cellThickness });
     }
-    set hoverColor(hoverColor) {
-        this.set({ hoverColor });
+    set _cellColor(cellColor) {
+        this.inputs.set({ cellColor });
     }
-    set textColor(textColor) {
-        this.set({ textColor });
+    set _sectionSize(sectionSize) {
+        this.inputs.set({ sectionSize });
     }
-    set strokeColor(strokeColor) {
-        this.set({ strokeColor });
+    set _sectionThickness(sectionThickness) {
+        this.inputs.set({ sectionThickness });
     }
-    set faces(faces) {
-        this.set({ faces });
+    set _sectionColor(sectionColor) {
+        this.inputs.set({ sectionColor });
     }
-    set clickEmitter(clickEmitter) {
-        this.set({ clickEmitter });
+    set _followCamera(followCamera) {
+        this.inputs.set({ followCamera });
+    }
+    set _infiniteGrid(infiniteGrid) {
+        this.inputs.set({ infiniteGrid });
+    }
+    set _fadeDistance(fadeDistance) {
+        this.inputs.set({ fadeDistance });
+    }
+    set _fadeStrength(fadeStrength) {
+        this.inputs.set({ fadeStrength });
+    }
+    set _side(side) {
+        this.inputs.set({ side });
+    }
+    set _args(args) {
+        this.inputs.set({ args });
     }
-    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 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcubeInputs, decorators: [{
-            type: Directive
-        }], propDecorators: { opacity: [{
-                type: Input
-            }], hoverColor: [{
-                type: Input
-            }], textColor: [{
-                type: Input
-            }], strokeColor: [{
-                type: Input
-            }], faces: [{
-                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;
-    }
-    set dimensions(dimensions) {
-        this.set({ dimensions });
-    }
-    set position(position) {
-        this.set({ position });
-    }
-    initialize() {
-        super.initialize();
-        this.set({ hoverColor: colors.hover });
-    }
-    onPointerMove(event) {
-        event.stopPropagation();
-        this.hover = true;
-    }
-    onPointerOut(event) {
-        event.stopPropagation();
-        this.hover = false;
-    }
-    onClick(event) {
-        if (this.get('clickEmitter')?.observed) {
-            this.get('clickEmitter').emit(event);
-        }
-        else {
-            event.stopPropagation();
-            this.gizmoHelperApi.tweenCamera(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: `
-        <ngt-mesh
-            [scale]="1.01"
-            [position]="get('position')"
-            (pointermove)="onPointerMove($any($event))"
-            (pointerout)="onPointerOut($any($event))"
-            (click)="onClick($any($event))"
-        >
-            <ngt-box-geometry *args="get('dimensions')" />
-            <ngt-mesh-basic-material
-                [color]="hover ? get('hoverColor') : 'white'"
-                [transparent]="true"
-                [opacity]="0.6"
-                [visible]="hover"
-            />
-        </ngt-mesh>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
+        this.inputs = signalStore({
+            cellColor: '#000000',
+            sectionColor: '#2080ff',
+            cellSize: 0.5,
+            sectionSize: 1,
+            followCamera: false,
+            infiniteGrid: false,
+            fadeDistance: 100,
+            fadeStrength: 1,
+            cellThickness: 0.5,
+            sectionThickness: 1,
+            side: THREE.BackSide,
+            args: [1, 1, 1, 1],
+        });
+        this.gridRef = injectNgtRef();
+        this.cellSize = this.inputs.select('cellSize');
+        this.sectionSize = this.inputs.select('sectionSize');
+        this.fadeDistance = this.inputs.select('fadeDistance');
+        this.fadeStrength = this.inputs.select('fadeStrength');
+        this.cellThickness = this.inputs.select('cellThickness');
+        this.sectionThickness = this.inputs.select('sectionThickness');
+        this.infiniteGrid = this.inputs.select('infiniteGrid');
+        this.followCamera = this.inputs.select('followCamera');
+        this.cellColor = this.inputs.select('cellColor');
+        this.sectionColor = this.inputs.select('sectionColor');
+        this.side = this.inputs.select('side');
+        this.args = this.inputs.select('args');
+        this.plane = new THREE.Plane();
+        this.upVector = new THREE.Vector3(0, 1, 0);
+        this.zeroVector = new THREE.Vector3(0, 0, 0);
+        injectBeforeRender(({ camera }) => {
+            this.plane
+                .setFromNormalAndCoplanarPoint(this.upVector, this.zeroVector)
+                .applyMatrix4(this.gridRef.nativeElement.matrixWorld);
+            const gridMaterial = this.gridRef.nativeElement.material;
+            const worldCamProjPosition = gridMaterial.uniforms['worldCamProjPosition'];
+            const worldPlanePosition = gridMaterial.uniforms['worldPlanePosition'];
+            this.plane.projectPoint(camera.position, worldCamProjPosition.value);
+            worldPlanePosition.value.set(0, 0, 0).applyMatrix4(this.gridRef.nativeElement.matrixWorld);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NgtsGrid, isStandalone: true, selector: "ngts-grid", inputs: { gridRef: "gridRef", _cellSize: ["cellSize", "_cellSize"], _cellThickness: ["cellThickness", "_cellThickness"], _cellColor: ["cellColor", "_cellColor"], _sectionSize: ["sectionSize", "_sectionSize"], _sectionThickness: ["sectionThickness", "_sectionThickness"], _sectionColor: ["sectionColor", "_sectionColor"], _followCamera: ["followCamera", "_followCamera"], _infiniteGrid: ["infiniteGrid", "_infiniteGrid"], _fadeDistance: ["fadeDistance", "_fadeDistance"], _fadeStrength: ["fadeStrength", "_fadeStrength"], _side: ["side", "_side"], _args: ["args", "_args"] }, ngImport: i0, template: `
+		<ngt-mesh ngtCompound [ref]="gridRef" [frustumCulled]="false">
+			<ngt-plane-geometry *args="args()" />
+			<ngt-grid-material
+				[transparent]="true"
+				[side]="side()"
+				[cellSize]="cellSize()"
+				[cellColor]="cellColor()"
+				[cellThickness]="cellThickness()"
+				[sectionSize]="sectionSize()"
+				[sectionColor]="sectionColor()"
+				[sectionThickness]="sectionThickness()"
+				[fadeDistance]="fadeDistance()"
+				[fadeStrength]="fadeStrength()"
+				[infiniteGrid]="infiniteGrid()"
+				[followCamera]="followCamera()"
+			>
+				<ngt-value attach="extensions.derivatives" [rawValue]="false" />
+			</ngt-grid-material>
+			<ng-content />
+		</ngt-mesh>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcubeEdgeCube, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsGrid, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngts-gizmo-viewcube-edge-cube[dimensions][position]',
+                    selector: 'ngts-grid',
                     standalone: true,
                     template: `
-        <ngt-mesh
-            [scale]="1.01"
-            [position]="get('position')"
-            (pointermove)="onPointerMove($any($event))"
-            (pointerout)="onPointerOut($any($event))"
-            (click)="onClick($any($event))"
-        >
-            <ngt-box-geometry *args="get('dimensions')" />
-            <ngt-mesh-basic-material
-                [color]="hover ? get('hoverColor') : 'white'"
-                [transparent]="true"
-                [opacity]="0.6"
-                [visible]="hover"
-            />
-        </ngt-mesh>
-    `,
+		<ngt-mesh ngtCompound [ref]="gridRef" [frustumCulled]="false">
+			<ngt-plane-geometry *args="args()" />
+			<ngt-grid-material
+				[transparent]="true"
+				[side]="side()"
+				[cellSize]="cellSize()"
+				[cellColor]="cellColor()"
+				[cellThickness]="cellThickness()"
+				[sectionSize]="sectionSize()"
+				[sectionColor]="sectionColor()"
+				[sectionThickness]="sectionThickness()"
+				[fadeDistance]="fadeDistance()"
+				[fadeStrength]="fadeStrength()"
+				[infiniteGrid]="infiniteGrid()"
+				[followCamera]="followCamera()"
+			>
+				<ngt-value attach="extensions.derivatives" [rawValue]="false" />
+			</ngt-grid-material>
+			<ng-content />
+		</ngt-mesh>
+	`,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { dimensions: [{
-                type: Input
-            }], position: [{
-                type: Input
+        }], ctorParameters: function () { return []; }, propDecorators: { gridRef: [{
+                type: Input
+            }], _cellSize: [{
+                type: Input,
+                args: [{ alias: 'cellSize' }]
+            }], _cellThickness: [{
+                type: Input,
+                args: [{ alias: 'cellThickness' }]
+            }], _cellColor: [{
+                type: Input,
+                args: [{ alias: 'cellColor' }]
+            }], _sectionSize: [{
+                type: Input,
+                args: [{ alias: 'sectionSize' }]
+            }], _sectionThickness: [{
+                type: Input,
+                args: [{ alias: 'sectionThickness' }]
+            }], _sectionColor: [{
+                type: Input,
+                args: [{ alias: 'sectionColor' }]
+            }], _followCamera: [{
+                type: Input,
+                args: [{ alias: 'followCamera' }]
+            }], _infiniteGrid: [{
+                type: Input,
+                args: [{ alias: 'infiniteGrid' }]
+            }], _fadeDistance: [{
+                type: Input,
+                args: [{ alias: 'fadeDistance' }]
+            }], _fadeStrength: [{
+                type: Input,
+                args: [{ alias: 'fadeStrength' }]
+            }], _side: [{
+                type: Input,
+                args: [{ alias: 'side' }]
+            }], _args: [{
+                type: Input,
+                args: [{ alias: 'args' }]
             }] } });
 
-extend({ MeshLambertMaterial, Mesh, BoxGeometry });
-class NgtsGizmoViewcubeFaceMaterial extends NgtsGizmoViewcubeInputs {
+extend({ Mesh, TextGeometry });
+class NgtsText3D {
     constructor() {
-        super(...arguments);
-        this.document = inject(DOCUMENT);
+        this.inputs = signalStore({
+            lineHeight: 1,
+            letterSpacing: 0,
+            size: 1,
+            height: 0.2,
+            bevelThickness: 0.1,
+            bevelSize: 0.01,
+            bevelEnabled: false,
+            bevelOffset: 0,
+            bevelSegments: 4,
+            curveSegments: 8,
+        });
+        this.textRef = injectNgtRef();
+        this.fontData = toSignal(toObservable(this.inputs.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.inputs.select('text');
+        this.size = this.inputs.select('size');
+        this.height = this.inputs.select('height');
+        this.bevelThickness = this.inputs.select('bevelThickness');
+        this.bevelSize = this.inputs.select('bevelSize');
+        this.bevelEnabled = this.inputs.select('bevelEnabled');
+        this.bevelSegments = this.inputs.select('bevelSegments');
+        this.bevelOffset = this.inputs.select('bevelOffset');
+        this.curveSegments = this.inputs.select('curveSegments');
+        this.letterSpacing = this.inputs.select('letterSpacing');
+        this.lineHeight = this.inputs.select('lineHeight');
+        this.geometryArgs = computed(() => {
+            const fontData = this.fontData();
+            if (!fontData || !fontData.data)
+                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(),
+                },
+            ];
+        });
     }
-    set index(index) {
-        this.set({ index });
+    set _font(font) {
+        this.inputs.set({ font });
     }
-    set hover(hover) {
-        this.set({ hover });
+    set _text(text) {
+        this.inputs.set({ text });
     }
-    set font(font) {
-        this.set({ font });
+    set _bevelEnabled(bevelEnabled) {
+        this.inputs.set({ bevelEnabled });
     }
-    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');
-            canvas.width = 128;
-            canvas.height = 128;
-            const context = canvas.getContext('2d');
-            context.fillStyle = color;
-            context.fillRect(0, 0, canvas.width, canvas.height);
-            context.strokeStyle = strokeColor;
-            context.strokeRect(0, 0, canvas.width, canvas.height);
-            context.font = font;
-            context.textAlign = 'center';
-            context.fillStyle = textColor;
-            context.fillText(faces[index].toUpperCase(), 64, 76);
-            return new CanvasTexture(canvas);
-        }));
-    }
-    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: `
-        <ngt-mesh-lambert-material
-            [attach]="['material', get('index')]"
-            [map]="get('texture')"
-            [color]="get('hover') ? get('hoverColor') : get('color')"
-            [opacity]="get('opacity')"
-            [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-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]',
-                    standalone: true,
-                    template: `
-        <ngt-mesh-lambert-material
-            [attach]="['material', get('index')]"
-            [map]="get('texture')"
-            [color]="get('hover') ? get('hoverColor') : get('color')"
-            [opacity]="get('opacity')"
-            [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-mesh-lambert-material>
-    `,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], propDecorators: { index: [{
-                type: Input
-            }], hover: [{
-                type: Input
-            }], font: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }] } });
-class NgtsGizmoViewcubeFaceCube extends NgtsGizmoViewcubeInputs {
-    constructor() {
-        super(...arguments);
-        this.gizmoHelperApi = inject(NGTS_GIZMO_HELPER_API);
-        this.hover = -1;
+    set _bevelOffset(bevelOffset) {
+        this.inputs.set({ bevelOffset });
     }
-    set font(font) {
-        this.set({ font });
+    set _bevelSize(bevelSize) {
+        this.inputs.set({ bevelSize });
     }
-    set color(color) {
-        this.set({ color });
-    }
-    onPointerMove(event) {
-        event.stopPropagation();
-        this.hover = Math.floor(event.faceIndex / 2);
-    }
-    onPointerOut(event) {
-        event.stopPropagation();
-        this.hover = -1;
-    }
-    onClick(event) {
-        if (this.get('clickEmitter')?.observed) {
-            this.get('clickEmitter').emit(event);
-        }
-        else {
-            event.stopPropagation();
-            this.gizmoHelperApi.tweenCamera(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: `
-        <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')"
-            />
-        </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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcubeFaceCube, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-gizmo-viewcube-face-cube',
-                    standalone: true,
-                    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')"
-            />
-        </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);
-        this.edges = edges;
-        this.edgeDimensions = edgeDimensions;
-        this.corners = corners;
-        this.cornerDimensions = cornerDimensions;
-        this.clicked = new EventEmitter();
+    set _bevelThickness(bevelThickness) {
+        this.inputs.set({ bevelThickness });
     }
-    set font(font) {
-        this.set({ font });
+    set _curveSegments(curveSegments) {
+        this.inputs.set({ curveSegments });
     }
-    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: `
-        <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-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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcube, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-gizmo-viewcube',
-                    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-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>
-    `,
-                    imports: [NgtsGizmoViewcubeEdgeCube, NgtsGizmoViewcubeFaceCube, NgFor],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], propDecorators: { font: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], clicked: [{
-                type: Output
-            }] } });
-
-extend({ Group, Mesh, BoxGeometry, MeshBasicMaterial, Sprite, SpriteMaterial });
-class NgtsGizmoViewportAxis extends NgtRxStore {
-    set color(color) {
-        this.set({ color });
-    }
-    set rotation(rotation) {
-        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] });
-    }
-    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')">
-            <ngt-mesh [position]="[0.4, 0, 0]">
-                <ngt-box-geometry *args="get('scale')" />
-                <ngt-mesh-basic-material [color]="get('color')" [toneMapped]="false" />
-            </ngt-mesh>
-        </ngt-group>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
-}
-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]',
-                    standalone: true,
-                    template: `
-        <ngt-group [rotation]="get('rotation')">
-            <ngt-mesh [position]="[0.4, 0, 0]">
-                <ngt-box-geometry *args="get('scale')" />
-                <ngt-mesh-basic-material [color]="get('color')" [toneMapped]="false" />
-            </ngt-mesh>
-        </ngt-group>
-    `,
-                    imports: [NgtArgs],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], propDecorators: { color: [{
-                type: Input
-            }], rotation: [{
-                type: Input
-            }], scale: [{
-                type: Input
-            }] } });
-class NgtsGizmoViewportAxisHead extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.document = inject(DOCUMENT);
-        this.store = inject(NgtStore);
-        this.gl = this.store.get('gl');
+    set _bevelSegments(bevelSegments) {
+        this.inputs.set({ bevelSegments });
     }
-    set arcStyle(arcStyle) {
-        this.set({ arcStyle });
+    set _height(height) {
+        this.inputs.set({ height });
     }
-    set label(label) {
-        this.set({ label });
+    set _size(size) {
+        this.inputs.set({ size });
     }
-    set labelColor(labelColor) {
-        this.set({ labelColor });
+    set _lineHeight(lineHeight) {
+        this.inputs.set({ lineHeight });
     }
-    set axisHeadScale(axisHeadScale) {
-        this.set({ axisHeadScale });
+    set _letterSpacing(letterSpacing) {
+        this.inputs.set({ letterSpacing });
     }
-    set disabled(disabled) {
-        this.set({ disabled });
+    set _smooth(smooth) {
+        this.inputs.set({ smooth });
     }
-    set font(font) {
-        this.set({ font });
-    }
-    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');
-            canvas.width = 64;
-            canvas.height = 64;
-            const context = canvas.getContext('2d');
-            context.beginPath();
-            context.arc(32, 32, 16, 0, 2 * Math.PI);
-            context.closePath();
-            context.fillStyle = arcStyle;
-            context.fill();
-            if (label) {
-                context.font = font;
-                context.textAlign = 'center';
-                context.fillStyle = labelColor;
-                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)));
-    }
-    onPointerOver(event) {
-        if (!this.get('disabled')) {
-            event.stopPropagation();
-            this.set({ active: true });
-        }
-    }
-    onPointerOut(event) {
-        if (!this.get('disabled')) {
-            if (this.get('clickEmitter')?.observed) {
-                this.get('clickEmitter').emit(event);
-            }
-            else {
-                event.stopPropagation();
-                this.set({ active: 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.ɵ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))"
-        >
-            <ngt-sprite-material
-                [map]="get('texture')"
-                [opacity]="get('label') ? 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-sprite-material>
-        </ngt-sprite>
-    `, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsText3D, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NgtsText3D, isStandalone: true, selector: "ngts-text-3d", inputs: { textRef: "textRef", _font: ["font", "_font"], _text: ["text", "_text"], _bevelEnabled: ["bevelEnabled", "_bevelEnabled"], _bevelOffset: ["bevelOffset", "_bevelOffset"], _bevelSize: ["bevelSize", "_bevelSize"], _bevelThickness: ["bevelThickness", "_bevelThickness"], _curveSegments: ["curveSegments", "_curveSegments"], _bevelSegments: ["bevelSegments", "_bevelSegments"], _height: ["height", "_height"], _size: ["size", "_size"], _lineHeight: ["lineHeight", "_lineHeight"], _letterSpacing: ["letterSpacing", "_letterSpacing"], _smooth: ["smooth", "_smooth"] }, 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: "ng-template[args]", inputs: ["args"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewportAxisHead, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsText3D, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngts-gizmo-viewport-axis-head',
+                    selector: 'ngts-text-3d',
                     standalone: true,
                     template: `
-        <ngt-sprite
-            ngtCompound
-            [scale]="get('scale')"
-            (pointerover)="onPointerOver($any($event))"
-            (pointerout)="onPointerOut($any($event))"
-        >
-            <ngt-sprite-material
-                [map]="get('texture')"
-                [opacity]="get('label') ? 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-sprite-material>
-        </ngt-sprite>
-    `,
+		<ngt-mesh ngtCompound [ref]="textRef">
+			<ngt-text-geometry *args="geometryArgs()" />
+			<ng-content />
+		</ngt-mesh>
+	`,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { arcStyle: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], labelColor: [{
-                type: Input
-            }], axisHeadScale: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], font: [{
-                type: Input
-            }], clickEmitter: [{
+        }], propDecorators: { textRef: [{
                 type: Input
+            }], _font: [{
+                type: Input,
+                args: [{ required: true, alias: 'font' }]
+            }], _text: [{
+                type: Input,
+                args: [{ required: true, alias: 'text' }]
+            }], _bevelEnabled: [{
+                type: Input,
+                args: [{ alias: 'bevelEnabled' }]
+            }], _bevelOffset: [{
+                type: Input,
+                args: [{ alias: 'bevelOffset' }]
+            }], _bevelSize: [{
+                type: Input,
+                args: [{ alias: 'bevelSize' }]
+            }], _bevelThickness: [{
+                type: Input,
+                args: [{ alias: 'bevelThickness' }]
+            }], _curveSegments: [{
+                type: Input,
+                args: [{ alias: 'curveSegments' }]
+            }], _bevelSegments: [{
+                type: Input,
+                args: [{ alias: 'bevelSegments' }]
+            }], _height: [{
+                type: Input,
+                args: [{ alias: 'height' }]
+            }], _size: [{
+                type: Input,
+                args: [{ alias: 'size' }]
+            }], _lineHeight: [{
+                type: Input,
+                args: [{ alias: 'lineHeight' }]
+            }], _letterSpacing: [{
+                type: Input,
+                args: [{ alias: 'letterSpacing' }]
+            }], _smooth: [{
+                type: Input,
+                args: [{ alias: 'smooth' }]
             }] } });
 
-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 NgtsText {
+    set text(text) {
+        this.inputs.set({ text });
     }
-    set axisColors(axisColors) {
-        this.set({ axisColors });
+    set font(font) {
+        this.inputs.set({ font });
     }
-    set axisScale(axisScale) {
-        this.set({ axisScale });
+    set fontSize(fontSize) {
+        this.inputs.set({ fontSize });
     }
-    set labels(labels) {
-        this.set({ labels });
+    set anchorX(anchorX) {
+        this.inputs.set({ anchorX });
     }
-    set axisHeadScale(axisHeadScale) {
-        this.set({ axisHeadScale });
+    set anchorY(anchorY) {
+        this.inputs.set({ anchorY });
     }
-    set labelColor(labelColor) {
-        this.set({ labelColor });
+    set sdfGlyphSize(sdfGlyphSize) {
+        this.inputs.set({ sdfGlyphSize });
     }
-    set hideNegativeAxes(hideNegativeAxes) {
-        this.set({ hideNegativeAxes });
+    set characters(characters) {
+        this.inputs.set({ characters });
     }
-    set hideAxisHeads(hideAxisHeads) {
-        this.set({ hideAxisHeads });
+    set color(color) {
+        this.inputs.set({ color });
     }
-    set disabled(disabled) {
-        this.set({ disabled });
+    set maxWidth(maxWidth) {
+        this.inputs.set({ maxWidth });
     }
-    set font(font) {
-        this.set({ font });
-    }
-    initialize() {
-        super.initialize();
-        this.set({
-            font: '18px Inter var, Arial, sans-serif',
-            axisColors: ['#ff2060', '#20df80', '#2080ff'],
-            axisHeadScale: 1,
-            labels: ['X', 'Y', 'Z'],
-            labelColor: '#000',
-        });
+    set lineHeight(lineHeight) {
+        this.inputs.set({ lineHeight });
     }
-    onPointerDown(event) {
-        if (!this.get('disabled')) {
-            event.stopPropagation();
-            this.gizmoHelperApi.tweenCamera(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.ɵ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]"
-                [rotation]="[0, 0, 0]"
-                [scale]="get('axisScale')"
-            ></ngts-gizmo-viewport-axis>
-            <ngts-gizmo-viewport-axis
-                [color]="get('axisColors')[1]"
-                [rotation]="[0, 0, Math.PI / 2]"
-                [scale]="get('axisScale')"
-            ></ngts-gizmo-viewport-axis>
-            <ngts-gizmo-viewport-axis
-                [color]="get('axisColors')[2]"
-                [rotation]="[0, -Math.PI / 2, 0]"
-                [scale]="get('axisScale')"
-            ></ngts-gizmo-viewport-axis>
-            <ng-container *ngIf="!get('hideAxisHeads')">
-                <ngts-gizmo-viewport-axis-head
-                    [arcStyle]="get('axisColors')[0]"
-                    [position]="[1, 0, 0]"
-                    [label]="get('labels')[0]"
-                    [font]="get('font')"
-                    [disabled]="get('disabled')"
-                    [labelColor]="get('labelColor')"
-                    [clickEmitter]="clicked"
-                    [axisHeadScale]="get('axisHeadScale')"
-                    (pointerdown)="onPointerDown($any($event))"
-                ></ngts-gizmo-viewport-axis-head>
-                <ngts-gizmo-viewport-axis-head
-                    [arcStyle]="get('axisColors')[1]"
-                    [position]="[0, 1, 0]"
-                    [label]="get('labels')[1]"
-                    [font]="get('font')"
-                    [disabled]="get('disabled')"
-                    [labelColor]="get('labelColor')"
-                    [clickEmitter]="clicked"
-                    [axisHeadScale]="get('axisHeadScale')"
-                    (pointerdown)="onPointerDown($any($event))"
-                ></ngts-gizmo-viewport-axis-head>
-                <ngts-gizmo-viewport-axis-head
-                    [arcStyle]="get('axisColors')[2]"
-                    [position]="[0, 0, 1]"
-                    [label]="get('labels')[2]"
-                    [font]="get('font')"
-                    [disabled]="get('disabled')"
-                    [labelColor]="get('labelColor')"
-                    [clickEmitter]="clicked"
-                    [axisHeadScale]="get('axisHeadScale')"
-                    (pointerdown)="onPointerDown($any($event))"
-                ></ngts-gizmo-viewport-axis-head>
-                <ng-container *ngIf="!get('hideNegativeAxes')">
-                    <ngts-gizmo-viewport-axis-head
-                        [arcStyle]="get('axisColors')[0]"
-                        [position]="[-1, 0, 0]"
-                        [font]="get('font')"
-                        [disabled]="get('disabled')"
-                        [labelColor]="get('labelColor')"
-                        [clickEmitter]="clicked"
-                        [axisHeadScale]="get('axisHeadScale')"
-                        (pointerdown)="onPointerDown($any($event))"
-                    ></ngts-gizmo-viewport-axis-head>
-                    <ngts-gizmo-viewport-axis-head
-                        [arcStyle]="get('axisColors')[1]"
-                        [position]="[0, -1, 0]"
-                        [font]="get('font')"
-                        [disabled]="get('disabled')"
-                        [labelColor]="get('labelColor')"
-                        [clickEmitter]="clicked"
-                        [axisHeadScale]="get('axisHeadScale')"
-                        (pointerdown)="onPointerDown($any($event))"
-                    ></ngts-gizmo-viewport-axis-head>
-                    <ngts-gizmo-viewport-axis-head
-                        [arcStyle]="get('axisColors')[2]"
-                        [position]="[0, 0, -1]"
-                        [font]="get('font')"
-                        [disabled]="get('disabled')"
-                        [labelColor]="get('labelColor')"
-                        [clickEmitter]="clicked"
-                        [axisHeadScale]="get('axisHeadScale')"
-                        (pointerdown)="onPointerDown($any($event))"
-                    ></ngts-gizmo-viewport-axis-head>
-                </ng-container>
-            </ng-container>
-            <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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewport, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-gizmo-viewport',
-                    standalone: true,
-                    template: `
-        <ngt-group ngtCompound [scale]="40">
-            <ngts-gizmo-viewport-axis
-                [color]="get('axisColors')[0]"
-                [rotation]="[0, 0, 0]"
-                [scale]="get('axisScale')"
-            ></ngts-gizmo-viewport-axis>
-            <ngts-gizmo-viewport-axis
-                [color]="get('axisColors')[1]"
-                [rotation]="[0, 0, Math.PI / 2]"
-                [scale]="get('axisScale')"
-            ></ngts-gizmo-viewport-axis>
-            <ngts-gizmo-viewport-axis
-                [color]="get('axisColors')[2]"
-                [rotation]="[0, -Math.PI / 2, 0]"
-                [scale]="get('axisScale')"
-            ></ngts-gizmo-viewport-axis>
-            <ng-container *ngIf="!get('hideAxisHeads')">
-                <ngts-gizmo-viewport-axis-head
-                    [arcStyle]="get('axisColors')[0]"
-                    [position]="[1, 0, 0]"
-                    [label]="get('labels')[0]"
-                    [font]="get('font')"
-                    [disabled]="get('disabled')"
-                    [labelColor]="get('labelColor')"
-                    [clickEmitter]="clicked"
-                    [axisHeadScale]="get('axisHeadScale')"
-                    (pointerdown)="onPointerDown($any($event))"
-                ></ngts-gizmo-viewport-axis-head>
-                <ngts-gizmo-viewport-axis-head
-                    [arcStyle]="get('axisColors')[1]"
-                    [position]="[0, 1, 0]"
-                    [label]="get('labels')[1]"
-                    [font]="get('font')"
-                    [disabled]="get('disabled')"
-                    [labelColor]="get('labelColor')"
-                    [clickEmitter]="clicked"
-                    [axisHeadScale]="get('axisHeadScale')"
-                    (pointerdown)="onPointerDown($any($event))"
-                ></ngts-gizmo-viewport-axis-head>
-                <ngts-gizmo-viewport-axis-head
-                    [arcStyle]="get('axisColors')[2]"
-                    [position]="[0, 0, 1]"
-                    [label]="get('labels')[2]"
-                    [font]="get('font')"
-                    [disabled]="get('disabled')"
-                    [labelColor]="get('labelColor')"
-                    [clickEmitter]="clicked"
-                    [axisHeadScale]="get('axisHeadScale')"
-                    (pointerdown)="onPointerDown($any($event))"
-                ></ngts-gizmo-viewport-axis-head>
-                <ng-container *ngIf="!get('hideNegativeAxes')">
-                    <ngts-gizmo-viewport-axis-head
-                        [arcStyle]="get('axisColors')[0]"
-                        [position]="[-1, 0, 0]"
-                        [font]="get('font')"
-                        [disabled]="get('disabled')"
-                        [labelColor]="get('labelColor')"
-                        [clickEmitter]="clicked"
-                        [axisHeadScale]="get('axisHeadScale')"
-                        (pointerdown)="onPointerDown($any($event))"
-                    ></ngts-gizmo-viewport-axis-head>
-                    <ngts-gizmo-viewport-axis-head
-                        [arcStyle]="get('axisColors')[1]"
-                        [position]="[0, -1, 0]"
-                        [font]="get('font')"
-                        [disabled]="get('disabled')"
-                        [labelColor]="get('labelColor')"
-                        [clickEmitter]="clicked"
-                        [axisHeadScale]="get('axisHeadScale')"
-                        (pointerdown)="onPointerDown($any($event))"
-                    ></ngts-gizmo-viewport-axis-head>
-                    <ngts-gizmo-viewport-axis-head
-                        [arcStyle]="get('axisColors')[2]"
-                        [position]="[0, 0, -1]"
-                        [font]="get('font')"
-                        [disabled]="get('disabled')"
-                        [labelColor]="get('labelColor')"
-                        [clickEmitter]="clicked"
-                        [axisHeadScale]="get('axisHeadScale')"
-                        (pointerdown)="onPointerDown($any($event))"
-                    ></ngts-gizmo-viewport-axis-head>
-                </ng-container>
-            </ng-container>
-            <ngt-ambient-light intensity="0.5"></ngt-ambient-light>
-            <ngt-point-light position="10" intensity="0.5"></ngt-point-light>
-        </ngt-group>
-    `,
-                    imports: [NgtsGizmoViewportAxis, NgtsGizmoViewportAxisHead, NgIf],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], propDecorators: { axisColors: [{
-                type: Input
-            }], axisScale: [{
-                type: Input
-            }], labels: [{
-                type: Input
-            }], axisHeadScale: [{
-                type: Input
-            }], labelColor: [{
-                type: Input
-            }], hideNegativeAxes: [{
-                type: Input
-            }], hideAxisHeads: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], font: [{
-                type: Input
-            }], clicked: [{
-                type: Output
-            }] } });
-
-const v = new THREE.Vector3();
-class NgtsQuadraticBezierLine extends NgtsLineInput {
-    constructor() {
-        super(...arguments);
-        this.curve = new THREE.QuadraticBezierCurve3(undefined, undefined, undefined);
-        this.lineRef = injectNgtRef();
-    }
-    set start(start) {
-        this.set({ start });
-    }
-    set end(end) {
-        this.set({ end });
-    }
-    set mid(mid) {
-        this.set({ mid });
-    }
-    set segments(segments) {
-        this.set({ segments });
-    }
-    initialize() {
-        super.initialize();
-        this.set({ start: [0, 0, 0], end: [0, 0, 0], segments: 20 });
-    }
-    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) => {
-            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());
-                }
-            };
-        });
+    set letterSpacing(letterSpacing) {
+        this.inputs.set({ letterSpacing });
     }
-    getPoints(start, end, mid, segments = 20) {
-        if (start instanceof THREE.Vector3)
-            this.curve.v0.copy(start);
-        else
-            this.curve.v0.set(...start);
-        if (end instanceof THREE.Vector3)
-            this.curve.v2.copy(end);
-        else
-            this.curve.v2.set(...end);
-        if (mid instanceof THREE.Vector3) {
-            this.curve.v1.copy(mid);
-        }
-        else {
-            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)));
-        }
-        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.ɵ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')"
-        />
-    `, isInline: true, dependencies: [{ kind: "component", type: NgtsLine, selector: "ngts-line[points]", inputs: ["lineRef", "points", "segments"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsQuadraticBezierLine, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-quadratic-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')"
-        />
-    `,
-                    imports: [NgtsLine],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], propDecorators: { lineRef: [{
-                type: Input
-            }], start: [{
-                type: Input
-            }], end: [{
-                type: Input
-            }], mid: [{
-                type: Input
-            }], segments: [{
-                type: Input
-            }] } });
-
-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,
-            },
-        ]));
+    set textAlign(textAlign) {
+        this.inputs.set({ textAlign });
     }
-    set font(font) {
-        this.set({ font });
+    set clipRect(clipRect) {
+        this.inputs.set({ clipRect });
     }
-    set text(text) {
-        this.set({ text });
+    set depthOffset(depthOffset) {
+        this.inputs.set({ depthOffset });
     }
-    set bevelEnabled(bevelEnabled) {
-        this.set({ bevelEnabled });
+    set direction(direction) {
+        this.inputs.set({ direction });
     }
-    set bevelOffset(bevelOffset) {
-        this.set({ bevelOffset });
+    set overflowWrap(overflowWrap) {
+        this.inputs.set({ overflowWrap });
     }
-    set bevelSize(bevelSize) {
-        this.set({ bevelSize });
+    set whiteSpace(whiteSpace) {
+        this.inputs.set({ whiteSpace });
     }
-    set bevelThickness(bevelThickness) {
-        this.set({ bevelThickness });
+    set outlineWidth(outlineWidth) {
+        this.inputs.set({ outlineWidth });
     }
-    set curveSegments(curveSegments) {
-        this.set({ curveSegments });
+    set outlineOffsetX(outlineOffsetX) {
+        this.inputs.set({ outlineOffsetX });
     }
-    set bevelSegments(bevelSegments) {
-        this.set({ bevelSegments });
+    set outlineOffsetY(outlineOffsetY) {
+        this.inputs.set({ outlineOffsetY });
     }
-    set height(height) {
-        this.set({ height });
+    set outlineBlur(outlineBlur) {
+        this.inputs.set({ outlineBlur });
     }
-    set size(size) {
-        this.set({ size });
+    set outlineColor(outlineColor) {
+        this.inputs.set({ outlineColor });
     }
-    set lineHeight(lineHeight) {
-        this.set({ lineHeight });
+    set outlineOpacity(outlineOpacity) {
+        this.inputs.set({ outlineOpacity });
     }
-    set letterSpacing(letterSpacing) {
-        this.set({ letterSpacing });
+    set strokeWidth(strokeWidth) {
+        this.inputs.set({ strokeWidth });
     }
-    initialize() {
-        super.initialize();
-        this.set({
-            letterSpacing: 0,
-            lineHeight: 1,
-            size: 1,
-            height: 0.2,
-            bevelThickness: 0.1,
-            bevelSize: 0.01,
-            bevelEnabled: false,
-            bevelOffset: 0,
-            bevelSegments: 4,
-            curveSegments: 8,
-        });
+    set strokeColor(strokeColor) {
+        this.inputs.set({ strokeColor });
+    }
+    set strokeOpacity(strokeOpacity) {
+        this.inputs.set({ strokeOpacity });
+    }
+    set fillOpacity(fillOpacity) {
+        this.inputs.set({ fillOpacity });
+    }
+    set debugSDF(debugSDF) {
+        this.inputs.set({ debugSDF });
     }
-    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" />
-            <ng-content />
-        </ngt-mesh>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }, { kind: "pipe", type: NgtPush, name: "ngtPush" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsText3D, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-text-3d[font]',
-                    standalone: true,
-                    template: `
-        <ngt-mesh ngtCompound>
-            <ngt-text-geometry *args="geometryArgs$ | ngtPush : null" />
-            <ng-content />
-        </ngt-mesh>
-    `,
-                    imports: [NgtArgs, NgtPush],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], propDecorators: { font: [{
-                type: Input
-            }], text: [{
-                type: Input
-            }], bevelEnabled: [{
-                type: Input
-            }], bevelOffset: [{
-                type: Input
-            }], bevelSize: [{
-                type: Input
-            }], bevelThickness: [{
-                type: Input
-            }], curveSegments: [{
-                type: Input
-            }], bevelSegments: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], lineHeight: [{
-                type: Input
-            }], letterSpacing: [{
-                type: Input
-            }] } });
-
-class NgtsText extends NgtRxStore {
     constructor() {
-        super(...arguments);
+        this.inputs = signalStore({
+            fontSize: 1,
+            sdfGlyphSize: 64,
+            anchorX: 'center',
+            anchorY: 'middle',
+        });
         this.textRef = injectNgtRef();
         this.sync = new EventEmitter();
-        this.store = inject(NgtStore);
         this.troikaText = new Text();
-    }
-    set text(text) {
-        this.set({ text });
-    }
-    set characters(characters) {
-        this.set({ characters });
-    }
-    set font(font) {
-        this.set({ font });
-    }
-    set anchorX(anchorX) {
-        this.set({ anchorX });
-    }
-    set anchorY(anchorY) {
-        this.set({ anchorY });
-    }
-    initialize() {
-        super.initialize();
-        this.set({ anchorX: 'center', anchorY: 'middle', text: '' });
-    }
-    ngOnInit() {
+        this.store = injectNgtStore();
+        inject(DestroyRef).onDestroy(() => {
+            this.troikaText.dispose();
+        });
         this.preloadFont();
         this.syncText();
     }
-    ngOnDestroy() {
-        this.troikaText.dispose();
-        super.ngOnDestroy();
-    }
     preloadFont() {
-        const { font, characters } = this.get();
-        if (font && characters) {
-            preloadFont({ font, characters });
-        }
+        const _font = this.inputs.select('font');
+        const _characters = this.inputs.select('characters');
+        effect(() => {
+            const [font, characters] = [_font(), _characters()];
+            const invalidate = this.store.get('invalidate');
+            preloadFont({ font, characters }, () => invalidate());
+        });
     }
     syncText() {
-        this.hold(this.select(), () => {
-            const invalidate = this.store.get('invalidate');
+        effect(() => {
+            const [invalidate] = [this.store.get('invalidate'), this.inputs.state()];
             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>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsText, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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" }, ngImport: i0, template: `
+		<ngt-primitive
+			ngtCompound
+			*args="[troikaText]"
+			[ref]="textRef"
+			[text]="inputs.state().text"
+			[anchorX]="inputs.state().anchorX"
+			[anchorY]="inputs.state().anchorY"
+			[font]="inputs.state().font"
+			[fontSize]="inputs.state().fontSize"
+			[sdfGlyphSize]="inputs.state().sdfGlyphSize"
+			[characters]="inputs.state().characters"
+			[color]="inputs.state().color"
+			[maxWidth]="inputs.state().maxWidth"
+			[lineHeight]="inputs.state().lineHeight"
+			[letterSpacing]="inputs.state().letterSpacing"
+			[textAlign]="inputs.state().textAlign"
+			[clipRect]="inputs.state().clipRect"
+			[depthOffset]="inputs.state().depthOffset"
+			[direction]="inputs.state().direction"
+			[overflowWrap]="inputs.state().overflowWrap"
+			[whiteSpace]="inputs.state().whiteSpace"
+			[outlineWidth]="inputs.state().outlineWidth"
+			[outlineOffsetX]="inputs.state().outlineOffsetX"
+			[outlineOffsetY]="inputs.state().outlineOffsetY"
+			[outlineBlur]="inputs.state().outlineBlur"
+			[outlineColor]="inputs.state().outlineColor"
+			[outlineOpacity]="inputs.state().outlineOpacity"
+			[strokeWidth]="inputs.state().strokeWidth"
+			[strokeColor]="inputs.state().strokeColor"
+			[strokeOpacity]="inputs.state().strokeOpacity"
+			[fillOpacity]="inputs.state().fillOpacity"
+			[debugSDF]="inputs.state().debugSDF"
+		>
+			<ng-content />
+		</ngt-primitive>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", 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]="inputs.state().text"
+			[anchorX]="inputs.state().anchorX"
+			[anchorY]="inputs.state().anchorY"
+			[font]="inputs.state().font"
+			[fontSize]="inputs.state().fontSize"
+			[sdfGlyphSize]="inputs.state().sdfGlyphSize"
+			[characters]="inputs.state().characters"
+			[color]="inputs.state().color"
+			[maxWidth]="inputs.state().maxWidth"
+			[lineHeight]="inputs.state().lineHeight"
+			[letterSpacing]="inputs.state().letterSpacing"
+			[textAlign]="inputs.state().textAlign"
+			[clipRect]="inputs.state().clipRect"
+			[depthOffset]="inputs.state().depthOffset"
+			[direction]="inputs.state().direction"
+			[overflowWrap]="inputs.state().overflowWrap"
+			[whiteSpace]="inputs.state().whiteSpace"
+			[outlineWidth]="inputs.state().outlineWidth"
+			[outlineOffsetX]="inputs.state().outlineOffsetX"
+			[outlineOffsetY]="inputs.state().outlineOffsetY"
+			[outlineBlur]="inputs.state().outlineBlur"
+			[outlineColor]="inputs.state().outlineColor"
+			[outlineOpacity]="inputs.state().outlineOpacity"
+			[strokeWidth]="inputs.state().strokeWidth"
+			[strokeColor]="inputs.state().strokeColor"
+			[strokeOpacity]="inputs.state().strokeOpacity"
+			[fillOpacity]="inputs.state().fillOpacity"
+			[debugSDF]="inputs.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
             }] } });
@@ -2041,5 +827,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NGTS_GIZMO_HELPER_API, NgtsBillboard, NgtsCatmullRomLine, NgtsCubicBezierLine, NgtsEdges, NgtsGizmoHelper, NgtsGizmoHelperContent, NgtsGizmoViewcube, NgtsGizmoViewport, NgtsLine, NgtsQuadraticBezierLine, NgtsText, NgtsText3D };
+export { NgtsBillboard, NgtsDetailed, NgtsEdges, NgtsGrid, NgtsText, NgtsText3D };
 //# sourceMappingURL=angular-three-soba-abstractions.mjs.map