### Build Tweakpane Locally

Source: https://github.com/cocopon/tweakpane/blob/main/README.md

Commands to set up a local development environment for Tweakpane. This includes installing dependencies, setting up the project, and starting a local server for documentation and development.

```bash
npm ci
npm run setup
cd packages/tweakpane
npm start
```

--------------------------------

### Create a Tweakpane Instance

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/getting-started/index.html

Instantiate a new Tweakpane object to start using its features. This is the fundamental step after including the library.

```javascript
const pane = new Pane();
```

--------------------------------

### Install and Import Tweakpane via npm

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/getting-started/index.html

Install Tweakpane as an npm package for use in your JavaScript or TypeScript projects. Type definitions are available for TypeScript development.

```bash
$ npm install --save tweakpane

# Additional type definitions for development in TypeScript
$ npm install --save-dev @tweakpane/core
```

```javascript
import {Pane} from 'tweakpane';
// ...
```

--------------------------------

### Registering Plugin Scripts

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/plugins/dev/index.html

Register plugin scripts to be loaded by Tweakpane. This example imports and assigns the Tweakpane Essentials plugin.

```javascript
window.DocModules.push( async () => {
  const m = await import('https://esm.run/@tweakpane/plugin-essentials@0.2.0-beta.0');
  window.TweakpaneEssentialsPlugin = m;
}, );
```

--------------------------------

### CounterView Implementation

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/plugins/dev/index.html

Example implementation of a `CounterView` that creates DOM elements for displaying the value and handling user input, such as incrementing the counter.

```typescript
import {Value, View, ViewProps} from '@tweakpane/core';

interface Config {
  value: Value<number>;
  viewProps: ViewProps;
}

export class CounterView implements View {
  public readonly element: HTMLElement;
  public readonly buttonElement: HTMLButtonElement;

  constructor(doc: Document, config: Config) {
    // Create view elements
    this.element = doc.createElement('div');
    this.element.classList.add('tp-counter');

    // Apply value changes to the preview element
    const previewElem = doc.createElement('div');
    const value = config.value;
    value.emitter.on('change', () => {
      previewElem.textContent = String(value.rawValue);
    });
    previewElem.textContent = String(value.rawValue);
    this.element.appendChild(previewElem);

    // Create a button element for user interaction
    const buttonElem = doc.createElement('button');
    buttonElem.textContent = '+';
    this.element.appendChild(buttonElem);
    this.buttonElement = buttonElem;
  }
}
```

--------------------------------

### CounterController Implementation

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/plugins/dev/index.html

Example implementation of a `CounterController` that handles user interactions, such as button clicks, to update the bound value.

```typescript
import {Value, ValueController, ViewProps} from '@tweakpane/core';
import {CounterView} from './view';

interface Config {
  value: Value<number>;
  viewProps: ViewProps;
}

export class CounterController implements ValueController<number, CounterView> {
  public readonly value: Value<number>;
  public readonly view: CounterView;
  public readonly viewProps: ViewProps;

  constructor(doc: Document, config: Config) {
    // Models
    this.value = config.value;
    this.viewProps = config.viewProps;

    // Create a view
    this.view = new CounterView(doc, {
      value: config.value,
      viewProps: this.viewProps,
    });

    // Handle user interaction
    this.view.buttonElement.addEventListener('click', () => {
      // Update a model
      this.value.rawValue += 1;
    });
  }
}
```

--------------------------------

### Blade API Renaming: Slider Example

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/migration/v4/index.html

Illustrates the renaming of blade APIs, specifically showing the change from `SliderApi` in v3 to `SliderBladeApi` in v4.

```javascript
// v3
    const b = pane.addBlade({
      view: 'slider',
      label: 'brightness',
      min: 0,
      max: 1,
      value: 0.5,
    }) as SliderApi;
```

```javascript
// v4
    const b = pane.addBlade({
      view: 'slider',
      label: 'brightness',
      min: 0,
      max: 1,
      value: 0.5,
    }) as SliderBladeApi;
```

--------------------------------

### Folder Creation: dat.GUI vs TweakPane

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/migration/datgui/index.html

Shows how to create and manage folders for organizing parameters in dat.GUI and TweakPane.

```javascript
const f = gui.addFolder('Font');
// Folder is shrinked by default

f.add(PARAMS, 'size');
f.add(PARAMS, 'weight');

// Expand the folder
f.open();
```

```javascript
const f = pane.addFolder({
  expanded: false,
  title: 'Font',
});

f.addBinding(PARAMS, 'size');
f.addBinding(PARAMS, 'weight');

// Expand the folder
f.expanded = true;
```

--------------------------------

### Basic Bindings: dat.GUI vs TweakPane

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/migration/datgui/index.html

Demonstrates the equivalent code for adding basic parameter bindings in both dat.GUI and TweakPane.

```javascript
import * as dat from 'dat.gui';

const PARAMS = {
  level: 0,
  name: 'Sketch',
  active: true,
};

// Create a pane
const gui = new dat.GUI();

// Add bindings
gui.add(PARAMS, 'level');
gui.add(PARAMS, 'name');
gui.add(PARAMS, 'active');
```

```javascript
import {Pane} from 'tweakpane';

const PARAMS = {
  level: 0,
  name: 'Sketch',
  active: true,
};

// Create a pane
const pane = new Pane({
  title: 'Parameters',
});

// Add bindings
pane.addBinding(PARAMS, 'level');
pane.addBinding(PARAMS, 'name');
pane.addBinding(PARAMS, 'active');
```

--------------------------------

### Import Tweakpane from Local Download

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/getting-started/index.html

Include Tweakpane in your HTML by importing the downloaded file. Ensure the path to 'tweakpane-{{ version }}.min.js' is correct.

```html
<script type="module">
  import {Pane} from './path/to/tweakpane-{{ version }}.min.js';
  // ...
</script>
```

--------------------------------

### Button Creation: dat.GUI vs TweakPane

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/migration/datgui/index.html

Demonstrates how to add buttons that trigger functions in dat.GUI and TweakPane.

```javascript
const PARAMS = {
  alert: () => {
    alert('Button pressed!');
  },
};

// Add a function same as other parameters
gui.add(PARAMS, 'alert');
```

```javascript
// Add a button, and pass a function
// as a click event handler
pane.addButton({title: 'Alert'})
  .on('click', () => {
    alert('Button pressed!');
  });
```

--------------------------------

### Color Bindings: dat.GUI vs TweakPane

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/migration/datgui/index.html

Illustrates how to bind a color parameter using dat.GUI and TweakPane.

```javascript
const PARAMS = {
  color: '#ff0055',
};

// ...

gui.addColor(PARAMS, 'color');
```

```javascript
const PARAMS = {
  color: '#ff0055',
};

// ...

pane.addBinding(PARAMS, 'color');
```

--------------------------------

### Slider and Dropdown Bindings: dat.GUI vs TweakPane

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/migration/datgui/index.html

Shows how to create slider and dropdown input bindings in dat.GUI and their TweakPane equivalents.

```javascript
// Slider
gui.add(PARAMS, 'size')
  .min(10)
  .max(100)
  .step(1);

// Dropdown
gui.add(PARAMS, 'weight', {
  Normal: 400,
  Bold: 700,
})
```

```javascript
// Slider
pane.addBinding(PARAMS, 'size', {
  min: 10,
  max: 100,
  step: 1,
});

// Dropdown
pane.addBinding(PARAMS, 'weight', {
  options: {
    Normal: 400,
    Bold: 700,
  },
});
```

--------------------------------

### Registering Essentials Plugin

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/plugins/dev/index.html

Demonstrates how to register the Essentials plugin to add components like the FPS graph to a Tweakpane instance.

```javascript
import {Pane} from 'tweakpane';
import * as EssentialsPlugin from '@tweakpane/plugin-essentials';

const pane = new Pane();

// Register plugin to the pane
pane.registerPlugin(EssentialsPlugin);

// Add a FPS graph
const fpsGraph = pane.addBlade({
  view: 'fpsgraph',
  label: 'fps',
});

// ...
```

--------------------------------

### Custom Placement: dat.GUI vs TweakPane

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/migration/datgui/index.html

Shows how to specify a custom container element for the UI in dat.GUI and TweakPane.

```javascript
const gui = new dat.GUI({
  autoPlace: false,
});
containerElem.appendChild(gui.domElement);
```

```javascript
const pane = new Pane({
  container: containerElem,
});
```

--------------------------------

### Updating Inputs Manually: dat.GUI vs TweakPane

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/migration/datgui/index.html

Demonstrates how to manually update the display of input controls in dat.GUI and TweakPane.

```javascript
gui.__controllers.forEach((c) => {
  c.updateDisplay();
});
```

```javascript
pane.refresh();
```

--------------------------------

### Import Tweakpane via CDN

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/getting-started/index.html

Use this snippet to include Tweakpane directly from a CDN in your HTML file. Replace {{ version }} with the actual version number.

```html
<script type="module">
  import {Pane} from 'https://cdn.jsdelivr.net/npm/tweakpane@{{ version }}/dist/tweakpane.min.js';
  // ...
</script>
```

--------------------------------

### Monitoring Values: dat.GUI vs TweakPane

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/migration/datgui/index.html

Illustrates how to monitor changing values with dat.GUI's 'listen' and TweakPane's 'readonly' graph view.

```javascript
gui.add(PARAMS, 'wave')
  .min(-1)
  .max(+1)
  .listen();
```

```javascript
pane.addBinding(PARAMS, 'wave', {
  readonly: true,
  min: -1,
  max: +1,
  view: 'graph',
});
```

--------------------------------

### Registering a Plugin Bundle with CSS

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/plugins/dev/index.html

Illustrates how to register a plugin bundle, including custom CSS, to extend the pane with new views like the 'counter'.

```javascript
const CounterPluginBundle: TpPluginBundle = {
  // Identifier of the plugin bundle
  id: 'counter',
  // Plugins that should be registered
  plugins: [
    CounterInputPlugin,
  ],
  // Additional CSS for this bundle
  css: `
    .tp-counter {align-items: center; display: flex;}
    .tp-counter div {color: #00ffd680; flex: 1;}
    .tp-counter button {background-color: #00ffd6c0; border-radius: 2px; color: black; height: 20px; width: 20px;}
  `,
};
pane.registerPlugin(CounterPluginBundle);
```

--------------------------------

### Event Handling: dat.GUI vs TweakPane

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/migration/datgui/index.html

Compares how to handle input change events in dat.GUI and TweakPane.

```javascript
gui.add(PARAMS, 'size')
  .onChange((v) => {
    console.log(`${v}`);
  })
  .onFinishChange((v) => {
    console.log(`${v} (last)`);
  });
```

```javascript
pane.add(PARAMS, 'size')
  .on('change', (ev) => {
    if (!ev.last) {
      console.log(`${ev.value}`);
    } else {
      console.log(`${ev.value} (last)`);
    }
  });
```

--------------------------------

### Add Interval Binding and FPS Graph

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/plugins/index.html

Demonstrates adding an interval binding with min, max, and step constraints, and setting up an FPS graph using the 'fpsgraph' view. The FPS graph requires begin() and end() calls around the rendering logic.

```javascript
const PARAMS = {
  interval: {min: 16, max: 48},
};

// Interval
pane.addBinding(PARAMS, 'interval', {
  min: 0,
  max: 100,
  step: 1,
});

// ...

// FPS graph
const fpsGraph = pane.addBlade({
  view: 'fpsgraph',
  label: 'fpsgraph',
});

function render() {
  fpsGraph.begin();

  // Rendering

  fpsGraph.end();
}

// ...
```

--------------------------------

### Add and Use Folders

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/quick-tour/index.html

Organize blades within folders using `addFolder()`. Folders can be expanded or collapsed to manage UI complexity.

```javascript
const f = pane.addFolder({
  title: 'Title',
  expanded: true,
});

f.addBinding(PARAMS, 'text');
f.addBinding(PARAMS, 'size');

```

--------------------------------

### Updating Event Handling: presetKey to target.key

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/migration/v4/index.html

Demonstrates the change in event object properties from `presetKey` in v3 to `target.key` in v4 for handling change events.

```javascript
// v3
    const b = pane.addInput(PARAMS, 'strength');
    
    b.on('change', (ev) => {
      console.log(ev.presetKey);  // 'strength'
    });
```

```javascript
// v4
    const b = pane.addBinding(PARAMS, 'strength');
    
    b.on('change', (ev) => {
      console.log(ev.target.key);  // 'strength'
    });
```

--------------------------------

### Creating a Custom Counter Input Plugin

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/plugins/dev/index.html

Shows how to create and register a custom plugin that provides a 'counter' view for incrementing a bound value.

```javascript
import {Pane} from 'tweakpane';

const PARAMS = {count: 0};

const pane = new Pane();
pane.registerPlugin(CounterInputPlugin);

// Add a custom binding control
// for `view: 'counter'`
pane.addBinding(PARAMS, 'count', {
  view: 'counter',
});
```

--------------------------------

### Monitor Buffer Size Configuration

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/monitor-bindings/index.html

Configure the buffer size of the monitor using the `bufferSize` option.

```javascript
const pane = new Pane();
pane.addBinding(PARAMS, 'wave', {
  readonly: true,
  bufferSize: 10,
});
```

--------------------------------

### Add Camerakit Ring Binding

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/plugins/index.html

Shows how to add a camera ring binding using the 'cameraring' view. It includes configuration for the series, scale unit, and appearance options like 'wide' to hide the text input and widen the ring. Also demonstrates setting minimum values and step increments.

```javascript
const PARAMS = {
  flen: 55,
  fnum: 1.8,
  iso: 100,
};

// ...

pane.addBinding(PARAMS, 'fnum', {
  // Use a ring view of Camerakit
  view: 'cameraring',
  // Appearance of the ring
  series: 1,
  // Configuration of the scale unit
  unit: {ticks: 10, pixels: 40, value: 0.2},
  // Hide a text input and widen the ring
  wide: true,
  // Number constraints
  min: 1.4,
  step: 0.02,
});

// ...
```

--------------------------------

### Migrating to ES Modules in Tweakpane v4

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/migration/v4/index.html

Shows how to import Tweakpane as an ES module in v4, contrasting with the script tag method in v3.

```html
    <!-- v3 -->
    <script src="./path/to/tweakpane.js"></script>
    <script>
      const pane = new Tweakpane.Pane();
      // ...
    </script>
```

```html
    <!-- v4 -->
    <script type="module">
      import {Pane} from './path/to/tweakpane.js';
    
      const pane = new Pane();
      // ...
    </script>
```

--------------------------------

### Add String Options Binding

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/input-bindings/index.html

Provides a list of options for a string parameter, allowing selection from presets.

```javascript
const PARAMS = {
  theme: '',
};

const pane = new Pane();
pane.addBinding(PARAMS, 'theme', {
  options: {
    none: '',
    dark: 'dark-theme.json',
    light: 'light-theme.json',
  },
});
```

--------------------------------

### Load Tweakpane Module and Make Global

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/_template.html

This snippet demonstrates how to load the Tweakpane module using dynamic import and assign it to the global `window.Tweakpane` variable. It's part of the document's module loading process.

```javascript
window.DocModules = [
  async () => {
    const m = await import('{{ root }}assets/tweakpane.js');
    window.Tweakpane = m;
  },
];

// Load Tweakpane module and make it global variable
await Promise.all(window.DocModules.map((f) => f()));
```

--------------------------------

### Configure Input Binding Options

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/quick-tour/index.html

Customize input bindings with additional parameters like `min`, `max`, `step` for sliders, or `options` for select lists.

```javascript
const PARAMS = {
  percentage: 50,
  theme: 'dark',
};

// `min` and `max`: slider
pane.addBinding(
  PARAMS, 'percentage',
  {min: 0, max: 100, step: 10}
);

// `options`: list
pane.addBinding(
  PARAMS, 'theme',
  {options: {Dark: 'dark', Light: 'light'}}
);

```

--------------------------------

### Plugin Parameter Validation with accept()

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/plugins/dev/index.html

Implement the `accept` method to determine if a plugin can handle the given value and parameters. Return an object with initial value and parameters if accepted, otherwise return `null` to pass to the next plugin.

```typescript
const CounterInputPlugin = {
  // ...

  accept(value: unknown, params: Record<string, unknown>) {
    if (typeof value !== 'number') {
      return null;
    }
    if (params.view !== 'counter') {
      return null;
    }
    return {
      initialValue: value,
      params: params,
    };
  },

  // ...
};
```

--------------------------------

### Merging addMonitor into addBinding in Tweakpane v4

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/migration/v4/index.html

Shows how `addMonitor()` from v3 is now integrated into `addBinding()` in v4 by using the `{readonly: true}` option for monitor bindings.

```javascript
// v3
    pane.addMonitor(PARAMS, 'total');
```

```javascript
// v4
    pane.addBinding(PARAMS, 'total', {
      readonly: true,
    });
```

--------------------------------

### Updating Event Handling: update to change for Monitors

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/migration/v4/index.html

Illustrates the change in event names for monitor bindings from `update` in v3 to `change` in v4.

```javascript
// v3
    const b = pane.addMonitor(PARAMS, 'total');
    
    b.on('update', (ev) => {
      // ...
    });
```

```javascript
// v4
    const b = pane.addBinding(PARAMS, 'total', {readonly: true});
    
    b.on('change', (ev) => {
      // ...
    });
```

--------------------------------

### Monitor Value Changes with Graph View

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/quick-tour/index.html

Use `addBinding()` with `{readonly: true}` and `view: 'graph'` to create a real-time graph visualizing value changes. Configure `interval`, `min`, and `max` for the graph.

```javascript
pane.addBinding(sketch, 'signal', {
  readonly: true,
  view: 'graph',
  interval: 200,
  min: -1,
  max: +1,
});

```

--------------------------------

### Controller Creation with controller()

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/plugins/dev/index.html

The `controller` method is responsible for creating a `ValueController` instance, which manages the plugin's view, user interactions, and model updates.

```typescript
const CounterInputPlugin = {
  // ...

  controller(args) {
    return new CounterController(args.document, {
      value: args.value,
      viewProps: args.viewProps,
    });
  },

  // ...
};
```

--------------------------------

### Configure Pane Title and Expansion

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/quick-tour/index.html

Set a title for the entire pane and control its initial expanded state using options when creating the Pane instance.

```javascript
const pane = new Pane({
  title: 'Parameters',
  expanded: true,
});

```

--------------------------------

### Exporting Tweakpane ES Module as Global Variable

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/migration/v4/index.html

Demonstrates how to export the Tweakpane ES module as a global variable to maintain compatibility with existing code that expects a global `Tweakpane` object.

```html
<script type="module">
      // Import ES module
      import * as Tweakpane from './path/to/tweakpane.js';
    
      // Export it as a global variable
      window.Tweakpane = Tweakpane;
    </script>
    <script>
      const pane = new Tweakpane.Pane();
      // ...
    </script>
```

--------------------------------

### Plugin Type Definition

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/plugins/dev/index.html

Illustrates how to specify the type of a plugin, such as 'input', which is used for providing custom views for bindings.

```typescript
const CounterInputPlugin = {
  // ...

  type: 'input',

  // ...
};
```

--------------------------------

### Exporting State in Tweakpane v4

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/migration/v4/index.html

Shows how to export the current state of the pane using `exportState()` in v4, replacing `exportPreset()` from v3.

```javascript
// v3
    console.log(pane.exportPreset());
```

```javascript
// v4
    console.log(pane.exportState());
```

--------------------------------

### Basic Plugin Structure

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/plugins/dev/index.html

Defines the fundamental structure of a Tweakpane plugin, including its ID, type, accept function, and binding/controller definitions.

```typescript
const CounterInputPlugin: TpPlugin = createPlugin({
  id: 'counter',
  type: 'input',
  accept: () => {...},
  binding: {
    reader: () => {...},
    writer: () => {...},
  },
  controller: () => {...},
});
```

--------------------------------

### Monitor Primitive Value Changes

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/monitor-bindings/index.html

Use `addBinding()` with `{readonly: true}` to monitor primitive value changes.

```javascript
const pane = new Pane();
pane.addBinding(PARAMS, 'wave', {
  readonly: true,
});
```

--------------------------------

### Renaming addInput to addBinding in Tweakpane v4

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/migration/v4/index.html

Illustrates the change from `addInput()` in v3 to `addBinding()` in v4 for adding input controls.

```javascript
// v3
    pane.addInput(PARAMS, 'size');
```

```javascript
// v4
    pane.addBinding(PARAMS, 'size');
```

--------------------------------

### Import Tweakpane Plugins

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/plugins/index.html

Dynamically imports Tweakpane plugins using dynamic import statements. This allows for lazy loading of plugin functionalities.

```javascript
window.DocModules.push( async () => { const m = await import('https://esm.run/@tweakpane/plugin-essentials@0.2.0-beta.0'); window.TweakpaneEssentialsPlugin = m; }, async () => { const m = await import('https://esm.run/@tweakpane/plugin-camerakit@0.3.0-beta.0'); window.TweakpaneCamerakitPlugin = m; }, );
```

--------------------------------

### Identifying Bindings with Generic Tag Option

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/migration/v4/index.html

Demonstrates the use of the generic `tag` option in `addBinding` to uniquely identify bindings, which can be useful for handling key collisions.

```javascript
pane.addBinding(PARAMS, 'speed', {
      tag: 'speed2',
    });
```

--------------------------------

### Add List Blade

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/blades/index.html

Create a dropdown list blade for selecting from predefined options. Each option has a text label and a value.

```javascript
const pane = new Pane();
pane.addBlade({
  view: 'list',
  label: 'scene',
  options: [
    {text: 'loading', value: 'LDG'},
    {text: 'menu', value: 'MNU'},
    {text: 'field', value: 'FLD'},
  ],
  value: 'LDG',
});
```

--------------------------------

### Converting Tweakpane State to Preset

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/migration/v4/index.html

Provides a utility function to convert a Tweakpane blade state into a classic preset object, useful if the new state export format is not preferred.

```javascript
function stateToPreset(state) {
      if ('children' in state) {
        return state.children.reduce((tmp, s) => {
          return {...tmp, ...stateToPreset(s)};
        }, {});
      }
      const binding = state.binding ?? {};
      if ('key' in binding && 'value' in binding) {
        return {[binding.key]: binding.value};
      }
      return {};
    }
```

--------------------------------

### Load Document Script

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/_template.html

This snippet shows how to dynamically create a script element and append it to the document's body to load the document's main script file.

```javascript
const scriptElem = document.createElement('script');
scriptElem.src = '{{ root }}assets/bundle.js';
document.body.appendChild(scriptElem);
```

--------------------------------

### Configure Point 2D Picker Layout

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/input-bindings/index.html

Changes the layout of the picker for a Point 2D object binding using 'picker' and 'expanded' options.

```javascript
const PARAMS = {
  offset: {x: 50, y: 50},
};

const pane = new Pane();
pane.addBinding(PARAMS, 'offset', {
  picker: 'inline',
  expanded: true,
});
```

--------------------------------

### Graph View for Number Parameters

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/monitor-bindings/index.html

Use `{view: 'graph'}` for number parameters to display a graph. Specify `min` and `max` for the value range.

```javascript
const pane = new Pane();
pane.addBinding(PARAMS, 'wave', {
  readonly: true,
  view: 'graph',
  min: -1,
  max: +1,
});
```

--------------------------------

### Add Number Options Binding

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/input-bindings/index.html

Provides a list of options for a number parameter, allowing selection from presets.

```javascript
const PARAMS = {
  quality: 0,
};

const pane = new Pane();
pane.addBinding(PARAMS, 'quality', {
  options: {
    low: 0,
    medium: 50,
    high: 100,
  },
});
```

--------------------------------

### Add Folders to Pane

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/ui-components/index.html

Use `addFolder()` to create collapsible sections within the pane. Components can be added to folders just as they are added to the main pane.

```javascript
const pane = new Pane();

const f1 = pane.addFolder({
  title: 'Basic',
});
f1.addBinding(PARAMS, 'speed');

const f2 = pane.addFolder({
  title: 'Advanced',
  expanded: false,   // optional
});
f2.addBinding(PARAMS, 'acceleration');
f2.addBinding(PARAMS, 'randomness');
```

--------------------------------

### Add Custom View Binding

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/test-module/plugin/test/browser.html

Binds a parameter to a custom view named 'test'. Ensure the 'test' view is registered before using this.

```javascript
const params = { foo: 'hello, world', };
const pane = new Tweakpane.Pane();
pane.addBinding(params, 'foo', { view: 'test', });
```

--------------------------------

### Add Basic Blade

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/blades/index.html

Create a blade without binding it to a variable. This is useful for standalone UI elements.

```javascript
const pane = new Pane();
pane.addBlade({
  view: 'slider',
  label: 'brightness',
  min: 0,
  max: 1,
  value: 0.5,
});
```

--------------------------------

### Add Basic Bindings

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/quick-tour/index.html

Use `addBinding()` to add controls for modifying parameter values. This is the most common way to add interactive elements to your pane.

```javascript
const PARAMS = {
  factor: 123,
  title: 'hello',
  color: '#ff0055',
};

const pane = new Pane();

pane.addBinding(PARAMS, 'factor');
pane.addBinding(PARAMS, 'title');
pane.addBinding(PARAMS, 'color');

```

--------------------------------

### Adding a Separator in Tweakpane v4

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/migration/v4/index.html

Shows how to add a separator in v4 using `addBlade({view: 'separator'})`, as `addSeparator()` has been removed.

```javascript
// v3
    pane.addSeparator();
```

```javascript
// v4
    pane.addBlade({view: 'separator'});
```

--------------------------------

### Multiline Monitor Component

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/monitor-bindings/index.html

Use the `multiline: true` option for a multiline log component. Adjust display height with the `rows` option.

```javascript
const pane = new Pane();
pane.addBinding(PARAMS, 'wave', {
  readonly: true,
  multiline: true,
  rows: 5,
});
```

--------------------------------

### Import Pane State

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/misc/index.html

Import a previously exported state into a Tweakpane or a specific folder using the `importState()` method. This restores the pane's configuration to the specified state.

```javascript
const pane = new Pane();
// ...

const f = pane.addFolder({
  title: 'Values',
});
// f.addBinding(PARAMS, ...);
// f.addBinding(PARAMS, ...);

f.importState(state);
```

--------------------------------

### Insert Input/Monitor at Specific Position

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/misc/index.html

Add a new button or other component at a specific index within the pane's layout by using the `index` option. This allows for precise ordering of elements.

```javascript
const pane = new Pane();
pane.addButton({title: 'Run'});
pane.addButton({title: 'Stop'});
pane.addButton({
  index: 1,
  title: '**Reset**',
});
```

--------------------------------

### Set Pane Title

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/ui-components/index.html

Configure a root title for the entire pane using the `title` option. This title allows the whole pane to be expanded or collapsed.

```javascript
const pane = new Pane({
  title: 'Parameters',
});

// ...
```

--------------------------------

### Add Tab Component

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/ui-components/index.html

Create tabbed interfaces with `addTab()`. Each page within the tab can be accessed via `pages[]` and can contain its own components.

```javascript
const pane = new Pane();

const tab = pane.addTab({
  pages: [
    {title: 'Parameters'},
    {title: 'Advanced'},
  ],
});

tab.pages[0].addBinding(...);
```

--------------------------------

### Add Color Binding (String Input)

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/input-bindings/index.html

Adds a color input binding for string parameters that can be parsed as colors (e.g., hex, rgb).

```javascript
const PARAMS = {
  primary: '#f05',
  secondary: 'rgb(0, 255, 214)',
};

const pane = new Pane();
pane.addBinding(PARAMS, 'primary');
pane.addBinding(PARAMS, 'secondary');
```

--------------------------------

### Add Color Binding (Force String View)

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/input-bindings/index.html

Forces a color-like string to be treated as a standard text input instead of a color picker.

```javascript
const PARAMS = {
  hex: '#0088ff',
};

const pane = new Pane();
pane.addBinding(PARAMS, 'hex', {
  view: 'text',
});
```

--------------------------------

### Add String Binding

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/input-bindings/index.html

Adds a default text input binding for a string parameter.

```javascript
const PARAMS = {
  message: 'hello, world',
};

const pane = new Pane();
pane.addBinding(PARAMS, 'message');
```

--------------------------------

### Listen to Component Change Events

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/misc/index.html

Use the `on()` method of specific components to listen for 'change' events. The event object passed to the handler contains the new value.

```javascript
const pane = new Pane();
pane.addBinding(PARAMS, 'value')
  .on('change', (ev) => {
    console.log(ev.value.toFixed(2));
    if (ev.last) {
      console.log('(last)');
    }
  });
```

--------------------------------

### Add Color Binding (Inline Picker)

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/input-bindings/index.html

Configures the color picker to be displayed inline and expanded by default.

```javascript
const PARAMS = {
  key: '#ff0055ff',
};

const pane = new Pane();
pane.addBinding(PARAMS, 'key', {
  picker: 'inline',
  expanded: true,
});
```

--------------------------------

### Add Button Component

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/ui-components/index.html

Use `addButton()` to insert a button into the pane. Click events can be handled using the `on()` method.

```javascript
const pane = new Pane();

const btn = pane.addButton({
  title: 'Increment',
  label: 'counter',   // optional
});

let count = 0;
btn.on('click', () => {
  count += 1;
  console.log(count);
});
```

--------------------------------

### Listen to Global Pane Change Events

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/misc/index.html

Handle global 'change' events for all components within a pane by calling `on()` on the pane itself. The event object contains the value of the changed component.

```javascript
const pane = new Pane();
pane.addBinding(PARAMS, 'boolean');
pane.addBinding(PARAMS, 'color');
pane.addBinding(PARAMS, 'number');
pane.addBinding(PARAMS, 'string');

pane.on('change', (ev) => {
  console.log('changed: ' + JSON.stringify(ev.value));
});
```

--------------------------------

### Add Color Binding (RGB)

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/input-bindings/index.html

Adds a color input binding for an object with r, g, b components. Includes a color swatch.

```javascript
const PARAMS = {
  background: {r: 255, g: 0, b: 55},
  tint: {r: 0, g: 255, b: 214, a: 0.5},
};

const pane = new Pane();
pane.addBinding(PARAMS, 'background');
pane.addBinding(PARAMS, 'tint');
```

--------------------------------

### Set Custom Labels for Bindings

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/misc/index.html

Customize the displayed label for input components using the `label` option. Multi-line labels can be created using newline characters (`\n`).

```javascript
const pane = new Pane();
pane.addBinding(PARAMS, 'initSpd', {
  label: 'Initial speed',
});
pane.addBinding(PARAMS, 'size', {
  label: 'Force field\nradius',
});
```

--------------------------------

### Value Conversion with binding

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/plugins/dev/index.html

Configure the `binding` object to define how external values are read and written. This is useful for converting values between formats, such as string color codes to internal color classes.

```typescript
const CounterInputPlugin = {
  // ...

  binding: {
    reader: () => (value: unknown) => Number(value),
    writer: () => (target: BindingTarget, value: number) => {
      target.write(value);
    },
  },

  // ...
};
```

--------------------------------

### Monitor Update Interval

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/monitor-bindings/index.html

Change the update interval of monitors by setting the `interval` option in milliseconds. The default is 200ms.

```javascript
const pane = new Pane();
pane.addBinding(PARAMS, 'time', {
  readonly: true,
  interval: 1000,
});
```

--------------------------------

### Handle Binding Change Events

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/quick-tour/index.html

Listen for changes to a binding's value using the `on('change', ...)` method. The event object contains the new value.

```javascript
const b = pane.addBinding(
  PARAMS, 'size',
  {min: 8, max: 100, step: 1}
);

b.on('change', function(ev) {
  console.log(`change: ${ev.value}`);
});

```

--------------------------------

### Set Custom Container for Pane

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/misc/index.html

Specify a custom HTML element as the container for the Tweakpane by passing the `container` option during pane initialization. This allows embedding the pane within a specific part of your DOM.

```javascript
const pane = new Pane({
  container: document.getElementById('someContainer'),
});
```

--------------------------------

### Add Number Binding

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/input-bindings/index.html

Adds a default text input binding for a number parameter.

```javascript
const PARAMS = {
  speed: 0.5,
};

const pane = new Pane();
pane.addBinding(PARAMS, 'speed');
```

--------------------------------

### Add Text Blade

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/blades/index.html

Create a text input blade for user-defined string values. Includes a parse function for input transformation.

```javascript
const pane = new Pane();
pane.addBlade({
  view: 'text',
  label: 'name',
  parse: (v) => String(v),
  value: 'sketch-01',
});
```

--------------------------------

### Manually Refresh Pane Components

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/misc/index.html

Force an update of all input and monitor components within the pane by calling the `refresh()` method. This is useful when bound parameters are modified outside of Tweakpane's direct control.

```javascript
const pane = new Pane();
// pane.addBinding(PARAMS, ...);
// pane.addBinding(PARAMS, ...);

pane.refresh();
```

--------------------------------

### Add Color Binding (Hex and Alpha)

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/input-bindings/index.html

Forces hex number inputs to be treated as colors and adds an alpha component.

```javascript
const PARAMS = {
  background: 0xff0055,
  tint: 0x00ffd644,
};

const pane = new Pane();
pane.addBinding(PARAMS, 'background', {
  view: 'color',
});
pane.addBinding(PARAMS, 'tint', {
  view: 'color',
  color: {alpha: true},
});
```

--------------------------------

### Bind Point 3D/4D Objects

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/input-bindings/index.html

Supports binding of 3D and 4D vector objects with constrained axes.

```javascript
const PARAMS = {
  source: {x: 0, y: 0, z: 0},
  camera: {x: 0, y: 20, z: -10},
  color: {x: 0, y: 0, z: 0, w: 1},
};

// 3d
const pane = new Pane();
pane.addBinding(PARAMS, 'source');
pane.addBinding(PARAMS, 'camera', {
  y: {step: 10},
  z: {max: 0},
});

// 4d
pane.addBinding(PARAMS, 'color', {
  x: {min: 0, max: 1},
  y: {min: 0, max: 1},
  z: {min: 0, max: 1},
  w: {min: 0, max: 1},
});
```

--------------------------------

### Export Pane State

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/misc/index.html

Export the current state of a Tweakpane, including all bindings and folder states, using the `exportState()` method. This returns an object representing the pane's configuration.

```javascript
const pane = new Pane();
// pane.addBinding(PARAMS, ...);
// pane.addBinding(PARAMS, ...);

const state = pane.exportState();
console.log(state);
```

--------------------------------

### Toggle Pane Folder Visibility

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/misc/index.html

Show or hide a pane folder by toggling its `hidden` property. This can be controlled by external events, such as button clicks.

```javascript
const pane = new Pane();
const f = pane.addFolder({
  title: 'Advanced',
});

// ...

btn.on('click', () => {
  f.hidden = !f.hidden;
});
```

--------------------------------

### Export Pane State

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/quick-tour/index.html

Export the current state of all bindings in the pane using `exportState()`. This is useful for saving and restoring configurations.

```javascript
btn.on('click', function() {
  const state = pane.exportState();
  console.log(state);
});

```

--------------------------------

### Add Color Binding (Float Type)

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/input-bindings/index.html

Configures color components to use float values (0.0 to 1.0) instead of integers.

```javascript
const PARAMS = {
  overlay: {r: 1, g: 0, b: 0.33},
};

const pane = new Pane();
pane.addBinding(PARAMS, 'overlay', {
  color: {type: 'float'},
});
```

--------------------------------

### Add Separator Blade

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/blades/index.html

Add a separator blade to visually divide sections within the pane. It requires no specific parameters.

```javascript
const pane = new Pane();
// ...
pane.addBlade({
  view: 'separator',
});
// ...
```

--------------------------------

### Add Number Step Binding

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/input-bindings/index.html

Constrains the step of changes for a number parameter. Can be combined with range.

```javascript
const PARAMS = {
  speed: 0.5,
  count: 10,
};

const pane = new Pane();
pane.addBinding(PARAMS, 'speed', {
  step: 0.1,
});
pane.addBinding(PARAMS, 'count', {
  step: 10,
  min: 0,
  max: 100,
});
```

--------------------------------

### Bind Point 2D Object

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/input-bindings/index.html

Binds an object with 'x' and 'y' properties to text fields and a picker.

```javascript
const PARAMS = {
  offset: {x: 50, y: 25},
};

const pane = new Pane();
pane.addBinding(PARAMS, 'offset');
```

--------------------------------

### Slider Blade API: min/max Property Changes

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/migration/v4/index.html

Highlights the change in property names for minimum and maximum values in the slider blade API, from `minValue`/`maxValue` in v3 to `min`/`max` in v4.

```javascript
// v3
    const b = pane.addBlade({
      view: 'slider',
      label: 'brightness',
      min: 0,
      max: 1,
      value: 0.5,
    }) as SliderApi;
    
    console.log(b.minValue, b.maxValue);
```

```javascript
// v4
    const b = pane.addBlade({
      view: 'slider',
      label: 'brightness',
      min: 0,
      max: 1,
      value: 0.5,
    }) as SliderBladeApi;
    
    console.log(b.min, b.max);
```

--------------------------------

### Add Number Range Binding

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/input-bindings/index.html

Creates a slider control for a number parameter by specifying min and max values.

```javascript
const PARAMS = {
  speed: 50,
};

const pane = new Pane();
pane.addBinding(PARAMS, 'speed', {
  min: 0,
  max: 100,
});
```

--------------------------------

### Dispose Input Binding and Pane

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/misc/index.html

Manually remove a specific input binding or the entire pane from the DOM and memory by calling their respective `dispose()` methods. This is useful for cleanup.

```javascript
const pane = new Pane();
const i = pane.addBinding(PARAMS, 'count');

// ...

// Dispose the input
i.dispose();

// Dispose the pane
pane.dispose();
```

--------------------------------

### Add Number Formatter Binding

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/input-bindings/index.html

Applies a custom formatter function to the displayed value of a number parameter.

```javascript
const PARAMS = {
  k: 0,
};

const pane = new Pane();
pane.addBinding(PARAMS, 'k', {
  format: (v) => v.toFixed(6),
});
```

--------------------------------

### Constrain Point 2D Dimensions

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/input-bindings/index.html

Constrains dimensions of a Point 2D object using 'step', 'min', and 'max' parameters.

```javascript
const PARAMS = {
  offset: {x: 20, y: 30},
};

const pane = new Pane();
pane.addBinding(PARAMS, 'offset', {
  x: {step: 20},
  y: {min: 0, max: 100},
});
```

--------------------------------

### Add Blade with Type Casting (TypeScript)

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/blades/index.html

When using TypeScript, cast the created blade to its specific API type to access its properties and methods.

```typescript
const b = pane.addBlade({
  view: 'slider',
  label: 'brightness',
  min: 0,
  max: 1,
  value: 0.5,
}) as SliderBladeApi;

// Access slider-specific fields
console.log(b.min, b.max);
```

--------------------------------

### Add Boolean Binding

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/input-bindings/index.html

Adds a default checkbox binding for a boolean parameter.

```javascript
const PARAMS = {
  hidden: true,
};

const pane = new Pane();
pane.addBinding(PARAMS, 'hidden');
```

--------------------------------

### Invert Y-Axis for Point 2D

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/input-bindings/index.html

Inverts the Y-axis for a Point 2D object binding using the 'inverted: true' option.

```javascript
const PARAMS = {
  offset: {x: 50, y: 50},
};

const pane = new Pane();
pane.addBinding(PARAMS, 'offset', {
  y: {inverted: true},
});
```

--------------------------------

### Disable/Enable Input Binding

Source: https://github.com/cocopon/tweakpane/blob/main/packages/tweakpane/src/doc/template/misc/index.html

Temporarily disable an input binding by setting its `disabled` property to `true`. Setting it to `false` re-enables the component. This can be controlled by external events.

```javascript
const pane = new Pane();
const i = pane.addBinding(PARAMS, 'param', {
  disabled: true,
  title: 'Advanced',
});

// ...

btn.on('click', () => {
  i.disabled = !i.disabled;
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.