finish site-kit

packages/site-kit/package.json

@@ -55,7 +55,7 @@
 			"default": "./src/lib/actions/index.ts"
 		},
 		"./stores": {
-			"default": "./src/lib/stores/index.js"
+			"default": "./src/lib/stores/index.ts"
 		},
 		"./branding/svelte-logo.svg": "./src/lib/branding/svelte-logo.svg",
 		"./components": {

packages/site-kit/src/lib/docs/DocsOnThisPage.svelte

@@ -12,19 +12,15 @@
 	import type { Snippet } from 'svelte';
 	import type { Section } from '../types';
 
-	let {
-		title,
-		path,
-		sections,
-		orientation = 'auto',
-		children
-	}: {
+	interface Props {
 		title: string;
 		path: string;
 		sections: Section[];
 		orientation?: 'auto' | 'inline' | 'aside';
 		children?: Snippet;
-	} = $props();
+	}
+
+	let { title, path, sections, orientation = 'auto', children }: Props = $props();
 
 	const dispatch = createEventDispatcher();
 
@@ -148,8 +144,7 @@
 		hash = '';
 	}
 
-	/** @param {URL} url */
-	function select(url) {
+	function select(url: URL) {
 		// belt...
 		setTimeout(() => {
 			hash = url.hash;

packages/site-kit/src/lib/stores/index.ts

@@ -0,0 +1,5 @@
+export { mql } from './mql';
+export { nav_open, on_this_page_open, overlay_open, should_nav_autohide } from './nav';
+export { reduced_motion } from './reduced-motion';
+export { search_query, search_recent, searching } from './search';
+export { theme } from './theme';

packages/site-kit/src/lib/stores/mql.js → packages/site-kit/src/lib/stores/mql.ts

@@ -1,19 +1,16 @@
 import { browser } from '$app/environment';
 import { readable } from 'svelte/store';
 
-/**
- * @param {string} query
- */
-export const mql = (query) =>
-	readable(browser ? window.matchMedia(query).matches : false, (set) => {
+export function mql(query: string) {
+	return readable(browser ? window.matchMedia(query).matches : false, (set) => {
 		if (!browser) return set(false);
 
 		const mediaQueryList = window.matchMedia(query);
 
-		/** @param {MediaQueryListEvent} event  */
-		const listener = (event) => set(event.matches);
+		const listener = (event: MediaQueryListEvent) => set(event.matches);
 
 		mediaQueryList.addEventListener('change', listener);
 
 		return () => mediaQueryList.removeEventListener('change', listener);
 	});
+}

packages/site-kit/src/lib/stores/reduced-motion.js → packages/site-kit/src/lib/stores/reduced-motion.ts

@@ -1,4 +1,3 @@
 import { mql } from './mql';
 
-/** @type {import('svelte/store').Readable<boolean>} */
 export const reduced_motion = mql('(prefers-reduced-motion: reduce)');

packages/site-kit/src/lib/stores/theme.js → packages/site-kit/src/lib/stores/theme.ts

@@ -1,12 +1,12 @@
 import { BROWSER } from 'esm-env';
 import { persisted } from 'svelte-persisted-store';
 
-/**
- * @typedef {{ preference: 'light' | 'dark' | 'system', current: 'light' | 'dark' }} Theme
- */
+interface Theme {
+	preference: 'light' | 'dark' | 'system';
+	current: 'light' | 'dark';
+}
 
-/** @type {import('svelte/store').Writable<Theme>} */
-export const theme = persisted('svelte:theme', {
+export const theme = persisted<Theme>('svelte:theme', {
 	preference: 'system',
 	current: BROWSER
 		? window.matchMedia('(prefers-color-scheme: dark)').matches