svelte-tweakpane-ui 1.6.0-preview.3 → 1.6.0-preview.5

package/dist/monitor/Profiler.svelte

@@ -1,12 +1,12 @@
 <script context="module"></script>
 
 <script>
-	import Blade from '../core/Blade.svelte'
-	import ClsPad from '../internal/ClsPad.svelte'
-	import { fillWith } from '../utils'
 	import * as pluginModule from '@kitschpatrol/tweakpane-plugin-profiler'
 	import { BROWSER } from 'esm-env'
 	import { createEventDispatcher, onDestroy } from 'svelte'
+	import Blade from '../core/Blade.svelte'
+	import ClsPad from '../internal/ClsPad.svelte'
+	import { fillWith } from '../utils.js'
 	function _measure(name, functionToMeasure) {
 		profilerBlade?.measure(name, functionToMeasure)
 	}

package/dist/monitor/Profiler.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponent } from 'svelte'
-import type { Simplify } from '../utils'
 import type { ProfilerBladeMeasureHandler } from '@kitschpatrol/tweakpane-plugin-profiler'
+import type { Simplify } from '../utils.js'
 export type ProfilerCalcMode = 'frame' | 'mean' | 'median'
 export type ProfilerMeasure = (name: string, functionToMeasure: () => void) => void
 export type ProfilerMeasureAsync = (
@@ -18,7 +18,6 @@ declare const __propDef: {
 		 *
 		 *  If you want to measure something other than execution duration, customize
 		 * `ProfilerBladeDefaultMeasureHandler`.
-		 *
 		 * @example `measure('Hard Work', () => { ... })`;
 		 * @bindable
 		 * @readonly
@@ -28,7 +27,6 @@ declare const __propDef: {
 		/**
 		 * Async variation of function handle that wraps another function to measure its execution
 		 * duration.
-		 *
 		 * @example `measureAsync('Hard Work', async () => { ... })`;
 		 * @bindable
 		 * @async
@@ -36,7 +34,52 @@ declare const __propDef: {
 		 * @default `undefined`
 		 */
 		measureAsync?: ProfilerMeasureAsync | undefined
-	} & ({
+	} & (Omit<
+		{
+			/**
+			 * Blade configuration exposing Tweakpane's internal
+			 * [`BladeParams`](https://tweakpane.github.io/docs/api/interfaces/BaseBladeParams.html).
+			 *
+			 */
+			options: ProfilerOptions
+			/**
+			 * Prevent interactivity and gray out the control.
+			 * @default `false`
+			 */
+			disabled?: boolean
+			/**
+			 * Custom color scheme.
+			 * @default `undefined`  \
+			 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
+			 * set with `setGlobalDefaultTheme()`.
+			 */
+			theme?: import('..').Theme | undefined
+			/**
+			 * Reference to internal Tweakpane
+			 * [`BladeApi`](https://tweakpane.github.io/docs/api/classes/BladeApi.html) for this blade.
+			 *
+			 * This property is exposed for advanced use cases only, such as when implementing convenience
+			 * components wrapping `<Blade>`'s functionality.
+			 *
+			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+			 * @bindable
+			 * @readonly
+			 */
+			ref?: ProfilerRef | undefined
+			/**
+			 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
+			 * the `<Blade>`'s containing `<Pane>`.
+			 *
+			 * This property is exposed for advanced use cases only, such as when implementing convenience
+			 * components wrapping `<Blade>`'s functionality in combination with a Tweakpane plugin.
+			 *
+			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+			 * @default `undefined`
+			 */
+			plugin?: import('../utils.js').Plugin | undefined
+		},
+		'ref' | 'options' | 'plugin'
+	> & {
 		/**
 		 * Number of duration samples from which to calculate the delta value when `calcMode` is
 		 * `'mean'` or `'median'`.
@@ -57,7 +100,7 @@ declare const __propDef: {
 		 * Possibly useful if you're using a custom `ProfilerBladeDefaultMeasureHandler` and are
 		 * measuring something other than time.
 		 * @default `'ms'`
-		 * */
+		 */
 		deltaUnit?: string
 		/**
 		 * Precision of the delta values shown in the control.
@@ -75,16 +118,14 @@ declare const __propDef: {
 		/**
 		 * Text displayed next to the profiler visualization.
 		 * @default `undefined`
-		 * */
+		 */
 		label?: string
 		/**
 		 * Function handle that wraps another function to measure its execution duration.
 		 *
 		 *  If you want to measure something other than execution duration, customize
 		 * `ProfilerBladeDefaultMeasureHandler`.
-		 *
 		 * @example `measure('Hard Work', () => { ... })`;
-		 *
 		 * @bindable
 		 * @readonly
 		 * @default `undefined`
@@ -93,9 +134,7 @@ declare const __propDef: {
 		/**
 		 * Async variation of function handle that wraps another function to measure its execution
 		 * duration.
-		 *
 		 * @example `measureAsync('Hard Work', async () => { ... })`;
-		 *
 		 * @bindable
 		 * @async
 		 * @readonly
@@ -116,54 +155,7 @@ declare const __propDef: {
 		 * 60fps.
 		 */
 		targetDelta?: number
-	} & Omit<
-		{
-			/**
-			 * Blade configuration exposing Tweakpane's internal
-			 * [`BladeParams`](https://tweakpane.github.io/docs/api/interfaces/BaseBladeParams.html).
-			 *
-			 */
-			options: ProfilerOptions
-			/**
-			 * Prevent interactivity and gray out the control.
-			 * @default `false`
-			 */
-			disabled?: boolean
-			/**
-			 * Custom color scheme.
-			 * @default `undefined`  \
-			 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
-			 * set with `setGlobalDefaultTheme()`.
-			 */
-			theme?: import('..').Theme | undefined
-			/**
-			 * Reference to internal Tweakpane
-			 * [`BladeApi`](https://tweakpane.github.io/docs/api/classes/BladeApi.html) for this blade.
-			 *
-			 * This property is exposed for advanced use cases only, such as when implementing convenience
-			 * components wrapping `<Blade>`'s functionality.
-			 *
-			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
-			 *
-			 * @bindable
-			 * @readonly
-			 */
-			ref?: ProfilerRef | undefined
-			/**
-			 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
-			 * the `<Blade>`'s containing `<Pane>`.
-			 *
-			 * This property is exposed for advanced use cases only, such as when implementing convenience
-			 * components wrapping `<Blade>`'s functionality in combination with a Tweakpane plugin.
-			 *
-			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
-			 *
-			 * @default `undefined`
-			 */
-			plugin?: import('../utils').Plugin | undefined
-		},
-		'ref' | 'options' | 'plugin'
-	>)
+	})
 	slots: {}
 	events: {
 		/**
@@ -172,7 +164,7 @@ declare const __propDef: {
 		 * Note that the values described in the `ProfilerChangeEvent` type are available on the
 		 * `event.detail` parameter.
 		 * @event
-		 * */
+		 */
 		change: ProfilerChangeEvent
 	}
 }

package/dist/monitor/WaveformMonitor.svelte

@@ -1,20 +1,20 @@
 <script context="module"></script>
 
 <script>
-	import ClsPad from '../internal/ClsPad.svelte'
-	import GenericMonitor from '../internal/GenericMonitor.svelte'
-	import { fillWith } from '../utils'
 	import * as pluginModule from '@kitschpatrol/tweakpane-plugin-waveform'
 	import { BROWSER } from 'esm-env'
+	import ClsPad from '../internal/ClsPad.svelte'
+	import GenericMonitor from '../internal/GenericMonitor.svelte'
+	import { fillWith } from '../utils.js'
 	export let value
 	export let max = void 0
 	export let min = void 0
 	export let lineStyle = void 0
 	let options
 	$: options = {
-		min,
-		max,
 		lineStyle,
+		max,
+		min,
 		readonly: true,
 		view: 'waveform',
 	}

package/dist/monitor/WaveformMonitor.svelte.d.ts

@@ -2,29 +2,85 @@ import { SvelteComponent } from 'svelte'
 export type WaveformMonitorValue = number[] | Uint8Array | Uint16Array | Uint32Array
 import type { WaveformStyles as WaveformMonitorLineStyle } from '@kitschpatrol/tweakpane-plugin-waveform/dist/types/view/waveform.js'
 declare const __propDef: {
-	props: {
-		/**
-		 * Waveform values.
-		 * @bindable
-		 * */
-		value: WaveformMonitorValue
-		/**
-		 * Minimum graph bound.
-		 * @default `0`
-		 * */
-		min?: number
-		/**
-		 * Maximum graph bound.
-		 * @default `100`
-		 * */
-		max?: number
-		/**
-		 * Line style.
-		 * @default `'linear''`
-		 * */
-		lineStyle?: 'bezier' | 'linear'
-	} & Omit<
-		{
+	props: Omit<
+		Omit<
+			{
+				/**
+				 * The binding's target object with values to manipulate.
+				 * @bindable
+				 */
+				object: import('@tweakpane/core').Bindable & Record<string, WaveformMonitorValue>
+				/** The key for the value in the target `object` that the control should manipulate. */
+				key: string
+				/**
+				 * Prevent interactivity and gray out the control.
+				 * @default `false`
+				 */
+				disabled?: boolean
+				/**
+				 * Text displayed next to control.
+				 * @default `undefined`
+				 */
+				label?: string | undefined
+				/**
+				 * Tweakpane's internal options object.
+				 *
+				 * See [`BindingParams`](https://tweakpane.github.io/docs/api/types/BindingParams.html).
+				 *
+				 * Valid types are contingent on the type of the value `key` points to in `object`.
+				 *
+				 * This is intended internal use, when implementing convenience components wrapping Binding's
+				 * functionality. Options of interest are instead exposed as top-level props in _Svelte
+				 * Tweakpane UI_.
+				 * @default `undefined`
+				 */
+				options?:
+					| (import('@tweakpane/core').BaseMonitorParams & {
+							min?: number
+							max?: number
+							lineStyle?: WaveformMonitorLineStyle
+					  })
+					| undefined
+				/**
+				 * Custom color scheme.
+				 * @default `undefined`  \
+				 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
+				 * set with `setGlobalDefaultTheme()`.
+				 */
+				theme?: import('..').Theme | undefined
+				/**
+				 * Reference to internal Tweakpane
+				 * [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
+				 * this control.
+				 *
+				 * This property is exposed for advanced use cases only, such as when implementing convenience
+				 * components wrapping `<Binding>`'s functionality.
+				 *
+				 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+				 * @bindable
+				 * @readonly
+				 */
+				ref?: import('../internal/GenericMonitor.svelte').GenericMonitorRef | undefined
+				/**
+				 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
+				 * the `<Binding>`'s containing `<Pane>`.
+				 *
+				 * This property is exposed for advanced use cases only, such as when implementing convenience
+				 * components wrapping `<Binding>`'s functionality in combination with a Tweakpane plugin.
+				 *
+				 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+				 * @default `undefined`
+				 */
+				plugin?: import('../utils.js').Plugin | undefined
+			},
+			'object' | 'key'
+		> & {
+			/**
+			 * Waveform values.
+			 * @bindable
+			 */
+			value: WaveformMonitorValue
+		} & {
 			/**
 			 * Number of past states to retain.
 			 * @default `1`  \
@@ -47,89 +103,30 @@ declare const __propDef: {
 			 * Or `3` if value is `string` and `multiline` is `true`.
 			 */
 			rows?: number
-		} & {
-			/**
-			 * Waveform values.
-			 * @bindable
-			 */
-			value: WaveformMonitorValue
-		} & Omit<
-				{
-					/**
-					 * The binding's target object with values to manipulate.
-					 * @bindable
-					 */
-					object: import('@tweakpane/core').Bindable & Record<string, WaveformMonitorValue>
-					/** The key for the value in the target `object` that the control should manipulate. */
-					key: string
-					/**
-					 * Prevent interactivity and gray out the control.
-					 * @default `false`
-					 */
-					disabled?: boolean
-					/**
-					 * Text displayed next to control.
-					 * @default `undefined`
-					 */
-					label?: string | undefined
-					/**
-					 * Tweakpane's internal options object.
-					 *
-					 * See [`BindingParams`](https://tweakpane.github.io/docs/api/types/BindingParams.html).
-					 *
-					 * Valid types are contingent on the type of the value `key` points to in `object`.
-					 *
-					 * This is intended internal use, when implementing convenience components wrapping Binding's
-					 * functionality. Options of interest are instead exposed as top-level props in _Svelte
-					 * Tweakpane UI_.
-					 * @default `undefined`
-					 */
-					options?:
-						| ({
-								min?: number
-								max?: number
-								lineStyle?: WaveformMonitorLineStyle
-						  } & import('@tweakpane/core').BaseMonitorParams)
-						| undefined
-					/**
-					 * Custom color scheme.
-					 *
-					 * @default `undefined`  \
-					 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
-					 * set with `setGlobalDefaultTheme()`.
-					 */
-					theme?: import('..').Theme | undefined
-					/**
-					 * Reference to internal Tweakpane
-					 * [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
-					 * this control.
-					 *
-					 * This property is exposed for advanced use cases only, such as when implementing convenience
-					 * components wrapping `<Binding>`'s functionality.
-					 *
-					 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
-					 *
-					 * @bindable
-					 * @readonly
-					 */
-					ref?: import('../internal/GenericMonitor.svelte').GenericMonitorRef | undefined
-					/**
-					 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
-					 * the `<Binding>`'s containing `<Pane>`.
-					 *
-					 * This property is exposed for advanced use cases only, such as when implementing convenience
-					 * components wrapping `<Binding>`'s functionality in combination with a Tweakpane plugin.
-					 *
-					 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
-					 *
-					 * @default `undefined`
-					 */
-					plugin?: import('../utils').Plugin | undefined
-				},
-				'object' | 'key'
-			>,
+		},
 		'ref' | 'options' | 'plugin'
-	>
+	> & {
+		/**
+		 * Waveform values.
+		 * @bindable
+		 */
+		value: WaveformMonitorValue
+		/**
+		 * Minimum graph bound.
+		 * @default `0`
+		 */
+		min?: number
+		/**
+		 * Maximum graph bound.
+		 * @default `100`
+		 */
+		max?: number
+		/**
+		 * Line style.
+		 * @default `'linear''`
+		 */
+		lineStyle?: 'bezier' | 'linear'
+	}
 	events: {
 		[evt: string]: CustomEvent<any>
 	}

package/dist/theme.d.ts

@@ -1,5 +1,5 @@
 import type { RgbaColorObject, RgbColorObject } from '@tweakpane/core'
-import type { Simplify } from './utils'
+import type { Simplify } from './utils.js'
 export type ThemeColorValue = Simplify<RgbaColorObject | RgbColorObject | string>
 export type Theme = CustomThemeKeys & ThemeKeys
 type ThemeKeys = {

package/dist/theme.js

@@ -36,7 +36,6 @@ const standard = {
 	// PluginThumbnailListHeight: '400px', pluginThumbnailListThumbSize: '20px',
 	// pluginThumbnailListWidth: '200px'
 }
-// eslint-disable-next-line unicorn/no-array-reduce
 export const keys = Object.keys(standard).reduce((acc, key) => {
 	acc[key] = key
 	return acc

package/dist/utils.d.ts

@@ -1,5 +1,5 @@
-import type { Theme } from './theme'
 import type { FolderApi, Pane, TabPageApi } from 'tweakpane'
+import type { Theme } from './theme.js'
 export type Container = FolderApi | Pane | TabPageApi
 export type Simplify<T> = NonNullable<unknown> & {
 	[KeyType in keyof T]: T[KeyType]
@@ -17,16 +17,16 @@ export type Plugin = TpPluginBundle
  * The base event type for value change notification events emitted by various controls.
  */
 export type ValueChangeEvent<V> = CustomEvent<{
+	/**
+	 * A copy of the value at the time of the event.
+	 */
+	value: V
 	/**
 	 * The origin of the event.
 	 * Changes resulting from the user's direct manipulation of the control will are marked as `internal`.
 	 * Changes resulting from manipulation of the bound value from _outside_ the component are marked as `external`.
 	 */
 	origin: 'external' | 'internal'
-	/**
-	 * A copy of the value at the time of the event.
-	 */
-	value: V
 }>
 /**
  * Needed to conveniently use $$Events as the single source of truth for component events Performs

package/dist/utils.js

@@ -65,10 +65,8 @@ export function enforceReadonly(
 ) {
 	allowAssignmentToUndefined ??= false
 	if (
-		!(
-			external === internal ||
-			(allowAssignmentToUndefined && internal === undefined && external !== undefined)
-		)
+		external !== internal &&
+		(!allowAssignmentToUndefined || internal !== undefined || external === undefined)
 	) {
 		const componentString = componentName ? `<${componentName}> ` : ''
 		const propertyString = propertyName ? `property "${propertyName}" ` : ''

package/license.txt

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023-2025 Eric Mika
+Copyright (c) 2023-2026 Eric Mika
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-tweakpane-ui",
-  "version": "1.6.0-preview.3",
+  "version": "1.6.0-preview.5",
   "description": "A Svelte component library wrapping UI elements from Tweakpane, plus some additional functionality for convenience and flexibility.",
   "keywords": [
     "components",
@@ -198,50 +198,45 @@
     "@kitschpatrol/tweakpane-plugin-waveform": "1.0.4-beta.3",
     "@tweakpane/core": "2.0.5",
     "esm-env": "^1.2.2",
-    "fast-copy": "^3.0.2",
-    "fast-equals": "^5.3.2",
+    "fast-copy": "^4.0.2",
+    "fast-equals": "^6.0.0",
     "nanoid": "^5.1.6",
     "svelte-persisted-store": "0.12.0",
     "tweakpane": "4.0.5",
-    "tweakpane-plugin-color-plus": "0.1.8"
+    "tweakpane-plugin-color-plus": "0.2.0"
   },
   "devDependencies": {
-    "@kitschpatrol/shared-config": "~5.4.4",
-    "@phenomnomnominal/tsquery": "^6.1.3",
-    "@playwright/test": "^1.56.1",
+    "@kitschpatrol/shared-config": "^5.12.0",
+    "@phenomnomnominal/tsquery": "^6.1.4",
+    "@playwright/test": "^1.57.0",
     "@stkb/rewrap": "^0.1.0",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.48.4",
-    "@sveltejs/package": "^2.5.4",
+    "@sveltejs/kit": "^2.50.0",
+    "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "@types/eslint": "^8.56.12",
-    "@types/fs-extra": "^11.0.4",
-    "@types/node": "^18.19.130",
-    "bumpp": "^10.3.1",
-    "eslint": "^9.39.1",
-    "fs-extra": "^11.3.2",
-    "glob": "^11.0.3",
-    "postcss-html": "^1.8.0",
-    "prettier": "^3.6.2",
-    "publint": "^0.3.15",
-    "read-package-up": "^11.0.0",
+    "@types/node": "^20.19.30",
+    "bumpp": "^10.4.0",
+    "glob": "^13.0.0",
+    "node-addon-api": "^8.5.0",
+    "node-gyp": "^12.1.0",
+    "postcss-html": "^1.8.1",
+    "publint": "^0.3.16",
+    "read-package-up": "^12.0.0",
     "svelte": "^4.2.20",
-    "svelte-check": "^4.3.3",
-    "svelte-language-server": "0.17.0",
-    "svelte2tsx": "^0.7.45",
-    "ts-morph": "^24.0.0",
+    "svelte-check": "^4.3.5",
+    "svelte-language-server": "^0.17.23",
+    "svelte2tsx": "^0.7.46",
+    "ts-morph": "^27.0.2",
     "tslib": "^2.8.1",
-    "tsx": "^4.20.6",
-    "typescript": "~5.8.3",
+    "tsx": "^4.21.0",
+    "typescript": "~5.9.3",
     "vite": "^5.4.21",
-    "yaml": "^2.8.1"
+    "yaml": "^2.8.2"
   },
   "peerDependencies": {
     "svelte": "^4.0.0 || ^5.0.0"
   },
-  "publishConfig": {
-    "access": "public"
-  },
   "scripts": {
     "build": "pnpm run --sequential /^build:/",
     "build:01-sync": "pnpm run check && pnpm run docs-sync",
@@ -265,13 +260,13 @@
     "docs-dev": "pnpm -C ./docs run dev",
     "docs-preview": "pnpm -C ./docs run preview",
     "docs-sync": "pnpm -C ./docs run sync",
-    "fix": "kpi fix",
-    "format": "kpi-mdat fix ; kpi-eslint fix ; kpi-prettier fix ; tsx ./scripts/format-embedded-code.ts",
+    "fix": "ksc fix",
+    "format": "ksc-mdat fix ; ksc-eslint fix ; ksc-prettier fix ; tsx ./scripts/format-embedded-code.ts",
     "kit-build": "pnpm run kit-examples && vite build",
     "kit-dev": " pnpm run kit-examples && vite dev",
     "kit-examples": "tsx ./scripts/generate-kit-examples.ts",
     "kit-preview": "vite preview",
-    "lint": "kpi lint && svelte-check --tsconfig ./tsconfig.build.json",
+    "lint": "ksc lint && svelte-check --tsconfig ./tsconfig.build.json",
     "release": "pnpm run build && bumpp --preid preview --commit 'Release: %s' && NPM_AUTH_TOKEN=$(op read 'op://Personal/npm/token') && pnpm publish --tag preview --ignore-scripts",
     "rewrap": "rewrap -i --column 100 `find src \\( -name '*.svelte' -o -name '*.ts'  -o -name '*.html' \\) -type f | grep -v src/examples`",
     "test": "pnpm run --sequential /^test:/",