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

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

@@ -1,35 +1,34 @@
 import * as i0 from '@angular/core';
-import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, computed, Directive, inject, effect, InjectionToken, EventEmitter, TemplateRef, Output, ContentChild, signal, DestroyRef } from '@angular/core';
-import { extend, NgtSignalStore, injectNgtRef, injectBeforeRender, NgtStore, requestAnimationInInjectionContext, NgtArgs, NgtPortal, NgtPortalContent, NgtRepeat } from 'angular-three';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, effect, TemplateRef, ContentChild, inject, ChangeDetectorRef, signal, computed, EventEmitter, 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 { LineSegmentsGeometry, LineGeometry, LineMaterial, LineSegments2, Line2, TextGeometry, FontLoader } from 'three-stdlib';
-import { NgIf, NgTemplateOutlet, DOCUMENT, NgFor } from '@angular/common';
-import { NgtsOrthographicCamera } from 'angular-three-soba/cameras';
-import { toSignal, toObservable } from '@angular/core/rxjs-interop';
-import { switchMap, of, map } from 'rxjs';
+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 { TextGeometry, FontLoader } from 'three-stdlib';
 import { Text, preloadFont } from 'troika-three-text';
 
 extend({ Group });
-class NgtsBillboard extends NgtSignalStore {
-    set follow(follow) {
-        this.set({ follow });
+class NgtsBillboard {
+    set _follow(follow) {
+        this.inputs.set({ follow });
     }
-    set lockX(lockX) {
-        this.set({ lockX });
+    set _lockX(lockX) {
+        this.inputs.set({ lockX });
     }
-    set lockY(lockY) {
-        this.set({ lockY });
+    set _lockY(lockY) {
+        this.inputs.set({ lockY });
     }
-    set lockZ(lockZ) {
-        this.set({ lockZ });
+    set _lockZ(lockZ) {
+        this.inputs.set({ lockZ });
     }
     constructor() {
-        super({ follow: true, lockX: false, lockY: false, lockZ: false });
+        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.get();
+            const { follow, lockX, lockY, lockZ } = this.inputs.get();
             if (!ref || !follow)
                 return;
             // save previous rotation in case we're locking an axis
@@ -45,1839 +44,399 @@ class NgtsBillboard extends NgtSignalStore {
                 ref.rotation.z = prevRotation.z;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsBillboard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsBillboard, isStandalone: true, selector: "ngts-billboard", inputs: { billboardRef: "billboardRef", follow: "follow", lockX: "lockX", lockY: "lockY", lockZ: "lockZ" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-group ngtCompound [ref]="billboardRef">
-            <ng-content />
-        </ngt-group>
-    `, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsBillboard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", 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.2.3", ngImport: i0, type: NgtsBillboard, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-billboard',
                     standalone: true,
                     template: `
-        <ngt-group ngtCompound [ref]="billboardRef">
-            <ng-content />
-        </ngt-group>
-    `,
+		<ngt-group ngtCompound [ref]="billboardRef">
+			<ng-content />
+		</ngt-group>
+	`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { billboardRef: [{
                 type: Input
-            }], follow: [{
-                type: Input
-            }], lockX: [{
-                type: Input
-            }], lockY: [{
-                type: Input
-            }], lockZ: [{
-                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 NgtsLineInputs extends NgtSignalStore {
-    set vertexColors(vertexColors) {
-        this.set({ vertexColors });
-    }
-    set lineWidth(lineWidth) {
-        this.set({ lineWidth });
-    }
-    set alphaToCoverage(alphaToCoverage) {
-        this.set({ alphaToCoverage });
-    }
-    set color(color) {
-        this.set({ color });
+extend({ LOD });
+class NgtsDetailed {
+    set _distances(distances) {
+        this.inputs.set({ distances });
     }
-    set dashed(dashed) {
-        this.set({ dashed });
+    set _hysteresis(hysteresis) {
+        this.inputs.set({ hysteresis });
     }
-    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 });
-    }
-    #color;
-    #vertexColors;
-    #resolution;
-    #linewidth;
-    #alphaToCoverage;
-    #dashed;
-    #dashScale;
-    #dashSize;
-    #dashOffset;
-    #gapSize;
-    #wireframe;
-    #worldUnits;
     constructor() {
-        super({ color: 'black' });
-        this.#color = this.select('color');
-        this.#vertexColors = this.select('vertexColors');
-        this.#resolution = this.select('resolution');
-        this.#linewidth = this.select('lineWidth');
-        this.#alphaToCoverage = this.select('alphaToCoverage');
-        this.#dashed = this.select('dashed');
-        this.#dashScale = this.select('dashScale');
-        this.#dashSize = this.select('dashSize');
-        this.#dashOffset = this.select('dashOffset');
-        this.#gapSize = this.select('gapSize');
-        this.#wireframe = this.select('wireframe');
-        this.#worldUnits = this.select('worldUnits');
-        this.lineParameters = computed(() => ({
-            color: this.#color(),
-            vertexColors: this.#vertexColors(),
-            resolution: this.#resolution(),
-            linewidth: this.#linewidth(),
-            alphaToCoverage: this.#alphaToCoverage(),
-            dashed: this.#dashed(),
-            dashScale: this.#dashScale(),
-            dashSize: this.#dashSize(),
-            dashOffset: this.#dashOffset(),
-            gapSize: this.#gapSize(),
-            wireframe: this.#wireframe(),
-            worldUnits: this.#worldUnits(),
-        }));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsLineInputs, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtsLineInputs, inputs: { vertexColors: "vertexColors", lineWidth: "lineWidth", alphaToCoverage: "alphaToCoverage", color: "color", dashed: "dashed", dashScale: "dashScale", dashSize: "dashSize", dashOffset: "dashOffset", gapSize: "gapSize", resolution: "resolution", wireframe: "wireframe", worldUnits: "worldUnits" }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsLineInputs, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return []; }, 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 NgtsLineInputs {
-    set points(points) {
-        this.set({ points });
-    }
-    set segments(segments) {
-        this.set({ segments });
-    }
-    #store;
-    #size;
-    #lineResolution;
-    #resolution;
-    #points;
-    #pointValues;
-    #vertexColors;
-    #vertexColorValues;
-    #segments;
-    constructor() {
-        super();
-        this.lineRef = injectNgtRef();
-        this.#store = inject(NgtStore);
-        this.#size = this.#store.select('size');
-        this.#lineResolution = this.select('resolution');
-        this.#resolution = computed(() => this.#lineResolution() ? this.#lineResolution() : [this.#size().width, this.#size().height]);
-        this.#points = this.select('points');
-        this.#pointValues = computed(() => this.#points().map((p) => {
-            const isArray = Array.isArray(p);
-            return p instanceof THREE.Vector3
-                ? [p.x, p.y, p.z]
-                : p instanceof THREE.Vector2
-                    ? [p.x, p.y, 0]
-                    : isArray && p.length === 3
-                        ? [p[0], p[1], p[2]]
-                        : isArray && p.length === 2
-                            ? [p[0], p[1], 0]
-                            : p;
-        }));
-        this.#vertexColors = this.select('vertexColors');
-        this.#vertexColorValues = computed(() => (this.#vertexColors() || []).map((c) => (c instanceof THREE.Color ? c.toArray() : c)));
-        this.#segments = this.select('segments');
-        this.lineGeometry = computed(() => {
-            const pointValues = this.#pointValues();
-            const vertexColors = this.#vertexColorValues();
-            const geometry = this.#segments() ? new LineSegmentsGeometry() : new LineGeometry();
-            geometry.setPositions(pointValues.flat());
-            if (vertexColors.length) {
-                geometry.setColors(vertexColors.flat());
-            }
-            return geometry;
-        });
-        this.lineMaterial = new LineMaterial();
-        this.line = computed(() => (this.#segments() ? new LineSegments2() : new Line2()));
-        this.lineMaterialParameters = computed(() => {
-            const parameters = this.lineParameters();
-            const resolution = this.#resolution();
-            const vertexColors = Boolean(parameters.vertexColors);
-            if (vertexColors) {
-                parameters.color = undefined;
-            }
-            return {
-                ...parameters,
-                vertexColors,
-                resolution,
-                dashScale: parameters.dashScale ?? this.lineMaterial.dashScale,
-                dashSize: parameters.dashSize ?? this.lineMaterial.dashSize,
-                dashOffset: parameters.dashOffset ?? this.lineMaterial.dashOffset,
-                gapSize: parameters.gapSize ?? this.lineMaterial.gapSize,
-                wireframe: parameters.wireframe ?? this.lineMaterial.wireframe,
-                worldUnits: parameters.worldUnits ?? this.lineMaterial.worldUnits,
-            };
-        });
-        this.set({ segments: false });
-        requestAnimationInInjectionContext(() => {
-            this.#disposeGeometry();
-            this.#computeLineDistances();
-        });
+        this.inputs = signalStore({ hysteresis: 0 });
+        this.lodRef = injectNgtRef();
+        this.updateChildren();
     }
-    #computeLineDistances() {
-        const points = this.select('points');
-        const trigger = computed(() => {
-            const lineGeometry = this.lineGeometry();
-            const line = this.lineRef.nativeElement;
-            const children = this.lineRef.children('nonObjects');
-            return { points: points(), lineGeometry, line, children: children() };
-        });
+    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 { line } = trigger();
-            if (!line)
+            const lod = this.lodRef.nativeElement;
+            if (!lod)
                 return;
-            line.computeLineDistances();
-        });
-    }
-    #disposeGeometry() {
-        effect((onCleanup) => {
-            const lineGeometry = this.lineGeometry();
-            onCleanup(() => lineGeometry.dispose());
+            const [distances, hysteresis, children] = [_distances(), _hysteresis(), lodChildren()];
+            lod.levels.length = 0;
+            children.forEach((child, index) => {
+                lod.addLevel(child, distances[index], hysteresis);
+            });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsLine, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsLine, isStandalone: true, selector: "ngts-line", inputs: { lineRef: "lineRef", points: "points", segments: "segments" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-primitive *args="[line()]" [ref]="lineRef" ngtCompound>
-            <ngt-primitive *args="[lineGeometry()]" attach="geometry" />
-            <ngt-primitive
-                *args="[lineMaterial]"
-                attach="material"
-                [resolution]="lineMaterialParameters().resolution"
-                [color]="lineMaterialParameters().color"
-                [vertexColors]="lineMaterialParameters().vertexColors"
-                [linewidth]="lineMaterialParameters().linewidth"
-                [alphaToCoverage]="lineMaterialParameters().alphaToCoverage"
-                [dashed]="lineMaterialParameters().dashed"
-                [dashScale]="lineMaterialParameters().dashScale"
-                [dashSize]="lineMaterialParameters().dashSize"
-                [dashOffset]="lineMaterialParameters().dashOffset"
-                [gapSize]="lineMaterialParameters().gapSize"
-                [wireframe]="lineMaterialParameters().wireframe"
-                [worldUnits]="lineMaterialParameters().worldUnits"
-            />
-        </ngt-primitive>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsLine, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-line',
-                    standalone: true,
-                    template: `
-        <ngt-primitive *args="[line()]" [ref]="lineRef" ngtCompound>
-            <ngt-primitive *args="[lineGeometry()]" attach="geometry" />
-            <ngt-primitive
-                *args="[lineMaterial]"
-                attach="material"
-                [resolution]="lineMaterialParameters().resolution"
-                [color]="lineMaterialParameters().color"
-                [vertexColors]="lineMaterialParameters().vertexColors"
-                [linewidth]="lineMaterialParameters().linewidth"
-                [alphaToCoverage]="lineMaterialParameters().alphaToCoverage"
-                [dashed]="lineMaterialParameters().dashed"
-                [dashScale]="lineMaterialParameters().dashScale"
-                [dashSize]="lineMaterialParameters().dashSize"
-                [dashOffset]="lineMaterialParameters().dashOffset"
-                [gapSize]="lineMaterialParameters().gapSize"
-                [wireframe]="lineMaterialParameters().wireframe"
-                [worldUnits]="lineMaterialParameters().worldUnits"
-            />
-        </ngt-primitive>
-    `,
-                    imports: [NgtArgs],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { lineRef: [{
-                type: Input
-            }], points: [{
-                type: Input,
-                args: [{ required: true }]
-            }], segments: [{
-                type: Input
-            }] } });
-
-class NgtsCatmullRomLine extends NgtsLineInputs {
-    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 });
-    }
-    #points;
-    #closed;
-    #curveType;
-    #tension;
-    #vertexColors;
-    #curve;
-    #segments;
-    constructor() {
-        super();
-        this.lineRef = injectNgtRef();
-        this.#points = this.select('points');
-        this.#closed = this.select('closed');
-        this.#curveType = this.select('curveType');
-        this.#tension = this.select('tension');
-        this.#vertexColors = this.select('vertexColors');
-        this.#curve = computed(() => {
-            const mappedPoints = this.#points().map((p) => p instanceof THREE.Vector3 ? p : new THREE.Vector3(...p));
-            return new CatmullRomCurve3(mappedPoints, this.#closed(), this.#curveType(), this.#tension());
-        });
-        this.#segments = this.select('segments');
-        this.segmentedPoints = computed(() => {
-            const curve = this.#curve();
-            return curve.getPoints(this.#segments());
-        });
-        this.interpolatedVertexColors = computed(() => {
-            const vertexColors = this.#vertexColors();
-            const segments = this.#segments();
-            if (!vertexColors || vertexColors.length < 2)
-                return undefined;
-            if (vertexColors.length === segments + 1)
-                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]);
-            return iColors;
-        });
-        this.set({ closed: false, curveType: 'centripetal', tension: 0.5, segments: 64 });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsCatmullRomLine, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsCatmullRomLine, isStandalone: true, selector: "ngts-catmull-rom-line", inputs: { lineRef: "lineRef", points: "points", closed: "closed", curveType: "curveType", tension: "tension", segments: "segments" }, usesInheritance: true, ngImport: i0, template: `
-        <ngts-line
-            [lineRef]="lineRef"
-            [points]="segmentedPoints()"
-            [vertexColors]="interpolatedVertexColors()"
-            [color]="lineParameters().color"
-            [resolution]="lineParameters().resolution"
-            [lineWidth]="lineParameters().linewidth"
-            [alphaToCoverage]="lineParameters().alphaToCoverage"
-            [dashed]="lineParameters().dashed"
-            [dashScale]="lineParameters().dashScale"
-            [dashSize]="lineParameters().dashSize"
-            [dashOffset]="lineParameters().dashOffset"
-            [gapSize]="lineParameters().gapSize"
-            [wireframe]="lineParameters().wireframe"
-            [worldUnits]="lineParameters().worldUnits"
-        />
-    `, isInline: true, dependencies: [{ kind: "component", type: NgtsLine, selector: "ngts-line", inputs: ["lineRef", "points", "segments"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsDetailed, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", 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: NgtsCatmullRomLine, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsDetailed, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngts-catmull-rom-line',
+                    selector: 'ngts-detailed',
                     standalone: true,
                     template: `
-        <ngts-line
-            [lineRef]="lineRef"
-            [points]="segmentedPoints()"
-            [vertexColors]="interpolatedVertexColors()"
-            [color]="lineParameters().color"
-            [resolution]="lineParameters().resolution"
-            [lineWidth]="lineParameters().linewidth"
-            [alphaToCoverage]="lineParameters().alphaToCoverage"
-            [dashed]="lineParameters().dashed"
-            [dashScale]="lineParameters().dashScale"
-            [dashSize]="lineParameters().dashSize"
-            [dashOffset]="lineParameters().dashOffset"
-            [gapSize]="lineParameters().gapSize"
-            [wireframe]="lineParameters().wireframe"
-            [worldUnits]="lineParameters().worldUnits"
-        />
-    `,
-                    imports: [NgtsLine],
+		<ngt-lOD ngtCompound [ref]="lodRef" (beforeRender)="onBeforeRender($event)">
+			<ng-content />
+		</ngt-lOD>
+	`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { lineRef: [{
-                type: Input
-            }], points: [{
-                type: Input,
-                args: [{ required: true }]
-            }], closed: [{
-                type: Input
-            }], curveType: [{
-                type: Input
-            }], tension: [{
-                type: Input
-            }], segments: [{
-                type: Input
-            }] } });
-
-class NgtsCubicBezierLine extends NgtsLineInputs {
-    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 });
-    }
-    #start;
-    #end;
-    #midA;
-    #midB;
-    #segments;
-    constructor() {
-        super();
-        this.lineRef = injectNgtRef();
-        this.#start = this.select('start');
-        this.#end = this.select('end');
-        this.#midA = this.select('midA');
-        this.#midB = this.select('midB');
-        this.#segments = this.select('segments');
-        this.points = computed(() => {
-            const start = this.#start();
-            const end = this.#end();
-            const midA = this.#midA();
-            const midB = this.#midB();
-            const segments = this.#segments();
-            const startV = start instanceof THREE.Vector3 ? start : new THREE.Vector3(...start);
-            const endV = end instanceof THREE.Vector3 ? end : new THREE.Vector3(...end);
-            const midAV = midA instanceof THREE.Vector3 ? midA : new THREE.Vector3(...midA);
-            const midBV = midB instanceof THREE.Vector3 ? midB : new THREE.Vector3(...midB);
-            return new THREE.CubicBezierCurve3(startV, midAV, midBV, endV).getPoints(segments);
-        });
-        this.set({ segments: 10 });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsCubicBezierLine, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsCubicBezierLine, isStandalone: true, selector: "ngts-cubic-bezier-line", inputs: { lineRef: "lineRef", start: "start", end: "end", midA: "midA", midB: "midB", segments: "segments" }, usesInheritance: true, ngImport: i0, template: `
-        <ngts-line
-            [lineRef]="lineRef"
-            [points]="points()"
-            [color]="lineParameters().color"
-            [vertexColors]="lineParameters().vertexColors"
-            [resolution]="lineParameters().resolution"
-            [lineWidth]="lineParameters().linewidth"
-            [alphaToCoverage]="lineParameters().alphaToCoverage"
-            [dashed]="lineParameters().dashed"
-            [dashScale]="lineParameters().dashScale"
-            [dashSize]="lineParameters().dashSize"
-            [dashOffset]="lineParameters().dashOffset"
-            [gapSize]="lineParameters().gapSize"
-            [wireframe]="lineParameters().wireframe"
-            [worldUnits]="lineParameters().worldUnits"
-        />
-    `, isInline: true, dependencies: [{ kind: "component", type: NgtsLine, selector: "ngts-line", 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',
-                    standalone: true,
-                    template: `
-        <ngts-line
-            [lineRef]="lineRef"
-            [points]="points()"
-            [color]="lineParameters().color"
-            [vertexColors]="lineParameters().vertexColors"
-            [resolution]="lineParameters().resolution"
-            [lineWidth]="lineParameters().linewidth"
-            [alphaToCoverage]="lineParameters().alphaToCoverage"
-            [dashed]="lineParameters().dashed"
-            [dashScale]="lineParameters().dashScale"
-            [dashSize]="lineParameters().dashSize"
-            [dashOffset]="lineParameters().dashOffset"
-            [gapSize]="lineParameters().gapSize"
-            [wireframe]="lineParameters().wireframe"
-            [worldUnits]="lineParameters().worldUnits"
-        />
-    `,
-                    imports: [NgtsLine],
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { lineRef: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { lodRef: [{
                 type: Input
-            }], start: [{
-                type: Input,
-                args: [{ required: true }]
-            }], end: [{
-                type: Input,
-                args: [{ required: true }]
-            }], midA: [{
+            }], _distances: [{
                 type: Input,
-                args: [{ required: true }]
-            }], midB: [{
+                args: [{ required: true, alias: 'distances' }]
+            }], _hysteresis: [{
                 type: Input,
-                args: [{ required: true }]
-            }], segments: [{
-                type: Input
+                args: [{ alias: 'hysteresis' }]
             }] } });
 
 extend({ LineSegments, LineBasicMaterial });
-class NgtsEdges extends NgtSignalStore {
-    set threshold(threshold) {
-        this.set({ threshold });
+class NgtsEdges {
+    set _threshold(threshold) {
+        this.inputs.set({ threshold });
     }
-    set color(color) {
-        this.set({ color });
+    set _color(color) {
+        this.inputs.set({ color });
     }
-    set geometry(geometry) {
-        this.set({ geometry });
+    set _geometry(geometry) {
+        this.inputs.set({ geometry });
     }
-    set userData(userData) {
-        this.set({ userData });
+    set _userData(userData) {
+        this.inputs.set({ userData });
     }
     constructor() {
-        super({
-            threshold: 15,
-            color: 'black',
-            userData: {},
-        });
+        this.nullRaycast = () => null;
+        this.inputs = signalStore({ threshold: 15, color: 'black' });
         this.edgesRef = injectNgtRef();
-        this.withChildren = false;
-        this.noop = () => null;
-        this.#setupGeometry();
-    }
-    #setupGeometry() {
+        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 = edges.parent;
+            const parent = this.edgesRef.nativeElement.parent;
             if (parent) {
-                const geom = this.get('geometry') || parent.geometry;
-                const threshold = this.get('threshold');
-                if (geom !== edges.userData['currentGeom'] || threshold !== edges.userData['currentThreshold']) {
-                    edges.userData['currentGeom'] = geom;
+                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(geom, 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: [], 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.2.3", ngImport: i0, type: NgtsEdges, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", 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.2.3", 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],
+		<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],
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { edgesRef: [{
-                type: Input
-            }], threshold: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], geometry: [{
-                type: Input
-            }], userData: [{
-                type: Input
-            }], withChildren: [{
-                type: Input
-            }] } });
-
-const isOrbitControls = (controls) => 'minPolarAngle' in controls;
-const NGTS_GIZMO_HELPER_API = new InjectionToken('NgtsGizmoHelper API');
-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 NgtSignalStore {
-    set alignment(alignment) {
-        this.set({ alignment });
-    }
-    set margin(margin) {
-        this.set({ margin });
-    }
-    set renderPriority(renderPriority) {
-        this.set({ renderPriority });
-    }
-    set autoClear(autoClear) {
-        this.set({ autoClear });
-    }
-    #store;
-    #camera;
-    #size;
-    #alignment;
-    #margin;
-    #animating;
-    #radius;
-    #focusPoint;
-    #q1;
-    #q2;
-    #target;
-    #targetPosition;
-    #dummy;
-    #defaultUp;
-    #turnRate; // turn rate in angles per sec
-    #matrix;
-    constructor() {
-        super({ alignment: 'bottom-right', margin: [80, 80], renderPriority: 1 });
-        this.gizmoRef = injectNgtRef();
-        this.virtualCameraRef = injectNgtRef();
-        this.updated = new EventEmitter();
-        this.#store = inject(NgtStore);
-        this.#camera = this.#store.select('camera');
-        this.#size = this.#store.select('size');
-        this.#alignment = this.select('alignment');
-        this.#margin = this.select('margin');
-        this.#animating = false;
-        this.#radius = 0;
-        this.#focusPoint = new Vector3(0, 0, 0);
-        this.#q1 = new Quaternion();
-        this.#q2 = new Quaternion();
-        this.#target = new Vector3();
-        this.#targetPosition = new Vector3();
-        this.#dummy = new Object3D();
-        this.#defaultUp = new Vector3(0, 0, 0);
-        this.#turnRate = 2 * Math.PI; // turn rate in angles per sec
-        this.#matrix = new Matrix4();
-        this.priority = this.select('renderPriority');
-        this.position = computed(() => {
-            const size = this.#size();
-            const alignment = this.#alignment();
-            const margin = this.#margin();
-            const [marginX, marginY] = margin;
-            const x = alignment.endsWith('-center')
-                ? 0
-                : alignment.endsWith('-left')
-                    ? -size.width / 2 + marginX
-                    : size.width / 2 - marginX;
-            const y = alignment.startsWith('center-')
-                ? 0
-                : alignment.startsWith('top-')
-                    ? size.height / 2 - marginY
-                    : -size.height / 2 + marginY;
-            return [x, y, 0];
-        });
-        this.api = computed(() => (direction) => {
-            const { controls, camera, invalidate } = this.#store.get();
-            const defaultControls = controls;
-            this.#animating = true;
-            if (defaultControls)
-                this.#focusPoint = defaultControls.target;
-            this.#radius = camera.position.distanceTo(this.#target);
-            // rotate from current camera orientation
-            this.#q1.copy(camera.quaternion);
-            // to new current camera orientation
-            this.#targetPosition.copy(direction).multiplyScalar(this.#radius).add(this.#target);
-            this.#dummy.lookAt(this.#targetPosition);
-            this.#q2.copy(this.#dummy.quaternion);
-            invalidate();
-        });
-        this.#updateDefaultUp();
-    }
-    onBeforeRender(delta) {
-        if (this.virtualCameraRef.nativeElement && this.gizmoRef.nativeElement) {
-            const { controls, camera: mainCamera, invalidate } = this.#store.get();
-            const 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);
-        }
-    }
-    #updateDefaultUp() {
-        effect(() => {
-            const camera = this.#camera();
-            if (!camera)
-                return;
-            this.#defaultUp.copy(camera.up);
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoHelper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsGizmoHelper, isStandalone: true, selector: "ngts-gizmo-helper", inputs: { alignment: "alignment", margin: "margin", renderPriority: "renderPriority", autoClear: "autoClear" }, outputs: { updated: "updated" }, providers: [
-            { provide: NGTS_GIZMO_HELPER_API, useFactory: (gizmo) => gizmo.api, deps: [NgtsGizmoHelper] },
-        ], queries: [{ propertyName: "gizmoHelperContent", first: true, predicate: NgtsGizmoHelperContent, descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: `
-        <ngt-portal [renderPriority]="priority()">
-            <ng-template ngtPortalContent>
-                <ngts-orthographic-camera
-                    [cameraRef]="virtualCameraRef"
-                    [makeDefault]="true"
-                    [position]="[0, 0, 200]"
-                />
-                <ngt-group [ref]="gizmoRef" [position]="position()" (beforeRender)="onBeforeRender($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]="priority()">
-            <ng-template ngtPortalContent>
-                <ngts-orthographic-camera
-                    [cameraRef]="virtualCameraRef"
-                    [makeDefault]="true"
-                    [position]="[0, 0, 200]"
-                />
-                <ngt-group [ref]="gizmoRef" [position]="position()" (beforeRender)="onBeforeRender($event.state.delta)">
-                    <ng-container *ngTemplateOutlet="gizmoHelperContent" />
-                </ngt-group>
-            </ng-template>
-        </ngt-portal>
-    `,
-                    imports: [NgtPortal, NgtPortalContent, NgtsOrthographicCamera, NgTemplateOutlet],
-                    providers: [
-                        { provide: NGTS_GIZMO_HELPER_API, useFactory: (gizmo) => gizmo.api, deps: [NgtsGizmoHelper] },
-                    ],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], ctorParameters: function () { return []; }, 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 }]
-            }] } });
-
-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 NgtSignalStore {
-    constructor() {
-        super(...arguments);
-        this.viewcubeHoverColor = this.select('hoverColor');
-        this.viewcubeOpacity = this.select('opacity');
-        this.viewcubeTextColor = this.select('textColor');
-        this.viewcubeStrokeColor = this.select('strokeColor');
-        this.viewcubeFaces = this.select('faces');
-        this.viewcubeFont = this.select('font');
-        this.viewcubeColor = this.select('color');
-    }
-    set opacity(opacity) {
-        this.set({ opacity });
-    }
-    set hoverColor(hoverColor) {
-        this.set({ hoverColor });
-    }
-    set textColor(textColor) {
-        this.set({ textColor });
-    }
-    set strokeColor(strokeColor) {
-        this.set({ strokeColor });
-    }
-    set faces(faces) {
-        this.set({ faces });
-    }
-    set font(font) {
-        this.set({ font });
-    }
-    set color(color) {
-        this.set({ color });
-    }
-    set clickEmitter(clickEmitter) {
-        this.set({ clickEmitter });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcubeInputs, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtsGizmoViewcubeInputs, inputs: { opacity: "opacity", hoverColor: "hoverColor", textColor: "textColor", strokeColor: "strokeColor", faces: "faces", font: "font", color: "color", clickEmitter: "clickEmitter" }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcubeInputs, decorators: [{
-            type: Directive
-        }], propDecorators: { opacity: [{
-                type: Input
-            }], hoverColor: [{
-                type: Input
-            }], textColor: [{
-                type: Input
-            }], strokeColor: [{
-                type: Input
-            }], faces: [{
-                type: Input
-            }], font: [{
-                type: Input
-            }], color: [{
+                args: [NgtsSobaContent, { read: TemplateRef }]
+            }], edgesRef: [{
                 type: Input
-            }], clickEmitter: [{
-                type: Input
-            }] } });
-
-extend({ Mesh, BoxGeometry, MeshBasicMaterial });
-class NgtsGizmoViewcubeEdgeCube extends NgtSignalStore {
-    #gizmoHelperApi;
-    set dimensions(dimensions) {
-        this.set({ dimensions });
-    }
-    set position(position) {
-        this.set({ position });
-    }
-    constructor() {
-        super();
-        this.#gizmoHelperApi = inject(NGTS_GIZMO_HELPER_API);
-        this.viewcubeInputs = inject(NgtsGizmoViewcubeInputs);
-        this.hover = signal(false);
-        this.edgePosition = this.select('position');
-        this.edgeDimensions = this.select('dimensions');
-        this.viewcubeInputs.patch({ hoverColor: colors.hover });
-    }
-    onPointerMove(event) {
-        event.stopPropagation();
-        this.hover.set(true);
-    }
-    onPointerOut(event) {
-        event.stopPropagation();
-        this.hover.set(false);
-    }
-    onClick(event) {
-        if (this.viewcubeInputs.get('clickEmitter')?.observed) {
-            this.viewcubeInputs.get('clickEmitter').emit(event);
-        }
-        else {
-            event.stopPropagation();
-            this.#gizmoHelperApi()(this.get('position'));
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcubeEdgeCube, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsGizmoViewcubeEdgeCube, isStandalone: true, selector: "ngts-gizmo-viewcube-edge-cube", inputs: { dimensions: "dimensions", position: "position" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-mesh
-            [scale]="1.01"
-            [position]="edgePosition()"
-            (pointermove)="onPointerMove($event)"
-            (pointerout)="onPointerOut($event)"
-            (click)="onClick($event)"
-        >
-            <ngt-box-geometry *args="edgeDimensions()" />
-            <ngt-mesh-basic-material
-                [color]="hover() ? viewcubeInputs.viewcubeHoverColor() : 'white'"
-                [transparent]="true"
-                [opacity]="0.6"
-                [visible]="hover()"
-            />
-        </ngt-mesh>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcubeEdgeCube, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-gizmo-viewcube-edge-cube',
-                    standalone: true,
-                    template: `
-        <ngt-mesh
-            [scale]="1.01"
-            [position]="edgePosition()"
-            (pointermove)="onPointerMove($event)"
-            (pointerout)="onPointerOut($event)"
-            (click)="onClick($event)"
-        >
-            <ngt-box-geometry *args="edgeDimensions()" />
-            <ngt-mesh-basic-material
-                [color]="hover() ? viewcubeInputs.viewcubeHoverColor() : 'white'"
-                [transparent]="true"
-                [opacity]="0.6"
-                [visible]="hover()"
-            />
-        </ngt-mesh>
-    `,
-                    imports: [NgtArgs],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { dimensions: [{
+            }], _threshold: [{
                 type: Input,
-                args: [{ required: true }]
-            }], position: [{
+                args: [{ alias: 'threshold' }]
+            }], _color: [{
                 type: Input,
-                args: [{ required: true }]
-            }] } });
-
-extend({ MeshLambertMaterial, Mesh, BoxGeometry });
-class NgtsGizmoViewcubeFaceMaterial extends NgtSignalStore {
-    #document;
-    #store;
-    set index(index) {
-        this.set({ index });
-    }
-    set hover(hover) {
-        this.set({ hover });
-    }
-    constructor() {
-        super();
-        this.#document = inject(DOCUMENT);
-        this.#store = inject(NgtStore);
-        this.gl = this.#store.select('gl');
-        this.viewcubeInputs = inject(NgtsGizmoViewcubeInputs);
-        this.faceIndex = this.select('index');
-        this.faceHover = this.select('hover');
-        this.texture = computed(() => {
-            const index = this.faceIndex();
-            const color = this.viewcubeInputs.viewcubeColor();
-            const font = this.viewcubeInputs.viewcubeFont();
-            const faces = this.viewcubeInputs.viewcubeFaces();
-            const textColor = this.viewcubeInputs.viewcubeTextColor();
-            const strokeColor = this.viewcubeInputs.viewcubeStrokeColor();
-            const canvas = this.#document.createElement('canvas');
-            canvas.width = 128;
-            canvas.height = 128;
-            const context = canvas.getContext('2d');
-            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);
-        });
-        this.viewcubeInputs.patch({
-            color: colors.bg,
-            font: '20px Inter var, Arial, sans-serif',
-            faces: defaultFaces,
-            hoverColor: colors.hover,
-            textColor: colors.text,
-            strokeColor: colors.stroke,
-            opacity: 1,
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcubeFaceMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsGizmoViewcubeFaceMaterial, isStandalone: true, selector: "ngts-gizmo-viewcube-face-material", inputs: { index: "index", hover: "hover" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-mesh-lambert-material
-            [attach]="['material', faceIndex()]"
-            [map]="texture()"
-            [color]="faceHover() ? viewcubeInputs.viewcubeHoverColor() : viewcubeInputs.viewcubeColor()"
-            [opacity]="viewcubeInputs.viewcubeOpacity()"
-            [transparent]="true"
-        >
-            <ngt-value [rawValue]="gl().outputEncoding" attach="map.encoding" />
-            <ngt-value [rawValue]="gl().capabilities.getMaxAnisotropy() || 1" attach="map.anisotrophy" />
-        </ngt-mesh-lambert-material>
-    `, isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcubeFaceMaterial, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-gizmo-viewcube-face-material',
-                    standalone: true,
-                    template: `
-        <ngt-mesh-lambert-material
-            [attach]="['material', faceIndex()]"
-            [map]="texture()"
-            [color]="faceHover() ? viewcubeInputs.viewcubeHoverColor() : viewcubeInputs.viewcubeColor()"
-            [opacity]="viewcubeInputs.viewcubeOpacity()"
-            [transparent]="true"
-        >
-            <ngt-value [rawValue]="gl().outputEncoding" attach="map.encoding" />
-            <ngt-value [rawValue]="gl().capabilities.getMaxAnisotropy() || 1" attach="map.anisotrophy" />
-        </ngt-mesh-lambert-material>
-    `,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { index: [{
+                args: [{ alias: 'color' }]
+            }], _geometry: [{
                 type: Input,
-                args: [{ required: true }]
-            }], hover: [{
+                args: [{ alias: 'geometry' }]
+            }], _userData: [{
                 type: Input,
-                args: [{ required: true }]
+                args: [{ alias: 'userData' }]
             }] } });
-class NgtsGizmoViewcubeFaceCube {
-    constructor() {
-        this.#gizmoHelperApi = inject(NGTS_GIZMO_HELPER_API);
-        this.viewcubeInputs = inject(NgtsGizmoViewcubeInputs);
-        this.hover = signal(-1);
-    }
-    #gizmoHelperApi;
-    onPointerMove(event) {
-        event.stopPropagation();
-        this.hover.set(Math.floor(event.faceIndex / 2));
-    }
-    onPointerOut(event) {
-        event.stopPropagation();
-        this.hover.set(-1);
-    }
-    onClick(event) {
-        if (this.viewcubeInputs.get('clickEmitter')?.observed) {
-            this.viewcubeInputs.get('clickEmitter').emit(event);
-        }
-        else {
-            event.stopPropagation();
-            this.#gizmoHelperApi()(event.face.normal);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcubeFaceCube, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsGizmoViewcubeFaceCube, isStandalone: true, selector: "ngts-gizmo-viewcube-face-cube", ngImport: i0, template: `
-        <ngt-mesh
-            (pointermove)="onPointerMove($any($event))"
-            (pointerout)="onPointerOut($any($event))"
-            (click)="onClick($any($event))"
-        >
-            <ngt-box-geometry />
-            <ngts-gizmo-viewcube-face-material *ngFor="let i; repeat: 6" [hover]="hover() === i" [index]="i" />
-        </ngt-mesh>
-    `, isInline: true, dependencies: [{ kind: "component", type: NgtsGizmoViewcubeFaceMaterial, selector: "ngts-gizmo-viewcube-face-material", inputs: ["index", "hover"] }, { kind: "directive", type: NgtRepeat, selector: "[ngFor][ngForRepeat]", inputs: ["ngForRepeat"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcubeFaceCube, decorators: [{
-            type: Component,
-            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" />
-        </ngt-mesh>
-    `,
-                    imports: [NgtsGizmoViewcubeFaceMaterial, NgtRepeat],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }] });
 
-extend({ Group, AmbientLight, PointLight });
-class NgtsGizmoViewcube extends NgtsGizmoViewcubeInputs {
-    constructor() {
-        super();
-        this.edges = edges;
-        this.edgeDimensions = edgeDimensions;
-        this.corners = corners;
-        this.cornerDimensions = cornerDimensions;
-        this.clicked = new EventEmitter();
-        requestAnimationInInjectionContext(() => {
-            if (this.clicked.observed) {
-                this.set({ clickEmitter: this.clicked });
-            }
-        });
+extend({ GridMaterial, Mesh, PlaneGeometry });
+class NgtsGrid {
+    set _cellSize(cellSize) {
+        this.inputs.set({ cellSize });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcube, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsGizmoViewcube, isStandalone: true, selector: "ngts-gizmo-viewcube", outputs: { clicked: "clicked" }, providers: [{ provide: NgtsGizmoViewcubeInputs, useExisting: NgtsGizmoViewcube }], usesInheritance: true, ngImport: i0, template: `
-        <ngt-group [scale]="60">
-            <ngts-gizmo-viewcube-face-cube />
-
-            <ngts-gizmo-viewcube-edge-cube
-                *ngFor="let edge of edges; let i = index"
-                [position]="edge"
-                [dimensions]="edgeDimensions[i]"
-            />
-
-            <ngts-gizmo-viewcube-edge-cube
-                *ngFor="let corner of corners"
-                [position]="corner"
-                [dimensions]="cornerDimensions"
-            />
-
-            <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", inputs: ["dimensions", "position"] }, { kind: "component", type: NgtsGizmoViewcubeFaceCube, selector: "ngts-gizmo-viewcube-face-cube" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcube, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-gizmo-viewcube',
-                    standalone: true,
-                    template: `
-        <ngt-group [scale]="60">
-            <ngts-gizmo-viewcube-face-cube />
-
-            <ngts-gizmo-viewcube-edge-cube
-                *ngFor="let edge of edges; let i = index"
-                [position]="edge"
-                [dimensions]="edgeDimensions[i]"
-            />
-
-            <ngts-gizmo-viewcube-edge-cube
-                *ngFor="let corner of corners"
-                [position]="corner"
-                [dimensions]="cornerDimensions"
-            />
-
-            <ngt-ambient-light [intensity]="0.5" />
-            <ngt-point-light [position]="10" [intensity]="0.5" />
-        </ngt-group>
-    `,
-                    imports: [NgtsGizmoViewcubeEdgeCube, NgtsGizmoViewcubeFaceCube, NgFor],
-                    providers: [{ provide: NgtsGizmoViewcubeInputs, useExisting: NgtsGizmoViewcube }],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { clicked: [{
-                type: Output
-            }] } });
-
-extend({ Group, Mesh, BoxGeometry, MeshBasicMaterial, Sprite, SpriteMaterial });
-class NgtsGizmoViewportAxis extends NgtSignalStore {
-    set color(color) {
-        this.set({ color });
+    set _cellThickness(cellThickness) {
+        this.inputs.set({ cellThickness });
     }
-    set rotation(rotation) {
-        this.set({ rotation });
+    set _cellColor(cellColor) {
+        this.inputs.set({ cellColor });
     }
-    set scale(scale) {
-        this.set({ scale });
+    set _sectionSize(sectionSize) {
+        this.inputs.set({ sectionSize });
     }
-    constructor() {
-        super({ scale: [0.8, 0.05, 0.05] });
-        this.axisRotation = this.select('rotation');
-        this.axisColor = this.select('color');
-        this.axisScale = this.select('scale');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewportAxis, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsGizmoViewportAxis, isStandalone: true, selector: "ngts-gizmo-viewport-axis", inputs: { color: "color", rotation: "rotation", scale: "scale" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-group [rotation]="axisRotation()">
-            <ngt-mesh [position]="[0.4, 0, 0]">
-                <ngt-box-geometry *args="axisScale()" />
-                <ngt-mesh-basic-material [color]="axisColor()" [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',
-                    standalone: true,
-                    template: `
-        <ngt-group [rotation]="axisRotation()">
-            <ngt-mesh [position]="[0.4, 0, 0]">
-                <ngt-box-geometry *args="axisScale()" />
-                <ngt-mesh-basic-material [color]="axisColor()" [toneMapped]="false" />
-            </ngt-mesh>
-        </ngt-group>
-    `,
-                    imports: [NgtArgs],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { color: [{
-                type: Input,
-                args: [{ required: true }]
-            }], rotation: [{
-                type: Input,
-                args: [{ required: true }]
-            }], scale: [{
-                type: Input
-            }] } });
-class NgtsGizmoViewportAxisHead extends NgtSignalStore {
-    #document;
-    #store;
-    set arcStyle(arcStyle) {
-        this.set({ arcStyle });
+    set _sectionThickness(sectionThickness) {
+        this.inputs.set({ sectionThickness });
     }
-    set label(label) {
-        this.set({ label });
+    set _sectionColor(sectionColor) {
+        this.inputs.set({ sectionColor });
     }
-    set labelColor(labelColor) {
-        this.set({ labelColor });
+    set _followCamera(followCamera) {
+        this.inputs.set({ followCamera });
     }
-    set axisHeadScale(axisHeadScale) {
-        this.set({ axisHeadScale });
+    set _infiniteGrid(infiniteGrid) {
+        this.inputs.set({ infiniteGrid });
     }
-    set disabled(disabled) {
-        this.set({ disabled });
+    set _fadeDistance(fadeDistance) {
+        this.inputs.set({ fadeDistance });
     }
-    set font(font) {
-        this.set({ font });
+    set _fadeStrength(fadeStrength) {
+        this.inputs.set({ fadeStrength });
+    }
+    set _side(side) {
+        this.inputs.set({ side });
     }
-    set clickEmitter(clickEmitter) {
-        this.set({ clickEmitter });
+    set _args(args) {
+        this.inputs.set({ args });
     }
-    #arcStyle;
-    #labelColor;
-    #font;
-    #axisHeadScale;
     constructor() {
-        super({ axisHeadScale: 1 });
-        this.#document = inject(DOCUMENT);
-        this.#store = inject(NgtStore);
-        this.gl = this.#store.select('gl');
-        this.active = signal(false);
-        this.#arcStyle = this.select('arcStyle');
-        this.#labelColor = this.select('labelColor');
-        this.#font = this.select('font');
-        this.#axisHeadScale = this.select('axisHeadScale');
-        this.axisLabel = this.select('label');
-        this.texture = computed(() => {
-            const arcStyle = this.#arcStyle();
-            const labelColor = this.#labelColor();
-            const font = this.#font();
-            const label = this.axisLabel();
-            const canvas = this.#document.createElement('canvas');
-            canvas.width = 64;
-            canvas.height = 64;
-            const context = canvas.getContext('2d');
-            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.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.scale = computed(() => {
-            const active = this.active();
-            const axisHeadScale = this.#axisHeadScale();
-            const label = this.axisLabel();
-            return (label ? 1 : 0.75) * (active ? 1.2 : 1) * axisHeadScale;
+        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);
         });
     }
-    onPointerOver(event) {
-        if (!this.get('disabled')) {
-            event.stopPropagation();
-            this.active.set(true);
-        }
-    }
-    onPointerOut(event) {
-        if (!this.get('disabled')) {
-            if (this.get('clickEmitter')?.observed) {
-                this.get('clickEmitter').emit(event);
-            }
-            else {
-                event.stopPropagation();
-                this.active.set(false);
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewportAxisHead, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsGizmoViewportAxisHead, isStandalone: true, selector: "ngts-gizmo-viewport-axis-head", inputs: { arcStyle: "arcStyle", label: "label", labelColor: "labelColor", axisHeadScale: "axisHeadScale", disabled: "disabled", font: "font", clickEmitter: "clickEmitter" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-sprite
-            ngtCompound
-            [scale]="scale()"
-            (pointerover)="onPointerOver($event)"
-            (pointerout)="onPointerOut($event)"
-        >
-            <ngt-sprite-material
-                [map]="texture()"
-                [opacity]="axisLabel() ? 1 : 0.75"
-                [alphaTest]="0.3"
-                [toneMapped]="false"
-            >
-                <ngt-value [rawValue]="gl().outputEncoding" attach="map.encoding" />
-                <ngt-value [rawValue]="gl().capabilities.getMaxAnisotropy() || 1" attach="map.anisotropy" />
-            </ngt-sprite-material>
-        </ngt-sprite>
-    `, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", 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: NgtsGizmoViewportAxisHead, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsGrid, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngts-gizmo-viewport-axis-head',
+                    selector: 'ngts-grid',
                     standalone: true,
                     template: `
-        <ngt-sprite
-            ngtCompound
-            [scale]="scale()"
-            (pointerover)="onPointerOver($event)"
-            (pointerout)="onPointerOut($event)"
-        >
-            <ngt-sprite-material
-                [map]="texture()"
-                [opacity]="axisLabel() ? 1 : 0.75"
-                [alphaTest]="0.3"
-                [toneMapped]="false"
-            >
-                <ngt-value [rawValue]="gl().outputEncoding" attach="map.encoding" />
-                <ngt-value [rawValue]="gl().capabilities.getMaxAnisotropy() || 1" attach="map.anisotropy" />
-            </ngt-sprite-material>
-        </ngt-sprite>
-    `,
+		<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],
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { arcStyle: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], labelColor: [{
-                type: Input
-            }], axisHeadScale: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], font: [{
-                type: Input
-            }], clickEmitter: [{
-                type: Input
-            }] } });
-
-extend({ Group, AmbientLight, PointLight });
-class NgtsGizmoViewport extends NgtSignalStore {
-    #gizmoHelperApi;
-    set axisColors(axisColors) {
-        this.set({ axisColors });
-    }
-    set axisScale(axisScale) {
-        this.set({ axisScale });
-    }
-    set labels(labels) {
-        this.set({ labels });
-    }
-    set axisHeadScale(axisHeadScale) {
-        this.set({ axisHeadScale });
-    }
-    set labelColor(labelColor) {
-        this.set({ labelColor });
-    }
-    set hideNegativeAxes(hideNegativeAxes) {
-        this.set({ hideNegativeAxes });
-    }
-    set hideAxisHeads(hideAxisHeads) {
-        this.set({ hideAxisHeads });
-    }
-    set disabled(disabled) {
-        this.set({ disabled });
-    }
-    set font(font) {
-        this.set({ font });
-    }
-    constructor() {
-        super({
-            font: '18px Inter var, Arial, sans-serif',
-            axisColors: ['#ff2060', '#20df80', '#2080ff'],
-            axisHeadScale: 1,
-            labels: ['X', 'Y', 'Z'],
-            labelColor: '#000',
-        });
-        this.#gizmoHelperApi = inject(NGTS_GIZMO_HELPER_API);
-        this.Math = Math;
-        this.clicked = new EventEmitter();
-        this.viewportAxisColors = this.select('axisColors');
-        this.viewportAxisScale = this.select('axisScale');
-        this.viewportLabels = this.select('labels');
-        this.viewportAxisHeadScale = this.select('axisHeadScale');
-        this.viewportLabelColor = this.select('labelColor');
-        this.viewportHideNegativeAxes = this.select('hideNegativeAxes');
-        this.viewportHideAxisHeads = this.select('hideAxisHeads');
-        this.viewportDisabled = this.select('disabled');
-        this.viewportFont = this.select('font');
-    }
-    onPointerDown(event) {
-        if (!this.get('disabled')) {
-            event.stopPropagation();
-            this.#gizmoHelperApi()(event.object.position);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewport, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsGizmoViewport, isStandalone: true, selector: "ngts-gizmo-viewport", inputs: { axisColors: "axisColors", axisScale: "axisScale", labels: "labels", axisHeadScale: "axisHeadScale", labelColor: "labelColor", hideNegativeAxes: "hideNegativeAxes", hideAxisHeads: "hideAxisHeads", disabled: "disabled", font: "font" }, outputs: { clicked: "clicked" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-group ngtCompound [scale]="40">
-            <ngts-gizmo-viewport-axis
-                [color]="viewportAxisColors()[0]"
-                [rotation]="[0, 0, 0]"
-                [scale]="viewportAxisScale()"
-            ></ngts-gizmo-viewport-axis>
-            <ngts-gizmo-viewport-axis
-                [color]="viewportAxisColors()[1]"
-                [rotation]="[0, 0, Math.PI / 2]"
-                [scale]="viewportAxisScale()"
-            ></ngts-gizmo-viewport-axis>
-            <ngts-gizmo-viewport-axis
-                [color]="viewportAxisColors()[2]"
-                [rotation]="[0, -Math.PI / 2, 0]"
-                [scale]="viewportAxisScale()"
-            ></ngts-gizmo-viewport-axis>
-            <ng-container *ngIf="!viewportHideAxisHeads()">
-                <ngts-gizmo-viewport-axis-head
-                    [arcStyle]="viewportAxisColors()[0]"
-                    [position]="[1, 0, 0]"
-                    [label]="viewportLabels()[0]"
-                    [font]="viewportFont()"
-                    [disabled]="viewportDisabled()"
-                    [labelColor]="viewportLabelColor()"
-                    [clickEmitter]="clicked"
-                    [axisHeadScale]="viewportAxisHeadScale()"
-                    (pointerdown)="onPointerDown($any($event))"
-                ></ngts-gizmo-viewport-axis-head>
-                <ngts-gizmo-viewport-axis-head
-                    [arcStyle]="viewportAxisColors()[1]"
-                    [position]="[0, 1, 0]"
-                    [label]="viewportLabels()[1]"
-                    [font]="viewportFont()"
-                    [disabled]="viewportDisabled()"
-                    [labelColor]="viewportLabelColor()"
-                    [clickEmitter]="clicked"
-                    [axisHeadScale]="viewportAxisHeadScale()"
-                    (pointerdown)="onPointerDown($any($event))"
-                ></ngts-gizmo-viewport-axis-head>
-                <ngts-gizmo-viewport-axis-head
-                    [arcStyle]="viewportAxisColors()[2]"
-                    [position]="[0, 0, 1]"
-                    [label]="viewportLabels()[2]"
-                    [font]="viewportFont()"
-                    [disabled]="viewportDisabled()"
-                    [labelColor]="viewportLabelColor()"
-                    [clickEmitter]="clicked"
-                    [axisHeadScale]="viewportAxisHeadScale()"
-                    (pointerdown)="onPointerDown($any($event))"
-                ></ngts-gizmo-viewport-axis-head>
-                <ng-container *ngIf="!viewportHideNegativeAxes()">
-                    <ngts-gizmo-viewport-axis-head
-                        [arcStyle]="viewportAxisColors()[0]"
-                        [position]="[-1, 0, 0]"
-                        [font]="viewportFont()"
-                        [disabled]="viewportDisabled()"
-                        [labelColor]="viewportLabelColor()"
-                        [clickEmitter]="clicked"
-                        [axisHeadScale]="viewportAxisHeadScale()"
-                        (pointerdown)="onPointerDown($any($event))"
-                    ></ngts-gizmo-viewport-axis-head>
-                    <ngts-gizmo-viewport-axis-head
-                        [arcStyle]="viewportAxisColors()[1]"
-                        [position]="[0, -1, 0]"
-                        [font]="viewportFont()"
-                        [disabled]="viewportDisabled()"
-                        [labelColor]="viewportLabelColor()"
-                        [clickEmitter]="clicked"
-                        [axisHeadScale]="viewportAxisHeadScale()"
-                        (pointerdown)="onPointerDown($any($event))"
-                    ></ngts-gizmo-viewport-axis-head>
-                    <ngts-gizmo-viewport-axis-head
-                        [arcStyle]="viewportAxisColors()[2]"
-                        [position]="[0, 0, -1]"
-                        [font]="viewportFont()"
-                        [disabled]="viewportDisabled()"
-                        [labelColor]="viewportLabelColor()"
-                        [clickEmitter]="clicked"
-                        [axisHeadScale]="viewportAxisHeadScale()"
-                        (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", 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]="viewportAxisColors()[0]"
-                [rotation]="[0, 0, 0]"
-                [scale]="viewportAxisScale()"
-            ></ngts-gizmo-viewport-axis>
-            <ngts-gizmo-viewport-axis
-                [color]="viewportAxisColors()[1]"
-                [rotation]="[0, 0, Math.PI / 2]"
-                [scale]="viewportAxisScale()"
-            ></ngts-gizmo-viewport-axis>
-            <ngts-gizmo-viewport-axis
-                [color]="viewportAxisColors()[2]"
-                [rotation]="[0, -Math.PI / 2, 0]"
-                [scale]="viewportAxisScale()"
-            ></ngts-gizmo-viewport-axis>
-            <ng-container *ngIf="!viewportHideAxisHeads()">
-                <ngts-gizmo-viewport-axis-head
-                    [arcStyle]="viewportAxisColors()[0]"
-                    [position]="[1, 0, 0]"
-                    [label]="viewportLabels()[0]"
-                    [font]="viewportFont()"
-                    [disabled]="viewportDisabled()"
-                    [labelColor]="viewportLabelColor()"
-                    [clickEmitter]="clicked"
-                    [axisHeadScale]="viewportAxisHeadScale()"
-                    (pointerdown)="onPointerDown($any($event))"
-                ></ngts-gizmo-viewport-axis-head>
-                <ngts-gizmo-viewport-axis-head
-                    [arcStyle]="viewportAxisColors()[1]"
-                    [position]="[0, 1, 0]"
-                    [label]="viewportLabels()[1]"
-                    [font]="viewportFont()"
-                    [disabled]="viewportDisabled()"
-                    [labelColor]="viewportLabelColor()"
-                    [clickEmitter]="clicked"
-                    [axisHeadScale]="viewportAxisHeadScale()"
-                    (pointerdown)="onPointerDown($any($event))"
-                ></ngts-gizmo-viewport-axis-head>
-                <ngts-gizmo-viewport-axis-head
-                    [arcStyle]="viewportAxisColors()[2]"
-                    [position]="[0, 0, 1]"
-                    [label]="viewportLabels()[2]"
-                    [font]="viewportFont()"
-                    [disabled]="viewportDisabled()"
-                    [labelColor]="viewportLabelColor()"
-                    [clickEmitter]="clicked"
-                    [axisHeadScale]="viewportAxisHeadScale()"
-                    (pointerdown)="onPointerDown($any($event))"
-                ></ngts-gizmo-viewport-axis-head>
-                <ng-container *ngIf="!viewportHideNegativeAxes()">
-                    <ngts-gizmo-viewport-axis-head
-                        [arcStyle]="viewportAxisColors()[0]"
-                        [position]="[-1, 0, 0]"
-                        [font]="viewportFont()"
-                        [disabled]="viewportDisabled()"
-                        [labelColor]="viewportLabelColor()"
-                        [clickEmitter]="clicked"
-                        [axisHeadScale]="viewportAxisHeadScale()"
-                        (pointerdown)="onPointerDown($any($event))"
-                    ></ngts-gizmo-viewport-axis-head>
-                    <ngts-gizmo-viewport-axis-head
-                        [arcStyle]="viewportAxisColors()[1]"
-                        [position]="[0, -1, 0]"
-                        [font]="viewportFont()"
-                        [disabled]="viewportDisabled()"
-                        [labelColor]="viewportLabelColor()"
-                        [clickEmitter]="clicked"
-                        [axisHeadScale]="viewportAxisHeadScale()"
-                        (pointerdown)="onPointerDown($any($event))"
-                    ></ngts-gizmo-viewport-axis-head>
-                    <ngts-gizmo-viewport-axis-head
-                        [arcStyle]="viewportAxisColors()[2]"
-                        [position]="[0, 0, -1]"
-                        [font]="viewportFont()"
-                        [disabled]="viewportDisabled()"
-                        [labelColor]="viewportLabelColor()"
-                        [clickEmitter]="clicked"
-                        [axisHeadScale]="viewportAxisHeadScale()"
-                        (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],
-                }]
-        }], ctorParameters: function () { return []; }, 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 NgtsLineInputs {
-    set start(start) {
-        this.set({ start });
-    }
-    set end(end) {
-        this.set({ end });
-    }
-    set mid(mid) {
-        this.set({ mid });
-    }
-    set segments(segments) {
-        this.set({ segments });
-    }
-    #curve;
-    #start;
-    #end;
-    #mid;
-    #segments;
-    constructor() {
-        super();
-        this.lineRef = injectNgtRef();
-        this.#curve = new THREE.QuadraticBezierCurve3(undefined, undefined, undefined);
-        this.#start = this.select('start');
-        this.#end = this.select('end');
-        this.#mid = this.select('mid');
-        this.#segments = this.select('segments');
-        this.points = computed(() => this.#getPoints(this.#start(), this.#end(), this.#mid(), this.#segments()));
-        this.set({ start: [0, 0, 0], end: [0, 0, 0], segments: 20 });
-        this.#replaceSetPoints();
-    }
-    #replaceSetPoints() {
-        effect(() => {
-            const line = this.lineRef.nativeElement;
-            if (!line)
-                return;
-            line.setPoints = (start, end, mid) => {
-                const points = this.#getPoints(start, end, mid);
-                if (line.geometry) {
-                    line.geometry.setPositions(points.map((p) => p.toArray()).flat());
-                }
-            };
-        });
-    }
-    #getPoints(start, end, mid, segments = 20) {
-        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: [], 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]="points()"
-            [color]="lineParameters().color"
-            [vertexColors]="lineParameters().vertexColors"
-            [resolution]="lineParameters().resolution"
-            [lineWidth]="lineParameters().linewidth"
-            [alphaToCoverage]="lineParameters().alphaToCoverage"
-            [dashed]="lineParameters().dashed"
-            [dashScale]="lineParameters().dashScale"
-            [dashSize]="lineParameters().dashSize"
-            [dashOffset]="lineParameters().dashOffset"
-            [gapSize]="lineParameters().gapSize"
-            [wireframe]="lineParameters().wireframe"
-            [worldUnits]="lineParameters().worldUnits"
-        />
-    `, isInline: true, dependencies: [{ kind: "component", type: NgtsLine, selector: "ngts-line", 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]="points()"
-            [color]="lineParameters().color"
-            [vertexColors]="lineParameters().vertexColors"
-            [resolution]="lineParameters().resolution"
-            [lineWidth]="lineParameters().linewidth"
-            [alphaToCoverage]="lineParameters().alphaToCoverage"
-            [dashed]="lineParameters().dashed"
-            [dashScale]="lineParameters().dashScale"
-            [dashSize]="lineParameters().dashSize"
-            [dashOffset]="lineParameters().dashOffset"
-            [gapSize]="lineParameters().gapSize"
-            [wireframe]="lineParameters().wireframe"
-            [worldUnits]="lineParameters().worldUnits"
-        />
-    `,
-                    imports: [NgtsLine],
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { lineRef: [{
-                type: Input
-            }], start: [{
-                type: Input
-            }], end: [{
-                type: Input
-            }], mid: [{
-                type: Input
-            }], segments: [{
+        }], 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({ Mesh, TextGeometry });
-class NgtsText3D extends NgtSignalStore {
-    set font(font) {
-        this.set({ font });
+class NgtsText3D {
+    set _font(font) {
+        this.inputs.set({ font });
     }
-    set text(text) {
-        this.set({ text });
+    set _text(text) {
+        this.inputs.set({ text });
     }
-    set bevelEnabled(bevelEnabled) {
-        this.set({ bevelEnabled });
+    set _bevelEnabled(bevelEnabled) {
+        this.inputs.set({ bevelEnabled });
     }
-    set bevelOffset(bevelOffset) {
-        this.set({ bevelOffset });
+    set _bevelOffset(bevelOffset) {
+        this.inputs.set({ bevelOffset });
     }
-    set bevelSize(bevelSize) {
-        this.set({ bevelSize });
+    set _bevelSize(bevelSize) {
+        this.inputs.set({ bevelSize });
     }
-    set bevelThickness(bevelThickness) {
-        this.set({ bevelThickness });
+    set _bevelThickness(bevelThickness) {
+        this.inputs.set({ bevelThickness });
     }
-    set curveSegments(curveSegments) {
-        this.set({ curveSegments });
+    set _curveSegments(curveSegments) {
+        this.inputs.set({ curveSegments });
     }
-    set bevelSegments(bevelSegments) {
-        this.set({ bevelSegments });
+    set _bevelSegments(bevelSegments) {
+        this.inputs.set({ bevelSegments });
     }
-    set height(height) {
-        this.set({ height });
+    set _height(height) {
+        this.inputs.set({ height });
     }
-    set size(size) {
-        this.set({ size });
+    set _size(size) {
+        this.inputs.set({ size });
     }
-    set lineHeight(lineHeight) {
-        this.set({ lineHeight });
+    set _lineHeight(lineHeight) {
+        this.inputs.set({ lineHeight });
     }
-    set letterSpacing(letterSpacing) {
-        this.set({ letterSpacing });
+    set _letterSpacing(letterSpacing) {
+        this.inputs.set({ letterSpacing });
     }
-    set smooth(smooth) {
-        this.set({ smooth });
+    set _smooth(smooth) {
+        this.inputs.set({ smooth });
     }
     constructor() {
-        super({
+        this.inputs = signalStore({
             lineHeight: 1,
             letterSpacing: 0,
             size: 1,
@@ -1890,224 +449,232 @@ class NgtsText3D extends NgtSignalStore {
             curveSegments: 8,
         });
         this.textRef = injectNgtRef();
-        this.#fontData = toSignal(toObservable(this.select('font')).pipe(switchMap((font) => {
-            if (typeof font === 'string')
-                return fetch(font).then((res) => res.json());
-            return of(font);
-        }), map((fontData) => new FontLoader().parse(fontData))));
-        this.#text = this.select('text');
-        this.#size = this.select('size');
-        this.#height = this.select('height');
-        this.#bevelThickness = this.select('bevelThickness');
-        this.#bevelSize = this.select('bevelSize');
-        this.#bevelEnabled = this.select('bevelEnabled');
-        this.#bevelSegments = this.select('bevelSegments');
-        this.#bevelOffset = this.select('bevelOffset');
-        this.#curveSegments = this.select('curveSegments');
-        this.#letterSpacing = this.select('letterSpacing');
-        this.#lineHeight = this.select('lineHeight');
+        this.cdr = inject(ChangeDetectorRef);
+        this.fontData = signal(null);
+        this.font = this.inputs.select('font');
+        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)
+            const fontData = this.fontData() || this.font();
+            if (!fontData || !fontData.data)
                 return null;
             return [
-                this.#text(),
+                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(),
+                    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(),
                 },
             ];
         });
+        effect(() => {
+            const font = this.font();
+            if (typeof font === 'string') {
+                fetch(font)
+                    .then((res) => res.json())
+                    .then((fontData) => {
+                    this.fontData.set(new FontLoader().parse(fontData));
+                    this.cdr.detectChanges();
+                });
+            }
+        });
     }
-    #fontData;
-    #text;
-    #size;
-    #height;
-    #bevelThickness;
-    #bevelSize;
-    #bevelEnabled;
-    #bevelSegments;
-    #bevelOffset;
-    #curveSegments;
-    #letterSpacing;
-    #lineHeight;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsText3D, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsText3D, isStandalone: true, selector: "ngts-text-3d", inputs: { textRef: "textRef", font: "font", text: "text", bevelEnabled: "bevelEnabled", bevelOffset: "bevelOffset", bevelSize: "bevelSize", bevelThickness: "bevelThickness", curveSegments: "curveSegments", bevelSegments: "bevelSegments", height: "height", size: "size", lineHeight: "lineHeight", letterSpacing: "letterSpacing", smooth: "smooth" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-mesh ngtCompound [ref]="textRef">
-            <ngt-text-geometry *args="geometryArgs()" />
-            <ng-content />
-        </ngt-mesh>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsText3D, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", 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: NgtsText3D, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsText3D, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-text-3d',
                     standalone: true,
                     template: `
-        <ngt-mesh ngtCompound [ref]="textRef">
-            <ngt-text-geometry *args="geometryArgs()" />
-            <ng-content />
-        </ngt-mesh>
-    `,
+		<ngt-mesh ngtCompound [ref]="textRef">
+			<ngt-text-geometry *args="geometryArgs()" />
+			<ng-content />
+		</ngt-mesh>
+	`,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { textRef: [{
                 type: Input
-            }], font: [{
+            }], _font: [{
                 type: Input,
-                args: [{ required: true }]
-            }], text: [{
+                args: [{ required: true, alias: 'font' }]
+            }], _text: [{
                 type: Input,
-                args: [{ required: true }]
-            }], 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
-            }], smooth: [{
-                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' }]
             }] } });
 
-class NgtsText extends NgtSignalStore {
+class NgtsText {
     set text(text) {
-        this.set({ text });
+        this.inputs.set({ text });
     }
     set font(font) {
-        this.set({ font });
+        this.inputs.set({ font });
     }
     set fontSize(fontSize) {
-        this.set({ fontSize });
+        this.inputs.set({ fontSize });
     }
     set anchorX(anchorX) {
-        this.set({ anchorX });
+        this.inputs.set({ anchorX });
     }
     set anchorY(anchorY) {
-        this.set({ anchorY });
+        this.inputs.set({ anchorY });
     }
     set sdfGlyphSize(sdfGlyphSize) {
-        this.set({ sdfGlyphSize });
+        this.inputs.set({ sdfGlyphSize });
     }
     set characters(characters) {
-        this.set({ characters });
+        this.inputs.set({ characters });
     }
     set color(color) {
-        this.set({ color });
+        this.inputs.set({ color });
     }
     set maxWidth(maxWidth) {
-        this.set({ maxWidth });
+        this.inputs.set({ maxWidth });
     }
     set lineHeight(lineHeight) {
-        this.set({ lineHeight });
+        this.inputs.set({ lineHeight });
     }
     set letterSpacing(letterSpacing) {
-        this.set({ letterSpacing });
+        this.inputs.set({ letterSpacing });
     }
     set textAlign(textAlign) {
-        this.set({ textAlign });
+        this.inputs.set({ textAlign });
     }
     set clipRect(clipRect) {
-        this.set({ clipRect });
+        this.inputs.set({ clipRect });
     }
     set depthOffset(depthOffset) {
-        this.set({ depthOffset });
+        this.inputs.set({ depthOffset });
     }
     set direction(direction) {
-        this.set({ direction });
+        this.inputs.set({ direction });
     }
     set overflowWrap(overflowWrap) {
-        this.set({ overflowWrap });
+        this.inputs.set({ overflowWrap });
     }
     set whiteSpace(whiteSpace) {
-        this.set({ whiteSpace });
+        this.inputs.set({ whiteSpace });
     }
     set outlineWidth(outlineWidth) {
-        this.set({ outlineWidth });
+        this.inputs.set({ outlineWidth });
     }
     set outlineOffsetX(outlineOffsetX) {
-        this.set({ outlineOffsetX });
+        this.inputs.set({ outlineOffsetX });
     }
     set outlineOffsetY(outlineOffsetY) {
-        this.set({ outlineOffsetY });
+        this.inputs.set({ outlineOffsetY });
     }
     set outlineBlur(outlineBlur) {
-        this.set({ outlineBlur });
+        this.inputs.set({ outlineBlur });
     }
     set outlineColor(outlineColor) {
-        this.set({ outlineColor });
+        this.inputs.set({ outlineColor });
     }
     set outlineOpacity(outlineOpacity) {
-        this.set({ outlineOpacity });
+        this.inputs.set({ outlineOpacity });
     }
     set strokeWidth(strokeWidth) {
-        this.set({ strokeWidth });
+        this.inputs.set({ strokeWidth });
     }
     set strokeColor(strokeColor) {
-        this.set({ strokeColor });
+        this.inputs.set({ strokeColor });
     }
     set strokeOpacity(strokeOpacity) {
-        this.set({ strokeOpacity });
+        this.inputs.set({ strokeOpacity });
     }
     set fillOpacity(fillOpacity) {
-        this.set({ fillOpacity });
+        this.inputs.set({ fillOpacity });
     }
     set debugSDF(debugSDF) {
-        this.set({ debugSDF });
+        this.inputs.set({ debugSDF });
     }
-    #store;
     constructor() {
-        super({ fontSize: 1, sdfGlyphSize: 64, anchorX: 'center', anchorY: 'middle' });
+        this.inputs = signalStore({
+            fontSize: 1,
+            sdfGlyphSize: 64,
+            anchorX: 'center',
+            anchorY: 'middle',
+        });
         this.textRef = injectNgtRef();
         this.sync = new EventEmitter();
         this.troikaText = new Text();
-        this.#store = inject(NgtStore);
-        this.state = this.select();
+        this.store = injectNgtStore();
         inject(DestroyRef).onDestroy(() => {
             this.troikaText.dispose();
         });
-        this.#preloadFont();
-        this.#syncText();
+        this.preloadFont();
+        this.syncText();
     }
-    #preloadFont() {
-        const font = this.select('font');
-        const characters = this.select('characters');
-        const trigger = computed(() => ({ font: font(), characters: characters() }));
+    preloadFont() {
+        const _font = this.inputs.select('font');
+        const _characters = this.inputs.select('characters');
         effect(() => {
-            const { font, characters } = trigger();
-            const invalidate = this.#store.get('invalidate');
+            const [font, characters] = [_font(), _characters()];
+            const invalidate = this.store.get('invalidate');
             preloadFont({ font, characters }, () => invalidate());
         });
     }
-    #syncText() {
-        const state = this.select();
+    syncText() {
         effect(() => {
-            state();
-            const invalidate = this.#store.get('invalidate');
+            const [invalidate] = [this.store.get('invalidate'), this.inputs.state()];
             this.troikaText.sync(() => {
                 invalidate();
                 if (this.sync.observed) {
@@ -2116,87 +683,87 @@ class NgtsText extends NgtSignalStore {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsText, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsText, isStandalone: true, selector: "ngts-text", inputs: { textRef: "textRef", text: "text", font: "font", fontSize: "fontSize", anchorX: "anchorX", anchorY: "anchorY", sdfGlyphSize: "sdfGlyphSize", characters: "characters", color: "color", maxWidth: "maxWidth", lineHeight: "lineHeight", letterSpacing: "letterSpacing", textAlign: "textAlign", clipRect: "clipRect", depthOffset: "depthOffset", direction: "direction", overflowWrap: "overflowWrap", whiteSpace: "whiteSpace", outlineWidth: "outlineWidth", outlineOffsetX: "outlineOffsetX", outlineOffsetY: "outlineOffsetY", outlineBlur: "outlineBlur", outlineColor: "outlineColor", outlineOpacity: "outlineOpacity", strokeWidth: "strokeWidth", strokeColor: "strokeColor", strokeOpacity: "strokeOpacity", fillOpacity: "fillOpacity", debugSDF: "debugSDF" }, outputs: { sync: "sync" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-primitive
-            ngtCompound
-            *args="[troikaText]"
-            [ref]="textRef"
-            [text]="state().text"
-            [anchorX]="state().anchorX"
-            [anchorY]="state().anchorY"
-            [font]="state().font"
-            [fontSize]="state().fontSize"
-            [sdfGlyphSize]="state().sdfGlyphSize"
-            [characters]="state().characters"
-            [color]="state().color"
-            [maxWidth]="state().maxWidth"
-            [lineHeight]="state().lineHeight"
-            [letterSpacing]="state().letterSpacing"
-            [textAlign]="state().textAlign"
-            [clipRect]="state().clipRect"
-            [depthOffset]="state().depthOffset"
-            [direction]="state().direction"
-            [overflowWrap]="state().overflowWrap"
-            [whiteSpace]="state().whiteSpace"
-            [outlineWidth]="state().outlineWidth"
-            [outlineOffsetX]="state().outlineOffsetX"
-            [outlineOffsetY]="state().outlineOffsetY"
-            [outlineBlur]="state().outlineBlur"
-            [outlineColor]="state().outlineColor"
-            [outlineOpacity]="state().outlineOpacity"
-            [strokeWidth]="state().strokeWidth"
-            [strokeColor]="state().strokeColor"
-            [strokeOpacity]="state().strokeOpacity"
-            [fillOpacity]="state().fillOpacity"
-            [debugSDF]="state().debugSDF"
-        >
-            <ng-content />
-        </ngt-primitive>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsText, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", 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.2.3", ngImport: i0, type: NgtsText, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-text',
                     standalone: true,
                     template: `
-        <ngt-primitive
-            ngtCompound
-            *args="[troikaText]"
-            [ref]="textRef"
-            [text]="state().text"
-            [anchorX]="state().anchorX"
-            [anchorY]="state().anchorY"
-            [font]="state().font"
-            [fontSize]="state().fontSize"
-            [sdfGlyphSize]="state().sdfGlyphSize"
-            [characters]="state().characters"
-            [color]="state().color"
-            [maxWidth]="state().maxWidth"
-            [lineHeight]="state().lineHeight"
-            [letterSpacing]="state().letterSpacing"
-            [textAlign]="state().textAlign"
-            [clipRect]="state().clipRect"
-            [depthOffset]="state().depthOffset"
-            [direction]="state().direction"
-            [overflowWrap]="state().overflowWrap"
-            [whiteSpace]="state().whiteSpace"
-            [outlineWidth]="state().outlineWidth"
-            [outlineOffsetX]="state().outlineOffsetX"
-            [outlineOffsetY]="state().outlineOffsetY"
-            [outlineBlur]="state().outlineBlur"
-            [outlineColor]="state().outlineColor"
-            [outlineOpacity]="state().outlineOpacity"
-            [strokeWidth]="state().strokeWidth"
-            [strokeColor]="state().strokeColor"
-            [strokeOpacity]="state().strokeOpacity"
-            [fillOpacity]="state().fillOpacity"
-            [debugSDF]="state().debugSDF"
-        >
-            <ng-content />
-        </ngt-primitive>
-    `,
+		<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],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
@@ -2267,5 +834,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