From 579e6c7724779190630c5c03b757ff2bb40a18fd Mon Sep 17 00:00:00 2001
From: WarningImHack3r <43064022+WarningImHack3r@users.noreply.github.com>
Date: Thu, 16 Jan 2025 23:32:03 +0100
Subject: [PATCH 1/8] Update shadcn-svelte config

---
 components.json    | 10 +++++---
 package.json       |  1 +
 pnpm-lock.yaml     | 12 ++++++++++
 src/app.pcss       |  2 ++
 src/lib/utils.ts   | 58 +---------------------------------------------
 tailwind.config.ts | 39 +++++++++++++++++++++++++++----
 6 files changed, 58 insertions(+), 64 deletions(-)

diff --git a/components.json b/components.json
index 8250277..ac2f0ef 100644
--- a/components.json
+++ b/components.json
@@ -1,5 +1,5 @@
 {
-	"$schema": "https://shadcn-svelte.com/schema.json",
+	"$schema": "https://next.shadcn-svelte.com/schema.json",
 	"style": "default",
 	"tailwind": {
 		"config": "tailwind.config.ts",
@@ -8,6 +8,10 @@
 	},
 	"aliases": {
 		"components": "$lib/components",
-		"utils": "$lib/utils"
-	}
+		"utils": "$lib/utils",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/hooks"
+	},
+	"typescript": true,
+	"registry": "https://next.shadcn-svelte.com/registry"
 }
diff --git a/package.json b/package.json
index 15bbc50..0f328a5 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
 		"tailwind-variants": "^0.3.0",
 		"tailwindcss": "^3.4.17",
 		"tailwindcss-3d": "^1.0.7",
+		"tailwindcss-animate": "^1.0.7",
 		"tslib": "^2.8.1",
 		"typescript": "^5.7.3",
 		"typescript-eslint": "^8.20.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f629357..63b9570 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -107,6 +107,9 @@ importers:
       tailwindcss-3d:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.17)
+      tailwindcss-animate:
+        specifier: ^1.0.7
+        version: 1.0.7(tailwindcss@3.4.17)
       tslib:
         specifier: ^2.8.1
         version: 2.8.1
@@ -2297,6 +2300,11 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.2.0'
 
+  tailwindcss-animate@1.0.7:
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+
   tailwindcss@3.4.17:
     resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
     engines: {node: '>=14.0.0'}
@@ -4601,6 +4609,10 @@ snapshots:
       lodash: 4.17.21
       tailwindcss: 3.4.17
 
+  tailwindcss-animate@1.0.7(tailwindcss@3.4.17):
+    dependencies:
+      tailwindcss: 3.4.17
+
   tailwindcss@3.4.17:
     dependencies:
       '@alloc/quick-lru': 5.2.0
diff --git a/src/app.pcss b/src/app.pcss
index a961af6..20feda1 100644
--- a/src/app.pcss
+++ b/src/app.pcss
@@ -25,6 +25,7 @@
 		--ring: 142.1 76.2% 36.3%;
 		--radius: 0.5rem;
 	}
+
 	.dark {
 		--background: 20 14.3% 4.1%;
 		--foreground: 0 0% 95%;
@@ -56,6 +57,7 @@
 	* {
 		@apply border-border;
 	}
+
 	body {
 		@apply bg-background text-foreground;
 	}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 230a1fb..ac680b3 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,62 +1,6 @@
 import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-import { cubicOut } from "svelte/easing";
-import type { TransitionConfig } from "svelte/transition";
 
 export function cn(...inputs: ClassValue[]) {
-    return twMerge(clsx(inputs));
+	return twMerge(clsx(inputs));
 }
-
-type FlyAndScaleParams = {
-    y?: number;
-    x?: number;
-    start?: number;
-    duration?: number;
-};
-
-export const flyAndScale = (
-    node: Element,
-    params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
-): TransitionConfig => {
-    const style = getComputedStyle(node);
-    const transform = style.transform === "none" ? "" : style.transform;
-
-    const scaleConversion = (
-        valueA: number,
-        scaleA: [number, number],
-        scaleB: [number, number]
-    ) => {
-        const [minA, maxA] = scaleA;
-        const [minB, maxB] = scaleB;
-
-        const percentage = (valueA - minA) / (maxA - minA);
-        const valueB = percentage * (maxB - minB) + minB;
-
-        return valueB;
-    };
-
-    const styleToString = (
-        style: Record<string, number | string | undefined>
-    ): string => {
-        return Object.keys(style).reduce((str, key) => {
-            if (style[key] === undefined) return str;
-            return str + `${key}:${style[key]};`;
-        }, "");
-    };
-
-    return {
-        duration: params.duration ?? 200,
-        delay: 0,
-        css: (t) => {
-            const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
-            const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
-            const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
-
-            return styleToString({
-                transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
-                opacity: t
-            });
-        },
-        easing: cubicOut
-    };
-};
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 08b00bc..8825ade 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,6 +1,7 @@
 import type { Config } from "tailwindcss";
-import { fontFamily, screens } from "tailwindcss/defaultTheme";
+import defaultTheme from "tailwindcss/defaultTheme";
 import tailwindCss3d from "tailwindcss-3d";
+import tailwindcssAnimate from "tailwindcss-animate";
 
 export default {
 	darkMode: ["class"],
@@ -16,7 +17,7 @@ export default {
 		},
 		screens: {
 			xs: "475px",
-			...screens
+			...defaultTheme.screens
 		},
 		extend: {
 			colors: {
@@ -52,19 +53,49 @@ export default {
 				card: {
 					DEFAULT: "hsl(var(--card) / <alpha-value>)",
 					foreground: "hsl(var(--card-foreground) / <alpha-value>)"
+				},
+				sidebar: {
+					DEFAULT: "hsl(var(--sidebar-background))",
+					foreground: "hsl(var(--sidebar-foreground))",
+					primary: "hsl(var(--sidebar-primary))",
+					"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+					accent: "hsl(var(--sidebar-accent))",
+					"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+					border: "hsl(var(--sidebar-border))",
+					ring: "hsl(var(--sidebar-ring))"
 				}
 			},
 			borderRadius: {
+				xl: "calc(var(--radius) + 4px)",
 				lg: "var(--radius)",
 				md: "calc(var(--radius) - 2px)",
 				sm: "calc(var(--radius) - 4px)"
 			},
 			fontFamily: {
-				sans: [...fontFamily.sans]
+				sans: [...defaultTheme.fontFamily.sans]
+			},
+			keyframes: {
+				"accordion-down": {
+					from: { height: "0" },
+					to: { height: "var(--bits-accordion-content-height)" }
+				},
+				"accordion-up": {
+					from: { height: "var(--bits-accordion-content-height)" },
+					to: { height: "0" }
+				},
+				"caret-blink": {
+					"0%,70%,100%": { opacity: "1" },
+					"20%,50%": { opacity: "0" }
+				}
+			},
+			animation: {
+				"accordion-down": "accordion-down 0.2s ease-out",
+				"accordion-up": "accordion-up 0.2s ease-out",
+				"caret-blink": "caret-blink 1.25s ease-out infinite"
 			}
 		}
 	},
-	plugins: [tailwindCss3d],
+	plugins: [tailwindcssAnimate, tailwindCss3d],
 	future: {
 		hoverOnlyWhenSupported: true
 	}

From 82e47e017eaba4354956dfb85db9f66e06dea7f7 Mon Sep 17 00:00:00 2001
From: WarningImHack3r <43064022+WarningImHack3r@users.noreply.github.com>
Date: Thu, 16 Jan 2025 23:35:17 +0100
Subject: [PATCH 2/8] Finish shadcn-svelte upgrade

---
 package.json                                  |   4 +-
 pnpm-lock.yaml                                | 212 ++++++------------
 .../alert-dialog/alert-dialog-action.svelte   |  20 +-
 .../alert-dialog/alert-dialog-cancel.svelte   |  20 +-
 .../alert-dialog/alert-dialog-content.svelte  |  38 ++--
 .../alert-dialog-description.svelte           |  16 +-
 .../alert-dialog/alert-dialog-footer.svelte   |  16 +-
 .../alert-dialog/alert-dialog-header.svelte   |  19 +-
 .../alert-dialog/alert-dialog-overlay.svelte  |  24 +-
 .../ui/alert-dialog/alert-dialog-title.svelte |  20 +-
 src/lib/components/ui/alert-dialog/index.ts   |   3 +-
 src/lib/components/ui/button/button.svelte    |  89 ++++++--
 src/lib/components/ui/button/index.ts         |  52 +----
 .../components/ui/card/card-content.svelte    |  15 +-
 .../ui/card/card-description.svelte           |  15 +-
 src/lib/components/ui/card/card-footer.svelte |  15 +-
 src/lib/components/ui/card/card-header.svelte |  15 +-
 src/lib/components/ui/card/card-title.svelte  |  32 +--
 src/lib/components/ui/card/card.svelte        |  16 +-
 src/lib/components/ui/card/index.ts           |   2 -
 .../components/ui/checkbox/checkbox.svelte    |  42 ++--
 .../ui/command/command-dialog.svelte          |  38 ++--
 .../ui/command/command-empty.svelte           |  14 +-
 .../ui/command/command-group.svelte           |  31 ++-
 .../ui/command/command-input.svelte           |  22 +-
 .../components/ui/command/command-item.svelte |  25 +--
 .../ui/command/command-link-item.svelte       |  19 ++
 .../components/ui/command/command-list.svelte |  17 +-
 .../ui/command/command-separator.svelte       |  12 +-
 .../ui/command/command-shortcut.svelte        |  16 +-
 src/lib/components/ui/command/command.svelte  |  21 +-
 src/lib/components/ui/command/index.ts        |   5 +-
 .../ui/dialog/dialog-content.svelte           |  38 ++--
 .../ui/dialog/dialog-description.svelte       |  16 +-
 .../components/ui/dialog/dialog-footer.svelte |  16 +-
 .../components/ui/dialog/dialog-header.svelte |  19 +-
 .../ui/dialog/dialog-overlay.svelte           |  24 +-
 .../components/ui/dialog/dialog-title.svelte  |  16 +-
 src/lib/components/ui/dialog/index.ts         |   2 +-
 .../dropdown-menu-checkbox-item.svelte        |  47 ++--
 .../dropdown-menu-content.svelte              |  43 ++--
 .../dropdown-menu-group-heading.svelte        |  19 ++
 .../dropdown-menu/dropdown-menu-item.svelte   |  32 +--
 .../dropdown-menu/dropdown-menu-label.svelte  |  26 ++-
 .../dropdown-menu-radio-item.svelte           |  39 ++--
 .../dropdown-menu-separator.svelte            |  12 +-
 .../dropdown-menu-shortcut.svelte             |  19 +-
 .../dropdown-menu-sub-content.svelte          |  29 +--
 .../dropdown-menu-sub-trigger.svelte          |  30 ++-
 src/lib/components/ui/dropdown-menu/index.ts  |  52 ++---
 src/lib/components/ui/input/index.ts          |  22 --
 src/lib/components/ui/input/input.svelte      |  40 +---
 src/lib/components/ui/label/label.svelte      |  18 +-
 .../ui/pagination/pagination-content.svelte   |  15 +-
 .../ui/pagination/pagination-ellipsis.svelte  |  19 +-
 .../ui/pagination/pagination-item.svelte      |  17 +-
 .../ui/pagination/pagination-link.svelte      |  36 +--
 .../pagination/pagination-next-button.svelte  |  44 ++--
 .../pagination/pagination-prev-button.svelte  |  44 ++--
 .../ui/pagination/pagination.svelte           |  34 ++-
 .../ui/popover/popover-content.svelte         |  40 ++--
 .../components/ui/separator/separator.svelte  |  16 +-
 .../components/ui/skeleton/skeleton.svelte    |  16 +-
 src/lib/components/ui/slider/slider.svelte    |  43 ++--
 src/lib/components/ui/sonner/sonner.svelte    |   4 +-
 src/lib/components/ui/table/table-body.svelte |  15 +-
 .../components/ui/table/table-caption.svelte  |  15 +-
 src/lib/components/ui/table/table-cell.svelte |  18 +-
 .../components/ui/table/table-footer.svelte   |  15 +-
 src/lib/components/ui/table/table-head.svelte |  16 +-
 .../components/ui/table/table-header.svelte   |  16 +-
 src/lib/components/ui/table/table-row.svelte  |  20 +-
 src/lib/components/ui/table/table.svelte      |  15 +-
 .../components/ui/tabs/tabs-content.svelte    |  18 +-
 src/lib/components/ui/tabs/tabs-list.svelte   |  16 +-
 .../components/ui/tabs/tabs-trigger.svelte    |  20 +-
 src/lib/components/ui/tooltip/index.ts        |   3 +
 .../ui/tooltip/tooltip-content.svelte         |  29 +--
 78 files changed, 1014 insertions(+), 994 deletions(-)
 create mode 100644 src/lib/components/ui/command/command-link-item.svelte
 create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte

diff --git a/package.json b/package.json
index 0f328a5..ba2ddf9 100644
--- a/package.json
+++ b/package.json
@@ -25,9 +25,8 @@
 		"@unovis/svelte": "^1.5.0",
 		"@vercel/speed-insights": "^1.1.0",
 		"autoprefixer": "^10.4.20",
-		"bits-ui": "^0.22.0",
+		"bits-ui": "1.0.0-next.77",
 		"clsx": "^2.1.1",
-		"cmdk-sv": "^0.0.18",
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^2.46.1",
@@ -44,7 +43,6 @@
 		"svelte": "^5.18.0",
 		"svelte-check": "^4.1.4",
 		"svelte-dnd-action": "^0.9.54",
-		"svelte-headless-table": "^0.18.3",
 		"svelte-sonner": "^0.3.28",
 		"tailwind-merge": "^2.6.0",
 		"tailwind-variants": "^0.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 63b9570..b43fe4f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -33,14 +33,11 @@ importers:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.5.1)
       bits-ui:
-        specifier: ^0.22.0
-        version: 0.22.0(svelte@5.18.0)
+        specifier: 1.0.0-next.77
+        version: 1.0.0-next.77(svelte@5.18.0)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
-      cmdk-sv:
-        specifier: ^0.0.18
-        version: 0.0.18(svelte@5.18.0)
       eslint:
         specifier: ^9.18.0
         version: 9.18.0(jiti@1.21.6)
@@ -89,9 +86,6 @@ importers:
       svelte-dnd-action:
         specifier: ^0.9.54
         version: 0.9.54(svelte@5.18.0)
-      svelte-headless-table:
-        specifier: ^0.18.3
-        version: 0.18.3(svelte@5.18.0)
       svelte-sonner:
         specifier: ^0.3.28
         version: 0.3.28(svelte@5.18.0)
@@ -382,14 +376,14 @@ packages:
     resolution: {integrity: sha512-lB05FkqEdUg2AA0xEbUz0SnkXT1LcCTa438W4IWTUh4hdOnVbQyOJ81OrDXsJk/LSiJHubgGEFoR5EHq1NsH1A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@floating-ui/core@1.5.1':
-    resolution: {integrity: sha512-QgcKYwzcc8vvZ4n/5uklchy8KVdjJwcOeI+HnnTNclJjs2nYsy23DOCf+sSV1kBwD9yDAoVKCkv/gEPzgQU3Pw==}
+  '@floating-ui/core@1.6.9':
+    resolution: {integrity: sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==}
 
-  '@floating-ui/dom@1.5.3':
-    resolution: {integrity: sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==}
+  '@floating-ui/dom@1.6.13':
+    resolution: {integrity: sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==}
 
-  '@floating-ui/utils@0.1.6':
-    resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==}
+  '@floating-ui/utils@0.2.9':
+    resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
 
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
@@ -411,8 +405,8 @@ packages:
     resolution: {integrity: sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==}
     engines: {node: '>=18.18'}
 
-  '@internationalized/date@3.5.1':
-    resolution: {integrity: sha512-LUQIfwU9e+Fmutc/DpRTGXSdgYZLBegi4wygCWDSVmUdLTaMHsQyASDiJtREwanwKuQLq0hY76fCJ9J/9I2xOQ==}
+  '@internationalized/date@3.7.0':
+    resolution: {integrity: sha512-VJ5WS3fcVx0bejE/YHfbDKR/yawZgKqn/if+oEeLqNwBtPzVB06olkfcnojTmEMX+gTpH+FlQ69SHNitJ8/erQ==}
 
   '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
@@ -483,11 +477,6 @@ packages:
     resolution: {integrity: sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==}
     engines: {node: '>=6.0.0'}
 
-  '@melt-ui/svelte@0.76.2':
-    resolution: {integrity: sha512-7SbOa11tXUS95T3fReL+dwDs5FyJtCEqrqG3inRziDws346SYLsxOQ6HmX+4BkIsQh1R8U3XNa+EMmdMt38lMA==}
-    peerDependencies:
-      svelte: '>=3 <5'
-
   '@neoconfetti/svelte@2.2.1':
     resolution: {integrity: sha512-2Ts0Rxaf6clW2qG+AKhTwpl01AAyZEAe03XeuQ7Vp+qYIaM3ycuI94j546fmEkUxwACwGI3Zl2cZ/pncTuNcJg==}
 
@@ -631,9 +620,6 @@ packages:
   '@swc/helpers@0.5.12':
     resolution: {integrity: sha512-KMZNXiGibsW9kvZAO1Pam2JPTDBm+KSHMMHWdsyI/1DbIZjT2A6Gy3hblVXUMEDvUAKq+e0vL0X0o54owWji7g==}
 
-  '@swc/helpers@0.5.8':
-    resolution: {integrity: sha512-lruDGw3pnfM3wmZHeW7JuhkGQaJjPyiKjxeGhdmfoOT53Ic9qb5JLDNaK2HUdl1zLDeX28H221UvKjfdvSLVMg==}
-
   '@total-typescript/ts-reset@0.6.1':
     resolution: {integrity: sha512-cka47fVSo6lfQDIATYqb/vO1nvFfbPw7uWLayIXIhGETj0wcOOlrlkobOMDNQOFr9QOafegUPq13V2+6vtD7yg==}
 
@@ -982,15 +968,11 @@ packages:
   bindings@1.5.0:
     resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
 
-  bits-ui@0.21.16:
-    resolution: {integrity: sha512-XFZ7/bK7j/K+5iktxX/ZpmoFHjYjpPzP5EOO/4bWiaFg5TG1iMcfjDhlBTQnJxD6BoVoHuqeZPHZvaTgF4Iv3Q==}
-    peerDependencies:
-      svelte: ^4.0.0 || ^5.0.0-next.118
-
-  bits-ui@0.22.0:
-    resolution: {integrity: sha512-r7Fw1HNgA4YxZBRcozl7oP0bheQ8EHh+kfMBZJgyFISix8t4p/nqDcHLmBgIiJ3T5XjYnJRorYDjIWaCfhb5fw==}
+  bits-ui@1.0.0-next.77:
+    resolution: {integrity: sha512-IV0AyVEvsRkXv4s/fl4iea5E9W2b9EBf98s9mRMKMc1xHxM9MmtM2r6MZMqftHQ/c+gHTIt3A9EKuTlh7uay8w==}
+    engines: {node: '>=18', pnpm: '>=8.7.0'}
     peerDependencies:
-      svelte: ^4.0.0 || ^5.0.0
+      svelte: ^5.11.0
 
   brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
@@ -1042,11 +1024,6 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
-  cmdk-sv@0.0.18:
-    resolution: {integrity: sha512-istixiQSy9Ez/mQ4VXWB69btqNyDZckbd1XFEwR46Vw+n5zjdmvoWAcOTj0uX3FZXtw9ikwLVmfoW2nwwMClRg==}
-    peerDependencies:
-      svelte: ^4.0.0 || ^5.0.0-next.1
-
   color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
 
@@ -1282,10 +1259,6 @@ packages:
   delaunator@5.0.1:
     resolution: {integrity: sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==}
 
-  dequal@2.0.3:
-    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
-    engines: {node: '>=6'}
-
   detect-libc@2.0.2:
     resolution: {integrity: sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==}
     engines: {node: '>=8'}
@@ -1467,9 +1440,6 @@ packages:
   flatted@3.2.9:
     resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
 
-  focus-trap@7.5.4:
-    resolution: {integrity: sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==}
-
   foreground-child@3.3.0:
     resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==}
     engines: {node: '>=14'}
@@ -1595,6 +1565,9 @@ packages:
   ini@1.3.8:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
 
+  inline-style-parser@0.2.4:
+    resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==}
+
   internmap@1.0.1:
     resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==}
 
@@ -1793,16 +1766,6 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  nanoid@5.0.6:
-    resolution: {integrity: sha512-rRq0eMHoGZxlvaFOUdK1Ev83Bd1IgzzR+WJ3IbDJ7QOSdAxYjlurSPqFs9s4lJg29RT6nPwizFtJhQS6V5xgiA==}
-    engines: {node: ^18 || >=20}
-    hasBin: true
-
-  nanoid@5.0.7:
-    resolution: {integrity: sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==}
-    engines: {node: ^18 || >=20}
-    hasBin: true
-
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
@@ -2144,6 +2107,16 @@ packages:
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
+  runed@0.20.0:
+    resolution: {integrity: sha512-YqPxaUdWL5nUXuSF+/v8a+NkVN8TGyEGbQwTA25fLY35MR/2bvZ1c6sCbudoo1kT4CAJPh4kUkcgGVxW127WKw==}
+    peerDependencies:
+      svelte: ^5.7.0
+
+  runed@0.22.0:
+    resolution: {integrity: sha512-ZWVXWhOr0P5xdNgtviz6D1ivLUDWKLCbeC5SUEJ3zBkqLReVqWHenFxMNFeFaiC5bfxhFxyxzyzB+98uYFtwdA==}
+    peerDependencies:
+      svelte: ^5.7.0
+
   rw@1.3.3:
     resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
 
@@ -2209,6 +2182,9 @@ packages:
   striptags@3.2.0:
     resolution: {integrity: sha512-g45ZOGzHDMe2bdYMdIvdAfCQkCTDMGBazSw1ypMowwGIee7ZQ5dU0rBJ8Jqgl+jAKIv4dbeE1jscZq9wid1Tkw==}
 
+  style-to-object@1.0.8:
+    resolution: {integrity: sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==}
+
   stylis@4.2.0:
     resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
 
@@ -2254,38 +2230,21 @@ packages:
       svelte:
         optional: true
 
-  svelte-headless-table@0.18.3:
-    resolution: {integrity: sha512-1zVnqXW0dvn6ZceYa94k+ziK+w5Dj9nlWYTQGXBv2JhM0resj9w7CWpclZK1TJwAALfEeH4InPBPO87L5fr+nQ==}
-    peerDependencies:
-      svelte: ^4.0.0
-
-  svelte-keyed@2.0.0:
-    resolution: {integrity: sha512-7TeEn+QbJC2OJrHiuM0T8vMBkms3DNpTE+Ir+NtnVBnBMA78aL4f1ft9t0Hn/pBbD/TnIXi4YfjFRAgtN+DZ5g==}
-    peerDependencies:
-      svelte: ^4.0.0
-
-  svelte-render@2.0.1:
-    resolution: {integrity: sha512-RpB0SurwXm4xhjvHHtjeqMmvd645FURb79GFOotScOSqnKK5vpqBgoBPGC0pp+E/eZgDSQ9rRAdn/+N4ys1mXQ==}
-    peerDependencies:
-      svelte: ^4.0.0
-
   svelte-sonner@0.3.28:
     resolution: {integrity: sha512-K3AmlySeFifF/cKgsYNv5uXqMVNln0NBAacOYgmkQStLa/UoU0LhfAACU6Gr+YYC8bOCHdVmFNoKuDbMEsppJg==}
     peerDependencies:
       svelte: ^3.0.0 || ^4.0.0 || ^5.0.0-next.1
 
-  svelte-subscribe@2.0.1:
-    resolution: {integrity: sha512-eKXIjLxB4C7eQWPqKEdxcGfNXm2g/qJ67zmEZK/GigCZMfrTR3m7DPY93R6MX+5uoqM1FRYxl8LZ1oy4URWi2A==}
+  svelte-toolbelt@0.7.0:
+    resolution: {integrity: sha512-i/Tv4NwAWWqJnK5H0F8y/ubDnogDYlwwyzKhrspTUFzrFuGnYshqd2g4/R43ds841wmaFiSW/HsdsdWhPOlrAA==}
+    engines: {node: '>=18', pnpm: '>=8.7.0'}
     peerDependencies:
-      svelte: ^4.0.0
+      svelte: ^5.0.0
 
   svelte@5.18.0:
     resolution: {integrity: sha512-/Eb81lB8bVUxQPmkPVNBYrU9cZ544+9hE91ZUUXTMf7eWcGW84N1hS3gvv/XsUNOWLLg3IicXP2qa8W3KpTUHA==}
     engines: {node: '>=18'}
 
-  tabbable@6.2.0:
-    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
-
   tailwind-merge@2.6.0:
     resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
 
@@ -2705,16 +2664,16 @@ snapshots:
       '@eslint/core': 0.10.0
       levn: 0.4.1
 
-  '@floating-ui/core@1.5.1':
+  '@floating-ui/core@1.6.9':
     dependencies:
-      '@floating-ui/utils': 0.1.6
+      '@floating-ui/utils': 0.2.9
 
-  '@floating-ui/dom@1.5.3':
+  '@floating-ui/dom@1.6.13':
     dependencies:
-      '@floating-ui/core': 1.5.1
-      '@floating-ui/utils': 0.1.6
+      '@floating-ui/core': 1.6.9
+      '@floating-ui/utils': 0.2.9
 
-  '@floating-ui/utils@0.1.6': {}
+  '@floating-ui/utils@0.2.9': {}
 
   '@humanfs/core@0.19.1': {}
 
@@ -2729,9 +2688,9 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.1': {}
 
-  '@internationalized/date@3.5.1':
+  '@internationalized/date@3.7.0':
     dependencies:
-      '@swc/helpers': 0.5.8
+      '@swc/helpers': 0.5.12
 
   '@isaacs/cliui@8.0.2':
     dependencies:
@@ -2807,16 +2766,6 @@ snapshots:
 
   '@mapbox/whoots-js@3.1.0': {}
 
-  '@melt-ui/svelte@0.76.2(svelte@5.18.0)':
-    dependencies:
-      '@floating-ui/core': 1.5.1
-      '@floating-ui/dom': 1.5.3
-      '@internationalized/date': 3.5.1
-      dequal: 2.0.3
-      focus-trap: 7.5.4
-      nanoid: 5.0.7
-      svelte: 5.18.0
-
   '@neoconfetti/svelte@2.2.1': {}
 
   '@nodelib/fs.scandir@2.1.5':
@@ -2946,10 +2895,6 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@swc/helpers@0.5.8':
-    dependencies:
-      tslib: 2.8.1
-
   '@total-typescript/ts-reset@0.6.1': {}
 
   '@types/cookie@0.6.0': {}
@@ -3372,19 +3317,15 @@ snapshots:
     dependencies:
       file-uri-to-path: 1.0.0
 
-  bits-ui@0.21.16(svelte@5.18.0):
+  bits-ui@1.0.0-next.77(svelte@5.18.0):
     dependencies:
-      '@internationalized/date': 3.5.1
-      '@melt-ui/svelte': 0.76.2(svelte@5.18.0)
-      nanoid: 5.0.6
-      svelte: 5.18.0
-
-  bits-ui@0.22.0(svelte@5.18.0):
-    dependencies:
-      '@internationalized/date': 3.5.1
-      '@melt-ui/svelte': 0.76.2(svelte@5.18.0)
-      nanoid: 5.0.7
+      '@floating-ui/core': 1.6.9
+      '@floating-ui/dom': 1.6.13
+      '@internationalized/date': 3.7.0
+      esm-env: 1.2.2
+      runed: 0.22.0(svelte@5.18.0)
       svelte: 5.18.0
+      svelte-toolbelt: 0.7.0(svelte@5.18.0)
 
   brace-expansion@1.1.11:
     dependencies:
@@ -3443,12 +3384,6 @@ snapshots:
 
   clsx@2.1.1: {}
 
-  cmdk-sv@0.0.18(svelte@5.18.0):
-    dependencies:
-      bits-ui: 0.21.16(svelte@5.18.0)
-      nanoid: 5.0.7
-      svelte: 5.18.0
-
   color-convert@1.9.3:
     dependencies:
       color-name: 1.1.3
@@ -3688,8 +3623,6 @@ snapshots:
     dependencies:
       robust-predicates: 3.0.2
 
-  dequal@2.0.3: {}
-
   detect-libc@2.0.2: {}
 
   devalue@5.1.1: {}
@@ -3909,10 +3842,6 @@ snapshots:
 
   flatted@3.2.9: {}
 
-  focus-trap@7.5.4:
-    dependencies:
-      tabbable: 6.2.0
-
   foreground-child@3.3.0:
     dependencies:
       cross-spawn: 7.0.6
@@ -4022,6 +3951,8 @@ snapshots:
 
   ini@1.3.8: {}
 
+  inline-style-parser@0.2.4: {}
+
   internmap@1.0.1: {}
 
   internmap@2.0.3: {}
@@ -4202,10 +4133,6 @@ snapshots:
 
   nanoid@3.3.8: {}
 
-  nanoid@5.0.6: {}
-
-  nanoid@5.0.7: {}
-
   natural-compare@1.4.0: {}
 
   node-fetch@2.7.0:
@@ -4447,6 +4374,16 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
+  runed@0.20.0(svelte@5.18.0):
+    dependencies:
+      esm-env: 1.2.2
+      svelte: 5.18.0
+
+  runed@0.22.0(svelte@5.18.0):
+    dependencies:
+      esm-env: 1.2.2
+      svelte: 5.18.0
+
   rw@1.3.3: {}
 
   sade@1.8.1:
@@ -4501,6 +4438,10 @@ snapshots:
 
   striptags@3.2.0: {}
 
+  style-to-object@1.0.8:
+    dependencies:
+      inline-style-parser: 0.2.4
+
   stylis@4.2.0: {}
 
   sucrase@3.35.0:
@@ -4553,28 +4494,15 @@ snapshots:
     optionalDependencies:
       svelte: 5.18.0
 
-  svelte-headless-table@0.18.3(svelte@5.18.0):
-    dependencies:
-      svelte: 5.18.0
-      svelte-keyed: 2.0.0(svelte@5.18.0)
-      svelte-render: 2.0.1(svelte@5.18.0)
-      svelte-subscribe: 2.0.1(svelte@5.18.0)
-
-  svelte-keyed@2.0.0(svelte@5.18.0):
-    dependencies:
-      svelte: 5.18.0
-
-  svelte-render@2.0.1(svelte@5.18.0):
-    dependencies:
-      svelte: 5.18.0
-      svelte-subscribe: 2.0.1(svelte@5.18.0)
-
   svelte-sonner@0.3.28(svelte@5.18.0):
     dependencies:
       svelte: 5.18.0
 
-  svelte-subscribe@2.0.1(svelte@5.18.0):
+  svelte-toolbelt@0.7.0(svelte@5.18.0):
     dependencies:
+      clsx: 2.1.1
+      runed: 0.20.0(svelte@5.18.0)
+      style-to-object: 1.0.8
       svelte: 5.18.0
 
   svelte@5.18.0:
@@ -4594,8 +4522,6 @@ snapshots:
       magic-string: 0.30.11
       zimmerframe: 1.1.2
 
-  tabbable@6.2.0: {}
-
   tailwind-merge@2.6.0: {}
 
   tailwind-variants@0.3.0(tailwindcss@3.4.17):
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
index 57d643b..95ccd3b 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
@@ -3,19 +3,11 @@
 	import { buttonVariants } from "$lib/components/ui/button/index.js";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = AlertDialogPrimitive.ActionProps;
-	type $$Events = AlertDialogPrimitive.ActionEvents;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.ActionProps = $props();
 </script>
 
-<AlertDialogPrimitive.Action
-	class={cn(buttonVariants(), className)}
-	{...$$restProps}
-	on:click
-	on:keydown
-	let:builder
->
-	<slot {builder} />
-</AlertDialogPrimitive.Action>
+<AlertDialogPrimitive.Action bind:ref class={cn(buttonVariants(), className)} {...restProps} />
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
index ef0a953..7015a89 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
@@ -3,19 +3,15 @@
 	import { buttonVariants } from "$lib/components/ui/button/index.js";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = AlertDialogPrimitive.CancelProps;
-	type $$Events = AlertDialogPrimitive.CancelEvents;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.CancelProps = $props();
 </script>
 
 <AlertDialogPrimitive.Cancel
+	bind:ref
 	class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
-	{...$$restProps}
-	on:click
-	on:keydown
-	let:builder
->
-	<slot {builder} />
-</AlertDialogPrimitive.Cancel>
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
index 28ecc39..858b8bc 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
@@ -1,28 +1,26 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import * as AlertDialog from "./index.js";
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { AlertDialog as AlertDialogPrimitive, type WithoutChild } from "bits-ui";
+	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = AlertDialogPrimitive.ContentProps;
-
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		...restProps
+	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
+		portalProps?: AlertDialogPrimitive.PortalProps;
+	} = $props();
 </script>
 
-<AlertDialog.Portal>
-	<AlertDialog.Overlay />
+<AlertDialogPrimitive.Portal {...portalProps}>
+	<AlertDialogOverlay />
 	<AlertDialogPrimitive.Content
-		{transition}
-		{transitionConfig}
+		bind:ref
 		class={cn(
-			"bg-background fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg sm:rounded-lg md:w-full",
+			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
 			className
 		)}
-		{...$$restProps}
-	>
-		<slot />
-	</AlertDialogPrimitive.Content>
-</AlertDialog.Portal>
+		{...restProps}
+	/>
+</AlertDialogPrimitive.Portal>
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
index f35ac20..3e136da 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
@@ -2,15 +2,15 @@
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = AlertDialogPrimitive.DescriptionProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.DescriptionProps = $props();
 </script>
 
 <AlertDialogPrimitive.Description
+	bind:ref
 	class={cn("text-muted-foreground text-sm", className)}
-	{...$$restProps}
->
-	<slot />
-</AlertDialogPrimitive.Description>
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
index a235d1f..91ecaba 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
@@ -1,16 +1,20 @@
 <script lang="ts">
+	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
+	bind:this={ref}
 	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
-	{...$$restProps}
+	{...restProps}
 >
-	<slot />
+	{@render children?.()}
 </div>
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
index 2650ef9..44a7b08 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
@@ -1,13 +1,20 @@
 <script lang="ts">
+	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...$$restProps}>
-	<slot />
+<div
+	bind:this={ref}
+	class={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+	{...restProps}
+>
+	{@render children?.()}
 </div>
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
index edf4840..bb76e7a 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
@@ -1,21 +1,19 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { fade } from "svelte/transition";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = AlertDialogPrimitive.OverlayProps;
-
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = fade;
-	export let transitionConfig: $$Props["transitionConfig"] = {
-		duration: 150,
-	};
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.OverlayProps = $props();
 </script>
 
 <AlertDialogPrimitive.Overlay
-	{transition}
-	{transitionConfig}
-	class={cn("bg-background/80 fixed inset-0 z-50 backdrop-blur-sm ", className)}
-	{...$$restProps}
+	bind:ref
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+		className
+	)}
+	{...restProps}
 />
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
index 7f98004..c7811db 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
@@ -2,13 +2,17 @@
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = AlertDialogPrimitive.TitleProps;
-
-	let className: $$Props["class"] = undefined;
-	export let level: $$Props["level"] = "h3";
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		...restProps
+	}: AlertDialogPrimitive.TitleProps = $props();
 </script>
 
-<AlertDialogPrimitive.Title class={cn("text-lg font-semibold", className)} {level} {...$$restProps}>
-	<slot />
-</AlertDialogPrimitive.Title>
+<AlertDialogPrimitive.Title
+	bind:ref
+	class={cn("text-lg font-semibold", className)}
+	{level}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/alert-dialog/index.ts b/src/lib/components/ui/alert-dialog/index.ts
index be56dd7..d06201d 100644
--- a/src/lib/components/ui/alert-dialog/index.ts
+++ b/src/lib/components/ui/alert-dialog/index.ts
@@ -1,9 +1,7 @@
 import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-
 import Title from "./alert-dialog-title.svelte";
 import Action from "./alert-dialog-action.svelte";
 import Cancel from "./alert-dialog-cancel.svelte";
-import Portal from "./alert-dialog-portal.svelte";
 import Footer from "./alert-dialog-footer.svelte";
 import Header from "./alert-dialog-header.svelte";
 import Overlay from "./alert-dialog-overlay.svelte";
@@ -12,6 +10,7 @@ import Description from "./alert-dialog-description.svelte";
 
 const Root = AlertDialogPrimitive.Root;
 const Trigger = AlertDialogPrimitive.Trigger;
+const Portal = AlertDialogPrimitive.Portal;
 
 export {
 	Root,
diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
index 86827f3..22ab2d0 100644
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@@ -1,25 +1,74 @@
+<script lang="ts" module>
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const buttonVariants = tv({
+		base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground hover:bg-primary/90",
+				destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+				outline:
+					"border-input bg-background hover:bg-accent hover:text-accent-foreground border",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-10 px-4 py-2",
+				sm: "h-9 rounded-md px-3",
+				lg: "h-11 rounded-md px-8",
+				icon: "h-10 w-10",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
+</script>
+
 <script lang="ts">
-	import { Button as ButtonPrimitive } from "bits-ui";
-	import { type Events, type Props, buttonVariants } from "./index.js";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = Props;
-	type $$Events = Events;
-
-	let className: $$Props["class"] = undefined;
-	export let variant: $$Props["variant"] = "default";
-	export let size: $$Props["size"] = "default";
-	export let builders: $$Props["builders"] = [];
-	export { className as class };
+	let {
+		class: className,
+		variant = "default",
+		size = "default",
+		ref = $bindable(null),
+		href = undefined,
+		type = "button",
+		children,
+		...restProps
+	}: ButtonProps = $props();
 </script>
 
-<ButtonPrimitive.Root
-	{builders}
-	class={cn(buttonVariants({ variant, size, className }))}
-	type="button"
-	{...$$restProps}
-	on:click
-	on:keydown
->
-	<slot />
-</ButtonPrimitive.Root>
+{#if href}
+	<a
+		bind:this={ref}
+		class={cn(buttonVariants({ variant, size }), className)}
+		{href}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}
diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts
index af1e188..fb585d7 100644
--- a/src/lib/components/ui/button/index.ts
+++ b/src/lib/components/ui/button/index.ts
@@ -1,49 +1,17 @@
-import { type VariantProps, tv } from "tailwind-variants";
-import type { Button as ButtonPrimitive } from "bits-ui";
-import Root from "./button.svelte";
-
-const buttonVariants = tv({
-	base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-	variants: {
-		variant: {
-			default: "bg-primary text-primary-foreground hover:bg-primary/90",
-			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-			outline:
-				"border-input bg-background hover:bg-accent hover:text-accent-foreground border",
-			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-			ghost: "hover:bg-accent hover:text-accent-foreground",
-			link: "text-primary underline-offset-4 hover:underline",
-		},
-		size: {
-			default: "h-10 px-4 py-2",
-			sm: "h-9 rounded-md px-3",
-			lg: "h-11 rounded-md px-8",
-			icon: "h-10 w-10",
-		},
-	},
-	defaultVariants: {
-		variant: "default",
-		size: "default",
-	},
-});
-
-type Variant = VariantProps<typeof buttonVariants>["variant"];
-type Size = VariantProps<typeof buttonVariants>["size"];
-
-type Props = ButtonPrimitive.Props & {
-	variant?: Variant;
-	size?: Size;
-};
-
-type Events = ButtonPrimitive.Events;
+import Root, {
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+	buttonVariants,
+} from "./button.svelte";
 
 export {
 	Root,
-	type Props,
-	type Events,
+	type ButtonProps as Props,
 	//
 	Root as Button,
-	type Props as ButtonProps,
-	type Events as ButtonEvents,
 	buttonVariants,
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
 };
diff --git a/src/lib/components/ui/card/card-content.svelte b/src/lib/components/ui/card/card-content.svelte
index 748c644..1f52856 100644
--- a/src/lib/components/ui/card/card-content.svelte
+++ b/src/lib/components/ui/card/card-content.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
+	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div class={cn("p-6", className)} {...$$restProps}>
-	<slot />
+<div bind:this={ref} class={cn("p-6", className)} {...restProps}>
+	{@render children?.()}
 </div>
diff --git a/src/lib/components/ui/card/card-description.svelte b/src/lib/components/ui/card/card-description.svelte
index f65821d..da02664 100644
--- a/src/lib/components/ui/card/card-description.svelte
+++ b/src/lib/components/ui/card/card-description.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
+	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLParagraphElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
 </script>
 
-<p class={cn("text-muted-foreground text-sm", className)} {...$$restProps}>
-	<slot />
+<p bind:this={ref} class={cn("text-muted-foreground text-sm", className)} {...restProps}>
+	{@render children?.()}
 </p>
diff --git a/src/lib/components/ui/card/card-footer.svelte b/src/lib/components/ui/card/card-footer.svelte
index 32f90bb..6894149 100644
--- a/src/lib/components/ui/card/card-footer.svelte
+++ b/src/lib/components/ui/card/card-footer.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
+	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div class={cn("flex items-center p-6 pt-0", className)} {...$$restProps}>
-	<slot />
+<div bind:this={ref} class={cn("flex items-center p-6 pt-0", className)} {...restProps}>
+	{@render children?.()}
 </div>
diff --git a/src/lib/components/ui/card/card-header.svelte b/src/lib/components/ui/card/card-header.svelte
index 9c65185..1baa92c 100644
--- a/src/lib/components/ui/card/card-header.svelte
+++ b/src/lib/components/ui/card/card-header.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
+	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div class={cn("flex flex-col space-y-1.5 p-6 pb-0", className)} {...$$restProps}>
-	<slot />
+<div bind:this={ref} class={cn("flex flex-col space-y-1.5 p-6 pb-0", className)} {...restProps}>
+	{@render children?.()}
 </div>
diff --git a/src/lib/components/ui/card/card-title.svelte b/src/lib/components/ui/card/card-title.svelte
index 719808e..f7d59c1 100644
--- a/src/lib/components/ui/card/card-title.svelte
+++ b/src/lib/components/ui/card/card-title.svelte
@@ -1,21 +1,25 @@
 <script lang="ts">
+	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { HeadingLevel } from "./index.js";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
-		tag?: HeadingLevel;
-	};
-
-	let className: $$Props["class"] = undefined;
-	export let tag: $$Props["tag"] = "h3";
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+	} = $props();
 </script>
 
-<svelte:element
-	this={tag}
-	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
-	{...$$restProps}
+<div
+	role="heading"
+	aria-level={level}
+	bind:this={ref}
+	class={cn("text-2xl font-semibold leading-none tracking-tight", className)}
+	{...restProps}
 >
-	<slot />
-</svelte:element>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/card.svelte b/src/lib/components/ui/card/card.svelte
index b69c15c..3e3a4ed 100644
--- a/src/lib/components/ui/card/card.svelte
+++ b/src/lib/components/ui/card/card.svelte
@@ -1,16 +1,20 @@
 <script lang="ts">
+	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
+	bind:this={ref}
 	class={cn("bg-card text-card-foreground rounded-lg border shadow-sm", className)}
-	{...$$restProps}
+	{...restProps}
 >
-	<slot />
+	{@render children?.()}
 </div>
diff --git a/src/lib/components/ui/card/index.ts b/src/lib/components/ui/card/index.ts
index bcc031d..0f9084d 100644
--- a/src/lib/components/ui/card/index.ts
+++ b/src/lib/components/ui/card/index.ts
@@ -20,5 +20,3 @@ export {
 	Header as CardHeader,
 	Title as CardTitle,
 };
-
-export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
diff --git a/src/lib/components/ui/checkbox/checkbox.svelte b/src/lib/components/ui/checkbox/checkbox.svelte
index f4b906f..79f9911 100644
--- a/src/lib/components/ui/checkbox/checkbox.svelte
+++ b/src/lib/components/ui/checkbox/checkbox.svelte
@@ -1,35 +1,35 @@
 <script lang="ts">
-	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from "bits-ui";
 	import Check from "lucide-svelte/icons/check";
 	import Minus from "lucide-svelte/icons/minus";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = CheckboxPrimitive.Props;
-	type $$Events = CheckboxPrimitive.Events;
-
-	let className: $$Props["class"] = undefined;
-	export let checked: $$Props["checked"] = false;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
 </script>
 
 <CheckboxPrimitive.Root
+	bind:ref
 	class={cn(
-		"border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content h-4 w-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+		"border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content size-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
 		className
 	)}
 	bind:checked
-	{...$$restProps}
-	on:click
+	bind:indeterminate
+	{...restProps}
 >
-	<CheckboxPrimitive.Indicator
-		class={cn("flex h-4 w-4 items-center justify-center text-current")}
-		let:isChecked
-		let:isIndeterminate
-	>
-		{#if isChecked}
-			<Check class="h-3.5 w-3.5" />
-		{:else if isIndeterminate}
-			<Minus class="h-3.5 w-3.5" />
-		{/if}
-	</CheckboxPrimitive.Indicator>
+	{#snippet children({ checked, indeterminate })}
+		<div class="flex size-4 items-center justify-center text-current">
+			{#if indeterminate}
+				<Minus class="size-3.5" />
+			{:else}
+				<Check class={cn("size-3.5", !checked && "text-transparent")} />
+			{/if}
+		</div>
+	{/snippet}
 </CheckboxPrimitive.Root>
diff --git a/src/lib/components/ui/command/command-dialog.svelte b/src/lib/components/ui/command/command-dialog.svelte
index 68398a8..ca9908f 100644
--- a/src/lib/components/ui/command/command-dialog.svelte
+++ b/src/lib/components/ui/command/command-dialog.svelte
@@ -1,23 +1,35 @@
 <script lang="ts">
-	import type { Dialog as DialogPrimitive } from "bits-ui";
-	import type { Command as CommandPrimitive } from "cmdk-sv";
+	import type {
+		Command as CommandPrimitive,
+		Dialog as DialogPrimitive,
+		WithoutChildrenOrChild,
+	} from "bits-ui";
+	import type { Snippet } from "svelte";
 	import Command from "./command.svelte";
 	import * as Dialog from "$lib/components/ui/dialog/index.js";
 
-	type $$Props = DialogPrimitive.Props & CommandPrimitive.CommandProps;
-
-	export let open: $$Props["open"] = false;
-	export let value: $$Props["value"] = undefined;
+	let {
+		open = $bindable(false),
+		ref = $bindable(null),
+		value = $bindable(""),
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
+		WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
+			portalProps?: DialogPrimitive.PortalProps;
+			children: Snippet;
+		} = $props();
 </script>
 
-<Dialog.Root bind:open {...$$restProps}>
-	<Dialog.Content class="overflow-hidden p-0 shadow-lg">
+<Dialog.Root bind:open {...restProps}>
+	<Dialog.Content class="overflow-hidden p-0 shadow-lg" {portalProps}>
 		<Command
-			class="[&_[data-cmdk-group-heading]]:text-muted-foreground [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group]:not([hidden])_~[data-cmdk-group]]:pt-0 [&_[data-cmdk-group]]:px-2 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5 [&_[data-cmdk-input]]:h-12 [&_[data-cmdk-item]]:px-2 [&_[data-cmdk-item]]:py-3 [&_[data-cmdk-item]_svg]:h-5 [&_[data-cmdk-item]_svg]:w-5"
-			{...$$restProps}
+			class="[&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-group]]:px-2 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
+			{...restProps}
 			bind:value
-		>
-			<slot />
-		</Command>
+			bind:ref
+			{children}
+		/>
 	</Dialog.Content>
 </Dialog.Root>
diff --git a/src/lib/components/ui/command/command-empty.svelte b/src/lib/components/ui/command/command-empty.svelte
index 3a0819d..5d86afe 100644
--- a/src/lib/components/ui/command/command-empty.svelte
+++ b/src/lib/components/ui/command/command-empty.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { Command as CommandPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = CommandPrimitive.EmptyProps;
-	let className: string | undefined | null = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.EmptyProps = $props();
 </script>
 
-<CommandPrimitive.Empty class={cn("py-6 text-center text-sm", className)} {...$$restProps}>
-	<slot />
-</CommandPrimitive.Empty>
+<CommandPrimitive.Empty class={cn("py-6 text-center text-sm", className)} {...restProps} />
diff --git a/src/lib/components/ui/command/command-group.svelte b/src/lib/components/ui/command/command-group.svelte
index 22f49a4..6feb450 100644
--- a/src/lib/components/ui/command/command-group.svelte
+++ b/src/lib/components/ui/command/command-group.svelte
@@ -1,18 +1,29 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { Command as CommandPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
-	type $$Props = CommandPrimitive.GroupProps;
 
-	let className: string | undefined | null = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		heading,
+		...restProps
+	}: CommandPrimitive.GroupProps & {
+		heading?: string;
+	} = $props();
 </script>
 
 <CommandPrimitive.Group
-	class={cn(
-		"text-foreground [&_[data-cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:py-1.5 [&_[data-cmdk-group-heading]]:text-xs [&_[data-cmdk-group-heading]]:font-medium",
-		className
-	)}
-	{...$$restProps}
+	class={cn("text-foreground overflow-hidden p-1", className)}
+	bind:ref
+	{...restProps}
 >
-	<slot />
+	{#if heading}
+		<CommandPrimitive.GroupHeading
+			class="text-muted-foreground px-2 py-1.5 text-xs font-medium"
+		>
+			{heading}
+		</CommandPrimitive.GroupHeading>
+	{/if}
+	<CommandPrimitive.GroupItems {children} />
 </CommandPrimitive.Group>
diff --git a/src/lib/components/ui/command/command-input.svelte b/src/lib/components/ui/command/command-input.svelte
index 3c50f23..5b356aa 100644
--- a/src/lib/components/ui/command/command-input.svelte
+++ b/src/lib/components/ui/command/command-input.svelte
@@ -1,23 +1,25 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { Command as CommandPrimitive } from "bits-ui";
 	import Search from "lucide-svelte/icons/search";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = CommandPrimitive.InputProps;
-
-	let className: string | undefined | null = undefined;
-	export { className as class };
-	export let value: string = "";
+	let {
+		ref = $bindable(null),
+		class: className,
+		value = $bindable(""),
+		...restProps
+	}: CommandPrimitive.InputProps = $props();
 </script>
 
-<div class="flex items-center border-b px-2" data-cmdk-input-wrapper="">
-	<Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+<div class="flex items-center border-b px-2" data-command-input-wrapper="">
+	<Search class="mr-2 size-4 shrink-0 opacity-50" />
 	<CommandPrimitive.Input
 		class={cn(
-			"placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
+			"placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-base outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 			className
 		)}
-		{...$$restProps}
+		bind:ref
+		{...restProps}
 		bind:value
 	/>
 </div>
diff --git a/src/lib/components/ui/command/command-item.svelte b/src/lib/components/ui/command/command-item.svelte
index a75acc8..3738ff2 100644
--- a/src/lib/components/ui/command/command-item.svelte
+++ b/src/lib/components/ui/command/command-item.svelte
@@ -1,24 +1,19 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { Command as CommandPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = CommandPrimitive.ItemProps;
-
-	export let asChild = false;
-
-	let className: string | undefined | null = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.ItemProps = $props();
 </script>
 
 <CommandPrimitive.Item
-	{asChild}
 	class={cn(
-		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 		className
 	)}
-	{...$$restProps}
-	let:action
-	let:attrs
->
-	<slot {action} {attrs} />
-</CommandPrimitive.Item>
+	bind:ref
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/command/command-link-item.svelte b/src/lib/components/ui/command/command-link-item.svelte
new file mode 100644
index 0000000..9bdded2
--- /dev/null
+++ b/src/lib/components/ui/command/command-link-item.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.LinkItemProps = $props();
+</script>
+
+<CommandPrimitive.LinkItem
+	class={cn(
+		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+	bind:ref
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/command/command-list.svelte b/src/lib/components/ui/command/command-list.svelte
index 8ceda03..4a07321 100644
--- a/src/lib/components/ui/command/command-list.svelte
+++ b/src/lib/components/ui/command/command-list.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { Command as CommandPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = CommandPrimitive.ListProps;
-	let className: string | undefined | null = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.ListProps = $props();
 </script>
 
 <CommandPrimitive.List
 	class={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-	{...$$restProps}
->
-	<slot />
-</CommandPrimitive.List>
+	{...restProps}
+	bind:ref
+/>
diff --git a/src/lib/components/ui/command/command-separator.svelte b/src/lib/components/ui/command/command-separator.svelte
index 71688b8..526777b 100644
--- a/src/lib/components/ui/command/command-separator.svelte
+++ b/src/lib/components/ui/command/command-separator.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { Command as CommandPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = CommandPrimitive.SeparatorProps;
-	let className: string | undefined | null = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.SeparatorProps = $props();
 </script>
 
-<CommandPrimitive.Separator class={cn("bg-border -mx-1 h-px", className)} {...$$restProps} />
+<CommandPrimitive.Separator class={cn("bg-border -mx-1 h-px", className)} bind:ref {...restProps} />
diff --git a/src/lib/components/ui/command/command-shortcut.svelte b/src/lib/components/ui/command/command-shortcut.svelte
index c89bd61..f09693d 100644
--- a/src/lib/components/ui/command/command-shortcut.svelte
+++ b/src/lib/components/ui/command/command-shortcut.svelte
@@ -1,16 +1,20 @@
 <script lang="ts">
+	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLSpanElement>;
-
-	let className: string | undefined | null = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
 </script>
 
 <span
+	bind:this={ref}
 	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
-	{...$$restProps}
+	{...restProps}
 >
-	<slot />
+	{@render children?.()}
 </span>
diff --git a/src/lib/components/ui/command/command.svelte b/src/lib/components/ui/command/command.svelte
index 3889696..feff690 100644
--- a/src/lib/components/ui/command/command.svelte
+++ b/src/lib/components/ui/command/command.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { Command as CommandPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = CommandPrimitive.CommandProps;
-
-	export let value: $$Props["value"] = undefined;
-
-	let className: string | undefined | null = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		class: className,
+		...restProps
+	}: CommandPrimitive.RootProps = $props();
 </script>
 
 <CommandPrimitive.Root
@@ -16,7 +16,6 @@
 		className
 	)}
 	bind:value
-	{...$$restProps}
->
-	<slot />
-</CommandPrimitive.Root>
+	bind:ref
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/command/index.ts b/src/lib/components/ui/command/index.ts
index d8a2e7c..d3dbade 100644
--- a/src/lib/components/ui/command/index.ts
+++ b/src/lib/components/ui/command/index.ts
@@ -1,4 +1,4 @@
-import { Command as CommandPrimitive } from "cmdk-sv";
+import { Command as CommandPrimitive } from "bits-ui";
 
 import Root from "./command.svelte";
 import Dialog from "./command-dialog.svelte";
@@ -9,6 +9,7 @@ import Input from "./command-input.svelte";
 import List from "./command-list.svelte";
 import Separator from "./command-separator.svelte";
 import Shortcut from "./command-shortcut.svelte";
+import LinkItem from "./command-link-item.svelte";
 
 const Loading = CommandPrimitive.Loading;
 
@@ -18,6 +19,7 @@ export {
 	Empty,
 	Group,
 	Item,
+	LinkItem,
 	Input,
 	List,
 	Separator,
@@ -29,6 +31,7 @@ export {
 	Empty as CommandEmpty,
 	Group as CommandGroup,
 	Item as CommandItem,
+	LinkItem as CommandLinkItem,
 	Input as CommandInput,
 	List as CommandList,
 	Separator as CommandSeparator,
diff --git a/src/lib/components/ui/dialog/dialog-content.svelte b/src/lib/components/ui/dialog/dialog-content.svelte
index a06ccb2..7e9868c 100644
--- a/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/src/lib/components/ui/dialog/dialog-content.svelte
@@ -1,35 +1,37 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { Dialog as DialogPrimitive, type WithoutChildrenOrChild } from "bits-ui";
 	import X from "lucide-svelte/icons/x";
+	import type { Snippet } from "svelte";
 	import * as Dialog from "./index.js";
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = DialogPrimitive.ContentProps;
-
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = {
-		duration: 200,
-	};
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		portalProps?: DialogPrimitive.PortalProps;
+		children: Snippet;
+	} = $props();
 </script>
 
-<Dialog.Portal>
+<Dialog.Portal {...portalProps}>
 	<Dialog.Overlay />
 	<DialogPrimitive.Content
-		{transition}
-		{transitionConfig}
+		bind:ref
 		class={cn(
-			"bg-background fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg sm:rounded-lg md:w-full",
+			"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] bg-background fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
 			className
 		)}
-		{...$$restProps}
+		{...restProps}
 	>
-		<slot />
+		{@render children?.()}
 		<DialogPrimitive.Close
-			class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
+			class="ring-offset-background focus:ring-ring absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
 		>
-			<X class="h-4 w-4" />
+			<X class="size-4" />
 			<span class="sr-only">Close</span>
 		</DialogPrimitive.Close>
 	</DialogPrimitive.Content>
diff --git a/src/lib/components/ui/dialog/dialog-description.svelte b/src/lib/components/ui/dialog/dialog-description.svelte
index 8bc70cc..bc048e4 100644
--- a/src/lib/components/ui/dialog/dialog-description.svelte
+++ b/src/lib/components/ui/dialog/dialog-description.svelte
@@ -2,15 +2,15 @@
 	import { Dialog as DialogPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = DialogPrimitive.DescriptionProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.DescriptionProps = $props();
 </script>
 
 <DialogPrimitive.Description
+	bind:ref
 	class={cn("text-muted-foreground text-sm", className)}
-	{...$$restProps}
->
-	<slot />
-</DialogPrimitive.Description>
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/dialog/dialog-footer.svelte b/src/lib/components/ui/dialog/dialog-footer.svelte
index a235d1f..91ecaba 100644
--- a/src/lib/components/ui/dialog/dialog-footer.svelte
+++ b/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -1,16 +1,20 @@
 <script lang="ts">
+	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
+	bind:this={ref}
 	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
-	{...$$restProps}
+	{...restProps}
 >
-	<slot />
+	{@render children?.()}
 </div>
diff --git a/src/lib/components/ui/dialog/dialog-header.svelte b/src/lib/components/ui/dialog/dialog-header.svelte
index 6b4448c..8d1abfc 100644
--- a/src/lib/components/ui/dialog/dialog-header.svelte
+++ b/src/lib/components/ui/dialog/dialog-header.svelte
@@ -1,13 +1,20 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...$$restProps}>
-	<slot />
+<div
+	bind:this={ref}
+	class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
+	{...restProps}
+>
+	{@render children?.()}
 </div>
diff --git a/src/lib/components/ui/dialog/dialog-overlay.svelte b/src/lib/components/ui/dialog/dialog-overlay.svelte
index 1d376e4..05c30ac 100644
--- a/src/lib/components/ui/dialog/dialog-overlay.svelte
+++ b/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -1,21 +1,19 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from "bits-ui";
-	import { fade } from "svelte/transition";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = DialogPrimitive.OverlayProps;
-
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = fade;
-	export let transitionConfig: $$Props["transitionConfig"] = {
-		duration: 150,
-	};
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
 </script>
 
 <DialogPrimitive.Overlay
-	{transition}
-	{transitionConfig}
-	class={cn("bg-background/80 fixed inset-0 z-50 backdrop-blur-sm", className)}
-	{...$$restProps}
+	bind:ref
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+		className
+	)}
+	{...restProps}
 />
diff --git a/src/lib/components/ui/dialog/dialog-title.svelte b/src/lib/components/ui/dialog/dialog-title.svelte
index 06574f3..9cf592c 100644
--- a/src/lib/components/ui/dialog/dialog-title.svelte
+++ b/src/lib/components/ui/dialog/dialog-title.svelte
@@ -2,15 +2,15 @@
 	import { Dialog as DialogPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = DialogPrimitive.TitleProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.TitleProps = $props();
 </script>
 
 <DialogPrimitive.Title
+	bind:ref
 	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
-	{...$$restProps}
->
-	<slot />
-</DialogPrimitive.Title>
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/dialog/index.ts b/src/lib/components/ui/dialog/index.ts
index b17ba5e..3286ab7 100644
--- a/src/lib/components/ui/dialog/index.ts
+++ b/src/lib/components/ui/dialog/index.ts
@@ -1,7 +1,6 @@
 import { Dialog as DialogPrimitive } from "bits-ui";
 
 import Title from "./dialog-title.svelte";
-import Portal from "./dialog-portal.svelte";
 import Footer from "./dialog-footer.svelte";
 import Header from "./dialog-header.svelte";
 import Overlay from "./dialog-overlay.svelte";
@@ -11,6 +10,7 @@ import Description from "./dialog-description.svelte";
 const Root = DialogPrimitive.Root;
 const Trigger = DialogPrimitive.Trigger;
 const Close = DialogPrimitive.Close;
+const Portal = DialogPrimitive.Portal;
 
 export {
 	Root,
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
index 6f1595f..20e3777 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -1,35 +1,40 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild } from "bits-ui";
 	import Check from "lucide-svelte/icons/check";
+	import Minus from "lucide-svelte/icons/minus";
 	import { cn } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
 
-	type $$Props = DropdownMenuPrimitive.CheckboxItemProps;
-	type $$Events = DropdownMenuPrimitive.CheckboxItemEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let checked: $$Props["checked"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		children: childrenProp,
+		...restProps
+	}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+		children?: Snippet;
+	} = $props();
 </script>
 
 <DropdownMenuPrimitive.CheckboxItem
+	bind:ref
 	bind:checked
+	bind:indeterminate
 	class={cn(
 		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 		className
 	)}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerdown
-	on:pointerleave
-	on:pointermove
+	{...restProps}
 >
-	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-		<DropdownMenuPrimitive.CheckboxIndicator>
-			<Check class="h-4 w-4" />
-		</DropdownMenuPrimitive.CheckboxIndicator>
-	</span>
-	<slot />
+	{#snippet children({ checked, indeterminate })}
+		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+			{#if indeterminate}
+				<Minus class="size-4" />
+			{:else}
+				<Check class={cn("size-4", !checked && "text-transparent")} />
+			{/if}
+		</span>
+		{@render childrenProp?.()}
+	{/snippet}
 </DropdownMenuPrimitive.CheckboxItem>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
index d6af313..fdbaa47 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -1,27 +1,26 @@
 <script lang="ts">
+	import { cn } from "$lib/utils.js";
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils.js";
 
-	type $$Props = DropdownMenuPrimitive.ContentProps;
-	type $$Events = DropdownMenuPrimitive.ContentEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let sideOffset: $$Props["sideOffset"] = 4;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		sideOffset = 4,
+		portalProps,
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.ContentProps & {
+		portalProps?: DropdownMenuPrimitive.PortalProps;
+	} = $props();
 </script>
 
-<DropdownMenuPrimitive.Content
-	{transition}
-	{transitionConfig}
-	{sideOffset}
-	class={cn(
-		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none",
-		className
-	)}
-	{...$$restProps}
-	on:keydown
->
-	<slot />
-</DropdownMenuPrimitive.Content>
+<DropdownMenuPrimitive.Portal {...portalProps}>
+	<DropdownMenuPrimitive.Content
+		bind:ref
+		{sideOffset}
+		class={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md outline-none",
+			className
+		)}
+		{...restProps}
+	/>
+</DropdownMenuPrimitive.Portal>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
new file mode 100644
index 0000000..84d5cca
--- /dev/null
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		...restProps
+	}: DropdownMenuPrimitive.GroupHeadingProps & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.GroupHeading
+	bind:ref
+	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
index c99fff2..70a5236 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -1,31 +1,23 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 
-	type $$Props = DropdownMenuPrimitive.ItemProps & {
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		...restProps
+	}: DropdownMenuPrimitive.ItemProps & {
 		inset?: boolean;
-	};
-	type $$Events = DropdownMenuPrimitive.ItemEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
-	export { className as class };
+	} = $props();
 </script>
 
 <DropdownMenuPrimitive.Item
+	bind:ref
 	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 		inset && "pl-8",
 		className
 	)}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerdown
-	on:pointerleave
-	on:pointermove
->
-	<slot />
-</DropdownMenuPrimitive.Item>
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
index 43f1527..9837d5a 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -1,19 +1,23 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
+	import { type WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
 
-	type $$Props = DropdownMenuPrimitive.LabelProps & {
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		inset?: boolean;
-	};
-
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
-	export { className as class };
+	} = $props();
 </script>
 
-<DropdownMenuPrimitive.Label
+<div
+	bind:this={ref}
 	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
-	{...$$restProps}
+	{...restProps}
 >
-	<slot />
-</DropdownMenuPrimitive.Label>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
index ea3c441..0f219da 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -1,35 +1,30 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { DropdownMenu as DropdownMenuPrimitive, type WithoutChild } from "bits-ui";
 	import Circle from "lucide-svelte/icons/circle";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = DropdownMenuPrimitive.RadioItemProps;
-	type $$Events = DropdownMenuPrimitive.RadioItemEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
 </script>
 
 <DropdownMenuPrimitive.RadioItem
+	bind:ref
 	class={cn(
 		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 		className
 	)}
-	{value}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerdown
-	on:pointerleave
-	on:pointermove
+	{...restProps}
 >
-	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-		<DropdownMenuPrimitive.RadioIndicator>
-			<Circle class="h-2 w-2 fill-current" />
-		</DropdownMenuPrimitive.RadioIndicator>
-	</span>
-	<slot />
+	{#snippet children({ checked })}
+		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+			{#if checked}
+				<Circle class="size-2 fill-current" />
+			{/if}
+		</span>
+		{@render childrenProp?.({ checked })}
+	{/snippet}
 </DropdownMenuPrimitive.RadioItem>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
index 8b16e03..32fac4b 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -2,13 +2,15 @@
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = DropdownMenuPrimitive.SeparatorProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.SeparatorProps = $props();
 </script>
 
 <DropdownMenuPrimitive.Separator
+	bind:ref
 	class={cn("bg-muted -mx-1 my-1 h-px", className)}
-	{...$$restProps}
+	{...restProps}
 />
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
index d8c7378..053e2a2 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -1,13 +1,20 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
+	import { type WithElementRef } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLSpanElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
 </script>
 
-<span class={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...$$restProps}>
-	<slot />
+<span
+	bind:this={ref}
+	class={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+	{...restProps}
+>
+	{@render children?.()}
 </span>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
index 034ed06..0bb6eea 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -1,30 +1,19 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = DropdownMenuPrimitive.SubContentProps;
-	type $$Events = DropdownMenuPrimitive.SubContentEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = {
-		x: -10,
-		y: 0,
-	};
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.SubContentProps = $props();
 </script>
 
 <DropdownMenuPrimitive.SubContent
-	{transition}
-	{transitionConfig}
+	bind:ref
 	class={cn(
 		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none",
 		className
 	)}
-	{...$$restProps}
-	on:keydown
-	on:focusout
-	on:pointermove
->
-	<slot />
-</DropdownMenuPrimitive.SubContent>
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
index 7f368ce..c2dcd32 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -3,30 +3,26 @@
 	import ChevronRight from "lucide-svelte/icons/chevron-right";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = DropdownMenuPrimitive.SubTriggerProps & {
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: DropdownMenuPrimitive.SubTriggerProps & {
 		inset?: boolean;
-	};
-	type $$Events = DropdownMenuPrimitive.SubTriggerEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
-	export { className as class };
+	} = $props();
 </script>
 
 <DropdownMenuPrimitive.SubTrigger
+	bind:ref
 	class={cn(
-		"data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+		"data-[highlighted]:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 		inset && "pl-8",
 		className
 	)}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerleave
-	on:pointermove
+	{...restProps}
 >
-	<slot />
-	<ChevronRight class="ml-auto h-4 w-4" />
+	{@render children?.()}
+	<ChevronRight class="ml-auto" />
 </DropdownMenuPrimitive.SubTrigger>
diff --git a/src/lib/components/ui/dropdown-menu/index.ts b/src/lib/components/ui/dropdown-menu/index.ts
index c1749e9..40c4502 100644
--- a/src/lib/components/ui/dropdown-menu/index.ts
+++ b/src/lib/components/ui/dropdown-menu/index.ts
@@ -1,48 +1,50 @@
 import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
+import Content from "./dropdown-menu-content.svelte";
+import GroupHeading from "./dropdown-menu-group-heading.svelte";
 import Item from "./dropdown-menu-item.svelte";
 import Label from "./dropdown-menu-label.svelte";
-import Content from "./dropdown-menu-content.svelte";
-import Shortcut from "./dropdown-menu-shortcut.svelte";
 import RadioItem from "./dropdown-menu-radio-item.svelte";
 import Separator from "./dropdown-menu-separator.svelte";
-import RadioGroup from "./dropdown-menu-radio-group.svelte";
+import Shortcut from "./dropdown-menu-shortcut.svelte";
 import SubContent from "./dropdown-menu-sub-content.svelte";
 import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
-import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
 
 const Sub = DropdownMenuPrimitive.Sub;
 const Root = DropdownMenuPrimitive.Root;
 const Trigger = DropdownMenuPrimitive.Trigger;
 const Group = DropdownMenuPrimitive.Group;
+const RadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 export {
-	Sub,
-	Root,
-	Item,
-	Label,
-	Group,
-	Trigger,
-	Content,
-	Shortcut,
-	Separator,
-	RadioItem,
-	SubContent,
-	SubTrigger,
-	RadioGroup,
 	CheckboxItem,
-	//
+	Content,
 	Root as DropdownMenu,
-	Sub as DropdownMenuSub,
+	CheckboxItem as DropdownMenuCheckboxItem,
+	Content as DropdownMenuContent,
+	Group as DropdownMenuGroup,
+	GroupHeading as DropdownMenuGroupHeading,
 	Item as DropdownMenuItem,
 	Label as DropdownMenuLabel,
-	Group as DropdownMenuGroup,
-	Content as DropdownMenuContent,
-	Trigger as DropdownMenuTrigger,
-	Shortcut as DropdownMenuShortcut,
+	RadioGroup as DropdownMenuRadioGroup,
 	RadioItem as DropdownMenuRadioItem,
 	Separator as DropdownMenuSeparator,
-	RadioGroup as DropdownMenuRadioGroup,
+	Shortcut as DropdownMenuShortcut,
+	Sub as DropdownMenuSub,
 	SubContent as DropdownMenuSubContent,
 	SubTrigger as DropdownMenuSubTrigger,
-	CheckboxItem as DropdownMenuCheckboxItem,
+	Trigger as DropdownMenuTrigger,
+	Group,
+	GroupHeading,
+	Item,
+	Label,
+	RadioGroup,
+	RadioItem,
+	Root,
+	Separator,
+	Shortcut,
+	Sub,
+	SubContent,
+	SubTrigger,
+	Trigger,
 };
diff --git a/src/lib/components/ui/input/index.ts b/src/lib/components/ui/input/index.ts
index 75e3bc2..f47b6d3 100644
--- a/src/lib/components/ui/input/index.ts
+++ b/src/lib/components/ui/input/index.ts
@@ -1,27 +1,5 @@
 import Root from "./input.svelte";
 
-export type FormInputEvent<T extends Event = Event> = T & {
-	currentTarget: EventTarget & HTMLInputElement;
-};
-export type InputEvents = {
-	blur: FormInputEvent<FocusEvent>;
-	change: FormInputEvent<Event>;
-	click: FormInputEvent<MouseEvent>;
-	focus: FormInputEvent<FocusEvent>;
-	focusin: FormInputEvent<FocusEvent>;
-	focusout: FormInputEvent<FocusEvent>;
-	keydown: FormInputEvent<KeyboardEvent>;
-	keypress: FormInputEvent<KeyboardEvent>;
-	keyup: FormInputEvent<KeyboardEvent>;
-	mouseover: FormInputEvent<MouseEvent>;
-	mouseenter: FormInputEvent<MouseEvent>;
-	mouseleave: FormInputEvent<MouseEvent>;
-	mousemove: FormInputEvent<MouseEvent>;
-	paste: FormInputEvent<ClipboardEvent>;
-	input: FormInputEvent<InputEvent>;
-	wheel: FormInputEvent<WheelEvent>;
-};
-
 export {
 	Root,
 	//
diff --git a/src/lib/components/ui/input/input.svelte b/src/lib/components/ui/input/input.svelte
index cab1457..328634f 100644
--- a/src/lib/components/ui/input/input.svelte
+++ b/src/lib/components/ui/input/input.svelte
@@ -1,42 +1,22 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from "svelte/elements";
-	import type { InputEvents } from "./index.js";
+	import type { WithElementRef } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLInputAttributes;
-	type $$Events = InputEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"] = undefined;
-	export { className as class };
-
-	// Workaround for https://github.com/sveltejs/svelte/issues/9305
-	// Fixed in Svelte 5, but not backported to 4.x.
-	export let readonly: $$Props["readonly"] = undefined;
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLInputAttributes> = $props();
 </script>
 
 <input
+	bind:this={ref}
 	class={cn(
-		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-base file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 		className
 	)}
 	bind:value
-	{readonly}
-	on:blur
-	on:change
-	on:click
-	on:focus
-	on:focusin
-	on:focusout
-	on:keydown
-	on:keypress
-	on:keyup
-	on:mouseover
-	on:mouseenter
-	on:mouseleave
-	on:mousemove
-	on:paste
-	on:input
-	on:wheel|passive
-	{...$$restProps}
+	{...restProps}
 />
diff --git a/src/lib/components/ui/label/label.svelte b/src/lib/components/ui/label/label.svelte
index 2a7d479..247d23c 100644
--- a/src/lib/components/ui/label/label.svelte
+++ b/src/lib/components/ui/label/label.svelte
@@ -2,20 +2,18 @@
 	import { Label as LabelPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = LabelPrimitive.Props;
-	type $$Events = LabelPrimitive.Events;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: LabelPrimitive.RootProps = $props();
 </script>
 
 <LabelPrimitive.Root
+	bind:ref
 	class={cn(
 		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 		className
 	)}
-	{...$$restProps}
-	on:mousedown
->
-	<slot />
-</LabelPrimitive.Root>
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/pagination/pagination-content.svelte b/src/lib/components/ui/pagination/pagination-content.svelte
index 9279558..6ba3cd3 100644
--- a/src/lib/components/ui/pagination/pagination-content.svelte
+++ b/src/lib/components/ui/pagination/pagination-content.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLUListElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props();
 </script>
 
-<ul class={cn("flex flex-row items-center gap-1", className)} {...$$restProps}>
-	<slot />
+<ul bind:this={ref} class={cn("flex flex-row items-center gap-1", className)} {...restProps}>
+	{@render children?.()}
 </ul>
diff --git a/src/lib/components/ui/pagination/pagination-ellipsis.svelte b/src/lib/components/ui/pagination/pagination-ellipsis.svelte
index e0fb97c..7cb7fb1 100644
--- a/src/lib/components/ui/pagination/pagination-ellipsis.svelte
+++ b/src/lib/components/ui/pagination/pagination-ellipsis.svelte
@@ -1,19 +1,22 @@
 <script lang="ts">
 	import Ellipsis from "lucide-svelte/icons/ellipsis";
+	import type { WithElementRef, WithoutChildren } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLSpanElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
 </script>
 
 <span
-	aria-hidden
-	class={cn("flex h-9 w-9 items-center justify-center", className)}
-	{...$$restProps}
+	bind:this={ref}
+	aria-hidden="true"
+	class={cn("flex size-9 items-center justify-center", className)}
+	{...restProps}
 >
-	<Ellipsis class="h-4 w-4" />
+	<Ellipsis class="size-4" />
 	<span class="sr-only">More pages</span>
 </span>
diff --git a/src/lib/components/ui/pagination/pagination-item.svelte b/src/lib/components/ui/pagination/pagination-item.svelte
index 009ad17..09c1076 100644
--- a/src/lib/components/ui/pagination/pagination-item.svelte
+++ b/src/lib/components/ui/pagination/pagination-item.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLLiAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
 
-	type $$Props = HTMLAttributes<HTMLLIElement>;
-	let className: $$Props["class"] = undefined;
-
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		children,
+		...restProps
+	}: WithElementRef<HTMLLiAttributes> = $props();
 </script>
 
-<li class={cn("", className)} {...$$restProps}>
-	<slot />
+<li bind:this={ref} {...restProps}>
+	{@render children?.()}
 </li>
diff --git a/src/lib/components/ui/pagination/pagination-link.svelte b/src/lib/components/ui/pagination/pagination-link.svelte
index 74dbc23..4a41b47 100644
--- a/src/lib/components/ui/pagination/pagination-link.svelte
+++ b/src/lib/components/ui/pagination/pagination-link.svelte
@@ -3,23 +3,27 @@
 	import { cn } from "$lib/utils.js";
 	import { type Props, buttonVariants } from "$lib/components/ui/button/index.js";
 
-	type $$Props = PaginationPrimitive.PageProps &
+	let {
+		ref = $bindable(null),
+		class: className,
+		size = "icon",
+		isActive = false,
+		page,
+		children,
+		...restProps
+	}: PaginationPrimitive.PageProps &
 		Props & {
 			isActive: boolean;
-		};
-
-	type $$Events = PaginationPrimitive.PageEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let page: $$Props["page"];
-	export let size: $$Props["size"] = "icon";
-	export let isActive: $$Props["isActive"] = false;
-
-	export { className as class };
+		} = $props();
 </script>
 
+{#snippet Fallback()}
+	{page.value}
+{/snippet}
+
 <PaginationPrimitive.Page
-	bind:page
+	bind:ref
+	{page}
 	class={cn(
 		buttonVariants({
 			variant: isActive ? "outline" : "ghost",
@@ -27,8 +31,6 @@
 		}),
 		className
 	)}
-	{...$$restProps}
-	on:click
->
-	<slot>{page.value}</slot>
-</PaginationPrimitive.Page>
+	children={children || Fallback}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/pagination/pagination-next-button.svelte b/src/lib/components/ui/pagination/pagination-next-button.svelte
index f9d6c13..a1c9692 100644
--- a/src/lib/components/ui/pagination/pagination-next-button.svelte
+++ b/src/lib/components/ui/pagination/pagination-next-button.svelte
@@ -1,27 +1,31 @@
 <script lang="ts">
 	import { Pagination as PaginationPrimitive } from "bits-ui";
 	import ChevronRight from "lucide-svelte/icons/chevron-right";
-	import { Button } from "$lib/components/ui/button/index.js";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = PaginationPrimitive.NextButtonProps;
-	type $$Events = PaginationPrimitive.NextButtonEvents;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: PaginationPrimitive.NextButtonProps = $props();
 </script>
 
-<PaginationPrimitive.NextButton asChild let:builder>
-	<Button
-		variant="ghost"
-		class={cn("gap-1 pr-2.5", className)}
-		builders={[builder]}
-		on:click
-		{...$$restProps}
-	>
-		<slot>
-			<span>Next</span>
-			<ChevronRight class="h-4 w-4" />
-		</slot>
-	</Button>
-</PaginationPrimitive.NextButton>
+{#snippet Fallback()}
+	<span>Next</span>
+	<ChevronRight class="size-4" />
+{/snippet}
+
+<PaginationPrimitive.NextButton
+	bind:ref
+	class={cn(
+		buttonVariants({
+			variant: "ghost",
+			class: "gap-1 pr-2.5",
+		}),
+		className
+	)}
+	children={children || Fallback}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/pagination/pagination-prev-button.svelte b/src/lib/components/ui/pagination/pagination-prev-button.svelte
index 411d2aa..0413148 100644
--- a/src/lib/components/ui/pagination/pagination-prev-button.svelte
+++ b/src/lib/components/ui/pagination/pagination-prev-button.svelte
@@ -1,27 +1,31 @@
 <script lang="ts">
 	import { Pagination as PaginationPrimitive } from "bits-ui";
 	import ChevronLeft from "lucide-svelte/icons/chevron-left";
-	import { Button } from "$lib/components/ui/button/index.js";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = PaginationPrimitive.PrevButtonProps;
-	type $$Events = PaginationPrimitive.PrevButtonEvents;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: PaginationPrimitive.PrevButtonProps = $props();
 </script>
 
-<PaginationPrimitive.PrevButton asChild let:builder>
-	<Button
-		variant="ghost"
-		class={cn("gap-1 pl-2.5", className)}
-		builders={[builder]}
-		on:click
-		{...$$restProps}
-	>
-		<slot>
-			<ChevronLeft class="h-4 w-4" />
-			<span>Previous</span>
-		</slot>
-	</Button>
-</PaginationPrimitive.PrevButton>
+{#snippet Fallback()}
+	<ChevronLeft class="size-4" />
+	<span>Previous</span>
+{/snippet}
+
+<PaginationPrimitive.PrevButton
+	bind:ref
+	class={cn(
+		buttonVariants({
+			variant: "ghost",
+			class: "gap-1 pl-2.5",
+		}),
+		className
+	)}
+	children={children || Fallback}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/pagination/pagination.svelte b/src/lib/components/ui/pagination/pagination.svelte
index 1cbcce3..4cdc9b1 100644
--- a/src/lib/components/ui/pagination/pagination.svelte
+++ b/src/lib/components/ui/pagination/pagination.svelte
@@ -3,31 +3,23 @@
 
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = PaginationPrimitive.Props;
-	type $$Events = PaginationPrimitive.Events;
-
-	let className: $$Props["class"] = undefined;
-	export let count: $$Props["count"] = 0;
-	export let perPage: $$Props["perPage"] = 10;
-	export let page: $$Props["page"] = 1;
-	export let siblingCount: $$Props["siblingCount"] = 1;
-	export { className as class };
-
-	$: currentPage = page;
+	let {
+		ref = $bindable(null),
+		class: className,
+		count = 0,
+		perPage = 10,
+		page = $bindable(1),
+		siblingCount = 1,
+		...restProps
+	}: PaginationPrimitive.RootProps = $props();
 </script>
 
 <PaginationPrimitive.Root
+	bind:ref
+	class={cn("mx-auto flex w-full flex-col items-center", className)}
 	{count}
 	{perPage}
 	{siblingCount}
 	bind:page
-	let:builder
-	let:pages
-	let:range
-	asChild
-	{...$$restProps}
->
-	<nav {...builder} class={cn("mx-auto flex w-full flex-col items-center", className)}>
-		<slot {pages} {range} {currentPage} />
-	</nav>
-</PaginationPrimitive.Root>
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/popover/popover-content.svelte b/src/lib/components/ui/popover/popover-content.svelte
index 1d86206..d2fbace 100644
--- a/src/lib/components/ui/popover/popover-content.svelte
+++ b/src/lib/components/ui/popover/popover-content.svelte
@@ -1,22 +1,28 @@
 <script lang="ts">
+	import { cn } from "$lib/utils.js";
 	import { Popover as PopoverPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils.js";
 
-	type $$Props = PopoverPrimitive.ContentProps;
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		align = "center",
+		portalProps,
+		...restProps
+	}: PopoverPrimitive.ContentProps & {
+		portalProps?: PopoverPrimitive.PortalProps;
+	} = $props();
 </script>
 
-<PopoverPrimitive.Content
-	{transition}
-	{transitionConfig}
-	class={cn(
-		"bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-none",
-		className
-	)}
-	{...$$restProps}
->
-	<slot />
-</PopoverPrimitive.Content>
+<PopoverPrimitive.Portal {...portalProps}>
+	<PopoverPrimitive.Content
+		bind:ref
+		{sideOffset}
+		{align}
+		class={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none",
+			className
+		)}
+		{...restProps}
+	/>
+</PopoverPrimitive.Portal>
diff --git a/src/lib/components/ui/separator/separator.svelte b/src/lib/components/ui/separator/separator.svelte
index aa61f69..839494d 100644
--- a/src/lib/components/ui/separator/separator.svelte
+++ b/src/lib/components/ui/separator/separator.svelte
@@ -2,21 +2,21 @@
 	import { Separator as SeparatorPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = SeparatorPrimitive.Props;
-
-	let className: $$Props["class"] = undefined;
-	export let orientation: $$Props["orientation"] = "horizontal";
-	export let decorative: $$Props["decorative"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "horizontal",
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
 </script>
 
 <SeparatorPrimitive.Root
+	bind:ref
 	class={cn(
 		"bg-border shrink-0",
 		orientation === "horizontal" ? "h-[1px] w-full" : "min-h-full w-[1px]",
 		className
 	)}
 	{orientation}
-	{decorative}
-	{...$$restProps}
+	{...restProps}
 />
diff --git a/src/lib/components/ui/skeleton/skeleton.svelte b/src/lib/components/ui/skeleton/skeleton.svelte
index 7e5d18b..4089b49 100644
--- a/src/lib/components/ui/skeleton/skeleton.svelte
+++ b/src/lib/components/ui/skeleton/skeleton.svelte
@@ -1,11 +1,17 @@
 <script lang="ts">
+	import type { WithElementRef, WithoutChildren } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
 </script>
 
-<div class={cn("bg-muted animate-pulse rounded-md", className)} {...$$restProps}></div>
+<div
+	bind:this={ref}
+	class={cn("bg-muted animate-pulse rounded-md", className)}
+	{...restProps}
+></div>
diff --git a/src/lib/components/ui/slider/slider.svelte b/src/lib/components/ui/slider/slider.svelte
index 2a94368..2f8b6e1 100644
--- a/src/lib/components/ui/slider/slider.svelte
+++ b/src/lib/components/ui/slider/slider.svelte
@@ -1,27 +1,34 @@
 <script lang="ts">
-	import { Slider as SliderPrimitive } from "bits-ui";
+	import { Slider as SliderPrimitive, type WithoutChildrenOrChild } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = SliderPrimitive.Props;
-
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"] = [0];
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
 </script>
 
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
 <SliderPrimitive.Root
-	bind:value
+	bind:value={value as never}
+	bind:ref
 	class={cn("relative flex w-full touch-none select-none items-center", className)}
-	{...$$restProps}
-	let:thumbs
+	{...restProps}
 >
-	<span class="bg-secondary relative h-2 w-full grow overflow-hidden rounded-full">
-		<SliderPrimitive.Range class="bg-primary absolute h-full" />
-	</span>
-	{#each thumbs as thumb}
-		<SliderPrimitive.Thumb
-			{thumb}
-			class="border-primary bg-background ring-offset-background focus-visible:ring-ring block h-5 w-5 rounded-full border-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-		/>
-	{/each}
+	{#snippet children({ thumbs })}
+		<span class="bg-secondary relative h-2 w-full grow overflow-hidden rounded-full">
+			<SliderPrimitive.Range class="bg-primary absolute h-full" />
+		</span>
+		{#each thumbs as thumb}
+			<SliderPrimitive.Thumb
+				index={thumb}
+				class="border-primary bg-background ring-offset-background focus-visible:ring-ring block size-5 rounded-full border-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+			/>
+		{/each}
+	{/snippet}
 </SliderPrimitive.Root>
diff --git a/src/lib/components/ui/sonner/sonner.svelte b/src/lib/components/ui/sonner/sonner.svelte
index 7d5b2f1..8050e04 100644
--- a/src/lib/components/ui/sonner/sonner.svelte
+++ b/src/lib/components/ui/sonner/sonner.svelte
@@ -2,7 +2,7 @@
 	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
 	import { mode } from "mode-watcher";
 
-	type $$Props = SonnerProps;
+	let restProps: SonnerProps = $props();
 </script>
 
 <Sonner
@@ -16,5 +16,5 @@
 			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
 		},
 	}}
-	{...$$restProps}
+	{...restProps}
 />
diff --git a/src/lib/components/ui/table/table-body.svelte b/src/lib/components/ui/table/table-body.svelte
index f2109d6..6c20c01 100644
--- a/src/lib/components/ui/table/table-body.svelte
+++ b/src/lib/components/ui/table/table-body.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
 </script>
 
-<tbody class={cn("[&_tr:last-child]:border-0", className)} {...$$restProps}>
-	<slot />
+<tbody bind:this={ref} class={cn("[&_tr:last-child]:border-0", className)} {...restProps}>
+	{@render children?.()}
 </tbody>
diff --git a/src/lib/components/ui/table/table-caption.svelte b/src/lib/components/ui/table/table-caption.svelte
index b838270..2b0cba5 100644
--- a/src/lib/components/ui/table/table-caption.svelte
+++ b/src/lib/components/ui/table/table-caption.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLTableCaptionElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
 </script>
 
-<caption class={cn("text-muted-foreground mt-4 text-sm", className)} {...$$restProps}>
-	<slot />
+<caption bind:this={ref} class={cn("text-muted-foreground mt-4 text-sm", className)} {...restProps}>
+	{@render children?.()}
 </caption>
diff --git a/src/lib/components/ui/table/table-cell.svelte b/src/lib/components/ui/table/table-cell.svelte
index fcb04f6..0536552 100644
--- a/src/lib/components/ui/table/table-cell.svelte
+++ b/src/lib/components/ui/table/table-cell.svelte
@@ -1,18 +1,20 @@
 <script lang="ts">
 	import type { HTMLTdAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLTdAttributes;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTdAttributes> = $props();
 </script>
 
 <td
+	bind:this={ref}
 	class={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
-	{...$$restProps}
-	on:click
-	on:keydown
+	{...restProps}
 >
-	<slot />
+	{@render children?.()}
 </td>
diff --git a/src/lib/components/ui/table/table-footer.svelte b/src/lib/components/ui/table/table-footer.svelte
index c6c1570..0267c47 100644
--- a/src/lib/components/ui/table/table-footer.svelte
+++ b/src/lib/components/ui/table/table-footer.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
 </script>
 
-<tfoot class={cn("bg-primary text-primary-foreground font-medium", className)} {...$$restProps}>
-	<slot />
+<tfoot bind:this={ref} class={cn("bg-muted/50 font-medium", className)} {...restProps}>
+	{@render children?.()}
 </tfoot>
diff --git a/src/lib/components/ui/table/table-head.svelte b/src/lib/components/ui/table/table-head.svelte
index 49ab7a9..5300ce6 100644
--- a/src/lib/components/ui/table/table-head.svelte
+++ b/src/lib/components/ui/table/table-head.svelte
@@ -1,19 +1,23 @@
 <script lang="ts">
 	import type { HTMLThAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLThAttributes;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLThAttributes> = $props();
 </script>
 
 <th
+	bind:this={ref}
 	class={cn(
 		"text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
 		className
 	)}
-	{...$$restProps}
+	{...restProps}
 >
-	<slot />
+	{@render children?.()}
 </th>
diff --git a/src/lib/components/ui/table/table-header.svelte b/src/lib/components/ui/table/table-header.svelte
index a3e59ee..684a57b 100644
--- a/src/lib/components/ui/table/table-header.svelte
+++ b/src/lib/components/ui/table/table-header.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
 </script>
 
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<thead class={cn("[&_tr]:border-b", className)} {...$$restProps} on:click on:keydown>
-	<slot />
+<thead bind:this={ref} class={cn("[&_tr]:border-b", className)} {...restProps}>
+	{@render children?.()}
 </thead>
diff --git a/src/lib/components/ui/table/table-row.svelte b/src/lib/components/ui/table/table-row.svelte
index 731c5d5..9e693bc 100644
--- a/src/lib/components/ui/table/table-row.svelte
+++ b/src/lib/components/ui/table/table-row.svelte
@@ -1,23 +1,23 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLTableRowElement> & {
-		"data-state"?: unknown;
-	};
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props();
 </script>
 
 <tr
+	bind:this={ref}
 	class={cn(
 		"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
 		className
 	)}
-	{...$$restProps}
-	on:click
-	on:keydown
+	{...restProps}
 >
-	<slot />
+	{@render children?.()}
 </tr>
diff --git a/src/lib/components/ui/table/table.svelte b/src/lib/components/ui/table/table.svelte
index 788d4ee..e3a95b6 100644
--- a/src/lib/components/ui/table/table.svelte
+++ b/src/lib/components/ui/table/table.svelte
@@ -1,15 +1,18 @@
 <script lang="ts">
 	import type { HTMLTableAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLTableAttributes;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTableAttributes> = $props();
 </script>
 
 <div class="relative w-full overflow-auto">
-	<table class={cn("w-full caption-bottom text-sm", className)} {...$$restProps}>
-		<slot />
+	<table bind:this={ref} class={cn("w-full caption-bottom text-sm", className)} {...restProps}>
+		{@render children?.()}
 	</table>
 </div>
diff --git a/src/lib/components/ui/tabs/tabs-content.svelte b/src/lib/components/ui/tabs/tabs-content.svelte
index b611559..f1c0515 100644
--- a/src/lib/components/ui/tabs/tabs-content.svelte
+++ b/src/lib/components/ui/tabs/tabs-content.svelte
@@ -2,20 +2,18 @@
 	import { Tabs as TabsPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = TabsPrimitive.ContentProps;
-
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.ContentProps = $props();
 </script>
 
 <TabsPrimitive.Content
+	bind:ref
 	class={cn(
 		"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
 		className
 	)}
-	{value}
-	{...$$restProps}
->
-	<slot />
-</TabsPrimitive.Content>
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/tabs/tabs-list.svelte b/src/lib/components/ui/tabs/tabs-list.svelte
index 773c754..f03e5fc 100644
--- a/src/lib/components/ui/tabs/tabs-list.svelte
+++ b/src/lib/components/ui/tabs/tabs-list.svelte
@@ -2,18 +2,18 @@
 	import { Tabs as TabsPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = TabsPrimitive.ListProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.ListProps = $props();
 </script>
 
 <TabsPrimitive.List
+	bind:ref
 	class={cn(
 		"bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1",
 		className
 	)}
-	{...$$restProps}
->
-	<slot />
-</TabsPrimitive.List>
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/tabs/tabs-trigger.svelte b/src/lib/components/ui/tabs/tabs-trigger.svelte
index b99358d..f1f5825 100644
--- a/src/lib/components/ui/tabs/tabs-trigger.svelte
+++ b/src/lib/components/ui/tabs/tabs-trigger.svelte
@@ -2,22 +2,18 @@
 	import { Tabs as TabsPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = TabsPrimitive.TriggerProps;
-	type $$Events = TabsPrimitive.TriggerEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.TriggerProps = $props();
 </script>
 
 <TabsPrimitive.Trigger
+	bind:ref
 	class={cn(
 		"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
 		className
 	)}
-	{value}
-	{...$$restProps}
-	on:click
->
-	<slot />
-</TabsPrimitive.Trigger>
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/tooltip/index.ts b/src/lib/components/ui/tooltip/index.ts
index 7d0444d..e9e1fd7 100644
--- a/src/lib/components/ui/tooltip/index.ts
+++ b/src/lib/components/ui/tooltip/index.ts
@@ -3,13 +3,16 @@ import Content from "./tooltip-content.svelte";
 
 const Root = TooltipPrimitive.Root;
 const Trigger = TooltipPrimitive.Trigger;
+const Provider = TooltipPrimitive.Provider;
 
 export {
 	Root,
 	Trigger,
 	Content,
+	Provider,
 	//
 	Root as Tooltip,
 	Content as TooltipContent,
 	Trigger as TooltipTrigger,
+	Provider as TooltipProvider,
 };
diff --git a/src/lib/components/ui/tooltip/tooltip-content.svelte b/src/lib/components/ui/tooltip/tooltip-content.svelte
index af9d1ff..68ff232 100644
--- a/src/lib/components/ui/tooltip/tooltip-content.svelte
+++ b/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -1,28 +1,21 @@
 <script lang="ts">
 	import { Tooltip as TooltipPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = TooltipPrimitive.ContentProps;
-
-	let className: $$Props["class"] = undefined;
-	export let sideOffset: $$Props["sideOffset"] = 4;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = {
-		y: 8,
-		duration: 150,
-	};
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		...restProps
+	}: TooltipPrimitive.ContentProps = $props();
 </script>
 
 <TooltipPrimitive.Content
-	{transition}
-	{transitionConfig}
+	bind:ref
 	{sideOffset}
 	class={cn(
-		"bg-popover text-popover-foreground z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
+		"bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
 		className
 	)}
-	{...$$restProps}
->
-	<slot />
-</TooltipPrimitive.Content>
+	{...restProps}
+/>

From feb4e3e043b95179f34e26aecb0e18030d0c8d10 Mon Sep 17 00:00:00 2001
From: WarningImHack3r <43064022+WarningImHack3r@users.noreply.github.com>
Date: Sat, 1 Feb 2025 20:58:47 +0100
Subject: [PATCH 3/8] Update data table

---
 package.json                                  |   4 +-
 pnpm-lock.yaml                                |  47 ++-
 .../ui/data-table/data-table.svelte.ts        | 112 ++++++
 .../ui/data-table/flex-render.svelte          |  43 ++
 src/lib/components/ui/data-table/index.ts     |   3 +
 .../ui/data-table/render-helpers.ts           | 111 ++++++
 .../productivity-dashboard/DataTable.svelte   | 373 ++++++++++--------
 7 files changed, 504 insertions(+), 189 deletions(-)
 create mode 100644 src/lib/components/ui/data-table/data-table.svelte.ts
 create mode 100644 src/lib/components/ui/data-table/flex-render.svelte
 create mode 100644 src/lib/components/ui/data-table/index.ts
 create mode 100644 src/lib/components/ui/data-table/render-helpers.ts

diff --git a/package.json b/package.json
index ba2ddf9..6eac0da 100644
--- a/package.json
+++ b/package.json
@@ -21,11 +21,12 @@
 		"@sveltejs/adapter-vercel": "^5.5.2",
 		"@sveltejs/kit": "^2.15.3",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@tanstack/table-core": "^8.20.5",
 		"@total-typescript/ts-reset": "^0.6.1",
 		"@unovis/svelte": "^1.5.0",
 		"@vercel/speed-insights": "^1.1.0",
 		"autoprefixer": "^10.4.20",
-		"bits-ui": "1.0.0-next.77",
+		"bits-ui": "1.0.0-next.84",
 		"clsx": "^2.1.1",
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",
@@ -57,7 +58,6 @@
 	},
 	"pnpm": {
 		"onlyBuiltDependencies": [
-			"@sveltejs/kit",
 			"@vercel/speed-insights",
 			"esbuild"
 		]
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b43fe4f..d44202b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
       '@sveltejs/vite-plugin-svelte':
         specifier: ^5.0.3
         version: 5.0.3(svelte@5.18.0)(vite@6.0.7(jiti@1.21.6))
+      '@tanstack/table-core':
+        specifier: ^8.20.5
+        version: 8.20.5
       '@total-typescript/ts-reset':
         specifier: ^0.6.1
         version: 0.6.1
@@ -33,8 +36,8 @@ importers:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.5.1)
       bits-ui:
-        specifier: 1.0.0-next.77
-        version: 1.0.0-next.77(svelte@5.18.0)
+        specifier: 1.0.0-next.84
+        version: 1.0.0-next.84(svelte@5.18.0)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -620,6 +623,10 @@ packages:
   '@swc/helpers@0.5.12':
     resolution: {integrity: sha512-KMZNXiGibsW9kvZAO1Pam2JPTDBm+KSHMMHWdsyI/1DbIZjT2A6Gy3hblVXUMEDvUAKq+e0vL0X0o54owWji7g==}
 
+  '@tanstack/table-core@8.20.5':
+    resolution: {integrity: sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==}
+    engines: {node: '>=12'}
+
   '@total-typescript/ts-reset@0.6.1':
     resolution: {integrity: sha512-cka47fVSo6lfQDIATYqb/vO1nvFfbPw7uWLayIXIhGETj0wcOOlrlkobOMDNQOFr9QOafegUPq13V2+6vtD7yg==}
 
@@ -968,8 +975,8 @@ packages:
   bindings@1.5.0:
     resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
 
-  bits-ui@1.0.0-next.77:
-    resolution: {integrity: sha512-IV0AyVEvsRkXv4s/fl4iea5E9W2b9EBf98s9mRMKMc1xHxM9MmtM2r6MZMqftHQ/c+gHTIt3A9EKuTlh7uay8w==}
+  bits-ui@1.0.0-next.84:
+    resolution: {integrity: sha512-ZXsPfh/fOU1E2XvP8gRGk2G6c2vMWylDm3bCP888gwViI2lnwxz7D/fMuzBp3oKzovNxWMr8GR27yJQVOd9/jg==}
     engines: {node: '>=18', pnpm: '>=8.7.0'}
     peerDependencies:
       svelte: ^5.11.0
@@ -2107,13 +2114,8 @@ packages:
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
-  runed@0.20.0:
-    resolution: {integrity: sha512-YqPxaUdWL5nUXuSF+/v8a+NkVN8TGyEGbQwTA25fLY35MR/2bvZ1c6sCbudoo1kT4CAJPh4kUkcgGVxW127WKw==}
-    peerDependencies:
-      svelte: ^5.7.0
-
-  runed@0.22.0:
-    resolution: {integrity: sha512-ZWVXWhOr0P5xdNgtviz6D1ivLUDWKLCbeC5SUEJ3zBkqLReVqWHenFxMNFeFaiC5bfxhFxyxzyzB+98uYFtwdA==}
+  runed@0.23.2:
+    resolution: {integrity: sha512-AhHCb5/B+YQW6ar1pzhGQOQy+byfjCH63ofuhrexSWwQKhC0EbQ60Z/wMYwETLo3ZubhwlNryxBt0seOMOrVFQ==}
     peerDependencies:
       svelte: ^5.7.0
 
@@ -2235,8 +2237,8 @@ packages:
     peerDependencies:
       svelte: ^3.0.0 || ^4.0.0 || ^5.0.0-next.1
 
-  svelte-toolbelt@0.7.0:
-    resolution: {integrity: sha512-i/Tv4NwAWWqJnK5H0F8y/ubDnogDYlwwyzKhrspTUFzrFuGnYshqd2g4/R43ds841wmaFiSW/HsdsdWhPOlrAA==}
+  svelte-toolbelt@0.7.1:
+    resolution: {integrity: sha512-HcBOcR17Vx9bjaOceUvxkY3nGmbBmCBBbuWLLEWO6jtmWH8f/QoWmbyUfQZrpDINH39en1b8mptfPQT9VKQ1xQ==}
     engines: {node: '>=18', pnpm: '>=8.7.0'}
     peerDependencies:
       svelte: ^5.0.0
@@ -2895,6 +2897,8 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  '@tanstack/table-core@8.20.5': {}
+
   '@total-typescript/ts-reset@0.6.1': {}
 
   '@types/cookie@0.6.0': {}
@@ -3317,15 +3321,15 @@ snapshots:
     dependencies:
       file-uri-to-path: 1.0.0
 
-  bits-ui@1.0.0-next.77(svelte@5.18.0):
+  bits-ui@1.0.0-next.84(svelte@5.18.0):
     dependencies:
       '@floating-ui/core': 1.6.9
       '@floating-ui/dom': 1.6.13
       '@internationalized/date': 3.7.0
       esm-env: 1.2.2
-      runed: 0.22.0(svelte@5.18.0)
+      runed: 0.23.2(svelte@5.18.0)
       svelte: 5.18.0
-      svelte-toolbelt: 0.7.0(svelte@5.18.0)
+      svelte-toolbelt: 0.7.1(svelte@5.18.0)
 
   brace-expansion@1.1.11:
     dependencies:
@@ -4374,12 +4378,7 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
-  runed@0.20.0(svelte@5.18.0):
-    dependencies:
-      esm-env: 1.2.2
-      svelte: 5.18.0
-
-  runed@0.22.0(svelte@5.18.0):
+  runed@0.23.2(svelte@5.18.0):
     dependencies:
       esm-env: 1.2.2
       svelte: 5.18.0
@@ -4498,10 +4497,10 @@ snapshots:
     dependencies:
       svelte: 5.18.0
 
-  svelte-toolbelt@0.7.0(svelte@5.18.0):
+  svelte-toolbelt@0.7.1(svelte@5.18.0):
     dependencies:
       clsx: 2.1.1
-      runed: 0.20.0(svelte@5.18.0)
+      runed: 0.23.2(svelte@5.18.0)
       style-to-object: 1.0.8
       svelte: 5.18.0
 
diff --git a/src/lib/components/ui/data-table/data-table.svelte.ts b/src/lib/components/ui/data-table/data-table.svelte.ts
new file mode 100644
index 0000000..b4834ce
--- /dev/null
+++ b/src/lib/components/ui/data-table/data-table.svelte.ts
@@ -0,0 +1,112 @@
+import {
+	type RowData,
+	type TableOptions,
+	type TableOptionsResolved,
+	type TableState,
+	createTable,
+} from "@tanstack/table-core";
+
+/**
+ * Creates a reactive TanStack table object for Svelte.
+ * @param options Table options to create the table with.
+ * @returns A reactive table object.
+ * @example
+ * ```svelte
+ * <script>
+ *   const table = createSvelteTable({ ... })
+ * </script>
+ *
+ * <table>
+ *   <thead>
+ *     {#each table.getHeaderGroups() as headerGroup}
+ *       <tr>
+ *         {#each headerGroup.headers as header}
+ *           <th colspan={header.colSpan}>
+ *         	   <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+ *         	 </th>
+ *         {/each}
+ *       </tr>
+ *     {/each}
+ *   </thead>
+ * 	 <!-- ... -->
+ * </table>
+ * ```
+ */
+export function createSvelteTable<TData extends RowData>(options: TableOptions<TData>) {
+	const resolvedOptions: TableOptionsResolved<TData> = mergeObjects(
+		{
+			state: {},
+			onStateChange() {},
+			renderFallbackValue: null,
+			mergeOptions: (
+				defaultOptions: TableOptions<TData>,
+				options: Partial<TableOptions<TData>>
+			) => {
+				return mergeObjects(defaultOptions, options);
+			},
+		},
+		options
+	);
+
+	const table = createTable(resolvedOptions);
+	let state = $state<Partial<TableState>>(table.initialState);
+
+	function updateOptions() {
+		table.setOptions((prev) => {
+			return mergeObjects(prev, options, {
+				state: mergeObjects(state, options.state || {}),
+
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				onStateChange: (updater: any) => {
+					if (updater instanceof Function) state = updater(state);
+					else state = mergeObjects(state, updater);
+
+					options.onStateChange?.(updater);
+				},
+			});
+		});
+	}
+
+	updateOptions();
+
+	$effect.pre(() => {
+		updateOptions();
+	});
+
+	return table;
+}
+
+/**
+ * Merges objects together while keeping their getters alive.
+ * Taken from SolidJS: {@link https://github.com/solidjs/solid/blob/24abc825c0996fd2bc8c1de1491efe9a7e743aff/packages/solid/src/server/rendering.ts#L82-L115}
+ */
+function mergeObjects<T>(source: T): T;
+function mergeObjects<T, U>(source: T, source1: U): T & U;
+function mergeObjects<T, U, V>(source: T, source1: U, source2: V): T & U & V;
+function mergeObjects<T, U, V, W>(source: T, source1: U, source2: V, source3: W): T & U & V & W;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function mergeObjects(...sources: any): any {
+	const target = {};
+	for (let i = 0; i < sources.length; i++) {
+		let source = sources[i];
+		if (typeof source === "function") source = source();
+		if (source) {
+			const descriptors = Object.getOwnPropertyDescriptors(source);
+			for (const key in descriptors) {
+				if (key in target) continue;
+				Object.defineProperty(target, key, {
+					enumerable: true,
+					get() {
+						for (let i = sources.length - 1; i >= 0; i--) {
+							let s = sources[i];
+							if (typeof s === "function") s = s();
+							const v = (s || {})[key];
+							if (v !== undefined) return v;
+						}
+					},
+				});
+			}
+		}
+	}
+	return target;
+}
diff --git a/src/lib/components/ui/data-table/flex-render.svelte b/src/lib/components/ui/data-table/flex-render.svelte
new file mode 100644
index 0000000..de3563f
--- /dev/null
+++ b/src/lib/components/ui/data-table/flex-render.svelte
@@ -0,0 +1,43 @@
+<script lang="ts" module>
+	import type { CellContext, ColumnDefTemplate, HeaderContext } from "@tanstack/table-core";
+
+	type TData = unknown;
+	type TValue = unknown;
+	type TContext = unknown;
+</script>
+
+<script
+	lang="ts"
+	generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
+>
+	import { RenderComponentConfig, RenderSnippetConfig } from "./render-helpers.js";
+	type Props = {
+		/** The cell or header field of the current cell's column definition. */
+		content?: TContext extends HeaderContext<TData, TValue>
+			? ColumnDefTemplate<HeaderContext<TData, TValue>>
+			: TContext extends CellContext<TData, TValue>
+				? ColumnDefTemplate<CellContext<TData, TValue>>
+				: never;
+		/** The result of the `getContext()` function of the header or cell */
+		context: TContext;
+	};
+
+	let { content, context }: Props = $props();
+</script>
+
+{#if typeof content === "string"}
+	{content}
+{:else if content instanceof Function}
+	<!-- It's unlikely that a CellContext will be passed to a Header -->
+	<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+	{@const result = content(context as any)}
+	{#if result instanceof RenderComponentConfig}
+		{@const { component: Component, props } = result}
+		<Component {...props} />
+	{:else if result instanceof RenderSnippetConfig}
+		{@const { snippet, params } = result}
+		{@render snippet(params)}
+	{:else}
+		{result}
+	{/if}
+{/if}
diff --git a/src/lib/components/ui/data-table/index.ts b/src/lib/components/ui/data-table/index.ts
new file mode 100644
index 0000000..5f4e77e
--- /dev/null
+++ b/src/lib/components/ui/data-table/index.ts
@@ -0,0 +1,3 @@
+export { default as FlexRender } from "./flex-render.svelte";
+export { renderComponent, renderSnippet } from "./render-helpers.js";
+export { createSvelteTable } from "./data-table.svelte.js";
diff --git a/src/lib/components/ui/data-table/render-helpers.ts b/src/lib/components/ui/data-table/render-helpers.ts
new file mode 100644
index 0000000..1984642
--- /dev/null
+++ b/src/lib/components/ui/data-table/render-helpers.ts
@@ -0,0 +1,111 @@
+import type { Component, ComponentProps, Snippet } from "svelte";
+
+/**
+ * A helper class to make it easy to identify Svelte components in
+ * `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
+ * @example
+ * ```svelte
+ * {@const result = content(context as any)}
+ * {#if result instanceof RenderComponentConfig}
+ *   {@const { component: Component, props } = result}
+ *   <Component {...props} />
+ * {/if}
+ * ```
+ */
+export class RenderComponentConfig<TComponent extends Component> {
+	component: TComponent;
+	props: ComponentProps<TComponent> | Record<string, never>;
+	constructor(
+		component: TComponent,
+		props: ComponentProps<TComponent> | Record<string, never> = {}
+	) {
+		this.component = component;
+		this.props = props;
+	}
+}
+
+/**
+ * A helper class to make it easy to identify Svelte Snippets in `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
+ * @example
+ * ```svelte
+ * {@const result = content(context as any)}
+ * {#if result instanceof RenderSnippetConfig}
+ *   {@const { snippet, params } = result}
+ *   {@render snippet(params)}
+ * {/if}
+ * ```
+ */
+export class RenderSnippetConfig<TProps> {
+	snippet: Snippet<[TProps]>;
+	params: TProps;
+	constructor(snippet: Snippet<[TProps]>, params: TProps) {
+		this.snippet = snippet;
+		this.params = params;
+	}
+}
+
+/**
+ * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
+ *
+ * This is only to be used with Svelte Components - use `renderSnippet` for Svelte Snippets.
+ *
+ * @param component A Svelte component
+ * @param props The props to pass to `component`
+ * @returns A `RenderComponentConfig` object that helps svelte-table know how to render the header/cell component.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     header: header => renderComponent(SortHeader, { label: 'Name', header }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     header: header => renderComponent(SortHeader, { label: 'State', header }),
+ *   }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export function renderComponent<
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	T extends Component<any>,
+	Props extends ComponentProps<T>,
+>(component: T, props: Props) {
+	return new RenderComponentConfig(component, props);
+}
+
+/**
+ * A helper function to help create cells from Svelte Snippets through ColumnDef's `cell` and `header` properties.
+ *
+ * The snippet must only take one parameter.
+ *
+ * This is only to be used with Snippets - use `renderComponent` for Svelte Components.
+ *
+ * @param snippet
+ * @param params
+ * @returns - A `RenderSnippetConfig` object that helps svelte-table know how to render the header/cell snippet.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     cell: cell => renderSnippet(nameSnippet, { name: cell.row.name }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     cell: cell => renderSnippet(stateSnippet, { state: cell.row.state }),
+ *   }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export function renderSnippet<TProps>(snippet: Snippet<[TProps]>, params: TProps) {
+	return new RenderSnippetConfig(snippet, params);
+}
diff --git a/src/routes/2023/productivity-dashboard/DataTable.svelte b/src/routes/2023/productivity-dashboard/DataTable.svelte
index a301f8c..e18b792 100644
--- a/src/routes/2023/productivity-dashboard/DataTable.svelte
+++ b/src/routes/2023/productivity-dashboard/DataTable.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
-	import { readable } from "svelte/store";
-	import { createTable, Render, Subscribe } from "svelte-headless-table";
+	import { createRawSnippet } from "svelte";
 	import {
-		addHiddenColumns,
-		addPagination,
-		addSortBy,
-		addTableFilter
-	} from "svelte-headless-table/plugins";
+		type ColumnDef,
+		type ColumnFiltersState,
+		type PaginationState,
+		type SortingState,
+		type VisibilityState,
+		getCoreRowModel,
+		getFilteredRowModel,
+		getPaginationRowModel,
+		getSortedRowModel
+	} from "@tanstack/table-core";
 	import {
 		ArrowDownAZ,
 		ArrowUpDown,
@@ -17,200 +21,243 @@
 	} from "lucide-svelte";
 	import type { Task } from "$lib/components/days/2023/Day5.svelte";
 	import { Button } from "$lib/components/ui/button";
+	import { createSvelteTable, FlexRender, renderSnippet } from "$lib/components/ui/data-table";
 	import { Input } from "$lib/components/ui/input";
 	import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
 	import * as Pagination from "$lib/components/ui/pagination";
 	import * as Table from "$lib/components/ui/table";
 
-	export let tableData: Task[];
+	let { tableData }: { tableData: Task[] } = $props();
 
-	const table = createTable(readable(tableData), {
-		page: addPagination(),
-		sort: addSortBy({
-			initialSortKeys: [{ id: "date", order: "desc" }],
-			disableMultiSort: true
-		}),
-		filter: addTableFilter({
-			fn: ({ filterValue, value }) => value.toLowerCase().includes(filterValue.toLowerCase())
-		}),
-		hide: addHiddenColumns()
-	});
-	const columns = table.createColumns([
-		table.column({
-			accessor: "elf",
-			header: "Elf"
-		}),
-		table.column({
-			accessor: "task",
+	let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: 10 });
+	let sorting = $state<SortingState>([]);
+	let columnFilters = $state<ColumnFiltersState>([]);
+	let columnVisibility = $state<VisibilityState>({});
+
+	const columns: ColumnDef<Task>[] = [
+		{
+			accessorKey: "elf",
+			header: ({ column }) =>
+				renderSnippet(
+					createRawSnippet(getName => ({
+						render: () =>
+							// column.toggleSorting(column.getIsSorted() === "asc")
+							`<button type="button">${getName()} sortable!</button>`
+					})),
+					"Elf"
+				)
+		},
+		{
+			accessorKey: "task",
 			header: "Task",
-			cell: ({ value }) => {
-				switch (value) {
-					case "CREATED_TOY":
-						return "created a toy";
-					case "WRAPPED_PRESENT":
-						return "wrapped a present";
-				}
-			},
-			plugins: {
-				filter: {
-					exclude: true
-				}
+			cell: ({ row }) => {
+				return renderSnippet(
+					createRawSnippet(getAmount => ({
+						render: () => `<div>${getAmount()}</div>`
+					})),
+					(() => {
+						switch (row.getValue("task")) {
+							case "CREATED_TOY":
+								return "created a toy";
+							case "WRAPPED_PRESENT":
+								return "wrapped a present";
+						}
+					})()
+				);
 			}
-		}),
-		table.column({
-			accessor: "minutesTaken",
+		},
+		{
+			accessorKey: "minutesTaken",
 			header: "Minutes Taken",
-			cell: ({ value }) => `${value} minutes`,
-			plugins: {
-				filter: {
-					exclude: true
-				}
-			}
-		}),
-		table.column({
-			accessor: "date",
+			cell: ({ row }) =>
+				renderSnippet(
+					createRawSnippet(getMinutes => ({
+						render: () => `<div>${getMinutes()}</div>`
+					})),
+					`${row.getValue("minutesTaken")} minutes`
+				)
+		},
+		{
+			accessorKey: "date",
 			header: "Date",
-			cell: ({ value }) => {
-				const d = new Date(value);
-				return `${d.toLocaleDateString()} @ ${d.toLocaleTimeString()}`;
+			cell: ({ row }) => {
+				return renderSnippet(
+					createRawSnippet(getValue => {
+						const d = new Date(getValue());
+						return {
+							render: () => `${d.toLocaleDateString()} @ ${d.toLocaleTimeString()}`
+						};
+					}),
+					"" + row.getValue("date")
+				);
+			}
+		}
+	];
+	const table = createSvelteTable({
+		get data() {
+			return tableData;
+		},
+		columns,
+		state: {
+			get pagination() {
+				return pagination;
+			},
+			get sorting() {
+				return sorting;
+			},
+			get columnFilters() {
+				return columnFilters;
 			},
-			plugins: {
-				filter: {
-					exclude: true
-				}
+			get columnVisibility() {
+				return columnVisibility;
 			}
-		})
-	]);
-	const { flatColumns, headerRows, pageRows, pluginStates, rows, tableAttrs, tableBodyAttrs } =
-		table.createViewModel(columns);
-	const { pageIndex, pageSize } = pluginStates.page;
-	const { filterValue } = pluginStates.filter;
-	const { hiddenColumnIds } = pluginStates.hide;
-
-	const hideForId = Object.fromEntries(flatColumns.map(col => [col.id, true]));
-	$: $hiddenColumnIds = Object.entries(hideForId)
-		.filter(([, hide]) => !hide)
-		.map(([id]) => id);
-	const hidableCols: (keyof (typeof tableData)[number])[] = ["task", "minutesTaken", "date"];
+		},
+		onPaginationChange: updater => {
+			if (typeof updater === "function") {
+				pagination = updater(pagination);
+			} else {
+				pagination = updater;
+			}
+		},
+		onSortingChange: updater => {
+			if (typeof updater === "function") {
+				sorting = updater(sorting);
+			} else {
+				sorting = updater;
+			}
+		},
+		onColumnFiltersChange: updater => {
+			if (typeof updater === "function") {
+				columnFilters = updater(columnFilters);
+			} else {
+				columnFilters = updater;
+			}
+		},
+		onColumnVisibilityChange: updater => {
+			if (typeof updater === "function") {
+				columnVisibility = updater(columnVisibility);
+			} else {
+				columnVisibility = updater;
+			}
+		},
+		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getFilteredRowModel: getFilteredRowModel()
+	});
 </script>
 
 <div>
 	<div class="flex items-center py-4">
-		<Input name="filter" class="max-w-sm" placeholder="Filter elves..." bind:value={$filterValue} />
+		<Input
+			class="max-w-sm"
+			placeholder="Filter elves..."
+			value={(table.getColumn("elf")?.getFilterValue() as string) ?? ""}
+			onchange={e => {
+				table.getColumn("elf")?.setFilterValue(e.currentTarget.value);
+			}}
+			oninput={e => {
+				table.getColumn("elf")?.setFilterValue(e.currentTarget.value);
+			}}
+		/>
 		<DropdownMenu.Root>
-			<DropdownMenu.Trigger asChild let:builder>
-				<Button variant="outline" class="ml-auto" builders={[builder]}>
-					Columns <ChevronDown class="ml-2 size-4" />
-				</Button>
+			<DropdownMenu.Trigger>
+				{#snippet child({ props })}
+					<Button {...props} variant="outline" class="ml-auto">
+						Columns <ChevronDown class="ml-2 size-4" />
+					</Button>
+				{/snippet}
 			</DropdownMenu.Trigger>
-			<DropdownMenu.Content>
-				{#each flatColumns as col}
-					{#if hidableCols.includes(col.id)}
-						<DropdownMenu.CheckboxItem class="cursor-pointer" bind:checked={hideForId[col.id]}>
-							{col.header}
-						</DropdownMenu.CheckboxItem>
-					{/if}
+			<DropdownMenu.Content align="end">
+				{#each table.getAllColumns().filter(col => col.getCanHide()) as column (column.id)}
+					<DropdownMenu.CheckboxItem
+						class="cursor-pointer capitalize"
+						bind:checked={() => column.getIsVisible(), v => column.toggleVisibility(!!v)}
+					>
+						{column.id}
+					</DropdownMenu.CheckboxItem>
 				{/each}
 			</DropdownMenu.Content>
 		</DropdownMenu.Root>
 	</div>
 	<div class="rounded-md border">
-		<Table.Root {...$tableAttrs}>
+		<Table.Root>
 			<Table.Header>
-				{#each $headerRows as headerRow}
-					<Subscribe rowAttrs={headerRow.attrs()}>
-						<Table.Row>
-							{#each headerRow.cells as cell (cell.id)}
-								<Subscribe attrs={cell.attrs()} let:attrs props={cell.props()} let:props>
-									<Table.Head {...attrs}>
-										<Button variant="ghost" class="-ml-3 px-3" on:click={props.sort.toggle}>
-											<Render of={cell.render()} />
-											{#if props.sort.order === "asc"}
-												<ArrowDownAZ class="ml-2 size-4 text-accent-foreground" />
-											{:else if props.sort.order === "desc"}
-												<ArrowDownZA class="ml-2 size-4 text-accent-foreground" />
-											{:else}
-												<ArrowUpDown class="ml-2 size-4" />
-											{/if}
-										</Button>
-									</Table.Head>
-								</Subscribe>
-							{/each}
-						</Table.Row>
-					</Subscribe>
+				{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+					<Table.Row>
+						{#each headerGroup.headers as header (header.id)}
+							<Table.Head>
+								{#if !header.isPlaceholder}
+									<FlexRender
+										content={header.column.columnDef.header}
+										context={header.getContext()}
+									/>
+								{/if}
+							</Table.Head>
+						{/each}
+					</Table.Row>
 				{/each}
 			</Table.Header>
-			<Table.Body {...$tableBodyAttrs}>
-				{#each $pageRows as row (row.id)}
-					<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
-						<Table.Row {...rowAttrs}>
-							{#each row.cells as cell (cell.id)}
-								<Subscribe attrs={cell.attrs()} let:attrs>
-									<Table.Cell {...attrs}>
-										{#if cell.id === "elf"}
-											<div class="font-semibold">
-												<Render of={cell.render()} />
-											</div>
-										{:else if cell.id === "task"}
-											<div class="text-muted-foreground">
-												<Render of={cell.render()} />
-											</div>
-										{:else}
-											<Render of={cell.render()} />
-										{/if}
-									</Table.Cell>
-								</Subscribe>
-							{/each}
-						</Table.Row>
-					</Subscribe>
+			<Table.Body>
+				{#each table.getRowModel().rows as row (row.id)}
+					<Table.Row data-state={row.getIsSelected() && "selected"}>
+						{#each row.getVisibleCells() as cell (cell.id)}
+							<Table.Cell>
+								<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+							</Table.Cell>
+						{/each}
+					</Table.Row>
+				{:else}
+					<Table.Row>
+						<Table.Cell colspan={columns.length} class="h-24 text-center">No results.</Table.Cell>
+					</Table.Row>
 				{/each}
 			</Table.Body>
 		</Table.Root>
 	</div>
 	<div class="flex items-center justify-end space-x-2 py-4">
 		<div class="flex-1 text-sm text-muted-foreground">
-			{#if $filterValue}
-				<strong>{$rows.length}</strong> out of <strong>{tableData.length}</strong> rows
+			{#if table.getColumn("elf")?.getFilterValue()}
+				<strong>{table.getPaginationRowModel().rows.length}</strong> out of
+				<strong>{tableData.length}</strong> rows
 			{:else}
-				<strong>{$rows.length}</strong> rows
+				<strong>{table.getRowCount()}</strong> rows
 			{/if}
 		</div>
 		<Pagination.Root
 			class="mx-0 w-auto flex-row"
-			count={$rows.length}
-			page={$pageIndex + 1}
-			perPage={$pageSize}
-			onPageChange={page => ($pageIndex = page - 1)}
-			let:pages
-			let:currentPage
+			count={tableData.length}
+			perPage={pagination.pageSize}
 		>
-			<Pagination.Content>
-				<Pagination.Item>
-					<Pagination.PrevButton>
-						<ChevronLeft class="size-4" />
-						<span class="hidden sm:block">Previous</span>
-					</Pagination.PrevButton>
-				</Pagination.Item>
-				{#each pages as page (page.key)}
-					{#if page.type === "ellipsis"}
-						<Pagination.Item>
-							<Pagination.Ellipsis />
-						</Pagination.Item>
-					{:else}
-						<Pagination.Item>
-							<Pagination.Link {page} isActive={currentPage === page.value}>
-								{page.value}
-							</Pagination.Link>
-						</Pagination.Item>
-					{/if}
-				{/each}
-				<Pagination.Item>
-					<Pagination.NextButton>
-						<span class="hidden sm:block">Next</span>
-						<ChevronRight class="size-4" />
-					</Pagination.NextButton>
-				</Pagination.Item>
-			</Pagination.Content>
+			{#snippet children({ pages, currentPage })}
+				<Pagination.Content>
+					<Pagination.Item>
+						<Pagination.PrevButton>
+							<ChevronLeft class="size-4" />
+							<span class="hidden sm:block">Previous</span>
+						</Pagination.PrevButton>
+					</Pagination.Item>
+					{#each pages as page (page.key)}
+						{#if page.type === "ellipsis"}
+							<Pagination.Item>
+								<Pagination.Ellipsis />
+							</Pagination.Item>
+						{:else}
+							<Pagination.Item isVisible={currentPage === page.value}>
+								<Pagination.Link {page} isActive={currentPage === page.value}>
+									{page.value}
+								</Pagination.Link>
+							</Pagination.Item>
+						{/if}
+					{/each}
+					<Pagination.Item>
+						<Pagination.NextButton>
+							<span class="hidden sm:block">Next</span>
+							<ChevronRight class="size-4" />
+						</Pagination.NextButton>
+					</Pagination.Item>
+				</Pagination.Content>
+			{/snippet}
 		</Pagination.Root>
 	</div>
 </div>

From c2d1c0dbeb71c53af24d534545b4ee02dae4c3ca Mon Sep 17 00:00:00 2001
From: WarningImHack3r <43064022+WarningImHack3r@users.noreply.github.com>
Date: Sat, 1 Feb 2025 21:12:19 +0100
Subject: [PATCH 4/8] Remove useless shadcn components

---
 .../ui/alert-dialog/alert-dialog-portal.svelte        |  9 ---------
 src/lib/components/ui/dialog/dialog-portal.svelte     |  8 --------
 .../ui/dropdown-menu/dropdown-menu-radio-group.svelte | 11 -----------
 3 files changed, 28 deletions(-)
 delete mode 100644 src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
 delete mode 100644 src/lib/components/ui/dialog/dialog-portal.svelte
 delete mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte

diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
deleted file mode 100644
index e227219..0000000
--- a/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-
-	type $$Props = AlertDialogPrimitive.PortalProps;
-</script>
-
-<AlertDialogPrimitive.Portal {...$$restProps}>
-	<slot />
-</AlertDialogPrimitive.Portal>
diff --git a/src/lib/components/ui/dialog/dialog-portal.svelte b/src/lib/components/ui/dialog/dialog-portal.svelte
deleted file mode 100644
index eb5d0a5..0000000
--- a/src/lib/components/ui/dialog/dialog-portal.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-	type $$Props = DialogPrimitive.PortalProps;
-</script>
-
-<DialogPrimitive.Portal {...$$restProps}>
-	<slot />
-</DialogPrimitive.Portal>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
deleted file mode 100644
index 1c74ae1..0000000
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-
-	type $$Props = DropdownMenuPrimitive.RadioGroupProps;
-
-	export let value: $$Props["value"] = undefined;
-</script>
-
-<DropdownMenuPrimitive.RadioGroup {...$$restProps} bind:value>
-	<slot />
-</DropdownMenuPrimitive.RadioGroup>

From a98493f58992da8928c072c40513848d1bc98696 Mon Sep 17 00:00:00 2001
From: WarningImHack3r <43064022+WarningImHack3r@users.noreply.github.com>
Date: Sat, 1 Feb 2025 22:10:50 +0100
Subject: [PATCH 5/8] Runes migration

---
 src/lib/components/Snowflakes.svelte          |  17 +-
 src/lib/components/days/2023/Day1.svelte      | 102 ++++++-----
 src/lib/components/days/2023/Day11.svelte     |  16 +-
 src/lib/components/days/2023/Day15.svelte     |  16 +-
 src/lib/components/days/2023/Day2.svelte      |   8 +-
 src/lib/components/days/2023/Day3.svelte      |  80 +++++----
 src/lib/components/days/2023/Day4.svelte      |   4 +-
 src/lib/components/days/2023/Day5.svelte      | 112 ++++++------
 src/lib/components/days/2023/Day6.svelte      |  15 +-
 src/lib/components/days/2023/Day7.svelte      |  25 +--
 src/lib/components/days/2023/Day8.svelte      |   4 +-
 src/lib/components/days/2023/Day9.svelte      |   8 +-
 src/routes/+layout.svelte                     | 119 +++++++------
 src/routes/2023/+page.svelte                  |   8 +-
 src/routes/2023/diy/+page.svelte              |   6 +-
 src/routes/2023/diy/card-creator/+page.svelte | 148 ++++++++-------
 .../2023/diy/snow-globe-creator/+page.svelte  |  26 +--
 src/routes/2023/memory-game/+page.svelte      | 168 ++++++++++--------
 .../2023/productivity-dashboard/+page.svelte  |  27 +--
 19 files changed, 506 insertions(+), 403 deletions(-)

diff --git a/src/lib/components/Snowflakes.svelte b/src/lib/components/Snowflakes.svelte
index 36dced2..e65fb58 100644
--- a/src/lib/components/Snowflakes.svelte
+++ b/src/lib/components/Snowflakes.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
 	import { localStorageStore } from "$lib/localStorageStore";
 
 	export let maxParticles = localStorageStore("snowMaxParticles", 100);
@@ -7,10 +7,15 @@
 
 <script lang="ts">
 	import { onMount, tick } from "svelte";
+	type Props = {
+		[key: string]: any;
+	};
 
-	let width: number;
-	let height: number;
-	let snowflakes: HTMLCanvasElement;
+	let { ...props }: Props = $props();
+
+	let width = $state(0);
+	let height = $state(0);
+	let snowflakes = $state<HTMLCanvasElement>();
 	let particles: {
 		x: number;
 		y: number;
@@ -141,6 +146,6 @@
 	});
 </script>
 
-<svelte:window on:resize={debounceResize} />
+<svelte:window onresize={debounceResize} />
 
-<canvas aria-hidden="true" bind:this={snowflakes} {width} {height} class={$$props.class}></canvas>
+<canvas aria-hidden="true" bind:this={snowflakes} {width} {height} class={props.class}></canvas>
diff --git a/src/lib/components/days/2023/Day1.svelte b/src/lib/components/days/2023/Day1.svelte
index 6e7d3b3..5b030ee 100644
--- a/src/lib/components/days/2023/Day1.svelte
+++ b/src/lib/components/days/2023/Day1.svelte
@@ -8,9 +8,13 @@
 	import * as Command from "$lib/components/ui/command";
 	import * as Popover from "$lib/components/ui/popover";
 
-	export let kids: Promise<{ name: string; tally: number }[]>;
-	let search = "";
-	let open = false;
+	type Props = {
+		kids: Promise<{ name: string; tally: number }[]>;
+	};
+
+	let { kids }: Props = $props();
+	let search = $state("");
+	let open = $state(false);
 
 	// We want to refocus the trigger button when the user selects
 	// an item from the list so users can continue navigating the
@@ -43,51 +47,55 @@
 				<Skeleton class="h-32 w-full" />
 			</div>
 		{:then kids}
-			<Popover.Root bind:open let:ids>
-				<Popover.Trigger asChild let:builder>
-					<div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
-						<Button
-							builders={[builder]}
-							variant="outline"
-							role="combobox"
-							aria-expanded={open}
-							class="w-52 justify-between"
-						>
-							{kids.find(f => f.name === search)?.name ?? "Select a child..."}
-							<ChevronsUpDown class="ml-2 size-4 shrink-0 opacity-50" />
-						</Button>
-						<p class="text-muted-foreground">
-							<span class="font-semibold text-accent-foreground">
-								{kids.filter(f => f.tally > 0).length}
-							</span>
-							nice children •{" "}
-							<span class="font-semibold text-accent-foreground">
-								{kids.filter(f => f.tally < 0).length}
-							</span> naughty children
-						</p>
-					</div>
-				</Popover.Trigger>
-				<Popover.Content class="w-52 p-0">
-					<Command.Root>
-						<Command.Input placeholder="Search children..." />
-						<Command.Empty>No child found.</Command.Empty>
-						<Command.Group class="max-h-48 overflow-y-auto">
-							{#each kids as kid}
-								<Command.Item
-									value={kid.name}
-									onSelect={currentValue => {
-										search = currentValue;
-										closeAndFocusTrigger(ids.trigger);
-									}}
+			<Popover.Root bind:open>
+				{#snippet children({ ids })}
+					<Popover.Trigger asChild>
+						{#snippet children({ builder })}
+							<div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
+								<Button
+									builders={[builder]}
+									variant="outline"
+									role="combobox"
+									aria-expanded={open}
+									class="w-52 justify-between"
 								>
-									<Check class={cn("mr-2 size-4", search !== kid.name && "text-transparent")} />
-									{kid.name}
-									<span class="ml-auto text-muted-foreground">{kid.tally}</span>
-								</Command.Item>
-							{/each}
-						</Command.Group>
-					</Command.Root>
-				</Popover.Content>
+									{kids.find(f => f.name === search)?.name ?? "Select a child..."}
+									<ChevronsUpDown class="ml-2 size-4 shrink-0 opacity-50" />
+								</Button>
+								<p class="text-muted-foreground">
+									<span class="font-semibold text-accent-foreground">
+										{kids.filter(f => f.tally > 0).length}
+									</span>
+									nice children •{" "}
+									<span class="font-semibold text-accent-foreground">
+										{kids.filter(f => f.tally < 0).length}
+									</span> naughty children
+								</p>
+							</div>
+						{/snippet}
+					</Popover.Trigger>
+					<Popover.Content class="w-52 p-0">
+						<Command.Root>
+							<Command.Input placeholder="Search children..." />
+							<Command.Empty>No child found.</Command.Empty>
+							<Command.Group class="max-h-48 overflow-y-auto">
+								{#each kids as kid}
+									<Command.Item
+										value={kid.name}
+										onSelect={currentValue => {
+											search = currentValue;
+											closeAndFocusTrigger(ids.trigger);
+										}}
+									>
+										<Check class={cn("mr-2 size-4", search !== kid.name && "text-transparent")} />
+										{kid.name}
+										<span class="ml-auto text-muted-foreground">{kid.tally}</span>
+									</Command.Item>
+								{/each}
+							</Command.Group>
+						</Command.Root>
+					</Popover.Content>
+				{/snippet}
 			</Popover.Root>
 			{#if search}
 				{@const tally = kids.find(f => f.name === search)?.tally ?? 0}
diff --git a/src/lib/components/days/2023/Day11.svelte b/src/lib/components/days/2023/Day11.svelte
index b0d34d6..8140bd7 100644
--- a/src/lib/components/days/2023/Day11.svelte
+++ b/src/lib/components/days/2023/Day11.svelte
@@ -7,13 +7,9 @@
 
 	let firstNames: string[] = [];
 	let lastNames: string[] = [];
-	let realName = "";
-	$: if (realName) {
-		error = "";
-		elfName = "";
-	}
-	let error = "";
-	let elfName = "";
+	let realName = $state("");
+	let error = $state("");
+	let elfName = $state("");
 
 	function generateName() {
 		const [firstName, lastName] = realName.split(" ");
@@ -62,7 +58,7 @@
 	<Card.Content class="flex flex-col gap-8">
 		<form
 			class="flex items-center gap-2"
-			on:submit={e => {
+			onsubmit={e => {
 				e.preventDefault();
 
 				if (realName.length < 1) {
@@ -80,6 +76,10 @@
 				placeholder="Your first and last name"
 				class="flex-1 bg-background"
 				bind:value={realName}
+				oninput={() => {
+					error = "";
+					elfName = "";
+				}}
 			/>
 			<Button type="submit" size="icon" disabled={realName.length < 1}>
 				<Dices class="size-5" />
diff --git a/src/lib/components/days/2023/Day15.svelte b/src/lib/components/days/2023/Day15.svelte
index 36b157f..98744f1 100644
--- a/src/lib/components/days/2023/Day15.svelte
+++ b/src/lib/components/days/2023/Day15.svelte
@@ -1,10 +1,20 @@
+<script lang="ts">
+	import { type Snippet } from "svelte";
+
+	type Props = {
+		children?: Snippet;
+		[key: string]: unknown;
+	};
+
+	let { ...props }: Props = $props();
+</script>
+
 <svg
 	xmlns="http://www.w3.org/2000/svg"
 	viewBox="160 110 170 220"
 	width="200"
 	height="230"
-	class={$$props.class}
-	{...$$props}
+	{...props}
 >
 	<ellipse
 		style="stroke: currentColor; fill: none; stroke-width: 5px;"
@@ -14,7 +24,7 @@
 		ry="85"
 	/>
 	<foreignObject x="163" y="112.5" width="174.5" height="175">
-		<slot />
+		{@render props.children?.()}
 	</foreignObject>
 	<rect
 		x="180"
diff --git a/src/lib/components/days/2023/Day2.svelte b/src/lib/components/days/2023/Day2.svelte
index 011d9a2..c5bf1b0 100644
--- a/src/lib/components/days/2023/Day2.svelte
+++ b/src/lib/components/days/2023/Day2.svelte
@@ -4,10 +4,10 @@
 	import { Button } from "$lib/components/ui/button";
 	import * as Card from "$lib/components/ui/card";
 
-	let cookiesCount = 0;
-	let lastAdjustmentPositive = false;
-	let cookiesLabel = "Cookie";
-	let comment = "Santa hasn't eaten any cookies yet.";
+	let cookiesCount = $state(0);
+	let lastAdjustmentPositive = $state(false);
+	let cookiesLabel = $state("Cookie");
+	let comment = $state("Santa hasn't eaten any cookies yet.");
 	function updateCookiesCount(adjustment: number) {
 		lastAdjustmentPositive = adjustment > 0;
 		cookiesCount += adjustment;
diff --git a/src/lib/components/days/2023/Day3.svelte b/src/lib/components/days/2023/Day3.svelte
index 89092c8..e2db54a 100644
--- a/src/lib/components/days/2023/Day3.svelte
+++ b/src/lib/components/days/2023/Day3.svelte
@@ -5,35 +5,41 @@
 	import * as Card from "$lib/components/ui/card";
 	import * as Tabs from "$lib/components/ui/tabs";
 
-	export let presents: Promise<{ name: string; weight: number }[]>;
-	export let presents_v2: Promise<{ name: string; weight: number }[]>;
+	type Props = {
+		presents: Promise<{ name: string; weight: number }[]>;
+		presents_v2: Promise<{ name: string; weight: number }[]>;
+	};
+
+	let { presents, presents_v2 }: Props = $props();
 
 	const MAX_WEIGHT = 100;
 
 	// Day 3
-	let selectedPresents: Awaited<typeof presents> = [];
-	let sleighWeight = 0;
-	$: sleighWeight =
+	let selectedPresents: Awaited<typeof presents> = $state([]);
+	let sleighWeight = $derived(
 		Math.round(
 			(selectedPresents.reduce((acc, present) => acc + present.weight, 0) + Number.EPSILON) * 100
-		) / 100;
+		) / 100
+	);
 
-	let wasLastAdded = false;
-	let weightLabel = "";
-	$: setTimeout(() => {
-		weightLabel =
-			sleighWeight > MAX_WEIGHT
-				? "Too heavy!"
-				: sleighWeight > MAX_WEIGHT / 2
-					? sleighWeight > MAX_WEIGHT * 0.9
-						? sleighWeight > MAX_WEIGHT * 0.99
-							? "Ready to go!"
-							: "Almost there!"
-						: "Kids will be happy!"
-					: sleighWeight > 0
-						? "Let's pack more!"
-						: "Empty sleigh";
-	}, 25);
+	let wasLastAdded = $state(false);
+	let weightLabel = $state("");
+	$effect(() => {
+		setTimeout(() => {
+			weightLabel =
+				sleighWeight > MAX_WEIGHT
+					? "Too heavy!"
+					: sleighWeight > MAX_WEIGHT / 2
+						? sleighWeight > MAX_WEIGHT * 0.9
+							? sleighWeight > MAX_WEIGHT * 0.99
+								? "Ready to go!"
+								: "Almost there!"
+							: "Kids will be happy!"
+						: sleighWeight > 0
+							? "Let's pack more!"
+							: "Empty sleigh";
+		}, 25);
+	});
 
 	// Day 13
 	// Returns a promise that resolves to an array of deliveries,
@@ -101,8 +107,12 @@
 									<div class="grid grid-cols-1 grid-rows-1">
 										{#key sleighWeight}
 											<span
-												class="col-start-1 col-end-1 row-start-1 row-end-1 text-5xl font-semibold tabular-nums tracking-tighter text-accent-foreground"
-												class:text-red-500={sleighWeight > MAX_WEIGHT}
+												class={[
+													"col-start-1 col-end-1 row-start-1 row-end-1 text-5xl font-semibold tabular-nums tracking-tighter text-accent-foreground",
+													{
+														"text-red-500": sleighWeight > MAX_WEIGHT
+													}
+												]}
 												transition:blur
 											>
 												{sleighWeight.toFixed(sleighWeight > MAX_WEIGHT ? 1 : 2)}
@@ -114,10 +124,14 @@
 								<div class="mt-2 grid grid-cols-1 grid-rows-1">
 									{#key weightLabel}
 										<span
-											class="col-start-1 col-end-1 row-start-1 row-end-1 text-center text-sm text-muted-foreground"
-											class:text-primary={sleighWeight <= MAX_WEIGHT &&
-												sleighWeight > MAX_WEIGHT * 0.99}
-											class:text-red-500={sleighWeight > MAX_WEIGHT}
+											class={[
+												"col-start-1 col-end-1 row-start-1 row-end-1 text-center text-sm text-muted-foreground",
+												{
+													"text-primary":
+														sleighWeight <= MAX_WEIGHT && sleighWeight > MAX_WEIGHT * 0.99,
+													"text-red-500": sleighWeight > MAX_WEIGHT
+												}
+											]}
 											in:fly={{ y: -20 * (wasLastAdded ? 1 : -1) }}
 											out:fly={{ y: 20 * (wasLastAdded ? 1 : -1) }}
 										>
@@ -130,14 +144,18 @@
 						<div class="grid grid-flow-col grid-rows-2 gap-2 overflow-x-auto pr-6">
 							{#each presents as present, i}
 								<div
-									class="relative rounded-lg border bg-card text-card-foreground shadow-sm"
-									class:border-primary={selectedPresents.includes(present)}
+									class={[
+										"relative rounded-lg border bg-card text-card-foreground shadow-sm",
+										{
+											"border-primary": selectedPresents.includes(present)
+										}
+									]}
 								>
 									<input
 										name="Present {i + 1}"
 										type="checkbox"
 										class="peer absolute left-0 top-0 size-full cursor-pointer opacity-0"
-										on:change={e => {
+										onchange={e => {
 											const checked = e.target?.checked ?? false;
 											wasLastAdded = checked;
 											if (checked) {
diff --git a/src/lib/components/days/2023/Day4.svelte b/src/lib/components/days/2023/Day4.svelte
index b43b745..c1b98f9 100644
--- a/src/lib/components/days/2023/Day4.svelte
+++ b/src/lib/components/days/2023/Day4.svelte
@@ -5,8 +5,8 @@
 	import { VisLine, VisXYContainer } from "@unovis/svelte";
 	import * as Card from "$lib/components/ui/card";
 
-	let heartRate = 0;
-	let data: { id: number; heartRate: number }[] = [];
+	let heartRate = $state(0);
+	let data = $state<{ id: number; heartRate: number }[]>([]);
 	type ArrayElement<ArrayType extends readonly unknown[]> =
 		ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
 	const x = (d: ArrayElement<typeof data>) => d.id;
diff --git a/src/lib/components/days/2023/Day5.svelte b/src/lib/components/days/2023/Day5.svelte
index 0127bfc..ce68d2c 100644
--- a/src/lib/components/days/2023/Day5.svelte
+++ b/src/lib/components/days/2023/Day5.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
 	export type Task = {
 		elf: string;
 		task: "CREATED_TOY" | "WRAPPED_PRESENT";
@@ -9,7 +9,7 @@
 
 <script lang="ts">
 	import { onDestroy, onMount } from "svelte";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { ArrowRight, Gauge } from "lucide-svelte";
 	import { Button } from "$lib/components/ui/button";
 	import * as Card from "$lib/components/ui/card";
@@ -36,7 +36,7 @@
 		return maxElf;
 	}
 
-	let tasks: Task[] = [];
+	let tasks = $state<Task[]>([]);
 	async function getElfTasks() {
 		return await fetch("https://advent.sveltesociety.dev/data/2023/day-five.json").then(
 			res => res.json() as Promise<Task[]>
@@ -44,59 +44,61 @@
 	}
 
 	// Reactive variables
-	let toysPerHour = "--";
-	let minutesPerToy = "--";
-	let mostProductiveElf = "--";
-	let completionRate = "--";
-	let lastUpdate = "loading...";
-	$: if (tasks.length > 0) {
-		const totalMinutes = tasks.reduce((acc, task) => acc + task.minutesTaken, 0);
-		const totalToys = tasks.filter(task => task.task === "CREATED_TOY").length;
-		const totalPresents = tasks.filter(task => task.task === "WRAPPED_PRESENT").length;
-		toysPerHour = (totalToys / (totalMinutes / 60)).toFixed(2);
-		minutesPerToy = (totalMinutes / totalToys).toFixed(2);
-		mostProductiveElf = findMostProductiveElf(tasks) || "--";
-		completionRate = ((totalPresents / totalToys) * 100).toFixed(2);
+	let toysPerHour = $state("--");
+	let minutesPerToy = $state("--");
+	let mostProductiveElf = $state("--");
+	let completionRate = $state("--");
+	let lastUpdate = $state("loading...");
+	$effect(() => {
+		if (tasks.length > 0) {
+			const totalMinutes = tasks.reduce((acc, task) => acc + task.minutesTaken, 0);
+			const totalToys = tasks.filter(task => task.task === "CREATED_TOY").length;
+			const totalPresents = tasks.filter(task => task.task === "WRAPPED_PRESENT").length;
+			toysPerHour = (totalToys / (totalMinutes / 60)).toFixed(2);
+			minutesPerToy = (totalMinutes / totalToys).toFixed(2);
+			mostProductiveElf = findMostProductiveElf(tasks) || "--";
+			completionRate = ((totalPresents / totalToys) * 100).toFixed(2);
 
-		const latestTask = tasks[tasks.length - 1]!;
-		let dateDiff = new Date().getTime() - new Date(latestTask.date).getTime();
-		let relevantUnit: Intl.RelativeTimeFormatUnit;
-		switch (true) {
-			case dateDiff < 1000 * 60:
-				dateDiff /= 1000;
-				relevantUnit = "seconds";
-				break;
-			case dateDiff < 1000 * 60 * 60:
-				dateDiff /= 1000 * 60;
-				relevantUnit = "minutes";
-				break;
-			case dateDiff < 1000 * 60 * 60 * 24:
-				dateDiff /= 1000 * 60 * 60;
-				relevantUnit = "hours";
-				break;
-			case dateDiff < 1000 * 60 * 60 * 24 * 7:
-				dateDiff /= 1000 * 60 * 60 * 24;
-				relevantUnit = "days";
-				break;
-			case dateDiff < 1000 * 60 * 60 * 24 * 7 * 4:
-				dateDiff /= 1000 * 60 * 60 * 24 * 7;
-				relevantUnit = "weeks";
-				break;
-			case dateDiff < 1000 * 60 * 60 * 24 * 7 * 4 * 12:
-				dateDiff /= 1000 * 60 * 60 * 24 * 7 * 4;
-				relevantUnit = "months";
-				break;
-			default:
-				dateDiff /= 1000 * 60 * 60 * 24 * 7 * 4 * 12;
-				relevantUnit = "years";
-				break;
+			const latestTask = tasks[tasks.length - 1]!;
+			let dateDiff = new Date().getTime() - new Date(latestTask.date).getTime();
+			let relevantUnit: Intl.RelativeTimeFormatUnit;
+			switch (true) {
+				case dateDiff < 1000 * 60:
+					dateDiff /= 1000;
+					relevantUnit = "seconds";
+					break;
+				case dateDiff < 1000 * 60 * 60:
+					dateDiff /= 1000 * 60;
+					relevantUnit = "minutes";
+					break;
+				case dateDiff < 1000 * 60 * 60 * 24:
+					dateDiff /= 1000 * 60 * 60;
+					relevantUnit = "hours";
+					break;
+				case dateDiff < 1000 * 60 * 60 * 24 * 7:
+					dateDiff /= 1000 * 60 * 60 * 24;
+					relevantUnit = "days";
+					break;
+				case dateDiff < 1000 * 60 * 60 * 24 * 7 * 4:
+					dateDiff /= 1000 * 60 * 60 * 24 * 7;
+					relevantUnit = "weeks";
+					break;
+				case dateDiff < 1000 * 60 * 60 * 24 * 7 * 4 * 12:
+					dateDiff /= 1000 * 60 * 60 * 24 * 7 * 4;
+					relevantUnit = "months";
+					break;
+				default:
+					dateDiff /= 1000 * 60 * 60 * 24 * 7 * 4 * 12;
+					relevantUnit = "years";
+					break;
+			}
+			const taskSuffixString = ` - ${latestTask.elf} ${stringFromTaskType(latestTask.task)}`;
+			lastUpdate =
+				new Intl.RelativeTimeFormat("en", {
+					style: "long"
+				}).format(-Math.ceil(dateDiff), relevantUnit) + taskSuffixString;
 		}
-		const taskSuffixString = ` - ${latestTask.elf} ${stringFromTaskType(latestTask.task)}`;
-		lastUpdate =
-			new Intl.RelativeTimeFormat("en", {
-				style: "long"
-			}).format(-Math.ceil(dateDiff), relevantUnit) + taskSuffixString;
-	}
+	});
 
 	let interval: ReturnType<typeof setInterval>;
 	onMount(async () => {
@@ -120,7 +122,7 @@
 				Keep an eye on your elves' productivity with this dashboard.
 			</Card.Description>
 		</div>
-		<Button class="group hidden sm:flex" href="{$page.route.id ?? ''}/productivity-dashboard">
+		<Button class="group hidden sm:flex" href="{page.route.id ?? ''}/productivity-dashboard">
 			<span class="mr-2">More info</span>
 			<ArrowRight class="duration-300 group-hover:translate-x-1.5" />
 		</Button>
diff --git a/src/lib/components/days/2023/Day6.svelte b/src/lib/components/days/2023/Day6.svelte
index bc279de..50c11be 100644
--- a/src/lib/components/days/2023/Day6.svelte
+++ b/src/lib/components/days/2023/Day6.svelte
@@ -15,7 +15,7 @@
 
 	let lastTap = 0;
 	const defaultBPMText = "Tap the button!";
-	let bpmText = defaultBPMText;
+	let bpmText = $state(defaultBPMText);
 	let timeout: ReturnType<typeof setTimeout>;
 
 	function countBPM() {
@@ -44,11 +44,14 @@
 	<Card.Content class="flex flex-1 flex-col items-center justify-center">
 		<button
 			type="button"
-			class="relative my-4 flex aspect-square h-52 select-none flex-col items-center justify-center gap-1 rounded-full bg-accent text-center text-2xl font-light tracking-tight shadow-md duration-300 transform-style-3d before:absolute
-			before:inset-0 before:animate-pulse before:rounded-full before:bg-accent/75 before:shadow-md before:content-[''] before:-translate-z-1 before:scale-110 after:absolute after:inset-0 after:animate-pulse after:rounded-full after:bg-accent/50 after:shadow-md after:content-[''] after:-translate-z-2 after:scale-[1.2] hover:scale-105 active:scale-95"
-			class:text-6xl={bpmText !== defaultBPMText}
-			class:!font-semibold={bpmText !== defaultBPMText}
-			on:click={countBPM}
+			class={[
+				"relative my-4 flex aspect-square h-52 select-none flex-col items-center justify-center gap-1 rounded-full bg-accent text-center text-2xl font-light tracking-tight shadow-md duration-300 transform-style-3d",
+				"before:absolute before:inset-0 before:animate-pulse before:rounded-full before:bg-accent/75 before:shadow-md before:content-[''] before:-translate-z-1 before:scale-110 after:absolute after:inset-0 after:animate-pulse after:rounded-full after:bg-accent/50 after:shadow-md after:content-[''] after:-translate-z-2 after:scale-[1.2] hover:scale-105 active:scale-95",
+				{
+					"text-6xl !font-semibold": bpmText !== defaultBPMText
+				}
+			]}
+			onclick={countBPM}
 		>
 			{bpmText}
 			{#if bpmText !== defaultBPMText}
diff --git a/src/lib/components/days/2023/Day7.svelte b/src/lib/components/days/2023/Day7.svelte
index a9b4ac4..fd3a2c4 100644
--- a/src/lib/components/days/2023/Day7.svelte
+++ b/src/lib/components/days/2023/Day7.svelte
@@ -75,16 +75,12 @@
 			.join(" ");
 	}
 
-	let message = "";
-	$: morseMessage = translateToMorseCode(message);
-	$: if (message || !message) {
-		stop();
-	}
+	let message = $state("");
 
 	// Audio transcription of the Morse code
-	let isPlaying = false;
-	let elapsedTime = "0:00";
-	let totalTime = "0:00";
+	let isPlaying = $state(false);
+	let elapsedTime = $state("0:00");
+	let totalTime = $state("0:00");
 	let intervalId: ReturnType<typeof setInterval>;
 	const [send, receive] = crossfade({
 		duration: 800
@@ -170,6 +166,7 @@
 	}
 
 	onDestroy(() => clearInterval(intervalId));
+	let morseMessage = $derived(translateToMorseCode(message));
 </script>
 
 <Card.Root>
@@ -181,7 +178,13 @@
 		<Card.Description>Translate your message to Morse code to send it to Sven.</Card.Description>
 	</Card.Header>
 	<Card.Content class="flex flex-col gap-4">
-		<Input name="message" placeholder="Your message" class="bg-background" bind:value={message} />
+		<Input
+			name="message"
+			placeholder="Your message"
+			class="bg-background"
+			bind:value={message}
+			oninput={stop}
+		/>
 		<div>
 			{#if message.length > 0}
 				<p class="text-sm text-muted-foreground">Your message in Morse code:</p>
@@ -204,7 +207,7 @@
 									)}
 									in:send={{ key }}
 									out:receive={{ key }}
-									on:click={stop}
+									onclick={stop}
 								>
 									<Square class="text-primary" />
 								</button>
@@ -219,7 +222,7 @@
 									)}
 									in:send={{ key }}
 									out:receive={{ key }}
-									on:click={play}
+									onclick={play}
 								>
 									<Play class="text-primary" />
 								</button>
diff --git a/src/lib/components/days/2023/Day8.svelte b/src/lib/components/days/2023/Day8.svelte
index c3b7ba8..085c36e 100644
--- a/src/lib/components/days/2023/Day8.svelte
+++ b/src/lib/components/days/2023/Day8.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { Club, Play } from "lucide-svelte";
 	import { Button } from "$lib/components/ui/button";
 	import * as Card from "$lib/components/ui/card";
@@ -14,7 +14,7 @@
 		<Card.Description>Use the Deck of Doubles to play a memory game!</Card.Description>
 	</Card.Header>
 	<Card.Content class="flex flex-1 items-center justify-center">
-		<Button href="{$page.route.id ?? ''}/memory-game" class="group w-full">
+		<Button href="{page.route.id ?? ''}/memory-game" class="group w-full">
 			Play
 			<Play class="ml-2 size-4 duration-300 group-hover:scale-110" />
 		</Button>
diff --git a/src/lib/components/days/2023/Day9.svelte b/src/lib/components/days/2023/Day9.svelte
index 201c35a..599ae28 100644
--- a/src/lib/components/days/2023/Day9.svelte
+++ b/src/lib/components/days/2023/Day9.svelte
@@ -4,10 +4,10 @@
 	import { confetti } from "@neoconfetti/svelte";
 	import * as Card from "$lib/components/ui/card";
 
-	let days = -1;
-	let hours = -1;
-	let minutes = -1;
-	let seconds = -1;
+	let days = $state(-1);
+	let hours = $state(-1);
+	let minutes = $state(-1);
+	let seconds = $state(-1);
 
 	function updateTimer() {
 		const now = new Date();
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e11819b..afcce47 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,7 +3,7 @@
 	import { onMount, type SvelteComponent } from "svelte";
 	import type { SvelteHTMLElements } from "svelte/elements";
 	import { goto } from "$app/navigation";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { ArrowUpRight, ChevronDown, Hammer, Moon, Monitor, Settings2, Sun } from "lucide-svelte";
 	import { toast } from "svelte-sonner";
 	import { ModeWatcher, resetMode, setMode } from "mode-watcher";
@@ -18,25 +18,26 @@
 	import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
 	import * as Tooltip from "$lib/components/ui/tooltip";
 
-	export let data;
+	let { data, children } = $props();
 
 	// Year selector
-	let selectedYear = "Choose a year";
-	const maxComponents = 24;
-	$: if ($page.route.id) {
-		const currentPage = $page.route.id.split("/")[1];
+	let selectedYear = $state("Choose a year");
+	$effect(() => {
+		if (!page.route.id) return;
+		const currentPage = page.route.id.split("/")[1];
 		if (currentPage && data.years.map(route => route.year).includes(currentPage)) {
 			selectedYear = currentPage;
 		}
-	}
-	let yearSwitcherOpen = false;
+	});
+	const maxComponents = 24;
+	let yearSwitcherOpen = $state(false);
 
 	// Settings
-	let settingsOpen = false;
-	let isMaxParticlesValid = true;
-	let unsavedMaxParticles = $maxParticles;
-	let isSpeedValid = true;
-	let unsavedSpeed = $speed;
+	let settingsOpen = $state(false);
+	let isMaxParticlesValid = $state(true);
+	let unsavedMaxParticles = $state($maxParticles);
+	let isSpeedValid = $state(true);
+	let unsavedSpeed = $state($speed);
 
 	// Theme selector
 	type Theme = {
@@ -61,14 +62,12 @@
 			icon: Monitor
 		}
 	];
-	let theme: "light" | "dark" | "system";
-	let themeSwitcherOpen = false;
+	let theme = $state<"light" | "dark" | "system">("system");
+	let themeSwitcherOpen = $state(false);
 
 	onMount(() => {
 		if ("mode-watcher-mode" in localStorage) {
 			theme = localStorage["mode-watcher-mode"].replace(/"/g, "");
-		} else {
-			theme = "system";
 		}
 
 		const date = new Date();
@@ -83,7 +82,7 @@
 </script>
 
 <svelte:head>
-	<title>Advent of Svelte {$page.route.id?.split("/")[1]} | WarningImHack3r</title>
+	<title>Advent of Svelte {page.route.id?.split("/")[1]} | WarningImHack3r</title>
 </svelte:head>
 
 <Snowflakes class="pointer-events-none fixed inset-0 -z-10 h-screen w-screen" />
@@ -103,22 +102,26 @@
 		</a>
 		<div class="xs:ml-4">
 			<DropdownMenu.Root bind:open={yearSwitcherOpen}>
-				<DropdownMenu.Trigger asChild let:builder>
-					<Button builders={[builder]} variant="ghost" class="gap-1 text-muted-foreground">
-						{#if (data.years.find(year => year.year === selectedYear)?.components ?? maxComponents) < maxComponents}
-							<Tooltip.Root>
-								<Tooltip.Trigger>
-									<Hammer class="mr-1 size-4" />
-								</Tooltip.Trigger>
-								<Tooltip.Content>Work in progress!</Tooltip.Content>
-							</Tooltip.Root>
-						{/if}
-						{selectedYear}
-						<ChevronDown
-							class={"size-4 transition-transform" + (yearSwitcherOpen ? " rotate-180" : "")}
-						/>
-						<span class="sr-only">Go to another year</span>
-					</Button>
+				<DropdownMenu.Trigger>
+					{#snippet child({ props })}
+						<Button {...props} variant="ghost" class="gap-1 text-muted-foreground">
+							{#if (data.years.find(year => year.year === selectedYear)?.components ?? maxComponents) < maxComponents}
+								<Tooltip.Provider>
+									<Tooltip.Root>
+										<Tooltip.Trigger>
+											<Hammer class="mr-1 size-4" />
+										</Tooltip.Trigger>
+										<Tooltip.Content>Work in progress!</Tooltip.Content>
+									</Tooltip.Root>
+								</Tooltip.Provider>
+							{/if}
+							{selectedYear}
+							<ChevronDown
+								class={"size-4 transition-transform" + (yearSwitcherOpen ? " rotate-180" : "")}
+							/>
+							<span class="sr-only">Go to another year</span>
+						</Button>
+					{/snippet}
 				</DropdownMenu.Trigger>
 				<DropdownMenu.Content align="start">
 					<DropdownMenu.RadioGroup bind:value={selectedYear}>
@@ -130,7 +133,7 @@
 										? " data-[highlighted]:bg-transparent"
 										: "")}
 								value={year}
-								on:click={() => goto(`/${year}`)}
+								onclick={() => goto(`/${year}`)}
 							>
 								<div class="absolute inset-0">
 									{#if components > 0 && components < maxComponents}
@@ -200,7 +203,7 @@
 								min="10"
 								max="1000"
 								bind:value={unsavedMaxParticles}
-								on:input={e => {
+								oninput={e => {
 									isMaxParticlesValid = e.target?.checkValidity() ?? false;
 								}}
 								placeholder="Snowflakes quantity"
@@ -217,18 +220,18 @@
 								min="250"
 								max="5000"
 								bind:value={unsavedSpeed}
-								on:input={e => {
+								oninput={e => {
 									isSpeedValid = e.target?.checkValidity() ?? false;
 								}}
 								placeholder="Snowflakes speed"
 							/>
 						</div>
 						<Dialog.Footer class="mt-4">
-							<Button variant="secondary" on:click={() => (settingsOpen = false)}>Cancel</Button>
+							<Button variant="secondary" onclick={() => (settingsOpen = false)}>Cancel</Button>
 							<Button
 								type="submit"
 								disabled={!isMaxParticlesValid || !isSpeedValid}
-								on:click={() => {
+								onclick={() => {
 									settingsOpen = false;
 									$maxParticles = unsavedMaxParticles;
 									$speed = unsavedSpeed;
@@ -250,22 +253,24 @@
 					<span class="sr-only">GitHub</span>
 				</Button>
 				<DropdownMenu.Root bind:open={themeSwitcherOpen}>
-					<DropdownMenu.Trigger asChild let:builder>
-						<Button builders={[builder]} variant="ghost" size="icon" class="w-14 gap-1">
-							<div class="flex items-center">
-								<Sun
-									class="size-5 transition-all rotate-0 scale-100 dark:-rotate-90 dark:scale-0"
-								/>
-								<Moon
-									class="absolute size-5 transition-all rotate-90 scale-0 dark:rotate-0 dark:scale-100"
+					<DropdownMenu.Trigger>
+						{#snippet child({ props })}
+							<Button {...props} variant="ghost" size="icon" class="w-14 gap-1">
+								<div class="flex items-center">
+									<Sun
+										class="size-5 transition-all rotate-0 scale-100 dark:-rotate-90 dark:scale-0"
+									/>
+									<Moon
+										class="absolute size-5 transition-all rotate-90 scale-0 dark:rotate-0 dark:scale-100"
+									/>
+								</div>
+								<ChevronDown
+									class={"size-4 opacity-50 transition-transform" +
+										(themeSwitcherOpen ? " rotate-180" : "")}
 								/>
-							</div>
-							<ChevronDown
-								class={"size-4 opacity-50 transition-transform" +
-									(themeSwitcherOpen ? " rotate-180" : "")}
-							/>
-							<span class="sr-only">Change theme</span>
-						</Button>
+								<span class="sr-only">Change theme</span>
+							</Button>
+						{/snippet}
 					</DropdownMenu.Trigger>
 					<DropdownMenu.Content>
 						<DropdownMenu.Label>Theme</DropdownMenu.Label>
@@ -276,13 +281,13 @@
 									class="cursor-pointer data-[disabled]:opacity-100"
 									value={availableTheme.value}
 									disabled={theme === availableTheme.value}
-									on:click={() => {
+									onclick={() => {
 										return availableTheme.value === "system"
 											? resetMode()
 											: setMode(availableTheme.value);
 									}}
 								>
-									<svelte:component this={availableTheme.icon} class="mr-2 size-4" />
+									<availableTheme.icon class="mr-2 size-4" />
 									<span>{availableTheme.label}</span>
 								</DropdownMenu.RadioItem>
 							{/each}
@@ -294,7 +299,7 @@
 	</div>
 </header>
 
-<slot />
+{@render children?.()}
 
 <footer class="mt-auto w-full border-t bg-background py-4 xs:py-0">
 	<div class="mx-auto flex h-12 w-full items-center px-8">
diff --git a/src/routes/2023/+page.svelte b/src/routes/2023/+page.svelte
index 3eced03..e2be1bb 100644
--- a/src/routes/2023/+page.svelte
+++ b/src/routes/2023/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { ChevronRight, Paintbrush } from "lucide-svelte";
 	import { Button } from "$lib/components/ui/button";
 	import * as Tabs from "$lib/components/ui/tabs";
@@ -14,13 +14,13 @@
 	import Day9 from "$lib/components/days/2023/Day9.svelte";
 	import Day11 from "$lib/components/days/2023/Day11.svelte";
 
-	export let data;
+	let { data } = $props();
 
 	const dashboards = {
 		santa: "Santa's",
 		elves: "Elves"
 	} as const;
-	let currentDashboard: keyof typeof dashboards = "santa";
+	let currentDashboard: keyof typeof dashboards = $state("santa");
 </script>
 
 <div class="container my-8">
@@ -29,7 +29,7 @@
 			<span class="text-primary">{dashboards[currentDashboard]}</span>
 			Dashboard
 		</h2>
-		<Button href={$page.url + "/diy"} class="group ml-auto xs:ml-0">
+		<Button href={page.url + "/diy"} class="group ml-auto xs:ml-0">
 			<Paintbrush class="mr-2 size-6" />
 			<span class="hidden sm:block">DIYs</span>
 			<ChevronRight
diff --git a/src/routes/2023/diy/+page.svelte b/src/routes/2023/diy/+page.svelte
index 2c90cb7..3672b23 100644
--- a/src/routes/2023/diy/+page.svelte
+++ b/src/routes/2023/diy/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { ChevronRight, type Component, ScrollText, Snowflake } from "lucide-svelte";
 	import { Button } from "$lib/components/ui/button";
 	import { Separator } from "$lib/components/ui/separator";
@@ -37,13 +37,13 @@
 				{#each diys as diy, index}
 					<li class="flex flex-col justify-between gap-4 sm:flex-row">
 						<div class="flex gap-6">
-							<svelte:component this={diy.icon} class="size-12 min-w-8 text-primary" />
+							<diy.icon class="size-12 min-w-8 text-primary" />
 							<div class="flex flex-col">
 								<h4 class="text-lg font-semibold">{diy.name}</h4>
 								<p class="text-muted-foreground">{diy.description}</p>
 							</div>
 						</div>
-						<Button href={$page.url + diy.url} variant="outline" class="ml-auto self-center">
+						<Button href={page.url + diy.url} variant="outline" class="ml-auto self-center">
 							Visit
 							<ChevronRight class="ml-2 size-4" />
 						</Button>
diff --git a/src/routes/2023/diy/card-creator/+page.svelte b/src/routes/2023/diy/card-creator/+page.svelte
index 54c7fb5..bf058aa 100644
--- a/src/routes/2023/diy/card-creator/+page.svelte
+++ b/src/routes/2023/diy/card-creator/+page.svelte
@@ -35,29 +35,33 @@
 	// VARIABLES & TYPES
 	type PossibleItem = (typeof pictures)[number] | typeof textElement;
 	type RecursiveNonNullable<T> = { [K in keyof T]-?: RecursiveNonNullable<NonNullable<T[K]>> };
-	let availableItems = [
-		...pictures.map(picture => ({
-			id: `decoration`,
-			item: picture
-		})),
-		...[
-			{
-				id: `text`,
-				item: textElement
-			}
-		]
-	].map((item, index) => ({ ...item, id: `${item.id}-${index}` })) satisfies RecursiveNonNullable<
-		typeof placedItems
-	>;
+	let availableItems = $state(
+		[
+			...pictures.map(picture => ({
+				id: `decoration`,
+				item: picture
+			})),
+			...[
+				{
+					id: `text`,
+					item: textElement
+				}
+			]
+		].map((item, index) => ({ ...item, id: `${item.id}-${index}` })) satisfies RecursiveNonNullable<
+			typeof placedItems
+		>
+	);
 	let placedItems: {
 		id: string;
 		item: PossibleItem | null;
-	}[] = Array.from({ length: cardSize }, (_, i) => ({
-		id: i.toString(),
-		item: null
-	}));
+	}[] = $state(
+		Array.from({ length: cardSize }, (_, i) => ({
+			id: i.toString(),
+			item: null
+		}))
+	);
 
-	let currentCardBackground = 0;
+	let currentCardBackground = $state(0);
 	const cardBackgroundColors = [
 		"hsl(var(--primary))",
 		"darkorchid",
@@ -77,17 +81,19 @@
 		textColor: (typeof styles)["colors"][number];
 		fontSize: keyof (typeof styles)["fontSizes"];
 	};
-	let focusedTextAreaId: ReturnType<typeof crypto.randomUUID> | undefined;
-	let focusedTextArea: (typeof registeredTextAreas)[keyof typeof registeredTextAreas];
-	let textAreaFocusTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
-	$: if (focusedTextAreaId) focusedTextArea = registeredTextAreas[focusedTextAreaId]!;
 	const registeredTextAreas: Record<
 		string,
 		{
 			element: HTMLTextAreaElement;
 			settings: TextAreaSettings;
 		}
-	> = {};
+	> = $state({});
+	let focusedTextAreaId = $state<ReturnType<typeof crypto.randomUUID>>();
+	let focusedTextArea = $state<(typeof registeredTextAreas)[keyof typeof registeredTextAreas]>();
+	let textAreaFocusTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
+	$effect(() => {
+		if (focusedTextAreaId) focusedTextArea = registeredTextAreas[focusedTextAreaId]!;
+	});
 
 	// CALLBACKS & UTILS
 	function idToInt(id: string) {
@@ -210,7 +216,7 @@
 		focusedTextAreaId = id;
 	}
 
-	function updateTextAreaStyle(textArea: typeof focusedTextArea) {
+	function updateTextAreaStyle(textArea: NonNullable<typeof focusedTextArea>) {
 		textArea.element.style.fontFamily = styles.fonts[textArea.settings.fontFamily].join(", ");
 		textArea.element.style.color = textArea.settings.textColor;
 		textArea.element.style.fontSize = styles.fontSizes[textArea.settings.fontSize][1].lineHeight;
@@ -233,10 +239,12 @@
 	<Card.Root>
 		<Card.Header class="flex flex-row items-center gap-4 space-y-0">
 			<Tooltip.Root>
-				<Tooltip.Trigger asChild let:builder>
-					<Button builders={[builder]} size="icon" href="." class="mr-6">
-						<ChevronLeft />
-					</Button>
+				<Tooltip.Trigger>
+					{#snippet child({ props })}
+						<Button {...props} size="icon" href="." class="mr-6">
+							<ChevronLeft />
+						</Button>
+					{/snippet}
 				</Tooltip.Trigger>
 				<Tooltip.Content>Back to the dashboard</Tooltip.Content>
 			</Tooltip.Root>
@@ -258,8 +266,8 @@
 						outline: "2px solid hsl(var(--accent))"
 					}
 				}}
-				on:consider={e => itemDropConsider(e.detail)}
-				on:finalize={e => itemDropEnd(e.detail)}
+				onconsider={e => itemDropConsider(e.detail)}
+				onfinalize={e => itemDropEnd(e.detail)}
 			>
 				{#each availableItems.filter(item => item.item) as item (item.id)}
 					{@const element = item.item}
@@ -282,14 +290,16 @@
 				<span class="font-semibold">Background color:</span>
 				{#each cardBackgroundColors.entries() as [index, borderColor]}
 					<button
-						class="h-8 w-8 rounded-full outline-4 outline-offset-2 hover:outline hover:outline-foreground"
-						class:outline={index === currentCardBackground}
-						class:outline-primary={index === currentCardBackground}
+						aria-label="Background color"
+						class={[
+							"size-8 rounded-full outline-4 outline-offset-2 hover:outline hover:outline-foreground",
+							{
+								"outline outline-primary": index === currentCardBackground
+							}
+						]}
 						style="background-color: {borderColor};"
-						on:click={() => {
-							currentCardBackground = index;
-						}}
-					/>
+						onclick={() => (currentCardBackground = index)}
+					></button>
 				{/each}
 			</div>
 			<!-- Card -->
@@ -309,20 +319,19 @@
 							outline: "2px solid hsl(var(--accent))"
 						}
 					}}
-					on:consider={e => cardDropConsider(e.detail)}
-					on:finalize={e => cardDropEnd(e.detail)}
+					onconsider={e => cardDropConsider(e.detail)}
+					onfinalize={e => cardDropEnd(e.detail)}
 				>
 					{#each placedItems as item (item.id)}
 						<div
 							animate:flip={{ duration: flipDurationMs }}
-							class="relative flex items-center justify-center"
-							class:p-4={item.item}
+							class={["relative flex items-center justify-center", item.item && "p-4"]}
 						>
 							{#if Object.hasOwn(item, SHADOW_ITEM_MARKER_PROPERTY_NAME)}
 								<div
 									in:fade={{ duration: flipDurationMs, easing: cubicIn }}
 									class="visible absolute inset-0 rounded-2xl border border-dashed border-gray-500 bg-black/30"
-								/>
+								></div>
 							{:else if item.item}
 								{@const element = item.item}
 								{#if element.type === "decoration"}
@@ -330,14 +339,14 @@
 								{:else if element.type === "text"}
 									<textarea
 										placeholder="Enter your text here"
-										on:focus={e => {
+										onfocus={e => {
 											const target = e.target;
 											if (!target) return;
 											textAreaFocused(target);
 										}}
-										on:focusout={textAreaUnfocused}
+										onfocusout={textAreaUnfocused}
 										class="size-full resize-none rounded-2xl bg-transparent p-2"
-									/>
+									></textarea>
 								{/if}
 								<!--{:else}-->
 								<!-- DEBUG -->
@@ -356,12 +365,16 @@
 							<span class="font-semibold">Font:</span>
 							{#each Object.keys(styles["fonts"]) as style}
 								<button
-									class="underline-offset-4 hover:underline hover:decoration-foreground"
-									class:underline={style === focusedTextArea.settings.fontFamily}
-									class:decoration-primary={style === focusedTextArea.settings.fontFamily}
-									class:text-primary={style === focusedTextArea.settings.fontFamily}
-									on:click={() => {
-										focusedTextArea.settings.fontFamily = style;
+									class={[
+										"underline-offset-4 hover:underline hover:decoration-foreground",
+										{
+											"text-primary underline decoration-primary":
+												style === focusedTextArea?.settings.fontFamily
+										}
+									]}
+									onclick={() => {
+										if (!focusedTextArea) return;
+										focusedTextArea.settings.fontFamily = style as TextAreaSettings["fontFamily"];
 										updateTextAreaStyle(focusedTextArea);
 										focusedTextArea.element.focus();
 									}}
@@ -374,28 +387,37 @@
 							<span class="font-semibold">Text color:</span>
 							{#each styles["colors"] as color}
 								<button
-									class="h-8 w-8 rounded-full hover:ring-4 hover:ring-foreground"
-									class:ring-4={color === focusedTextArea.settings.textColor}
-									class:ring-primary={color === focusedTextArea.settings.textColor}
+									aria-label="Text color"
+									class={[
+										"h-8 w-8 rounded-full hover:ring-4 hover:ring-foreground",
+										{
+											"ring-4 ring-primary": color === focusedTextArea?.settings.textColor
+										}
+									]}
 									style="background-color: {color};"
-									on:click={() => {
+									onclick={() => {
+										if (!focusedTextArea) return;
 										focusedTextArea.settings.textColor = color;
 										updateTextAreaStyle(focusedTextArea);
 										focusedTextArea.element.focus();
 									}}
-								/>
+								></button>
 							{/each}
 						</div>
 						<div class="flex items-center gap-4">
 							<span class="font-semibold">Font size:</span>
 							{#each Object.keys(styles["fontSizes"]) as size}
 								<button
-									class="underline-offset-4 hover:underline hover:decoration-foreground"
-									class:underline={size === focusedTextArea.settings.fontSize}
-									class:decoration-primary={size === focusedTextArea.settings.fontSize}
-									class:text-primary={size === focusedTextArea.settings.fontSize}
-									on:click={() => {
-										focusedTextArea.settings.fontSize = size;
+									class={[
+										"underline-offset-4 hover:underline hover:decoration-foreground",
+										{
+											"text-primary underline decoration-primary":
+												size === focusedTextArea?.settings.fontSize
+										}
+									]}
+									onclick={() => {
+										if (!focusedTextArea) return;
+										focusedTextArea.settings.fontSize = size as TextAreaSettings["fontSize"];
 										updateTextAreaStyle(focusedTextArea);
 										focusedTextArea.element.focus();
 									}}
diff --git a/src/routes/2023/diy/snow-globe-creator/+page.svelte b/src/routes/2023/diy/snow-globe-creator/+page.svelte
index 39f424d..ebf21a9 100644
--- a/src/routes/2023/diy/snow-globe-creator/+page.svelte
+++ b/src/routes/2023/diy/snow-globe-creator/+page.svelte
@@ -13,7 +13,7 @@
 		alt: string;
 		show: boolean;
 	};
-	const imagesToShow: Image[] = [
+	const imagesToShow = $state<Image[]>([
 		{
 			src: "https://www.freeiconspng.com/uploads/snowman-png-29.png",
 			alt: "Snowman",
@@ -29,20 +29,22 @@
 			alt: "Santa Claus",
 			show: false
 		}
-	];
+	]);
 
-	let borderHex = "#000000";
-	let fillHex = "#ffffff";
+	let borderHex = $state("#000000");
+	let fillHex = $state("#ffffff");
 </script>
 
 <div class="container my-8">
 	<Card.Root>
 		<Card.Header class="flex flex-row items-center gap-4 space-y-0">
 			<Tooltip.Root>
-				<Tooltip.Trigger asChild let:builder>
-					<Button builders={[builder]} size="icon" href="." class="mr-6">
-						<ChevronLeft />
-					</Button>
+				<Tooltip.Trigger>
+					{#snippet child({ props })}
+						<Button {...props} size="icon" href="." class="mr-6">
+							<ChevronLeft />
+						</Button>
+					{/snippet}
 				</Tooltip.Trigger>
 				<Tooltip.Content>Back to the dashboard</Tooltip.Content>
 			</Tooltip.Root>
@@ -72,9 +74,9 @@
 				<div class="flex flex-col gap-4">
 					<div class="flex items-center gap-4">
 						<span class="font-semibold">Figures to show:</span>
-						{#each imagesToShow as { alt, show }, index}
+						{#each imagesToShow as { alt }, index}
 							<div class="flex items-center space-x-2">
-								<Checkbox id={index.toString()} bind:checked={show} />
+								<Checkbox id={index.toString()} bind:checked={imagesToShow[index]!.show} />
 								<Label for={index.toString()}>{alt}</Label>
 							</div>
 						{/each}
@@ -92,7 +94,7 @@
 						{/if}
 					</div>
 				</div>
-			</section></Card.Content
-		>
+			</section>
+		</Card.Content>
 	</Card.Root>
 </div>
diff --git a/src/routes/2023/memory-game/+page.svelte b/src/routes/2023/memory-game/+page.svelte
index d7f7608..a250e1d 100644
--- a/src/routes/2023/memory-game/+page.svelte
+++ b/src/routes/2023/memory-game/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { onDestroy, onMount } from "svelte";
 	import { ChevronLeft, Club } from "lucide-svelte";
 	import { Button } from "$lib/components/ui/button";
 	import { Skeleton } from "$lib/components/ui/skeleton";
@@ -19,31 +18,32 @@
 		"6x7": [6, 7],
 		"6x8": [6, 8]
 	} as const;
-	let gridWidth = 4;
-	let gridHeight = 4;
-	let cards: number[] = [];
-	$: cards = Array.from({ length: 24 }, (_, i) => i + 1) // 1 to 24
-		.sort(() => Math.random() - 0.5) // shuffle
-		.slice(0, (gridWidth * gridHeight) / 2) // take the correct amount of cards
-		.flatMap(n => [n, n]) // duplicate
-		.sort(() => Math.random() - 0.5); // reshuffle
+	let gridWidth = $state(4);
+	let gridHeight = $state(4);
+	let cards = $derived(
+		Array.from({ length: 24 }, (_, i) => i + 1) // 1 to 24
+			.sort(() => Math.random() - 0.5) // shuffle
+			.slice(0, (gridWidth * gridHeight) / 2) // take the correct amount of cards
+			.flatMap(n => [n, n]) // duplicate
+			.sort(() => Math.random() - 0.5) // reshuffle
+	);
 
 	// Game state
-	let firstCard: number | null = null;
-	let secondCard: number | null = null;
-	let firstCardIndex: number | null = null;
-	let secondCardIndex: number | null = null;
-	let pairsFoundIndex: number[] = [];
+	let firstCard = $state<number | null>(null);
+	let secondCard = $state<number | null>(null);
+	let firstCardIndex = $state<number | null>(null);
+	let secondCardIndex = $state<number | null>(null);
+	let pairsFoundIndex = $state<number[]>([]);
 
-	let ready = true;
-	let gameStarted = false;
-	let timerStarted = false;
-	let timer = 0;
-	let interval: ReturnType<typeof setInterval>;
+	let ready = $state(true);
+	let gameStarted = $state(false);
+	let timerStarted = $state(false);
+	let timer = $state(0);
+	let interval = $state<ReturnType<typeof setInterval>>();
 
-	let cooldown = 2500;
-	let tries = 0;
-	let score = 0;
+	let cooldown = $state(2500);
+	let tries = $state(0);
+	let score = $state(0);
 
 	function hideCards(callback?: () => void) {
 		firstCard = null;
@@ -88,52 +88,57 @@
 		return Math.floor(baseScore + timeScore + tryScore);
 	}
 
-	$: if ((firstCard !== null || secondCard !== null) && !gameStarted) {
-		gameStarted = true;
-		timerStarted = true;
-		interval = setInterval(() => {
-			timer++;
-		}, 1000);
-	}
+	$effect(() => {
+		if ((firstCard !== null || secondCard !== null) && !gameStarted) {
+			gameStarted = true;
+			timerStarted = true;
+			interval = setInterval(() => {
+				timer++;
+			}, 1000);
+		}
+	});
 
-	$: if (firstCard !== null && secondCard !== null) {
-		// Two cards have been flipped
-		tries++;
-		if (firstCard === secondCard) {
-			// Match
-			pairsFoundIndex = [...pairsFoundIndex, firstCardIndex!, secondCardIndex!];
-			// The score is the percentage of pairs found compared to the time it took to find them
-			score = calculateScore();
-			hideCards();
-			if (pairsFoundIndex.length === cards.length) {
-				// All pairs found
-				timerStarted = false;
-				clearInterval(interval);
+	$effect(() => {
+		if (firstCard !== null && secondCard !== null) {
+			// Two cards have been flipped
+			tries++;
+			if (firstCard === secondCard) {
+				// Match
+				pairsFoundIndex = [...pairsFoundIndex, firstCardIndex!, secondCardIndex!];
+				// The score is the percentage of pairs found compared to the time it took to find them
+				score = calculateScore();
+				hideCards();
+				if (pairsFoundIndex.length === cards.length) {
+					// All pairs found
+					timerStarted = false;
+					clearInterval(interval);
+				}
+			} else {
+				// Reset
+				setTimeout(hideCards, cooldown);
 			}
-		} else {
-			// Reset
-			setTimeout(hideCards, cooldown);
 		}
-	}
+	});
 
-	let localStorageHighScore: number | null;
-	onMount(() => {
+	let localStorageHighScore = $state<number | null>();
+	$effect(() => {
 		localStorageHighScore = localStorage.getItem("memory-game-high-score")
 			? parseInt(localStorage.getItem("memory-game-high-score")!)
 			: null;
+		return () => clearInterval(interval);
 	});
-
-	onDestroy(() => clearInterval(interval));
 </script>
 
 <div class="container my-8">
 	<Card.Root>
 		<Card.Header class="flex flex-row items-center gap-4">
 			<Tooltip.Root>
-				<Tooltip.Trigger asChild let:builder>
-					<Button builders={[builder]} size="icon" href="." class="mr-6">
-						<ChevronLeft />
-					</Button>
+				<Tooltip.Trigger>
+					{#snippet child({ props })}
+						<Button {...props} size="icon" href="." class="mr-6">
+							<ChevronLeft />
+						</Button>
+					{/snippet}
 				</Tooltip.Trigger>
 				<Tooltip.Content>Back to the dashboard</Tooltip.Content>
 			</Tooltip.Root>
@@ -145,8 +150,10 @@
 		</Card.Header>
 		<Card.Content>
 			<div
-				class="mt-8 flex flex-col gap-8 lg:mb-8 lg:grid lg:grid-cols-2"
-				class:max-lg:!flex-col-reverse={!timerStarted && gameStarted}
+				class={[
+					"mt-8 flex flex-col gap-8 lg:mb-8 lg:grid lg:grid-cols-2",
+					{ "max-lg:!flex-col-reverse": !timerStarted && gameStarted }
+				]}
 			>
 				<!-- Playing field -->
 				<div
@@ -160,7 +167,7 @@
 							secondCardIndex === index}
 						<button
 							type="button"
-							on:click={() => {
+							onclick={() => {
 								if (firstCard === null) {
 									firstCard = number;
 									firstCardIndex = index;
@@ -169,8 +176,12 @@
 									secondCardIndex = index;
 								}
 							}}
-							class="aspect-[7/10] h-32 shadow-lg duration-200 perspective-1000 [&:not(:disabled)]:hover:scale-105"
-							class:brightness-75={firstCard !== null && secondCard !== null && !isFlipped}
+							class={[
+								"aspect-[7/10] h-32 shadow-lg duration-200 perspective-1000 [&:not(:disabled)]:hover:scale-105",
+								{
+									"brightness-75": firstCard !== null && secondCard !== null && !isFlipped
+								}
+							]}
 							disabled={!ready
 								? true
 								: firstCard !== null && secondCard !== null
@@ -178,8 +189,10 @@
 									: isFlipped}
 						>
 							<div
-								class="relative size-full transition-transform duration-700 transform-style-3d"
-								class:rotate-y-180={isFlipped}
+								class={[
+									"relative size-full transition-transform duration-700 transform-style-3d",
+									isFlipped && "rotate-y-180"
+								]}
 							>
 								<!-- Back -->
 								<div
@@ -225,15 +238,17 @@
 								{localStorageHighScore ?? 0}
 							</p>
 							<AlertDialog.Root>
-								<AlertDialog.Trigger asChild let:builder>
-									<Button
-										builders={[builder]}
-										variant="destructive"
-										class="mt-8 lg:mt-16"
-										disabled={tries < 1}
-									>
-										Restart game
-									</Button>
+								<AlertDialog.Trigger>
+									{#snippet child({ props })}
+										<Button
+											{...props}
+											variant="destructive"
+											class="mt-8 lg:mt-16"
+											disabled={tries < 1}
+										>
+											Restart game
+										</Button>
+									{/snippet}
 								</AlertDialog.Trigger>
 								<AlertDialog.Content>
 									<AlertDialog.Header>
@@ -244,9 +259,7 @@
 									</AlertDialog.Header>
 									<AlertDialog.Footer>
 										<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
-										<AlertDialog.Action on:click={() => resetGame(true)}>
-											Restart
-										</AlertDialog.Action>
+										<AlertDialog.Action onclick={() => resetGame(true)}>Restart</AlertDialog.Action>
 									</AlertDialog.Footer>
 								</AlertDialog.Content>
 							</AlertDialog.Root>
@@ -275,7 +288,7 @@
 								<span class="font-bold italic">New high score: {score}</span>
 							</p>
 						{/if}
-						<Button class="mt-16" on:click={() => resetGame(true)}>Start a new game</Button>
+						<Button class="mt-16" onclick={() => resetGame(true)}>Start a new game</Button>
 					</div>
 				{:else}
 					<!-- Game configuration -->
@@ -287,12 +300,15 @@
 							<!-- Grid size -->
 							<p><span class="font-bold">Grid size:</span> {gridWidth}x{gridHeight}</p>
 							<Slider
+								type="multiple"
 								max={Object.keys(gridPossibilities).length - 1}
 								step={1}
 								value={[Object.keys(gridPossibilities).indexOf(`${gridWidth}x${gridHeight}`)]}
 								onValueChange={([value]) => {
 									[gridWidth, gridHeight] =
-										gridPossibilities[Object.keys(gridPossibilities)[value]];
+										gridPossibilities[
+											Object.keys(gridPossibilities)[value] as typeof gridPossibilities
+										];
 									resetGame();
 								}}
 								class="mt-4"
@@ -300,11 +316,13 @@
 							<!-- Cooldown -->
 							<p class="mt-8"><span class="font-bold">Cooldown:</span> {cooldown / 1000}s</p>
 							<Slider
+								type="multiple"
 								min={500}
 								max={5000}
 								step={500}
 								value={[cooldown]}
 								onValueChange={([value]) => {
+									if (!value) return;
 									cooldown = value;
 								}}
 								class="mt-4"
diff --git a/src/routes/2023/productivity-dashboard/+page.svelte b/src/routes/2023/productivity-dashboard/+page.svelte
index 8ffdc25..9c3f713 100644
--- a/src/routes/2023/productivity-dashboard/+page.svelte
+++ b/src/routes/2023/productivity-dashboard/+page.svelte
@@ -17,7 +17,7 @@
 	import * as Card from "$lib/components/ui/card";
 	import * as Tooltip from "$lib/components/ui/tooltip";
 
-	let container: HTMLDivElement;
+	let container = $state<HTMLDivElement>();
 
 	function tasksToByElf(tasks: Task[]) {
 		const tasksByElf: { id: number; elf: string; numberOfTasks: number }[] = [];
@@ -71,10 +71,12 @@
 	<Card.Root>
 		<Card.Header class="flex flex-row items-center gap-4">
 			<Tooltip.Root>
-				<Tooltip.Trigger asChild let:builder>
-					<Button builders={[builder]} size="icon" href="." class="mr-6">
-						<ChevronLeft />
-					</Button>
+				<Tooltip.Trigger>
+					{#snippet child({ props })}
+						<Button {...props} size="icon" href="." class="mr-6">
+							<ChevronLeft />
+						</Button>
+					{/snippet}
 				</Tooltip.Trigger>
 				<Tooltip.Content>Back to the dashboard</Tooltip.Content>
 			</Tooltip.Root>
@@ -92,7 +94,7 @@
 				bind:this={container}
 				style="--vis-tooltip-background-color: hsl(var(--card)); --vis-tooltip-text-color: hsl(var(--accent-foreground));"
 			>
-				{#await fetch("https://advent.sveltesociety.dev/data/2023/day-five.json").then( res => res.json() )}
+				{#await fetch("https://advent.sveltesociety.dev/data/2023/day-five.json").then(res => res.json() as Promise<Task[]>)}
 					<!-- History -->
 					<Skeleton class="h-10 w-28" />
 					<div class="flex items-center gap-4 py-4">
@@ -171,10 +173,15 @@
 						},
 						{
 							title: "Elf with the most tasks in a day",
-							value: orderedDays.reduce((acc, day) => {
-								const max = day.tasks.reduce((a, b) => (a.numberOfTasks > b.numberOfTasks ? a : b));
-								return acc.numberOfTasks > max.numberOfTasks ? acc : max;
-							}).elf
+							value: orderedDays.reduce(
+								(acc, day) => {
+									const max = day.tasks.reduce((a, b) =>
+										a.numberOfTasks > b.numberOfTasks ? a : b
+									);
+									return acc.numberOfTasks > max.numberOfTasks ? acc : max;
+								},
+								{ elf: "", numberOfTasks: 0 }
+							).elf
 						},
 						{
 							title: "Cumulative time spent on tasks",

From 96b76020a44d085da57d7878834107bbc23fec14 Mon Sep 17 00:00:00 2001
From: WarningImHack3r <43064022+WarningImHack3r@users.noreply.github.com>
Date: Sat, 1 Feb 2025 22:54:42 +0100
Subject: [PATCH 6/8] Migration fixes

---
 src/lib/components/days/2023/Day2.svelte      |  6 +-
 src/lib/components/days/2023/Day3.svelte      | 61 ++++++++++---------
 src/routes/+layout.svelte                     |  8 ++-
 src/routes/2023/diy/card-creator/+page.svelte | 22 ++++---
 .../2023/diy/snow-globe-creator/+page.svelte  | 22 ++++---
 src/routes/2023/memory-game/+page.svelte      | 22 ++++---
 .../2023/productivity-dashboard/+page.svelte  | 22 ++++---
 7 files changed, 87 insertions(+), 76 deletions(-)

diff --git a/src/lib/components/days/2023/Day2.svelte b/src/lib/components/days/2023/Day2.svelte
index c5bf1b0..6d37cf1 100644
--- a/src/lib/components/days/2023/Day2.svelte
+++ b/src/lib/components/days/2023/Day2.svelte
@@ -45,7 +45,7 @@
 				variant="outline"
 				size="icon"
 				class="size-8 shrink-0 rounded-full"
-				on:click={() => updateCookiesCount(-1)}
+				onclick={() => updateCookiesCount(-1)}
 				disabled={cookiesCount <= 0}
 			>
 				<Minus class="size-4" />
@@ -78,7 +78,7 @@
 				variant="outline"
 				size="icon"
 				class="size-8 shrink-0 rounded-full"
-				on:click={() => updateCookiesCount(1)}
+				onclick={() => updateCookiesCount(1)}
 			>
 				<Plus class="size-4" />
 				<span class="sr-only">Increase</span>
@@ -99,7 +99,7 @@
 		</div>
 		<Button
 			class="w-full"
-			on:click={() => updateCookiesCount(-cookiesCount)}
+			onclick={() => updateCookiesCount(-cookiesCount)}
 			disabled={cookiesCount === 0}
 		>
 			Reset
diff --git a/src/lib/components/days/2023/Day3.svelte b/src/lib/components/days/2023/Day3.svelte
index e2db54a..a598ff6 100644
--- a/src/lib/components/days/2023/Day3.svelte
+++ b/src/lib/components/days/2023/Day3.svelte
@@ -23,24 +23,27 @@
 	);
 
 	let wasLastAdded = $state(false);
-	let weightLabel = $state("");
-	$effect(() => {
-		setTimeout(() => {
-			weightLabel =
-				sleighWeight > MAX_WEIGHT
-					? "Too heavy!"
-					: sleighWeight > MAX_WEIGHT / 2
-						? sleighWeight > MAX_WEIGHT * 0.9
-							? sleighWeight > MAX_WEIGHT * 0.99
-								? "Ready to go!"
-								: "Almost there!"
-							: "Kids will be happy!"
-						: sleighWeight > 0
-							? "Let's pack more!"
-							: "Empty sleigh";
-		}, 25);
+	let weightLabel = $derived.by(() => {
+		return sleighWeight > MAX_WEIGHT
+			? "Too heavy!"
+			: sleighWeight > MAX_WEIGHT / 2
+				? sleighWeight > MAX_WEIGHT * 0.9
+					? sleighWeight > MAX_WEIGHT * 0.99
+						? "Ready to go!"
+						: "Almost there!"
+					: "Kids will be happy!"
+				: sleighWeight > 0
+					? "Let's pack more!"
+					: "Empty sleigh";
 	});
 
+	function arePresentsEqual(
+		first: Awaited<typeof presents>[number],
+		second: Awaited<typeof presents>[number]
+	) {
+		return first.name === second.name && first.weight === second.weight;
+	}
+
 	// Day 13
 	// Returns a promise that resolves to an array of deliveries,
 	// each containing a list of presents to deliver.
@@ -68,7 +71,7 @@
 </script>
 
 <Card.Root class="flex flex-col">
-	<Tabs.Root>
+	<Tabs.Root value="manual">
 		<Card.Header class="flex items-center justify-between gap-2 xs:flex-row">
 			<div class="flex flex-col gap-1.5">
 				<Card.Title class="flex items-center gap-2">
@@ -143,13 +146,13 @@
 						</Card.Root>
 						<div class="grid grid-flow-col grid-rows-2 gap-2 overflow-x-auto pr-6">
 							{#each presents as present, i}
+								{@const CheckComponent = selectedPresents.some(selected =>
+									arePresentsEqual(selected, present)
+								)
+									? SquareCheck
+									: Square}
 								<div
-									class={[
-										"relative rounded-lg border bg-card text-card-foreground shadow-sm",
-										{
-											"border-primary": selectedPresents.includes(present)
-										}
-									]}
+									class="relative rounded-lg border bg-card text-card-foreground shadow-sm has-[:checked]:border-primary"
 								>
 									<input
 										name="Present {i + 1}"
@@ -159,19 +162,17 @@
 											const checked = e.target?.checked ?? false;
 											wasLastAdded = checked;
 											if (checked) {
-												selectedPresents = [...selectedPresents, present];
+												selectedPresents.push(present);
 											} else {
-												selectedPresents = selectedPresents.filter(p => p !== present);
+												selectedPresents = selectedPresents.filter(
+													p => !arePresentsEqual(p, present)
+												);
 											}
 										}}
 									/>
 									<div class="flex min-w-max flex-col px-6 py-4 peer-checked:text-primary">
 										<div class="flex items-center gap-2">
-											{#if selectedPresents.includes(present)}
-												<SquareCheck class="size-4 text-primary" />
-											{:else}
-												<Square class="size-4 text-primary" />
-											{/if}
+											<CheckComponent class="size-4 text-primary" />
 											<span>{present.name}</span>
 										</div>
 										<span class="text-muted-foreground">{present.weight} kg</span>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index afcce47..bf78db8 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -252,6 +252,7 @@
 					<img src="/github.svg" alt="GitHub" class="size-5 dark:invert" />
 					<span class="sr-only">GitHub</span>
 				</Button>
+
 				<DropdownMenu.Root bind:open={themeSwitcherOpen}>
 					<DropdownMenu.Trigger>
 						{#snippet child({ props })}
@@ -265,8 +266,9 @@
 									/>
 								</div>
 								<ChevronDown
-									class={"size-4 opacity-50 transition-transform" +
-										(themeSwitcherOpen ? " rotate-180" : "")}
+									class="size-4 opacity-50 transition-transform {themeSwitcherOpen
+										? 'rotate-180'
+										: ''}"
 								/>
 								<span class="sr-only">Change theme</span>
 							</Button>
@@ -278,7 +280,7 @@
 						<DropdownMenu.RadioGroup bind:value={theme}>
 							{#each themes as availableTheme}
 								<DropdownMenu.RadioItem
-									class="cursor-pointer data-[disabled]:opacity-100"
+									class="cursor-pointer data-[disabled]:opacity-75"
 									value={availableTheme.value}
 									disabled={theme === availableTheme.value}
 									onclick={() => {
diff --git a/src/routes/2023/diy/card-creator/+page.svelte b/src/routes/2023/diy/card-creator/+page.svelte
index bf058aa..4961fc1 100644
--- a/src/routes/2023/diy/card-creator/+page.svelte
+++ b/src/routes/2023/diy/card-creator/+page.svelte
@@ -238,16 +238,18 @@
 <div class="container my-8">
 	<Card.Root>
 		<Card.Header class="flex flex-row items-center gap-4 space-y-0">
-			<Tooltip.Root>
-				<Tooltip.Trigger>
-					{#snippet child({ props })}
-						<Button {...props} size="icon" href="." class="mr-6">
-							<ChevronLeft />
-						</Button>
-					{/snippet}
-				</Tooltip.Trigger>
-				<Tooltip.Content>Back to the dashboard</Tooltip.Content>
-			</Tooltip.Root>
+			<Tooltip.Provider>
+				<Tooltip.Root>
+					<Tooltip.Trigger>
+						{#snippet child({ props })}
+							<Button {...props} size="icon" href="." class="mr-6">
+								<ChevronLeft />
+							</Button>
+						{/snippet}
+					</Tooltip.Trigger>
+					<Tooltip.Content>Back to the dashboard</Tooltip.Content>
+				</Tooltip.Root>
+			</Tooltip.Provider>
 			<ScrollText class="text-primary" />
 			<div class="flex flex-col">
 				<Card.Title>Christmas Card Creator</Card.Title>
diff --git a/src/routes/2023/diy/snow-globe-creator/+page.svelte b/src/routes/2023/diy/snow-globe-creator/+page.svelte
index ebf21a9..58264b9 100644
--- a/src/routes/2023/diy/snow-globe-creator/+page.svelte
+++ b/src/routes/2023/diy/snow-globe-creator/+page.svelte
@@ -38,16 +38,18 @@
 <div class="container my-8">
 	<Card.Root>
 		<Card.Header class="flex flex-row items-center gap-4 space-y-0">
-			<Tooltip.Root>
-				<Tooltip.Trigger>
-					{#snippet child({ props })}
-						<Button {...props} size="icon" href="." class="mr-6">
-							<ChevronLeft />
-						</Button>
-					{/snippet}
-				</Tooltip.Trigger>
-				<Tooltip.Content>Back to the dashboard</Tooltip.Content>
-			</Tooltip.Root>
+			<Tooltip.Provider>
+				<Tooltip.Root>
+					<Tooltip.Trigger>
+						{#snippet child({ props })}
+							<Button {...props} size="icon" href="." class="mr-6">
+								<ChevronLeft />
+							</Button>
+						{/snippet}
+					</Tooltip.Trigger>
+					<Tooltip.Content>Back to the dashboard</Tooltip.Content>
+				</Tooltip.Root>
+			</Tooltip.Provider>
 			<Snowflake class="text-primary" />
 			<div class="flex flex-col">
 				<Card.Title>Snow Globe Creator</Card.Title>
diff --git a/src/routes/2023/memory-game/+page.svelte b/src/routes/2023/memory-game/+page.svelte
index a250e1d..a72fd2a 100644
--- a/src/routes/2023/memory-game/+page.svelte
+++ b/src/routes/2023/memory-game/+page.svelte
@@ -132,16 +132,18 @@
 <div class="container my-8">
 	<Card.Root>
 		<Card.Header class="flex flex-row items-center gap-4">
-			<Tooltip.Root>
-				<Tooltip.Trigger>
-					{#snippet child({ props })}
-						<Button {...props} size="icon" href="." class="mr-6">
-							<ChevronLeft />
-						</Button>
-					{/snippet}
-				</Tooltip.Trigger>
-				<Tooltip.Content>Back to the dashboard</Tooltip.Content>
-			</Tooltip.Root>
+			<Tooltip.Provider>
+				<Tooltip.Root>
+					<Tooltip.Trigger>
+						{#snippet child({ props })}
+							<Button {...props} size="icon" href="." class="mr-6">
+								<ChevronLeft />
+							</Button>
+						{/snippet}
+					</Tooltip.Trigger>
+					<Tooltip.Content>Back to the dashboard</Tooltip.Content>
+				</Tooltip.Root>
+			</Tooltip.Provider>
 			<Club class="text-primary" />
 			<div class="flex flex-col">
 				<Card.Title>Memory Game</Card.Title>
diff --git a/src/routes/2023/productivity-dashboard/+page.svelte b/src/routes/2023/productivity-dashboard/+page.svelte
index 9c3f713..91490d3 100644
--- a/src/routes/2023/productivity-dashboard/+page.svelte
+++ b/src/routes/2023/productivity-dashboard/+page.svelte
@@ -70,16 +70,18 @@
 <div class="container my-8">
 	<Card.Root>
 		<Card.Header class="flex flex-row items-center gap-4">
-			<Tooltip.Root>
-				<Tooltip.Trigger>
-					{#snippet child({ props })}
-						<Button {...props} size="icon" href="." class="mr-6">
-							<ChevronLeft />
-						</Button>
-					{/snippet}
-				</Tooltip.Trigger>
-				<Tooltip.Content>Back to the dashboard</Tooltip.Content>
-			</Tooltip.Root>
+			<Tooltip.Provider>
+				<Tooltip.Root>
+					<Tooltip.Trigger>
+						{#snippet child({ props })}
+							<Button {...props} size="icon" href="." class="mr-6">
+								<ChevronLeft />
+							</Button>
+						{/snippet}
+					</Tooltip.Trigger>
+					<Tooltip.Content>Back to the dashboard</Tooltip.Content>
+				</Tooltip.Root>
+			</Tooltip.Provider>
 			<Gauge class="text-primary" />
 			<div class="flex flex-col">
 				<Card.Title>Elf Productivity Dashboard</Card.Title>

From 81dbf30ee054376cd135e3a352110785c26a80d1 Mon Sep 17 00:00:00 2001
From: WarningImHack3r <43064022+WarningImHack3r@users.noreply.github.com>
Date: Sat, 1 Feb 2025 23:50:52 +0100
Subject: [PATCH 7/8] More fixes

---
 src/lib/components/days/2023/Day1.svelte      | 102 ++++++++----------
 .../productivity-dashboard/DataTable.svelte   |  44 +++++---
 .../SortingButton.svelte                      |  24 +++++
 3 files changed, 97 insertions(+), 73 deletions(-)
 create mode 100644 src/routes/2023/productivity-dashboard/SortingButton.svelte

diff --git a/src/lib/components/days/2023/Day1.svelte b/src/lib/components/days/2023/Day1.svelte
index 5b030ee..6d23208 100644
--- a/src/lib/components/days/2023/Day1.svelte
+++ b/src/lib/components/days/2023/Day1.svelte
@@ -15,16 +15,6 @@
 	let { kids }: Props = $props();
 	let search = $state("");
 	let open = $state(false);
-
-	// We want to refocus the trigger button when the user selects
-	// an item from the list so users can continue navigating the
-	// rest of the form with the keyboard.
-	function closeAndFocusTrigger(triggerId: string) {
-		open = false;
-		tick().then(() => {
-			document.getElementById(triggerId)?.focus();
-		});
-	}
 </script>
 
 <Card.Root>
@@ -48,54 +38,52 @@
 			</div>
 		{:then kids}
 			<Popover.Root bind:open>
-				{#snippet children({ ids })}
-					<Popover.Trigger asChild>
-						{#snippet children({ builder })}
-							<div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
-								<Button
-									builders={[builder]}
-									variant="outline"
-									role="combobox"
-									aria-expanded={open}
-									class="w-52 justify-between"
+				<Popover.Trigger>
+					{#snippet child({ props })}
+						<div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
+							<Button
+								{...props}
+								variant="outline"
+								role="combobox"
+								aria-expanded={open}
+								class="w-52 justify-between"
+							>
+								{kids.find(f => f.name === search)?.name ?? "Select a child..."}
+								<ChevronsUpDown class="ml-2 size-4 shrink-0 opacity-50" />
+							</Button>
+							<p class="text-muted-foreground">
+								<span class="font-semibold text-accent-foreground">
+									{kids.filter(f => f.tally > 0).length}
+								</span>
+								nice children •{" "}
+								<span class="font-semibold text-accent-foreground">
+									{kids.filter(f => f.tally < 0).length}
+								</span> naughty children
+							</p>
+						</div>
+					{/snippet}
+				</Popover.Trigger>
+				<Popover.Content class="w-52 p-0">
+					<Command.Root>
+						<Command.Input placeholder="Search children..." />
+						<Command.Empty>No child found.</Command.Empty>
+						<Command.Group class="max-h-48 overflow-y-auto">
+							{#each kids as kid}
+								<Command.Item
+									value={kid.name}
+									onSelect={() => {
+										search = kid.name;
+										open = false;
+									}}
 								>
-									{kids.find(f => f.name === search)?.name ?? "Select a child..."}
-									<ChevronsUpDown class="ml-2 size-4 shrink-0 opacity-50" />
-								</Button>
-								<p class="text-muted-foreground">
-									<span class="font-semibold text-accent-foreground">
-										{kids.filter(f => f.tally > 0).length}
-									</span>
-									nice children •{" "}
-									<span class="font-semibold text-accent-foreground">
-										{kids.filter(f => f.tally < 0).length}
-									</span> naughty children
-								</p>
-							</div>
-						{/snippet}
-					</Popover.Trigger>
-					<Popover.Content class="w-52 p-0">
-						<Command.Root>
-							<Command.Input placeholder="Search children..." />
-							<Command.Empty>No child found.</Command.Empty>
-							<Command.Group class="max-h-48 overflow-y-auto">
-								{#each kids as kid}
-									<Command.Item
-										value={kid.name}
-										onSelect={currentValue => {
-											search = currentValue;
-											closeAndFocusTrigger(ids.trigger);
-										}}
-									>
-										<Check class={cn("mr-2 size-4", search !== kid.name && "text-transparent")} />
-										{kid.name}
-										<span class="ml-auto text-muted-foreground">{kid.tally}</span>
-									</Command.Item>
-								{/each}
-							</Command.Group>
-						</Command.Root>
-					</Popover.Content>
-				{/snippet}
+									<Check class={cn("mr-2 size-4", search !== kid.name && "text-transparent")} />
+									{kid.name}
+									<span class="ml-auto text-muted-foreground">{kid.tally}</span>
+								</Command.Item>
+							{/each}
+						</Command.Group>
+					</Command.Root>
+				</Popover.Content>
 			</Popover.Root>
 			{#if search}
 				{@const tally = kids.find(f => f.name === search)?.tally ?? 0}
diff --git a/src/routes/2023/productivity-dashboard/DataTable.svelte b/src/routes/2023/productivity-dashboard/DataTable.svelte
index e18b792..3111642 100644
--- a/src/routes/2023/productivity-dashboard/DataTable.svelte
+++ b/src/routes/2023/productivity-dashboard/DataTable.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { createRawSnippet } from "svelte";
 	import {
+		type Column,
 		type ColumnDef,
 		type ColumnFiltersState,
 		type PaginationState,
@@ -11,21 +12,20 @@
 		getPaginationRowModel,
 		getSortedRowModel
 	} from "@tanstack/table-core";
-	import {
-		ArrowDownAZ,
-		ArrowUpDown,
-		ArrowDownZA,
-		ChevronDown,
-		ChevronLeft,
-		ChevronRight
-	} from "lucide-svelte";
+	import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-svelte";
 	import type { Task } from "$lib/components/days/2023/Day5.svelte";
 	import { Button } from "$lib/components/ui/button";
-	import { createSvelteTable, FlexRender, renderSnippet } from "$lib/components/ui/data-table";
+	import {
+		createSvelteTable,
+		FlexRender,
+		renderComponent,
+		renderSnippet
+	} from "$lib/components/ui/data-table";
 	import { Input } from "$lib/components/ui/input";
 	import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
 	import * as Pagination from "$lib/components/ui/pagination";
 	import * as Table from "$lib/components/ui/table";
+	import SortingButton from "./SortingButton.svelte";
 
 	let { tableData }: { tableData: Task[] } = $props();
 
@@ -34,17 +34,27 @@
 	let columnFilters = $state<ColumnFiltersState>([]);
 	let columnVisibility = $state<VisibilityState>({});
 
+	function setNextSorting<T>(column: Column<T>) {
+		const next = column.getNextSortingOrder();
+		if (!next) column.clearSorting();
+		else column.toggleSorting(next === "desc");
+	}
+
 	const columns: ColumnDef<Task>[] = [
 		{
 			accessorKey: "elf",
 			header: ({ column }) =>
+				renderComponent(SortingButton, {
+					name: "Elf",
+					sortingOrder: column.getIsSorted(),
+					onclick: () => setNextSorting(column)
+				}),
+			cell: ({ row }) =>
 				renderSnippet(
 					createRawSnippet(getName => ({
-						render: () =>
-							// column.toggleSorting(column.getIsSorted() === "asc")
-							`<button type="button">${getName()} sortable!</button>`
+						render: () => `<div class="font-semibold">${getName()}</div>`
 					})),
-					"Elf"
+					row.getValue("elf")
 				)
 		},
 		{
@@ -53,7 +63,7 @@
 			cell: ({ row }) => {
 				return renderSnippet(
 					createRawSnippet(getAmount => ({
-						render: () => `<div>${getAmount()}</div>`
+						render: () => `<div class="text-muted-foreground">${getAmount()}</div>`
 					})),
 					(() => {
 						switch (row.getValue("task")) {
@@ -172,9 +182,10 @@
 				{#each table.getAllColumns().filter(col => col.getCanHide()) as column (column.id)}
 					<DropdownMenu.CheckboxItem
 						class="cursor-pointer capitalize"
+						closeOnSelect={false}
 						bind:checked={() => column.getIsVisible(), v => column.toggleVisibility(!!v)}
 					>
-						{column.id}
+						{column.id.replace(/([A-Z][a-z])/g, " $1").replace(/(\d)/g, " $1")}
 					</DropdownMenu.CheckboxItem>
 				{/each}
 			</DropdownMenu.Content>
@@ -226,8 +237,9 @@
 		</div>
 		<Pagination.Root
 			class="mx-0 w-auto flex-row"
-			count={tableData.length}
+			count={table.getFilteredRowModel().rows.length}
 			perPage={pagination.pageSize}
+			onPageChange={page => table.setPageIndex(page - 1)}
 		>
 			{#snippet children({ pages, currentPage })}
 				<Pagination.Content>
diff --git a/src/routes/2023/productivity-dashboard/SortingButton.svelte b/src/routes/2023/productivity-dashboard/SortingButton.svelte
new file mode 100644
index 0000000..9eab6e1
--- /dev/null
+++ b/src/routes/2023/productivity-dashboard/SortingButton.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+	import { ArrowDownAZ, ArrowDownZA, ArrowUpDown } from "lucide-svelte";
+	import { type SortDirection } from "@tanstack/table-core";
+	import { Button } from "$lib/components/ui/button";
+
+	type Props = ComponentProps<typeof Button> & {
+		name: string;
+		sortingOrder: SortDirection | false;
+	};
+
+	let { name, sortingOrder, variant = "ghost", ...restProps }: Props = $props();
+</script>
+
+<Button {variant} {...restProps}>
+	{name}
+	{#if sortingOrder === "asc"}
+		<ArrowDownAZ class="ml-2 text-accent-foreground" />
+	{:else if sortingOrder === "desc"}
+		<ArrowDownZA class="ml-2 text-accent-foreground" />
+	{:else}
+		<ArrowUpDown class="ml-2" />
+	{/if}
+</Button>

From eb8bf2167e216049459d6b6d1831eaac6e9e1e9a Mon Sep 17 00:00:00 2001
From: WarningImHack3r <43064022+WarningImHack3r@users.noreply.github.com>
Date: Sun, 2 Feb 2025 00:04:30 +0100
Subject: [PATCH 8/8] Last fix

---
 src/routes/2023/memory-game/+page.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/routes/2023/memory-game/+page.svelte b/src/routes/2023/memory-game/+page.svelte
index a72fd2a..a8cdd51 100644
--- a/src/routes/2023/memory-game/+page.svelte
+++ b/src/routes/2023/memory-game/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from "svelte";
 	import { ChevronLeft, Club } from "lucide-svelte";
 	import { Button } from "$lib/components/ui/button";
 	import { Skeleton } from "$lib/components/ui/skeleton";
@@ -101,10 +102,10 @@
 	$effect(() => {
 		if (firstCard !== null && secondCard !== null) {
 			// Two cards have been flipped
-			tries++;
+			untrack(() => tries++);
 			if (firstCard === secondCard) {
 				// Match
-				pairsFoundIndex = [...pairsFoundIndex, firstCardIndex!, secondCardIndex!];
+				pairsFoundIndex.push(firstCardIndex!, secondCardIndex!);
 				// The score is the percentage of pairs found compared to the time it took to find them
 				score = calculateScore();
 				hideCards();