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

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

@@ -2,10 +2,11 @@ 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 * 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 { Group, CatmullRomCurve3, LineSegments, LineBasicMaterial, Vector3, Quaternion, Object3D, Matrix4, Mesh, BoxGeometry, MeshBasicMaterial, MeshLambertMaterial, CanvasTexture, AmbientLight, PointLight, Sprite, SpriteMaterial, PlaneGeometry } 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 { GridMaterial } from 'angular-three-soba/shaders';
 import { toSignal, toObservable } from '@angular/core/rxjs-interop';
 import { switchMap, of, map } from 'rxjs';
 import { Text, preloadFont } from 'troika-three-text';
@@ -45,14 +46,14 @@ 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsBillboard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsBillboard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsBillboard, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-billboard',
@@ -154,10 +155,10 @@ class NgtsLineInputs extends NgtSignalStore {
             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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsLineInputs, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsLineInputs, decorators: [{
             type: Directive
         }], ctorParameters: function () { return []; }, propDecorators: { vertexColors: [{
                 type: Input
@@ -282,8 +283,8 @@ class NgtsLine extends NgtsLineInputs {
             onCleanup(() => lineGeometry.dispose());
         });
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsLine, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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
@@ -305,7 +306,7 @@ class NgtsLine extends NgtsLineInputs {
         </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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsLine, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-line',
@@ -405,8 +406,8 @@ class NgtsCatmullRomLine extends NgtsLineInputs {
         });
         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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsCatmullRomLine, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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()"
@@ -425,7 +426,7 @@ class NgtsCatmullRomLine extends NgtsLineInputs {
         />
     `, isInline: true, dependencies: [{ kind: "component", type: NgtsLine, selector: "ngts-line", inputs: ["lineRef", "points", "segments"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsCatmullRomLine, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsCatmullRomLine, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-catmull-rom-line',
@@ -509,8 +510,8 @@ class NgtsCubicBezierLine extends NgtsLineInputs {
         });
         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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsCubicBezierLine, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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()"
@@ -529,7 +530,7 @@ class NgtsCubicBezierLine extends NgtsLineInputs {
         />
     `, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsCubicBezierLine, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-cubic-bezier-line',
@@ -614,8 +615,8 @@ class NgtsEdges extends NgtSignalStore {
             }
         });
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsEdges, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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 />
@@ -626,7 +627,7 @@ class NgtsEdges extends NgtSignalStore {
         </ngt-line-segments>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsEdges, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsEdges, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-edges',
@@ -662,10 +663,10 @@ 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsGizmoHelperContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsGizmoHelperContent, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[ngtsGizmoHelperContent]', standalone: true }]
         }] });
@@ -802,8 +803,8 @@ class NgtsGizmoHelper extends NgtSignalStore {
             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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsGizmoHelper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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()">
@@ -818,9 +819,9 @@ class NgtsGizmoHelper extends NgtSignalStore {
                 </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"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: NgtPortal, selector: "ngt-portal", inputs: ["container", "portalState", "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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsGizmoHelper, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-gizmo-helper',
@@ -925,10 +926,10 @@ class NgtsGizmoViewcubeInputs extends NgtSignalStore {
     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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsGizmoViewcubeInputs, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsGizmoViewcubeInputs, decorators: [{
             type: Directive
         }], propDecorators: { opacity: [{
                 type: Input
@@ -983,8 +984,8 @@ class NgtsGizmoViewcubeEdgeCube extends NgtSignalStore {
             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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsGizmoViewcubeEdgeCube, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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()"
@@ -1002,7 +1003,7 @@ class NgtsGizmoViewcubeEdgeCube extends NgtSignalStore {
         </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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsGizmoViewcubeEdgeCube, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-gizmo-viewcube-edge-cube',
@@ -1084,8 +1085,8 @@ class NgtsGizmoViewcubeFaceMaterial extends NgtSignalStore {
             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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsGizmoViewcubeFaceMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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()"
@@ -1098,7 +1099,7 @@ class NgtsGizmoViewcubeFaceMaterial extends NgtSignalStore {
         </ngt-mesh-lambert-material>
     `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewcubeFaceMaterial, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsGizmoViewcubeFaceMaterial, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-gizmo-viewcube-face-material',
@@ -1148,8 +1149,8 @@ class NgtsGizmoViewcubeFaceCube {
             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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsGizmoViewcubeFaceCube, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: NgtsGizmoViewcubeFaceCube, isStandalone: true, selector: "ngts-gizmo-viewcube-face-cube", ngImport: i0, template: `
         <ngt-mesh
             (pointermove)="onPointerMove($any($event))"
             (pointerout)="onPointerOut($any($event))"
@@ -1160,7 +1161,7 @@ class NgtsGizmoViewcubeFaceCube {
         </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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsGizmoViewcubeFaceCube, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-gizmo-viewcube-face-cube',
@@ -1195,8 +1196,8 @@ class NgtsGizmoViewcube extends NgtsGizmoViewcubeInputs {
             }
         });
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsGizmoViewcube, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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 />
 
@@ -1217,7 +1218,7 @@ class NgtsGizmoViewcube extends NgtsGizmoViewcubeInputs {
         </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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsGizmoViewcube, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-gizmo-viewcube',
@@ -1267,8 +1268,8 @@ class NgtsGizmoViewportAxis extends NgtSignalStore {
         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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsGizmoViewportAxis, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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()" />
@@ -1277,7 +1278,7 @@ class NgtsGizmoViewportAxis extends NgtSignalStore {
         </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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsGizmoViewportAxis, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-gizmo-viewport-axis',
@@ -1387,8 +1388,8 @@ class NgtsGizmoViewportAxisHead extends NgtSignalStore {
             }
         }
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsGizmoViewportAxisHead, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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()"
@@ -1407,7 +1408,7 @@ class NgtsGizmoViewportAxisHead extends NgtSignalStore {
         </ngt-sprite>
     `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsGizmoViewportAxisHead, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsGizmoViewportAxisHead, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-gizmo-viewport-axis-head',
@@ -1506,8 +1507,8 @@ class NgtsGizmoViewport extends NgtSignalStore {
             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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsGizmoViewport, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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]"
@@ -1596,7 +1597,7 @@ class NgtsGizmoViewport extends NgtSignalStore {
         </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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsGizmoViewport, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-gizmo-viewport',
@@ -1714,6 +1715,149 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Output
             }] } });
 
+extend({ Mesh, GridMaterial, PlaneGeometry });
+class NgtsGrid extends NgtSignalStore {
+    set cellSize(cellSize) {
+        this.set({ cellSize });
+    }
+    set cellThickness(cellThickness) {
+        this.set({ cellThickness });
+    }
+    set cellColor(cellColor) {
+        this.set({ cellColor });
+    }
+    set sectionSize(sectionSize) {
+        this.set({ sectionSize });
+    }
+    set sectionThickness(sectionThickness) {
+        this.set({ sectionThickness });
+    }
+    set sectionColor(sectionColor) {
+        this.set({ sectionColor });
+    }
+    set followCamera(followCamera) {
+        this.set({ followCamera });
+    }
+    set infiniteGrid(infiniteGrid) {
+        this.set({ infiniteGrid });
+    }
+    set fadeDistance(fadeDistance) {
+        this.set({ fadeDistance });
+    }
+    set fadeStrength(fadeStrength) {
+        this.set({ fadeStrength });
+    }
+    set side(side) {
+        this.set({ side });
+    }
+    set args(args) {
+        this.set({ args });
+    }
+    constructor() {
+        super({
+            cellSize: 0.5,
+            sectionSize: 1,
+            fadeDistance: 100,
+            fadeStrength: 1,
+            cellThickness: 0.5,
+            sectionThickness: 1,
+            infiniteGrid: false,
+            followCamera: false,
+            cellColor: '#000000',
+            sectionColor: '#2080ff',
+            side: THREE.BackSide,
+            args: [1, 1, 1],
+        });
+        this.gridRef = injectNgtRef();
+        this.gridCellSize = this.select('cellSize');
+        this.gridSectionSize = this.select('sectionSize');
+        this.gridFadeDistance = this.select('fadeDistance');
+        this.gridFadeStrength = this.select('fadeStrength');
+        this.gridCellThickness = this.select('cellThickness');
+        this.gridSectionThickness = this.select('sectionThickness');
+        this.gridInfiniteGrid = this.select('infiniteGrid');
+        this.gridFollowCamera = this.select('followCamera');
+        this.gridCellColor = this.select('cellColor');
+        this.gridSectionColor = this.select('sectionColor');
+        this.gridSide = this.select('side');
+        this.gridArgs = this.select('args');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: NgtsGrid, isStandalone: true, selector: "ngts-grid", inputs: { gridRef: "gridRef", cellSize: "cellSize", cellThickness: "cellThickness", cellColor: "cellColor", sectionSize: "sectionSize", sectionThickness: "sectionThickness", sectionColor: "sectionColor", followCamera: "followCamera", infiniteGrid: "infiniteGrid", fadeDistance: "fadeDistance", fadeStrength: "fadeStrength", side: "side", args: "args" }, usesInheritance: true, ngImport: i0, template: `
+        <ngt-mesh ngtCompound [ref]="gridRef" [frustumCulled]="false">
+            <ngt-grid-material
+                [transparent]="true"
+                [side]="gridSide()"
+                [cellSize]="gridCellSize()"
+                [sectionSize]="gridSectionSize()"
+                [cellColor]="gridCellColor()"
+                [sectionColor]="gridSectionColor()"
+                [cellThickness]="gridCellThickness()"
+                [sectionThickness]="gridSectionThickness()"
+                [fadeDistance]="gridFadeDistance()"
+                [fadeStrength]="gridFadeStrength()"
+                [infiniteGrid]="gridInfiniteGrid()"
+                [followCamera]="gridFollowCamera()"
+            />
+            <ngt-plane-geometry *args="gridArgs()" />
+        </ngt-mesh>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsGrid, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-grid',
+                    standalone: true,
+                    template: `
+        <ngt-mesh ngtCompound [ref]="gridRef" [frustumCulled]="false">
+            <ngt-grid-material
+                [transparent]="true"
+                [side]="gridSide()"
+                [cellSize]="gridCellSize()"
+                [sectionSize]="gridSectionSize()"
+                [cellColor]="gridCellColor()"
+                [sectionColor]="gridSectionColor()"
+                [cellThickness]="gridCellThickness()"
+                [sectionThickness]="gridSectionThickness()"
+                [fadeDistance]="gridFadeDistance()"
+                [fadeStrength]="gridFadeStrength()"
+                [infiniteGrid]="gridInfiniteGrid()"
+                [followCamera]="gridFollowCamera()"
+            />
+            <ngt-plane-geometry *args="gridArgs()" />
+        </ngt-mesh>
+    `,
+                    imports: [NgtArgs],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { gridRef: [{
+                type: Input
+            }], cellSize: [{
+                type: Input
+            }], cellThickness: [{
+                type: Input
+            }], cellColor: [{
+                type: Input
+            }], sectionSize: [{
+                type: Input
+            }], sectionThickness: [{
+                type: Input
+            }], sectionColor: [{
+                type: Input
+            }], followCamera: [{
+                type: Input
+            }], infiniteGrid: [{
+                type: Input
+            }], fadeDistance: [{
+                type: Input
+            }], fadeStrength: [{
+                type: Input
+            }], side: [{
+                type: Input
+            }], args: [{
+                type: Input
+            }] } });
+
 const v = new THREE.Vector3();
 class NgtsQuadraticBezierLine extends NgtsLineInputs {
     set start(start) {
@@ -1778,8 +1922,8 @@ class NgtsQuadraticBezierLine extends NgtsLineInputs {
         }
         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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsQuadraticBezierLine, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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()"
@@ -1798,7 +1942,7 @@ class NgtsQuadraticBezierLine extends NgtsLineInputs {
         />
     `, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsQuadraticBezierLine, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-quadratic-bezier-line',
@@ -1940,15 +2084,15 @@ class NgtsText3D extends NgtSignalStore {
     #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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsText3D, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsText3D, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsText3D, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-text-3d',
@@ -2086,7 +2230,6 @@ class NgtsText extends NgtSignalStore {
         this.sync = new EventEmitter();
         this.troikaText = new Text();
         this.#store = inject(NgtStore);
-        this.state = this.select();
         inject(DestroyRef).onDestroy(() => {
             this.troikaText.dispose();
         });
@@ -2104,9 +2247,8 @@ class NgtsText extends NgtSignalStore {
         });
     }
     #syncText() {
-        const state = this.select();
         effect(() => {
-            state();
+            this.state();
             const invalidate = this.#store.get('invalidate');
             this.troikaText.sync(() => {
                 invalidate();
@@ -2116,8 +2258,8 @@ 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsText, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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]"
@@ -2155,7 +2297,7 @@ class NgtsText extends NgtSignalStore {
         </ngt-primitive>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtsText, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-text',
@@ -2267,5 +2409,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 { NGTS_GIZMO_HELPER_API, NgtsBillboard, NgtsCatmullRomLine, NgtsCubicBezierLine, NgtsEdges, NgtsGizmoHelper, NgtsGizmoHelperContent, NgtsGizmoViewcube, NgtsGizmoViewport, NgtsGrid, NgtsLine, NgtsQuadraticBezierLine, NgtsText, NgtsText3D };
 //# sourceMappingURL=angular-three-soba-abstractions.mjs.map