angular-three-postprocessing 4.0.0-next.99 → 4.0.1

package/fesm2022/angular-three-postprocessing.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, input, Directive, computed, viewChild, effect, untracked } from '@angular/core';
+import { inject, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, Component, input, Directive, computed, viewChild, effect, untracked } from '@angular/core';
 import { injectStore, pick, extend, getInstanceState, beforeRender, NgtArgs, vector2, omit, resolveRef, vector3, is, NgtSelectionApi } from 'angular-three';
 import { createNoopInjectionToken } from 'ngxtension/create-injection-token';
 import { mergeInputs } from 'ngxtension/inject-inputs';
@@ -9,20 +9,48 @@ import { Group } from 'three';
 import { isWebGL2Available } from 'three-stdlib';
 import { easing } from 'maath';
 
+/**
+ * Injection token for providing default effect options.
+ *
+ * Use `injectDefaultEffectOptions` to inject default options in effect components.
+ * Use `provideDefaultEffectOptions` to provide default options for effects.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD, opacity: 0.5 })]
+ * })
+ * export class MyEffect {}
+ * ```
+ */
 const [injectDefaultEffectOptions, provideDefaultEffectOptions] = createNoopInjectionToken('Default Effect options');
+/**
+ * Component that applies blend mode settings to a postprocessing effect.
+ *
+ * This component is used internally by effect components to apply `blendFunction`
+ * and `opacity` values to the effect's blend mode.
+ *
+ * @example
+ * ```html
+ * <ngt-bloom-effect *args="[options()]">
+ *   <ngtp-effect-blend-mode />
+ * </ngt-bloom-effect>
+ * ```
+ */
 class NgtpEffectBlendMode {
     constructor() {
+        /** Reference to the parent NgtpEffect directive, if available */
         this.effect = inject(NgtpEffect, { optional: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpEffectBlendMode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: NgtpEffectBlendMode, isStandalone: true, selector: "ngtp-effect-blend-mode", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpEffectBlendMode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NgtpEffectBlendMode, isStandalone: true, selector: "ngtp-effect-blend-mode", ngImport: i0, template: `
 		@if (effect) {
 			<ngt-value [rawValue]="effect.blendFunction()" attach="blendMode.blendFunction" />
 			<ngt-value [rawValue]="effect.opacity()" attach="blendMode.opacity.value" />
 		}
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpEffectBlendMode, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpEffectBlendMode, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-effect-blend-mode',
@@ -36,21 +64,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
+/**
+ * Base directive for postprocessing effects that provides common functionality.
+ *
+ * This directive is used as a host directive by effect components to provide:
+ * - `blendFunction`: Controls how the effect blends with the scene
+ * - `opacity`: Controls the effect's opacity
+ * - Access to the camera and invalidate function from the store
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }]
+ * })
+ * export class NgtpBloom {}
+ * ```
+ */
 class NgtpEffect {
     constructor() {
+        /** Default effect options injected from parent providers */
         this.defaultEffectOptions = injectDefaultEffectOptions({ optional: true });
-        this.blendFunction = input(this.defaultEffectOptions?.blendFunction);
-        this.opacity = input(this.defaultEffectOptions?.opacity);
+        /**
+         * The blend function used to combine this effect with the scene.
+         * @see BlendFunction from postprocessing library
+         */
+        this.blendFunction = input(this.defaultEffectOptions?.blendFunction, ...(ngDevMode ? [{ debugName: "blendFunction" }] : []));
+        /**
+         * The opacity of the effect.
+         * @default undefined (uses effect's default)
+         */
+        this.opacity = input(this.defaultEffectOptions?.opacity, ...(ngDevMode ? [{ debugName: "opacity" }] : []));
         this.store = injectStore();
+        /** The current camera from the store */
         this.camera = this.store.camera;
+        /** Function to invalidate the render loop, triggering a re-render */
         this.invalidate = this.store.invalidate;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpEffect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.1", type: NgtpEffect, isStandalone: true, inputs: { blendFunction: { classPropertyName: "blendFunction", publicName: "blendFunction", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpEffect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: NgtpEffect, isStandalone: true, inputs: { blendFunction: { classPropertyName: "blendFunction", publicName: "blendFunction", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpEffect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpEffect, decorators: [{
             type: Directive
-        }] });
+        }], propDecorators: { blendFunction: [{ type: i0.Input, args: [{ isSignal: true, alias: "blendFunction", required: false }] }], opacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacity", required: false }] }] } });
 
 const defaultOptions$5 = {
     enabled: true,
@@ -59,12 +114,46 @@ const defaultOptions$5 = {
     multisampling: 8,
     frameBufferType: THREE.HalfFloatType,
 };
+/**
+ * Checks if an effect has the convolution attribute.
+ *
+ * @param effect - The effect to check
+ * @returns True if the effect has the convolution attribute
+ */
 function isConvolution(effect) {
     return (effect.getAttributes() & EffectAttribute.CONVOLUTION) === EffectAttribute.CONVOLUTION;
 }
+/**
+ * Angular component that manages postprocessing effects for a Three.js scene.
+ *
+ * The effect composer wraps the postprocessing library's EffectComposer and provides
+ * a declarative way to add effects to your scene. Effects are added as children of
+ * this component and are automatically composed into an effect pass.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-bloom [options]="{ intensity: 1, luminanceThreshold: 0.9 }" />
+ *   <ngtp-vignette [options]="{ darkness: 0.5 }" />
+ * </ngtp-effect-composer>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- With custom options -->
+ * <ngtp-effect-composer [options]="{ multisampling: 4, autoClear: false }">
+ *   <ngtp-smaa />
+ *   <ngtp-tone-mapping />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpEffectComposer {
     constructor() {
-        this.options = input(defaultOptions$5, { transform: mergeInputs(defaultOptions$5) });
+        /**
+         * Configuration options for the effect composer.
+         * @see NgtpEffectComposerOptions
+         */
+        this.options = input(defaultOptions$5, { ...(ngDevMode ? { debugName: "options" } : {}), transform: mergeInputs(defaultOptions$5) });
         this.store = injectStore();
         this.depthBuffer = pick(this.options, 'depthBuffer');
         this.stencilBuffer = pick(this.options, 'stencilBuffer');
@@ -74,15 +163,31 @@ class NgtpEffectComposer {
         this.resolutionScale = pick(this.options, 'resolutionScale');
         this.enabled = pick(this.options, 'enabled');
         this.renderPriority = pick(this.options, 'renderPriority');
-        this.scene = computed(() => this.options().scene ?? this.store.scene());
-        this.camera = computed(() => this.options().camera ?? this.store.camera());
+        /**
+         * The scene used for rendering effects.
+         * Uses custom scene from options if provided, otherwise uses the store's scene.
+         */
+        this.scene = computed(() => this.options().scene ?? this.store.scene(), ...(ngDevMode ? [{ debugName: "scene" }] : []));
+        /**
+         * The camera used for rendering effects.
+         * Uses custom camera from options if provided, otherwise uses the store's camera.
+         */
+        this.camera = computed(() => this.options().camera ?? this.store.camera(), ...(ngDevMode ? [{ debugName: "camera" }] : []));
         this.groupRef = viewChild.required('group');
+        /**
+         * Computed render priority based on whether the composer is enabled.
+         * Returns 0 when disabled, otherwise returns the configured renderPriority.
+         */
         this.priority = computed(() => {
             const enabled = this.enabled();
             if (!enabled)
                 return 0;
             return this.renderPriority();
-        });
+        }, ...(ngDevMode ? [{ debugName: "priority" }] : []));
+        /**
+         * Creates and configures the effect composer with render pass, normal pass,
+         * and depth downsampling pass based on options.
+         */
         this.composerData = computed(() => {
             const webGL2Available = isWebGL2Available();
             const [gl, scene, camera, depthBuffer, stencilBuffer, multisampling, frameBufferType, enableNormalPass, resolutionScale,] = [
@@ -119,7 +224,11 @@ class NgtpEffectComposer {
                 }
             }
             return { composer, normalPass, downSamplingPass };
-        });
+        }, ...(ngDevMode ? [{ debugName: "composerData" }] : []));
+        /**
+         * The underlying postprocessing EffectComposer instance.
+         * Can be used to access the composer directly for advanced use cases.
+         */
         this.effectComposer = pick(this.composerData, 'composer');
         extend({ Group });
         // NOTE: Disable tone mapping because threejs disallows tonemapping on render targets
@@ -206,14 +315,14 @@ class NgtpEffectComposer {
             }
         }, { priority: this.priority });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpEffectComposer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.1", type: NgtpEffectComposer, isStandalone: true, selector: "ngtp-effect-composer", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpEffectComposer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: NgtpEffectComposer, isStandalone: true, selector: "ngtp-effect-composer", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-group #group>
 			<ng-content />
 		</ngt-group>
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpEffectComposer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpEffectComposer, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-effect-composer',
@@ -225,8 +334,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], groupRef: [{ type: i0.ViewChild, args: ['group', { isSignal: true }] }] } });
 
+/**
+ * Fragment shader for the ASCII effect.
+ * Converts the scene into ASCII character representation based on pixel brightness.
+ */
 const fragment = /* language=glsl glsl */ `
 uniform sampler2D uCharacters;
 uniform float uCharactersCount;
@@ -267,6 +380,21 @@ void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor)
     outputColor = asciiCharacter;
 }
 `;
+/**
+ * A postprocessing effect that renders the scene as ASCII art.
+ *
+ * This effect converts the rendered scene into a grid of ASCII characters,
+ * where the character used depends on the brightness of the underlying pixels.
+ *
+ * @example
+ * ```typescript
+ * const effect = new ASCIIEffect({
+ *   cellSize: 12,
+ *   color: '#00ff00',
+ *   characters: ' .:-=+*#%@'
+ * });
+ * ```
+ */
 class ASCIIEffect extends Effect {
     constructor({ font = 'arial', characters = ` .:,'-^=*+?!|0#X%WM@`, fontSize = 54, cellSize = 16, color = '#ffffff', invert = false, } = {}) {
         const uniforms = new Map([
@@ -282,7 +410,17 @@ class ASCIIEffect extends Effect {
             charactersTextureUniform.value = this.createCharactersTexture(characters, font, fontSize);
         }
     }
-    /** Draws the characters on a Canvas and returns a texture */
+    /**
+     * Creates a texture containing all the ASCII characters.
+     *
+     * Draws each character in the character set onto a canvas and creates
+     * a texture that can be sampled in the shader.
+     *
+     * @param characters - The character set to render
+     * @param font - The font family to use
+     * @param fontSize - The font size in pixels
+     * @returns A Three.js texture containing the rendered characters
+     */
     createCharactersTexture(characters, font, fontSize) {
         const canvas = document.createElement('canvas');
         const SIZE = 1024;
@@ -317,21 +455,39 @@ const defaultOptions$4 = {
     color: '#ffffff',
     invert: false,
 };
+/**
+ * Angular component that applies an ASCII art postprocessing effect to the scene.
+ *
+ * Renders the scene as ASCII characters, where character selection is based on
+ * the brightness of the underlying pixels.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-ascii [options]="{ cellSize: 12, color: '#00ff00' }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpASCII {
     constructor() {
-        this.options = input(defaultOptions$4, { transform: mergeInputs(defaultOptions$4) });
-        this.effect = computed(() => new ASCIIEffect(this.options()));
+        /**
+         * Configuration options for the ASCII effect.
+         * @see ASCIIEffectOptions
+         */
+        this.options = input(defaultOptions$4, { ...(ngDevMode ? { debugName: "options" } : {}), transform: mergeInputs(defaultOptions$4) });
+        /** The underlying ASCIIEffect instance */
+        this.effect = computed(() => new ASCIIEffect(this.options()), ...(ngDevMode ? [{ debugName: "effect" }] : []));
         effect((onCleanup) => {
             const effect = this.effect();
             onCleanup(() => effect.dispose());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpASCII, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpASCII, isStandalone: true, selector: "ngtp-ascii", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpASCII, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: NgtpASCII, isStandalone: true, selector: "ngtp-ascii", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpASCII, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpASCII, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-ascii',
@@ -342,28 +498,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies a bloom postprocessing effect to the scene.
+ *
+ * The bloom effect creates a glow around bright areas of the scene, simulating
+ * the way bright light bleeds in cameras and the human eye.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-bloom [options]="{ intensity: 1, luminanceThreshold: 0.9 }" />
+ * </ngtp-effect-composer>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- With custom blend function -->
+ * <ngtp-effect-composer>
+ *   <ngtp-bloom
+ *     [blendFunction]="BlendFunction.SCREEN"
+ *     [options]="{ intensity: 0.5, luminanceSmoothing: 0.9 }"
+ *   />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpBloom {
     constructor() {
-        this.options = input({});
-        this.effect = inject(NgtpEffect, { host: true });
+        /**
+         * Configuration options for the bloom effect.
+         * Accepts all BloomEffectOptions except blendFunction (use the blendFunction input instead).
+         * @see BloomEffectOptions from postprocessing library
+         */
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
+        this.hostEffect = inject(NgtpEffect, { host: true });
+        this.effectRef = viewChild('effect', ...(ngDevMode ? [{ debugName: "effectRef" }] : []));
         extend({ BloomEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpBloom, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpBloom, isStandalone: true, selector: "ngtp-bloom", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
-		<ngt-bloom-effect *args="[options()]" [camera]="effect.camera()">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpBloom, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: NgtpBloom, isStandalone: true, selector: "ngtp-bloom", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD })], viewQueries: [{ propertyName: "effectRef", first: true, predicate: ["effect"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+		<ngt-bloom-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-bloom-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpBloom, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpBloom, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-bloom',
                     template: `
-		<ngt-bloom-effect *args="[options()]" [camera]="effect.camera()">
+		<ngt-bloom-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-bloom-effect>
@@ -374,28 +561,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                     providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD })],
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], effectRef: [{ type: i0.ViewChild, args: ['effect', { isSignal: true }] }] } });
 
+/**
+ * Angular component that applies brightness and contrast adjustments to the scene.
+ *
+ * This effect allows you to modify the overall brightness and contrast of the
+ * rendered scene as a postprocessing step.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-brightness-contrast [options]="{ brightness: 0.1, contrast: 0.2 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpBrightnessContrast {
     constructor() {
-        this.options = input({});
-        this.effect = inject(NgtpEffect, { host: true });
+        /**
+         * Configuration options for the brightness/contrast effect.
+         * @see BrightnessEffectOptions
+         */
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
+        this.hostEffect = inject(NgtpEffect, { host: true });
+        this.effectRef = viewChild('effect', ...(ngDevMode ? [{ debugName: "effectRef" }] : []));
         extend({ BrightnessContrastEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpBrightnessContrast, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpBrightnessContrast, isStandalone: true, selector: "ngtp-brightness-contrast", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
-		<ngt-brightness-contrast-effect *args="[options()]" [camera]="effect.camera()">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpBrightnessContrast, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: NgtpBrightnessContrast, isStandalone: true, selector: "ngtp-brightness-contrast", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "effectRef", first: true, predicate: ["effect"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+		<ngt-brightness-contrast-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-brightness-contrast-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpBrightnessContrast, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpBrightnessContrast, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-brightness-contrast',
                     template: `
-		<ngt-brightness-contrast-effect *args="[options()]" [camera]="effect.camera()">
+		<ngt-brightness-contrast-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-brightness-contrast-effect>
@@ -405,28 +611,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], effectRef: [{ type: i0.ViewChild, args: ['effect', { isSignal: true }] }] } });
 
+/**
+ * Angular component that applies a chromatic aberration effect to the scene.
+ *
+ * Chromatic aberration simulates the color fringing that occurs in real camera lenses
+ * when different wavelengths of light are focused at different distances.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-chromatic-aberration [options]="{ offset: [0.002, 0.002] }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpChromaticAberration {
     constructor() {
-        this.options = input({});
-        this.effect = inject(NgtpEffect, { host: true });
+        /**
+         * Configuration options for the chromatic aberration effect.
+         * @see ChromaticAberrationEffectOptions
+         */
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
+        this.hostEffect = inject(NgtpEffect, { host: true });
+        this.effectRef = viewChild('effect', ...(ngDevMode ? [{ debugName: "effectRef" }] : []));
         extend({ ChromaticAberrationEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpChromaticAberration, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpChromaticAberration, isStandalone: true, selector: "ngtp-chromatic-aberration", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
-		<ngt-chromatic-aberration-effect *args="[options()]" [camera]="effect.camera()">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpChromaticAberration, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: NgtpChromaticAberration, isStandalone: true, selector: "ngtp-chromatic-aberration", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "effectRef", first: true, predicate: ["effect"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+		<ngt-chromatic-aberration-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-chromatic-aberration-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpChromaticAberration, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpChromaticAberration, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-chromatic-aberration',
                     template: `
-		<ngt-chromatic-aberration-effect *args="[options()]" [camera]="effect.camera()">
+		<ngt-chromatic-aberration-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-chromatic-aberration-effect>
@@ -436,26 +661,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     imports: [NgtArgs, NgtpEffectBlendMode],
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], effectRef: [{ type: i0.ViewChild, args: ['effect', { isSignal: true }] }] } });
 
+/**
+ * Angular component that applies a color averaging effect to the scene.
+ *
+ * This effect converts the scene to grayscale by averaging the color channels,
+ * which can create a desaturated or monochrome look.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-color-average />
+ * </ngtp-effect-composer>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- With custom blend function -->
+ * <ngtp-effect-composer>
+ *   <ngtp-color-average [options]="{ blendFunction: BlendFunction.MULTIPLY }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpColorAverage {
     constructor() {
-        this.options = input({ blendFunction: BlendFunction.NORMAL }, { transform: mergeInputs({ blendFunction: BlendFunction.NORMAL }) });
+        /**
+         * Configuration options for the color average effect.
+         * @default { blendFunction: BlendFunction.NORMAL }
+         */
+        this.options = input({ blendFunction: BlendFunction.NORMAL }, { ...(ngDevMode ? { debugName: "options" } : {}), transform: mergeInputs({ blendFunction: BlendFunction.NORMAL }) });
+        this.effectRef = viewChild('effect', ...(ngDevMode ? [{ debugName: "effectRef" }] : []));
         extend({ ColorAverageEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpColorAverage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpColorAverage, isStandalone: true, selector: "ngtp-color-average", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-		<ngt-color-average-effect *args="[options().blendFunction]">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpColorAverage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: NgtpColorAverage, isStandalone: true, selector: "ngtp-color-average", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "effectRef", first: true, predicate: ["effect"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-color-average-effect #effect *args="[options().blendFunction]">
 			<ng-content />
 		</ngt-color-average-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpColorAverage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpColorAverage, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-color-average',
                     template: `
-		<ngt-color-average-effect *args="[options().blendFunction]">
+		<ngt-color-average-effect #effect *args="[options().blendFunction]">
 			<ng-content />
 		</ngt-color-average-effect>
 	`,
@@ -463,28 +714,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], effectRef: [{ type: i0.ViewChild, args: ['effect', { isSignal: true }] }] } });
 
+/**
+ * Angular component that applies a color depth reduction effect to the scene.
+ *
+ * This effect reduces the number of colors in the scene, creating a posterized
+ * or retro look similar to older display hardware with limited color palettes.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-color-depth [options]="{ bits: 4 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpColorDepth {
     constructor() {
-        this.options = input({});
-        this.effect = inject(NgtpEffect, { host: true });
+        /**
+         * Configuration options for the color depth effect.
+         * @see ColorDepthEffectOptions
+         */
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
+        this.hostEffect = inject(NgtpEffect, { host: true });
+        this.effectRef = viewChild('effect', ...(ngDevMode ? [{ debugName: "effectRef" }] : []));
         extend({ ColorDepthEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpColorDepth, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpColorDepth, isStandalone: true, selector: "ngtp-color-depth", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
-		<ngt-color-depth-effect *args="[options()]" [camera]="effect.camera()">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpColorDepth, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: NgtpColorDepth, isStandalone: true, selector: "ngtp-color-depth", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "effectRef", first: true, predicate: ["effect"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+		<ngt-color-depth-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-color-depth-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpColorDepth, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpColorDepth, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-color-depth',
                     template: `
-		<ngt-color-depth-effect *args="[options()]" [camera]="effect.camera()">
+		<ngt-color-depth-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-color-depth-effect>
@@ -494,28 +764,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     imports: [NgtArgs, NgtpEffectBlendMode],
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], effectRef: [{ type: i0.ViewChild, args: ['effect', { isSignal: true }] }] } });
 
+/**
+ * Angular component that visualizes the scene's depth buffer.
+ *
+ * This effect renders the depth information of the scene, which can be useful
+ * for debugging or creating stylized depth-based visualizations.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-depth [options]="{ inverted: true }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpDepth {
     constructor() {
-        this.options = input({});
-        this.effect = inject(NgtpEffect, { host: true });
+        /**
+         * Configuration options for the depth effect.
+         * @see DepthEffectOptions
+         */
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
+        this.hostEffect = inject(NgtpEffect, { host: true });
+        this.effectRef = viewChild('effect', ...(ngDevMode ? [{ debugName: "effectRef" }] : []));
         extend({ DepthEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpDepth, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpDepth, isStandalone: true, selector: "ngtp-depth", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
-		<ngt-depth-effect *args="[options()]" [camera]="effect.camera()">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpDepth, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: NgtpDepth, isStandalone: true, selector: "ngtp-depth", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "effectRef", first: true, predicate: ["effect"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+		<ngt-depth-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-depth-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpDepth, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpDepth, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-depth',
                     template: `
-		<ngt-depth-effect *args="[options()]" [camera]="effect.camera()">
+		<ngt-depth-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-depth-effect>
@@ -525,12 +814,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     imports: [NgtArgs, NgtpEffectBlendMode],
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], effectRef: [{ type: i0.ViewChild, args: ['effect', { isSignal: true }] }] } });
 
+/**
+ * Angular component that applies a depth of field effect to the scene.
+ *
+ * This effect simulates the focus behavior of real camera lenses, blurring
+ * objects that are outside the focal range. Can be configured for autofocus
+ * by providing a target position.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-depth-of-field [options]="{ focusDistance: 0, focalLength: 0.02, bokehScale: 2 }" />
+ * </ngtp-effect-composer>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- With autofocus target -->
+ * <ngtp-effect-composer>
+ *   <ngtp-depth-of-field [options]="{ target: [0, 0, 5], bokehScale: 3 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpDepthOfField {
     constructor() {
-        this.options = input({});
+        /**
+         * Configuration options for the depth of field effect.
+         * @see DOFOptions
+         */
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.effectComposer = inject(NgtpEffectComposer);
+        /**
+         * Creates the DepthOfFieldEffect instance with the configured options.
+         * Enables autofocus if a target is provided and applies depth texture settings.
+         */
         this.effect = computed(() => {
             const [camera, options] = [this.effectComposer.camera(), this.options()];
             const autoFocus = options.target != null;
@@ -546,18 +865,18 @@ class NgtpDepthOfField {
             const maskPass = effect['maskPass'];
             maskPass.maskFunction = MaskFunction.MULTIPLY_RGB_SET_ALPHA;
             return effect;
-        });
+        }, ...(ngDevMode ? [{ debugName: "effect" }] : []));
         effect((onCleanup) => {
             const depthOfFieldEffect = this.effect();
             onCleanup(() => depthOfFieldEffect.dispose());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpDepthOfField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpDepthOfField, isStandalone: true, selector: "ngtp-depth-of-field", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpDepthOfField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: NgtpDepthOfField, isStandalone: true, selector: "ngtp-depth-of-field", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpDepthOfField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpDepthOfField, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-depth-of-field',
@@ -568,28 +887,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies a dot screen effect to the scene.
+ *
+ * This effect overlays a pattern of dots on the scene, creating a halftone
+ * or comic book style appearance.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-dot-screen [options]="{ scale: 1.5, angle: Math.PI * 0.25 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpDotScreen {
     constructor() {
-        this.options = input({});
-        this.effect = inject(NgtpEffect, { host: true });
+        /**
+         * Configuration options for the dot screen effect.
+         * @see DotScreenEffectOptions
+         */
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
+        this.hostEffect = inject(NgtpEffect, { host: true });
+        this.effectRef = viewChild('effect', ...(ngDevMode ? [{ debugName: "effectRef" }] : []));
         extend({ DotScreenEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpDotScreen, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpDotScreen, isStandalone: true, selector: "ngtp-dot-screen", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
-		<ngt-dot-screen-effect *args="[options()]" [camera]="effect.camera()">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpDotScreen, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: NgtpDotScreen, isStandalone: true, selector: "ngtp-dot-screen", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "effectRef", first: true, predicate: ["effect"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+		<ngt-dot-screen-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-dot-screen-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpDotScreen, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpDotScreen, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-dot-screen',
                     template: `
-		<ngt-dot-screen-effect *args="[options()]" [camera]="effect.camera()">
+		<ngt-dot-screen-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-dot-screen-effect>
@@ -599,28 +937,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     imports: [NgtArgs, NgtpEffectBlendMode],
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], effectRef: [{ type: i0.ViewChild, args: ['effect', { isSignal: true }] }] } });
 
+/**
+ * Angular component that applies Fast Approximate Anti-Aliasing (FXAA) to the scene.
+ *
+ * FXAA is a fast, single-pass anti-aliasing technique that smooths jagged edges
+ * in the rendered image. It's less demanding than multisampling but may blur
+ * some fine details.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer [options]="{ multisampling: 0 }">
+ *   <ngtp-fxaa />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpFXAA {
     constructor() {
-        this.options = input({});
-        this.effect = inject(NgtpEffect, { host: true });
+        /**
+         * Configuration options for the FXAA effect.
+         * @see FXAAEffectOptions
+         */
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
+        this.hostEffect = inject(NgtpEffect, { host: true });
+        this.effectRef = viewChild('effect', ...(ngDevMode ? [{ debugName: "effectRef" }] : []));
         extend({ FXAAEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpFXAA, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpFXAA, isStandalone: true, selector: "ngtp-fxaa", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
-		<ngt-fXAA-effect *args="[options()]" [camera]="effect.camera()">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpFXAA, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: NgtpFXAA, isStandalone: true, selector: "ngtp-fxaa", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "effectRef", first: true, predicate: ["effect"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+		<ngt-fXAA-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-fXAA-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpFXAA, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpFXAA, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-fxaa',
                     template: `
-		<ngt-fXAA-effect *args="[options()]" [camera]="effect.camera()">
+		<ngt-fXAA-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-fXAA-effect>
@@ -630,11 +988,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     imports: [NgtArgs, NgtpEffectBlendMode],
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], effectRef: [{ type: i0.ViewChild, args: ['effect', { isSignal: true }] }] } });
 
+/**
+ * Angular component that applies a glitch effect to the scene.
+ *
+ * This effect simulates digital glitches with customizable timing, strength,
+ * and chromatic aberration. Can be toggled on/off and configured for different
+ * glitch modes.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-glitch [options]="{ delay: [1.5, 3.5], duration: [0.6, 1.0] }" />
+ * </ngtp-effect-composer>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Constant glitch mode -->
+ * <ngtp-effect-composer>
+ *   <ngtp-glitch [options]="{ mode: GlitchMode.CONSTANT_MILD, active: true }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpGlitch {
     constructor() {
-        this.options = input({ active: true }, { transform: mergeInputs({ active: true }) });
+        /**
+         * Configuration options for the glitch effect.
+         * @default { active: true }
+         * @see GlitchOptions
+         */
+        this.options = input({ active: true }, { ...(ngDevMode ? { debugName: "options" } : {}), transform: mergeInputs({ active: true }) });
         this.active = pick(this.options, 'active');
         this.mode = pick(this.options, 'mode');
         this.ratio = pick(this.options, 'ratio');
@@ -647,6 +1032,10 @@ class NgtpGlitch {
         this.chromaticAberrationOffset = vector2(this.options, 'chromaticAberrationOffset');
         this.strength = vector2(this.options, 'strength');
         this.store = injectStore();
+        /**
+         * The underlying GlitchEffect instance.
+         * Created with the configured options and vector2 parameters.
+         */
         this.effect = computed(() => new GlitchEffect({
             ratio: this.ratio(),
             dtSize: this.dtSize(),
@@ -657,7 +1046,7 @@ class NgtpGlitch {
             duration: this.duration(),
             chromaticAberrationOffset: this.chromaticAberrationOffset(),
             strength: this.strength(),
-        }));
+        }), ...(ngDevMode ? [{ debugName: "effect" }] : []));
         effect(() => {
             const [glitchEffect, invalidate, mode, active] = [
                 this.effect(),
@@ -673,12 +1062,12 @@ class NgtpGlitch {
             onCleanup(() => effect.dispose());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpGlitch, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpGlitch, isStandalone: true, selector: "ngtp-glitch", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpGlitch, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: NgtpGlitch, isStandalone: true, selector: "ngtp-glitch", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpGlitch, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpGlitch, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-glitch',
@@ -689,24 +1078,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies a god rays (volumetric lighting) effect to the scene.
+ *
+ * This effect creates light shafts emanating from a light source, simulating
+ * the way light scatters through atmospheric particles. Requires a sun/light
+ * source mesh to generate the rays from.
+ *
+ * @example
+ * ```html
+ * <ngt-mesh #sun [position]="[0, 5, -10]">
+ *   <ngt-sphere-geometry />
+ *   <ngt-mesh-basic-material color="yellow" />
+ * </ngt-mesh>
+ *
+ * <ngtp-effect-composer>
+ *   <ngtp-god-rays [options]="{ sun: sunRef, density: 0.96 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpGodRays {
     constructor() {
-        this.options = input({});
+        /**
+         * Configuration options for the god rays effect.
+         * Must include a `sun` property with the light source reference.
+         * @see GodRaysOptions
+         */
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.effectComposer = inject(NgtpEffectComposer);
         this.effectOptions = omit(this.options, ['sun']);
         this.sun = pick(this.options, 'sun');
+        /**
+         * Resolves the sun reference to the actual Three.js object.
+         * Handles both direct references and function references.
+         */
         this.sunElement = computed(() => {
             const sun = this.sun();
             if (typeof sun === 'function')
                 return resolveRef(sun());
             return resolveRef(sun);
-        });
+        }, ...(ngDevMode ? [{ debugName: "sunElement" }] : []));
+        /**
+         * The underlying GodRaysEffect instance.
+         * Created with the camera, sun element, and configured options.
+         */
         this.effect = computed(() => {
             const [camera, sunElement, options] = [this.effectComposer.camera(), this.sunElement(), this.effectOptions()];
             return new GodRaysEffect(camera, sunElement, options);
-        });
+        }, ...(ngDevMode ? [{ debugName: "effect" }] : []));
         effect(() => {
             const sunElement = this.sunElement();
             if (!sunElement)
@@ -719,12 +1140,12 @@ class NgtpGodRays {
             onCleanup(() => effect.dispose());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpGodRays, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpGodRays, isStandalone: true, selector: "ngtp-god-rays", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpGodRays, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: NgtpGodRays, isStandalone: true, selector: "ngtp-god-rays", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpGodRays, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpGodRays, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-god-rays',
@@ -735,14 +1156,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies a grid overlay effect to the scene.
+ *
+ * This effect overlays a grid pattern on the rendered scene, which can be
+ * useful for technical visualization or stylized effects.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-grid [options]="{ scale: 1.5, lineWidth: 0.5 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpGrid {
     constructor() {
-        this.options = input({});
+        /**
+         * Configuration options for the grid effect.
+         * @see GridOptions
+         */
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.effectOptions = omit(this.options, ['size']);
         this.size = pick(this.options, 'size');
-        this.effect = computed(() => new GridEffect(this.effectOptions()));
+        /** The underlying GridEffect instance */
+        this.effect = computed(() => new GridEffect(this.effectOptions()), ...(ngDevMode ? [{ debugName: "effect" }] : []));
         effect(() => {
             const [size, effect] = [this.size(), this.effect()];
             if (size) {
@@ -754,12 +1193,12 @@ class NgtpGrid {
             onCleanup(() => effect.dispose());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpGrid, isStandalone: true, selector: "ngtp-grid", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: NgtpGrid, isStandalone: true, selector: "ngtp-grid", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpGrid, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpGrid, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-grid',
@@ -770,28 +1209,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies hue and saturation adjustments to the scene.
+ *
+ * This effect allows you to shift the hue and adjust the saturation of the
+ * rendered scene as a postprocessing step.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-hue-saturation [options]="{ hue: 0.5, saturation: 0.2 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpHueSaturation {
     constructor() {
-        this.options = input({});
-        this.effect = inject(NgtpEffect, { host: true });
+        /**
+         * Configuration options for the hue/saturation effect.
+         * @see HueSaturationEffectOptions
+         */
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
+        this.hostEffect = inject(NgtpEffect, { host: true });
+        this.effectRef = viewChild('effect', ...(ngDevMode ? [{ debugName: "effectRef" }] : []));
         extend({ HueSaturationEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpHueSaturation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpHueSaturation, isStandalone: true, selector: "ngtp-hue-saturation", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
-		<ngt-hue-saturation-effect *args="[options()]" [camera]="effect.camera()">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpHueSaturation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: NgtpHueSaturation, isStandalone: true, selector: "ngtp-hue-saturation", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "effectRef", first: true, predicate: ["effect"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+		<ngt-hue-saturation-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-hue-saturation-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpHueSaturation, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpHueSaturation, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-hue-saturation',
                     template: `
-		<ngt-hue-saturation-effect *args="[options()]" [camera]="effect.camera()">
+		<ngt-hue-saturation-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-hue-saturation-effect>
@@ -801,10 +1259,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     imports: [NgtArgs, NgtpEffectBlendMode],
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], effectRef: [{ type: i0.ViewChild, args: ['effect', { isSignal: true }] }] } });
 
-// Created by Anderson Mancini 2023
-// React Three Fiber Ultimate LensFlare
+/**
+ * Lens Flare Effect
+ * Created by Anderson Mancini 2023
+ * React Three Fiber Ultimate LensFlare - Ported to Angular Three
+ */
+/**
+ * Shader configuration for the lens flare effect.
+ * Contains the GLSL fragment shader code.
+ */
 const LensFlareShader = {
     fragmentShader: /* language=glsl glsl */ `
 
@@ -852,7 +1317,46 @@ const LensFlareShader = {
   void mainImage(vec4 v,vec2 r,out vec4 i){vec2 g=r-.5;g.y*=iResolution.y/iResolution.x;vec2 l=lensPosition*.5;l.y*=iResolution.y/iResolution.x;vec3 f=mLs(g,l)*20.*colorGain/256.;if(aditionalStreaks){vec3 o=vec3(.9,.2,.1),p=vec3(.3,.1,.9);for(float n=0.;n<10.;n++)f+=drC(g,pow(rnd(n*2e3)*2.8,.1)+1.41,0.,o+n,p+n,rnd(n*20.)*3.+.2-.5,lensPosition);}if(secondaryGhosts){vec3 n=vec3(0);n+=rHx(g,-lensPosition*.25,ghostScale*1.4,vec3(.25,.35,0));n+=rHx(g,lensPosition*.25,ghostScale*.5,vec3(1,.5,.5));n+=rHx(g,lensPosition*.1,ghostScale*1.6,vec3(1));n+=rHx(g,lensPosition*1.8,ghostScale*2.,vec3(0,.5,.75));n+=rHx(g,lensPosition*1.25,ghostScale*.8,vec3(1,1,.5));n+=rHx(g,-lensPosition*1.25,ghostScale*5.,vec3(.5,.5,.25));n+=fpow(1.-abs(distance(lensPosition*.8,g)-.7),.985)*colorGain/2100.;f+=n;}if(starBurst){vxtC=g+.5;vec4 n=geLD(g);float o=1.-clamp(0.5,0.,.5)*2.;n+=mix(n,pow(n*2.,vec4(2))*.5,o);float s=(g.x+g.y)*(1./6.);vec2 d=mat2(cos(s),-sin(s),sin(s),cos(s))*vxtC;n+=geLS(d)*2.;f+=clamp(n.xyz*strB().xyz,.01,1.);}i=enabled?vec4(mix(f,vec3(0),opacity)+v.xyz,v.w):vec4(v);}
 `,
 };
+/**
+ * A postprocessing effect that simulates camera lens flares.
+ *
+ * Creates realistic lens flare effects including glare, ghosts, star bursts,
+ * and anamorphic flares. Can be animated and positioned dynamically.
+ *
+ * @example
+ * ```typescript
+ * const effect = new LensFlareEffect({
+ *   glareSize: 0.3,
+ *   starPoints: 8,
+ *   animated: true
+ * });
+ * ```
+ */
 class LensFlareEffect extends Effect {
+    /**
+     * Creates a new LensFlareEffect instance.
+     *
+     * @param options - Configuration options for the lens flare
+     * @param options.blendFunction - How to blend with the scene
+     * @param options.enabled - Whether the effect is enabled
+     * @param options.glareSize - Size of the glare
+     * @param options.lensPosition - Position of the lens on screen
+     * @param options.iResolution - Resolution of the effect
+     * @param options.starPoints - Number of points in the star pattern
+     * @param options.flareSize - Size of individual flares
+     * @param options.flareSpeed - Animation speed of flares
+     * @param options.flareShape - Shape parameter for flares
+     * @param options.animated - Whether to animate the effect
+     * @param options.anamorphic - Enable anamorphic lens simulation
+     * @param options.colorGain - Color tint for the effect
+     * @param options.lensDirtTexture - Texture for lens dirt overlay
+     * @param options.haloScale - Scale of the halo effect
+     * @param options.secondaryGhosts - Enable secondary ghost images
+     * @param options.aditionalStreaks - Enable additional streak effects
+     * @param options.ghostScale - Scale of ghost images
+     * @param options.opacity - Opacity of the effect
+     * @param options.starBurst - Enable star burst effect
+     */
     constructor({ blendFunction = BlendFunction.NORMAL, enabled = true, glareSize = 0.2, lensPosition = [0.01, 0.01], iResolution = [0, 0], starPoints = 6, flareSize = 0.01, flareSpeed = 0.01, flareShape = 0.01, animated = true, anamorphic = false, colorGain = new THREE.Color(20, 20, 20), lensDirtTexture = null, haloScale = 0.5, secondaryGhosts = true, aditionalStreaks = true, ghostScale = 0.0, opacity = 1.0, starBurst = false, } = {}) {
         super('LensFlareEffect', LensFlareShader.fragmentShader, {
             blendFunction,
@@ -879,6 +1383,13 @@ class LensFlareEffect extends Effect {
             ]),
         });
     }
+    /**
+     * Updates the effect's time uniform for animation.
+     *
+     * @param _renderer - The WebGL renderer (unused)
+     * @param _inputBuffer - The input render target (unused)
+     * @param deltaTime - Time elapsed since last frame
+     */
     update(_renderer, _inputBuffer, deltaTime) {
         const iTime = this.uniforms.get('iTime');
         if (iTime) {
@@ -891,16 +1402,45 @@ const defaultOptions$3 = {
     followMouse: false,
     smoothTime: 0.7,
 };
+/**
+ * Angular component that applies a lens flare effect to the scene.
+ *
+ * This effect simulates realistic camera lens flares with support for
+ * dynamic positioning, mouse following, and occlusion detection.
+ * The flare automatically fades when occluded by scene objects.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-lens-flare [options]="{ position: [10, 5, -20], glareSize: 0.3 }" />
+ * </ngtp-effect-composer>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Mouse-following flare -->
+ * <ngtp-effect-composer>
+ *   <ngtp-lens-flare [options]="{ followMouse: true, smoothTime: 0.5 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpLensFlare {
     constructor() {
-        this.options = input(defaultOptions$3, { transform: mergeInputs(defaultOptions$3) });
+        /**
+         * Configuration options for the lens flare effect.
+         * @see LensFlareOptions
+         */
+        this.options = input(defaultOptions$3, { ...(ngDevMode ? { debugName: "options" } : {}), transform: mergeInputs(defaultOptions$3) });
         this.store = injectStore();
         this.effectComposer = inject(NgtpEffectComposer);
         this.effectOptions = omit(this.options, ['position', 'followMouse', 'smoothTime']);
         this.position = vector3(this.options, 'position');
+        /** Cached vector for projecting 3D position to screen space */
         this.projectedPosition = new THREE.Vector3();
+        /** Cached vector for 2D mouse/raycaster coordinates */
         this.mouse2d = new THREE.Vector2();
-        this.effect = computed(() => new LensFlareEffect(this.effectOptions()));
+        /** The underlying LensFlareEffect instance */
+        this.effect = computed(() => new LensFlareEffect(this.effectOptions()), ...(ngDevMode ? [{ debugName: "effect" }] : []));
         effect(() => {
             const [lensFlareEffect, width, height] = [
                 this.effect(),
@@ -974,12 +1514,12 @@ class NgtpLensFlare {
             easing.damp(uOpacity, 'value', target, smoothTime, delta);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpLensFlare, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpLensFlare, isStandalone: true, selector: "ngtp-lens-flare", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpLensFlare, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: NgtpLensFlare, isStandalone: true, selector: "ngtp-lens-flare", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" [parameters]="{ dispose: null }" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpLensFlare, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpLensFlare, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-lens-flare',
@@ -990,18 +1530,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies a LUT (Look-Up Table) color grading effect.
+ *
+ * LUTs are used for color grading in film and photography. This effect applies
+ * a 3D LUT texture to transform the colors of the rendered scene.
+ *
+ * @example
+ * ```typescript
+ * // In component
+ * lutTexture = injectLoader(() => LUTCubeLoader, () => 'path/to/lut.cube');
+ * ```
+ *
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-lut [options]="{ lut: lutTexture() }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpLUT {
     constructor() {
-        this.options = input({});
+        /**
+         * Configuration options for the LUT effect.
+         * Must include a `lut` texture.
+         * @see LUTOptions
+         */
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.lut = pick(this.options, 'lut');
         this.tetrahedralInterpolation = pick(this.options, 'tetrahedralInterpolation');
         this.store = injectStore();
+        /** The underlying LUT3DEffect instance */
         this.effect = computed(() => {
             const { lut, ...options } = this.options();
             return new LUT3DEffect(lut, options);
-        });
+        }, ...(ngDevMode ? [{ debugName: "effect" }] : []));
         effect(() => {
             const [effect, lut, tetrahedralInterpolation, invalidate] = [
                 this.effect(),
@@ -1020,12 +1584,12 @@ class NgtpLUT {
             onCleanup(() => effect.dispose());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpLUT, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpLUT, isStandalone: true, selector: "ngtp-lut", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpLUT, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: NgtpLUT, isStandalone: true, selector: "ngtp-lut", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" [dispose]="null" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpLUT, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpLUT, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-lut',
@@ -1036,28 +1600,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies a noise/grain effect to the scene.
+ *
+ * This effect adds film grain or noise to the rendered image, which can
+ * add a cinematic quality or help hide banding in gradients.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-noise [options]="{ premultiply: true }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpNoise {
     constructor() {
-        this.options = input({});
-        this.effect = inject(NgtpEffect, { host: true });
+        /**
+         * Configuration options for the noise effect.
+         * @see NoiseEffectOptions
+         */
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
+        this.hostEffect = inject(NgtpEffect, { host: true });
+        this.effectRef = viewChild('effect', ...(ngDevMode ? [{ debugName: "effectRef" }] : []));
         extend({ NoiseEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpNoise, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpNoise, isStandalone: true, selector: "ngtp-noise", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.COLOR_DODGE })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
-		<ngt-noise-effect *args="[options()]" [camera]="effect.camera()">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpNoise, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: NgtpNoise, isStandalone: true, selector: "ngtp-noise", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.COLOR_DODGE })], viewQueries: [{ propertyName: "effectRef", first: true, predicate: ["effect"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+		<ngt-noise-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-noise-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpNoise, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpNoise, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-noise',
                     template: `
-		<ngt-noise-effect *args="[options()]" [camera]="effect.camera()">
+		<ngt-noise-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-noise-effect>
@@ -1068,14 +1651,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                     providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.COLOR_DODGE })],
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], effectRef: [{ type: i0.ViewChild, args: ['effect', { isSignal: true }] }] } });
 
 const defaultOptions$2 = {
     selectionLayer: 10,
 };
+/**
+ * Angular component that applies an outline effect to selected objects.
+ *
+ * This effect draws an outline around specified objects in the scene.
+ * Can be used with NgtSelectionApi for declarative selection or with
+ * manual selection via the options input.
+ *
+ * @example
+ * ```html
+ * <!-- With NgtSelectionApi (recommended) -->
+ * <ngt-group [select]="hovered()" (pointerenter)="hovered.set(true)">
+ *   <ngt-mesh>...</ngt-mesh>
+ * </ngt-group>
+ *
+ * <ngtp-effect-composer>
+ *   <ngtp-outline [options]="{ edgeStrength: 2.5, blur: true }" />
+ * </ngtp-effect-composer>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- With manual selection -->
+ * <ngtp-effect-composer>
+ *   <ngtp-outline [options]="{ selection: [meshRef.nativeElement], edgeStrength: 5 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpOutline {
     constructor() {
-        this.options = input(defaultOptions$2, { transform: mergeInputs(defaultOptions$2) });
+        /**
+         * Configuration options for the outline effect.
+         * @see NgtpOutlineOptions
+         */
+        this.options = input(defaultOptions$2, { ...(ngDevMode ? { debugName: "options" } : {}), transform: mergeInputs(defaultOptions$2) });
         this.selectionApi = inject(NgtSelectionApi, { optional: true });
         this.effectComposer = inject(NgtpEffectComposer);
         this.store = injectStore();
@@ -1105,6 +1719,10 @@ class NgtpOutline {
             'blur',
             'xRay',
         ]);
+        /**
+         * The underlying OutlineEffect instance.
+         * Created with the scene, camera, and configured options.
+         */
         this.effect = computed(() => {
             const [scene, camera, blendFunction, patternTexture, edgeStrength, pulseSpeed, visibleEdgeColor, hiddenEdgeColor, width, height, kernelSize, blur, xRay, restOptions,] = [
                 this.effectComposer.scene(),
@@ -1136,7 +1754,7 @@ class NgtpOutline {
                 xRay,
                 ...restOptions,
             });
-        });
+        }, ...(ngDevMode ? [{ debugName: "effect" }] : []));
         effect((onCleanup) => {
             const effect = this.effect();
             onCleanup(() => effect.dispose());
@@ -1173,6 +1791,14 @@ class NgtpOutline {
             });
         });
     }
+    /**
+     * Handles changes to the selection and updates the outline effect.
+     *
+     * @param selected - Function returning the currently selected objects
+     * @param _effect - Function returning the OutlineEffect instance
+     * @param _invalidate - Function returning the invalidate callback
+     * @returns Cleanup function to clear the selection
+     */
     handleSelectionChangeEffect(selected, _effect, _invalidate) {
         const selection = selected();
         if (!selection || selection.length === 0)
@@ -1194,12 +1820,12 @@ class NgtpOutline {
             invalidate();
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpOutline, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpOutline, isStandalone: true, selector: "ngtp-outline", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpOutline, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: NgtpOutline, isStandalone: true, selector: "ngtp-outline", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpOutline, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpOutline, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-outline',
@@ -1210,24 +1836,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgtArgs],
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies a pixelation effect to the scene.
+ *
+ * This effect reduces the resolution of the rendered image to create
+ * a retro, 8-bit style appearance.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-pixelation [options]="{ granularity: 10 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpPixelation {
     constructor() {
-        this.options = input({ granularity: 5 }, { transform: mergeInputs({ granularity: 5 }) });
+        /**
+         * Configuration options for the pixelation effect.
+         * @default { granularity: 5 }
+         * @see PixelationOptions
+         */
+        this.options = input({ granularity: 5 }, { ...(ngDevMode ? { debugName: "options" } : {}), transform: mergeInputs({ granularity: 5 }) });
         this.granularity = pick(this.options, 'granularity');
-        this.effect = computed(() => new PixelationEffect(this.granularity()));
+        /** The underlying PixelationEffect instance */
+        this.effect = computed(() => new PixelationEffect(this.granularity()), ...(ngDevMode ? [{ debugName: "effect" }] : []));
         effect((onCleanup) => {
             const effect = this.effect();
             onCleanup(() => effect.dispose());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpPixelation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpPixelation, isStandalone: true, selector: "ngtp-pixelation", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpPixelation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: NgtpPixelation, isStandalone: true, selector: "ngtp-pixelation", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpPixelation, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpPixelation, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-pixelation',
@@ -1238,31 +1883,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     imports: [NgtArgs],
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
 const defaultOptions$1 = {
     density: 1.25,
 };
+/**
+ * Angular component that applies a scanline effect to the scene.
+ *
+ * This effect overlays horizontal scanlines on the image, simulating
+ * the appearance of old CRT monitors or television screens.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-scanline [options]="{ density: 2.0 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpScanline {
     constructor() {
-        this.options = input(defaultOptions$1, { transform: mergeInputs(defaultOptions$1) });
-        this.effect = inject(NgtpEffect, { host: true });
+        /**
+         * Configuration options for the scanline effect.
+         * @default { density: 1.25 }
+         * @see ScanlineEffectOptions
+         */
+        this.options = input(defaultOptions$1, { ...(ngDevMode ? { debugName: "options" } : {}), transform: mergeInputs(defaultOptions$1) });
+        /** Reference to the host NgtpEffect directive */
+        this.hostEffect = inject(NgtpEffect, { host: true });
+        this.effectRef = viewChild('effect', ...(ngDevMode ? [{ debugName: "effectRef" }] : []));
         extend({ ScanlineEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpScanline, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpScanline, isStandalone: true, selector: "ngtp-scanline", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.OVERLAY })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
-		<ngt-scanline-effect *args="[options()]" [camera]="effect.camera()">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpScanline, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: NgtpScanline, isStandalone: true, selector: "ngtp-scanline", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.OVERLAY })], viewQueries: [{ propertyName: "effectRef", first: true, predicate: ["effect"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+		<ngt-scanline-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-scanline-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpScanline, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpScanline, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-scanline',
                     template: `
-		<ngt-scanline-effect *args="[options()]" [camera]="effect.camera()">
+		<ngt-scanline-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-scanline-effect>
@@ -1273,20 +1938,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                     providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.OVERLAY })],
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], effectRef: [{ type: i0.ViewChild, args: ['effect', { isSignal: true }] }] } });
 
-// const addLight = (light: Object3D, effect: SelectiveBloomEffect) => light.layers.enable(effect.selection.layer)
-// const removeLight = (light: Object3D, effect: SelectiveBloomEffect) => light.layers.disable(effect.selection.layer)
 const defaultOptions = {
     selectionLayer: 10,
     inverted: false,
     ignoreBackground: false,
 };
+/**
+ * Angular component that applies bloom only to selected objects.
+ *
+ * Unlike the standard bloom effect, selective bloom allows you to specify
+ * which objects should glow. Requires light sources to be provided for
+ * proper rendering.
+ *
+ * Can be used with NgtSelectionApi for declarative selection or with
+ * manual selection via the selection input.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-selective-bloom
+ *     [lights]="[ambientLightRef, pointLightRef]"
+ *     [selection]="[glowingMeshRef]"
+ *     [options]="{ intensity: 2, luminanceThreshold: 0 }"
+ *   />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpSelectiveBloom {
     constructor() {
-        this.lights = input.required();
-        this.selection = input([]);
-        this.options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
+        /**
+         * Light sources that should be included in the bloom calculation.
+         * Required for proper selective bloom rendering.
+         */
+        this.lights = input.required(...(ngDevMode ? [{ debugName: "lights" }] : []));
+        /**
+         * Objects to apply bloom to.
+         * Can be a single object, array of objects, or ElementRefs.
+         * Not needed if using NgtSelectionApi.
+         * @default []
+         */
+        this.selection = input([], ...(ngDevMode ? [{ debugName: "selection" }] : []));
+        /**
+         * Configuration options for the selective bloom effect.
+         * @see SelectiveBloomOptions
+         */
+        this.options = input(defaultOptions, { ...(ngDevMode ? { debugName: "options" } : {}), transform: mergeInputs(defaultOptions) });
         this.blendFunction = pick(this.options, 'blendFunction');
         this.luminanceThreshold = pick(this.options, 'luminanceThreshold');
         this.luminanceSmoothing = pick(this.options, 'luminanceSmoothing');
@@ -1306,19 +2004,23 @@ class NgtpSelectiveBloom {
         this.store = injectStore();
         this.effectComposer = inject(NgtpEffectComposer);
         this.selectionApi = inject(NgtSelectionApi, { optional: true });
-        this.resolvedLights = computed(() => this.lights().map((light) => resolveRef(light)));
+        this.resolvedLights = computed(() => this.lights().map((light) => resolveRef(light)), ...(ngDevMode ? [{ debugName: "resolvedLights" }] : []));
         this.resolvedSelected = computed(() => {
             const selection = this.selection();
             if (!selection)
                 return [];
             const array = Array.isArray(selection) ? selection : [selection];
             return array.map((selected) => resolveRef(selected));
-        });
+        }, ...(ngDevMode ? [{ debugName: "resolvedSelected" }] : []));
         this.resolvedNgtSelected = computed(() => {
             if (!this.selectionApi || !this.selectionApi.enabled)
                 return [];
             return this.selectionApi.selected().map((selected) => resolveRef(selected));
-        });
+        }, ...(ngDevMode ? [{ debugName: "resolvedNgtSelected" }] : []));
+        /**
+         * The underlying SelectiveBloomEffect instance.
+         * Created with the scene, camera, and configured options.
+         */
         this.effect = computed(() => {
             const effect = new SelectiveBloomEffect(this.effectComposer.scene(), this.effectComposer.camera(), {
                 blendFunction: this.blendFunction() || BlendFunction.ADD,
@@ -1338,7 +2040,7 @@ class NgtpSelectiveBloom {
             effect.inverted = this.inverted();
             effect.ignoreBackground = this.ignoreBackground();
             return effect;
-        });
+        }, ...(ngDevMode ? [{ debugName: "effect" }] : []));
         effect((onCleanup) => {
             // skip input selection altogether if NgtSelection is used
             if (this.selectionApi)
@@ -1388,18 +2090,30 @@ class NgtpSelectiveBloom {
             });
         });
     }
+    /**
+     * Enables the selection layer on a light source.
+     *
+     * @param effect - The SelectiveBloomEffect instance
+     * @param light - The light to enable on the selection layer
+     */
     addLight(effect, light) {
         light.layers.enable(effect.selection.layer);
     }
+    /**
+     * Disables the selection layer on a light source.
+     *
+     * @param effect - The SelectiveBloomEffect instance
+     * @param light - The light to disable from the selection layer
+     */
     removeLight(effect, light) {
         light.layers.disable(effect.selection.layer);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpSelectiveBloom, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpSelectiveBloom, isStandalone: true, selector: "ngtp-selective-bloom", inputs: { lights: { classPropertyName: "lights", publicName: "lights", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpSelectiveBloom, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: NgtpSelectiveBloom, isStandalone: true, selector: "ngtp-selective-bloom", inputs: { lights: { classPropertyName: "lights", publicName: "lights", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" [dispose]="null" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpSelectiveBloom, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpSelectiveBloom, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-selective-bloom',
@@ -1410,28 +2124,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { lights: [{ type: i0.Input, args: [{ isSignal: true, alias: "lights", required: true }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies a sepia tone effect to the scene.
+ *
+ * This effect gives the rendered image a warm, brownish tint similar to
+ * old photographs, creating a vintage or nostalgic appearance.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-sepia [options]="{ intensity: 0.5 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpSepia {
     constructor() {
-        this.options = input({});
-        this.effect = inject(NgtpEffect, { host: true });
+        /**
+         * Configuration options for the sepia effect.
+         * @see SepiaEffectOptions
+         */
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
+        this.hostEffect = inject(NgtpEffect, { host: true });
+        this.effectRef = viewChild('effect', ...(ngDevMode ? [{ debugName: "effectRef" }] : []));
         extend({ SepiaEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpSepia, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpSepia, isStandalone: true, selector: "ngtp-sepia", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
-		<ngt-sepia-effect *args="[options()]" [camera]="effect.camera()">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpSepia, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: NgtpSepia, isStandalone: true, selector: "ngtp-sepia", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "effectRef", first: true, predicate: ["effect"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+		<ngt-sepia-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-sepia-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpSepia, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpSepia, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-sepia',
                     template: `
-		<ngt-sepia-effect *args="[options()]" [camera]="effect.camera()">
+		<ngt-sepia-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-sepia-effect>
@@ -1441,28 +2174,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     imports: [NgtArgs, NgtpEffectBlendMode],
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], effectRef: [{ type: i0.ViewChild, args: ['effect', { isSignal: true }] }] } });
 
+/**
+ * Angular component that applies a shock wave distortion effect.
+ *
+ * This effect creates an expanding ring distortion that simulates a
+ * shock wave or explosion ripple emanating from a point in the scene.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-shock-wave
+ *     [options]="{ speed: 2, maxRadius: 1, waveSize: 0.2, amplitude: 0.05 }"
+ *   />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpShockWave {
     constructor() {
-        this.options = input({});
-        this.effect = inject(NgtpEffect, { host: true });
+        /**
+         * Configuration options for the shock wave effect.
+         * @see ShockWaveEffectOptions
+         */
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
+        this.hostEffect = inject(NgtpEffect, { host: true });
+        this.effectRef = viewChild('effect', ...(ngDevMode ? [{ debugName: "effectRef" }] : []));
         extend({ ShockWaveEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpShockWave, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpShockWave, isStandalone: true, selector: "ngtp-shock-wave", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
-		<ngt-shock-wave-effect *args="[options()]" [camera]="effect.camera()">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpShockWave, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: NgtpShockWave, isStandalone: true, selector: "ngtp-shock-wave", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "effectRef", first: true, predicate: ["effect"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+		<ngt-shock-wave-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-shock-wave-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpShockWave, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpShockWave, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-shock-wave',
                     template: `
-		<ngt-shock-wave-effect *args="[options()]" [camera]="effect.camera()">
+		<ngt-shock-wave-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-shock-wave-effect>
@@ -1472,28 +2226,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     imports: [NgtArgs, NgtpEffectBlendMode],
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], effectRef: [{ type: i0.ViewChild, args: ['effect', { isSignal: true }] }] } });
 
+/**
+ * Angular component that applies Subpixel Morphological Anti-Aliasing (SMAA).
+ *
+ * SMAA is a high-quality, efficient anti-aliasing technique that provides
+ * better results than FXAA while being less demanding than multisampling.
+ * It's particularly effective at smoothing edges while preserving sharpness.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer [options]="{ multisampling: 0 }">
+ *   <ngtp-smaa />
+ * </ngtp-effect-composer>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- With preset -->
+ * <ngtp-effect-composer>
+ *   <ngtp-smaa [options]="{ preset: SMAAPreset.ULTRA }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpSMAA {
     constructor() {
-        this.options = input({});
-        this.effect = inject(NgtpEffect, { host: true });
+        /**
+         * Configuration options for the SMAA effect.
+         * @see SMAAEffectOptions
+         */
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
+        this.hostEffect = inject(NgtpEffect, { host: true });
+        this.effectRef = viewChild('effect', ...(ngDevMode ? [{ debugName: "effectRef" }] : []));
         extend({ SMAAEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpSMAA, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpSMAA, isStandalone: true, selector: "ngtp-smaa", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
-		<ngt-sMAA-effect *args="[options()]" [camera]="effect.camera()">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpSMAA, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: NgtpSMAA, isStandalone: true, selector: "ngtp-smaa", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "effectRef", first: true, predicate: ["effect"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+		<ngt-sMAA-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-sMAA-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpSMAA, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpSMAA, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-smaa',
                     template: `
-		<ngt-sMAA-effect *args="[options()]" [camera]="effect.camera()">
+		<ngt-sMAA-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-sMAA-effect>
@@ -1503,28 +2285,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     imports: [NgtArgs, NgtpEffectBlendMode],
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], effectRef: [{ type: i0.ViewChild, args: ['effect', { isSignal: true }] }] } });
 
+/**
+ * Angular component that applies a tilt-shift blur effect.
+ *
+ * This effect simulates the shallow depth of field look from tilt-shift
+ * photography, creating a "miniature" or "diorama" appearance where only
+ * a horizontal band of the image is in focus.
+ *
+ * Uses the postprocessing library's built-in TiltShiftEffect.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-tilt-shift [options]="{ blur: 0.5, offset: 0.5 }" />
+ * </ngtp-effect-composer>
+ * ```
+ *
+ * @see NgtpTiltShift2 for an alternative implementation with different parameters
+ */
 class NgtpTiltShift {
     constructor() {
-        this.options = input({});
-        this.effect = inject(NgtpEffect, { host: true });
+        /**
+         * Configuration options for the tilt-shift effect.
+         * @see TiltShiftEffectOptions
+         */
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
+        this.hostEffect = inject(NgtpEffect, { host: true });
+        this.effectRef = viewChild('effect', ...(ngDevMode ? [{ debugName: "effectRef" }] : []));
         extend({ TiltShiftEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpTiltShift, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpTiltShift, isStandalone: true, selector: "ngtp-tilt-shift", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
-		<ngt-tilt-shift-effect *args="[options()]" [camera]="effect.camera()">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpTiltShift, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: NgtpTiltShift, isStandalone: true, selector: "ngtp-tilt-shift", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD })], viewQueries: [{ propertyName: "effectRef", first: true, predicate: ["effect"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+		<ngt-tilt-shift-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-tilt-shift-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpTiltShift, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpTiltShift, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-tilt-shift',
                     template: `
-		<ngt-tilt-shift-effect *args="[options()]" [camera]="effect.camera()">
+		<ngt-tilt-shift-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-tilt-shift-effect>
@@ -1535,8 +2341,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                     providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD })],
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], effectRef: [{ type: i0.ViewChild, args: ['effect', { isSignal: true }] }] } });
 
+/**
+ * Custom tilt-shift shader based on Evan Wallace's implementation.
+ * Provides line-based focus control with customizable blur parameters.
+ */
 const TiltShiftShader = {
     fragmentShader: /* language=glsl glsl */ `
 
@@ -1596,7 +2406,35 @@ const TiltShiftShader = {
     }
     `,
 };
+/**
+ * A custom tilt-shift effect with line-based focus control.
+ *
+ * This effect provides a different approach to tilt-shift compared to
+ * the standard TiltShiftEffect, allowing you to define a focus line
+ * between two screen-space points.
+ *
+ * @example
+ * ```typescript
+ * const effect = new TiltShift2Effect({
+ *   blur: 0.2,
+ *   start: [0.5, 0.3],
+ *   end: [0.5, 0.7]
+ * });
+ * ```
+ */
 class TiltShift2Effect extends Effect {
+    /**
+     * Creates a new TiltShift2Effect instance.
+     *
+     * @param options - Configuration options
+     * @param options.blendFunction - How to blend with the scene
+     * @param options.blur - Blur intensity [0, 1], can exceed 1 for more blur
+     * @param options.taper - Taper of the focus area [0, 1]
+     * @param options.start - Start point of focus line in screen space [x, y]
+     * @param options.end - End point of focus line in screen space [x, y]
+     * @param options.samples - Number of blur samples
+     * @param options.direction - Direction of the blur
+     */
     constructor({ blendFunction = BlendFunction.NORMAL, blur = 0.15, // [0, 1], can go beyond 1 for extra
     taper = 0.5, // [0, 1], can go beyond 1 for extra
     start = [0.5, 0.0], // [0,1] percentage x,y of screenspace
@@ -1619,25 +2457,47 @@ class TiltShift2Effect extends Effect {
     }
 }
 extend({ TiltShift2Effect });
+/**
+ * Angular component that applies an alternative tilt-shift effect.
+ *
+ * This effect uses a line-based focus system where you define start and
+ * end points in screen space. The area between these points stays in focus
+ * while the rest of the image is blurred.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-tilt-shift2 [options]="{ blur: 0.2, start: [0.5, 0.3], end: [0.5, 0.7] }" />
+ * </ngtp-effect-composer>
+ * ```
+ *
+ * @see NgtpTiltShift for the standard tilt-shift implementation
+ */
 class NgtpTiltShift2 {
     constructor() {
-        this.options = input({});
-        this.effect = inject(NgtpEffect, { host: true });
+        /**
+         * Configuration options for the tilt-shift effect.
+         * @see TiltShift2EffectOptions
+         */
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
+        this.hostEffect = inject(NgtpEffect, { host: true });
+        this.effectRef = viewChild('effect', ...(ngDevMode ? [{ debugName: "effectRef" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpTiltShift2, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpTiltShift2, isStandalone: true, selector: "ngtp-tilt-shift2", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.NORMAL })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
-		<ngt-tilt-shift2-effect *args="[options()]" [camera]="effect.camera()">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpTiltShift2, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: NgtpTiltShift2, isStandalone: true, selector: "ngtp-tilt-shift2", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.NORMAL })], viewQueries: [{ propertyName: "effectRef", first: true, predicate: ["effect"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+		<ngt-tilt-shift2-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-tilt-shift2-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpTiltShift2, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpTiltShift2, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-tilt-shift2',
                     template: `
-		<ngt-tilt-shift2-effect *args="[options()]" [camera]="effect.camera()">
+		<ngt-tilt-shift2-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-tilt-shift2-effect>
@@ -1648,28 +2508,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                     providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.NORMAL })],
                 }]
-        }] });
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], effectRef: [{ type: i0.ViewChild, args: ['effect', { isSignal: true }] }] } });
 
+/**
+ * Angular component that applies tone mapping to the scene.
+ *
+ * Tone mapping converts HDR (High Dynamic Range) values to LDR (Low Dynamic
+ * Range) for display. Various tone mapping modes are available including
+ * Reinhard, ACES Filmic, and custom linear options.
+ *
+ * Note: The effect composer disables Three.js's built-in tone mapping,
+ * so this effect should be used if tone mapping is desired.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-tone-mapping [options]="{ mode: ToneMappingMode.ACES_FILMIC }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpToneMapping {
     constructor() {
-        this.options = input({});
-        this.effect = inject(NgtpEffect, { host: true });
+        /**
+         * Configuration options for the tone mapping effect.
+         * @see ToneMappingEffectOptions
+         */
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
+        this.hostEffect = inject(NgtpEffect, { host: true });
+        this.effectRef = viewChild('effect', ...(ngDevMode ? [{ debugName: "effectRef" }] : []));
         extend({ ToneMappingEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpToneMapping, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpToneMapping, isStandalone: true, selector: "ngtp-tone-mapping", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
-		<ngt-tone-mapping-effect *args="[options()]" [camera]="effect.camera()">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpToneMapping, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: NgtpToneMapping, isStandalone: true, selector: "ngtp-tone-mapping", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "effectRef", first: true, predicate: ["effect"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+		<ngt-tone-mapping-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-tone-mapping-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpToneMapping, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpToneMapping, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-tone-mapping',
                     template: `
-		<ngt-tone-mapping-effect *args="[options()]" [camera]="effect.camera()">
+		<ngt-tone-mapping-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-tone-mapping-effect>
@@ -1679,28 +2562,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], effectRef: [{ type: i0.ViewChild, args: ['effect', { isSignal: true }] }] } });
 
+/**
+ * Angular component that applies a vignette effect to the scene.
+ *
+ * This effect darkens the corners and edges of the image, drawing the
+ * viewer's attention to the center. It's a common cinematic technique
+ * for creating focus and atmosphere.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-vignette [options]="{ darkness: 0.5, offset: 0.3 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpVignette {
     constructor() {
-        this.options = input({});
-        this.effect = inject(NgtpEffect, { host: true });
+        /**
+         * Configuration options for the vignette effect.
+         * @see VignetteEffectOptions
+         */
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
+        this.hostEffect = inject(NgtpEffect, { host: true });
+        this.effectRef = viewChild('effect', ...(ngDevMode ? [{ debugName: "effectRef" }] : []));
         extend({ VignetteEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpVignette, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpVignette, isStandalone: true, selector: "ngtp-vignette", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
-		<ngt-vignette-effect *args="[options()]" [camera]="effect.camera()">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpVignette, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: NgtpVignette, isStandalone: true, selector: "ngtp-vignette", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "effectRef", first: true, predicate: ["effect"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+		<ngt-vignette-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-vignette-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpVignette, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpVignette, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-vignette',
                     template: `
-		<ngt-vignette-effect *args="[options()]" [camera]="effect.camera()">
+		<ngt-vignette-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-vignette-effect>
@@ -1710,8 +2613,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     imports: [NgtArgs, NgtpEffectBlendMode],
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], effectRef: [{ type: i0.ViewChild, args: ['effect', { isSignal: true }] }] } });
 
+/**
+ * Shader configuration for the water distortion effect.
+ * Creates a rippling, underwater-like distortion.
+ */
 const WaterShader = {
     fragmentShader: /* language=glsl glsl */ `
   uniform float factor;
@@ -1727,7 +2634,25 @@ const WaterShader = {
     outputColor = rgba;
   }`,
 };
+/**
+ * A postprocessing effect that simulates an underwater/water distortion.
+ *
+ * Creates animated rippling distortion that makes the scene appear as if
+ * viewed through water or a heat haze.
+ *
+ * @example
+ * ```typescript
+ * const effect = new WaterEffect({ factor: 0.5 });
+ * ```
+ */
 class WaterEffect extends Effect {
+    /**
+     * Creates a new WaterEffect instance.
+     *
+     * @param options - Configuration options
+     * @param options.blendFunction - How to blend with the scene
+     * @param options.factor - Intensity of the water effect (0 = no effect)
+     */
     constructor({ blendFunction = BlendFunction.NORMAL, factor = 0 } = {}) {
         super('WaterEffect', WaterShader.fragmentShader, {
             blendFunction,
@@ -1736,26 +2661,45 @@ class WaterEffect extends Effect {
         });
     }
 }
+/**
+ * Angular component that applies a water/ripple distortion effect.
+ *
+ * This effect creates an animated underwater-like distortion that can
+ * simulate viewing through water, heat haze, or a dream-like state.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-water [options]="{ factor: 0.5 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpWater {
     constructor() {
-        this.options = input({});
-        this.effect = inject(NgtpEffect, { host: true });
+        /**
+         * Configuration options for the water effect.
+         * @see WaterEffectOptions
+         */
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
+        this.hostEffect = inject(NgtpEffect, { host: true });
+        this.effectRef = viewChild('effect', ...(ngDevMode ? [{ debugName: "effectRef" }] : []));
         extend({ WaterEffect });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpWater, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NgtpWater, isStandalone: true, selector: "ngtp-water", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.NORMAL })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
-		<ngt-water-effect *args="[options()]" [camera]="effect.camera()">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpWater, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: NgtpWater, isStandalone: true, selector: "ngtp-water", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.NORMAL })], viewQueries: [{ propertyName: "effectRef", first: true, predicate: ["effect"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+		<ngt-water-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-water-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtpWater, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpWater, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-water',
                     template: `
-		<ngt-water-effect *args="[options()]" [camera]="effect.camera()">
+		<ngt-water-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-water-effect>
@@ -1766,7 +2710,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                     providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.NORMAL })],
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], effectRef: [{ type: i0.ViewChild, args: ['effect', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.