angular-three-tweakpane 4.0.0-next.116 → 4.0.0-next.119

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,52 +1,317 @@
1
- import * as _angular_core from '@angular/core';
2
- import { InjectionToken, Signal, ElementRef } from '@angular/core';
1
+ import * as i0 from '@angular/core';
2
+ import { Signal, ViewContainerRef, ComponentRef, InjectionToken, ElementRef, WritableSignal, Injector } from '@angular/core';
3
+ import { BladeApi, FolderApi, TpChangeEvent, ButtonApi, BooleanInputParams, ColorInputParams, NumberInputParams, Point2dInputParams, Point3dInputParams, Point4dInputParams, StringInputParams } from 'tweakpane';
3
4
  import { BindingParams, TpMouseEvent } from '@tweakpane/core';
4
- import { BladeApi, TpChangeEvent, ButtonApi, BooleanInputParams, ColorInputParams, FolderApi, NumberInputParams, Point2dInputParams, Point3dInputParams, Point4dInputParams, StringInputParams } from 'tweakpane';
5
5
 
6
+ /**
7
+ * Directive that provides title functionality for Tweakpane components.
8
+ *
9
+ * This is a base directive used by other Tweakpane components (like `TweakpaneFolder`,
10
+ * `TweakpanePane`, `TweakpaneButton`) to manage their titles reactively.
11
+ *
12
+ * @example
13
+ * ```html
14
+ * <tweakpane-folder title="Settings">
15
+ * <!-- folder contents -->
16
+ * </tweakpane-folder>
17
+ * ```
18
+ */
19
+ declare class TweakpaneTitle {
20
+ /**
21
+ * The title text to display.
22
+ * @default 'TweakPane Title'
23
+ */
24
+ title: i0.InputSignal<string>;
25
+ private injector;
26
+ /**
27
+ * Gets the current title value without tracking signal dependencies.
28
+ * Useful for initial configuration when creating Tweakpane components.
29
+ * @returns The current title string value
30
+ */
31
+ get snapshot(): string;
32
+ /**
33
+ * Synchronizes the title property with a Tweakpane API object.
34
+ * Creates a reactive effect that updates the API's title whenever
35
+ * the input title changes.
36
+ *
37
+ * @param api - A function that returns the Tweakpane API object (or null if not ready)
38
+ * @returns The created effect reference
39
+ */
40
+ sync(api: () => {
41
+ title: string | undefined;
42
+ } | null): i0.EffectRef;
43
+ static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneTitle, never>;
44
+ static ɵdir: i0.ɵɵDirectiveDeclaration<TweakpaneTitle, never, never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
45
+ }
46
+
47
+ /**
48
+ * Directive that provides hidden and disabled state management for Tweakpane blades.
49
+ *
50
+ * This is a base directive used by other Tweakpane components to control
51
+ * visibility and interactivity of controls.
52
+ *
53
+ * @example
54
+ * ```html
55
+ * <tweakpane-number [hidden]="isHidden" [disabled]="isDisabled" [(value)]="speed" />
56
+ * ```
57
+ */
6
58
  declare class TweakpaneBlade {
7
- hidden: _angular_core.InputSignalWithTransform<boolean, unknown>;
8
- disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
59
+ /**
60
+ * Whether the blade is hidden.
61
+ * @default false
62
+ */
63
+ hidden: i0.InputSignalWithTransform<boolean, unknown>;
64
+ /**
65
+ * Whether the blade is disabled (non-interactive).
66
+ * @default false
67
+ */
68
+ disabled: i0.InputSignalWithTransform<boolean, unknown>;
9
69
  private injector;
70
+ /**
71
+ * Gets the current hidden and disabled values without tracking signal dependencies.
72
+ * Useful for initial configuration when creating Tweakpane components.
73
+ * @returns An object containing the current hidden and disabled states
74
+ */
10
75
  get snapshot(): {
11
76
  hidden: boolean;
12
77
  disabled: boolean;
13
78
  };
14
- sync(api: () => BladeApi | null): _angular_core.EffectRef;
15
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<TweakpaneBlade, never>;
16
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TweakpaneBlade, "tweakpane-blade", never, { "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
79
+ /**
80
+ * Synchronizes the hidden and disabled properties with a Tweakpane BladeApi.
81
+ * Creates a reactive effect that updates the API's state whenever
82
+ * the input values change.
83
+ *
84
+ * @param api - A function that returns the Tweakpane BladeApi (or null if not ready)
85
+ * @returns The created effect reference
86
+ */
87
+ sync(api: () => BladeApi | null): i0.EffectRef;
88
+ static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneBlade, never>;
89
+ 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>;
90
+ }
91
+
92
+ /**
93
+ * Directive for creating collapsible folders within a Tweakpane.
94
+ *
95
+ * Folders are used to organize controls into logical groups. They can be
96
+ * nested within other folders or directly within a pane.
97
+ *
98
+ * @example
99
+ * ```html
100
+ * <tweakpane-pane>
101
+ * <tweakpane-folder title="Physics" [expanded]="true">
102
+ * <tweakpane-number label="Gravity" [(value)]="gravity" />
103
+ * <tweakpane-number label="Friction" [(value)]="friction" />
104
+ * </tweakpane-folder>
105
+ *
106
+ * <tweakpane-folder title="Appearance">
107
+ * <tweakpane-color label="Color" [(value)]="color" />
108
+ * </tweakpane-folder>
109
+ * </tweakpane-pane>
110
+ * ```
111
+ */
112
+ declare class TweakpaneFolder {
113
+ /**
114
+ * Whether the folder is expanded (open) or collapsed.
115
+ * Supports two-way binding with `[(expanded)]`.
116
+ * @default false
117
+ */
118
+ expanded: i0.ModelSignal<boolean>;
119
+ private title;
120
+ private blade;
121
+ private parent;
122
+ /**
123
+ * Signal containing the parent folder API.
124
+ * Automatically links to the parent folder in the component hierarchy.
125
+ */
126
+ parentFolder: i0.WritableSignal<FolderApi | null | undefined>;
127
+ /**
128
+ * Computed signal containing the Tweakpane FolderApi for this folder.
129
+ * Returns null if the parent folder is not yet available.
130
+ */
131
+ folder: Signal<FolderApi | null>;
132
+ /**
133
+ * Internal flag indicating whether this directive creates its own folder
134
+ * or reuses the parent folder. Set to `false` by `TweakpanePane`.
135
+ * @internal
136
+ */
137
+ isSelf: boolean;
138
+ constructor();
139
+ static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneFolder, never>;
140
+ 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: {}; }]>;
141
+ }
142
+
143
+ /**
144
+ * Directive that provides an anchor point for the `tweaks()` function to dynamically create Tweakpane controls.
145
+ *
146
+ * Add this directive to your `ngt-canvas` element to enable the `tweaks()` API:
147
+ *
148
+ * ```html
149
+ * <ngt-canvas tweakpaneAnchor>
150
+ * <ng-template #sceneGraph>
151
+ * <!-- your scene -->
152
+ * </ng-template>
153
+ * </ngt-canvas>
154
+ * ```
155
+ *
156
+ * Then use `tweaks()` in any component within the canvas:
157
+ *
158
+ * ```typescript
159
+ * const controls = tweaks('Physics', {
160
+ * gravity: { value: 9.8, min: 0, max: 20 },
161
+ * debug: this.debugMode, // two-way binding with existing signal
162
+ * });
163
+ * ```
164
+ */
165
+ declare class TweakpaneAnchor {
166
+ /**
167
+ * The ViewContainerRef where dynamic components will be created.
168
+ * Injected from the host element.
169
+ */
170
+ vcr: ViewContainerRef;
171
+ /**
172
+ * Reference to the pane's TweakpaneFolder, set by TweakpanePane when it initializes.
173
+ * This is used as the parent folder for dynamically created folders.
174
+ */
175
+ paneFolder: i0.WritableSignal<TweakpaneFolder | null>;
176
+ /**
177
+ * Registry of folder ComponentRefs by folder name.
178
+ * Used to reuse existing folders when multiple `tweaks()` calls use the same folder name.
179
+ */
180
+ folders: Record<string, ComponentRef<TweakpaneAnchorHost>>;
181
+ static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneAnchor, never>;
182
+ static ɵdir: i0.ɵɵDirectiveDeclaration<TweakpaneAnchor, "[tweakpaneAnchor]", never, {}, {}, never, never, true, never>;
183
+ }
184
+ /**
185
+ * A minimal host component used for dynamically creating Tweakpane controls.
186
+ * This component serves as a host for directives like TweakpaneFolder, TweakpaneNumber, etc.
187
+ * when using the `tweaks()` function.
188
+ *
189
+ * @internal
190
+ */
191
+ declare class TweakpaneAnchorHost {
192
+ static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneAnchorHost, never>;
193
+ static ɵcmp: i0.ɵɵComponentDeclaration<TweakpaneAnchorHost, "tweakpane-anchor-host", never, {}, {}, never, never, true, never>;
17
194
  }
18
195
 
196
+ /**
197
+ * Directive that provides debounced change event handling for Tweakpane controls.
198
+ *
199
+ * This is a base directive used by binding-based controls to prevent
200
+ * excessive updates when values change rapidly (e.g., during slider dragging).
201
+ *
202
+ * @example
203
+ * ```html
204
+ * <!-- Debounce value updates by 300ms -->
205
+ * <tweakpane-number [debounce]="300" [(value)]="speed" />
206
+ * ```
207
+ */
19
208
  declare class TweakpaneDebounce {
20
- debounce: _angular_core.InputSignalWithTransform<number, unknown>;
209
+ /**
210
+ * The debounce delay in milliseconds before emitting value changes.
211
+ * @default 150
212
+ */
213
+ debounce: i0.InputSignalWithTransform<number, unknown>;
21
214
  private injector;
215
+ /**
216
+ * Synchronizes debounced change events from a Tweakpane API with a callback.
217
+ * Creates a reactive effect that subscribes to change events and debounces them.
218
+ *
219
+ * @typeParam T - The type of value being tracked
220
+ * @param api - A function that returns the Tweakpane API object with on/off methods (or null if not ready)
221
+ * @param cb - Callback function invoked with the change event after debounce delay
222
+ * @returns The created effect reference
223
+ */
22
224
  sync<T>(api: () => {
23
225
  on: (evName: 'change', cb: (ev: TpChangeEvent<T>) => void) => void;
24
226
  off: (evName: 'change', cb: (ev: TpChangeEvent<T>) => void) => void;
25
- } | null, cb: (ev: TpChangeEvent<T>) => void): _angular_core.EffectRef;
26
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<TweakpaneDebounce, never>;
27
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TweakpaneDebounce, never, never, { "debounce": { "alias": "debounce"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
227
+ } | null, cb: (ev: TpChangeEvent<T>) => void): i0.EffectRef;
228
+ static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneDebounce, never>;
229
+ static ɵdir: i0.ɵɵDirectiveDeclaration<TweakpaneDebounce, never, never, { "debounce": { "alias": "debounce"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
28
230
  }
29
231
 
232
+ /**
233
+ * Directive that provides label and tag functionality for Tweakpane controls.
234
+ *
235
+ * This is a base directive used by binding-based controls (like `TweakpaneNumber`,
236
+ * `TweakpaneText`, `TweakpaneCheckbox`) to manage their labels and optional tags.
237
+ *
238
+ * @example
239
+ * ```html
240
+ * <tweakpane-number label="Speed" tag="m/s" [(value)]="speed" />
241
+ * ```
242
+ */
30
243
  declare class TweakpaneLabel {
31
- label: _angular_core.InputSignal<string>;
32
- tag: _angular_core.InputSignal<string>;
244
+ /**
245
+ * The label text displayed next to the control.
246
+ * @default ''
247
+ */
248
+ label: i0.InputSignal<string>;
249
+ /**
250
+ * An optional tag displayed alongside the label (e.g., units like "px", "m/s").
251
+ * @default ''
252
+ */
253
+ tag: i0.InputSignal<string>;
33
254
  private injector;
255
+ /**
256
+ * Gets the current label and tag values without tracking signal dependencies.
257
+ * Useful for initial configuration when creating Tweakpane controls.
258
+ * @returns An object containing the current label and tag values
259
+ */
34
260
  get snapshot(): {
35
261
  label: string;
36
262
  tag: string;
37
263
  };
264
+ /**
265
+ * Synchronizes the label and tag properties with a Tweakpane API object.
266
+ * Creates a reactive effect that updates the API's label and tag
267
+ * whenever the input values change.
268
+ *
269
+ * @param api - A function that returns the Tweakpane API object (or null if not ready)
270
+ * @returns The created effect reference
271
+ */
38
272
  sync(api: () => {
39
273
  label?: string | null;
40
274
  tag?: string | null;
41
- } | null): _angular_core.EffectRef;
42
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<TweakpaneLabel, never>;
43
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TweakpaneLabel, never, never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "tag": { "alias": "tag"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
275
+ } | null): i0.EffectRef;
276
+ static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneLabel, never>;
277
+ 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>;
44
278
  }
45
279
 
280
+ /**
281
+ * Injection token used to configure value transformation when TweakpaneBinding
282
+ * is used as a host directive.
283
+ *
284
+ * When set to `true`, values pass through unchanged.
285
+ * When set to an object with `in` and `out` functions, values are transformed:
286
+ * - `in`: Transforms the input value before binding to Tweakpane
287
+ * - `out`: Transforms the Tweakpane value before emitting to the model
288
+ *
289
+ * @internal
290
+ */
46
291
  declare const NGT_TWEAK_BINDING_AS_HOST: InjectionToken<true | {
47
292
  in: (value: unknown) => unknown;
48
293
  out: (value: unknown) => unknown;
49
294
  } | null>;
295
+ /**
296
+ * Provides configuration for TweakpaneBinding when used as a host directive.
297
+ *
298
+ * @typeParam TIn - The input value type (from the component)
299
+ * @typeParam TOut - The output value type (for Tweakpane)
300
+ * @param inOut - Optional object containing `in` and `out` transformation functions
301
+ * @returns A provider configuration object
302
+ *
303
+ * @example
304
+ * ```typescript
305
+ * // Simple passthrough (no transformation)
306
+ * providers: [provideTweakBindingAsHost()]
307
+ *
308
+ * // With value transformation (e.g., array to object)
309
+ * providers: [provideTweakBindingAsHost({
310
+ * in: (value) => ({ x: value[0], y: value[1] }),
311
+ * out: (value) => [value.x, value.y]
312
+ * })]
313
+ * ```
314
+ */
50
315
  declare function provideTweakBindingAsHost<TIn, TOut>(inOut?: {
51
316
  in: (value: TIn) => TOut;
52
317
  out: (value: TOut) => TIn;
@@ -60,8 +325,35 @@ declare function provideTweakBindingAsHost<TIn, TOut>(inOut?: {
60
325
  out: (value: TOut) => TIn;
61
326
  };
62
327
  };
328
+ /**
329
+ * Base directive for creating Tweakpane bindings (two-way data binding controls).
330
+ *
331
+ * This directive provides the core functionality for binding Angular values to
332
+ * Tweakpane controls. It handles:
333
+ * - Creating the binding on the parent folder
334
+ * - Syncing label, blade, and debounce settings
335
+ * - Value transformation when used as a host directive
336
+ * - Automatic cleanup on destroy
337
+ *
338
+ * Most commonly used as a host directive by specific control types like
339
+ * `TweakpaneNumber`, `TweakpaneText`, `TweakpaneCheckbox`, etc.
340
+ *
341
+ * @typeParam TValue - The type of value being bound
342
+ *
343
+ * @example
344
+ * ```html
345
+ * <!-- Direct usage (rarely needed) -->
346
+ * <tweakpane-binding [(value)]="myValue" label="My Value" />
347
+ *
348
+ * <!-- More commonly used via specific controls -->
349
+ * <tweakpane-number [(value)]="speed" label="Speed" />
350
+ * ```
351
+ */
63
352
  declare class TweakpaneBinding<TValue> {
64
- value: _angular_core.ModelSignal<any>;
353
+ /**
354
+ * The bound value. Supports two-way binding with `[(value)]`.
355
+ */
356
+ value: i0.ModelSignal<any>;
65
357
  private debounce;
66
358
  private label;
67
359
  private blade;
@@ -70,69 +362,147 @@ declare class TweakpaneBinding<TValue> {
70
362
  private asHostDirective;
71
363
  private bindingBaseParams;
72
364
  private bindingParams;
365
+ /**
366
+ * Gets the bindable object with optional value transformation.
367
+ * @returns An object with a `value` property suitable for Tweakpane binding
368
+ */
73
369
  private get bindableObject();
74
370
  private bindingApi;
75
371
  constructor();
76
- syncBindingParams(params: () => BindingParams): _angular_core.EffectRef;
77
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<TweakpaneBinding<any>, never>;
78
- static ɵdir: _angular_core.ɵɵ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: {}; }]>;
79
- }
80
-
81
- declare class TweakpaneTitle {
82
- title: _angular_core.InputSignal<string>;
83
- private injector;
84
- get snapshot(): string;
85
- sync(api: () => {
86
- title: string | undefined;
87
- } | null): _angular_core.EffectRef;
88
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<TweakpaneTitle, never>;
89
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TweakpaneTitle, never, never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
372
+ /**
373
+ * Synchronizes additional binding parameters with the Tweakpane binding.
374
+ * Called by specific control directives to add control-specific parameters
375
+ * (e.g., min/max for numbers, options for lists).
376
+ *
377
+ * @param params - A function that returns the binding parameters
378
+ * @returns The created effect reference
379
+ */
380
+ syncBindingParams(params: () => BindingParams): i0.EffectRef;
381
+ static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneBinding<any>, never>;
382
+ 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: {}; }]>;
90
383
  }
91
384
 
385
+ /**
386
+ * Directive for creating a clickable button in Tweakpane.
387
+ *
388
+ * Buttons are used to trigger actions (like reset, randomize, etc.)
389
+ * and emit click events when pressed.
390
+ *
391
+ * @example
392
+ * ```html
393
+ * <tweakpane-pane>
394
+ * <tweakpane-button title="Reset" (click)="onReset()" />
395
+ * <tweakpane-button title="Randomize" label="Action" (click)="onRandomize()" />
396
+ * <tweakpane-button title="Save" [disabled]="!canSave" (click)="onSave()" />
397
+ * </tweakpane-pane>
398
+ * ```
399
+ */
92
400
  declare class TweakpaneButton {
93
- click: _angular_core.OutputEmitterRef<TpMouseEvent<ButtonApi>>;
401
+ /**
402
+ * Event emitted when the button is clicked.
403
+ * Provides the Tweakpane mouse event with the ButtonApi.
404
+ */
405
+ click: i0.OutputEmitterRef<TpMouseEvent<ButtonApi>>;
94
406
  private title;
95
407
  private label;
96
408
  private blade;
97
409
  private parent;
98
410
  private buttonApi;
99
411
  constructor();
100
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<TweakpaneButton, never>;
101
- static ɵdir: _angular_core.ɵɵ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: {}; }]>;
412
+ static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneButton, never>;
413
+ 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: {}; }]>;
102
414
  }
103
415
 
416
+ /**
417
+ * Directive for creating a boolean checkbox control in Tweakpane.
418
+ *
419
+ * Provides two-way binding for boolean values with a checkbox UI.
420
+ *
421
+ * @example
422
+ * ```html
423
+ * <tweakpane-pane>
424
+ * <tweakpane-checkbox label="Debug Mode" [(value)]="debugMode" />
425
+ * <tweakpane-checkbox label="Wireframe" [(value)]="showWireframe" [disabled]="!debugMode()" />
426
+ * </tweakpane-pane>
427
+ * ```
428
+ */
104
429
  declare class TweakpaneCheckbox {
105
- params: _angular_core.InputSignal<BooleanInputParams>;
430
+ /**
431
+ * Additional Tweakpane boolean input parameters.
432
+ * @default {}
433
+ */
434
+ params: i0.InputSignal<BooleanInputParams>;
106
435
  private binding;
107
436
  constructor();
108
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<TweakpaneCheckbox, never>;
109
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TweakpaneCheckbox, "tweakpane-checkbox", never, { "params": { "alias": "params"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof TweakpaneBinding; inputs: { "value": "value"; }; outputs: { "valueChange": "valueChange"; }; }]>;
437
+ static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneCheckbox, never>;
438
+ 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"; }; }]>;
110
439
  }
111
440
 
441
+ /**
442
+ * Directive for creating a color picker control in Tweakpane.
443
+ *
444
+ * Provides two-way binding for color values (as hex strings) with a
445
+ * color picker UI that supports RGB, HSL, and alpha.
446
+ *
447
+ * @example
448
+ * ```html
449
+ * <tweakpane-pane>
450
+ * <tweakpane-color label="Background" [(value)]="backgroundColor" />
451
+ * <tweakpane-color label="Accent" [(value)]="accentColor" [params]="{ alpha: true }" />
452
+ * </tweakpane-pane>
453
+ * ```
454
+ */
112
455
  declare class TweakpaneColor {
113
- params: _angular_core.InputSignal<ColorInputParams>;
456
+ /**
457
+ * Additional Tweakpane color input parameters.
458
+ * Can include options like `alpha`, `color.type`, etc.
459
+ * @default {}
460
+ */
461
+ params: i0.InputSignal<ColorInputParams>;
114
462
  private binding;
115
463
  constructor();
116
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<TweakpaneColor, never>;
117
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TweakpaneColor, "tweakpane-color", never, { "params": { "alias": "params"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof TweakpaneBinding; inputs: { "value": "value"; }; outputs: { "valueChange": "valueChange"; }; }]>;
118
- }
119
-
120
- declare class TweakpaneFolder {
121
- expanded: _angular_core.ModelSignal<boolean>;
122
- private title;
123
- private blade;
124
- private parent;
125
- parentFolder: _angular_core.WritableSignal<FolderApi | null | undefined>;
126
- folder: Signal<FolderApi | null>;
127
- isSelf: boolean;
128
- constructor();
129
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<TweakpaneFolder, never>;
130
- static ɵdir: _angular_core.ɵɵ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: {}; }]>;
464
+ static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneColor, never>;
465
+ 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"; }; }]>;
131
466
  }
132
467
 
468
+ /**
469
+ * Directive for creating a dropdown list/select control in Tweakpane.
470
+ *
471
+ * Provides two-way binding for selecting from a list of options.
472
+ * Options can be provided as an array or as a key-value object.
473
+ *
474
+ * @typeParam TOptionValue - The type of values in the list
475
+ *
476
+ * @example
477
+ * ```html
478
+ * <tweakpane-pane>
479
+ * <!-- Options as array -->
480
+ * <tweakpane-list
481
+ * label="Mode"
482
+ * [(value)]="mode"
483
+ * [options]="['normal', 'debug', 'performance']"
484
+ * />
485
+ *
486
+ * <!-- Options as object (label: value mapping) -->
487
+ * <tweakpane-list
488
+ * label="Quality"
489
+ * [(value)]="quality"
490
+ * [options]="{ 'Low': 1, 'Medium': 2, 'High': 3, 'Ultra': 4 }"
491
+ * />
492
+ * </tweakpane-pane>
493
+ * ```
494
+ */
133
495
  declare class TweakpaneList<TOptionValue> {
134
- value: _angular_core.ModelSignal<TOptionValue>;
135
- options: _angular_core.InputSignal<Record<string, TOptionValue> | TOptionValue[]>;
496
+ /**
497
+ * The currently selected value. Supports two-way binding with `[(value)]`.
498
+ */
499
+ value: i0.ModelSignal<TOptionValue>;
500
+ /**
501
+ * The list options. Can be:
502
+ * - An array of values (labels will be stringified values)
503
+ * - An object mapping display labels to values
504
+ */
505
+ options: i0.InputSignal<Record<string, TOptionValue> | TOptionValue[]>;
136
506
  private blade;
137
507
  private debounce;
138
508
  private label;
@@ -140,50 +510,466 @@ declare class TweakpaneList<TOptionValue> {
140
510
  private listOptions;
141
511
  private listApi;
142
512
  constructor();
143
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<TweakpaneList<any>, never>;
144
- static ɵdir: _angular_core.ɵɵ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: {}; }]>;
513
+ static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneList<any>, never>;
514
+ 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: {}; }]>;
145
515
  }
146
516
 
517
+ /**
518
+ * Directive for creating a numeric input control in Tweakpane.
519
+ *
520
+ * Provides two-way binding for number values with optional min/max/step
521
+ * constraints. Displays as a text input with increment buttons, or as
522
+ * a slider if min and max are specified.
523
+ *
524
+ * @example
525
+ * ```html
526
+ * <tweakpane-pane>
527
+ * <!-- Simple number input -->
528
+ * <tweakpane-number label="Count" [(value)]="count" />
529
+ *
530
+ * <!-- With slider (min/max defined) -->
531
+ * <tweakpane-number
532
+ * label="Speed"
533
+ * [(value)]="speed"
534
+ * [params]="{ min: 0, max: 100, step: 0.1 }"
535
+ * />
536
+ *
537
+ * <!-- With custom format -->
538
+ * <tweakpane-number
539
+ * label="Angle"
540
+ * [(value)]="angle"
541
+ * [params]="{ min: 0, max: 360, format: (v) => v.toFixed(0) + '°' }"
542
+ * />
543
+ * </tweakpane-pane>
544
+ * ```
545
+ */
147
546
  declare class TweakpaneNumber {
148
- params: _angular_core.InputSignal<NumberInputParams>;
547
+ /**
548
+ * Additional Tweakpane number input parameters.
549
+ * Can include `min`, `max`, `step`, `format`, etc.
550
+ * @default {}
551
+ */
552
+ params: i0.InputSignal<NumberInputParams>;
149
553
  private binding;
150
554
  constructor();
151
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<TweakpaneNumber, never>;
152
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TweakpaneNumber, "tweakpane-number", never, { "params": { "alias": "params"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof TweakpaneBinding; inputs: { "value": "value"; }; outputs: { "valueChange": "valueChange"; }; }]>;
555
+ static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneNumber, never>;
556
+ 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"; }; }]>;
153
557
  }
154
558
 
559
+ /**
560
+ * Main Tweakpane container directive that creates the root pane element.
561
+ *
562
+ * This directive creates a floating Tweakpane panel that can be positioned
563
+ * anywhere on the screen. It serves as the root container for all
564
+ * Tweakpane controls (folders, bindings, buttons, etc.).
565
+ *
566
+ * @example
567
+ * ```html
568
+ * <!-- Basic usage with default positioning (top-right) -->
569
+ * <tweakpane-pane title="Settings">
570
+ * <tweakpane-number label="Speed" [(value)]="speed" />
571
+ * <tweakpane-checkbox label="Debug" [(value)]="debug" />
572
+ * </tweakpane-pane>
573
+ *
574
+ * <!-- Custom positioning -->
575
+ * <tweakpane-pane title="Controls" left="8px" bottom="8px" [right]="undefined">
576
+ * <tweakpane-folder title="Physics">
577
+ * <tweakpane-number label="Gravity" [(value)]="gravity" />
578
+ * </tweakpane-folder>
579
+ * </tweakpane-pane>
580
+ *
581
+ * <!-- Embedded in a container element -->
582
+ * <div #container></div>
583
+ * <tweakpane-pane [container]="container">
584
+ * <!-- controls -->
585
+ * </tweakpane-pane>
586
+ * ```
587
+ */
155
588
  declare class TweakpanePane {
156
- top: _angular_core.InputSignal<string | number>;
157
- right: _angular_core.InputSignal<string | number>;
158
- left: _angular_core.InputSignal<string | number | undefined>;
159
- bottom: _angular_core.InputSignal<string | number | undefined>;
160
- width: _angular_core.InputSignal<string | number>;
161
- container: _angular_core.InputSignal<HTMLElement | ElementRef<HTMLElement | undefined> | undefined>;
589
+ /**
590
+ * CSS top position of the pane.
591
+ * @default '8px'
592
+ */
593
+ top: i0.InputSignal<string | number>;
594
+ /**
595
+ * CSS right position of the pane.
596
+ * @default '8px'
597
+ */
598
+ right: i0.InputSignal<string | number>;
599
+ /**
600
+ * CSS left position of the pane.
601
+ * @default undefined
602
+ */
603
+ left: i0.InputSignal<string | number | undefined>;
604
+ /**
605
+ * CSS bottom position of the pane.
606
+ * @default undefined
607
+ */
608
+ bottom: i0.InputSignal<string | number | undefined>;
609
+ /**
610
+ * CSS width of the pane.
611
+ * @default '256px'
612
+ */
613
+ width: i0.InputSignal<string | number>;
614
+ /**
615
+ * Optional container element to embed the pane into.
616
+ * If not provided, the pane floats freely in the document.
617
+ * Can be an HTMLElement or an Angular ElementRef.
618
+ */
619
+ container: i0.InputSignal<HTMLElement | ElementRef<HTMLElement | undefined> | undefined>;
162
620
  private document;
163
621
  private title;
164
622
  private folder;
623
+ private tweakpaneAnchor;
165
624
  private pane;
166
625
  private paneContainer?;
167
626
  constructor();
627
+ /**
628
+ * Updates a CSS style property on the pane's parent element.
629
+ * @param propertyName - The name of the style property to update
630
+ */
168
631
  private updateStyleEffect;
169
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<TweakpanePane, never>;
170
- static ɵdir: _angular_core.ɵɵ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"; }; }]>;
632
+ static ɵfac: i0.ɵɵFactoryDeclaration<TweakpanePane, never>;
633
+ 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"; }; }]>;
171
634
  }
172
635
 
636
+ /**
637
+ * Directive for creating a 2D/3D/4D point input control in Tweakpane.
638
+ *
639
+ * Provides two-way binding for point values (as tuple arrays or objects).
640
+ * The control displays input fields for each dimension and optionally
641
+ * shows a 2D picker for x/y values.
642
+ *
643
+ * Values are accepted as arrays `[x, y, z?, w?]` and emitted in the same format.
644
+ *
645
+ * @example
646
+ * ```html
647
+ * <tweakpane-pane>
648
+ * <!-- 2D point -->
649
+ * <tweakpane-point label="Position" [(value)]="position2D" />
650
+ *
651
+ * <!-- 3D point with custom ranges -->
652
+ * <tweakpane-point
653
+ * label="Position"
654
+ * [(value)]="position3D"
655
+ * [params]="{
656
+ * x: { min: -10, max: 10 },
657
+ * y: { min: 0, max: 100 },
658
+ * z: { min: -10, max: 10 }
659
+ * }"
660
+ * />
661
+ *
662
+ * <!-- 4D point (e.g., quaternion) -->
663
+ * <tweakpane-point label="Rotation" [(value)]="quaternion" />
664
+ * </tweakpane-pane>
665
+ * ```
666
+ */
173
667
  declare class TweakpanePoint {
174
- params: _angular_core.InputSignal<Point2dInputParams | Point3dInputParams | Point4dInputParams>;
668
+ /**
669
+ * Additional Tweakpane point input parameters.
670
+ * Can include per-axis configuration like `{ x: { min, max }, y: { min, max } }`.
671
+ * @default {}
672
+ */
673
+ params: i0.InputSignal<Point2dInputParams | Point3dInputParams | Point4dInputParams>;
175
674
  private binding;
176
675
  constructor();
177
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<TweakpanePoint, never>;
178
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TweakpanePoint, "tweakpane-point", never, { "params": { "alias": "params"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof TweakpaneBinding; inputs: { "value": "value"; }; outputs: { "valueChange": "valueChange"; }; }]>;
676
+ static ɵfac: i0.ɵɵFactoryDeclaration<TweakpanePoint, never>;
677
+ 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"; }; }]>;
179
678
  }
180
679
 
680
+ /**
681
+ * Directive for creating a text input control in Tweakpane.
682
+ *
683
+ * Provides two-way binding for string values with a text input UI.
684
+ *
685
+ * @example
686
+ * ```html
687
+ * <tweakpane-pane>
688
+ * <tweakpane-text label="Name" [(value)]="objectName" />
689
+ * <tweakpane-text label="Description" [(value)]="description" />
690
+ * </tweakpane-pane>
691
+ * ```
692
+ */
181
693
  declare class TweakpaneText {
182
- params: _angular_core.InputSignal<StringInputParams>;
694
+ /**
695
+ * Additional Tweakpane string input parameters.
696
+ * @default {}
697
+ */
698
+ params: i0.InputSignal<StringInputParams>;
183
699
  private binding;
184
700
  constructor();
185
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<TweakpaneText, never>;
186
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TweakpaneText, "tweakpane-text", never, { "params": { "alias": "params"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof TweakpaneBinding; inputs: { "value": "value"; }; outputs: { "valueChange": "valueChange"; }; }]>;
701
+ static ɵfac: i0.ɵɵFactoryDeclaration<TweakpaneText, never>;
702
+ 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"; }; }]>;
703
+ }
704
+
705
+ /**
706
+ * Configuration for a number input control.
707
+ *
708
+ * @example
709
+ * ```typescript
710
+ * const config = {
711
+ * gravity: { value: 9.8, min: 0, max: 20, step: 0.1 }
712
+ * };
713
+ * ```
714
+ */
715
+ interface TweakNumberConfig {
716
+ /** The initial value or a writable signal for two-way binding */
717
+ value: number | WritableSignal<number>;
718
+ /** Minimum allowed value (enables slider display) */
719
+ min?: number;
720
+ /** Maximum allowed value (enables slider display) */
721
+ max?: number;
722
+ /** Step increment for the value */
723
+ step?: number;
724
+ }
725
+ /**
726
+ * Configuration for a text input control.
727
+ *
728
+ * @example
729
+ * ```typescript
730
+ * const config = {
731
+ * name: { value: 'Object 1' }
732
+ * };
733
+ * ```
734
+ */
735
+ interface TweakTextConfig {
736
+ /** The initial value or a writable signal for two-way binding */
737
+ value: string | WritableSignal<string>;
738
+ }
739
+ /**
740
+ * Configuration for a color picker control.
741
+ *
742
+ * @example
743
+ * ```typescript
744
+ * const config = {
745
+ * background: { value: '#ff0000', color: true }
746
+ * };
747
+ * ```
748
+ */
749
+ interface TweakColorConfig {
750
+ /** The initial color value (as hex string) or a writable signal */
751
+ value: string | WritableSignal<string>;
752
+ /** Marker to identify this as a color input (must be `true`) */
753
+ color: true;
754
+ }
755
+ /**
756
+ * Configuration for a checkbox/boolean control.
757
+ *
758
+ * @example
759
+ * ```typescript
760
+ * const config = {
761
+ * enabled: { value: true }
762
+ * };
763
+ * ```
764
+ */
765
+ interface TweakCheckboxConfig {
766
+ /** The initial value or a writable signal for two-way binding */
767
+ value: boolean | WritableSignal<boolean>;
768
+ }
769
+ /**
770
+ * Configuration for a dropdown list/select control.
771
+ *
772
+ * @typeParam T - The type of option values
773
+ *
774
+ * @example
775
+ * ```typescript
776
+ * // With array of options
777
+ * const config = {
778
+ * mode: { value: 'normal', options: ['normal', 'debug', 'performance'] }
779
+ * };
780
+ *
781
+ * // With labeled options
782
+ * const config = {
783
+ * quality: { value: 2, options: { 'Low': 1, 'Medium': 2, 'High': 3 } }
784
+ * };
785
+ * ```
786
+ */
787
+ interface TweakListConfig<T> {
788
+ /** The initial value or a writable signal for two-way binding */
789
+ value: T | WritableSignal<T>;
790
+ /** Array of options or object mapping labels to values */
791
+ options: T[] | Record<string, T>;
792
+ }
793
+ /**
794
+ * Configuration for a 2D/3D/4D point input control.
795
+ *
796
+ * @typeParam TVector - The tuple type for the point dimensions
797
+ *
798
+ * @example
799
+ * ```typescript
800
+ * // 2D point
801
+ * const config = {
802
+ * position: { value: [0, 0] as [number, number] }
803
+ * };
804
+ *
805
+ * // 3D point with axis constraints
806
+ * const config = {
807
+ * position: {
808
+ * value: [0, 0, 0] as [number, number, number],
809
+ * x: { min: -10, max: 10 },
810
+ * y: { min: 0, max: 100 },
811
+ * z: { min: -10, max: 10 }
812
+ * }
813
+ * };
814
+ * ```
815
+ */
816
+ interface TweakPointConfig<TVector extends [number, number] | [number, number, number] | [number, number, number, number] = [number, number] | [number, number, number] | [number, number, number, number]> {
817
+ /** The initial point value or a writable signal for two-way binding */
818
+ value: TVector | WritableSignal<TVector>;
819
+ /** Configuration for the X axis (min, max, step, etc.) */
820
+ x?: Point2dInputParams['x'];
821
+ /** Configuration for the Y axis */
822
+ y?: Point2dInputParams['y'];
823
+ /** Configuration for the Z axis (3D/4D points only) */
824
+ z?: Point3dInputParams['z'];
825
+ /** Configuration for the W axis (4D points only) */
826
+ w?: Point4dInputParams['w'];
827
+ }
828
+ /**
829
+ * Configuration for a button/action control.
830
+ *
831
+ * @example
832
+ * ```typescript
833
+ * const config = {
834
+ * reset: { action: () => this.resetSettings(), label: 'Actions' }
835
+ * };
836
+ * ```
837
+ */
838
+ interface TweakButtonConfig {
839
+ /** The callback function to execute when the button is clicked */
840
+ action: () => void;
841
+ /** Optional label displayed next to the button */
842
+ label?: string;
843
+ }
844
+ /**
845
+ * Configuration for a nested folder within the tweaks.
846
+ * Created using the `tweaks.folder()` helper function.
847
+ *
848
+ * @typeParam T - The config type for the folder's contents
849
+ *
850
+ * @example
851
+ * ```typescript
852
+ * const config = {
853
+ * advanced: tweaks.folder('Advanced Settings', {
854
+ * iterations: { value: 4, min: 1, max: 10 },
855
+ * tolerance: { value: 0.001, min: 0, max: 1 }
856
+ * })
857
+ * };
858
+ * ```
859
+ */
860
+ interface TweakFolderConfig<T extends TweakConfig> {
861
+ /** Internal marker to identify folder configs */
862
+ __folder: true;
863
+ /** The folder title displayed in the UI */
864
+ name: string;
865
+ /** The configuration object for controls within the folder */
866
+ config: T;
867
+ /** Whether the folder is initially expanded */
868
+ expanded?: boolean;
869
+ }
870
+ /**
871
+ * Union of all possible configuration value types for `tweaks()`.
872
+ *
873
+ * Includes:
874
+ * - Primitive values (number, string, boolean)
875
+ * - Writable signals for two-way binding
876
+ * - Typed config objects for each control type
877
+ */
878
+ type TweakConfigValue = number | string | boolean | WritableSignal<number> | WritableSignal<string> | WritableSignal<boolean> | TweakNumberConfig | TweakTextConfig | TweakColorConfig | TweakCheckboxConfig | TweakListConfig<unknown> | TweakPointConfig | TweakButtonConfig | TweakFolderConfig<TweakConfig>;
879
+ /**
880
+ * A configuration object for `tweaks()`.
881
+ * Maps control names to their configuration values.
882
+ */
883
+ type TweakConfig = Record<string, TweakConfigValue>;
884
+ /**
885
+ * Infer the signal type from a config value.
886
+ * Always returns Signal<T> (readonly) - never WritableSignal.
887
+ * Users can use their original WritableSignal if they need write access.
888
+ */
889
+ 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;
890
+ /**
891
+ * The result type returned by `tweaks()` for a given configuration.
892
+ *
893
+ * Maps each config key to a readonly Signal of the appropriate type.
894
+ * Button configs are excluded (they don't return values).
895
+ *
896
+ * @typeParam T - The configuration object type
897
+ */
898
+ type TweakResult<T extends TweakConfig> = {
899
+ [K in keyof T as T[K] extends TweakButtonConfig ? never : K]: InferSignalType<T[K]>;
900
+ };
901
+ /**
902
+ * Options for configuring a `tweaks()` folder.
903
+ */
904
+ interface TweakFolderOptions {
905
+ /**
906
+ * Whether the folder is expanded by default.
907
+ * @default false
908
+ */
909
+ expanded?: boolean;
910
+ /**
911
+ * Optional injector for use outside an injection context.
912
+ * Required when calling `tweaks()` from outside a constructor or field initializer.
913
+ */
914
+ injector?: Injector;
915
+ }
916
+ /**
917
+ * Creates Tweakpane controls declaratively from any component within an `ngt-canvas`.
918
+ *
919
+ * **Prerequisites:**
920
+ * 1. Add `tweakpaneAnchor` directive to your `ngt-canvas`:
921
+ * ```html
922
+ * <ngt-canvas tweakpaneAnchor>
923
+ * ```
924
+ * 2. Add `<tweakpane-pane>` somewhere in your scene
925
+ *
926
+ * @param folderName - The name of the folder to create/use
927
+ * @param config - Configuration object defining the controls
928
+ * @param options - Optional folder options (expanded, etc.)
929
+ * @returns An object with signals for each control value
930
+ *
931
+ * @example
932
+ * ```typescript
933
+ * // Basic usage with primitives (creates new signals)
934
+ * const controls = tweaks('Physics', {
935
+ * gravity: 9.8,
936
+ * debug: false,
937
+ * name: 'World',
938
+ * });
939
+ *
940
+ * // With config objects for more control
941
+ * const controls = tweaks('Physics', {
942
+ * gravity: { value: 9.8, min: 0, max: 20, step: 0.1 },
943
+ * color: { value: '#ff0000', color: true },
944
+ * mode: { value: 'normal', options: ['normal', 'debug', 'verbose'] },
945
+ * });
946
+ *
947
+ * // Two-way binding with existing signals
948
+ * filteringEnabled = signal(true);
949
+ * const controls = tweaks('Settings', {
950
+ * filteringEnabled: this.filteringEnabled, // two-way binding
951
+ * });
952
+ *
953
+ * // Buttons (actions)
954
+ * const controls = tweaks('Actions', {
955
+ * reset: { action: () => this.reset() },
956
+ * });
957
+ *
958
+ * // Nested folders
959
+ * const controls = tweaks('Settings', {
960
+ * basic: 42,
961
+ * advanced: tweaks.folder('Advanced', {
962
+ * iterations: { value: 4, min: 1, max: 10 },
963
+ * }),
964
+ * });
965
+ * ```
966
+ */
967
+ declare function tweaks<T extends TweakConfig>(folderName: string, config: T, { injector, ...options }?: TweakFolderOptions): TweakResult<T>;
968
+ declare namespace tweaks {
969
+ var folder: <T extends TweakConfig>(name: string, config: T, options?: {
970
+ expanded?: boolean;
971
+ }) => TweakFolderConfig<T>;
187
972
  }
188
973
 
189
- export { NGT_TWEAK_BINDING_AS_HOST, TweakpaneBinding, TweakpaneBlade, TweakpaneButton, TweakpaneCheckbox, TweakpaneColor, TweakpaneDebounce, TweakpaneFolder, TweakpaneLabel, TweakpaneList, TweakpaneNumber, TweakpanePane, TweakpanePoint, TweakpaneText, TweakpaneTitle, provideTweakBindingAsHost };
974
+ export { NGT_TWEAK_BINDING_AS_HOST, TweakpaneAnchor, TweakpaneAnchorHost, TweakpaneBinding, TweakpaneBlade, TweakpaneButton, TweakpaneCheckbox, TweakpaneColor, TweakpaneDebounce, TweakpaneFolder, TweakpaneLabel, TweakpaneList, TweakpaneNumber, TweakpanePane, TweakpanePoint, TweakpaneText, TweakpaneTitle, provideTweakBindingAsHost, tweaks };
975
+ export type { TweakButtonConfig, TweakCheckboxConfig, TweakColorConfig, TweakConfig, TweakConfigValue, TweakFolderConfig, TweakFolderOptions, TweakListConfig, TweakNumberConfig, TweakPointConfig, TweakResult, TweakTextConfig };