progress

website/src/lib/components/docs/DocsContainer.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
-    export let module;
+    import type { Component } from 'svelte';
+
+    let { module: Module }: { module: Component } = $props();
 </script>
 
 <div class="markdown flex flex-col gap-3">
-    <svelte:component this={module} />
+    <Module />
 </div>
 
 <style lang="postcss">
+    @reference "../../../app.css";
+
     :global(.markdown) {
         @apply text-muted-foreground;
     }

website/src/lib/components/docs/DocsImage.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
-    export let src: 'getting-started/interface' | 'tools/routing' | 'tools/split';
-    export let alt: string;
+    let {
+        src,
+        alt,
+    }: {
+        src: 'getting-started/interface' | 'tools/routing' | 'tools/split';
+        alt: string;
+    } = $props();
 </script>
 
 <div class="flex flex-col items-center py-6 w-full">

website/src/lib/components/docs/DocsNote.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-    export let type: 'note' | 'warning' = 'note';
+    import type { Snippet } from 'svelte';
+
+    let { type = 'note', children }: { type?: 'note' | 'warning'; children: Snippet } = $props();
 </script>
 
 <div
@@ -7,10 +9,12 @@
         ? 'border-link'
         : 'border-destructive'} p-2 text-sm rounded-md"
 >
-    <slot />
+    {@render children()}
 </div>
 
 <style lang="postcss">
+    @reference "../../../app.css";
+
     div :global(a) {
         @apply text-link;
         @apply hover:underline;

website/src/lib/components/docs/docs.ts

@@ -2,7 +2,6 @@ import {
     File,
     FilePen,
     View,
-    type Icon,
     Settings,
     Pencil,
     MapPin,
@@ -10,11 +9,12 @@ import {
     CalendarClock,
     Group,
     Ungroup,
-    Filter,
+    Funnel,
     SquareDashedMousePointer,
     MountainSnow,
-} from 'lucide-svelte';
-import type { ComponentType } from 'svelte';
+    type IconProps,
+} from '@lucide/svelte';
+import type { Component } from 'svelte';
 
 export const guides: Record<string, string[]> = {
     'getting-started': [],
@@ -37,7 +37,7 @@ export const guides: Record<string, string[]> = {
     faq: [],
 };
 
-export const guideIcons: Record<string, string | ComponentType<Icon>> = {
+export const guideIcons: Record<string, string | Component<IconProps>> = {
     'getting-started': '🚀',
     menu: '📂 ⚙️',
     file: File,
@@ -53,7 +53,7 @@ export const guideIcons: Record<string, string | ComponentType<Icon>> = {
     merge: Group,
     extract: Ungroup,
     elevation: MountainSnow,
-    minify: Filter,
+    minify: Funnel,
     clean: SquareDashedMousePointer,
     'map-controls': '🗺',
     gpx: '💾',