### Run SvelteKit Development Server

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/getting-started.md

Start the SvelteKit development server and automatically open the application in your default browser.

```sh
npm run dev -- --open
```

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

### Install Tweakpane Essentials Plugin

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/plugins.mdx

Install the @tweakpane/plugin-essentials package using npm.

```sh
npm install @tweakpane/plugin-essentials
```

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

### Use Svelte Tweakpane UI Plugin Example

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/plugins.mdx

This example demonstrates how to use a bundled plugin within Svelte Tweakpane UI. It mirrors the functionality of the vanilla Tweakpane example.

```svelte
<script lang="ts">
  import { Pane } from 'svelte-tweakpane-ui'
  import { EssentialsPlugin } from '@tweakpane/plugin-essentials'

  const pane = new Pane({
    title: 'Example',
    plugins: [EssentialsPlugin],
  })

  pane
    .addBlade({
      expanded: true,
      label: 'cubicbezier',
      picker: 'inline',
      value: [0.5, 0, 0.5, 1],
      view: 'cubicbezier',
    })
    .on('change', (event) => {
      console.log(event)
    })
</script>

<Pane bind:pane={pane} />
```

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

### Install Svelte Tweakpane UI

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/getting-started.md

Use this command to add the svelte-tweakpane-ui package to your project.

```sh
npm install svelte-tweakpane-ui
```

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

### Create Theme Picker with List Component

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/themes.mdx

Use a `<List>` component to allow users to browse and select from available preset themes. This example demonstrates dynamically changing the theme of a Tweakpane component.

```svelte
<script lang="ts">
  import { Tweakpane, ThemeUtils, List } from 'svelte-tweakpane-ui'
  import type { Theme } from 'tweakpane'

  let theme: Theme = ThemeUtils.presets.standard
  const themes = Object.entries(ThemeUtils.presets).map(([name, value]) => ({ value, label: name }))
</script>

<Tweakpane theme={theme}>
  <List label="Theme" bind:value={theme} options={themes} />
  <p>The selected theme is applied to this pane.</p>
</Tweakpane>
```

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

### Create New SvelteKit Project

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/getting-started.md

Use the Svelte CLI to create a new SvelteKit project with TypeScript, minimal setup, and npm package management. This is useful for testing Svelte Tweakpane UI from scratch.

```sh
npx sv create --no-add-ons --types ts --template minimal --install npm svelte-tweakpane-sandbox
```

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

### Vanilla Tweakpane Range Example

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/index.mdx

Demonstrates how to implement a range-bound numeric slider using the vanilla Tweakpane API within a Svelte component. Requires manual management of PARAMS object, binding, event listeners, and component lifecycle.

```javascript
import Tweakpane from 'tweakpane';
import { onMount, onDestroy } from 'svelte';

let pane;
let PARAMS = {
  value: 50,
};

onMount(() => {
  pane = new Tweakpane({
    container: document.getElementById('pane-container'),
  });

  pane.addInput(PARAMS, 'value', {
    min: 0,
    max: 100,
    step: 1,
  });

  pane.on('change', (ev) => {
    console.log(ev.value);
  });
});

onDestroy(() => {
  if (pane) {
    pane.dispose();
  }
});
```

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

### Import HomeGrid Component in Svelte

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/index.mdx

This snippet shows how to import and use the HomeGrid component from the examples directory in a Svelte file. The `client:only="svelte"` directive ensures it's rendered only on the client side.

```svelte
import HomeGrid from '../../examples/docs/HomeGrid.svelte'

<div
  class="not-content"
  style="pointer-events: all; position: absolute; z-index: -1; opacity: 0.7;"
>
  <HomeGrid client:only="svelte" />
</div>
```

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

### Integrate Button Component in +page.svelte

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/getting-started.md

Add the Button component to your main page route file. This example shows the necessary imports and the component usage within the Svelte template.

```svelte
<script lang="ts">
import { Button } from 'svelte-tweakpane-ui';
</script>

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
<Button on:click={() => alert('🎛️')} />
```

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

### Wide Slider Example

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/features.mdx

Demonstrates the usage of wide sliders in Svelte Tweakpane UI, which can optionally hide the numeric input text field.

```svelte
<script>
  import { Slider } from 'svelte-tweakpane-ui';
</script>

<Slider
  label="Slider"
  bind:value={0.5}
  wide
/>

```

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

### Svelte Tweakpane UI Range Example

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/index.mdx

Shows the equivalent range-bound numeric slider implemented using Svelte Tweakpane UI components. Lifecycle, DOM placement, binding, and event handling are managed by the component, offering a more declarative approach.

```svelte
<script>
  import { Pane, RangeInput } from 'svelte-tweakpane-ui';

  let value = 50;
</script>

<Pane>
  <RangeInput label="Value" bind:value min={0} max={100} step={1} />
</Pane>
```

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

### Tally Internal vs. External Slider Changes

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/features.mdx

This example demonstrates how to tally internal (user-manipulated) versus external (programmatically changed) updates to a Slider component's value using the `change` event.

```javascript
import { Pane, Slider } from 'tweakpane-svelte'

let internalCount = 0
let externalCount = 0

let value = 50

function onSliderChange(ev) {
  if (ev.details.origin === 'internal') {
    internalCount++
  } else {
    externalCount++
  }
}

function incrementExternal() {
  value = Math.random() * 100
}

```

```svelte
<script>
  import { Pane, Slider } from 'tweakpane-svelte'

  let internalCount = 0
  let externalCount = 0

  let value = 50

  function onSliderChange(ev) {
    if (ev.details.origin === 'internal') {
      internalCount++
    } else {
      externalCount++
    }
  }

  function incrementExternal() {
    value = Math.random() * 100
  }
</script>

<Pane>
  <Slider bind:value on:change={onSliderChange} />
  <button on:click={incrementExternal}>
    Increment external
  </button>
  <p>Internal changes: {internalCount}</p>
  <p>External changes: {externalCount}</p>
</Pane>

```

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

### Per-Component Import for Components (Production)

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/index.mdx

Illustrates the recommended production approach of importing components individually from their specific paths to aid tree shaking.

```svelte
<script lang="ts">
  import Button from 'svelte-tweakpane-ui/Button.svelte'
</script>

<Button />
```

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

### Navigate to Project Directory

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/getting-started.md

Change the current directory to the newly created SvelteKit project directory.

```sh
cd svelte-tweakpane-sandbox
```

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

### Namespace Import for Components

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/index.mdx

Demonstrates how to import all components from 'svelte-tweakpane-ui' under a namespace alias for cleaner code.

```svelte
<script lang="ts">
  import * as T from 'svelte-tweakpane-ui'
</script>

<T.Button />
```

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

### Root Import for Components (Development)

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/index.mdx

Shows the convenient way to import components directly from the root 'svelte-tweakpane-ui' package during development.

```svelte
<script lang="ts">
  import { Button } from 'svelte-tweakpane-ui'
</script>

<Button />
```

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

### Create a New Theme

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/themes.mdx

Define a new theme by creating a plain JavaScript object with keys for each CSS variable Tweakpane uses. Ensure all theme keys are defined for complete control.

```javascript
const myTheme = {
  // Define all theme keys here
  accentColor: '#ff0000',
  backgroundColor: '#ffffff',
  // ... other theme keys
};

```

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

### Register Tweakpane Essentials Plugin

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/plugins.mdx

Import and register the EssentialsPlugin with a Tweakpane instance, then add a cubicbezier blade.

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

const pane = new Pane()
pane.registerPlugin(EssentialsPlugin)

pane
  .addBlade({
    expanded: true,
    label: 'cubicbezier',
    picker: 'inline',
    value: [0.5, 0, 0.5, 1],
    view: 'cubicbezier',
  })
  .on('change', (event) => {
    console.log(event)
  })
```

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

### Apply Basic Preset Theme

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/themes.mdx

Pass a `ThemeUtils.presets` value to the `theme` prop of your Tweakpane component to apply a bundled preset theme.

```svelte
<script lang="ts">
  import { Tweakpane, ThemeUtils } from 'svelte-tweakpane-ui'
</script>

<Tweakpane theme={ThemeUtils.presets.standard}>
  <p>This pane uses the standard theme.</p>
</Tweakpane>

<Tweakpane theme={ThemeUtils.presets.jetblack}>
  <p>This pane uses the jetblack theme.</p>
</Tweakpane>
```

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

### Set Global Default Theme

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/themes.mdx

Use `setGlobalDefaultTheme()` to apply a theme to all Tweakpane components on the page. Individual components can override this using the `theme` prop.

```svelte
<script lang="ts">
  import { Button, ThemeUtils } from 'svelte-tweakpane-ui'
  ThemeUtils.setGlobalDefaultTheme(ThemeUtils.presets.jetblack)
</script>

<Button label="I'm jet black, the custom global default" />
<Button label="I'm light" theme={ThemeUtils.presets.light} />

```

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

### Apply Theme to Pane

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/themes.mdx

Each pane can have its own theme applied via the `theme` prop. This allows for different visual styles within the same page.

```svelte
<script lang="ts">
  import { Pane, Button, ThemeUtils } from 'svelte-tweakpane-ui'
</script>

<Pane theme={ThemeUtils.presets.jetblack}>
  <Button />
</Pane>

<Pane theme={ThemeUtils.presets.standard}>
  <Button />
</Pane>
```

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

### Import and Use Button Component

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/getting-started.md

Import the Button component from svelte-tweakpane-ui and use it in your Svelte files. The button triggers an alert on click.

```svelte
<script lang="ts">
  import { Button } from 'svelte-tweakpane-ui'
</script>

<Button on:click={() => alert('🎛️')} />
```

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

### Apply Theme to Standalone Component

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/themes.mdx

Standalone components can also be themed individually using the `theme` prop. This provides flexibility in styling individual UI elements.

```svelte
<script lang="ts">
  import { Button, ThemeUtils } from 'svelte-tweakpane-ui'
</script>

<Button label="I'm jet black" theme={ThemeUtils.presets.jetblack} />
<Button label="I'm standard" theme={ThemeUtils.presets.standard} />
```

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

### Customize Existing Theme

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/themes.mdx

Extend a preset theme to override only a few values. This approach prevents global default theme values from affecting your custom theme.

```javascript
const myCustomTheme = {
  ...ThemeUtils.presets.standard,
  // Override specific values
  baseBorderRadius: '8px',
  // ... other overrides
};

```

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

### Override Default Theme Values

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/themes.mdx

Pass partial theme objects to the `theme` prop to quickly override specific keys of the global default theme without inheriting other global values.

```javascript
const overrideTheme = {
  baseBorderRadius: '0px',
};

```

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

### Convert Cubic Bezier to Easing Function

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/utilities.mdx

This function converts cubic Bezier curve control points into an easing function compatible with Svelte's tween stores. Use this to create custom animation curves.

```typescript
import { Utils } from "svelte-tweakpane-ui";

const cubicBezier = [0.25, 0.1, 0.25, 1.0];
const easeInOut = Utils.cubicBezierToEaseFunction(cubicBezier);

// Example usage with Svelte's tweened store:
// import { tweened } from 'svelte/motion';
// const position = tweened(0, { easing: easeInOut });
// position.set(100);
```

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

### Convert Quaternion Rotation to CSS Transform

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/utilities.mdx

Use this function to convert quaternion rotation values to a CSS transform string. This is an alternative to Euler rotations for representing 3D orientations.

```typescript
import { Utils } from "svelte-tweakpane-ui";

const quaternionRotation = {
  x: 0,
  y: 0,
  z: Math.sqrt(2) / 2,
  w: Math.sqrt(2) / 2
};

const cssTransform = Utils.quaternionToCssTransform(quaternionRotation);
console.log(cssTransform); // "matrix3d(0, -1, 0, 0, 1, 0, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1)"
```

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

### Convert Euler Rotation to CSS Transform

Source: https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/docs/src/content/docs/docs/utilities.mdx

Use this function to convert Euler rotation values to a CSS transform string. It's useful for applying 3D rotations in web applications.

```typescript
import { Utils } from "svelte-tweakpane-ui";

const eulerRotation = {
  x: Math.PI / 4,
  y: Math.PI / 4,
  z: 0
};

const cssTransform = Utils.eulerToCssTransform(eulerRotation);
console.log(cssTransform); // "rotateX(45deg) rotateY(45deg)"
```

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