svelte-tweakpane-ui 1.5.13 → 1.5.15

package/dist/core/Pane.svelte.d.ts

@@ -1,24 +1,7 @@
 import { SvelteComponent } from 'svelte'
 export type PanePosition = 'draggable' | 'fixed' | 'inline'
 declare const __propDef: {
-	props: {
-		/**
-		 * Pane mode, one of three options:
-		 * - **'draggable'** *(default)*  \
-		 *   The pane is draggable and resizable, and may be placed anywhere over the page.
-		 * - **'inline'**  \
-		 *   The pane appears inline with other content in the normal flow of the document.  \
-		 *   This is the default mode for components created outside of an explicit `<Pane>`
-		 *   component.*
-		 * - **'fixed'** \
-		 *   Standard Tweakpane behavior where the pane is shown in a fixed position over the page.
-		 *
-		 *   Note that `<Pane>` is a dynamic component, and availability of additional props will
-		 *   vary depending on the defined `position` value.
-		 * @default `'draggable'`
-		 */
-		position?: PanePosition
-	} & (
+	props: (
 		| (Omit<
 				{
 					/**
@@ -432,7 +415,24 @@ declare const __propDef: {
 				 */
 				position?: 'draggable' | undefined
 		  })
-	)
+	) & {
+		/**
+		 * Pane mode, one of three options:
+		 * - **'draggable'** *(default)*  \
+		 *   The pane is draggable and resizable, and may be placed anywhere over the page.
+		 * - **'inline'**  \
+		 *   The pane appears inline with other content in the normal flow of the document.  \
+		 *   This is the default mode for components created outside of an explicit `<Pane>`
+		 *   component.*
+		 * - **'fixed'** \
+		 *   Standard Tweakpane behavior where the pane is shown in a fixed position over the page.
+		 *
+		 *   Note that `<Pane>` is a dynamic component, and availability of additional props will
+		 *   vary depending on the defined `position` value.
+		 * @default `'draggable'`
+		 */
+		position?: PanePosition
+	}
 	events: {
 		[evt: string]: CustomEvent<any>
 	}

package/dist/core/TabGroup.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { BROWSER } from 'esm-env'
-	import { getContext, onDestroy, onMount, setContext } from 'svelte'
+	import { getContext, onDestroy, onMount, setContext, tick } from 'svelte'
 	import { writable } from 'svelte/store'
 	import ClsPad from '../internal/ClsPad.svelte'
 	import InternalPaneInline from '../internal/InternalPaneInline.svelte'
@@ -13,17 +13,25 @@
 	setContext('tabGroupStore', tabGroupStore)
 	const tabIndexStore = writable()
 	setContext('tabIndexStore', tabIndexStore)
+	setContext('initialSelectedIndex', selectedIndex)
+	const tabGroupInitialized = writable(false)
 	const userCreatedPane = getContext('userCreatedPane')
 	let indexElement
-	onMount(() => {
+	onMount(async () => {
 		$tabIndexStore = userCreatedPane ? getElementIndex(indexElement) : 0
+		await tick()
+		setSelectedIndex(selectedIndex)
+		$tabGroupInitialized = true
 	})
 	onDestroy(() => {
 		$tabGroupStore?.dispose()
 	})
 	function setUpListeners(t) {
 		t?.on('select', (event) => {
-			selectedIndex = event.index
+			const isInDocument = indexElement?.isConnected ?? false
+			if ($tabGroupInitialized && isInDocument && event.index >= 0) {
+				selectedIndex = event.index
+			}
 		})
 	}
 	function setSelectedIndex(index) {
@@ -31,7 +39,7 @@
 		if (tabPageApi && !tabPageApi.selected) tabPageApi.selected = true
 	}
 	$: setUpListeners($tabGroupStore)
-	$: setSelectedIndex(selectedIndex)
+	$: $tabGroupStore && setSelectedIndex(selectedIndex)
 	$: $tabGroupStore && ($tabGroupStore.disabled = disabled)
 	$: theme &&
 		$parentStore &&

package/dist/core/TabPage.svelte

@@ -13,6 +13,7 @@
 	const tabGroupStore = getContext('tabGroupStore')
 	const tabIndexStore = getContext('tabIndexStore')
 	const userCreatedPane = getContext('userCreatedPane')
+	const initialSelectedIndex = getContext('initialSelectedIndex')
 	const parentStore = getContext('parentStore')
 	const tabPageStore = writable()
 	setContext('parentStore', tabPageStore)
@@ -31,9 +32,14 @@
 				pages: [{ title }],
 			})
 			$tabPageStore = $tabGroupStore.pages[0]
-			selected = true
+			if (index === initialSelectedIndex) {
+				selected = true
+			}
 		} else if (!$tabPageStore && $tabGroupStore) {
 			$tabPageStore = $tabGroupStore.addPage({ index, title })
+			if (index === initialSelectedIndex) {
+				selected = true
+			}
 		}
 		$tabGroupStore?.on('select', () => {
 			$tabPageStore && (selected = $tabPageStore.selected)

package/dist/extra/AutoObject.svelte.d.ts

@@ -64,9 +64,9 @@ export type AutoObjectSlots = typeof __propDef.slots
  * position="inline">`.
  *
  * `<AutoObject>` was inspired by the
- * [`<TWPAutoMutable>`](https://github.com/MrFoxPro/solid-tweakpane/blob/master/src/automutable.tsx)
- * component in [Dmitriy Nikiforov's](https://github.com/MrFoxPro)
- * [solid-tweakpane](https://github.com/MrFoxPro/solid-tweakpane) library.
+ * [`<TWPAutoMutable>`](https://github.com/0x241F31/solid-tweakpane/blob/master/src/automutable.tsx)
+ * component in [Dmitriy Nikiforov's](https://github.com/0x241F31)
+ * [solid-tweakpane](https://github.com/0x241F31/solid-tweakpane) library.
  *
  * Plugin component behavior is not available in `<AutoObject>`.
  *

package/dist/internal/InternalPaneDraggable.svelte

@@ -52,7 +52,7 @@
 		if (localStoreId !== void 0) {
 			if (localStoreIds.includes(localStoreId)) {
 				console.warn(
-					'Multiple instances of <Pane> with `mode="draggable"` and `storePositionLocally=true` detected. You must explicitly set unique localStoreId property on each component to avoid collisions.',
+					'Multiple instances of <Pane> with `position="draggable"` and `storePositionLocally=true` detected. You must explicitly set unique localStoreId property on each component to avoid collisions.',
 				)
 			}
 			localStoreIds.push(localStoreId)
@@ -106,6 +106,8 @@
 	let startOffsetX = 0
 	let startOffsetY = 0
 	let moveDistance = 0
+	let startScrollX = 0
+	let startScrollY = 0
 	const doubleClickListener = (event) => {
 		event.stopPropagation()
 		if (event.target) {
@@ -125,6 +127,8 @@
 	const dragStartListener = (event) => {
 		if (x !== void 0 && y !== void 0 && event.button === 0 && event.target instanceof HTMLElement) {
 			moveDistance = 0
+			startScrollY = window.scrollY
+			startScrollX = window.scrollX
 			initialDragEvent = event
 			removeDragStartListeners()
 			addDragMoveAndEndListeners()
@@ -148,8 +152,8 @@
 		) {
 			if (event.target === dragBarElement) {
 				moveDistance += Math.hypot(event.movementX, event.movementY)
-				x = event.pageX + startOffsetX
-				y = event.pageY + startOffsetY
+				x = event.pageX + startOffsetX - (window.scrollX - startScrollX)
+				y = event.pageY + startOffsetY - (window.scrollY - startScrollY)
 			} else if (event.target === widthHandleElement) {
 				width = clamp(event.pageX + startOffsetX + startWidth - x, minWidth, maxAvailablePanelWidth)
 			}
@@ -179,6 +183,8 @@
 			if (event.target === dragBarElement) {
 				dragBarElement.style.removeProperty('cursor')
 			}
+			startScrollY = 0
+			startScrollX = 0
 			containerElement.style.removeProperty('transition')
 			if (
 				event.type === 'pointerup' &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-tweakpane-ui",
-  "version": "1.5.13",
+  "version": "1.5.15",
   "description": "A Svelte component library wrapping UI elements from Tweakpane, plus some additional functionality for convenience and flexibility.",
   "keywords": [
     "components",
@@ -31,6 +31,7 @@
     "email": "eric@ericmika.com",
     "url": "https://ericmika.com"
   },
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
@@ -201,27 +202,27 @@
     "tweakpane": "4.0.5"
   },
   "devDependencies": {
-    "@kitschpatrol/shared-config": "^5.12.0",
+    "@kitschpatrol/shared-config": "^6.0.2",
     "@phenomnomnominal/tsquery": "^6.1.4",
-    "@playwright/test": "^1.57.0",
+    "@playwright/test": "^1.58.2",
     "@stkb/rewrap": "^0.1.0",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.50.0",
+    "@sveltejs/kit": "^2.53.4",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
-    "@types/eslint": "^8.56.12",
-    "@types/node": "^20.19.30",
-    "bumpp": "^10.4.0",
-    "glob": "^13.0.0",
-    "node-addon-api": "^8.5.0",
-    "node-gyp": "^12.1.0",
+    "@types/eslint": "^9.6.1",
+    "@types/node": "^20.19.35",
+    "bumpp": "^10.4.1",
+    "glob": "^13.0.6",
+    "node-addon-api": "^8.6.0",
+    "node-gyp": "^12.2.0",
     "postcss-html": "^1.8.1",
-    "publint": "^0.3.16",
+    "publint": "^0.3.18",
     "read-package-up": "^12.0.0",
     "svelte": "^4.2.20",
-    "svelte-check": "^4.3.5",
-    "svelte-language-server": "^0.17.23",
-    "svelte2tsx": "^0.7.46",
+    "svelte-check": "^4.4.4",
+    "svelte-language-server": "^0.17.29",
+    "svelte2tsx": "^0.7.51",
     "ts-morph": "^27.0.2",
     "tslib": "^2.8.1",
     "tsx": "^4.21.0",
@@ -232,6 +233,12 @@
   "peerDependencies": {
     "svelte": "^4.0.0 || ^5.0.0"
   },
+  "devEngines": {
+    "runtime": {
+      "name": "node",
+      "version": ">=20.19.0"
+    }
+  },
   "scripts": {
     "build": "pnpm run --sequential /^build:/",
     "build:01-sync": "pnpm run check && pnpm run docs-sync",