I installed this, and npm said added 57 packages, and audited 188 packages in 16s
Adding 57 packages seems like a lot to me.

I took a short peek at the package.json, and noticed the bumpp dependency. Could this dependency potentially be turned into a dev dependency?
https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/a0e9d75642ea960302c5a92aad5219ba5c8afea4/package.json#L228C5-L228C11

Hey, me again!

So now , I can't seem to get the layout I need from inline positioning. I've tried using width on an explicit <Pane> that wraps them but I can't seem to get it right.

{#if paramId === "darkMode"}
<div class="flex items-center">
  <Pane position="inline"  theme={customizedTweakPaneTheme} expanded >
    <Checkbox
      bind:value={darkMode}
      label={"DarkMode:"}
      on:change={(e) =>
        handleCheckBoxEvent({
          paramId: "darkMode",
          value: e.detail.value,
          origin: e.detail.origin,
        })}
    />
  </Pane>
  <Pane position="inline" theme={customizedTweakPaneTheme} expanded >
    <Checkbox
    bind:value={numbers}
    label={"Numbers:"}
    on:change={(e) =>
      handleCheckBoxEvent({
        paramId: "numbers",
        value: e.detail.value,
        origin: e.detail.origin,
      })}
  />
  </Pane>
</div>
{/if}```

On build, I get this:

.svelte-kit/output/client/_app/version.json                                                 0.03 kB │ gzip:   0.05 kB     
.svelte-kit/output/client/.vite/manifest.json                                               5.53 kB │ gzip:   0.81 kB     
.svelte-kit/output/client/_app/immutable/assets/App.CCahpbvf.css                            0.04 kB │ gzip:   0.06 kB     
.svelte-kit/output/client/_app/immutable/assets/4.BDLXB7HW.css                              0.13 kB │ gzip:   0.13 kB     
.svelte-kit/output/client/_app/immutable/assets/3.CAMqKQym.css                              0.13 kB │ gzip:   0.13 kB     

[... ~20 other entries below 5kB]

.svelte-kit/output/client/_app/immutable/chunks/scheduler.BDbv0bUs.js                       7.34 kB │ gzip:   3.01 kB     
.svelte-kit/output/client/_app/immutable/entry/start.B0_Jn7u1.js                           28.00 kB │ gzip:  11.21 kB     
.svelte-kit/output/client/_app/immutable/chunks/App.BQfPGA7d.js                           156.51 kB │ gzip:  47.69 kB     
.svelte-kit/output/client/_app/immutable/chunks/tweakpane-plugin-waveform.CqpbEbFB.js   1,851.88 kB │ gzip: 427.60 kB

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

Notice the warning at the end, and the size of the last chunk.

Since I'm not even using the waveform plugin, and most of my other chunks are under 8kB, I'm really wondering what's happening there. Why is tree shaking not working for the waveform plugin? I don't even know if the error is from tweakpane itself or your otherwise fantastic library here.

Do you know what could be causing that?

Hi.

I tried to add this in to a local fork, but the codebase is a bit too specialised for me to do it. Its pretty cool though, and I'm gonna try to study it more... nevertheless

I'd like to be able to specify starting, default values on at least a slider. It seems like they do have some kind of default, but I don't see where that is set.

Thanks for making this library!

I have a pane that I want to start in collapsed form, but I'm having trouble getting it to work.

If I do this, the pane starts open. I can click on it to collapse it. The div resizes to fit the Pane when it collapses and expands, as desired:

<div id="settings">
	<Pane title="More" position="inline" >
		<Text ...>
		<Text ...>
	</Pane>
</div>

If I do <Pane title="More" position="inline" expanded={false}>, then the Pane starts collapsed. When I click on it, it does not open. Weirdly, it does increase in width to accommodate the contents that would be visible if it actually opened.

Seems like it's possible this warning is related,

[vite-plugin-svelte] [...] +page.svelte:343:1 Unused CSS selector ".tp-rotv"

Thank you!

Excellent UI library and documentation, thankyou so much !

I just can't seem to do this simple thing, and that is to hide the value readout box next to a slider if necessary. Aplogies up front if I missed it and its really obvious.

When you drag the draggable pane and, for example, Alt+Tab out of the browser window. Upon returning the pane will stick to the cursor even when the user isn't dragging (holding down LMB) anymore. This can be easily reproduced in the demo that is in the docs.

I've been digging through the InternalPaneDraggable.svelte code and I'm guessing this might be because of the "pointerup" event not firing upon stuff like Alt-Tabbing, this might be an easy fix by adding a "pointercancel" event listener as well that unbinds the move listener like the upListener would. I haven't tested that though.

When using an object such as

const object = {
    aFolder: {
        aSetting: 0,
        bFolder: {
            bSetting: 0,
            cFolder: {
                cSetting: 0,
            },
        },
    },
}

The Panel will only display the slider for the A setting and then show an empty B folder

Hi,

my users are requesting larger fonts on the value readouts, I can't seem to change the size using the theme baseFontFamily: "sans-serif", setting. Should I be able to pass a font-size attribute somehow?

First of all, thank you for this amazing library!

Steps to reproduce:

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

<!-- I've done this to avoid the default title that comes up -->
<Pane title='' position='draggable'>
  ...
</Pane>

When this is done the pane is no longer draggable.

Thank you for your amazing work! I also tried to create a PR for this change, but I'm not able to do so easily 😈

Is it simple to implement a special key:value for AutoObject in order to automatically create a List control (aka a Select) or a RadioGroup buttons?

For example, it could be implemented with:

myKey: ['alpha', 'beta']

Or with labels:

myKey: [{alpha:'AlphaLabel', beta:'BetaLabel'}]

Given that the Array is not checked as an input type in the AutoObject if statement, I think it is feasible. Thanks!

Hey! Awesome library!

I was looking into how to use a logarithmic scale for a slider, and realized it was more involved than listening to on:change and updating the value accordingly.

Do you have any pointers on how to do it?

Working with the library for a VST plugin. I have a bunch of sliders, and my usual pattern is to update the host parameters from each slider, according to where the value is coming from. Then that UI paramter can also be controlled from automation in the host. So I need to have a mechanism to identify and route from and to sliders/controllers. My usual method is to use the html data-key property on input elements, and attach param names to that. But I can't see how I can pass a name, identifier or something in , for example, a SliderChangeEvent - that would be enough for me to do the routing.

svelte-tweakpane-ui % pnpm install  
Scope: all 2 workspace projects
 ERR_PNPM_PATCH_NOT_APPLIED  The following patches were not applied: @astrojs/[email protected]

trying to build locally from fork, so I can tweak the tweakpane a bit... is this something I can get around?