angular-three-tweakpane 4.0.0-next.115 → 4.0.0-next.118

package/types/angular-three-tweakpane.d.ts

@@ -0,0 +1,975 @@
+import * as i0 from '@angular/core';
+import { Signal, ViewContainerRef, ComponentRef, InjectionToken, ElementRef, WritableSignal, Injector } from '@angular/core';
+import { BladeApi, FolderApi, TpChangeEvent, ButtonApi, BooleanInputParams, ColorInputParams, NumberInputParams, Point2dInputParams, Point3dInputParams, Point4dInputParams, StringInputParams } from 'tweakpane';
+import { BindingParams, TpMouseEvent } from '@tweakpane/core';
+
+/**
+ * Directive that provides title functionality for Tweakpane components.
+ *
+ * This is a base directive used by other Tweakpane components (like `TweakpaneFolder`,
+ * `TweakpanePane`, `TweakpaneButton`) to manage their titles reactively.
+ *
+ * @example
+ * ```html
+ * <tweakpane-folder title="Settings">
+ *   <!-- folder contents -->
+ * </tweakpane-folder>
+ * ```
+ */
+declare class TweakpaneTitle {
+    /**
+     * The title text to display.
+     * @default 'TweakPane Title'
+     */
+    title: i0.InputSignal<string>;
+    private injector;
+    /**
+     * Gets the current title value without tracking signal dependencies.
+     * Useful for initial configuration when creating Tweakpane components.
+     * @returns The current title string value
+     */
+    get snapshot(): string;
+    /**
+     * Synchronizes the title property with a Tweakpane API object.
+     * Creates a reactive effect that updates the API's title whenever
+     * the input title changes.
+     *
+     * @param api - A function that returns the Tweakpane API object (or null if not ready)
+     * @returns The created effect reference
+     */
+    sync(api: () => {
+        title: string | undefined;
+    } | null): i0.EffectRef;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneTitle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TweakpaneTitle, never, never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Directive that provides hidden and disabled state management for Tweakpane blades.
+ *
+ * This is a base directive used by other Tweakpane components to control
+ * visibility and interactivity of controls.
+ *
+ * @example
+ * ```html
+ * <tweakpane-number [hidden]="isHidden" [disabled]="isDisabled" [(value)]="speed" />
+ * ```
+ */
+declare class TweakpaneBlade {
+    /**
+     * Whether the blade is hidden.
+     * @default false
+     */
+    hidden: i0.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether the blade is disabled (non-interactive).
+     * @default false
+     */
+    disabled: i0.InputSignalWithTransform<boolean, unknown>;
+    private injector;
+    /**
+     * Gets the current hidden and disabled values without tracking signal dependencies.
+     * Useful for initial configuration when creating Tweakpane components.
+     * @returns An object containing the current hidden and disabled states
+     */
+    get snapshot(): {
+        hidden: boolean;
+        disabled: boolean;
+    };
+    /**
+     * Synchronizes the hidden and disabled properties with a Tweakpane BladeApi.
+     * Creates a reactive effect that updates the API's state whenever
+     * the input values change.
+     *
+     * @param api - A function that returns the Tweakpane BladeApi (or null if not ready)
+     * @returns The created effect reference
+     */
+    sync(api: () => BladeApi | null): i0.EffectRef;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneBlade, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TweakpaneBlade, "tweakpane-blade", never, { "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Directive for creating collapsible folders within a Tweakpane.
+ *
+ * Folders are used to organize controls into logical groups. They can be
+ * nested within other folders or directly within a pane.
+ *
+ * @example
+ * ```html
+ * <tweakpane-pane>
+ *   <tweakpane-folder title="Physics" [expanded]="true">
+ *     <tweakpane-number label="Gravity" [(value)]="gravity" />
+ *     <tweakpane-number label="Friction" [(value)]="friction" />
+ *   </tweakpane-folder>
+ *
+ *   <tweakpane-folder title="Appearance">
+ *     <tweakpane-color label="Color" [(value)]="color" />
+ *   </tweakpane-folder>
+ * </tweakpane-pane>
+ * ```
+ */
+declare class TweakpaneFolder {
+    /**
+     * Whether the folder is expanded (open) or collapsed.
+     * Supports two-way binding with `[(expanded)]`.
+     * @default false
+     */
+    expanded: i0.ModelSignal<boolean>;
+    private title;
+    private blade;
+    private parent;
+    /**
+     * Signal containing the parent folder API.
+     * Automatically links to the parent folder in the component hierarchy.
+     */
+    parentFolder: i0.WritableSignal<FolderApi | null | undefined>;
+    /**
+     * Computed signal containing the Tweakpane FolderApi for this folder.
+     * Returns null if the parent folder is not yet available.
+     */
+    folder: Signal<FolderApi | null>;
+    /**
+     * Internal flag indicating whether this directive creates its own folder
+     * or reuses the parent folder. Set to `false` by `TweakpanePane`.
+     * @internal
+     */
+    isSelf: boolean;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneFolder, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TweakpaneFolder, "tweakpane-folder", never, { "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, never, true, [{ directive: typeof TweakpaneTitle; inputs: { "title": "title"; }; outputs: {}; }, { directive: typeof TweakpaneBlade; inputs: { "hidden": "hidden"; "disabled": "disabled"; }; outputs: {}; }]>;
+}
+
+/**
+ * Directive that provides an anchor point for the `tweaks()` function to dynamically create Tweakpane controls.
+ *
+ * Add this directive to your `ngt-canvas` element to enable the `tweaks()` API:
+ *
+ * ```html
+ * <ngt-canvas tweakpaneAnchor>
+ *   <ng-template #sceneGraph>
+ *     <!-- your scene -->
+ *   </ng-template>
+ * </ngt-canvas>
+ * ```
+ *
+ * Then use `tweaks()` in any component within the canvas:
+ *
+ * ```typescript
+ * const controls = tweaks('Physics', {
+ *   gravity: { value: 9.8, min: 0, max: 20 },
+ *   debug: this.debugMode, // two-way binding with existing signal
+ * });
+ * ```
+ */
+declare class TweakpaneAnchor {
+    /**
+     * The ViewContainerRef where dynamic components will be created.
+     * Injected from the host element.
+     */
+    vcr: ViewContainerRef;
+    /**
+     * Reference to the pane's TweakpaneFolder, set by TweakpanePane when it initializes.
+     * This is used as the parent folder for dynamically created folders.
+     */
+    paneFolder: i0.WritableSignal<TweakpaneFolder | null>;
+    /**
+     * Registry of folder ComponentRefs by folder name.
+     * Used to reuse existing folders when multiple `tweaks()` calls use the same folder name.
+     */
+    folders: Record<string, ComponentRef<TweakpaneAnchorHost>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneAnchor, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TweakpaneAnchor, "[tweakpaneAnchor]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * A minimal host component used for dynamically creating Tweakpane controls.
+ * This component serves as a host for directives like TweakpaneFolder, TweakpaneNumber, etc.
+ * when using the `tweaks()` function.
+ *
+ * @internal
+ */
+declare class TweakpaneAnchorHost {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneAnchorHost, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TweakpaneAnchorHost, "tweakpane-anchor-host", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Directive that provides debounced change event handling for Tweakpane controls.
+ *
+ * This is a base directive used by binding-based controls to prevent
+ * excessive updates when values change rapidly (e.g., during slider dragging).
+ *
+ * @example
+ * ```html
+ * <!-- Debounce value updates by 300ms -->
+ * <tweakpane-number [debounce]="300" [(value)]="speed" />
+ * ```
+ */
+declare class TweakpaneDebounce {
+    /**
+     * The debounce delay in milliseconds before emitting value changes.
+     * @default 150
+     */
+    debounce: i0.InputSignalWithTransform<number, unknown>;
+    private injector;
+    /**
+     * Synchronizes debounced change events from a Tweakpane API with a callback.
+     * Creates a reactive effect that subscribes to change events and debounces them.
+     *
+     * @typeParam T - The type of value being tracked
+     * @param api - A function that returns the Tweakpane API object with on/off methods (or null if not ready)
+     * @param cb - Callback function invoked with the change event after debounce delay
+     * @returns The created effect reference
+     */
+    sync<T>(api: () => {
+        on: (evName: 'change', cb: (ev: TpChangeEvent<T>) => void) => void;
+        off: (evName: 'change', cb: (ev: TpChangeEvent<T>) => void) => void;
+    } | null, cb: (ev: TpChangeEvent<T>) => void): i0.EffectRef;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneDebounce, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TweakpaneDebounce, never, never, { "debounce": { "alias": "debounce"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Directive that provides label and tag functionality for Tweakpane controls.
+ *
+ * This is a base directive used by binding-based controls (like `TweakpaneNumber`,
+ * `TweakpaneText`, `TweakpaneCheckbox`) to manage their labels and optional tags.
+ *
+ * @example
+ * ```html
+ * <tweakpane-number label="Speed" tag="m/s" [(value)]="speed" />
+ * ```
+ */
+declare class TweakpaneLabel {
+    /**
+     * The label text displayed next to the control.
+     * @default ''
+     */
+    label: i0.InputSignal<string>;
+    /**
+     * An optional tag displayed alongside the label (e.g., units like "px", "m/s").
+     * @default ''
+     */
+    tag: i0.InputSignal<string>;
+    private injector;
+    /**
+     * Gets the current label and tag values without tracking signal dependencies.
+     * Useful for initial configuration when creating Tweakpane controls.
+     * @returns An object containing the current label and tag values
+     */
+    get snapshot(): {
+        label: string;
+        tag: string;
+    };
+    /**
+     * Synchronizes the label and tag properties with a Tweakpane API object.
+     * Creates a reactive effect that updates the API's label and tag
+     * whenever the input values change.
+     *
+     * @param api - A function that returns the Tweakpane API object (or null if not ready)
+     * @returns The created effect reference
+     */
+    sync(api: () => {
+        label?: string | null;
+        tag?: string | null;
+    } | null): i0.EffectRef;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneLabel, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TweakpaneLabel, never, never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "tag": { "alias": "tag"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Injection token used to configure value transformation when TweakpaneBinding
+ * is used as a host directive.
+ *
+ * When set to `true`, values pass through unchanged.
+ * When set to an object with `in` and `out` functions, values are transformed:
+ * - `in`: Transforms the input value before binding to Tweakpane
+ * - `out`: Transforms the Tweakpane value before emitting to the model
+ *
+ * @internal
+ */
+declare const NGT_TWEAK_BINDING_AS_HOST: InjectionToken<true | {
+    in: (value: unknown) => unknown;
+    out: (value: unknown) => unknown;
+} | null>;
+/**
+ * Provides configuration for TweakpaneBinding when used as a host directive.
+ *
+ * @typeParam TIn - The input value type (from the component)
+ * @typeParam TOut - The output value type (for Tweakpane)
+ * @param inOut - Optional object containing `in` and `out` transformation functions
+ * @returns A provider configuration object
+ *
+ * @example
+ * ```typescript
+ * // Simple passthrough (no transformation)
+ * providers: [provideTweakBindingAsHost()]
+ *
+ * // With value transformation (e.g., array to object)
+ * providers: [provideTweakBindingAsHost({
+ *   in: (value) => ({ x: value[0], y: value[1] }),
+ *   out: (value) => [value.x, value.y]
+ * })]
+ * ```
+ */
+declare function provideTweakBindingAsHost<TIn, TOut>(inOut?: {
+    in: (value: TIn) => TOut;
+    out: (value: TOut) => TIn;
+}): {
+    provide: InjectionToken<true | {
+        in: (value: unknown) => unknown;
+        out: (value: unknown) => unknown;
+    } | null>;
+    useValue: boolean | {
+        in: (value: TIn) => TOut;
+        out: (value: TOut) => TIn;
+    };
+};
+/**
+ * Base directive for creating Tweakpane bindings (two-way data binding controls).
+ *
+ * This directive provides the core functionality for binding Angular values to
+ * Tweakpane controls. It handles:
+ * - Creating the binding on the parent folder
+ * - Syncing label, blade, and debounce settings
+ * - Value transformation when used as a host directive
+ * - Automatic cleanup on destroy
+ *
+ * Most commonly used as a host directive by specific control types like
+ * `TweakpaneNumber`, `TweakpaneText`, `TweakpaneCheckbox`, etc.
+ *
+ * @typeParam TValue - The type of value being bound
+ *
+ * @example
+ * ```html
+ * <!-- Direct usage (rarely needed) -->
+ * <tweakpane-binding [(value)]="myValue" label="My Value" />
+ *
+ * <!-- More commonly used via specific controls -->
+ * <tweakpane-number [(value)]="speed" label="Speed" />
+ * ```
+ */
+declare class TweakpaneBinding<TValue> {
+    /**
+     * The bound value. Supports two-way binding with `[(value)]`.
+     */
+    value: i0.ModelSignal<any>;
+    private debounce;
+    private label;
+    private blade;
+    private parent;
+    private injector;
+    private asHostDirective;
+    private bindingBaseParams;
+    private bindingParams;
+    /**
+     * Gets the bindable object with optional value transformation.
+     * @returns An object with a `value` property suitable for Tweakpane binding
+     */
+    private get bindableObject();
+    private bindingApi;
+    constructor();
+    /**
+     * Synchronizes additional binding parameters with the Tweakpane binding.
+     * Called by specific control directives to add control-specific parameters
+     * (e.g., min/max for numbers, options for lists).
+     *
+     * @param params - A function that returns the binding parameters
+     * @returns The created effect reference
+     */
+    syncBindingParams(params: () => BindingParams): i0.EffectRef;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneBinding<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TweakpaneBinding<any>, "tweakpane-binding", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, [{ directive: typeof TweakpaneBlade; inputs: { "disabled": "disabled"; "hidden": "hidden"; }; outputs: {}; }, { directive: typeof TweakpaneDebounce; inputs: { "debounce": "debounce"; }; outputs: {}; }, { directive: typeof TweakpaneLabel; inputs: { "label": "label"; "tag": "tag"; }; outputs: {}; }]>;
+}
+
+/**
+ * Directive for creating a clickable button in Tweakpane.
+ *
+ * Buttons are used to trigger actions (like reset, randomize, etc.)
+ * and emit click events when pressed.
+ *
+ * @example
+ * ```html
+ * <tweakpane-pane>
+ *   <tweakpane-button title="Reset" (click)="onReset()" />
+ *   <tweakpane-button title="Randomize" label="Action" (click)="onRandomize()" />
+ *   <tweakpane-button title="Save" [disabled]="!canSave" (click)="onSave()" />
+ * </tweakpane-pane>
+ * ```
+ */
+declare class TweakpaneButton {
+    /**
+     * Event emitted when the button is clicked.
+     * Provides the Tweakpane mouse event with the ButtonApi.
+     */
+    click: i0.OutputEmitterRef<TpMouseEvent<ButtonApi>>;
+    private title;
+    private label;
+    private blade;
+    private parent;
+    private buttonApi;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneButton, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TweakpaneButton, "tweakpane-button", never, {}, { "click": "click"; }, never, never, true, [{ directive: typeof TweakpaneTitle; inputs: { "title": "title"; }; outputs: {}; }, { directive: typeof TweakpaneLabel; inputs: { "label": "label"; }; outputs: {}; }, { directive: typeof TweakpaneBlade; inputs: { "hidden": "hidden"; "disabled": "disabled"; }; outputs: {}; }]>;
+}
+
+/**
+ * Directive for creating a boolean checkbox control in Tweakpane.
+ *
+ * Provides two-way binding for boolean values with a checkbox UI.
+ *
+ * @example
+ * ```html
+ * <tweakpane-pane>
+ *   <tweakpane-checkbox label="Debug Mode" [(value)]="debugMode" />
+ *   <tweakpane-checkbox label="Wireframe" [(value)]="showWireframe" [disabled]="!debugMode()" />
+ * </tweakpane-pane>
+ * ```
+ */
+declare class TweakpaneCheckbox {
+    /**
+     * Additional Tweakpane boolean input parameters.
+     * @default {}
+     */
+    params: i0.InputSignal<BooleanInputParams>;
+    private binding;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneCheckbox, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TweakpaneCheckbox, "tweakpane-checkbox", never, { "params": { "alias": "params"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof TweakpaneBinding; inputs: { "value": "value"; }; outputs: { "valueChange": "valueChange"; }; }]>;
+}
+
+/**
+ * Directive for creating a color picker control in Tweakpane.
+ *
+ * Provides two-way binding for color values (as hex strings) with a
+ * color picker UI that supports RGB, HSL, and alpha.
+ *
+ * @example
+ * ```html
+ * <tweakpane-pane>
+ *   <tweakpane-color label="Background" [(value)]="backgroundColor" />
+ *   <tweakpane-color label="Accent" [(value)]="accentColor" [params]="{ alpha: true }" />
+ * </tweakpane-pane>
+ * ```
+ */
+declare class TweakpaneColor {
+    /**
+     * Additional Tweakpane color input parameters.
+     * Can include options like `alpha`, `color.type`, etc.
+     * @default {}
+     */
+    params: i0.InputSignal<ColorInputParams>;
+    private binding;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneColor, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TweakpaneColor, "tweakpane-color", never, { "params": { "alias": "params"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof TweakpaneBinding; inputs: { "value": "value"; }; outputs: { "valueChange": "valueChange"; }; }]>;
+}
+
+/**
+ * Directive for creating a dropdown list/select control in Tweakpane.
+ *
+ * Provides two-way binding for selecting from a list of options.
+ * Options can be provided as an array or as a key-value object.
+ *
+ * @typeParam TOptionValue - The type of values in the list
+ *
+ * @example
+ * ```html
+ * <tweakpane-pane>
+ *   <!-- Options as array -->
+ *   <tweakpane-list
+ *     label="Mode"
+ *     [(value)]="mode"
+ *     [options]="['normal', 'debug', 'performance']"
+ *   />
+ *
+ *   <!-- Options as object (label: value mapping) -->
+ *   <tweakpane-list
+ *     label="Quality"
+ *     [(value)]="quality"
+ *     [options]="{ 'Low': 1, 'Medium': 2, 'High': 3, 'Ultra': 4 }"
+ *   />
+ * </tweakpane-pane>
+ * ```
+ */
+declare class TweakpaneList<TOptionValue> {
+    /**
+     * The currently selected value. Supports two-way binding with `[(value)]`.
+     */
+    value: i0.ModelSignal<TOptionValue>;
+    /**
+     * The list options. Can be:
+     * - An array of values (labels will be stringified values)
+     * - An object mapping display labels to values
+     */
+    options: i0.InputSignal<Record<string, TOptionValue> | TOptionValue[]>;
+    private blade;
+    private debounce;
+    private label;
+    private parent;
+    private listOptions;
+    private listApi;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneList<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TweakpaneList<any>, "tweakpane-list", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, [{ directive: typeof TweakpaneBlade; inputs: { "hidden": "hidden"; "disabled": "disabled"; }; outputs: {}; }, { directive: typeof TweakpaneDebounce; inputs: { "debounce": "debounce"; }; outputs: {}; }, { directive: typeof TweakpaneLabel; inputs: { "label": "label"; }; outputs: {}; }]>;
+}
+
+/**
+ * Directive for creating a numeric input control in Tweakpane.
+ *
+ * Provides two-way binding for number values with optional min/max/step
+ * constraints. Displays as a text input with increment buttons, or as
+ * a slider if min and max are specified.
+ *
+ * @example
+ * ```html
+ * <tweakpane-pane>
+ *   <!-- Simple number input -->
+ *   <tweakpane-number label="Count" [(value)]="count" />
+ *
+ *   <!-- With slider (min/max defined) -->
+ *   <tweakpane-number
+ *     label="Speed"
+ *     [(value)]="speed"
+ *     [params]="{ min: 0, max: 100, step: 0.1 }"
+ *   />
+ *
+ *   <!-- With custom format -->
+ *   <tweakpane-number
+ *     label="Angle"
+ *     [(value)]="angle"
+ *     [params]="{ min: 0, max: 360, format: (v) => v.toFixed(0) + '°' }"
+ *   />
+ * </tweakpane-pane>
+ * ```
+ */
+declare class TweakpaneNumber {
+    /**
+     * Additional Tweakpane number input parameters.
+     * Can include `min`, `max`, `step`, `format`, etc.
+     * @default {}
+     */
+    params: i0.InputSignal<NumberInputParams>;
+    private binding;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneNumber, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TweakpaneNumber, "tweakpane-number", never, { "params": { "alias": "params"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof TweakpaneBinding; inputs: { "value": "value"; }; outputs: { "valueChange": "valueChange"; }; }]>;
+}
+
+/**
+ * Main Tweakpane container directive that creates the root pane element.
+ *
+ * This directive creates a floating Tweakpane panel that can be positioned
+ * anywhere on the screen. It serves as the root container for all
+ * Tweakpane controls (folders, bindings, buttons, etc.).
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage with default positioning (top-right) -->
+ * <tweakpane-pane title="Settings">
+ *   <tweakpane-number label="Speed" [(value)]="speed" />
+ *   <tweakpane-checkbox label="Debug" [(value)]="debug" />
+ * </tweakpane-pane>
+ *
+ * <!-- Custom positioning -->
+ * <tweakpane-pane title="Controls" left="8px" bottom="8px" [right]="undefined">
+ *   <tweakpane-folder title="Physics">
+ *     <tweakpane-number label="Gravity" [(value)]="gravity" />
+ *   </tweakpane-folder>
+ * </tweakpane-pane>
+ *
+ * <!-- Embedded in a container element -->
+ * <div #container></div>
+ * <tweakpane-pane [container]="container">
+ *   <!-- controls -->
+ * </tweakpane-pane>
+ * ```
+ */
+declare class TweakpanePane {
+    /**
+     * CSS top position of the pane.
+     * @default '8px'
+     */
+    top: i0.InputSignal<string | number>;
+    /**
+     * CSS right position of the pane.
+     * @default '8px'
+     */
+    right: i0.InputSignal<string | number>;
+    /**
+     * CSS left position of the pane.
+     * @default undefined
+     */
+    left: i0.InputSignal<string | number | undefined>;
+    /**
+     * CSS bottom position of the pane.
+     * @default undefined
+     */
+    bottom: i0.InputSignal<string | number | undefined>;
+    /**
+     * CSS width of the pane.
+     * @default '256px'
+     */
+    width: i0.InputSignal<string | number>;
+    /**
+     * Optional container element to embed the pane into.
+     * If not provided, the pane floats freely in the document.
+     * Can be an HTMLElement or an Angular ElementRef.
+     */
+    container: i0.InputSignal<HTMLElement | ElementRef<HTMLElement | undefined> | undefined>;
+    private document;
+    private title;
+    private folder;
+    private tweakpaneAnchor;
+    private pane;
+    private paneContainer?;
+    constructor();
+    /**
+     * Updates a CSS style property on the pane's parent element.
+     * @param propertyName - The name of the style property to update
+     */
+    private updateStyleEffect;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TweakpanePane, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TweakpanePane, "tweakpane-pane", never, { "top": { "alias": "top"; "required": false; "isSignal": true; }; "right": { "alias": "right"; "required": false; "isSignal": true; }; "left": { "alias": "left"; "required": false; "isSignal": true; }; "bottom": { "alias": "bottom"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof TweakpaneFolder; inputs: { "expanded": "expanded"; }; outputs: { "expandedChange": "expandedChange"; }; }]>;
+}
+
+/**
+ * Directive for creating a 2D/3D/4D point input control in Tweakpane.
+ *
+ * Provides two-way binding for point values (as tuple arrays or objects).
+ * The control displays input fields for each dimension and optionally
+ * shows a 2D picker for x/y values.
+ *
+ * Values are accepted as arrays `[x, y, z?, w?]` and emitted in the same format.
+ *
+ * @example
+ * ```html
+ * <tweakpane-pane>
+ *   <!-- 2D point -->
+ *   <tweakpane-point label="Position" [(value)]="position2D" />
+ *
+ *   <!-- 3D point with custom ranges -->
+ *   <tweakpane-point
+ *     label="Position"
+ *     [(value)]="position3D"
+ *     [params]="{
+ *       x: { min: -10, max: 10 },
+ *       y: { min: 0, max: 100 },
+ *       z: { min: -10, max: 10 }
+ *     }"
+ *   />
+ *
+ *   <!-- 4D point (e.g., quaternion) -->
+ *   <tweakpane-point label="Rotation" [(value)]="quaternion" />
+ * </tweakpane-pane>
+ * ```
+ */
+declare class TweakpanePoint {
+    /**
+     * Additional Tweakpane point input parameters.
+     * Can include per-axis configuration like `{ x: { min, max }, y: { min, max } }`.
+     * @default {}
+     */
+    params: i0.InputSignal<Point2dInputParams | Point3dInputParams | Point4dInputParams>;
+    private binding;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<TweakpanePoint, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TweakpanePoint, "tweakpane-point", never, { "params": { "alias": "params"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof TweakpaneBinding; inputs: { "value": "value"; }; outputs: { "valueChange": "valueChange"; }; }]>;
+}
+
+/**
+ * Directive for creating a text input control in Tweakpane.
+ *
+ * Provides two-way binding for string values with a text input UI.
+ *
+ * @example
+ * ```html
+ * <tweakpane-pane>
+ *   <tweakpane-text label="Name" [(value)]="objectName" />
+ *   <tweakpane-text label="Description" [(value)]="description" />
+ * </tweakpane-pane>
+ * ```
+ */
+declare class TweakpaneText {
+    /**
+     * Additional Tweakpane string input parameters.
+     * @default {}
+     */
+    params: i0.InputSignal<StringInputParams>;
+    private binding;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneText, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TweakpaneText, "tweakpane-text", never, { "params": { "alias": "params"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof TweakpaneBinding; inputs: { "value": "value"; }; outputs: { "valueChange": "valueChange"; }; }]>;
+}
+
+/**
+ * Configuration for a number input control.
+ *
+ * @example
+ * ```typescript
+ * const config = {
+ *   gravity: { value: 9.8, min: 0, max: 20, step: 0.1 }
+ * };
+ * ```
+ */
+interface TweakNumberConfig {
+    /** The initial value or a writable signal for two-way binding */
+    value: number | WritableSignal<number>;
+    /** Minimum allowed value (enables slider display) */
+    min?: number;
+    /** Maximum allowed value (enables slider display) */
+    max?: number;
+    /** Step increment for the value */
+    step?: number;
+}
+/**
+ * Configuration for a text input control.
+ *
+ * @example
+ * ```typescript
+ * const config = {
+ *   name: { value: 'Object 1' }
+ * };
+ * ```
+ */
+interface TweakTextConfig {
+    /** The initial value or a writable signal for two-way binding */
+    value: string | WritableSignal<string>;
+}
+/**
+ * Configuration for a color picker control.
+ *
+ * @example
+ * ```typescript
+ * const config = {
+ *   background: { value: '#ff0000', color: true }
+ * };
+ * ```
+ */
+interface TweakColorConfig {
+    /** The initial color value (as hex string) or a writable signal */
+    value: string | WritableSignal<string>;
+    /** Marker to identify this as a color input (must be `true`) */
+    color: true;
+}
+/**
+ * Configuration for a checkbox/boolean control.
+ *
+ * @example
+ * ```typescript
+ * const config = {
+ *   enabled: { value: true }
+ * };
+ * ```
+ */
+interface TweakCheckboxConfig {
+    /** The initial value or a writable signal for two-way binding */
+    value: boolean | WritableSignal<boolean>;
+}
+/**
+ * Configuration for a dropdown list/select control.
+ *
+ * @typeParam T - The type of option values
+ *
+ * @example
+ * ```typescript
+ * // With array of options
+ * const config = {
+ *   mode: { value: 'normal', options: ['normal', 'debug', 'performance'] }
+ * };
+ *
+ * // With labeled options
+ * const config = {
+ *   quality: { value: 2, options: { 'Low': 1, 'Medium': 2, 'High': 3 } }
+ * };
+ * ```
+ */
+interface TweakListConfig<T> {
+    /** The initial value or a writable signal for two-way binding */
+    value: T | WritableSignal<T>;
+    /** Array of options or object mapping labels to values */
+    options: T[] | Record<string, T>;
+}
+/**
+ * Configuration for a 2D/3D/4D point input control.
+ *
+ * @typeParam TVector - The tuple type for the point dimensions
+ *
+ * @example
+ * ```typescript
+ * // 2D point
+ * const config = {
+ *   position: { value: [0, 0] as [number, number] }
+ * };
+ *
+ * // 3D point with axis constraints
+ * const config = {
+ *   position: {
+ *     value: [0, 0, 0] as [number, number, number],
+ *     x: { min: -10, max: 10 },
+ *     y: { min: 0, max: 100 },
+ *     z: { min: -10, max: 10 }
+ *   }
+ * };
+ * ```
+ */
+interface TweakPointConfig<TVector extends [number, number] | [number, number, number] | [number, number, number, number] = [number, number] | [number, number, number] | [number, number, number, number]> {
+    /** The initial point value or a writable signal for two-way binding */
+    value: TVector | WritableSignal<TVector>;
+    /** Configuration for the X axis (min, max, step, etc.) */
+    x?: Point2dInputParams['x'];
+    /** Configuration for the Y axis */
+    y?: Point2dInputParams['y'];
+    /** Configuration for the Z axis (3D/4D points only) */
+    z?: Point3dInputParams['z'];
+    /** Configuration for the W axis (4D points only) */
+    w?: Point4dInputParams['w'];
+}
+/**
+ * Configuration for a button/action control.
+ *
+ * @example
+ * ```typescript
+ * const config = {
+ *   reset: { action: () => this.resetSettings(), label: 'Actions' }
+ * };
+ * ```
+ */
+interface TweakButtonConfig {
+    /** The callback function to execute when the button is clicked */
+    action: () => void;
+    /** Optional label displayed next to the button */
+    label?: string;
+}
+/**
+ * Configuration for a nested folder within the tweaks.
+ * Created using the `tweaks.folder()` helper function.
+ *
+ * @typeParam T - The config type for the folder's contents
+ *
+ * @example
+ * ```typescript
+ * const config = {
+ *   advanced: tweaks.folder('Advanced Settings', {
+ *     iterations: { value: 4, min: 1, max: 10 },
+ *     tolerance: { value: 0.001, min: 0, max: 1 }
+ *   })
+ * };
+ * ```
+ */
+interface TweakFolderConfig<T extends TweakConfig> {
+    /** Internal marker to identify folder configs */
+    __folder: true;
+    /** The folder title displayed in the UI */
+    name: string;
+    /** The configuration object for controls within the folder */
+    config: T;
+    /** Whether the folder is initially expanded */
+    expanded?: boolean;
+}
+/**
+ * Union of all possible configuration value types for `tweaks()`.
+ *
+ * Includes:
+ * - Primitive values (number, string, boolean)
+ * - Writable signals for two-way binding
+ * - Typed config objects for each control type
+ */
+type TweakConfigValue = number | string | boolean | WritableSignal<number> | WritableSignal<string> | WritableSignal<boolean> | TweakNumberConfig | TweakTextConfig | TweakColorConfig | TweakCheckboxConfig | TweakListConfig<unknown> | TweakPointConfig | TweakButtonConfig | TweakFolderConfig<TweakConfig>;
+/**
+ * A configuration object for `tweaks()`.
+ * Maps control names to their configuration values.
+ */
+type TweakConfig = Record<string, TweakConfigValue>;
+/**
+ * Infer the signal type from a config value.
+ * Always returns Signal<T> (readonly) - never WritableSignal.
+ * Users can use their original WritableSignal if they need write access.
+ */
+type InferSignalType<T> = T extends WritableSignal<infer U> ? Signal<U> : T extends number ? Signal<number> : T extends string ? Signal<string> : T extends boolean ? Signal<boolean> : T extends TweakNumberConfig ? Signal<number> : T extends TweakTextConfig ? Signal<string> : T extends TweakColorConfig ? Signal<string> : T extends TweakCheckboxConfig ? Signal<boolean> : T extends TweakListConfig<infer U> ? Signal<U> : T extends TweakPointConfig<infer VectorType> ? Signal<VectorType> : T extends TweakButtonConfig ? never : T extends TweakFolderConfig<infer C> ? TweakResult<C> : never;
+/**
+ * The result type returned by `tweaks()` for a given configuration.
+ *
+ * Maps each config key to a readonly Signal of the appropriate type.
+ * Button configs are excluded (they don't return values).
+ *
+ * @typeParam T - The configuration object type
+ */
+type TweakResult<T extends TweakConfig> = {
+    [K in keyof T as T[K] extends TweakButtonConfig ? never : K]: InferSignalType<T[K]>;
+};
+/**
+ * Options for configuring a `tweaks()` folder.
+ */
+interface TweakFolderOptions {
+    /**
+     * Whether the folder is expanded by default.
+     * @default false
+     */
+    expanded?: boolean;
+    /**
+     * Optional injector for use outside an injection context.
+     * Required when calling `tweaks()` from outside a constructor or field initializer.
+     */
+    injector?: Injector;
+}
+/**
+ * Creates Tweakpane controls declaratively from any component within an `ngt-canvas`.
+ *
+ * **Prerequisites:**
+ * 1. Add `tweakpaneAnchor` directive to your `ngt-canvas`:
+ *    ```html
+ *    <ngt-canvas tweakpaneAnchor>
+ *    ```
+ * 2. Add `<tweakpane-pane>` somewhere in your scene
+ *
+ * @param folderName - The name of the folder to create/use
+ * @param config - Configuration object defining the controls
+ * @param options - Optional folder options (expanded, etc.)
+ * @returns An object with signals for each control value
+ *
+ * @example
+ * ```typescript
+ * // Basic usage with primitives (creates new signals)
+ * const controls = tweaks('Physics', {
+ *   gravity: 9.8,
+ *   debug: false,
+ *   name: 'World',
+ * });
+ *
+ * // With config objects for more control
+ * const controls = tweaks('Physics', {
+ *   gravity: { value: 9.8, min: 0, max: 20, step: 0.1 },
+ *   color: { value: '#ff0000', color: true },
+ *   mode: { value: 'normal', options: ['normal', 'debug', 'verbose'] },
+ * });
+ *
+ * // Two-way binding with existing signals
+ * filteringEnabled = signal(true);
+ * const controls = tweaks('Settings', {
+ *   filteringEnabled: this.filteringEnabled, // two-way binding
+ * });
+ *
+ * // Buttons (actions)
+ * const controls = tweaks('Actions', {
+ *   reset: { action: () => this.reset() },
+ * });
+ *
+ * // Nested folders
+ * const controls = tweaks('Settings', {
+ *   basic: 42,
+ *   advanced: tweaks.folder('Advanced', {
+ *     iterations: { value: 4, min: 1, max: 10 },
+ *   }),
+ * });
+ * ```
+ */
+declare function tweaks<T extends TweakConfig>(folderName: string, config: T, { injector, ...options }?: TweakFolderOptions): TweakResult<T>;
+declare namespace tweaks {
+    var folder: <T extends TweakConfig>(name: string, config: T, options?: {
+        expanded?: boolean;
+    }) => TweakFolderConfig<T>;
+}
+
+export { NGT_TWEAK_BINDING_AS_HOST, TweakpaneAnchor, TweakpaneAnchorHost, TweakpaneBinding, TweakpaneBlade, TweakpaneButton, TweakpaneCheckbox, TweakpaneColor, TweakpaneDebounce, TweakpaneFolder, TweakpaneLabel, TweakpaneList, TweakpaneNumber, TweakpanePane, TweakpanePoint, TweakpaneText, TweakpaneTitle, provideTweakBindingAsHost, tweaks };
+export type { TweakButtonConfig, TweakCheckboxConfig, TweakColorConfig, TweakConfig, TweakConfigValue, TweakFolderConfig, TweakFolderOptions, TweakListConfig, TweakNumberConfig, TweakPointConfig, TweakResult, TweakTextConfig };