svelte-tweakpane-ui 1.5.13 → 1.5.14

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.14",
   "description": "A Svelte component library wrapping UI elements from Tweakpane, plus some additional functionality for convenience and flexibility.",
   "keywords": [
     "components",
@@ -201,12 +201,12 @@
     "tweakpane": "4.0.5"
   },
   "devDependencies": {
-    "@kitschpatrol/shared-config": "^5.12.0",
+    "@kitschpatrol/shared-config": "^5.13.0",
     "@phenomnomnominal/tsquery": "^6.1.4",
-    "@playwright/test": "^1.57.0",
+    "@playwright/test": "^1.58.1",
     "@stkb/rewrap": "^0.1.0",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.50.0",
+    "@sveltejs/kit": "^2.50.2",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "@types/eslint": "^8.56.12",
@@ -214,14 +214,14 @@
     "bumpp": "^10.4.0",
     "glob": "^13.0.0",
     "node-addon-api": "^8.5.0",
-    "node-gyp": "^12.1.0",
+    "node-gyp": "^12.2.0",
     "postcss-html": "^1.8.1",
-    "publint": "^0.3.16",
+    "publint": "^0.3.17",
     "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.3.6",
+    "svelte-language-server": "^0.17.25",
+    "svelte2tsx": "^0.7.47",
     "ts-morph": "^27.0.2",
     "tslib": "^2.8.1",
     "tsx": "^4.21.0",