svelte-tweakpane-ui 1.0.2 → 1.1.1

package/dist/control/CubicBezier.svelte

@@ -60,7 +60,7 @@
 
 <style>
 	/* Fix overflow bug from the plugin TODO PR */
-	:global(div.tp-cbzv:not(tp-cbzv-expanded) div.tp-cbzv_p) {
+	:global(div.svelte-tweakpane-ui div.tp-cbzv:not(tp-cbzv-expanded) div.tp-cbzv_p) {
 		overflow: hidden !important;
 	}
 </style>

package/dist/control/CubicBezier.svelte.d.ts

@@ -118,9 +118,6 @@ export type CubicBezierSlots = typeof __propDef.slots;
  * Usage outside of a `<Pane>` component will implicitly wrap the cubic bezier control in `<Pane
  * position='inline'>`.
  *
- * Complete functionality of the `scale` prop is [pending a pull
- * request](https://github.com/tweakpane/plugin-essentials/pull/19).
- *
  * _Note: A memory leak has been observed in situations when the `value` prop is written frequently
  * from outside the component. See [issue
  * #18](https://github.com/tweakpane/plugin-essentials/issues/18) on the Plugin Essentials repo for

package/dist/control/Textarea.svelte

@@ -14,11 +14,9 @@
 		updateListeners(live ?? true, true);
 	});
 	function onBlur(event) {
-		console.log('onblur');
 		value = event.target.value;
 	}
 	function onInput(event) {
-		console.log('input');
 		value = event.target.value;
 	}
 	function updateListeners(live2, destroy = false) {

package/dist/control/Wheel.svelte.d.ts

@@ -76,11 +76,7 @@ declare const __propDef: {
 			 * Specifying both a `min` and a `max` prop turns the control into a slider.
 			 * @default `undefined`
 			 */
-			min?: number | undefined /**
-			 * When `true`, expand the width of the wheel control at the expense of the numerical input
-			 * field.
-			 * @default `false`
-			 * */;
+			min?: number | undefined;
 			/**
 			 * Maximum value.
 			 *

package/dist/core/Blade.svelte

@@ -36,11 +36,10 @@
 	onDestroy(() => {
 		_ref?.dispose();
 	});
-	$: DEV && BROWSER && enforceReadonly(_ref, ref, 'Blade', 'ref', true);
-	$: options, BROWSER && $parentStore && index !== void 0 && create();
-	$: BROWSER && _ref && (_ref.disabled = disabled);
-	$: BROWSER &&
-		theme &&
+	$: DEV && enforceReadonly(_ref, ref, 'Blade', 'ref', true);
+	$: options && $parentStore && index !== void 0 && create();
+	$: _ref && (_ref.disabled = disabled);
+	$: theme &&
 		$parentStore &&
 		(userCreatedPane || !isRootPane($parentStore)) &&
 		console.warn(

package/dist/core/TabGroup.svelte

@@ -30,11 +30,10 @@
 		const tabPageApi = $tabGroupStore?.pages.at(index);
 		if (tabPageApi && !tabPageApi.selected) tabPageApi.selected = true;
 	}
-	$: BROWSER && setUpListeners($tabGroupStore);
-	$: BROWSER && setSelectedIndex(selectedIndex);
-	$: BROWSER && $tabGroupStore && ($tabGroupStore.disabled = disabled);
-	$: BROWSER &&
-		theme &&
+	$: setUpListeners($tabGroupStore);
+	$: setSelectedIndex(selectedIndex);
+	$: $tabGroupStore && ($tabGroupStore.disabled = disabled);
+	$: theme &&
 		$parentStore &&
 		(userCreatedPane || !isRootPane($parentStore)) &&
 		console.warn(

package/dist/internal/GenericInput.svelte

@@ -4,16 +4,14 @@
 	generics="T extends any, U extends GenericInputOptions = GenericInputOptions, V extends GenericInputRef = GenericInputRef"
 >
 	import GenericBinding from './GenericBinding.svelte';
-	import { BROWSER } from 'esm-env';
 	export let options = void 0;
 	export let ref = void 0;
 	export let value;
 	let optionsInternal;
-	$: BROWSER &&
-		(optionsInternal = {
-			...options,
-			readonly: false
-		});
+	$: optionsInternal = {
+		...options,
+		readonly: false
+	};
 </script>
 
 <GenericBinding bind:value bind:ref options={optionsInternal} {...$$restProps} />

package/dist/internal/GenericPane.svelte

@@ -63,14 +63,13 @@
 		}
 		expanded = _expanded;
 	}
-	$: BROWSER && paneRef && setScale(scale);
-	$: BROWSER &&
-		paneRef &&
-		updateCollapsibility(userExpandable, paneRef.element, 'tp-rotv_b', 'tp-rotv_m');
-	$: BROWSER && paneRef && title && (paneRef.title = title);
-	$: BROWSER && paneRef && applyTheme(paneRef.element, theme);
-	$: _expanded, BROWSER && paneRef && syncFolded();
-	$: BROWSER && paneRef && (_expanded = expanded);
+	$: paneRef?.element && paneRef?.element.classList.add('svelte-tweakpane-ui');
+	$: paneRef && setScale(scale);
+	$: paneRef && updateCollapsibility(userExpandable, paneRef.element, 'tp-rotv_b', 'tp-rotv_m');
+	$: paneRef && title && (paneRef.title = title);
+	$: paneRef && applyTheme(paneRef.element, theme);
+	$: _expanded, paneRef && syncFolded();
+	$: paneRef && (_expanded = expanded);
 </script>
 
 {#if BROWSER}
@@ -95,3 +94,18 @@
 {:else}
 	<ClsPad keysAdd={['containerVerticalPadding', 'containerUnitSize']} {theme} />
 {/if}
+
+<style>
+	/* Blade labels */
+	:global(div.svelte-tweakpane-ui div.tp-lblv_l) {
+		overflow: hidden;
+		padding-right: var(--cnt-hp);
+		text-overflow: ellipsis;
+	}
+
+	/* Pane title label */
+	:global(div.svelte-tweakpane-ui div.tp-rotv_t) {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+</style>

package/dist/internal/GenericSlider.svelte

@@ -1,6 +1,5 @@
 <script generics="T extends number | IntervalSliderValue">
 	import GenericInput from './GenericInput.svelte';
-	import { BROWSER } from 'esm-env';
 	export let value;
 	export let options = void 0;
 	export let min = void 0;
@@ -10,18 +9,17 @@
 	export let keyScale = void 0;
 	export let format = void 0;
 	let formatProxy = format;
-	$: BROWSER && formatProxy !== format && (formatProxy = format);
+	$: formatProxy !== format && (formatProxy = format);
 	let optionsInternal;
-	$: BROWSER &&
-		(optionsInternal = {
-			min,
-			max,
-			format: formatProxy,
-			keyScale,
-			pointerScale,
-			step,
-			...options
-		});
+	$: optionsInternal = {
+		min,
+		max,
+		format: formatProxy,
+		keyScale,
+		pointerScale,
+		step,
+		...options
+	};
 </script>
 
 <GenericInput bind:value options={optionsInternal} {...$$restProps} />

package/dist/internal/InternalPaneDraggable.svelte

@@ -292,8 +292,7 @@
 	on:pointerdown|capture={() => {
 		zIndexLocal = ++zIndexGlobal;
 	}}
-	class="svelte-tweakpane-ui
-draggable-container"
+	class="draggable-container"
 	class:not-collapsable={!userExpandable}
 	class:not-resizable={!resizable}
 	style:left="{x}px"
@@ -330,7 +329,6 @@ draggable-container"
 		/* Ensure draggable hit zone does not collapse if title is missing */
 		/* Fixes #1 */
 		height: 100%;
-		text-overflow: ellipsis;
 	}
 
 	div.draggable-container.not-collapsable :global(div.tp-rotv_t) {

package/dist/monitor/FpsGraph.svelte

@@ -15,13 +15,13 @@
 	let implicitMode = true;
 	export function begin() {
 		implicitMode = false;
-		fpsBlade?.begin();
+		ref?.begin();
 	}
 	export function end() {
 		implicitMode = false;
-		fpsBlade?.end();
+		ref?.end();
 	}
-	let fpsBlade;
+	let ref;
 	let requestId;
 	const dispatch = createEventDispatcher();
 	onMount(() => {
@@ -29,44 +29,25 @@
 	});
 	onDestroy(() => {
 		stopInternalLoop();
-		stopObservingMeasuredFpsValue();
 	});
 	function startInternalLoop() {
 		loop();
 	}
 	function loop() {
-		fpsBlade?.end();
-		fpsBlade?.begin();
+		ref?.end();
+		ref?.begin();
 		requestId = requestAnimationFrame(loop);
 	}
 	function stopInternalLoop() {
 		requestId && cancelAnimationFrame(requestId);
 	}
-	let observer = void 0;
-	function startObservingMeasuredFpsValue() {
-		stopObservingMeasuredFpsValue();
-		const targetNode = fpsBlade.controller.valueController.view.valueElement;
-		if (!targetNode?.innerHTML) return;
-		observer = new MutationObserver((mutations) => {
-			for (const mutation of mutations) {
-				if (mutation.type === 'characterData' || mutation.type === 'childList') {
-					const fpsText = mutation.target.textContent;
-					if (fpsText !== null) {
-						const fps = Number.parseInt(fpsText, 10);
-						!Number.isNaN(fps) && dispatch('change', fps);
-					}
-				}
+	function addListeners() {
+		ref.on('tick', () => {
+			if (ref.fps !== null) {
+				dispatch('change', ref.fps);
 			}
 		});
-		observer.observe(targetNode, { characterData: true, childList: true, subtree: true });
 	}
-	function stopObservingMeasuredFpsValue() {
-		if (observer) {
-			observer.disconnect();
-			observer = void 0;
-		}
-	}
-	$: fpsBlade && startObservingMeasuredFpsValue();
 	let options;
 	$: options = {
 		min,
@@ -76,10 +57,11 @@
 		rows,
 		view: 'fpsgraph'
 	};
+	$: ref !== void 0 && addListeners();
 	$: !implicitMode && stopInternalLoop();
 </script>
 
-<Blade bind:ref={fpsBlade} {options} plugin={pluginModule} {...$$restProps} />
+<Blade bind:ref {options} plugin={pluginModule} {...$$restProps} />
 {#if !BROWSER}
 	{#if rows}
 		<ClsPad keysAdd={fillWith('containerUnitSize', rows)} theme={$$props.theme} />

package/dist/utils.js

@@ -102,7 +102,6 @@ export function removeKeys(object, ...keys) {
 }
 function clickBlocker(event) {
 	// Only block user clicks, not programmatic ones
-	console.log(event.detail);
 	if (event.isTrusted) event.stopPropagation();
 }
 // Used by folder and pane TODO rewrite to use getSwatchButton etc.

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "svelte-tweakpane-ui",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "type": "module",
+  "description": "Wraps UI elements from Tweakpane in a collection of idiomatic Svelte components, and augments Tweakpane with a few extra features for your convenience and enjoyment.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/kitschpatrol/svelte-tweakpane-ui.git"
@@ -189,8 +190,7 @@
     "@kitschpatrol/tweakpane-textarea-plugin": "^2.0.1",
     "@tweakpane/core": "^2.0.2",
     "@tweakpane/plugin-camerakit": "^0.3.0",
-    "@tweakpane/plugin-essentials": "^0.2.0",
-    "bumpp": "^9.2.1",
+    "@tweakpane/plugin-essentials": "^0.2.1",
     "esm-env": "^1.0.0",
     "nanoid": "^5.0.4",
     "svelte-local-storage-store": "^0.6.4",
@@ -201,12 +201,14 @@
     "@kitschpatrol/shared-config": "^4.0.0",
     "@phenomnomnominal/tsquery": "^6.1.3",
     "@stkb/rewrap": "^0.1.0",
-    "@sveltejs/adapter-static": "^2.0.3",
-    "@sveltejs/kit": "^1.30.3",
+    "@sveltejs/adapter-static": "^3.0.0",
+    "@sveltejs/kit": "^2.0.1",
     "@sveltejs/package": "^2.2.3",
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "@types/eslint": "^8.44.9",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^20.10.4",
+    "@types/node": "^20.10.5",
+    "bumpp": "^9.2.1",
     "eslint": "^8.56.0",
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
@@ -222,11 +224,9 @@
     "tslib": "^2.6.2",
     "tsx": "^4.6.2",
     "typescript": "^5.3.3",
-    "vite": "^4.5.1",
+    "vite": "^5.0.10",
     "yaml": "^2.3.4"
   },
-  "_id": "svelte-tweakpane-ui@1.0.2",
-  "readme": "ERROR: No README data found!",
   "scripts": {
     "build": "run-s --print-label build:*",
     "build:01-sync": "pnpm run check",
@@ -256,7 +256,10 @@
     "kit-examples": "tsx ./scripts/generate-kit-examples.ts",
     "kit-preview": "vite preview",
     "lint": "shared-config --check",
-    "release": "pnpm bumpp --commit 'Release: %s' --tag '%s' && pnpm publish --otp $(op read 'op://Personal/Npmjs/one-time password?attribute=otp')",
+    "release": "run-s --print-label release:*",
+    "release:1-build": "pnpm run build",
+    "release:2-version": "pnpm bumpp --commit 'Release: %s' --tag '%s'",
+    "release:3-publish": "pnpm publish --ignore-scripts --otp $(op read 'op://Personal/Npmjs/one-time password?attribute=otp')",
     "rewrap": "rewrap -i --column 100 `find src \\( -name '*.svelte' -o -name '*.ts'  -o -name '*.html' \\) -type f | grep -v src/examples`",
     "type-check": "tsc --noEmit"
   }

package/readme.md

@@ -9,7 +9,7 @@
 
 The library makes it easy to quickly and declaratively add knobs and dials to your projects using components that feel like they were made for Svelte. It also augments Tweakpane with a few [extra features](https://kitschpatrol.com/svelte-tweakpane-ui/docs/features) for your convenience and enjoyment.
 
-[The components](https://kitschpatrol.com/svelte-tweakpane-ui/docs#components) should be useful for integrating controls and value monitoring in parametrically driven artworks or simulations.
+[The components](https://kitschpatrol.com/svelte-tweakpane-ui/docs#components) should be useful for integrating controls and value monitoring in parametrically driven artworks, data visualizations, creative tools, simulations, etc.
 
 ## Demo