angular-three 2.0.0-beta.2 → 2.0.0-beta.21

package/index.d.ts

@@ -1,25 +1,26 @@
+export * from './lib/before-render';
 export * from './lib/canvas';
-export * from './lib/di/before-render';
-export * from './lib/di/catalogue';
-export * from './lib/di/ref';
 export * from './lib/directives/args';
+export * from './lib/directives/key';
 export * from './lib/directives/parent';
 export * from './lib/directives/repeat';
+export { type NgtCamera, type NgtThreeEvent } from './lib/events';
+export * from './lib/instance';
 export * from './lib/loader';
 export { addAfterEffect, addEffect, addTail } from './lib/loop';
 export { NgtPortal, NgtPortalContent } from './lib/portal';
+export * from './lib/ref';
+export * from './lib/renderer';
 export * from './lib/routed-scene';
-export * from './lib/stores/signal.store';
-export * from './lib/stores/store';
+export * from './lib/store';
 export * from './lib/three-types';
 export * from './lib/types';
 export * from './lib/utils/apply-props';
-export * from './lib/utils/assert-in-injection-context';
+export * from './lib/utils/assert-injection-context';
 export { createAttachFunction } from './lib/utils/attach';
-export * from './lib/utils/instance';
+export * from './lib/utils/create-injection-token';
 export * from './lib/utils/is';
 export * from './lib/utils/make';
 export * from './lib/utils/safe-detect-changes';
-export * from './lib/utils/signal';
-export * from './lib/utils/timing';
+export * from './lib/utils/signal-store';
 export * from './lib/utils/update';

package/lib/{di/before-render.d.ts → before-render.d.ts}

@@ -1,5 +1,5 @@
 import { Injector } from '@angular/core';
-import { NgtBeforeRenderRecord } from '../types';
+import { type NgtBeforeRenderRecord } from './store';
 export declare function injectBeforeRender(cb: NgtBeforeRenderRecord['callback'], { priority, injector }?: {
     priority?: number;
     injector?: Injector;

package/lib/canvas.d.ts

@@ -1,10 +1,75 @@
-import { ElementRef, EventEmitter, ViewContainerRef, type OnChanges, type OnInit, type SimpleChanges, type Type } from '@angular/core';
+import { ElementRef, EventEmitter, type OnChanges, type OnInit, type SimpleChanges, type Type } from '@angular/core';
 import { type NgxResizeResult } from 'ngx-resize';
-import { NgtSignalStore } from './stores/signal.store';
-import type { NgtAnyRecord, NgtCanvasInputs, NgtDpr, NgtState } from './types';
+import * as THREE from 'three';
+import type { NgtCamera, NgtEventManager } from './events';
+import { type NgtDpr, type NgtPerformance, type NgtRenderer, type NgtSize, type NgtState } from './store';
+import type { NgtObject3DNode } from './three-types';
+import type { NgtAnyRecord, NgtProperties } from './types';
+import { type NgtSignalStore } from './utils/signal-store';
 import * as i0 from "@angular/core";
-export declare class NgtCanvas extends NgtSignalStore<NgtCanvasInputs> implements OnInit, OnChanges {
-    #private;
+export type NgtGLOptions = NgtRenderer | ((canvas: HTMLCanvasElement) => NgtRenderer) | Partial<NgtProperties<THREE.WebGLRenderer> | THREE.WebGLRendererParameters> | undefined;
+export type NgtCanvasInputs = {
+    /** A threejs renderer instance or props that go into the default renderer */
+    gl?: NgtGLOptions;
+    size?: NgtSize;
+    /**
+     * Enables shadows (by default PCFsoft). Can accept `gl.shadowMap` options for fine-tuning,
+     * but also strings: 'basic' | 'percentage' | 'soft' | 'variance'.
+     * @see https://threejs.org/docs/#api/en/renderers/WebGLRenderer.shadowMap
+     */
+    shadows?: boolean | 'basic' | 'percentage' | 'soft' | 'variance' | Partial<THREE.WebGLShadowMap>;
+    /**
+     * Disables three r139 color management.
+     * @see https://threejs.org/docs/#manual/en/introduction/Color-management
+     */
+    legacy?: boolean;
+    /** Switch off automatic sRGB encoding and gamma correction */
+    linear?: boolean;
+    /** Use `THREE.NoToneMapping` instead of `THREE.ACESFilmicToneMapping` */
+    flat?: boolean;
+    /** Creates an orthographic camera */
+    orthographic?: boolean;
+    /**
+     * R3F's render mode. Set to `demand` to only render on state change or `never` to take control.
+     * @see https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#on-demand-rendering
+     */
+    frameloop?: 'always' | 'demand' | 'never';
+    /**
+     * R3F performance options for adaptive performance.
+     * @see https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#movement-regression
+     */
+    performance?: Partial<Omit<NgtPerformance, 'regress'>>;
+    /** Target pixel ratio. Can clamp between a range: `[min, max]` */
+    dpr?: NgtDpr;
+    /** Props that go into the default raycaster */
+    raycaster?: Partial<THREE.Raycaster>;
+    /** A `THREE.Scene` instance or props that go into the default scene */
+    scene?: THREE.Scene | Partial<THREE.Scene>;
+    /** A `Camera` instance or props that go into the default camera */
+    camera?: (NgtCamera | Partial<NgtObject3DNode<THREE.Camera, typeof THREE.Camera> & NgtObject3DNode<THREE.PerspectiveCamera, typeof THREE.PerspectiveCamera> & NgtObject3DNode<THREE.OrthographicCamera, typeof THREE.OrthographicCamera>>) & {
+        /** Flags the camera as manual, putting projection into your own hands */
+        manual?: boolean;
+    };
+    /** An R3F event manager to manage elements' pointer events */
+    events?: (store: NgtSignalStore<NgtState>) => NgtEventManager<HTMLElement>;
+    /** The target where events are being subscribed to, default: the div that wraps canvas */
+    eventSource?: HTMLElement | ElementRef<HTMLElement>;
+    /** The event prefix that is cast into canvas pointer x/y events, default: "offset" */
+    eventPrefix?: 'offset' | 'client' | 'page' | 'layer' | 'screen';
+    /** Default coordinate for the camera to look at */
+    lookAt?: THREE.Vector3 | Parameters<THREE.Vector3['set']>;
+};
+export declare class NgtCanvas implements OnInit, OnChanges {
+    private store;
+    private initRoot;
+    private host;
+    private viewContainerRef;
+    private injector;
+    private environmentInjector;
+    private zone;
+    private destroyRef;
+    private cdr;
+    private inputs;
     sceneGraph: Type<unknown>;
     sceneGraphInputs: NgtAnyRecord;
     compoundPrefixes: string[];
@@ -24,14 +89,19 @@ export declare class NgtCanvas extends NgtSignalStore<NgtCanvasInputs> implement
     set lookAt(lookAt: NgtCanvasInputs['lookAt']);
     set performance(performance: NgtCanvasInputs['performance']);
     created: EventEmitter<NgtState>;
-    pointerMissed: EventEmitter<MouseEvent>;
+    private inputsEventSource;
+    protected hbPointerEvents: import("@angular/core").Signal<"none" | "auto">;
     glCanvas: ElementRef<HTMLCanvasElement>;
-    glAnchor: ViewContainerRef;
-    constructor();
-    get hbPointerEvents(): "none" | "auto";
+    private resizeEffectRef?;
+    private configurator?;
+    private glEnvironmentInjector?;
+    private glRef?;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnInit(): void;
-    onResize({ width, height, top, left }: NgxResizeResult): void;
+    onResize(result: NgxResizeResult): void;
+    private render;
+    private overrideChangeDetectorRef;
+    private setSceneGraphInputs;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgtCanvas, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgtCanvas, "ngt-canvas", never, { "sceneGraph": { "alias": "sceneGraph"; "required": true; }; "sceneGraphInputs": { "alias": "sceneGraphInputs"; "required": false; }; "compoundPrefixes": { "alias": "compoundPrefixes"; "required": false; }; "linear": { "alias": "linear"; "required": false; }; "legacy": { "alias": "legacy"; "required": false; }; "flat": { "alias": "flat"; "required": false; }; "orthographic": { "alias": "orthographic"; "required": false; }; "frameloop": { "alias": "frameloop"; "required": false; }; "dpr": { "alias": "dpr"; "required": false; }; "raycaster": { "alias": "raycaster"; "required": false; }; "shadows": { "alias": "shadows"; "required": false; }; "camera": { "alias": "camera"; "required": false; }; "scene": { "alias": "scene"; "required": false; }; "gl": { "alias": "gl"; "required": false; }; "eventSource": { "alias": "eventSource"; "required": false; }; "eventPrefix": { "alias": "eventPrefix"; "required": false; }; "lookAt": { "alias": "lookAt"; "required": false; }; "performance": { "alias": "performance"; "required": false; }; }, { "created": "created"; "pointerMissed": "pointerMissed"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgtCanvas, "ngt-canvas", never, { "sceneGraph": { "alias": "sceneGraph"; "required": true; }; "sceneGraphInputs": { "alias": "sceneGraphInputs"; "required": false; }; "compoundPrefixes": { "alias": "compoundPrefixes"; "required": false; }; "linear": { "alias": "linear"; "required": false; }; "legacy": { "alias": "legacy"; "required": false; }; "flat": { "alias": "flat"; "required": false; }; "orthographic": { "alias": "orthographic"; "required": false; }; "frameloop": { "alias": "frameloop"; "required": false; }; "dpr": { "alias": "dpr"; "required": false; }; "raycaster": { "alias": "raycaster"; "required": false; }; "shadows": { "alias": "shadows"; "required": false; }; "camera": { "alias": "camera"; "required": false; }; "scene": { "alias": "scene"; "required": false; }; "gl": { "alias": "gl"; "required": false; }; "eventSource": { "alias": "eventSource"; "required": false; }; "eventPrefix": { "alias": "eventPrefix"; "required": false; }; "lookAt": { "alias": "lookAt"; "required": false; }; "performance": { "alias": "performance"; "required": false; }; }, { "created": "created"; }, never, never, true, never>;
 }

package/lib/directives/args.d.ts

@@ -1,10 +1,10 @@
 import { NgtCommonDirective } from './common';
 import * as i0 from "@angular/core";
 export declare class NgtArgs<TArgs extends any[] = any[]> extends NgtCommonDirective {
-    #private;
+    private injectedArgs;
     set args(args: TArgs | null);
     get args(): TArgs | null;
     validate(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgtArgs<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgtArgs<any>, "[args]", never, { "args": { "alias": "args"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgtArgs<any>, "ng-template[args]", never, { "args": { "alias": "args"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/directives/common.d.ts

@@ -1,8 +1,12 @@
 import * as i0 from "@angular/core";
 export declare abstract class NgtCommonDirective {
-    #private;
+    protected static processComment: boolean;
+    private vcr;
+    private zone;
+    private template;
     protected injected: boolean;
     protected shouldCreateView: boolean;
+    private view?;
     constructor();
     abstract validate(): boolean;
     protected createView(): void;

package/lib/directives/key.d.ts

@@ -0,0 +1,10 @@
+import { NgtCommonDirective } from './common';
+import * as i0 from "@angular/core";
+export declare class NgtKey extends NgtCommonDirective {
+    static processComment: boolean;
+    private lastKey;
+    validate(): boolean;
+    set key(key: string | number | object);
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgtKey, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgtKey, "ng-template[key]", never, { "key": { "alias": "key"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/directives/parent.d.ts

@@ -1,11 +1,11 @@
-import { NgtInjectedRef } from '../di/ref';
+import type { NgtRef } from '../ref';
 import { NgtCommonDirective } from './common';
 import * as i0 from "@angular/core";
 export declare class NgtParent extends NgtCommonDirective {
-    #private;
-    set parent(parent: string | THREE.Object3D | NgtInjectedRef<THREE.Object3D>);
-    get parent(): string | THREE.Object3D | NgtInjectedRef<THREE.Object3D>;
+    private injectedParent;
+    set parent(parent: string | NgtRef<THREE.Object3D>);
+    get parent(): string | NgtRef<THREE.Object3D>;
     validate(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgtParent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgtParent, "[parent]", never, { "parent": { "alias": "parent"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgtParent, "ng-template[parent]", never, { "parent": { "alias": "parent"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/dom/events.d.ts

@@ -1,4 +1,5 @@
-import { NgtSignalStore } from '../stores/signal.store';
-import type { NgtEventManager, NgtState } from '../types';
+import { type NgtEventManager } from '../events';
+import type { NgtState } from '../store';
+import type { NgtSignalStore } from '../utils/signal-store';
 export declare const supportedEvents: readonly ["click", "contextmenu", "dblclick", "pointerup", "pointerdown", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointermove", "pointermissed", "pointercancel", "wheel"];
 export declare function createPointerEvents(store: NgtSignalStore<NgtState>): NgtEventManager<HTMLElement>;

package/lib/events.d.ts

@@ -1,6 +1,82 @@
 import * as THREE from 'three';
-import type { NgtSignalStore } from './stores/signal.store';
-import type { NgtDomEvent, NgtState } from './types';
+import type { NgtState } from './store';
+import type { NgtProperties } from './types';
+import type { NgtSignalStore } from './utils/signal-store';
+export interface NgtIntersection extends THREE.Intersection {
+    /** The event source (the object which registered the handler) */
+    eventObject: THREE.Object3D;
+}
+export interface NgtIntersectionEvent<TSourceEvent> extends NgtIntersection {
+    /** The event source (the object which registered the handler) */
+    eventObject: THREE.Object3D;
+    /** An array of intersections */
+    intersections: NgtIntersection[];
+    /** vec3.set(pointer.x, pointer.y, 0).unproject(camera) */
+    unprojectedPoint: THREE.Vector3;
+    /** Normalized event coordinates */
+    pointer: THREE.Vector2;
+    /** Delta between first click and this event */
+    delta: number;
+    /** The ray that pierced it */
+    ray: THREE.Ray;
+    /** The camera that was used by the raycaster */
+    camera: NgtCamera;
+    /** stopPropagation will stop underlying handlers from firing */
+    stopPropagation: () => void;
+    /** The original host event */
+    nativeEvent: TSourceEvent;
+    /** If the event was stopped by calling stopPropagation */
+    stopped: boolean;
+}
+export type NgtCamera = THREE.OrthographicCamera | THREE.PerspectiveCamera;
+export type NgtThreeEvent<TEvent> = NgtIntersectionEvent<TEvent> & NgtProperties<TEvent>;
+export type NgtDomEvent = PointerEvent | MouseEvent | WheelEvent;
+export type NgtEventHandlers = {
+    click?: (event: NgtThreeEvent<MouseEvent>) => void;
+    contextmenu?: (event: NgtThreeEvent<MouseEvent>) => void;
+    dblclick?: (event: NgtThreeEvent<MouseEvent>) => void;
+    pointerup?: (event: NgtThreeEvent<PointerEvent>) => void;
+    pointerdown?: (event: NgtThreeEvent<PointerEvent>) => void;
+    pointerover?: (event: NgtThreeEvent<PointerEvent>) => void;
+    pointerout?: (event: NgtThreeEvent<PointerEvent>) => void;
+    pointerenter?: (event: NgtThreeEvent<PointerEvent>) => void;
+    pointerleave?: (event: NgtThreeEvent<PointerEvent>) => void;
+    pointermove?: (event: NgtThreeEvent<PointerEvent>) => void;
+    pointermissed?: (event: MouseEvent) => void;
+    pointercancel?: (event: NgtThreeEvent<PointerEvent>) => void;
+    wheel?: (event: NgtThreeEvent<WheelEvent>) => void;
+};
+export type NgtEvents = {
+    [TEvent in keyof NgtEventHandlers]-?: EventListener;
+};
+export type NgtFilterFunction = (items: THREE.Intersection[], store: NgtSignalStore<NgtState>) => THREE.Intersection[];
+export type NgtComputeFunction = (event: NgtDomEvent, root: NgtSignalStore<NgtState>, previous: NgtSignalStore<NgtState> | null) => void;
+export interface NgtEventManager<TTarget> {
+    /** Determines if the event layer is active */
+    enabled: boolean;
+    /** Event layer priority, higher prioritized layers come first and may stop(-propagate) lower layer  */
+    priority: number;
+    /** The compute function needs to set up the raycaster and an xy- pointer  */
+    compute?: NgtComputeFunction;
+    /** The filter can re-order or re-structure the intersections  */
+    filter?: NgtFilterFunction;
+    /** The target node the event layer is tied to */
+    connected?: TTarget;
+    /** All the pointer event handlers through which the host forwards native events */
+    handlers?: NgtEvents;
+    /** Allows re-connecting to another target */
+    connect?: (target: TTarget) => void;
+    /** Removes all existing events handlers from the target */
+    disconnect?: () => void;
+    /** Triggers a onPointerMove with the last known event. This can be useful to enable raycasting without
+     *  explicit user interaction, for instance when the camera moves a hoverable object underneath the cursor.
+     */
+    update?: () => void;
+}
+export interface NgtPointerCaptureTarget {
+    intersection: NgtIntersection;
+    target: Element;
+}
 export declare function removeInteractivity(store: NgtSignalStore<NgtState>, object: THREE.Object3D): void;
 export declare function createEvents(store: NgtSignalStore<NgtState>): {
     handlePointer: (name: string) => (event: NgtDomEvent) => void;

package/lib/instance.d.ts

@@ -0,0 +1,36 @@
+import { EventEmitter, type WritableSignal } from '@angular/core';
+import type { NgtEventHandlers } from './events';
+import type { NgtState } from './store';
+import type { NgtAnyRecord } from './types';
+import { type NgtSignalStore } from './utils/signal-store';
+export type NgtAttachFunction<TChild = any, TParent = any> = (parent: TParent, child: TChild, store: NgtSignalStore<NgtState>) => void | (() => void);
+export type NgtAfterAttach<TChild extends NgtInstanceNode = NgtInstanceNode, TParent extends NgtInstanceNode = NgtInstanceNode> = {
+    parent: TParent;
+    node: TChild;
+};
+export type NgtInstanceLocalState = {
+    /** the state getter of the canvas that the instance is being rendered to */
+    store: NgtSignalStore<NgtState>;
+    nonObjects: WritableSignal<NgtInstanceNode[]>;
+    objects: WritableSignal<NgtInstanceNode[]>;
+    add: (instance: NgtInstanceNode, type: 'objects' | 'nonObjects') => void;
+    remove: (instance: NgtInstanceNode, type: 'objects' | 'nonObjects') => void;
+    nativeProps: NgtSignalStore<NgtAnyRecord>;
+    parent: WritableSignal<NgtInstanceNode | null>;
+    primitive?: boolean;
+    eventCount: number;
+    handlers: Partial<NgtEventHandlers>;
+    args?: unknown[];
+    attach?: string[] | NgtAttachFunction;
+    previousAttach?: unknown | (() => void);
+    isRaw?: boolean;
+    priority?: number;
+    afterUpdate?: EventEmitter<NgtInstanceNode>;
+    afterAttach?: EventEmitter<NgtAfterAttach>;
+};
+export type NgtInstanceNode<TNode = any> = {
+    __ngt__: NgtInstanceLocalState;
+} & NgtAnyRecord & TNode;
+export declare function getLocalState<TInstance extends object = NgtAnyRecord>(obj: TInstance | undefined): NgtInstanceLocalState;
+export declare function invalidateInstance<TInstance extends object>(instance: TInstance): void;
+export declare function prepare<TInstance extends object = NgtAnyRecord>(object: TInstance, localState?: Partial<NgtInstanceLocalState>): NgtInstanceNode<TInstance>;

package/lib/loader.d.ts

@@ -1,6 +1,17 @@
 import { Injector, type Signal } from '@angular/core';
 import type { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
-import type { NgtBranchingReturn, NgtLoaderExtensions, NgtLoaderProto, NgtLoaderReturnType, NgtObjectMap } from './types';
+import { type NgtObjectMap } from './utils/make';
+export interface NgtLoader<T> extends THREE.Loader {
+    load(url: string, onLoad?: (result: T) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void): unknown;
+    loadAsync(url: string, onProgress?: (event: ProgressEvent) => void): Promise<T>;
+}
+export type NgtLoaderProto<T> = new (...args: any) => NgtLoader<T extends unknown ? any : T>;
+export type NgtLoaderReturnType<T, L extends NgtLoaderProto<T>> = T extends unknown ? Awaited<ReturnType<InstanceType<L>['loadAsync']>> : T;
+export type NgtLoaderExtensions<T extends {
+    prototype: NgtLoaderProto<any>;
+}> = (loader: T['prototype']) => void;
+export type NgtConditionalType<Child, Parent, Truthy, Falsy> = Child extends Parent ? Truthy : Falsy;
+export type NgtBranchingReturn<T, Parent, Coerced> = NgtConditionalType<T, Parent, Coerced, T>;
 export type NgtLoaderResults<TInput extends string | string[] | Record<string, string>, TReturn> = TInput extends string[] ? TReturn[] : TInput extends object ? {
     [key in keyof TInput]: TReturn;
 } : TReturn;
@@ -8,4 +19,4 @@ export declare function injectNgtLoader<TData, TUrl extends string | string[] |
     extensions?: NgtLoaderExtensions<TLoaderConstructor>;
     onProgress?: (event: ProgressEvent) => void;
     injector?: Injector;
-}): Signal<NgtLoaderResults<TUrl, NgtBranchingReturn<TReturn, GLTF, GLTF & NgtObjectMap>>>;
+}): Signal<NgtLoaderResults<TUrl, NgtBranchingReturn<TReturn, GLTF, GLTF & NgtObjectMap>> | null>;

package/lib/loop.d.ts

@@ -1,6 +1,7 @@
-import type { NgtSignalStore } from './stores/signal.store';
-import type { NgtState } from './types';
-export type NgtGlobalRenderCallback = (timestamp: number) => void;
+/// <reference types="webxr" />
+import type { NgtState } from './store';
+import type { NgtSignalStore } from './utils/signal-store';
+export type NgtGlobalRenderCallback = (timeStamp: number) => void;
 /**
  * Adds a global render callback which is called each frame.
  * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
@@ -16,9 +17,9 @@ export declare const addAfterEffect: (callback: NgtGlobalRenderCallback) => () =
  * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
  */
 export declare const addTail: (callback: NgtGlobalRenderCallback) => () => void;
-export type GlobalEffectType = 'before' | 'after' | 'tail';
-export declare function flushGlobalEffects(type: GlobalEffectType, timestamp: number): void;
-export declare function createLoop<TCanvas>(roots: Map<TCanvas, NgtSignalStore<NgtState>>): {
+export type NgtGlobalEffectType = 'before' | 'after' | 'tail';
+export declare function flushGlobalEffects(type: NgtGlobalEffectType, timestamp: number): void;
+declare function createLoop<TCanvas>(roots: Map<TCanvas, NgtSignalStore<NgtState>>): {
     loop: (timestamp: number) => void;
     /**
      * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
@@ -31,3 +32,60 @@ export declare function createLoop<TCanvas>(roots: Map<TCanvas, NgtSignalStore<N
      */
     advance: (timestamp: number, runGlobalEffects?: boolean, store?: NgtSignalStore<NgtState>, frame?: XRFrame) => void;
 };
+export declare const injectNgtLoop: {
+    (): {
+        loop: (timestamp: number) => void;
+        /**
+         * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
+         * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
+         */
+        invalidate: (store?: NgtSignalStore<NgtState>, frames?: number) => void;
+        /**
+         * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
+         * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
+         */
+        advance: (timestamp: number, runGlobalEffects?: boolean, store?: NgtSignalStore<NgtState>, frame?: XRFrame) => void;
+    };
+    (injectOptions: import("@angular/core").InjectOptions & {
+        optional?: false | undefined;
+    }): {
+        loop: (timestamp: number) => void;
+        /**
+         * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
+         * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
+         */
+        invalidate: (store?: NgtSignalStore<NgtState>, frames?: number) => void;
+        /**
+         * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
+         * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
+         */
+        advance: (timestamp: number, runGlobalEffects?: boolean, store?: NgtSignalStore<NgtState>, frame?: XRFrame) => void;
+    };
+    (injectOptions: import("@angular/core").InjectOptions): {
+        loop: (timestamp: number) => void;
+        /**
+         * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
+         * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
+         */
+        invalidate: (store?: NgtSignalStore<NgtState>, frames?: number) => void;
+        /**
+         * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
+         * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
+         */
+        advance: (timestamp: number, runGlobalEffects?: boolean, store?: NgtSignalStore<NgtState>, frame?: XRFrame) => void;
+    } | null;
+}, NGT_LOOP: import("@angular/core").InjectionToken<{
+    loop: (timestamp: number) => void;
+    /**
+     * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
+     * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
+     */
+    invalidate: (store?: NgtSignalStore<NgtState>, frames?: number) => void;
+    /**
+     * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
+     * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
+     */
+    advance: (timestamp: number, runGlobalEffects?: boolean, store?: NgtSignalStore<NgtState>, frame?: XRFrame) => void;
+}>;
+export type NgtLoop = ReturnType<typeof createLoop>;
+export {};

package/lib/portal.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter, TemplateRef, ViewContainerRef, type ElementRef, type OnInit } from '@angular/core';
 import * as THREE from 'three';
-import { NgtSignalStore } from './stores/signal.store';
-import type { NgtEventManager, NgtRenderState, NgtSize, NgtState } from './types';
+import type { NgtEventManager } from './events';
+import { type NgtRenderState, type NgtSize, type NgtState } from './store';
 import * as i0 from "@angular/core";
 declare const privateKeys: readonly ["get", "set", "select", "setSize", "setDpr", "setFrameloop", "events", "invalidate", "advance", "size", "viewport"];
 type PrivateKeys = (typeof privateKeys)[number];
@@ -14,12 +14,12 @@ export interface NgtPortalInputs {
     }>;
 }
 export declare class NgtPortalBeforeRender implements OnInit {
-    #private;
+    private portalStore;
+    private injector;
     renderPriority: number;
     parentScene: THREE.Scene;
     parentCamera: THREE.Camera;
     beforeRender: EventEmitter<NgtRenderState>;
-    constructor();
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgtPortalBeforeRender, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgtPortalBeforeRender, "[ngtPortalBeforeRender]", never, { "renderPriority": { "alias": "renderPriority"; "required": false; }; "parentScene": { "alias": "parentScene"; "required": true; }; "parentCamera": { "alias": "parentCamera"; "required": true; }; }, { "beforeRender": "beforeRender"; }, never, never, true, never>;
@@ -29,25 +29,33 @@ export declare class NgtPortalContent {
     static ɵfac: i0.ɵɵFactoryDeclaration<NgtPortalContent, [null, { skipSelf: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgtPortalContent, "ng-template[ngtPortalContent]", never, {}, {}, never, never, true, never>;
 }
-export declare class NgtPortal extends NgtSignalStore<NgtPortalInputs> implements OnInit {
-    #private;
+export declare class NgtPortal implements OnInit {
+    private inputs;
     set container(container: NgtPortalInputs['container']);
-    set state(state: NgtPortalInputs['state']);
+    set portalState(state: NgtPortalInputs['state']);
     autoRender: boolean;
     autoRenderPriority: number;
     beforeRender: EventEmitter<{
         root: NgtRenderState;
         portal: NgtRenderState;
     }>;
-    readonly portalContentTemplate: TemplateRef<unknown>;
-    readonly portalContentAnchor: ViewContainerRef;
-    readonly parentScene: THREE.Scene;
-    readonly parentCamera: import("./types").NgtCameraManual;
+    portalContentTemplate: TemplateRef<unknown>;
+    portalContentAnchor: ViewContainerRef;
+    private parentStore;
+    parentScene: THREE.Scene;
+    parentCamera: import("./store").NgtCameraManual;
+    private portalStore;
+    private injector;
+    private zone;
+    private raycaster;
+    private pointer;
     portalContentRendered: boolean;
+    private portalContentView?;
     constructor();
     ngOnInit(): void;
     onBeforeRender(portal: NgtRenderState): void;
+    private inject;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgtPortal, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgtPortal, "ngt-portal", never, { "container": { "alias": "container"; "required": false; }; "state": { "alias": "state"; "required": false; }; "autoRender": { "alias": "autoRender"; "required": false; }; "autoRenderPriority": { "alias": "autoRenderPriority"; "required": false; }; }, { "beforeRender": "beforeRender"; }, ["portalContentTemplate"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgtPortal, "ngt-portal", never, { "container": { "alias": "container"; "required": false; }; "portalState": { "alias": "state"; "required": false; }; "autoRender": { "alias": "autoRender"; "required": false; }; "autoRenderPriority": { "alias": "autoRenderPriority"; "required": false; }; }, { "beforeRender": "beforeRender"; }, ["portalContentTemplate"], never, true, never>;
 }
 export {};

package/lib/{di/ref.d.ts → ref.d.ts}

@@ -1,7 +1,8 @@
-import { ElementRef, Injector, Signal } from '@angular/core';
-import { NgtInstanceNode } from '../types';
+import { ElementRef, type Injector, type Signal } from '@angular/core';
+import { type NgtInstanceNode } from './instance';
 export type NgtInjectedRef<TElement> = ElementRef<TElement> & {
     children: (type?: 'objects' | 'nonObjects' | 'both') => Signal<NgtInstanceNode[]>;
     untracked: TElement;
 };
+export type NgtRef<TElement> = TElement | NgtInjectedRef<TElement>;
 export declare function injectNgtRef<TElement>(initial?: ElementRef<TElement> | TElement, injector?: Injector): NgtInjectedRef<TElement>;

package/lib/renderer/catalogue.d.ts

@@ -0,0 +1,9 @@
+export type NgtAnyConstructor = new (...args: any[]) => any;
+export declare function extend(objects: object): void;
+export declare const injectNgtCatalogue: {
+    (): Record<string, NgtAnyConstructor>;
+    (injectOptions: import("@angular/core").InjectOptions & {
+        optional?: false | undefined;
+    }): Record<string, NgtAnyConstructor>;
+    (injectOptions: import("@angular/core").InjectOptions): Record<string, NgtAnyConstructor> | null;
+};

package/lib/renderer/constants.d.ts

@@ -0,0 +1,20 @@
+export declare const ROUTED_SCENE = "__ngt_renderer_is_routed_scene__";
+export declare const HTML = "__ngt_renderer_is_html";
+export declare const SPECIAL_INTERNAL_ADD_COMMENT = "__ngt_renderer_add_comment__";
+export declare const SPECIAL_DOM_TAG: {
+    readonly NGT_PORTAL: "ngt-portal";
+    readonly NGT_PRIMITIVE: "ngt-primitive";
+    readonly NGT_VALUE: "ngt-value";
+};
+export declare const SPECIAL_PROPERTIES: {
+    readonly COMPOUND: "ngtCompound";
+    readonly RENDER_PRIORITY: "priority";
+    readonly ATTACH: "attach";
+    readonly VALUE: "rawValue";
+    readonly REF: "ref";
+};
+export declare const SPECIAL_EVENTS: {
+    readonly BEFORE_RENDER: "beforeRender";
+    readonly AFTER_UPDATE: "afterUpdate";
+    readonly AFTER_ATTACH: "afterAttach";
+};

package/lib/renderer/index.d.ts

@@ -0,0 +1,5 @@
+import { ChangeDetectorRef } from '@angular/core';
+import { type NgtStore } from '../store';
+export declare function provideNgtRenderer(store: NgtStore, compoundPrefixes: string[], cdr: ChangeDetectorRef): import("@angular/core").EnvironmentProviders;
+export { extend } from './catalogue';
+export { HTML } from './constants';