angular-three 2.0.0-beta.31 → 2.0.0-beta.310

package/lib/events.d.ts

@@ -1,83 +1,7 @@
-import * as THREE from 'three';
-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;
+import { Object3D } from 'three';
+import { NgtDomEvent, NgtState } from './types';
+import { NgtSignalStore } from './utils/signal-store';
+export declare function removeInteractivity(store: NgtSignalStore<NgtState>, object: Object3D): void;
 export declare function createEvents(store: NgtSignalStore<NgtState>): {
     handlePointer: (name: string) => (event: NgtDomEvent) => void;
 };

package/lib/html.d.ts

@@ -0,0 +1,17 @@
+import { AbstractType, DestroyRef, ElementRef, InjectionToken, Provider, ProviderToken, Type } from '@angular/core';
+import { HTML } from './renderer';
+import * as i0 from "@angular/core";
+export declare function provideHTMLDomElement(): Provider;
+export declare function provideHTMLDomElement<TDeps extends Array<ProviderToken<any>>, TValues extends {
+    [K in keyof TDeps]: TDeps[K] extends Type<infer T> | AbstractType<infer T> | InjectionToken<infer T> ? T : never;
+}>(deps: TDeps, factory: (...args: TValues) => HTMLElement): Provider;
+export declare abstract class NgtHTML {
+    static [HTML]: boolean;
+    protected store: import("angular-three").NgtSignalStore<import("./types").NgtState>;
+    protected destroyRef: DestroyRef;
+    protected host: ElementRef<HTMLElement>;
+    protected domElement: HTMLElement | "gl" | null;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgtHTML, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgtHTML, never, never, {}, {}, never, never, false, never>;
+}

package/lib/instance.d.ts

@@ -1,36 +1,4 @@
-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;
+import { NgtAnyRecord, NgtInstanceNode, NgtLocalState } from './types';
+export declare function getLocalState<TInstance extends object>(obj: TInstance | undefined): NgtLocalState | undefined;
 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>;
+export declare function prepare<TInstance extends object = NgtAnyRecord>(object: TInstance, localState?: Partial<NgtLocalState>): NgtInstanceNode<TInstance>;

package/lib/loader.d.ts

@@ -1,7 +1,10 @@
-import { Injector, type Signal } from '@angular/core';
-import type { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
-import { type NgtObjectMap } from './utils/make';
-export interface NgtLoader<T> extends THREE.Loader {
+import { Injector, Signal } from '@angular/core';
+import { Loader, Object3D } from 'three';
+import { NgtObjectMap } from './utils/make';
+export type NgtGLTFLike = {
+    scene: Object3D;
+};
+export interface NgtLoader<T> extends Loader {
     load(url: string, onLoad?: (result: T) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: unknown) => void): unknown;
     loadAsync(url: string, onProgress?: (event: ProgressEvent) => void): Promise<T>;
 }
@@ -15,8 +18,17 @@ export type NgtBranchingReturn<T, Parent, Coerced> = NgtConditionalType<T, Paren
 export type NgtLoaderResults<TInput extends string | string[] | Record<string, string>, TReturn> = TInput extends string[] ? TReturn[] : TInput extends object ? {
     [key in keyof TInput]: TReturn;
 } : TReturn;
-export declare function injectNgtLoader<TData, TUrl extends string | string[] | Record<string, string>, TLoaderConstructor extends NgtLoaderProto<TData>, TReturn = NgtLoaderReturnType<TData, TLoaderConstructor>>(loaderConstructorFactory: (inputs: string[]) => TLoaderConstructor, inputs: () => TUrl, { extensions, onProgress, injector, }?: {
+declare function _injectLoader<TData, TUrl extends string | string[] | Record<string, string>, TLoaderConstructor extends NgtLoaderProto<TData>, TReturn = NgtLoaderReturnType<TData, TLoaderConstructor>>(loaderConstructorFactory: (inputs: string[]) => TLoaderConstructor, inputs: () => TUrl, { extensions, onProgress, onLoad, injector, }?: {
     extensions?: NgtLoaderExtensions<TLoaderConstructor>;
     onProgress?: (event: ProgressEvent) => void;
+    onLoad?: (data: NoInfer<TReturn>) => void;
     injector?: Injector;
-}): Signal<NgtLoaderResults<TUrl, NgtBranchingReturn<TReturn, GLTF, GLTF & NgtObjectMap>> | null>;
+}): Signal<NgtLoaderResults<TUrl, NgtBranchingReturn<TReturn, NgtGLTFLike, NgtGLTFLike & NgtObjectMap>> | null>;
+declare namespace _injectLoader {
+    var preload: <TData, TUrl extends string | string[] | Record<string, string>, TLoaderConstructor extends NgtLoaderProto<TData>>(loaderConstructorFactory: (inputs: string[]) => TLoaderConstructor, inputs: () => TUrl, extensions?: NgtLoaderExtensions<TLoaderConstructor>, onLoad?: (data: NoInfer<TData>) => void) => void;
+    var destroy: () => void;
+    var clear: (urls: string | string[]) => void;
+}
+export type NgtInjectedLoader = typeof _injectLoader;
+export declare const injectLoader: NgtInjectedLoader;
+export {};

package/lib/loop.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="webxr" />
-import type { NgtState } from './store';
-import type { NgtSignalStore } from './utils/signal-store';
-export type NgtGlobalRenderCallback = (timeStamp: number) => void;
+import { NgtCanvasElement, NgtGlobalRenderCallback, NgtState } from './types';
+import { NgtSignalStore } from './utils/signal-store';
+export declare const roots: Map<NgtCanvasElement, NgtSignalStore<NgtState>>;
 /**
  * Adds a global render callback which is called each frame.
  * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
@@ -19,73 +18,26 @@ export declare const addAfterEffect: (callback: NgtGlobalRenderCallback) => () =
 export declare const addTail: (callback: NgtGlobalRenderCallback) => () => void;
 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.
-     * @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 declare const injectNgtLoop: {
+export declare const injectLoop: {
     (): {
         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;
+        optional?: false;
+    } & {
+        injector?: import("@angular/core").Injector;
     }): {
         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): {
+    (injectOptions: import("@angular/core").InjectOptions & {
+        injector?: import("@angular/core").Injector;
+    }): {
         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/pipes/hexify.d.ts

@@ -0,0 +1,20 @@
+import * as i0 from "@angular/core";
+export declare class NgtHexify {
+    private document;
+    private ctx?;
+    /**
+     * transforms a:
+     * - hex string to a hex number
+     * - rgb string to a hex number
+     * - rgba string to a hex number
+     * - css color string to a hex number
+     *
+     * always default to black if failed
+     * @param value
+     */
+    transform(value: string): number;
+    private hexStringToNumber;
+    private componentToHex;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgtHexify, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<NgtHexify, "hexify", true>;
+}

package/lib/portal.d.ts

@@ -1,61 +1,67 @@
-import { EventEmitter, TemplateRef, ViewContainerRef, type ElementRef, type OnInit } from '@angular/core';
-import * as THREE from 'three';
-import type { NgtEventManager } from './events';
-import { type NgtRenderState, type NgtSize, type NgtState } from './store';
+import { Injector, TemplateRef, ViewContainerRef } from '@angular/core';
+import { Camera, Object3D, Scene } from 'three';
+import { NgtComputeFunction, NgtSize, NgtState } from './types';
 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];
-export interface NgtPortalInputs {
-    container: ElementRef<THREE.Object3D> | THREE.Object3D;
-    camera: ElementRef<THREE.Camera> | THREE.Camera;
-    state: Partial<Omit<NgtState, PrivateKeys> & {
-        events: Partial<Pick<NgtEventManager<any>, 'enabled' | 'priority' | 'compute' | 'connected'>>;
-        size: NgtSize;
-    }>;
-}
-export declare class NgtPortalBeforeRender implements OnInit {
+export declare class NgtPortalBeforeRender {
     private portalStore;
-    private injector;
-    renderPriority: number;
-    parentScene: THREE.Scene;
-    parentCamera: THREE.Camera;
-    beforeRender: EventEmitter<NgtRenderState>;
-    ngOnInit(): void;
+    renderPriority: import("@angular/core").InputSignal<number>;
+    parentScene: import("@angular/core").InputSignal<Scene>;
+    parentCamera: import("@angular/core").InputSignal<Camera>;
+    constructor();
+    onPointerOver(): 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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgtPortalBeforeRender, "ngt-portal-before-render", never, { "renderPriority": { "alias": "renderPriority"; "required": false; "isSignal": true; }; "parentScene": { "alias": "parentScene"; "required": true; "isSignal": true; }; "parentCamera": { "alias": "parentCamera"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 export declare class NgtPortalContent {
-    constructor(vcr: ViewContainerRef, parentVcr: ViewContainerRef);
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgtPortalContent, [null, { skipSelf: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgtPortalContent, "ng-template[ngtPortalContent]", never, {}, {}, never, never, true, never>;
+    constructor();
+    static ngTemplateContextGuard(_: NgtPortalContent, ctx: unknown): ctx is {
+        container: Object3D;
+        injector: Injector;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgtPortalContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgtPortalContent, "ng-template[portalContent]", never, {}, {}, never, never, true, never>;
 }
-export declare class NgtPortal implements OnInit {
-    private inputs;
-    set container(container: NgtPortalInputs['container']);
-    set portalState(state: NgtPortalInputs['state']);
-    autoRender: boolean;
-    autoRenderPriority: number;
-    beforeRender: EventEmitter<{
-        root: NgtRenderState;
-        portal: NgtRenderState;
-    }>;
-    portalContentTemplate: TemplateRef<unknown>;
-    portalContentAnchor: ViewContainerRef;
-    private parentStore;
-    parentScene: THREE.Scene;
-    parentCamera: import("./store").NgtCameraManual;
-    private portalStore;
+export declare const privateKeys: readonly ["setSize", "setFrameloop", "setDpr", "events", "setEvents", "invalidate", "advance", "size", "viewport"];
+export type NgtPortalPrivateKeys = (typeof privateKeys)[number];
+export type NgtPortalInjectableState = Partial<Omit<NgtState, NgtPortalPrivateKeys> & {
+    events?: {
+        enabled?: boolean;
+        priority?: number;
+        compute?: NgtComputeFunction;
+        connected?: any;
+    };
+    size?: NgtSize;
+}>;
+export declare class NgtPortal {
+    container: import("@angular/core").InputSignal<Object3D<import("three").Object3DEventMap>>;
+    state: import("@angular/core").InputSignal<Partial<Omit<NgtState, "viewport" | "size" | "setSize" | "events" | "invalidate" | "advance" | "setEvents" | "setDpr" | "setFrameloop"> & {
+        events?: {
+            enabled?: boolean;
+            priority?: number;
+            compute?: NgtComputeFunction;
+            connected?: any;
+        };
+        size?: NgtSize;
+    }>>;
+    /**
+     * @decsription turn this on to enable "HUD" like rendering
+     */
+    autoRender: import("@angular/core").InputSignal<boolean>;
+    autoRenderPriority: import("@angular/core").InputSignal<number>;
+    portalContent: import("@angular/core").Signal<TemplateRef<any>>;
+    portalAnchor: import("@angular/core").Signal<ViewContainerRef>;
     private injector;
-    private zone;
+    private portalStore;
+    private parentStore;
+    parentScene: import("@angular/core").Signal<Scene>;
+    parentCamera: import("@angular/core").Signal<import("./types").NgtCameraManual>;
     private raycaster;
     private pointer;
-    portalContentRendered: boolean;
-    private portalContentView?;
+    private portalRendered;
+    renderAutoBeforeRender: import("@angular/core").Signal<boolean>;
+    private portalView?;
     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; }; "portalState": { "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": true; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "autoRender": { "alias": "autoRender"; "required": false; "isSignal": true; }; "autoRenderPriority": { "alias": "autoRenderPriority"; "required": false; "isSignal": true; }; }, {}, ["portalContent"], never, true, never>;
 }
-export {};

package/lib/renderer/catalogue.d.ts

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

package/lib/renderer/constants.d.ts

@@ -7,14 +7,13 @@ export declare const SPECIAL_DOM_TAG: {
     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";
+    readonly RAW_VALUE: "rawValue";
+    readonly PARAMETERS: "parameters";
 };
 export declare const SPECIAL_EVENTS: {
     readonly BEFORE_RENDER: "beforeRender";
-    readonly AFTER_UPDATE: "afterUpdate";
-    readonly AFTER_ATTACH: "afterAttach";
+    readonly UPDATED: "updated";
+    readonly ATTACHED: "attached";
 };

package/lib/renderer/index.d.ts

@@ -1,5 +1,65 @@
-import { ChangeDetectorRef } from '@angular/core';
-import { type NgtStore } from '../store';
-export declare function provideNgtRenderer(store: NgtStore, compoundPrefixes: string[], cdr: ChangeDetectorRef): import("@angular/core").EnvironmentProviders;
+import { Renderer2, RendererFactory2, RendererType2 } from '@angular/core';
+import { NgtAnyRecord, NgtState } from '../types';
+import { NgtSignalStore } from '../utils/signal-store';
+import { NgtAnyConstructor } from './catalogue';
+import { NgtRendererNode, NgtRendererState } from './state';
+import * as i0 from "@angular/core";
+export declare class NgtRendererFactory implements RendererFactory2 {
+    private delegateRendererFactory;
+    private document;
+    private catalogue;
+    private rootStore;
+    private portalCommentsNodes;
+    private rendererMap;
+    private routedSet;
+    createRenderer(hostElement: any, type: RendererType2 | null): Renderer2;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgtRendererFactory, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<NgtRendererFactory>;
+}
+export declare class NgtRenderer implements Renderer2 {
+    private delegate;
+    private rootStore;
+    private document;
+    private portalCommentsNodes;
+    private catalogue;
+    private isRoot;
+    private argsCommentNodes;
+    constructor(delegate: Renderer2, rootStore: NgtSignalStore<NgtState>, document: Document, portalCommentsNodes: Array<NgtRendererNode>, catalogue: Record<string, NgtAnyConstructor>, isRoot?: boolean);
+    createElement(name: string, namespace?: string | null | undefined): NgtAnyRecord & {
+        __ngt_renderer__: NgtRendererState;
+    };
+    createComment(value: string): NgtAnyRecord & {
+        __ngt_renderer__: NgtRendererState;
+    };
+    appendChild(parent: NgtRendererNode, newChild: NgtRendererNode): void;
+    insertBefore(parent: NgtRendererNode, newChild: NgtRendererNode): void;
+    removeChild(parent: NgtRendererNode | null, oldChild: NgtRendererNode, isHostElement?: boolean | undefined): void;
+    parentNode(node: NgtRendererNode): any;
+    private setAttributeInternal;
+    setAttribute(el: NgtRendererNode, name: string, value: string, namespace?: string | null | undefined): void;
+    removeAttribute(el: NgtRendererNode, name: string, namespace?: string | null | undefined): void;
+    setProperty(el: NgtRendererNode, name: string, value: any): void;
+    listen(target: NgtRendererNode, eventName: string, callback: (event: any) => boolean | void): () => void;
+    private destroyInternal;
+    private removeCommentNode;
+    private processPortalContainer;
+    private shouldFindGrandparentInstance;
+    private getNgtArgs;
+    private tryGetPortalStore;
+    createText: (value: string) => any;
+    destroy: () => void;
+    destroyNode: ((node: any) => void) | null;
+    selectRootElement: (selectorOrNode: string | any, preserveContent?: boolean) => any;
+    nextSibling: (node: any) => any;
+    addClass: (el: any, name: string) => void;
+    removeClass: (el: any, name: string) => void;
+    setStyle: (el: any, style: string, value: any, flags?: import("@angular/core").RendererStyleFlags2) => void;
+    removeStyle: (el: any, style: string, flags?: import("@angular/core").RendererStyleFlags2) => void;
+    setValue: (node: any, value: string) => void;
+    get data(): {
+        [key: string]: any;
+    };
+}
+export declare function provideNgtRenderer(store: NgtSignalStore<NgtState>): import("@angular/core").EnvironmentProviders;
 export { extend } from './catalogue';
-export { HTML } from './constants';
+export { HTML, ROUTED_SCENE } from './constants';

package/lib/renderer/state.d.ts

@@ -0,0 +1,24 @@
+import { Injector } from '@angular/core';
+import { NgtAnyRecord } from '../types';
+import { NgtRendererClassId } from './utils';
+export type NgtRendererState = [
+    type: 'three' | 'portal' | 'comment' | 'dom',
+    parent: NgtRendererNode | null,
+    children: NgtRendererNode[],
+    destroyed: boolean,
+    rawValue: any,
+    portalContainer: NgtRendererNode,
+    injectorFactory: () => Injector | undefined
+];
+export interface NgtRendererNode {
+    __ngt_renderer__: NgtRendererState;
+    __ngt_dom_parent__?: HTMLElement;
+}
+export declare function createNode(type: NgtRendererState[NgtRendererClassId.type], node: NgtAnyRecord, document: Document): NgtAnyRecord & {
+    __ngt_renderer__: NgtRendererState;
+};
+export declare function isDOM(node: NgtAnyRecord): boolean;
+export declare function getClosestParentWithInstance(node: NgtRendererNode): NgtRendererNode | null;
+export declare function setParent(node: NgtRendererNode, parent: NgtRendererNode): void;
+export declare function addChild(node: NgtRendererNode, child: NgtRendererNode): void;
+export declare function removeChild(node: NgtRendererNode, child: NgtRendererNode): void;

package/lib/renderer/utils.d.ts

@@ -1,32 +1,14 @@
-import { ChangeDetectorRef, NgZone } from '@angular/core';
-import { type NgtInstanceNode } from '../instance';
+import { NgtInstanceNode } from '../types';
 export declare const enum NgtRendererClassId {
     type = 0,
     parent = 1,
-    injectedParent = 2,
-    children = 3,
-    destroyed = 4,
-    compound = 5,
-    compoundParent = 6,
-    compounded = 7,
-    queueOps = 8,
-    attributes = 9,
-    properties = 10,
-    rawValue = 11,
-    ref = 12,
-    portalContainer = 13,
-    injectorFactory = 14
+    children = 2,
+    destroyed = 3,
+    rawValue = 4,
+    portalContainer = 5,
+    injectorFactory = 6
 }
-export declare const enum NgtCompoundClassId {
-    applyFirst = 0,
-    props = 1
-}
-export declare const enum NgtQueueOpClassId {
-    type = 0,
-    op = 1,
-    done = 2
-}
-export declare function attachThreeChild(parent: NgtInstanceNode, child: NgtInstanceNode): void;
-export declare function removeThreeChild(parent: NgtInstanceNode, child: NgtInstanceNode, dispose?: boolean): void;
 export declare function kebabToPascal(str: string): string;
-export declare function processThreeEvent(instance: NgtInstanceNode, priority: number, eventName: string, callback: (event: any) => void, zone: NgZone, rootCdr: ChangeDetectorRef, targetCdr?: ChangeDetectorRef | null): () => void;
+export declare function attachThreeChild(parent: NgtInstanceNode, child: NgtInstanceNode): void;
+export declare function removeThreeChild(child: NgtInstanceNode, parent?: NgtInstanceNode, dispose?: boolean): void;
+export declare function processThreeEvent(instance: NgtInstanceNode, priority: number, eventName: string, callback: (event: any) => void): () => void;

package/lib/roots.d.ts

@@ -1,11 +1,13 @@
-import { type Injector } from '@angular/core';
-import type { NgtCanvasInputs } from './canvas';
-import { type NgtState } from './store';
-import type { NgtSignalStore } from './utils/signal-store';
-export declare const roots: Map<HTMLCanvasElement, NgtSignalStore<NgtState>>;
-export declare function injectCanvasRootInitializer(injector?: Injector): (canvas: HTMLCanvasElement) => {
+import { Injector } from '@angular/core';
+import { NgtCanvasElement, NgtCanvasOptions } from './types';
+export declare function injectCanvasRootInitializer(injector?: Injector): (canvas: NgtCanvasElement) => {
     isConfigured: boolean;
     destroy: (timeout?: number) => void;
-    configure: (inputs: NgtCanvasInputs) => void;
+    configure: (inputs: NgtCanvasOptions) => void;
 };
 export type NgtCanvasConfigurator = ReturnType<ReturnType<typeof injectCanvasRootInitializer>>;
+export declare function dispose<TObj extends {
+    dispose?: () => void;
+    type?: string;
+    [key: string]: any;
+}>(obj: TObj): void;