feat!: migrate to SvelteKit 3

- Move svelte.config.js options into the sveltekit() Vite plugin
- Extend $app/tsconfig, keeping Kit 2's js/ts/svelte include set
- Replace $app/stores with $app/state in SeoHead
- Import Handle types from @sveltejs/kit/hooks
- Use relative imports inside the package instead of $lib, so dist
  never depends on a consumer-side alias
- Convert $props<T>() to annotated $props(); svelte-check 4.7 rejects
  the generic form
- Peer @sveltejs/kit ^3.0.0; consumers on Kit 2 stay on earlier tags

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: jaysin586

README.md

@@ -20,8 +20,8 @@ the SVG there to preserve crisp branding. Name that import `logo` in new sites:
 ```svelte
 <script lang="ts">
     import { RootLayout, HeaderV2 } from '@humanspeak/docs-kit'
-    import logo from '$lib/assets/logo.svg'
-    import { docsConfig } from '$lib/docs-config'
+    import logo from '#lib/assets/logo.svg'
+    import { docsConfig } from '#lib/docs-config'
 
     const { children } = $props()
 </script>

package.json

@@ -79,7 +79,7 @@
         "@humanspeak/svelte-markdown": ">=1.0.0",
         "@humanspeak/svelte-motion": ">=0.1.0",
         "@lucide/svelte": ">=0.400.0",
-        "@sveltejs/kit": "^2.0.0",
+        "@sveltejs/kit": "^3.0.0",
         "mode-watcher": "^1.0.0",
         "shiki": ">=3.0.0",
         "svelte": "^5.0.0"

src/lib/components/BlogLayoutV2.svelte

@@ -14,9 +14,9 @@
   ```svelte
   <script lang="ts">
     import { BlogLayoutV2 } from '@humanspeak/docs-kit/blog'
-    import { docsConfig } from '$lib/docs-config'
-    import { headerNav } from '$lib/docsNav'
-    import favicon from '$lib/assets/logo.svg'
+    import { docsConfig } from '#lib/docs-config'
+    import { headerNav } from '#lib/docsNav'
+    import favicon from '#lib/assets/logo.svg'
     import { version } from '../../../package.json'
     const { children } = $props()
   </script>

src/lib/components/BlogPostV2.svelte

@@ -12,7 +12,7 @@
   ```svelte
   <script lang="ts">
     import { BlogPostV2, type BlogPostMeta } from '@humanspeak/docs-kit/blog'
-    import { docsConfig } from '$lib/docs-config'
+    import { docsConfig } from '#lib/docs-config'
     const post: BlogPostMeta = { … }
   </script>
 

src/lib/components/BreadcrumbContextProvider.svelte

@@ -2,9 +2,9 @@
     import { type Snippet } from 'svelte'
     import { type BreadcrumbContext, setBreadcrumbContext } from '../contexts/breadcrumb.js'
 
-    const { children } = $props<{
+    const { children }: {
         children?: Snippet
-    }>()
+    } = $props()
 
     const breadcrumbs = $state<BreadcrumbContext>({ breadcrumbs: [] })
 

src/lib/components/BreadcrumbJsonLd.svelte

@@ -2,7 +2,7 @@
     import type { DocsKitConfig } from '../config.js'
     import { getBreadcrumbContext } from '../contexts/breadcrumb.js'
 
-    const { config } = $props<{ config: DocsKitConfig }>()
+    const { config }: { config: DocsKitConfig } = $props()
 
     const breadcrumbs = getBreadcrumbContext()
 
@@ -17,7 +17,7 @@
                     '@type': 'ListItem',
                     position: i + 2,
                     name: b.title,
-                    ...(b.href ? { item: `${config.url}${b.href}` } : {})
+                    ...(b.href ? { item: `${config.url}${b.href}` }: {})
                 }))
         ]
         return `<${'script'} type="application/ld+json">${JSON.stringify({

src/lib/components/ComparisonPageV2.svelte

@@ -13,7 +13,7 @@
   ```svelte
   <script lang="ts">
     import { ComparisonPageV2 } from '@humanspeak/docs-kit'
-    import { competitors, getCompetitor } from '$lib/compare-data'
+    import { competitors, getCompetitor } from '#lib/compare-data'
     import type { PageData } from './$types'
 
     const { data }: { data: PageData } = $props()
@@ -121,7 +121,7 @@
                     '@type': 'SoftwareApplication',
                     name: competitor.name,
                     applicationCategory: 'DeveloperApplication',
-                    ...(competitor.website ? { url: competitor.website } : {})
+                    ...(competitor.website ? { url: competitor.website }: {})
                 }
             ],
             keywords: competitor.keywords

src/lib/components/ExampleV2.svelte

@@ -169,7 +169,7 @@
     // split-shape object. The plain-string form becomes the accent span
     // with a trailing period — same default the homepage uses.
     const titleShape = $derived.by<TitleShape>(() =>
-        typeof title === 'string' ? { accent: title, end: '.' } : { end: '.', ...title }
+        typeof title === 'string' ? { accent: title, end: '.' }: { end: '.', ...title }
     )
 
     // Derive the file name from the source URL when the consumer

src/lib/components/Footer.svelte

@@ -3,9 +3,9 @@
     import HeartIcon from '@lucide/svelte/icons/heart'
     import { MotionSpan } from '@humanspeak/svelte-motion'
 
-    const { extra } = $props<{
+    const { extra }: {
         extra?: Snippet
-    }>()
+    } = $props()
 </script>
 
 <footer

src/lib/components/FooterV2.svelte

@@ -16,12 +16,12 @@
         license = 'MIT',
         version,
         year = new Date().getFullYear()
-    } = $props<{
+    }: {
         extra?: Snippet
         license?: string
         version?: string
         year?: number
-    }>()
+    } = $props()
 </script>
 
 <footer class="dk-footer-v2 border-t border-border bg-background text-foreground">