@14ch/svelte-ui 0.0.19 → 0.0.20

package/dist/components/Tab.svelte

@@ -3,7 +3,7 @@
 <script lang="ts">
 	import TabItem from './TabItem.svelte';
 	import type { MenuItem } from '../types/menuItem';
-	import { afterNavigate } from '$app/navigation';
+	import { subscribeUrlChange } from '../utils/urlChange';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -44,6 +44,21 @@
 
 	let resolvedCurrentPath = $state('');
 
+	// =========================================================================
+	// Effects
+	// =========================================================================
+	$effect(() => {
+		// props の currentPath が変更されたとき
+		resolvedCurrentPath = getCurrentPath();
+	});
+
+	$effect(() => {
+		// URL の変更を subscribe
+		return subscribeUrlChange(() => {
+			resolvedCurrentPath = getCurrentPath();
+		});
+	});
+
 	// =========================================================================
 	// Methods
 	// =========================================================================
@@ -57,18 +72,10 @@
 		if (typeof window !== 'undefined') {
 			return window.location.pathname;
 		}
+
 		return '';
 	};
 
-	// currentPath が渡されたときやマウント時に選択状態を反映
-	$effect(() => {
-		resolvedCurrentPath = getCurrentPath();
-	});
-
-	afterNavigate(() => {
-		resolvedCurrentPath = getCurrentPath();
-	});
-
 	// パスの正規化処理
 	const normalizePath = (path: string): string => {
 		if (!pathPrefix) return path;
@@ -109,11 +116,6 @@
 		return normalizedCurrentPath !== '' && normalizedCurrentPath.startsWith(itemHref);
 	};
 
-	// 有効なタブのインデックス一覧（disabled を除く）
-	const enabledIndices = $derived(
-		tabItems.map((item, i) => (item.disabled ? -1 : i)).filter((i) => i >= 0)
-	);
-
 	// シンプルなキーボードナビゲーション（disabled タブはスキップ）
 	const handleKeyDown = (event: KeyboardEvent) => {
 		if (tabItems.length === 0 || enabledIndices.length === 0) return;
@@ -171,6 +173,11 @@
 		}
 		return -1;
 	});
+
+	// 有効なタブのインデックス一覧（disabled を除く）
+	const enabledIndices = $derived(
+		tabItems.map((item, i) => (item.disabled ? -1 : i)).filter((i) => i >= 0)
+	);
 </script>
 
 <div

package/dist/utils/urlChange.d.ts

@@ -0,0 +1 @@
+export declare const subscribeUrlChange: (handler: () => void) => () => void;

package/dist/utils/urlChange.js

@@ -0,0 +1,29 @@
+const URL_CHANGE_EVENT = 'svelte-ui:urlchange';
+let historyPatched = false;
+const patchHistory = () => {
+    if (historyPatched || typeof window === 'undefined')
+        return;
+    historyPatched = true;
+    const originalPushState = history.pushState.bind(history);
+    const originalReplaceState = history.replaceState.bind(history);
+    history.pushState = (...args) => {
+        originalPushState(...args);
+        window.dispatchEvent(new Event(URL_CHANGE_EVENT));
+    };
+    history.replaceState = (...args) => {
+        originalReplaceState(...args);
+        window.dispatchEvent(new Event(URL_CHANGE_EVENT));
+    };
+};
+export const subscribeUrlChange = (handler) => {
+    if (typeof window === 'undefined') {
+        return () => { };
+    }
+    patchHistory();
+    window.addEventListener('popstate', handler);
+    window.addEventListener(URL_CHANGE_EVENT, handler);
+    return () => {
+        window.removeEventListener('popstate', handler);
+        window.removeEventListener(URL_CHANGE_EVENT, handler);
+    };
+};

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@14ch/svelte-ui",
 	"description": "Modern Svelte UI components library with TypeScript support",
 	"private": false,
-	"version": "0.0.19",
+	"version": "0.0.20",
 	"type": "module",
 	"keywords": [
 		"svelte",
@@ -106,7 +106,6 @@
 		"sass": "^1.89.2"
 	},
 	"peerDependencies": {
-		"@sveltejs/kit": "^2.0.0",
 		"svelte": "^5.0.0"
 	}
 }