angular-three-soba 2.0.0-beta.8 → 2.0.0

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

@@ -1,831 +1,1018 @@
 import * as i0 from '@angular/core';
-import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, effect, TemplateRef, ContentChild, computed, EventEmitter, inject, DestroyRef, Output } from '@angular/core';
-import { extend, signalStore, injectNgtRef, injectBeforeRender, NgtArgs, injectNgtStore } from 'angular-three';
-import * as THREE from 'three';
-import { Group, LOD, LineSegments, LineBasicMaterial, Mesh, PlaneGeometry } from 'three';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
-import { NgtsSobaContent } from 'angular-three-soba/utils';
+import { input, viewChild, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, computed, afterNextRender, untracked, inject, signal, effect, output, DestroyRef } from '@angular/core';
+import { omit, extend, injectBeforeRender, injectStore, pick, checkNeedsUpdate, NgtArgs, getLocalState, resolveRef } from 'angular-three';
+import { mergeInputs } from 'ngxtension/inject-inputs';
+import { Group, Quaternion, Vector3, Vector4, Vector2, Color, CatmullRomCurve3, CubicBezierCurve3, EdgesGeometry, CanvasTexture, BackSide, Plane, Mesh, PlaneGeometry, Object3D, Shape, ExtrudeGeometry, QuadraticBezierCurve3 } from 'three';
+import { injectAutoEffect } from 'ngxtension/auto-effect';
+import { LineSegments2, Line2, LineMaterial, LineSegmentsGeometry, LineGeometry, toCreasedNormals, TextGeometry, mergeVertices } from 'three-stdlib';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { GridMaterial } from 'angular-three-soba/shaders';
-import { toSignal, toObservable } from '@angular/core/rxjs-interop';
-import { switchMap, of, map } from 'rxjs';
-import { TextGeometry, FontLoader } from 'three-stdlib';
+import { assertInjector } from 'ngxtension/assert-injector';
 import { Text, preloadFont } from 'troika-three-text';
+import { injectFont } from 'angular-three-soba/loaders';
 
-extend({ Group });
+const defaultOptions$b = {
+    follow: true,
+    lockX: false,
+    lockY: false,
+    lockZ: false,
+};
 class NgtsBillboard {
-    set _follow(follow) {
-        this.inputs.set({ follow });
-    }
-    set _lockX(lockX) {
-        this.inputs.set({ lockX });
-    }
-    set _lockY(lockY) {
-        this.inputs.set({ lockY });
-    }
-    set _lockZ(lockZ) {
-        this.inputs.set({ lockZ });
-    }
     constructor() {
-        this.inputs = signalStore({ follow: true, lockX: false, lockY: false, lockZ: false });
-        this.billboardRef = injectNgtRef();
+        this.options = input(defaultOptions$b, { transform: mergeInputs(defaultOptions$b) });
+        this.parameters = omit(this.options, ['follow', 'lockX', 'lockY', 'lockZ']);
+        this.groupRef = viewChild.required('group');
+        this.innerRef = viewChild.required('inner');
+        extend({ Group });
+        const q = new Quaternion();
         injectBeforeRender(({ camera }) => {
-            const ref = this.billboardRef.untracked;
-            const { follow, lockX, lockY, lockZ } = this.inputs.get();
-            if (!ref || !follow)
+            const [{ follow, lockX, lockY, lockZ }, group, inner] = [
+                this.options(),
+                this.groupRef().nativeElement,
+                this.innerRef().nativeElement,
+            ];
+            if (!follow || !group)
                 return;
             // save previous rotation in case we're locking an axis
-            const prevRotation = ref.rotation.clone();
+            const prevRotation = group.rotation.clone();
             // always face the camera
-            camera.getWorldQuaternion(ref.quaternion);
-            // re-adjust any axis that is locked
+            group.updateMatrix();
+            group.updateWorldMatrix(false, false);
+            group.getWorldQuaternion(q);
+            camera.getWorldQuaternion(inner.quaternion).premultiply(q.invert());
+            // readjust any axis that is locked
             if (lockX)
-                ref.rotation.x = prevRotation.x;
+                group.rotation.x = prevRotation.x;
             if (lockY)
-                ref.rotation.y = prevRotation.y;
+                group.rotation.y = prevRotation.y;
             if (lockZ)
-                ref.rotation.z = prevRotation.z;
+                group.rotation.z = prevRotation.z;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsBillboard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NgtsBillboard, isStandalone: true, selector: "ngts-billboard", inputs: { billboardRef: "billboardRef", _follow: ["follow", "_follow"], _lockX: ["lockX", "_lockX"], _lockY: ["lockY", "_lockY"], _lockZ: ["lockZ", "_lockZ"] }, ngImport: i0, template: `
-		<ngt-group ngtCompound [ref]="billboardRef">
-			<ng-content />
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsBillboard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsBillboard, isStandalone: true, selector: "ngts-billboard", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "innerRef", first: true, predicate: ["inner"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-group #group [parameters]="parameters()">
+			<ngt-group #inner>
+				<ng-content />
+			</ngt-group>
 		</ngt-group>
-	`, isInline: true }); }
+	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsBillboard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsBillboard, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-billboard',
                     standalone: true,
                     template: `
-		<ngt-group ngtCompound [ref]="billboardRef">
-			<ng-content />
+		<ngt-group #group [parameters]="parameters()">
+			<ngt-group #inner>
+				<ng-content />
+			</ngt-group>
 		</ngt-group>
 	`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { billboardRef: [{
-                type: Input
-            }], _follow: [{
-                type: Input,
-                args: [{ alias: 'follow' }]
-            }], _lockX: [{
-                type: Input,
-                args: [{ alias: 'lockX' }]
-            }], _lockY: [{
-                type: Input,
-                args: [{ alias: 'lockY' }]
-            }], _lockZ: [{
-                type: Input,
-                args: [{ alias: 'lockZ' }]
-            }] } });
+        }], ctorParameters: () => [] });
 
-extend({ LOD });
-class NgtsDetailed {
-    set _distances(distances) {
-        this.inputs.set({ distances });
-    }
-    set _hysteresis(hysteresis) {
-        this.inputs.set({ hysteresis });
+const defaultOptions$a = {
+    lineWidth: 1,
+    segments: false,
+    color: 0xffffff,
+};
+class NgtsLine {
+    // NOTE: use attached event to call computeLineDistances to ensure the geometry has been attached
+    onGeometryAttached({ parent }) {
+        parent.computeLineDistances();
     }
     constructor() {
-        this.inputs = signalStore({ hysteresis: 0 });
-        this.lodRef = injectNgtRef();
-        this.updateChildren();
-    }
-    onBeforeRender({ object, state }) {
-        object.update(state.camera);
-    }
-    updateChildren() {
-        const lodChildren = this.lodRef.children();
-        const _distances = this.inputs.select('distances');
-        const _hysteresis = this.inputs.select('hysteresis');
-        effect(() => {
-            const lod = this.lodRef.nativeElement;
-            if (!lod)
-                return;
-            const [distances, hysteresis, children] = [_distances(), _hysteresis(), lodChildren()];
-            lod.levels.length = 0;
-            children.forEach((child, index) => {
-                lod.addLevel(child, distances[index], hysteresis);
+        this.points = input.required();
+        this.options = input(defaultOptions$a, { transform: mergeInputs(defaultOptions$a) });
+        this.parameters = omit(this.options, ['color', 'vertexColors', 'lineWidth', 'segments', 'linewidth', 'dashed']);
+        this.lineRef = viewChild('line');
+        this.store = injectStore();
+        this.size = this.store.select('size');
+        this.segments = pick(this.options, 'segments');
+        this.vertexColors = pick(this.options, 'vertexColors');
+        this.dashed = pick(this.options, 'dashed');
+        this.color = pick(this.options, 'color');
+        this.lineWidth = pick(this.options, 'lineWidth');
+        this.linewidth = pick(this.options, 'linewidth');
+        this.vertex = computed(() => Boolean(this.vertexColors()));
+        this.resolution = computed(() => [this.size().width, this.size().height]);
+        this.line2 = computed(() => (this.segments() ? new LineSegments2() : new Line2()));
+        this.lineMaterial = new LineMaterial();
+        this.itemSize = computed(() => (this.vertexColors()?.[0]?.length === 4 ? 4 : 3));
+        this.lineGeometry = computed(() => {
+            const geom = this.segments() ? new LineSegmentsGeometry() : new LineGeometry();
+            const pValues = this.points().map((p) => {
+                const isArray = Array.isArray(p);
+                return p instanceof Vector3 || p instanceof Vector4
+                    ? [p.x, p.y, p.z]
+                    : p instanceof 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;
+            });
+            geom.setPositions(pValues.flat());
+            const vertexColors = this.vertexColors();
+            if (vertexColors) {
+                const cValues = vertexColors.map((c) => (c instanceof Color ? c.toArray() : c));
+                // @ts-expect-error - flat() isn't defined
+                geom.setColors(cValues.flat(), this.itemSize());
+            }
+            return geom;
+        });
+        const autoEffect = injectAutoEffect();
+        afterNextRender(() => {
+            autoEffect(() => {
+                const [lineMaterial, dashed] = [this.lineMaterial, this.dashed()];
+                if (dashed) {
+                    lineMaterial.defines['USE_DASH'] = '';
+                }
+                else {
+                    delete lineMaterial.defines['USE_DASH'];
+                }
+                checkNeedsUpdate(lineMaterial);
+            });
+            autoEffect(() => {
+                const [lineGeometry, lineMaterial] = [this.lineGeometry(), this.lineMaterial];
+                return () => {
+                    lineGeometry.dispose();
+                    lineMaterial.dispose();
+                };
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsDetailed, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NgtsDetailed, isStandalone: true, selector: "ngts-detailed", inputs: { lodRef: "lodRef", _distances: ["distances", "_distances"], _hysteresis: ["hysteresis", "_hysteresis"] }, ngImport: i0, template: `
-		<ngt-lOD ngtCompound [ref]="lodRef" (beforeRender)="onBeforeRender($event)">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsLine, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsLine, isStandalone: true, selector: "ngts-line", inputs: { points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "lineRef", first: true, predicate: ["line"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-primitive *args="[line2()]" #line [parameters]="parameters()">
+			<ngt-primitive *args="[lineGeometry()]" attach="geometry" (attached)="onGeometryAttached($any($event))" />
+			<ngt-primitive
+				*args="[lineMaterial]"
+				attach="material"
+				[color]="color()"
+				[vertexColors]="vertex()"
+				[resolution]="resolution()"
+				[linewidth]="linewidth() ?? lineWidth() ?? 1"
+				[dashed]="dashed()"
+				[transparent]="itemSize() === 4"
+				[parameters]="parameters()"
+			/>
 			<ng-content />
-		</ngt-lOD>
-	`, isInline: true }); }
+		</ngt-primitive>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsDetailed, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsLine, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngts-detailed',
+                    selector: 'ngts-line',
                     standalone: true,
                     template: `
-		<ngt-lOD ngtCompound [ref]="lodRef" (beforeRender)="onBeforeRender($event)">
+		<ngt-primitive *args="[line2()]" #line [parameters]="parameters()">
+			<ngt-primitive *args="[lineGeometry()]" attach="geometry" (attached)="onGeometryAttached($any($event))" />
+			<ngt-primitive
+				*args="[lineMaterial]"
+				attach="material"
+				[color]="color()"
+				[vertexColors]="vertex()"
+				[resolution]="resolution()"
+				[linewidth]="linewidth() ?? lineWidth() ?? 1"
+				[dashed]="dashed()"
+				[transparent]="itemSize() === 4"
+				[parameters]="parameters()"
+			/>
 			<ng-content />
-		</ngt-lOD>
+		</ngt-primitive>
 	`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs],
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { lodRef: [{
-                type: Input
-            }], _distances: [{
-                type: Input,
-                args: [{ required: true, alias: 'distances' }]
-            }], _hysteresis: [{
-                type: Input,
-                args: [{ alias: 'hysteresis' }]
-            }] } });
+        }], ctorParameters: () => [] });
 
-extend({ LineSegments, LineBasicMaterial });
-class NgtsEdges {
-    set _threshold(threshold) {
-        this.inputs.set({ threshold });
-    }
-    set _color(color) {
-        this.inputs.set({ color });
-    }
-    set _geometry(geometry) {
-        this.inputs.set({ geometry });
+const defaultOptions$9 = {
+    curveType: 'centripetal',
+    tension: 0.5,
+    segments: 20,
+    closed: false,
+    lineWidth: 1,
+};
+class NgtsCatmullRomLine {
+    constructor() {
+        this.points = input.required();
+        this.options = input(defaultOptions$9, { transform: mergeInputs(defaultOptions$9) });
+        this.parameters = omit(this.options, ['curveType', 'tension', 'segments', 'closed', 'vertexColors']);
+        this.line = viewChild.required(NgtsLine);
+        this.closed = pick(this.options, 'closed');
+        this.curveType = pick(this.options, 'curveType');
+        this.tension = pick(this.options, 'tension');
+        this.segments = pick(this.options, 'segments');
+        this.vertexColors = pick(this.options, 'vertexColors');
+        this.curve = computed(() => {
+            const [points, closed, curveType, tension] = [this.points(), this.closed(), this.curveType(), this.tension()];
+            const mappedPoints = points.map((pt) => pt instanceof Vector3 ? pt : new Vector3(...pt));
+            return new CatmullRomCurve3(mappedPoints, closed, curveType, tension);
+        });
+        this.segmentedPoints = computed(() => {
+            const [curve, segments] = [this.curve(), this.segments()];
+            return curve.getPoints(segments);
+        });
+        this.interpolatedVertexColors = computed(() => {
+            const [vertexColors, segments] = [this.vertexColors(), this.segments()];
+            if (!vertexColors || vertexColors.length < 2)
+                return undefined;
+            if (vertexColors.length === segments + 1)
+                return vertexColors;
+            const mappedColors = vertexColors.map((color) => color instanceof Color ? color : new Color(...color));
+            if (untracked(this.closed))
+                mappedColors.push(mappedColors[0].clone());
+            const iColors = [mappedColors[0]];
+            const divisions = segments / (mappedColors.length - 1);
+            for (let i = 1; 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.lineOptions = computed(() => ({ ...this.parameters(), vertexColors: this.interpolatedVertexColors() }));
     }
-    set _userData(userData) {
-        this.inputs.set({ userData });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsCatmullRomLine, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsCatmullRomLine, isStandalone: true, selector: "ngts-catmull-rom-line", inputs: { points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "line", first: true, predicate: NgtsLine, descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngts-line [points]="segmentedPoints()" [options]="lineOptions()">
+			<ng-content />
+		</ngts-line>
+	`, isInline: true, dependencies: [{ kind: "component", type: NgtsLine, selector: "ngts-line", inputs: ["points", "options"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsCatmullRomLine, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-catmull-rom-line',
+                    standalone: true,
+                    template: `
+		<ngts-line [points]="segmentedPoints()" [options]="lineOptions()">
+			<ng-content />
+		</ngts-line>
+	`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtsLine],
+                }]
+        }] });
+
+const defaultOptions$8 = {
+    lineWidth: 1,
+    segments: 20,
+};
+class NgtsCubicBezierLine {
+    constructor() {
+        this.start = input.required();
+        this.end = input.required();
+        this.midA = input.required();
+        this.midB = input.required();
+        this.options = input(defaultOptions$8, { transform: mergeInputs(defaultOptions$8) });
+        this.parameters = omit(this.options, ['segments']);
+        this.line = viewChild.required(NgtsLine);
+        this.segments = pick(this.options, 'segments');
+        this.points = computed(() => {
+            const [start, end, midA, midB, segments] = [this.start(), this.end(), this.midA(), this.midB(), this.segments()];
+            const startV = start instanceof Vector3 ? start : new Vector3(...start);
+            const endV = end instanceof Vector3 ? end : new Vector3(...end);
+            const midAV = midA instanceof Vector3 ? midA : new Vector3(...midA);
+            const midBV = midB instanceof Vector3 ? midB : new Vector3(...midB);
+            return new CubicBezierCurve3(startV, midAV, midBV, endV).getPoints(segments);
+        });
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsCubicBezierLine, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsCubicBezierLine, isStandalone: true, selector: "ngts-cubic-bezier-line", inputs: { start: { classPropertyName: "start", publicName: "start", isSignal: true, isRequired: true, transformFunction: null }, end: { classPropertyName: "end", publicName: "end", isSignal: true, isRequired: true, transformFunction: null }, midA: { classPropertyName: "midA", publicName: "midA", isSignal: true, isRequired: true, transformFunction: null }, midB: { classPropertyName: "midB", publicName: "midB", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "line", first: true, predicate: NgtsLine, descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngts-line [points]="points()" [options]="parameters()">
+			<ng-content />
+		</ngts-line>
+	`, isInline: true, dependencies: [{ kind: "component", type: NgtsLine, selector: "ngts-line", inputs: ["points", "options"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsCubicBezierLine, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-cubic-bezier-line',
+                    standalone: true,
+                    template: `
+		<ngts-line [points]="points()" [options]="parameters()">
+			<ng-content />
+		</ngts-line>
+	`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtsLine],
+                }]
+        }] });
+
+const defaultOptions$7 = {
+    lineWidth: 1,
+    threshold: 15,
+};
+class NgtsEdges {
     constructor() {
-        this.nullRaycast = () => null;
-        this.inputs = signalStore({ threshold: 15, color: 'black' });
-        this.edgesRef = injectNgtRef();
-        this.geometry = this.inputs.select('geometry');
-        this.threshold = this.inputs.select('threshold');
-        this.color = this.inputs.select('color');
-        effect(() => {
-            const edges = this.edgesRef.nativeElement;
-            if (!edges)
-                return;
-            const parent = this.edgesRef.nativeElement.parent;
-            if (parent) {
-                const [geometry, threshold] = [this.geometry() || parent.geometry, this.threshold()];
-                if (geometry !== edges.userData['currentGeom'] || threshold !== edges.userData['currentThreshold']) {
-                    edges.userData['currentGeom'] = geometry;
-                    edges.userData['currentThreshold'] = threshold;
-                    edges.geometry = new THREE.EdgesGeometry(geometry, threshold);
-                }
-            }
+        this.options = input(defaultOptions$7, { transform: mergeInputs(defaultOptions$7) });
+        this.parameters = omit(this.options, ['threshold', 'geometry']);
+        this.lineOptions = computed(() => ({ ...this.parameters(), raycast: () => null }));
+        this.tmpPoints = [0, 0, 0, 1, 0, 0];
+        this.line = viewChild.required(NgtsLine);
+        const autoEffect = injectAutoEffect();
+        afterNextRender(() => {
+            autoEffect(() => {
+                const line = this.line().lineRef()?.nativeElement;
+                if (!line)
+                    return;
+                const lS = getLocalState(line);
+                if (!lS)
+                    return;
+                const parent = lS.parent();
+                if (!parent)
+                    return;
+                const { geometry: explicitGeometry, threshold } = this.options();
+                const geometry = explicitGeometry ?? parent.geometry;
+                if (!geometry)
+                    return;
+                const cached = this.memoizedGeometry === geometry && this.memoizedThreshold === threshold;
+                if (cached)
+                    return;
+                this.memoizedGeometry = geometry;
+                this.memoizedThreshold = threshold;
+                const points = new EdgesGeometry(geometry, threshold).attributes['position']
+                    .array;
+                line.geometry.setPositions(points);
+                checkNeedsUpdate(line.geometry.attributes['instanceStart']);
+                checkNeedsUpdate(line.geometry.attributes['instanceEnd']);
+                line.computeLineDistances();
+            });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsEdges, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NgtsEdges, isStandalone: true, selector: "ngts-edges", inputs: { edgesRef: "edgesRef", _threshold: ["threshold", "_threshold"], _color: ["color", "_color"], _geometry: ["geometry", "_geometry"], _userData: ["userData", "_userData"] }, queries: [{ propertyName: "content", first: true, predicate: NgtsSobaContent, descendants: true, read: TemplateRef }], ngImport: i0, template: `
-		<ngt-line-segments [ref]="edgesRef" [raycast]="nullRaycast" ngtCompound>
-			<ng-container *ngIf="content; else defaultMaterial" [ngTemplateOutlet]="content" />
-			<ng-template #defaultMaterial>
-				<ngt-line-basic-material [color]="color()" />
-			</ng-template>
-		</ngt-line-segments>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsEdges, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsEdges, isStandalone: true, selector: "ngts-edges", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "line", first: true, predicate: NgtsLine, descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngts-line [points]="tmpPoints" [options]="lineOptions()">
+			<ng-content />
+		</ngts-line>
+	`, isInline: true, dependencies: [{ kind: "component", type: NgtsLine, selector: "ngts-line", inputs: ["points", "options"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsEdges, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsEdges, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-edges',
                     standalone: true,
                     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>
+		<ngts-line [points]="tmpPoints" [options]="lineOptions()">
+			<ng-content />
+		</ngts-line>
+	`,
+                    imports: [NgtsLine],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [] });
+
+const defaultOptions$6 = {
+    size: 1024,
+    width: 16,
+    type: 'linear',
+    innerCircleRadius: 0,
+    outerCircleRadius: 'auto',
+};
+class NgtsGradientTexture {
+    constructor() {
+        this.attach = input('map');
+        this.stops = input.required();
+        this.colors = input.required();
+        this.options = input(defaultOptions$6, { transform: mergeInputs(defaultOptions$6) });
+        this.parameters = omit(this.options, ['size', 'width', 'type', 'innerCircleRadius', 'outerCircleRadius']);
+        this.store = injectStore();
+        this.gl = this.store.select('gl');
+        this.document = inject(DOCUMENT);
+        this.canvas = computed(() => {
+            const canvas = this.document.createElement('canvas');
+            const context = canvas.getContext('2d');
+            const [{ width, size, type, outerCircleRadius, innerCircleRadius }, stops, colors] = [
+                untracked(this.options),
+                this.stops(),
+                this.colors(),
+            ];
+            canvas.width = width;
+            canvas.height = size;
+            let gradient;
+            if (type === 'linear') {
+                gradient = context.createLinearGradient(0, 0, 0, size);
+            }
+            else {
+                const canvasCenterX = canvas.width / 2;
+                const canvasCenterY = canvas.height / 2;
+                const radius = outerCircleRadius !== 'auto'
+                    ? Math.abs(Number(outerCircleRadius))
+                    : Math.sqrt(canvasCenterX ** 2 + canvasCenterY ** 2);
+                gradient = context.createRadialGradient(canvasCenterX, canvasCenterY, Math.abs(innerCircleRadius), canvasCenterX, canvasCenterY, radius);
+            }
+            const tempColor = new Color(); // reuse instance for performance
+            let i = stops.length;
+            while (i--) {
+                gradient.addColorStop(stops[i], tempColor.set(colors[i]).getStyle());
+            }
+            context.save();
+            context.fillStyle = gradient;
+            context.fillRect(0, 0, width, size);
+            context.restore();
+            return canvas;
+        });
+        extend({ CanvasTexture });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsGradientTexture, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtsGradientTexture, isStandalone: true, selector: "ngts-gradient-texture", inputs: { attach: { classPropertyName: "attach", publicName: "attach", isSignal: true, isRequired: false, transformFunction: null }, stops: { classPropertyName: "stops", publicName: "stops", isSignal: true, isRequired: true, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		<ngt-canvas-texture
+			*args="[canvas()]"
+			[attach]="attach()"
+			[colorSpace]="gl().outputColorSpace"
+			[parameters]="parameters()"
+		>
+			<ng-content />
+		</ngt-canvas-texture>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsGradientTexture, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-gradient-texture',
+                    standalone: true,
+                    template: `
+		<ngt-canvas-texture
+			*args="[canvas()]"
+			[attach]="attach()"
+			[colorSpace]="gl().outputColorSpace"
+			[parameters]="parameters()"
+		>
+			<ng-content />
+		</ngt-canvas-texture>
 	`,
-                    imports: [NgIf, NgTemplateOutlet],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs],
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { content: [{
-                type: ContentChild,
-                args: [NgtsSobaContent, { read: TemplateRef }]
-            }], edgesRef: [{
-                type: Input
-            }], _threshold: [{
-                type: Input,
-                args: [{ alias: 'threshold' }]
-            }], _color: [{
-                type: Input,
-                args: [{ alias: 'color' }]
-            }], _geometry: [{
-                type: Input,
-                args: [{ alias: 'geometry' }]
-            }], _userData: [{
-                type: Input,
-                args: [{ alias: 'userData' }]
-            }] } });
+        }], ctorParameters: () => [] });
 
-extend({ GridMaterial, Mesh, PlaneGeometry });
+const defaultOptions$5 = {
+    planeArgs: [],
+    cellSize: 0.5,
+    cellThickness: 0.5,
+    cellColor: 'black',
+    sectionSize: 1,
+    sectionThickness: 1,
+    sectionColor: '#2080ff',
+    infiniteGrid: false,
+    followCamera: false,
+    fadeDistance: 100,
+    fadeStrength: 1,
+    fadeFrom: 1,
+    side: BackSide,
+};
 class NgtsGrid {
-    set _cellSize(cellSize) {
-        this.inputs.set({ cellSize });
-    }
-    set _cellThickness(cellThickness) {
-        this.inputs.set({ cellThickness });
-    }
-    set _cellColor(cellColor) {
-        this.inputs.set({ cellColor });
-    }
-    set _sectionSize(sectionSize) {
-        this.inputs.set({ sectionSize });
-    }
-    set _sectionThickness(sectionThickness) {
-        this.inputs.set({ sectionThickness });
-    }
-    set _sectionColor(sectionColor) {
-        this.inputs.set({ sectionColor });
-    }
-    set _followCamera(followCamera) {
-        this.inputs.set({ followCamera });
-    }
-    set _infiniteGrid(infiniteGrid) {
-        this.inputs.set({ infiniteGrid });
-    }
-    set _fadeDistance(fadeDistance) {
-        this.inputs.set({ fadeDistance });
-    }
-    set _fadeStrength(fadeStrength) {
-        this.inputs.set({ fadeStrength });
-    }
-    set _side(side) {
-        this.inputs.set({ side });
-    }
-    set _args(args) {
-        this.inputs.set({ args });
-    }
     constructor() {
-        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.options = input(defaultOptions$5, { transform: mergeInputs(defaultOptions$5) });
+        this.parameters = omit(this.options, [
+            'planeArgs',
+            'cellSize',
+            'cellThickness',
+            'cellColor',
+            'sectionSize',
+            'sectionThickness',
+            'sectionColor',
+            'infiniteGrid',
+            'followCamera',
+            'fadeDistance',
+            'fadeStrength',
+            'fadeFrom',
+            'side',
+        ]);
+        this.meshRef = viewChild.required('mesh');
+        this.plane = new Plane();
+        this.upVector = new Vector3(0, 1, 0);
+        this.zeroVector = new Vector3(0, 0, 0);
+        this.planeArgs = pick(this.options, 'planeArgs');
+        this.side = pick(this.options, 'side');
+        this.uniforms = computed(() => {
+            const { cellSize, sectionSize, cellColor, sectionColor, cellThickness, sectionThickness, fadeDistance, fadeStrength, fadeFrom, infiniteGrid, followCamera, } = this.options();
+            return {
+                cellSize,
+                sectionSize,
+                cellColor,
+                sectionColor,
+                cellThickness,
+                sectionThickness,
+                fadeDistance,
+                fadeStrength,
+                fadeFrom,
+                infiniteGrid,
+                followCamera,
+            };
         });
-        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);
+        extend({ Mesh, PlaneGeometry, GridMaterial });
         injectBeforeRender(({ camera }) => {
-            this.plane
-                .setFromNormalAndCoplanarPoint(this.upVector, this.zeroVector)
-                .applyMatrix4(this.gridRef.nativeElement.matrixWorld);
-            const gridMaterial = this.gridRef.nativeElement.material;
+            const mesh = this.meshRef().nativeElement;
+            this.plane.setFromNormalAndCoplanarPoint(this.upVector, this.zeroVector).applyMatrix4(mesh.matrixWorld);
+            const gridMaterial = mesh.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);
+            worldPlanePosition.value.set(0, 0, 0).applyMatrix4(mesh.matrixWorld);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NgtsGrid, isStandalone: true, selector: "ngts-grid", inputs: { gridRef: "gridRef", _cellSize: ["cellSize", "_cellSize"], _cellThickness: ["cellThickness", "_cellThickness"], _cellColor: ["cellColor", "_cellColor"], _sectionSize: ["sectionSize", "_sectionSize"], _sectionThickness: ["sectionThickness", "_sectionThickness"], _sectionColor: ["sectionColor", "_sectionColor"], _followCamera: ["followCamera", "_followCamera"], _infiniteGrid: ["infiniteGrid", "_infiniteGrid"], _fadeDistance: ["fadeDistance", "_fadeDistance"], _fadeStrength: ["fadeStrength", "_fadeStrength"], _side: ["side", "_side"], _args: ["args", "_args"] }, ngImport: i0, template: `
-		<ngt-mesh ngtCompound [ref]="gridRef" [frustumCulled]="false">
-			<ngt-plane-geometry *args="args()" />
-			<ngt-grid-material
-				[transparent]="true"
-				[side]="side()"
-				[cellSize]="cellSize()"
-				[cellColor]="cellColor()"
-				[cellThickness]="cellThickness()"
-				[sectionSize]="sectionSize()"
-				[sectionColor]="sectionColor()"
-				[sectionThickness]="sectionThickness()"
-				[fadeDistance]="fadeDistance()"
-				[fadeStrength]="fadeStrength()"
-				[infiniteGrid]="infiniteGrid()"
-				[followCamera]="followCamera()"
-			>
-				<ngt-value attach="extensions.derivatives" [rawValue]="false" />
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsGrid, isStandalone: true, selector: "ngts-grid", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "meshRef", first: true, predicate: ["mesh"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-mesh #mesh [frustumCulled]="false" [parameters]="parameters()">
+			<ngt-plane-geometry *args="planeArgs()" />
+			<ngt-grid-material [transparent]="true" [side]="side()" [parameters]="uniforms()">
+				<ngt-value attach="extensions.derivatives" [rawValue]="true" />
 			</ngt-grid-material>
 			<ng-content />
 		</ngt-mesh>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsGrid, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsGrid, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-grid',
                     standalone: true,
                     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-mesh #mesh [frustumCulled]="false" [parameters]="parameters()">
+			<ngt-plane-geometry *args="planeArgs()" />
+			<ngt-grid-material [transparent]="true" [side]="side()" [parameters]="uniforms()">
+				<ngt-value attach="extensions.derivatives" [rawValue]="true" />
 			</ngt-grid-material>
 			<ng-content />
 		</ngt-mesh>
 	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgtArgs],
+                }]
+        }], ctorParameters: () => [] });
+
+function injectHelper(object, helperConstructor, { injector, args = () => [], } = {}) {
+    return assertInjector(injectHelper, injector, () => {
+        const store = injectStore();
+        const scene = store.select('scene');
+        const helper = signal(null);
+        effect((onCleanup) => {
+            let currentHelper = undefined;
+            const maybeObject3D = object();
+            if (!maybeObject3D)
+                return;
+            const object3D = resolveRef(maybeObject3D);
+            if (!object3D)
+                return;
+            currentHelper = new (helperConstructor())(object3D, ...args());
+            if (!currentHelper)
+                return;
+            untracked(() => {
+                helper.set(currentHelper);
+            });
+            // Prevent the helpers from blocking rays
+            currentHelper.traverse((child) => (child.raycast = () => null));
+            scene().add(currentHelper);
+            onCleanup(() => {
+                helper.set(null);
+                scene().remove(currentHelper);
+                currentHelper.dispose?.();
+            });
+        });
+        injectBeforeRender(() => {
+            const currentHelper = helper();
+            if (currentHelper)
+                currentHelper.update();
+        });
+        return helper.asReadonly();
+    });
+}
+class NgtsHelper {
+    constructor() {
+        this.type = input.required();
+        this.options = input([]);
+        this.helperRef = viewChild.required('helper');
+        this.parent = computed(() => {
+            const helper = this.helperRef().nativeElement;
+            if (!helper)
+                return;
+            const localState = getLocalState(helper);
+            if (!localState)
+                return;
+            return localState.parent();
+        });
+        this.helper = injectHelper(this.parent, this.type, { args: this.options });
+        extend({ Object3D });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsHelper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsHelper, isStandalone: true, selector: "ngts-helper", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "helperRef", first: true, predicate: ["helper"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-object3D #helper />
+	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsHelper, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ngts-helper',
+                    template: `
+		<ngt-object3D #helper />
+	`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], 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' }]
-            }] } });
+        }], ctorParameters: () => [] });
 
-extend({ Mesh, TextGeometry });
-class NgtsText3D {
+const defaultOptions$4 = {
+    height: 1,
+    bevelEnabled: false,
+};
+class NgtsPrismGeometry {
     constructor() {
-        this.inputs = signalStore({
-            lineHeight: 1,
-            letterSpacing: 0,
-            size: 1,
-            height: 0.2,
-            bevelThickness: 0.1,
-            bevelSize: 0.01,
-            bevelEnabled: false,
-            bevelOffset: 0,
-            bevelSegments: 4,
-            curveSegments: 8,
+        this.attach = input('geometry');
+        this.vertices = input.required();
+        this.options = input(defaultOptions$4, { transform: mergeInputs(defaultOptions$4) });
+        this.parameters = computed(() => ({ ...this.options(), depth: this.options().height }));
+        this.shape = computed(() => {
+            const vertices = this.vertices();
+            const interpolatedVertices = vertices.map((v) => (v instanceof Vector2 ? v : new Vector2(...v)));
+            return new Shape(interpolatedVertices);
         });
-        this.textRef = injectNgtRef();
-        this.fontData = toSignal(toObservable(this.inputs.select('font')).pipe(switchMap((font) => {
-            if (typeof font === 'string')
-                return fetch(font).then((res) => res.json());
-            return of(font);
-        }), map((fontData) => new FontLoader().parse(fontData))));
-        this.text = this.inputs.select('text');
-        this.size = this.inputs.select('size');
-        this.height = this.inputs.select('height');
-        this.bevelThickness = this.inputs.select('bevelThickness');
-        this.bevelSize = this.inputs.select('bevelSize');
-        this.bevelEnabled = this.inputs.select('bevelEnabled');
-        this.bevelSegments = this.inputs.select('bevelSegments');
-        this.bevelOffset = this.inputs.select('bevelOffset');
-        this.curveSegments = this.inputs.select('curveSegments');
-        this.letterSpacing = this.inputs.select('letterSpacing');
-        this.lineHeight = this.inputs.select('lineHeight');
-        this.geometryArgs = computed(() => {
-            const fontData = this.fontData();
-            if (!fontData || !fontData.data)
-                return null;
-            return [
-                this.text(),
-                {
-                    font: fontData,
-                    size: this.size(),
-                    height: this.height(),
-                    bevelThickness: this.bevelThickness(),
-                    bevelSize: this.bevelSize(),
-                    bevelSegments: this.bevelSegments(),
-                    bevelEnabled: this.bevelEnabled(),
-                    bevelOffset: this.bevelOffset(),
-                    curveSegments: this.curveSegments(),
-                    letterSpacing: this.letterSpacing(),
-                    lineHeight: this.lineHeight(),
-                },
+        this.geometryRef = viewChild('geometry');
+        extend({ ExtrudeGeometry });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsPrismGeometry, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsPrismGeometry, isStandalone: true, selector: "ngts-prism-geometry", inputs: { attach: { classPropertyName: "attach", publicName: "attach", isSignal: true, isRequired: false, transformFunction: null }, vertices: { classPropertyName: "vertices", publicName: "vertices", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "geometryRef", first: true, predicate: ["geometry"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-extrude-geometry #geometry *args="[shape(), parameters()]" [attach]="attach()">
+			<ng-content />
+		</ngt-extrude-geometry>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsPrismGeometry, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-prism-geometry',
+                    standalone: true,
+                    template: `
+		<ngt-extrude-geometry #geometry *args="[shape(), parameters()]" [attach]="attach()">
+			<ng-content />
+		</ngt-extrude-geometry>
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs],
+                }]
+        }], ctorParameters: () => [] });
+
+const defaultOptions$3 = {
+    lineWidth: 1,
+    segments: 20,
+};
+class NgtsQuadraticBezierLine {
+    constructor() {
+        this.start = input([0, 0, 0]);
+        this.end = input([0, 0, 0]);
+        this.mid = input();
+        this.options = input(defaultOptions$3, { transform: mergeInputs(defaultOptions$3) });
+        this.parameters = omit(this.options, ['segments']);
+        this.segments = pick(this.options, 'segments');
+        this.line = viewChild.required(NgtsLine);
+        this.points = computed(() => this.getPoints(this.start(), this.end(), this.mid(), this.segments()));
+        this.curve = new QuadraticBezierCurve3();
+    }
+    setPoints(start, end, mid) {
+        const points = this.getPoints(start, end, mid);
+        const geometry = this.line().lineGeometry();
+        if (geometry)
+            geometry.setPositions(points.map((p) => p.toArray()).flat());
+    }
+    getPoints(start, end, mid, segments = 20) {
+        if (start instanceof Vector3)
+            this.curve.v0.copy(start);
+        else
+            this.curve.v0.set(...start);
+        if (end instanceof Vector3)
+            this.curve.v2.copy(end);
+        else
+            this.curve.v2.set(...end);
+        if (mid instanceof Vector3) {
+            this.curve.v1.copy(mid);
+        }
+        else if (Array.isArray(mid)) {
+            this.curve.v1.set(...mid);
+        }
+        else {
+            this.curve.v1.copy(this.curve.v0
+                .clone()
+                .add(this.curve.v2.clone().sub(this.curve.v0))
+                .add(new Vector3(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: "18.2.0", ngImport: i0, type: NgtsQuadraticBezierLine, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsQuadraticBezierLine, isStandalone: true, selector: "ngts-quadratic-bezier-line", inputs: { start: { classPropertyName: "start", publicName: "start", isSignal: true, isRequired: false, transformFunction: null }, end: { classPropertyName: "end", publicName: "end", isSignal: true, isRequired: false, transformFunction: null }, mid: { classPropertyName: "mid", publicName: "mid", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "line", first: true, predicate: NgtsLine, descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngts-line [points]="points()" [options]="parameters()">
+			<ng-content />
+		</ngts-line>
+	`, isInline: true, dependencies: [{ kind: "component", type: NgtsLine, selector: "ngts-line", inputs: ["points", "options"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsQuadraticBezierLine, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-quadratic-bezier-line',
+                    standalone: true,
+                    template: `
+		<ngts-line [points]="points()" [options]="parameters()">
+			<ng-content />
+		</ngts-line>
+	`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtsLine],
+                }]
+        }] });
+
+const eps = 0.00001;
+function createShape(width, height, radius0) {
+    const shape = new Shape();
+    const radius = radius0 - eps;
+    shape.absarc(eps, eps, eps, -Math.PI / 2, -Math.PI, true);
+    shape.absarc(eps, height - radius * 2, eps, Math.PI, Math.PI / 2, true);
+    shape.absarc(width - radius * 2, height - radius * 2, eps, Math.PI / 2, 0, true);
+    shape.absarc(width - radius * 2, eps, eps, 0, -Math.PI / 2, true);
+    return shape;
+}
+const defaultOptions$2 = {
+    width: 1,
+    height: 1,
+    depth: 1,
+    radius: 0.05,
+    smoothness: 4,
+    bevelSegments: 4,
+    creaseAngle: 0.4,
+    steps: 1,
+};
+class NgtsRoundedBox {
+    constructor() {
+        this.options = input(defaultOptions$2, { transform: mergeInputs(defaultOptions$2) });
+        this.parameters = omit(this.options, [
+            'width',
+            'height',
+            'depth',
+            'radius',
+            'smoothness',
+            'bevelSegments',
+            'steps',
+            'creaseAngle',
+        ]);
+        this.width = pick(this.options, 'width');
+        this.height = pick(this.options, 'height');
+        this.depth = pick(this.options, 'depth');
+        this.radius = pick(this.options, 'radius');
+        this.smoothness = pick(this.options, 'smoothness');
+        this.bevelSegments = pick(this.options, 'bevelSegments');
+        this.steps = pick(this.options, 'steps');
+        this.creaseAngle = pick(this.options, 'creaseAngle');
+        this.meshRef = viewChild.required('mesh');
+        this.geometryRef = viewChild('geometry');
+        this.shape = computed(() => {
+            const [width, height, radius] = [this.width(), this.height(), this.radius()];
+            return createShape(width, height, radius);
+        });
+        this.params = computed(() => {
+            const [depth, radius, smoothness, bevelSegments, steps] = [
+                this.depth(),
+                this.radius(),
+                this.smoothness(),
+                untracked(this.bevelSegments),
+                untracked(this.steps),
             ];
+            return {
+                depth: depth - radius * 2,
+                bevelEnabled: true,
+                bevelSegments: bevelSegments * 2,
+                steps,
+                bevelSize: radius - eps,
+                bevelThickness: radius,
+                curveSegments: smoothness,
+            };
+        });
+        extend({ ExtrudeGeometry, Mesh });
+        const autoEffect = injectAutoEffect();
+        afterNextRender(() => {
+            autoEffect(() => {
+                const geometry = this.geometryRef()?.nativeElement;
+                if (!geometry)
+                    return;
+                this.shape();
+                this.params();
+                geometry.center();
+                toCreasedNormals(geometry, untracked(this.creaseAngle));
+            });
         });
     }
-    set _font(font) {
-        this.inputs.set({ font });
-    }
-    set _text(text) {
-        this.inputs.set({ text });
-    }
-    set _bevelEnabled(bevelEnabled) {
-        this.inputs.set({ bevelEnabled });
-    }
-    set _bevelOffset(bevelOffset) {
-        this.inputs.set({ bevelOffset });
-    }
-    set _bevelSize(bevelSize) {
-        this.inputs.set({ bevelSize });
-    }
-    set _bevelThickness(bevelThickness) {
-        this.inputs.set({ bevelThickness });
-    }
-    set _curveSegments(curveSegments) {
-        this.inputs.set({ curveSegments });
-    }
-    set _bevelSegments(bevelSegments) {
-        this.inputs.set({ bevelSegments });
-    }
-    set _height(height) {
-        this.inputs.set({ height });
-    }
-    set _size(size) {
-        this.inputs.set({ size });
-    }
-    set _lineHeight(lineHeight) {
-        this.inputs.set({ lineHeight });
-    }
-    set _letterSpacing(letterSpacing) {
-        this.inputs.set({ letterSpacing });
-    }
-    set _smooth(smooth) {
-        this.inputs.set({ smooth });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsText3D, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NgtsText3D, isStandalone: true, selector: "ngts-text-3d", inputs: { textRef: "textRef", _font: ["font", "_font"], _text: ["text", "_text"], _bevelEnabled: ["bevelEnabled", "_bevelEnabled"], _bevelOffset: ["bevelOffset", "_bevelOffset"], _bevelSize: ["bevelSize", "_bevelSize"], _bevelThickness: ["bevelThickness", "_bevelThickness"], _curveSegments: ["curveSegments", "_curveSegments"], _bevelSegments: ["bevelSegments", "_bevelSegments"], _height: ["height", "_height"], _size: ["size", "_size"], _lineHeight: ["lineHeight", "_lineHeight"], _letterSpacing: ["letterSpacing", "_letterSpacing"], _smooth: ["smooth", "_smooth"] }, ngImport: i0, template: `
-		<ngt-mesh ngtCompound [ref]="textRef">
-			<ngt-text-geometry *args="geometryArgs()" />
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsRoundedBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsRoundedBox, isStandalone: true, selector: "ngts-rounded-box", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "meshRef", first: true, predicate: ["mesh"], descendants: true, isSignal: true }, { propertyName: "geometryRef", first: true, predicate: ["geometry"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-mesh #mesh [parameters]="parameters()">
+			<ngt-extrude-geometry #geometry *args="[shape(), params()]" />
 			<ng-content />
 		</ngt-mesh>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsText3D, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsRoundedBox, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngts-text-3d',
+                    selector: 'ngts-rounded-box',
                     standalone: true,
                     template: `
-		<ngt-mesh ngtCompound [ref]="textRef">
-			<ngt-text-geometry *args="geometryArgs()" />
+		<ngt-mesh #mesh [parameters]="parameters()">
+			<ngt-extrude-geometry #geometry *args="[shape(), params()]" />
 			<ng-content />
 		</ngt-mesh>
 	`,
-                    imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs],
                 }]
-        }], propDecorators: { textRef: [{
-                type: Input
-            }], _font: [{
-                type: Input,
-                args: [{ required: true, alias: 'font' }]
-            }], _text: [{
-                type: Input,
-                args: [{ required: true, alias: 'text' }]
-            }], _bevelEnabled: [{
-                type: Input,
-                args: [{ alias: 'bevelEnabled' }]
-            }], _bevelOffset: [{
-                type: Input,
-                args: [{ alias: 'bevelOffset' }]
-            }], _bevelSize: [{
-                type: Input,
-                args: [{ alias: 'bevelSize' }]
-            }], _bevelThickness: [{
-                type: Input,
-                args: [{ alias: 'bevelThickness' }]
-            }], _curveSegments: [{
-                type: Input,
-                args: [{ alias: 'curveSegments' }]
-            }], _bevelSegments: [{
-                type: Input,
-                args: [{ alias: 'bevelSegments' }]
-            }], _height: [{
-                type: Input,
-                args: [{ alias: 'height' }]
-            }], _size: [{
-                type: Input,
-                args: [{ alias: 'size' }]
-            }], _lineHeight: [{
-                type: Input,
-                args: [{ alias: 'lineHeight' }]
-            }], _letterSpacing: [{
-                type: Input,
-                args: [{ alias: 'letterSpacing' }]
-            }], _smooth: [{
-                type: Input,
-                args: [{ alias: 'smooth' }]
-            }] } });
+        }], ctorParameters: () => [] });
 
+const defaultOptions$1 = {
+    sdfGlyphSize: 64,
+    anchorX: 'center',
+    anchorY: 'middle',
+    fontSize: 1,
+};
 class NgtsText {
-    set text(text) {
-        this.inputs.set({ text });
-    }
-    set font(font) {
-        this.inputs.set({ font });
-    }
-    set fontSize(fontSize) {
-        this.inputs.set({ fontSize });
-    }
-    set anchorX(anchorX) {
-        this.inputs.set({ anchorX });
-    }
-    set anchorY(anchorY) {
-        this.inputs.set({ anchorY });
-    }
-    set sdfGlyphSize(sdfGlyphSize) {
-        this.inputs.set({ sdfGlyphSize });
-    }
-    set characters(characters) {
-        this.inputs.set({ characters });
-    }
-    set color(color) {
-        this.inputs.set({ color });
-    }
-    set maxWidth(maxWidth) {
-        this.inputs.set({ maxWidth });
-    }
-    set lineHeight(lineHeight) {
-        this.inputs.set({ lineHeight });
-    }
-    set letterSpacing(letterSpacing) {
-        this.inputs.set({ letterSpacing });
-    }
-    set textAlign(textAlign) {
-        this.inputs.set({ textAlign });
-    }
-    set clipRect(clipRect) {
-        this.inputs.set({ clipRect });
-    }
-    set depthOffset(depthOffset) {
-        this.inputs.set({ depthOffset });
-    }
-    set direction(direction) {
-        this.inputs.set({ direction });
-    }
-    set overflowWrap(overflowWrap) {
-        this.inputs.set({ overflowWrap });
-    }
-    set whiteSpace(whiteSpace) {
-        this.inputs.set({ whiteSpace });
-    }
-    set outlineWidth(outlineWidth) {
-        this.inputs.set({ outlineWidth });
-    }
-    set outlineOffsetX(outlineOffsetX) {
-        this.inputs.set({ outlineOffsetX });
-    }
-    set outlineOffsetY(outlineOffsetY) {
-        this.inputs.set({ outlineOffsetY });
-    }
-    set outlineBlur(outlineBlur) {
-        this.inputs.set({ outlineBlur });
-    }
-    set outlineColor(outlineColor) {
-        this.inputs.set({ outlineColor });
-    }
-    set outlineOpacity(outlineOpacity) {
-        this.inputs.set({ outlineOpacity });
-    }
-    set strokeWidth(strokeWidth) {
-        this.inputs.set({ strokeWidth });
-    }
-    set strokeColor(strokeColor) {
-        this.inputs.set({ strokeColor });
-    }
-    set strokeOpacity(strokeOpacity) {
-        this.inputs.set({ strokeOpacity });
-    }
-    set fillOpacity(fillOpacity) {
-        this.inputs.set({ fillOpacity });
-    }
-    set debugSDF(debugSDF) {
-        this.inputs.set({ debugSDF });
-    }
     constructor() {
-        this.inputs = signalStore({
-            fontSize: 1,
-            sdfGlyphSize: 64,
-            anchorX: 'center',
-            anchorY: 'middle',
-        });
-        this.textRef = injectNgtRef();
-        this.sync = new EventEmitter();
-        this.troikaText = new Text();
-        this.store = injectNgtStore();
+        this.text = input.required();
+        this.options = input(defaultOptions$1, { transform: mergeInputs(defaultOptions$1) });
+        this.parameters = omit(this.options, ['font', 'fontSize', 'sdfGlyphSize', 'anchorX', 'anchorY', 'characters']);
+        this.synced = output();
+        this.autoEffect = injectAutoEffect();
+        this.store = injectStore();
+        this.invalidate = this.store.select('invalidate');
+        this.characters = pick(this.options, 'characters');
+        this.font = pick(this.options, 'font');
+        this.anchorX = pick(this.options, 'anchorX');
+        this.anchorY = pick(this.options, 'anchorY');
+        this.sdfGlyphSize = pick(this.options, 'sdfGlyphSize');
+        this.fontSize = pick(this.options, 'fontSize');
+        this.troikaMesh = new Text();
         inject(DestroyRef).onDestroy(() => {
-            this.troikaText.dispose();
+            this.troikaMesh.dispose();
         });
-        this.preloadFont();
-        this.syncText();
-    }
-    preloadFont() {
-        const _font = this.inputs.select('font');
-        const _characters = this.inputs.select('characters');
-        effect(() => {
-            const [font, characters] = [_font(), _characters()];
-            const invalidate = this.store.get('invalidate');
-            preloadFont({ font, characters }, () => invalidate());
+        // NOTE: this could be just effect but autoEffect is used for consistency
+        this.autoEffect(() => {
+            const [font, characters, invalidate] = [this.font(), this.characters(), this.invalidate()];
+            if (font) {
+                preloadFont({ font, characters }, () => invalidate());
+            }
         });
-    }
-    syncText() {
-        effect(() => {
-            const [invalidate] = [this.store.get('invalidate'), this.inputs.state()];
-            this.troikaText.sync(() => {
-                invalidate();
-                if (this.sync.observed) {
-                    this.sync.emit(this.troikaText);
-                }
+        afterNextRender(() => {
+            this.autoEffect(() => {
+                const [invalidate] = [this.invalidate(), this.text(), this.options()];
+                this.troikaMesh.sync(() => {
+                    invalidate();
+                    this.synced.emit(this.troikaMesh);
+                });
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsText, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NgtsText, isStandalone: true, selector: "ngts-text", inputs: { textRef: "textRef", text: "text", font: "font", fontSize: "fontSize", anchorX: "anchorX", anchorY: "anchorY", sdfGlyphSize: "sdfGlyphSize", characters: "characters", color: "color", maxWidth: "maxWidth", lineHeight: "lineHeight", letterSpacing: "letterSpacing", textAlign: "textAlign", clipRect: "clipRect", depthOffset: "depthOffset", direction: "direction", overflowWrap: "overflowWrap", whiteSpace: "whiteSpace", outlineWidth: "outlineWidth", outlineOffsetX: "outlineOffsetX", outlineOffsetY: "outlineOffsetY", outlineBlur: "outlineBlur", outlineColor: "outlineColor", outlineOpacity: "outlineOpacity", strokeWidth: "strokeWidth", strokeColor: "strokeColor", strokeOpacity: "strokeOpacity", fillOpacity: "fillOpacity", debugSDF: "debugSDF" }, outputs: { sync: "sync" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsText, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtsText, isStandalone: true, selector: "ngts-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { synced: "synced" }, ngImport: i0, template: `
 		<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"
+			*args="[troikaMesh]"
+			[text]="text()"
+			[font]="font()"
+			[anchorX]="anchorX()"
+			[anchorY]="anchorY()"
+			[sdfGlyphSize]="sdfGlyphSize()"
+			[fontSize]="fontSize()"
+			[parameters]="parameters()"
 		>
 			<ng-content />
 		</ngt-primitive>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsText, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-text',
                     standalone: true,
                     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"
+			*args="[troikaMesh]"
+			[text]="text()"
+			[font]="font()"
+			[anchorX]="anchorX()"
+			[anchorY]="anchorY()"
+			[sdfGlyphSize]="sdfGlyphSize()"
+			[fontSize]="fontSize()"
+			[parameters]="parameters()"
 		>
 			<ng-content />
 		</ngt-primitive>
+	`,
+                    imports: [NgtArgs, NgTemplateOutlet],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [] });
+
+const defaultOptions = {
+    letterSpacing: 0,
+    lineHeight: 1,
+    size: 1,
+    height: 0.2,
+    bevelThickness: 0.1,
+    bevelSize: 0.01,
+    bevelEnabled: false,
+    bevelOffset: 0,
+    bevelSegments: 4,
+    curveSegments: 8,
+};
+class NgtsText3D {
+    constructor() {
+        this.font = input.required();
+        this.text = input.required();
+        this.options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
+        this.parameters = omit(this.options, [
+            'letterSpacing',
+            'lineHeight',
+            'size',
+            'height',
+            'bevelThickness',
+            'bevelSize',
+            'bevelEnabled',
+            'bevelOffset',
+            'bevelSegments',
+            'curveSegments',
+            'smooth',
+        ]);
+        this.meshRef = viewChild('mesh');
+        this.loadedFont = injectFont(this.font);
+        this.smooth = pick(this.options, 'smooth');
+        this.textOptions = pick(this.options, [
+            'letterSpacing',
+            'lineHeight',
+            'size',
+            'height',
+            'bevelThickness',
+            'bevelSize',
+            'bevelEnabled',
+            'bevelOffset',
+            'bevelSegments',
+            'curveSegments',
+        ]);
+        this.textArgs = computed(() => {
+            const [text, font, textOptions] = [this.text(), this.loadedFont(), this.textOptions()];
+            if (!font)
+                return null;
+            return [text, { font, ...textOptions }];
+        });
+        extend({ Mesh, TextGeometry });
+        const autoEffect = injectAutoEffect();
+        afterNextRender(() => {
+            autoEffect(() => {
+                const [mesh, smooth, textArgs] = [this.meshRef()?.nativeElement, this.smooth(), this.textArgs()];
+                if (!textArgs || !mesh)
+                    return;
+                if (smooth) {
+                    mesh.geometry = mergeVertices(mesh.geometry, smooth);
+                    mesh.geometry.computeVertexNormals();
+                }
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsText3D, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsText3D, isStandalone: true, selector: "ngts-text-3d", inputs: { font: { classPropertyName: "font", publicName: "font", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "meshRef", first: true, predicate: ["mesh"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-mesh #mesh [parameters]="parameters()">
+			<ngt-text-geometry *args="textArgs()" />
+			<ng-content />
+		</ngt-mesh>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsText3D, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-text-3d',
+                    standalone: true,
+                    template: `
+		<ngt-mesh #mesh [parameters]="parameters()">
+			<ngt-text-geometry *args="textArgs()" />
+			<ng-content />
+		</ngt-mesh>
 	`,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { textRef: [{
-                type: Input
-            }], text: [{
-                type: Input,
-                args: [{ required: true }]
-            }], font: [{
-                type: Input
-            }], fontSize: [{
-                type: Input
-            }], anchorX: [{
-                type: Input
-            }], anchorY: [{
-                type: Input
-            }], sdfGlyphSize: [{
-                type: Input
-            }], characters: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], maxWidth: [{
-                type: Input
-            }], lineHeight: [{
-                type: Input
-            }], letterSpacing: [{
-                type: Input
-            }], textAlign: [{
-                type: Input
-            }], clipRect: [{
-                type: Input
-            }], depthOffset: [{
-                type: Input
-            }], direction: [{
-                type: Input
-            }], overflowWrap: [{
-                type: Input
-            }], whiteSpace: [{
-                type: Input
-            }], outlineWidth: [{
-                type: Input
-            }], outlineOffsetX: [{
-                type: Input
-            }], outlineOffsetY: [{
-                type: Input
-            }], outlineBlur: [{
-                type: Input
-            }], outlineColor: [{
-                type: Input
-            }], outlineOpacity: [{
-                type: Input
-            }], strokeWidth: [{
-                type: Input
-            }], strokeColor: [{
-                type: Input
-            }], strokeOpacity: [{
-                type: Input
-            }], fillOpacity: [{
-                type: Input
-            }], debugSDF: [{
-                type: Input
-            }], sync: [{
-                type: Output
-            }] } });
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgtsBillboard, NgtsDetailed, NgtsEdges, NgtsGrid, NgtsText, NgtsText3D };
+export { NgtsBillboard, NgtsCatmullRomLine, NgtsCubicBezierLine, NgtsEdges, NgtsGradientTexture, NgtsGrid, NgtsHelper, NgtsLine, NgtsPrismGeometry, NgtsQuadraticBezierLine, NgtsRoundedBox, NgtsText, NgtsText3D, injectHelper };
 //# sourceMappingURL=angular-three-soba-abstractions.mjs.map