diff --git a/.oxlintrc.json b/.oxlintrc.json
index 56bc2c7..5957e03 100644
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -1,135 +1,135 @@
 {
-  "$schema": "./node_modules/oxlint/configuration_schema.json",
-  "plugins": ["typescript", "unicorn"],
-  "categories": {
-    "correctness": "off"
-  },
-  "env": {
-    "builtin": true,
-    "browser": true,
-    "commonjs": true,
-    "node": true,
-    "shared-node-browser": true
-  },
-  "rules": {
-    "for-direction": "error",
-    "no-async-promise-executor": "error",
-    "no-case-declarations": "error",
-    "no-class-assign": "error",
-    "no-compare-neg-zero": "error",
-    "no-cond-assign": "error",
-    "no-const-assign": "error",
-    "no-constant-binary-expression": "error",
-    "no-constant-condition": "error",
-    "no-control-regex": "error",
-    "no-debugger": "error",
-    "no-delete-var": "error",
-    "no-dupe-class-members": "error",
-    "no-dupe-else-if": "error",
-    "no-dupe-keys": "error",
-    "no-duplicate-case": "error",
-    "no-empty": "error",
-    "no-empty-character-class": "error",
-    "no-empty-pattern": "error",
-    "no-empty-static-block": "error",
-    "no-ex-assign": "error",
-    "no-extra-boolean-cast": "error",
-    "no-fallthrough": "error",
-    "no-func-assign": "error",
-    "no-global-assign": "error",
-    "no-import-assign": "error",
-    "no-invalid-regexp": "error",
-    "no-irregular-whitespace": "error",
-    "no-loss-of-precision": "error",
-    "no-new-native-nonconstructor": "error",
-    "no-nonoctal-decimal-escape": "error",
-    "no-obj-calls": "error",
-    "no-prototype-builtins": "error",
-    "no-redeclare": "error",
-    "no-regex-spaces": "error",
-    "no-self-assign": "error",
-    "no-setter-return": "error",
-    "no-shadow-restricted-names": "error",
-    "no-sparse-arrays": "error",
-    "no-this-before-super": "error",
-    "no-unexpected-multiline": "off",
-    "no-unsafe-finally": "error",
-    "no-unsafe-negation": "error",
-    "no-unsafe-optional-chaining": "error",
-    "no-unused-labels": "error",
-    "no-unused-private-class-members": "error",
-    "no-unused-vars": "error",
-    "no-useless-backreference": "error",
-    "no-useless-catch": "error",
-    "no-useless-escape": "error",
-    "no-with": "error",
-    "require-yield": "error",
-    "use-isnan": "error",
-    "valid-typeof": "error",
-    "@typescript-eslint/ban-ts-comment": "error",
-    "no-array-constructor": "error",
-    "@typescript-eslint/no-duplicate-enum-values": "error",
-    "@typescript-eslint/no-empty-object-type": "error",
-    "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/no-extra-non-null-assertion": "error",
-    "@typescript-eslint/no-misused-new": "error",
-    "@typescript-eslint/no-namespace": "error",
-    "@typescript-eslint/no-non-null-asserted-optional-chain": "error",
-    "@typescript-eslint/no-require-imports": "error",
-    "@typescript-eslint/no-this-alias": "error",
-    "@typescript-eslint/no-unnecessary-type-constraint": "error",
-    "@typescript-eslint/no-unsafe-declaration-merging": "error",
-    "@typescript-eslint/no-unsafe-function-type": "error",
-    "no-unused-expressions": "error",
-    "@typescript-eslint/no-wrapper-object-types": "error",
-    "@typescript-eslint/prefer-as-const": "error",
-    "@typescript-eslint/prefer-namespace-keyword": "error",
-    "@typescript-eslint/triple-slash-reference": "error",
-    "curly": "off",
-    "unicorn/empty-brace-spaces": "off",
-    "unicorn/no-nested-ternary": "off",
-    "unicorn/number-literal-case": "off"
-  },
-  "globals": {
-    "route": "readonly",
-    "Laravel": "readonly"
-  },
-  "ignorePatterns": [
-    "vendor",
-    "node_modules",
-    "public",
-    "bootstrap/ssr",
-    "tailwind.config.js",
-    "resources/js/components/ui/*"
-  ],
-  "overrides": [
-    {
-      "files": ["**/*.ts", "**/*.tsx", "**/*.mts", "**/*.cts"],
-      "rules": {
-        "no-class-assign": "off",
-        "no-const-assign": "off",
-        "no-dupe-class-members": "off",
-        "no-dupe-keys": "off",
-        "no-func-assign": "off",
-        "no-import-assign": "off",
-        "no-new-native-nonconstructor": "off",
-        "no-obj-calls": "off",
-        "no-redeclare": "off",
-        "no-setter-return": "off",
-        "no-this-before-super": "off",
-        "no-unsafe-negation": "off",
-        "no-var": "error",
-        "no-with": "off",
-        "prefer-rest-params": "error",
-        "prefer-spread": "error"
-      }
-    },
-    {
-      "files": ["*.svelte", "**/*.svelte"],
-      "rules": {
-        "no-inner-declarations": "off",
-        "no-self-assign": "off"
-      }
-    }
-  ]
+	"$schema": "./node_modules/oxlint/configuration_schema.json",
+	"plugins": ["typescript", "unicorn"],
+	"categories": {
+		"correctness": "off"
+	},
+	"env": {
+		"builtin": true,
+		"browser": true,
+		"commonjs": true,
+		"node": true,
+		"shared-node-browser": true
+	},
+	"rules": {
+		"for-direction": "error",
+		"no-async-promise-executor": "error",
+		"no-case-declarations": "error",
+		"no-class-assign": "error",
+		"no-compare-neg-zero": "error",
+		"no-cond-assign": "error",
+		"no-const-assign": "error",
+		"no-constant-binary-expression": "error",
+		"no-constant-condition": "error",
+		"no-control-regex": "error",
+		"no-debugger": "error",
+		"no-delete-var": "error",
+		"no-dupe-class-members": "error",
+		"no-dupe-else-if": "error",
+		"no-dupe-keys": "error",
+		"no-duplicate-case": "error",
+		"no-empty": "error",
+		"no-empty-character-class": "error",
+		"no-empty-pattern": "error",
+		"no-empty-static-block": "error",
+		"no-ex-assign": "error",
+		"no-extra-boolean-cast": "error",
+		"no-fallthrough": "error",
+		"no-func-assign": "error",
+		"no-global-assign": "error",
+		"no-import-assign": "error",
+		"no-invalid-regexp": "error",
+		"no-irregular-whitespace": "error",
+		"no-loss-of-precision": "error",
+		"no-new-native-nonconstructor": "error",
+		"no-nonoctal-decimal-escape": "error",
+		"no-obj-calls": "error",
+		"no-prototype-builtins": "error",
+		"no-redeclare": "error",
+		"no-regex-spaces": "error",
+		"no-self-assign": "error",
+		"no-setter-return": "error",
+		"no-shadow-restricted-names": "error",
+		"no-sparse-arrays": "error",
+		"no-this-before-super": "error",
+		"no-unexpected-multiline": "off",
+		"no-unsafe-finally": "error",
+		"no-unsafe-negation": "error",
+		"no-unsafe-optional-chaining": "error",
+		"no-unused-labels": "error",
+		"no-unused-private-class-members": "error",
+		"no-unused-vars": "error",
+		"no-useless-backreference": "error",
+		"no-useless-catch": "error",
+		"no-useless-escape": "error",
+		"no-with": "error",
+		"require-yield": "error",
+		"use-isnan": "error",
+		"valid-typeof": "error",
+		"@typescript-eslint/ban-ts-comment": "error",
+		"no-array-constructor": "error",
+		"@typescript-eslint/no-duplicate-enum-values": "error",
+		"@typescript-eslint/no-empty-object-type": "error",
+		"@typescript-eslint/no-explicit-any": "off",
+		"@typescript-eslint/no-extra-non-null-assertion": "error",
+		"@typescript-eslint/no-misused-new": "error",
+		"@typescript-eslint/no-namespace": "error",
+		"@typescript-eslint/no-non-null-asserted-optional-chain": "error",
+		"@typescript-eslint/no-require-imports": "error",
+		"@typescript-eslint/no-this-alias": "error",
+		"@typescript-eslint/no-unnecessary-type-constraint": "error",
+		"@typescript-eslint/no-unsafe-declaration-merging": "error",
+		"@typescript-eslint/no-unsafe-function-type": "error",
+		"no-unused-expressions": "error",
+		"@typescript-eslint/no-wrapper-object-types": "error",
+		"@typescript-eslint/prefer-as-const": "error",
+		"@typescript-eslint/prefer-namespace-keyword": "error",
+		"@typescript-eslint/triple-slash-reference": "error",
+		"curly": "off",
+		"unicorn/empty-brace-spaces": "off",
+		"unicorn/no-nested-ternary": "off",
+		"unicorn/number-literal-case": "off"
+	},
+	"globals": {
+		"route": "readonly",
+		"Laravel": "readonly"
+	},
+	"ignorePatterns": [
+		"vendor",
+		"node_modules",
+		"public",
+		"bootstrap/ssr",
+		"tailwind.config.js",
+		"resources/js/components/ui/*"
+	],
+	"overrides": [
+		{
+			"files": ["**/*.ts", "**/*.tsx", "**/*.mts", "**/*.cts"],
+			"rules": {
+				"no-class-assign": "off",
+				"no-const-assign": "off",
+				"no-dupe-class-members": "off",
+				"no-dupe-keys": "off",
+				"no-func-assign": "off",
+				"no-import-assign": "off",
+				"no-new-native-nonconstructor": "off",
+				"no-obj-calls": "off",
+				"no-redeclare": "off",
+				"no-setter-return": "off",
+				"no-this-before-super": "off",
+				"no-unsafe-negation": "off",
+				"no-var": "error",
+				"no-with": "off",
+				"prefer-rest-params": "error",
+				"prefer-spread": "error"
+			}
+		},
+		{
+			"files": ["*.svelte", "**/*.svelte"],
+			"rules": {
+				"no-inner-declarations": "off",
+				"no-self-assign": "off"
+			}
+		}
+	]
 }
diff --git a/docker-compose.yml b/docker-compose.yml
index 5ec5392..e611e22 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -3,7 +3,7 @@ services:
     image: postgres
     restart: always
     ports:
-      - 5432:5432
+      - 127.0.0.1:1234:5432
     environment:
       POSTGRES_USER: root
       POSTGRES_PASSWORD: mysecretpassword
diff --git a/src/app.css b/src/app.css
index e48f5f0..b37c9b3 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,121 +1,121 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
-@import "tw-animate-css";
+@import 'tw-animate-css';
 
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.129 0.042 264.695);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.129 0.042 264.695);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.129 0.042 264.695);
-  --primary: oklch(0.208 0.042 265.755);
-  --primary-foreground: oklch(0.984 0.003 247.858);
-  --secondary: oklch(0.968 0.007 247.896);
-  --secondary-foreground: oklch(0.208 0.042 265.755);
-  --muted: oklch(0.968 0.007 247.896);
-  --muted-foreground: oklch(0.554 0.046 257.417);
-  --accent: oklch(0.968 0.007 247.896);
-  --accent-foreground: oklch(0.208 0.042 265.755);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.929 0.013 255.508);
-  --input: oklch(0.929 0.013 255.508);
-  --ring: oklch(0.704 0.04 256.788);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.984 0.003 247.858);
-  --sidebar-foreground: oklch(0.129 0.042 264.695);
-  --sidebar-primary: oklch(0.208 0.042 265.755);
-  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-accent: oklch(0.968 0.007 247.896);
-  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
-  --sidebar-border: oklch(0.929 0.013 255.508);
-  --sidebar-ring: oklch(0.704 0.04 256.788);
+	--radius: 0.625rem;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.129 0.042 264.695);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.129 0.042 264.695);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.129 0.042 264.695);
+	--primary: oklch(0.208 0.042 265.755);
+	--primary-foreground: oklch(0.984 0.003 247.858);
+	--secondary: oklch(0.968 0.007 247.896);
+	--secondary-foreground: oklch(0.208 0.042 265.755);
+	--muted: oklch(0.968 0.007 247.896);
+	--muted-foreground: oklch(0.554 0.046 257.417);
+	--accent: oklch(0.968 0.007 247.896);
+	--accent-foreground: oklch(0.208 0.042 265.755);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.929 0.013 255.508);
+	--input: oklch(0.929 0.013 255.508);
+	--ring: oklch(0.704 0.04 256.788);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.984 0.003 247.858);
+	--sidebar-foreground: oklch(0.129 0.042 264.695);
+	--sidebar-primary: oklch(0.208 0.042 265.755);
+	--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+	--sidebar-accent: oklch(0.968 0.007 247.896);
+	--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+	--sidebar-border: oklch(0.929 0.013 255.508);
+	--sidebar-ring: oklch(0.704 0.04 256.788);
 }
 
 .dark {
-  --background: oklch(0.129 0.042 264.695);
-  --foreground: oklch(0.984 0.003 247.858);
-  --card: oklch(0.208 0.042 265.755);
-  --card-foreground: oklch(0.984 0.003 247.858);
-  --popover: oklch(0.208 0.042 265.755);
-  --popover-foreground: oklch(0.984 0.003 247.858);
-  --primary: oklch(0.929 0.013 255.508);
-  --primary-foreground: oklch(0.208 0.042 265.755);
-  --secondary: oklch(0.279 0.041 260.031);
-  --secondary-foreground: oklch(0.984 0.003 247.858);
-  --muted: oklch(0.279 0.041 260.031);
-  --muted-foreground: oklch(0.704 0.04 256.788);
-  --accent: oklch(0.279 0.041 260.031);
-  --accent-foreground: oklch(0.984 0.003 247.858);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.551 0.027 264.364);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.208 0.042 265.755);
-  --sidebar-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-accent: oklch(0.279 0.041 260.031);
-  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.551 0.027 264.364);
+	--background: oklch(0.129 0.042 264.695);
+	--foreground: oklch(0.984 0.003 247.858);
+	--card: oklch(0.208 0.042 265.755);
+	--card-foreground: oklch(0.984 0.003 247.858);
+	--popover: oklch(0.208 0.042 265.755);
+	--popover-foreground: oklch(0.984 0.003 247.858);
+	--primary: oklch(0.929 0.013 255.508);
+	--primary-foreground: oklch(0.208 0.042 265.755);
+	--secondary: oklch(0.279 0.041 260.031);
+	--secondary-foreground: oklch(0.984 0.003 247.858);
+	--muted: oklch(0.279 0.041 260.031);
+	--muted-foreground: oklch(0.704 0.04 256.788);
+	--accent: oklch(0.279 0.041 260.031);
+	--accent-foreground: oklch(0.984 0.003 247.858);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.551 0.027 264.364);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.208 0.042 265.755);
+	--sidebar-foreground: oklch(0.984 0.003 247.858);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+	--sidebar-accent: oklch(0.279 0.041 260.031);
+	--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.551 0.027 264.364);
 }
 
 @theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
 }
 
 @layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
\ No newline at end of file
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}
diff --git a/src/app.d.ts b/src/app.d.ts
index e3dda87..89311bd 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -3,10 +3,10 @@
 declare global {
 	namespace App {
 		interface Locals {
-			user: import('$lib/server/auth').SessionValidationResult['users'];
+			user: import('$lib/server/auth').SessionValidationResult['user'];
 			session: import('$lib/server/auth').SessionValidationResult['sessions'];
-			roles: import('$lib/server/db/schema').Role[];
-			permissions: import('$lib/server/db/schema').Permission[];
+			roles: import('$lib/server/db/schema/roles').Role[];
+			permissions: import('$lib/server/db/schema/permissions').Permission[];
 		}
 	} // interface Error {}
 	// interface Locals {}
diff --git a/src/lib/components/rounds/create-round.svelte b/src/lib/components/rounds/create-round.svelte
index 0ad9f9d..abae1e4 100644
--- a/src/lib/components/rounds/create-round.svelte
+++ b/src/lib/components/rounds/create-round.svelte
@@ -1,36 +1,92 @@
 <script lang="ts">
-	import { FormControl } from '$ui/form';
-	import FormDescription from '$ui/form/form-description.svelte';
-	import FormFieldErrors from '$ui/form/form-field-errors.svelte';
-	import FormField from '$ui/form/form-field.svelte';
-	import FormLabel from '$ui/form/form-label.svelte';
-	import RadioGroup from '$ui/radio-group/radio-group.svelte';
-	import RadioGroupItem from '$ui/radio-group/radio-group-item.svelte';
-	import { SchedulingMode } from '@/types';
-	import { cn } from '@/lib/utils';
-	import Label from '$ui/label/label.svelte';
-	import Card from '$ui/card/card.svelte';
+	import Button from '$ui/button/button.svelte';
 	import CardContent from '$ui/card/card-content.svelte';
 	import CardHeader from '$ui/card/card-header.svelte';
+	import Card from '$ui/card/card.svelte';
+	import Input from '$ui/input/input.svelte';
+	import Label from '$ui/label/label.svelte';
+	import RadioGroupItem from '$ui/radio-group/radio-group-item.svelte';
+	import RadioGroup from '$ui/radio-group/radio-group.svelte';
+	import type { Round } from '@/lib/server/db/schema/rounds';
+	import { cn, instanceOf } from '@/lib/utils';
+	import { SchedulingMode } from '@/types';
+	import { ArrowRightIcon, CircleQuestionMarkIcon } from 'lucide-svelte';
 	import { _ } from 'svelte-i18n';
-	import Button from '$ui/button/button.svelte';
-	import { ArrowRightIcon } from 'lucide-svelte';
+	import { toast } from 'svelte-sonner';
+	import { Tooltip, TooltipProvider } from '../ui/tooltip';
+	import TooltipContent from '../ui/tooltip/tooltip-content.svelte';
+	import TooltipTrigger from '../ui/tooltip/tooltip-trigger.svelte';
 
-	let { competitionId }: { competitionId: number } = $props();
+	let {
+		competitionId,
+		rounds = $bindable(),
+		showAddRound = $bindable(true)
+	}: { competitionId: string; rounds: Round[]; showAddRound: boolean } = $props();
 
 	let schedulingMode: SchedulingMode = $state(SchedulingMode.single);
+	let name = $state('');
+	let nameInvalid = $state(false);
+	let nbMatches: number | undefined = $state();
+	let nbMatchesInvalid = $state(false);
 
 	async function submit() {
+		if (name.length === 0) {
+			nameInvalid = true;
+			toast.error('Name is required');
+			return;
+		}
+		if (!nbMatches || nbMatches < 0) {
+			nbMatchesInvalid = true;
+			toast.error('Number of matches must be greater than 0');
+			return;
+		}
+		nameInvalid = false;
 		const response = await fetch(`/api/competitions/${competitionId}`, {
 			method: 'POST',
 			credentials: 'include',
-			body: JSON.stringify({ scheduling_mode: schedulingMode })
+			body: JSON.stringify({ scheduling_mode: schedulingMode, name: name, nb_matches: nbMatches })
 		});
-		console.log("response", response)
+		console.log('response', response);
+		// update rounds
+		const data = await response.json();
+		if (instanceOf<Round>(data, 'id')) {
+			rounds = [...rounds, data];
+			showAddRound = false;
+		} else {
+			throw new Error('Invalid round');
+		}
 	}
 </script>
 
 <div class="flex flex-col gap-4">
+	<div class="grid grid-cols-2 grid-rows-2 gap-4">
+		<Label for="name" class="text-start">Name<span class="text-red-500">*</span></Label>
+
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger>
+					<Label for="nb_matches" class="text-start"
+						>Number of matches<span class="text-red-500">*</span><CircleQuestionMarkIcon /></Label
+					>
+				</TooltipTrigger>
+				<TooltipContent>Number of participants at the beginning of the stage.</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+		<Input
+			aria-invalid={nameInvalid}
+			name="name"
+			type="text"
+			bind:value={name}
+			placeholder="Name"
+		/>
+		<Input
+			aria-invalid={nbMatchesInvalid}
+			name="nb_matches"
+			type="number"
+			bind:value={nbMatches}
+			placeholder="Number of matches"
+		/>
+	</div>
 	<RadioGroup
 		required
 		bind:value={() => schedulingMode, (t: SchedulingMode) => {}}
@@ -38,11 +94,10 @@
 	>
 		{#each Object.values(SchedulingMode) as mode}
 			<button
-				class=
-					'flex h-full w-full items-center gap-4 rounded-xl'
+				class="flex h-full w-full items-center gap-4 rounded-xl"
 				onclick={() => (schedulingMode = mode)}
 			>
-				<Card class={cn("w-full", schedulingMode === mode && ' border-green-500')}>
+				<Card class={cn('w-full', schedulingMode === mode && ' border-green-500')}>
 					<CardHeader class="flex justify-between">
 						<Label class="text-start">{$_(mode)}</Label>
 					</CardHeader>
diff --git a/src/lib/components/rounds/round.svelte b/src/lib/components/rounds/round.svelte
index ca99435..88a3d05 100644
--- a/src/lib/components/rounds/round.svelte
+++ b/src/lib/components/rounds/round.svelte
@@ -1,7 +1,29 @@
 <script lang="ts">
-	import type { Round } from '@/lib/server/db/schema/rounds';
+	import Button from '$ui/button/button.svelte';
+	import CardContent from '$ui/card/card-content.svelte';
+	import CardFooter from '$ui/card/card-footer.svelte';
+	import CardHeader from '$ui/card/card-header.svelte';
+	import Card from '$ui/card/card.svelte';
+	import type { RoundWithRelations } from '@/lib/server/db/schema/rounds';
+	import { redirect } from '@sveltejs/kit';
 
-	let { round }: { round: Round } = $props();
+	let { id, round, round_number }: { id: string; round: RoundWithRelations; round_number: number } =
+		$props();
 </script>
 
-{JSON.stringify(round)}
+<Card id={`round-${id}`}>
+	<CardHeader>Round {round.name}</CardHeader>
+	<CardContent>
+		{#if !round.matches || round.matches.length <= 0}
+			No matches, add some !
+		{:else}
+			Matches :{#each round.matches as match (match.id)}
+				{JSON.stringify(match)}
+			{/each}
+		{/if}
+	</CardContent>
+	<CardFooter
+		><Button href={`/competitions/${round.competition_id}/rounds/${round.id}`}>View Matches</Button
+		></CardFooter
+	>
+</Card>
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 a005691..df663a6 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { buttonVariants } from "$lib/components/ui/button/index.js";
-	import { cn } from "$lib/utils.js";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
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 a7b0cf7..9a21ec3 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { buttonVariants } from "$lib/components/ui/button/index.js";
-	import { cn } from "$lib/utils.js";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,6 +13,6 @@
 <AlertDialogPrimitive.Cancel
 	bind:ref
 	data-slot="alert-dialog-cancel"
-	class={cn(buttonVariants({ variant: "outline" }), className)}
+	class={cn(buttonVariants({ variant: 'outline' }), className)}
 	{...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 6c3c604..9680016 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
-	import { cn, type WithoutChild, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import AlertDialogOverlay from './alert-dialog-overlay.svelte';
+	import { cn, type WithoutChild, type WithoutChildrenOrChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -19,7 +19,7 @@
 		bind:ref
 		data-slot="alert-dialog-content"
 		class={cn(
-			"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 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+			'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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
 			className
 		)}
 		{...restProps}
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 2ec67dc..0175593 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <AlertDialogPrimitive.Description
 	bind:ref
 	data-slot="alert-dialog-description"
-	class={cn("text-muted-foreground text-sm", className)}
+	class={cn('text-muted-foreground text-sm', className)}
 	{...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 f78b97a..94bbfaa 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="alert-dialog-footer"
-	class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+	class={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
 	{...restProps}
 >
 	{@render children?.()}
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 c8fa762..1f9604a 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="alert-dialog-header"
-	class={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+	class={cn('flex flex-col gap-2 text-center sm:text-left', className)}
 	{...restProps}
 >
 	{@render children?.()}
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 a64ee76..f4770dc 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="alert-dialog-overlay"
 	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/50",
+		'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/50',
 		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 7ef2b5f..c292699 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <AlertDialogPrimitive.Title
 	bind:ref
 	data-slot="alert-dialog-title"
-	class={cn("text-lg font-semibold", className)}
+	class={cn('text-lg font-semibold', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
index b22d1d5..51a3da1 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
 
 	let { ref = $bindable(null), ...restProps }: AlertDialogPrimitive.TriggerProps = $props();
 </script>
diff --git a/src/lib/components/ui/alert-dialog/index.ts b/src/lib/components/ui/alert-dialog/index.ts
index cc281c5..a4439bc 100644
--- a/src/lib/components/ui/alert-dialog/index.ts
+++ b/src/lib/components/ui/alert-dialog/index.ts
@@ -1,13 +1,13 @@
-import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-import Trigger from "./alert-dialog-trigger.svelte";
-import Title from "./alert-dialog-title.svelte";
-import Action from "./alert-dialog-action.svelte";
-import Cancel from "./alert-dialog-cancel.svelte";
-import Footer from "./alert-dialog-footer.svelte";
-import Header from "./alert-dialog-header.svelte";
-import Overlay from "./alert-dialog-overlay.svelte";
-import Content from "./alert-dialog-content.svelte";
-import Description from "./alert-dialog-description.svelte";
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+import Trigger from './alert-dialog-trigger.svelte';
+import Title from './alert-dialog-title.svelte';
+import Action from './alert-dialog-action.svelte';
+import Cancel from './alert-dialog-cancel.svelte';
+import Footer from './alert-dialog-footer.svelte';
+import Header from './alert-dialog-header.svelte';
+import Overlay from './alert-dialog-overlay.svelte';
+import Content from './alert-dialog-content.svelte';
+import Description from './alert-dialog-description.svelte';
 
 const Root = AlertDialogPrimitive.Root;
 const Portal = AlertDialogPrimitive.Portal;
@@ -35,5 +35,5 @@ export {
 	Trigger as AlertDialogTrigger,
 	Overlay as AlertDialogOverlay,
 	Content as AlertDialogContent,
-	Description as AlertDialogDescription,
+	Description as AlertDialogDescription
 };
diff --git a/src/lib/components/ui/alert/alert-description.svelte b/src/lib/components/ui/alert/alert-description.svelte
index 8b56aed..5920ca6 100644
--- a/src/lib/components/ui/alert/alert-description.svelte
+++ b/src/lib/components/ui/alert/alert-description.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="alert-description"
 	class={cn(
-		"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+		'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/alert/alert-title.svelte b/src/lib/components/ui/alert/alert-title.svelte
index 77e45ad..8a35d09 100644
--- a/src/lib/components/ui/alert/alert-title.svelte
+++ b/src/lib/components/ui/alert/alert-title.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="alert-title"
-	class={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
+	class={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/alert/alert.svelte b/src/lib/components/ui/alert/alert.svelte
index 2b2eff9..a7e6d06 100644
--- a/src/lib/components/ui/alert/alert.svelte
+++ b/src/lib/components/ui/alert/alert.svelte
@@ -1,31 +1,31 @@
 <script lang="ts" module>
-	import { type VariantProps, tv } from "tailwind-variants";
+	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const alertVariants = tv({
-		base: "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+		base: 'relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
 		variants: {
 			variant: {
-				default: "bg-card text-card-foreground",
+				default: 'bg-card text-card-foreground',
 				destructive:
-					"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
-			},
+					'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current'
+			}
 		},
 		defaultVariants: {
-			variant: "default",
-		},
+			variant: 'default'
+		}
 	});
 
-	export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+	export type AlertVariant = VariantProps<typeof alertVariants>['variant'];
 </script>
 
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		variant = "default",
+		variant = 'default',
 		children,
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
diff --git a/src/lib/components/ui/alert/index.ts b/src/lib/components/ui/alert/index.ts
index 97e21b4..5e0f854 100644
--- a/src/lib/components/ui/alert/index.ts
+++ b/src/lib/components/ui/alert/index.ts
@@ -1,7 +1,7 @@
-import Root from "./alert.svelte";
-import Description from "./alert-description.svelte";
-import Title from "./alert-title.svelte";
-export { alertVariants, type AlertVariant } from "./alert.svelte";
+import Root from './alert.svelte';
+import Description from './alert-description.svelte';
+import Title from './alert-title.svelte';
+export { alertVariants, type AlertVariant } from './alert.svelte';
 
 export {
 	Root,
@@ -10,5 +10,5 @@ export {
 	//
 	Root as Alert,
 	Description as AlertDescription,
-	Title as AlertTitle,
+	Title as AlertTitle
 };
diff --git a/src/lib/components/ui/avatar/avatar-fallback.svelte b/src/lib/components/ui/avatar/avatar-fallback.svelte
index 249d4a4..b911baf 100644
--- a/src/lib/components/ui/avatar/avatar-fallback.svelte
+++ b/src/lib/components/ui/avatar/avatar-fallback.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Avatar as AvatarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <AvatarPrimitive.Fallback
 	bind:ref
 	data-slot="avatar-fallback"
-	class={cn("bg-muted flex size-full items-center justify-center rounded-full", className)}
+	class={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/avatar/avatar-image.svelte b/src/lib/components/ui/avatar/avatar-image.svelte
index 2bb9db4..7ccc3ce 100644
--- a/src/lib/components/ui/avatar/avatar-image.svelte
+++ b/src/lib/components/ui/avatar/avatar-image.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Avatar as AvatarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <AvatarPrimitive.Image
 	bind:ref
 	data-slot="avatar-image"
-	class={cn("aspect-square size-full", className)}
+	class={cn('aspect-square size-full', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/avatar/avatar.svelte b/src/lib/components/ui/avatar/avatar.svelte
index e37214d..3fd4dc2 100644
--- a/src/lib/components/ui/avatar/avatar.svelte
+++ b/src/lib/components/ui/avatar/avatar.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { Avatar as AvatarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
-		loadingStatus = $bindable("loading"),
+		loadingStatus = $bindable('loading'),
 		class: className,
 		...restProps
 	}: AvatarPrimitive.RootProps = $props();
@@ -14,6 +14,6 @@
 	bind:ref
 	bind:loadingStatus
 	data-slot="avatar"
-	class={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
+	class={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/avatar/index.ts b/src/lib/components/ui/avatar/index.ts
index d06457b..9585f8a 100644
--- a/src/lib/components/ui/avatar/index.ts
+++ b/src/lib/components/ui/avatar/index.ts
@@ -1,6 +1,6 @@
-import Root from "./avatar.svelte";
-import Image from "./avatar-image.svelte";
-import Fallback from "./avatar-fallback.svelte";
+import Root from './avatar.svelte';
+import Image from './avatar-image.svelte';
+import Fallback from './avatar-fallback.svelte';
 
 export {
 	Root,
@@ -9,5 +9,5 @@ export {
 	//
 	Root as Avatar,
 	Image as AvatarImage,
-	Fallback as AvatarFallback,
+	Fallback as AvatarFallback
 };
diff --git a/src/lib/components/ui/badge/badge.svelte b/src/lib/components/ui/badge/badge.svelte
index 5000457..7c242f7 100644
--- a/src/lib/components/ui/badge/badge.svelte
+++ b/src/lib/components/ui/badge/badge.svelte
@@ -1,36 +1,35 @@
 <script lang="ts" module>
-	import { type VariantProps, tv } from "tailwind-variants";
+	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const badgeVariants = tv({
-		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
+		base: 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3',
 		variants: {
 			variant: {
-				default:
-					"bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
+				default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent',
 				secondary:
-					"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
+					'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent',
 				destructive:
-					"bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white",
-				outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-			},
+					'bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white',
+				outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground'
+			}
 		},
 		defaultVariants: {
-			variant: "default",
-		},
+			variant: 'default'
+		}
 	});
 
-	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+	export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
 </script>
 
 <script lang="ts">
-	import type { HTMLAnchorAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
 		href,
 		class: className,
-		variant = "default",
+		variant = 'default',
 		children,
 		...restProps
 	}: WithElementRef<HTMLAnchorAttributes> & {
@@ -39,7 +38,7 @@
 </script>
 
 <svelte:element
-	this={href ? "a" : "span"}
+	this={href ? 'a' : 'span'}
 	bind:this={ref}
 	data-slot="badge"
 	{href}
diff --git a/src/lib/components/ui/badge/index.ts b/src/lib/components/ui/badge/index.ts
index 64e0aa9..f05fb87 100644
--- a/src/lib/components/ui/badge/index.ts
+++ b/src/lib/components/ui/badge/index.ts
@@ -1,2 +1,2 @@
-export { default as Badge } from "./badge.svelte";
-export { badgeVariants, type BadgeVariant } from "./badge.svelte";
+export { default as Badge } from './badge.svelte';
+export { badgeVariants, type BadgeVariant } from './badge.svelte';
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte b/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
index a178cf5..030197f 100644
--- a/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+	import EllipsisIcon from '@lucide/svelte/icons/ellipsis';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -15,7 +15,7 @@
 	data-slot="breadcrumb-ellipsis"
 	role="presentation"
 	aria-hidden="true"
-	class={cn("flex size-9 items-center justify-center", className)}
+	class={cn('flex size-9 items-center justify-center', className)}
 	{...restProps}
 >
 	<EllipsisIcon class="size-4" />
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte b/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
index 1a84c4c..081b636 100644
--- a/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLLiAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLLiAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <li
 	bind:this={ref}
 	data-slot="breadcrumb-item"
-	class={cn("inline-flex items-center gap-1.5", className)}
+	class={cn('inline-flex items-center gap-1.5', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte b/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
index e6bc17d..c56ab6d 100644
--- a/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { HTMLAnchorAttributes } from "svelte/elements";
-	import type { Snippet } from "svelte";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -15,10 +15,10 @@
 	} = $props();
 
 	const attrs = $derived({
-		"data-slot": "breadcrumb-link",
-		class: cn("hover:text-foreground transition-colors", className),
+		'data-slot': 'breadcrumb-link',
+		class: cn('hover:text-foreground transition-colors', className),
 		href,
-		...restProps,
+		...restProps
 	});
 </script>
 
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte b/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
index b5458fa..33abc27 100644
--- a/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLOlAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLOlAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="breadcrumb-list"
 	class={cn(
-		"text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5",
+		'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte b/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
index 5fb6979..4938bdd 100644
--- a/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -16,7 +16,7 @@
 	role="link"
 	aria-disabled="true"
 	aria-current="page"
-	class={cn("text-foreground font-normal", className)}
+	class={cn('text-foreground font-normal', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte b/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
index 84106a1..c3b70c6 100644
--- a/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLLiAttributes } from "svelte/elements";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLLiAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -16,7 +16,7 @@
 	data-slot="breadcrumb-separator"
 	role="presentation"
 	aria-hidden="true"
-	class={cn("[&>svg]:size-3.5", className)}
+	class={cn('[&>svg]:size-3.5', className)}
 	{...restProps}
 >
 	{#if children}
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb.svelte b/src/lib/components/ui/breadcrumb/breadcrumb.svelte
index 8f8a3e6..c797f82 100644
--- a/src/lib/components/ui/breadcrumb/breadcrumb.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
diff --git a/src/lib/components/ui/breadcrumb/index.ts b/src/lib/components/ui/breadcrumb/index.ts
index dc914ec..773fd60 100644
--- a/src/lib/components/ui/breadcrumb/index.ts
+++ b/src/lib/components/ui/breadcrumb/index.ts
@@ -1,10 +1,10 @@
-import Root from "./breadcrumb.svelte";
-import Ellipsis from "./breadcrumb-ellipsis.svelte";
-import Item from "./breadcrumb-item.svelte";
-import Separator from "./breadcrumb-separator.svelte";
-import Link from "./breadcrumb-link.svelte";
-import List from "./breadcrumb-list.svelte";
-import Page from "./breadcrumb-page.svelte";
+import Root from './breadcrumb.svelte';
+import Ellipsis from './breadcrumb-ellipsis.svelte';
+import Item from './breadcrumb-item.svelte';
+import Separator from './breadcrumb-separator.svelte';
+import Link from './breadcrumb-link.svelte';
+import List from './breadcrumb-list.svelte';
+import Page from './breadcrumb-page.svelte';
 
 export {
 	Root,
@@ -21,5 +21,5 @@ export {
 	Separator as BreadcrumbSeparator,
 	Link as BreadcrumbLink,
 	List as BreadcrumbList,
-	Page as BreadcrumbPage,
+	Page as BreadcrumbPage
 };
diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
index 4daf453..16f1a3c 100644
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@@ -1,36 +1,36 @@
 <script lang="ts" module>
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
-	import { type VariantProps, tv } from "tailwind-variants";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const buttonVariants = tv({
 		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
-				default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+				default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
 				destructive:
-					"bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white",
+					'bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white',
 				outline:
-					"bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border",
-				secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-				link: "text-primary underline-offset-4 hover:underline",
+					'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border',
+				secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+				link: 'text-primary underline-offset-4 hover:underline'
 			},
 			size: {
-				default: "h-9 px-4 py-2 has-[>svg]:px-3",
-				sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
-				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-				icon: "size-9",
-			},
+				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+				sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
+				lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+				icon: 'size-9'
+			}
 		},
 		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
+			variant: 'default',
+			size: 'default'
+		}
 	});
 
-	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
-	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+	export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+	export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
 
 	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
 		WithElementRef<HTMLAnchorAttributes> & {
@@ -42,11 +42,11 @@
 <script lang="ts">
 	let {
 		class: className,
-		variant = "default",
-		size = "default",
+		variant = 'default',
+		size = 'default',
 		ref = $bindable(null),
 		href = undefined,
-		type = "button",
+		type = 'button',
 		disabled,
 		children,
 		...restProps
@@ -60,7 +60,7 @@
 		class={cn(buttonVariants({ variant, size }), className)}
 		href={disabled ? undefined : href}
 		aria-disabled={disabled}
-		role={disabled ? "link" : undefined}
+		role={disabled ? 'link' : undefined}
 		tabindex={disabled ? -1 : undefined}
 		{...restProps}
 	>
diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts
index fb585d7..5414d9d 100644
--- a/src/lib/components/ui/button/index.ts
+++ b/src/lib/components/ui/button/index.ts
@@ -2,8 +2,8 @@ import Root, {
 	type ButtonProps,
 	type ButtonSize,
 	type ButtonVariant,
-	buttonVariants,
-} from "./button.svelte";
+	buttonVariants
+} from './button.svelte';
 
 export {
 	Root,
@@ -13,5 +13,5 @@ export {
 	buttonVariants,
 	type ButtonProps,
 	type ButtonSize,
-	type ButtonVariant,
+	type ButtonVariant
 };
diff --git a/src/lib/components/ui/calendar/calendar-caption.svelte b/src/lib/components/ui/calendar/calendar-caption.svelte
index 5c93037..670ee83 100644
--- a/src/lib/components/ui/calendar/calendar-caption.svelte
+++ b/src/lib/components/ui/calendar/calendar-caption.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type { ComponentProps } from "svelte";
-	import type Calendar from "./calendar.svelte";
-	import CalendarMonthSelect from "./calendar-month-select.svelte";
-	import CalendarYearSelect from "./calendar-year-select.svelte";
-	import { DateFormatter, getLocalTimeZone, type DateValue } from "@internationalized/date";
+	import type { ComponentProps } from 'svelte';
+	import type Calendar from './calendar.svelte';
+	import CalendarMonthSelect from './calendar-month-select.svelte';
+	import CalendarYearSelect from './calendar-year-select.svelte';
+	import { DateFormatter, getLocalTimeZone, type DateValue } from '@internationalized/date';
 
 	let {
 		captionLayout,
@@ -14,13 +14,13 @@
 		month,
 		locale,
 		placeholder = $bindable(),
-		monthIndex = 0,
+		monthIndex = 0
 	}: {
-		captionLayout: ComponentProps<typeof Calendar>["captionLayout"];
-		months: ComponentProps<typeof CalendarMonthSelect>["months"];
-		monthFormat: ComponentProps<typeof CalendarMonthSelect>["monthFormat"];
-		years: ComponentProps<typeof CalendarYearSelect>["years"];
-		yearFormat: ComponentProps<typeof CalendarYearSelect>["yearFormat"];
+		captionLayout: ComponentProps<typeof Calendar>['captionLayout'];
+		months: ComponentProps<typeof CalendarMonthSelect>['months'];
+		monthFormat: ComponentProps<typeof CalendarMonthSelect>['monthFormat'];
+		years: ComponentProps<typeof CalendarYearSelect>['years'];
+		yearFormat: ComponentProps<typeof CalendarYearSelect>['yearFormat'];
 		month: DateValue;
 		placeholder: DateValue | undefined;
 		locale: string;
@@ -29,13 +29,13 @@
 
 	function formatYear(date: DateValue) {
 		const dateObj = date.toDate(getLocalTimeZone());
-		if (typeof yearFormat === "function") return yearFormat(dateObj.getFullYear());
+		if (typeof yearFormat === 'function') return yearFormat(dateObj.getFullYear());
 		return new DateFormatter(locale, { year: yearFormat }).format(dateObj);
 	}
 
 	function formatMonth(date: DateValue) {
 		const dateObj = date.toDate(getLocalTimeZone());
-		if (typeof monthFormat === "function") return monthFormat(dateObj.getMonth() + 1);
+		if (typeof monthFormat === 'function') return monthFormat(dateObj.getMonth() + 1);
 		return new DateFormatter(locale, { month: monthFormat }).format(dateObj);
 	}
 </script>
@@ -58,15 +58,15 @@
 	<CalendarYearSelect {years} {yearFormat} value={month.year} />
 {/snippet}
 
-{#if captionLayout === "dropdown"}
+{#if captionLayout === 'dropdown'}
 	{@render MonthSelect()}
 	{@render YearSelect()}
-{:else if captionLayout === "dropdown-months"}
+{:else if captionLayout === 'dropdown-months'}
 	{@render MonthSelect()}
 	{#if placeholder}
 		{formatYear(placeholder)}
 	{/if}
-{:else if captionLayout === "dropdown-years"}
+{:else if captionLayout === 'dropdown-years'}
 	{#if placeholder}
 		{formatMonth(placeholder)}
 	{/if}
diff --git a/src/lib/components/ui/calendar/calendar-cell.svelte b/src/lib/components/ui/calendar/calendar-cell.svelte
index 5f295d6..6eb8149 100644
--- a/src/lib/components/ui/calendar/calendar-cell.svelte
+++ b/src/lib/components/ui/calendar/calendar-cell.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,7 +12,7 @@
 <CalendarPrimitive.Cell
 	bind:ref
 	class={cn(
-		"size-(--cell-size) relative p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-l-md [&:last-child[data-selected]_[data-bits-day]]:rounded-r-md",
+		'relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-l-md [&:last-child[data-selected]_[data-bits-day]]:rounded-r-md',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/calendar/calendar-day.svelte b/src/lib/components/ui/calendar/calendar-day.svelte
index 32e9c83..7d19085 100644
--- a/src/lib/components/ui/calendar/calendar-day.svelte
+++ b/src/lib/components/ui/calendar/calendar-day.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { buttonVariants } from "$lib/components/ui/button/index.js";
-	import { cn } from "$lib/utils.js";
-	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import { cn } from '$lib/utils.js';
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
 
 	let {
 		ref = $bindable(null),
@@ -13,22 +13,22 @@
 <CalendarPrimitive.Day
 	bind:ref
 	class={cn(
-		buttonVariants({ variant: "ghost" }),
-		"size-(--cell-size) flex select-none flex-col items-center justify-center gap-1 whitespace-nowrap p-0 font-normal leading-none",
-		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground",
-		"data-[selected]:bg-primary dark:data-[selected]:hover:bg-accent/50 data-[selected]:text-primary-foreground",
+		buttonVariants({ variant: 'ghost' }),
+		'flex size-(--cell-size) flex-col items-center justify-center gap-1 p-0 leading-none font-normal whitespace-nowrap select-none',
+		'[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground',
+		'data-[selected]:bg-primary dark:data-[selected]:hover:bg-accent/50 data-[selected]:text-primary-foreground',
 		// Outside months
-		"[&[data-outside-month]:not([data-selected])]:text-muted-foreground [&[data-outside-month]:not([data-selected])]:hover:text-accent-foreground",
+		'[&[data-outside-month]:not([data-selected])]:text-muted-foreground [&[data-outside-month]:not([data-selected])]:hover:text-accent-foreground',
 		// Disabled
-		"data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		'data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
 		// Unavailable
-		"data-[unavailable]:text-muted-foreground data-[unavailable]:line-through",
+		'data-[unavailable]:text-muted-foreground data-[unavailable]:line-through',
 		// hover
-		"dark:hover:text-accent-foreground",
+		'dark:hover:text-accent-foreground',
 		// focus
-		"focus:border-ring focus:ring-ring/50 focus:relative",
+		'focus:border-ring focus:ring-ring/50 focus:relative',
 		// inner spans
-		"[&>span]:text-xs [&>span]:opacity-70",
+		'[&>span]:text-xs [&>span]:opacity-70',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/calendar/calendar-grid-body.svelte b/src/lib/components/ui/calendar/calendar-grid-body.svelte
index 8cd86de..fb1d89b 100644
--- a/src/lib/components/ui/calendar/calendar-grid-body.svelte
+++ b/src/lib/components/ui/calendar/calendar-grid-body.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
diff --git a/src/lib/components/ui/calendar/calendar-grid-head.svelte b/src/lib/components/ui/calendar/calendar-grid-head.svelte
index 333edc4..b5b6845 100644
--- a/src/lib/components/ui/calendar/calendar-grid-head.svelte
+++ b/src/lib/components/ui/calendar/calendar-grid-head.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
diff --git a/src/lib/components/ui/calendar/calendar-grid-row.svelte b/src/lib/components/ui/calendar/calendar-grid-row.svelte
index 9032236..2e7d9d8 100644
--- a/src/lib/components/ui/calendar/calendar-grid-row.svelte
+++ b/src/lib/components/ui/calendar/calendar-grid-row.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -9,4 +9,4 @@
 	}: CalendarPrimitive.GridRowProps = $props();
 </script>
 
-<CalendarPrimitive.GridRow bind:ref class={cn("flex", className)} {...restProps} />
+<CalendarPrimitive.GridRow bind:ref class={cn('flex', className)} {...restProps} />
diff --git a/src/lib/components/ui/calendar/calendar-grid.svelte b/src/lib/components/ui/calendar/calendar-grid.svelte
index e0c8627..bfa49dc 100644
--- a/src/lib/components/ui/calendar/calendar-grid.svelte
+++ b/src/lib/components/ui/calendar/calendar-grid.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +11,6 @@
 
 <CalendarPrimitive.Grid
 	bind:ref
-	class={cn("mt-4 flex w-full border-collapse flex-col gap-1", className)}
+	class={cn('mt-4 flex w-full border-collapse flex-col gap-1', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/calendar/calendar-head-cell.svelte b/src/lib/components/ui/calendar/calendar-head-cell.svelte
index 131807e..1121365 100644
--- a/src/lib/components/ui/calendar/calendar-head-cell.svelte
+++ b/src/lib/components/ui/calendar/calendar-head-cell.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,7 +12,7 @@
 <CalendarPrimitive.HeadCell
 	bind:ref
 	class={cn(
-		"text-muted-foreground w-(--cell-size) rounded-md text-[0.8rem] font-normal",
+		'text-muted-foreground w-(--cell-size) rounded-md text-[0.8rem] font-normal',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/calendar/calendar-header.svelte b/src/lib/components/ui/calendar/calendar-header.svelte
index 5b7e397..8ca9618 100644
--- a/src/lib/components/ui/calendar/calendar-header.svelte
+++ b/src/lib/components/ui/calendar/calendar-header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,7 +12,7 @@
 <CalendarPrimitive.Header
 	bind:ref
 	class={cn(
-		"h-(--cell-size) flex w-full items-center justify-center gap-1.5 text-sm font-medium",
+		'flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/calendar/calendar-heading.svelte b/src/lib/components/ui/calendar/calendar-heading.svelte
index a9b9810..7a85b55 100644
--- a/src/lib/components/ui/calendar/calendar-heading.svelte
+++ b/src/lib/components/ui/calendar/calendar-heading.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +11,6 @@
 
 <CalendarPrimitive.Heading
 	bind:ref
-	class={cn("px-(--cell-size) text-sm font-medium", className)}
+	class={cn('px-(--cell-size) text-sm font-medium', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/calendar/calendar-month-select.svelte b/src/lib/components/ui/calendar/calendar-month-select.svelte
index e4b536a..75fccaa 100644
--- a/src/lib/components/ui/calendar/calendar-month-select.svelte
+++ b/src/lib/components/ui/calendar/calendar-month-select.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
-	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 
 <span
 	class={cn(
-		"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative flex rounded-md border",
+		'has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]',
 		className
 	)}
 >
@@ -33,7 +33,7 @@
 				{/each}
 			</select>
 			<span
-				class="[&>svg]:text-muted-foreground flex h-8 select-none items-center gap-1 rounded-md pl-2 pr-1 text-sm font-medium [&>svg]:size-3.5"
+				class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm font-medium select-none [&>svg]:size-3.5"
 				aria-hidden="true"
 			>
 				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
diff --git a/src/lib/components/ui/calendar/calendar-month.svelte b/src/lib/components/ui/calendar/calendar-month.svelte
index e747fae..799d2c5 100644
--- a/src/lib/components/ui/calendar/calendar-month.svelte
+++ b/src/lib/components/ui/calendar/calendar-month.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { type WithElementRef, cn } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { type WithElementRef, cn } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -10,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
 </script>
 
-<div {...restProps} bind:this={ref} class={cn("flex flex-col", className)}>
+<div {...restProps} bind:this={ref} class={cn('flex flex-col', className)}>
 	{@render children?.()}
 </div>
diff --git a/src/lib/components/ui/calendar/calendar-months.svelte b/src/lib/components/ui/calendar/calendar-months.svelte
index f717a9d..023cad3 100644
--- a/src/lib/components/ui/calendar/calendar-months.svelte
+++ b/src/lib/components/ui/calendar/calendar-months.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,7 +12,7 @@
 
 <div
 	bind:this={ref}
-	class={cn("relative flex flex-col gap-4 md:flex-row", className)}
+	class={cn('relative flex flex-col gap-4 md:flex-row', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/calendar/calendar-nav.svelte b/src/lib/components/ui/calendar/calendar-nav.svelte
index 27f33d7..2fea3e9 100644
--- a/src/lib/components/ui/calendar/calendar-nav.svelte
+++ b/src/lib/components/ui/calendar/calendar-nav.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <nav
 	{...restProps}
 	bind:this={ref}
-	class={cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", className)}
+	class={cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', className)}
 >
 	{@render children?.()}
 </nav>
diff --git a/src/lib/components/ui/calendar/calendar-next-button.svelte b/src/lib/components/ui/calendar/calendar-next-button.svelte
index d8eb4ef..ab5ca59 100644
--- a/src/lib/components/ui/calendar/calendar-next-button.svelte
+++ b/src/lib/components/ui/calendar/calendar-next-button.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
-	import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js";
-	import { cn } from "$lib/utils.js";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { buttonVariants, type ButtonVariant } from '$lib/components/ui/button/index.js';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
-		variant = "ghost",
+		variant = 'ghost',
 		...restProps
 	}: CalendarPrimitive.NextButtonProps & {
 		variant?: ButtonVariant;
@@ -23,7 +23,7 @@
 	bind:ref
 	class={cn(
 		buttonVariants({ variant }),
-		"size-(--cell-size) select-none bg-transparent p-0 disabled:opacity-50 rtl:rotate-180",
+		'size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180',
 		className
 	)}
 	children={children || Fallback}
diff --git a/src/lib/components/ui/calendar/calendar-prev-button.svelte b/src/lib/components/ui/calendar/calendar-prev-button.svelte
index 3e4471a..c39b48a 100644
--- a/src/lib/components/ui/calendar/calendar-prev-button.svelte
+++ b/src/lib/components/ui/calendar/calendar-prev-button.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
-	import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js";
-	import { cn } from "$lib/utils.js";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
+	import { buttonVariants, type ButtonVariant } from '$lib/components/ui/button/index.js';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
-		variant = "ghost",
+		variant = 'ghost',
 		...restProps
 	}: CalendarPrimitive.PrevButtonProps & {
 		variant?: ButtonVariant;
@@ -23,7 +23,7 @@
 	bind:ref
 	class={cn(
 		buttonVariants({ variant }),
-		"size-(--cell-size) select-none bg-transparent p-0 disabled:opacity-50 rtl:rotate-180",
+		'size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180',
 		className
 	)}
 	children={children || Fallback}
diff --git a/src/lib/components/ui/calendar/calendar-year-select.svelte b/src/lib/components/ui/calendar/calendar-year-select.svelte
index 3842037..de5c222 100644
--- a/src/lib/components/ui/calendar/calendar-year-select.svelte
+++ b/src/lib/components/ui/calendar/calendar-year-select.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
-	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 
 <span
 	class={cn(
-		"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative flex rounded-md border",
+		'has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]',
 		className
 	)}
 >
@@ -32,7 +32,7 @@
 				{/each}
 			</select>
 			<span
-				class="[&>svg]:text-muted-foreground flex h-8 select-none items-center gap-1 rounded-md pl-2 pr-1 text-sm font-medium [&>svg]:size-3.5"
+				class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm font-medium select-none [&>svg]:size-3.5"
 				aria-hidden="true"
 			>
 				{yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}
diff --git a/src/lib/components/ui/calendar/calendar.svelte b/src/lib/components/ui/calendar/calendar.svelte
index 29b6fff..482e529 100644
--- a/src/lib/components/ui/calendar/calendar.svelte
+++ b/src/lib/components/ui/calendar/calendar.svelte
@@ -1,41 +1,41 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import * as Calendar from "./index.js";
-	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
-	import type { ButtonVariant } from "../button/button.svelte";
-	import { isEqualMonth, type DateValue } from "@internationalized/date";
-	import type { Snippet } from "svelte";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import * as Calendar from './index.js';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+	import type { ButtonVariant } from '../button/button.svelte';
+	import { isEqualMonth, type DateValue } from '@internationalized/date';
+	import type { Snippet } from 'svelte';
 
 	let {
 		ref = $bindable(null),
 		value = $bindable(),
 		placeholder = $bindable(),
 		class: className,
-		weekdayFormat = "short",
-		buttonVariant = "ghost",
-		captionLayout = "label",
-		locale = "en-US",
+		weekdayFormat = 'short',
+		buttonVariant = 'ghost',
+		captionLayout = 'label',
+		locale = 'en-US',
 		months: monthsProp,
 		years,
 		monthFormat: monthFormatProp,
-		yearFormat = "numeric",
+		yearFormat = 'numeric',
 		day,
 		disableDaysOutsideMonth = false,
 		...restProps
 	}: WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
 		buttonVariant?: ButtonVariant;
-		captionLayout?: "dropdown" | "dropdown-months" | "dropdown-years" | "label";
-		months?: CalendarPrimitive.MonthSelectProps["months"];
-		years?: CalendarPrimitive.YearSelectProps["years"];
-		monthFormat?: CalendarPrimitive.MonthSelectProps["monthFormat"];
-		yearFormat?: CalendarPrimitive.YearSelectProps["yearFormat"];
+		captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
+		months?: CalendarPrimitive.MonthSelectProps['months'];
+		years?: CalendarPrimitive.YearSelectProps['years'];
+		monthFormat?: CalendarPrimitive.MonthSelectProps['monthFormat'];
+		yearFormat?: CalendarPrimitive.YearSelectProps['yearFormat'];
 		day?: Snippet<[{ day: DateValue; outsideMonth: boolean }]>;
 	} = $props();
 
 	const monthFormat = $derived.by(() => {
 		if (monthFormatProp) return monthFormatProp;
-		if (captionLayout.startsWith("dropdown")) return "short";
-		return "long";
+		if (captionLayout.startsWith('dropdown')) return 'short';
+		return 'long';
 	});
 </script>
 
@@ -50,7 +50,7 @@ get along, so we shut typescript up by casting `value` to `never`.
 	{weekdayFormat}
 	{disableDaysOutsideMonth}
 	class={cn(
-		"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+		'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
 		className
 	)}
 	{locale}
@@ -97,7 +97,7 @@ get along, so we shut typescript up by casting `value` to `never`.
 											{#if day}
 												{@render day({
 													day: date,
-													outsideMonth: !isEqualMonth(date, month.value),
+													outsideMonth: !isEqualMonth(date, month.value)
 												})}
 											{:else}
 												<Calendar.Day />
diff --git a/src/lib/components/ui/calendar/index.ts b/src/lib/components/ui/calendar/index.ts
index f3a16d2..180d173 100644
--- a/src/lib/components/ui/calendar/index.ts
+++ b/src/lib/components/ui/calendar/index.ts
@@ -1,21 +1,21 @@
-import Root from "./calendar.svelte";
-import Cell from "./calendar-cell.svelte";
-import Day from "./calendar-day.svelte";
-import Grid from "./calendar-grid.svelte";
-import Header from "./calendar-header.svelte";
-import Months from "./calendar-months.svelte";
-import GridRow from "./calendar-grid-row.svelte";
-import Heading from "./calendar-heading.svelte";
-import GridBody from "./calendar-grid-body.svelte";
-import GridHead from "./calendar-grid-head.svelte";
-import HeadCell from "./calendar-head-cell.svelte";
-import NextButton from "./calendar-next-button.svelte";
-import PrevButton from "./calendar-prev-button.svelte";
-import MonthSelect from "./calendar-month-select.svelte";
-import YearSelect from "./calendar-year-select.svelte";
-import Month from "./calendar-month.svelte";
-import Nav from "./calendar-nav.svelte";
-import Caption from "./calendar-caption.svelte";
+import Root from './calendar.svelte';
+import Cell from './calendar-cell.svelte';
+import Day from './calendar-day.svelte';
+import Grid from './calendar-grid.svelte';
+import Header from './calendar-header.svelte';
+import Months from './calendar-months.svelte';
+import GridRow from './calendar-grid-row.svelte';
+import Heading from './calendar-heading.svelte';
+import GridBody from './calendar-grid-body.svelte';
+import GridHead from './calendar-grid-head.svelte';
+import HeadCell from './calendar-head-cell.svelte';
+import NextButton from './calendar-next-button.svelte';
+import PrevButton from './calendar-prev-button.svelte';
+import MonthSelect from './calendar-month-select.svelte';
+import YearSelect from './calendar-year-select.svelte';
+import Month from './calendar-month.svelte';
+import Nav from './calendar-nav.svelte';
+import Caption from './calendar-caption.svelte';
 
 export {
 	Day,
@@ -36,5 +36,5 @@ export {
 	MonthSelect,
 	Caption,
 	//
-	Root as Calendar,
+	Root as Calendar
 };
diff --git a/src/lib/components/ui/card/card-action.svelte b/src/lib/components/ui/card/card-action.svelte
index cc36c56..bbaafd2 100644
--- a/src/lib/components/ui/card/card-action.svelte
+++ b/src/lib/components/ui/card/card-action.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="card-action"
-	class={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+	class={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/card/card-content.svelte b/src/lib/components/ui/card/card-content.svelte
index bc90b83..1d60124 100644
--- a/src/lib/components/ui/card/card-content.svelte
+++ b/src/lib/components/ui/card/card-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -10,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} data-slot="card-content" class={cn("px-6", className)} {...restProps}>
+<div bind:this={ref} data-slot="card-content" class={cn('px-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 9b20ac7..bfb0725 100644
--- a/src/lib/components/ui/card/card-description.svelte
+++ b/src/lib/components/ui/card/card-description.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <p
 	bind:this={ref}
 	data-slot="card-description"
-	class={cn("text-muted-foreground text-sm", className)}
+	class={cn('text-muted-foreground text-sm', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/card/card-footer.svelte b/src/lib/components/ui/card/card-footer.svelte
index cf43353..4e390bf 100644
--- a/src/lib/components/ui/card/card-footer.svelte
+++ b/src/lib/components/ui/card/card-footer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="card-footer"
-	class={cn("[.border-t]:pt-6 flex items-center px-6", className)}
+	class={cn('flex items-center px-6 [.border-t]:pt-6', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/card/card-header.svelte b/src/lib/components/ui/card/card-header.svelte
index 8a91abb..9cdc602 100644
--- a/src/lib/components/ui/card/card-header.svelte
+++ b/src/lib/components/ui/card/card-header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="card-header"
 	class={cn(
-		"@container/card-header has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6",
+		'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/card/card-title.svelte b/src/lib/components/ui/card/card-title.svelte
index 22586e6..0eae8ec 100644
--- a/src/lib/components/ui/card/card-title.svelte
+++ b/src/lib/components/ui/card/card-title.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="card-title"
-	class={cn("font-semibold leading-none", className)}
+	class={cn('leading-none font-semibold', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/card/card.svelte b/src/lib/components/ui/card/card.svelte
index 99448cc..4112332 100644
--- a/src/lib/components/ui/card/card.svelte
+++ b/src/lib/components/ui/card/card.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="card"
 	class={cn(
-		"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+		'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/card/index.ts b/src/lib/components/ui/card/index.ts
index 4d3fce4..77d3674 100644
--- a/src/lib/components/ui/card/index.ts
+++ b/src/lib/components/ui/card/index.ts
@@ -1,10 +1,10 @@
-import Root from "./card.svelte";
-import Content from "./card-content.svelte";
-import Description from "./card-description.svelte";
-import Footer from "./card-footer.svelte";
-import Header from "./card-header.svelte";
-import Title from "./card-title.svelte";
-import Action from "./card-action.svelte";
+import Root from './card.svelte';
+import Content from './card-content.svelte';
+import Description from './card-description.svelte';
+import Footer from './card-footer.svelte';
+import Header from './card-header.svelte';
+import Title from './card-title.svelte';
+import Action from './card-action.svelte';
 
 export {
 	Root,
@@ -21,5 +21,5 @@ export {
 	Footer as CardFooter,
 	Header as CardHeader,
 	Title as CardTitle,
-	Action as CardAction,
+	Action as CardAction
 };
diff --git a/src/lib/components/ui/command/command-dialog.svelte b/src/lib/components/ui/command/command-dialog.svelte
index 5c9a82a..c4d3587 100644
--- a/src/lib/components/ui/command/command-dialog.svelte
+++ b/src/lib/components/ui/command/command-dialog.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from "bits-ui";
-	import type { Snippet } from "svelte";
-	import Command from "./command.svelte";
-	import * as Dialog from "$lib/components/ui/dialog/index.js";
-	import type { WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import Command from './command.svelte';
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import type { WithoutChildrenOrChild } from '$lib/utils.js';
 
 	let {
 		open = $bindable(false),
 		ref = $bindable(null),
-		value = $bindable(""),
-		title = "Command Palette",
-		description = "Search for a command to run",
+		value = $bindable(''),
+		title = 'Command Palette',
+		description = 'Search for a command to run',
 		portalProps,
 		children,
 		...restProps
@@ -30,7 +30,7 @@
 	</Dialog.Header>
 	<Dialog.Content class="overflow-hidden p-0" {portalProps}>
 		<Command
-			class="**:data-[slot=command-input-wrapper]:h-12 [&_[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"
+			class="**:data-[slot=command-input-wrapper]:h-12 [&_[data-command-group]]:px-2 [&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[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
 			bind:ref
diff --git a/src/lib/components/ui/command/command-empty.svelte b/src/lib/components/ui/command/command-empty.svelte
index 6726cd8..c2ce165 100644
--- a/src/lib/components/ui/command/command-empty.svelte
+++ b/src/lib/components/ui/command/command-empty.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <CommandPrimitive.Empty
 	bind:ref
 	data-slot="command-empty"
-	class={cn("py-6 text-center text-sm", className)}
+	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 104f817..4097222 100644
--- a/src/lib/components/ui/command/command-group.svelte
+++ b/src/lib/components/ui/command/command-group.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Command as CommandPrimitive, useId } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Command as CommandPrimitive, useId } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -17,14 +17,12 @@
 <CommandPrimitive.Group
 	bind:ref
 	data-slot="command-group"
-	class={cn("text-foreground overflow-hidden p-1", className)}
+	class={cn('text-foreground overflow-hidden p-1', className)}
 	value={value ?? heading ?? `----${useId()}`}
 	{...restProps}
 >
 	{#if heading}
-		<CommandPrimitive.GroupHeading
-			class="text-muted-foreground px-2 py-1.5 text-xs font-medium"
-		>
+		<CommandPrimitive.GroupHeading class="text-muted-foreground px-2 py-1.5 text-xs font-medium">
 			{heading}
 		</CommandPrimitive.GroupHeading>
 	{/if}
diff --git a/src/lib/components/ui/command/command-input.svelte b/src/lib/components/ui/command/command-input.svelte
index 240278a..3acb041 100644
--- a/src/lib/components/ui/command/command-input.svelte
+++ b/src/lib/components/ui/command/command-input.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "bits-ui";
-	import SearchIcon from "@lucide/svelte/icons/search";
-	import { cn } from "$lib/utils.js";
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import SearchIcon from '@lucide/svelte/icons/search';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		value = $bindable(""),
+		value = $bindable(''),
 		...restProps
 	}: CommandPrimitive.InputProps = $props();
 </script>
@@ -16,7 +16,7 @@
 	<CommandPrimitive.Input
 		data-slot="command-input"
 		class={cn(
-			"placeholder:text-muted-foreground outline-hidden flex h-10 w-full rounded-md bg-transparent py-3 text-sm disabled:cursor-not-allowed disabled:opacity-50",
+			'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
 			className
 		)}
 		bind:ref
diff --git a/src/lib/components/ui/command/command-item.svelte b/src/lib/components/ui/command/command-item.svelte
index d94d07f..063adb7 100644
--- a/src/lib/components/ui/command/command-item.svelte
+++ b/src/lib/components/ui/command/command-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="command-item"
 	class={cn(
-		"aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/command/command-link-item.svelte b/src/lib/components/ui/command/command-link-item.svelte
index 944c22d..4edde50 100644
--- a/src/lib/components/ui/command/command-link-item.svelte
+++ b/src/lib/components/ui/command/command-link-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="command-item"
 	class={cn(
-		"aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/command/command-list.svelte b/src/lib/components/ui/command/command-list.svelte
index 569f595..8ff87f0 100644
--- a/src/lib/components/ui/command/command-list.svelte
+++ b/src/lib/components/ui/command/command-list.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <CommandPrimitive.List
 	bind:ref
 	data-slot="command-list"
-	class={cn("max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden", className)}
+	class={cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/command/command-separator.svelte b/src/lib/components/ui/command/command-separator.svelte
index 35c4c95..d75e794 100644
--- a/src/lib/components/ui/command/command-separator.svelte
+++ b/src/lib/components/ui/command/command-separator.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <CommandPrimitive.Separator
 	bind:ref
 	data-slot="command-separator"
-	class={cn("bg-border -mx-1 h-px", className)}
+	class={cn('bg-border -mx-1 h-px', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/command/command-shortcut.svelte b/src/lib/components/ui/command/command-shortcut.svelte
index 3d68bc5..0c47933 100644
--- a/src/lib/components/ui/command/command-shortcut.svelte
+++ b/src/lib/components/ui/command/command-shortcut.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <span
 	bind:this={ref}
 	data-slot="command-shortcut"
-	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+	class={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/command/command.svelte b/src/lib/components/ui/command/command.svelte
index c64a77e..adff6e0 100644
--- a/src/lib/components/ui/command/command.svelte
+++ b/src/lib/components/ui/command/command.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
-		value = $bindable(""),
+		value = $bindable(''),
 		class: className,
 		...restProps
 	}: CommandPrimitive.RootProps = $props();
@@ -15,7 +15,7 @@
 	bind:ref
 	data-slot="command"
 	class={cn(
-		"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+		'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/command/index.ts b/src/lib/components/ui/command/index.ts
index d3dbade..dee2364 100644
--- a/src/lib/components/ui/command/index.ts
+++ b/src/lib/components/ui/command/index.ts
@@ -1,15 +1,15 @@
-import { Command as CommandPrimitive } from "bits-ui";
+import { Command as CommandPrimitive } from 'bits-ui';
 
-import Root from "./command.svelte";
-import Dialog from "./command-dialog.svelte";
-import Empty from "./command-empty.svelte";
-import Group from "./command-group.svelte";
-import Item from "./command-item.svelte";
-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";
+import Root from './command.svelte';
+import Dialog from './command-dialog.svelte';
+import Empty from './command-empty.svelte';
+import Group from './command-group.svelte';
+import Item from './command-item.svelte';
+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;
 
@@ -36,5 +36,5 @@ export {
 	List as CommandList,
 	Separator as CommandSeparator,
 	Shortcut as CommandShortcut,
-	Loading as CommandLoading,
+	Loading as CommandLoading
 };
diff --git a/src/lib/components/ui/dialog/dialog-close.svelte b/src/lib/components/ui/dialog/dialog-close.svelte
index 840b2f6..e8a96a7 100644
--- a/src/lib/components/ui/dialog/dialog-close.svelte
+++ b/src/lib/components/ui/dialog/dialog-close.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { Dialog as DialogPrimitive } from 'bits-ui';
 
 	let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
 </script>
diff --git a/src/lib/components/ui/dialog/dialog-content.svelte b/src/lib/components/ui/dialog/dialog-content.svelte
index 99cc73b..c0e54b8 100644
--- a/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/src/lib/components/ui/dialog/dialog-content.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-	import XIcon from "@lucide/svelte/icons/x";
-	import type { Snippet } from "svelte";
-	import * as Dialog from "./index.js";
-	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import XIcon from '@lucide/svelte/icons/x';
+	import type { Snippet } from 'svelte';
+	import * as Dialog from './index.js';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -25,7 +25,7 @@
 		bind:ref
 		data-slot="dialog-content"
 		class={cn(
-			"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 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+			'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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
 			className
 		)}
 		{...restProps}
@@ -33,7 +33,7 @@
 		{@render children?.()}
 		{#if showCloseButton}
 			<DialogPrimitive.Close
-				class="ring-offset-background focus:ring-ring rounded-xs focus:outline-hidden absolute right-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+				class="ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
 			>
 				<XIcon />
 				<span class="sr-only">Close</span>
diff --git a/src/lib/components/ui/dialog/dialog-description.svelte b/src/lib/components/ui/dialog/dialog-description.svelte
index 3845023..c658420 100644
--- a/src/lib/components/ui/dialog/dialog-description.svelte
+++ b/src/lib/components/ui/dialog/dialog-description.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <DialogPrimitive.Description
 	bind:ref
 	data-slot="dialog-description"
-	class={cn("text-muted-foreground text-sm", className)}
+	class={cn('text-muted-foreground text-sm', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/dialog/dialog-footer.svelte b/src/lib/components/ui/dialog/dialog-footer.svelte
index e7ff446..c457d56 100644
--- a/src/lib/components/ui/dialog/dialog-footer.svelte
+++ b/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="dialog-footer"
-	class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+	class={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/dialog/dialog-header.svelte b/src/lib/components/ui/dialog/dialog-header.svelte
index fc90cd9..5fe4145 100644
--- a/src/lib/components/ui/dialog/dialog-header.svelte
+++ b/src/lib/components/ui/dialog/dialog-header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="dialog-header"
-	class={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+	class={cn('flex flex-col gap-2 text-center sm:text-left', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/dialog/dialog-overlay.svelte b/src/lib/components/ui/dialog/dialog-overlay.svelte
index f81ad83..938ab1e 100644
--- a/src/lib/components/ui/dialog/dialog-overlay.svelte
+++ b/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="dialog-overlay"
 	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/50",
+		'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/50',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/dialog/dialog-title.svelte b/src/lib/components/ui/dialog/dialog-title.svelte
index 067e55e..7073699 100644
--- a/src/lib/components/ui/dialog/dialog-title.svelte
+++ b/src/lib/components/ui/dialog/dialog-title.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <DialogPrimitive.Title
 	bind:ref
 	data-slot="dialog-title"
-	class={cn("text-lg font-semibold leading-none", className)}
+	class={cn('text-lg leading-none font-semibold', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/dialog/dialog-trigger.svelte b/src/lib/components/ui/dialog/dialog-trigger.svelte
index 9d1e801..ac04d9f 100644
--- a/src/lib/components/ui/dialog/dialog-trigger.svelte
+++ b/src/lib/components/ui/dialog/dialog-trigger.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { Dialog as DialogPrimitive } from 'bits-ui';
 
 	let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
 </script>
diff --git a/src/lib/components/ui/dialog/index.ts b/src/lib/components/ui/dialog/index.ts
index dce1d9d..d9e5fb8 100644
--- a/src/lib/components/ui/dialog/index.ts
+++ b/src/lib/components/ui/dialog/index.ts
@@ -1,13 +1,13 @@
-import { Dialog as DialogPrimitive } from "bits-ui";
+import { Dialog as DialogPrimitive } from 'bits-ui';
 
-import Title from "./dialog-title.svelte";
-import Footer from "./dialog-footer.svelte";
-import Header from "./dialog-header.svelte";
-import Overlay from "./dialog-overlay.svelte";
-import Content from "./dialog-content.svelte";
-import Description from "./dialog-description.svelte";
-import Trigger from "./dialog-trigger.svelte";
-import Close from "./dialog-close.svelte";
+import Title from './dialog-title.svelte';
+import Footer from './dialog-footer.svelte';
+import Header from './dialog-header.svelte';
+import Overlay from './dialog-overlay.svelte';
+import Content from './dialog-content.svelte';
+import Description from './dialog-description.svelte';
+import Trigger from './dialog-trigger.svelte';
+import Close from './dialog-close.svelte';
 
 const Root = DialogPrimitive.Root;
 const Portal = DialogPrimitive.Portal;
@@ -33,5 +33,5 @@ export {
 	Overlay as DialogOverlay,
 	Content as DialogContent,
 	Description as DialogDescription,
-	Close as DialogClose,
+	Close as DialogClose
 };
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 e03f949..e94c637 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,9 +1,9 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import CheckIcon from "@lucide/svelte/icons/check";
-	import MinusIcon from "@lucide/svelte/icons/minus";
-	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
-	import type { Snippet } from "svelte";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import MinusIcon from '@lucide/svelte/icons/minus';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+	import type { Snippet } from 'svelte';
 
 	let {
 		ref = $bindable(null),
@@ -23,7 +23,7 @@
 	bind:indeterminate
 	data-slot="dropdown-menu-checkbox-item"
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
@@ -33,7 +33,7 @@
 			{#if indeterminate}
 				<MinusIcon class="size-4" />
 			{:else}
-				<CheckIcon class={cn("size-4", !checked && "text-transparent")} />
+				<CheckIcon class={cn('size-4', !checked && 'text-transparent')} />
 			{/if}
 		</span>
 		{@render childrenProp?.()}
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 498c4b9..25223ef 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn } from "$lib/utils.js";
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from '$lib/utils.js';
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
 
 	let {
 		ref = $bindable(null),
@@ -19,7 +19,7 @@
 		data-slot="dropdown-menu-content"
 		{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 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md",
+			'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 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
 			className
 		)}
 		{...restProps}
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
index 48d14a9..920848e 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
-	import type { ComponentProps } from "svelte";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+	import type { ComponentProps } from 'svelte';
 
 	let {
 		ref = $bindable(null),
@@ -17,6 +17,6 @@
 	bind:ref
 	data-slot="dropdown-menu-group-heading"
 	data-inset={inset}
-	class={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8", className)}
+	class={cn('px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
index aca1f7b..261ab7e 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
 
 	let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.GroupProps = $props();
 </script>
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 64bb283..38bc45b 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { cn } from "$lib/utils.js";
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from '$lib/utils.js';
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		inset,
-		variant = "default",
+		variant = 'default',
 		...restProps
 	}: DropdownMenuPrimitive.ItemProps & {
 		inset?: boolean;
-		variant?: "default" | "destructive";
+		variant?: 'default' | 'destructive';
 	} = $props();
 </script>
 
@@ -20,7 +20,7 @@
 	data-inset={inset}
 	data-variant={variant}
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...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 f72e477..14e40f7 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -17,7 +17,7 @@
 	bind:this={ref}
 	data-slot="dropdown-menu-label"
 	data-inset={inset}
-	class={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8", className)}
+	class={cn('px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8', className)}
 	{...restProps}
 >
 	{@render children?.()}
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
index 189aef4..3e98749 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
 
 	let {
 		ref = $bindable(null),
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 513170a..3c6330a 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,7 +1,7 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import CircleIcon from "@lucide/svelte/icons/circle";
-	import { cn, type WithoutChild } from "$lib/utils.js";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import CircleIcon from '@lucide/svelte/icons/circle';
+	import { cn, type WithoutChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -15,7 +15,7 @@
 	bind:ref
 	data-slot="dropdown-menu-radio-item"
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
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 90f1b6f..38dabc1 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <DropdownMenuPrimitive.Separator
 	bind:ref
 	data-slot="dropdown-menu-separator"
-	class={cn("bg-border -mx-1 my-1 h-px", className)}
+	class={cn('bg-border -mx-1 my-1 h-px', className)}
 	{...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 6974947..dbe6e20 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <span
 	bind:this={ref}
 	data-slot="dropdown-menu-shortcut"
-	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+	class={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
 	{...restProps}
 >
 	{@render children?.()}
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 30deb9e..d3d71d3 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,6 +1,6 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="dropdown-menu-sub-content"
 	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 origin-(--radix-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
+		'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] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
 		className
 	)}
 	{...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 f9b286a..e37ac1a 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
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
-	import { cn } from "$lib/utils.js";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -19,7 +19,7 @@
 	data-slot="dropdown-menu-sub-trigger"
 	data-inset={inset}
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground outline-hidden [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
index cb05344..032b645 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
 
 	let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.TriggerProps = $props();
 </script>
diff --git a/src/lib/components/ui/dropdown-menu/index.ts b/src/lib/components/ui/dropdown-menu/index.ts
index 1cf9f70..aeb398e 100644
--- a/src/lib/components/ui/dropdown-menu/index.ts
+++ b/src/lib/components/ui/dropdown-menu/index.ts
@@ -1,17 +1,17 @@
-import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
-import Content from "./dropdown-menu-content.svelte";
-import Group from "./dropdown-menu-group.svelte";
-import Item from "./dropdown-menu-item.svelte";
-import Label from "./dropdown-menu-label.svelte";
-import RadioGroup from "./dropdown-menu-radio-group.svelte";
-import RadioItem from "./dropdown-menu-radio-item.svelte";
-import Separator from "./dropdown-menu-separator.svelte";
-import Shortcut from "./dropdown-menu-shortcut.svelte";
-import Trigger from "./dropdown-menu-trigger.svelte";
-import SubContent from "./dropdown-menu-sub-content.svelte";
-import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
-import GroupHeading from "./dropdown-menu-group-heading.svelte";
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+import CheckboxItem from './dropdown-menu-checkbox-item.svelte';
+import Content from './dropdown-menu-content.svelte';
+import Group from './dropdown-menu-group.svelte';
+import Item from './dropdown-menu-item.svelte';
+import Label from './dropdown-menu-label.svelte';
+import RadioGroup from './dropdown-menu-radio-group.svelte';
+import RadioItem from './dropdown-menu-radio-item.svelte';
+import Separator from './dropdown-menu-separator.svelte';
+import Shortcut from './dropdown-menu-shortcut.svelte';
+import Trigger from './dropdown-menu-trigger.svelte';
+import SubContent from './dropdown-menu-sub-content.svelte';
+import SubTrigger from './dropdown-menu-sub-trigger.svelte';
+import GroupHeading from './dropdown-menu-group-heading.svelte';
 const Sub = DropdownMenuPrimitive.Sub;
 const Root = DropdownMenuPrimitive.Root;
 
@@ -45,5 +45,5 @@ export {
 	Sub,
 	SubContent,
 	SubTrigger,
-	Trigger,
+	Trigger
 };
diff --git a/src/lib/components/ui/form/form-button.svelte b/src/lib/components/ui/form/form-button.svelte
index cc0c590..550f6ac 100644
--- a/src/lib/components/ui/form/form-button.svelte
+++ b/src/lib/components/ui/form/form-button.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Button from "$lib/components/ui/button/index.js";
+	import * as Button from '$lib/components/ui/button/index.js';
 
 	let { ref = $bindable(null), ...restProps }: Button.Props = $props();
 </script>
diff --git a/src/lib/components/ui/form/form-description.svelte b/src/lib/components/ui/form/form-description.svelte
index a5f42be..fa6f8f8 100644
--- a/src/lib/components/ui/form/form-description.svelte
+++ b/src/lib/components/ui/form/form-description.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import * as FormPrimitive from "formsnap";
-	import { cn, type WithoutChild } from "$lib/utils.js";
+	import * as FormPrimitive from 'formsnap';
+	import { cn, type WithoutChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <FormPrimitive.Description
 	bind:ref
 	data-slot="form-description"
-	class={cn("text-muted-foreground text-sm", className)}
+	class={cn('text-muted-foreground text-sm', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/form/form-element-field.svelte b/src/lib/components/ui/form/form-element-field.svelte
index c3ba111..0300c8f 100644
--- a/src/lib/components/ui/form/form-element-field.svelte
+++ b/src/lib/components/ui/form/form-element-field.svelte
@@ -1,8 +1,8 @@
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPathLeaves<T>">
-	import * as FormPrimitive from "formsnap";
-	import type { FormPathLeaves } from "sveltekit-superforms";
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+	import * as FormPrimitive from 'formsnap';
+	import type { FormPathLeaves } from 'sveltekit-superforms';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -17,7 +17,7 @@
 
 <FormPrimitive.ElementField {form} {name}>
 	{#snippet children({ constraints, errors, tainted, value })}
-		<div bind:this={ref} class={cn("space-y-2", className)} {...restProps}>
+		<div bind:this={ref} class={cn('space-y-2', className)} {...restProps}>
 			{@render childrenProp?.({ constraints, errors, tainted, value: value as T[U] })}
 		</div>
 	{/snippet}
diff --git a/src/lib/components/ui/form/form-field-errors.svelte b/src/lib/components/ui/form/form-field-errors.svelte
index b4c6fba..9150acf 100644
--- a/src/lib/components/ui/form/form-field-errors.svelte
+++ b/src/lib/components/ui/form/form-field-errors.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import * as FormPrimitive from "formsnap";
-	import { cn, type WithoutChild } from "$lib/utils.js";
+	import * as FormPrimitive from 'formsnap';
+	import { cn, type WithoutChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -15,7 +15,7 @@
 
 <FormPrimitive.FieldErrors
 	bind:ref
-	class={cn("text-destructive text-sm font-medium", className)}
+	class={cn('text-destructive text-sm font-medium', className)}
 	{...restProps}
 >
 	{#snippet children({ errors, errorProps })}
diff --git a/src/lib/components/ui/form/form-field.svelte b/src/lib/components/ui/form/form-field.svelte
index 7481fda..6f061ca 100644
--- a/src/lib/components/ui/form/form-field.svelte
+++ b/src/lib/components/ui/form/form-field.svelte
@@ -1,8 +1,8 @@
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
-	import * as FormPrimitive from "formsnap";
-	import type { FormPath } from "sveltekit-superforms";
-	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import * as FormPrimitive from 'formsnap';
+	import type { FormPath } from 'sveltekit-superforms';
+	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -17,12 +17,7 @@
 
 <FormPrimitive.Field {form} {name}>
 	{#snippet children({ constraints, errors, tainted, value })}
-		<div
-			bind:this={ref}
-			data-slot="form-item"
-			class={cn("space-y-2", className)}
-			{...restProps}
-		>
+		<div bind:this={ref} data-slot="form-item" class={cn('space-y-2', className)} {...restProps}>
 			{@render childrenProp?.({ constraints, errors, tainted, value: value as T[U] })}
 		</div>
 	{/snippet}
diff --git a/src/lib/components/ui/form/form-fieldset.svelte b/src/lib/components/ui/form/form-fieldset.svelte
index 2c85857..1ee7463 100644
--- a/src/lib/components/ui/form/form-fieldset.svelte
+++ b/src/lib/components/ui/form/form-fieldset.svelte
@@ -1,7 +1,7 @@
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
-	import * as FormPrimitive from "formsnap";
-	import type { FormPath } from "sveltekit-superforms";
-	import { cn, type WithoutChild } from "$lib/utils.js";
+	import * as FormPrimitive from 'formsnap';
+	import type { FormPath } from 'sveltekit-superforms';
+	import { cn, type WithoutChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,4 +12,4 @@
 	}: WithoutChild<FormPrimitive.FieldsetProps<T, U>> = $props();
 </script>
 
-<FormPrimitive.Fieldset bind:ref {form} {name} class={cn("space-y-2", className)} {...restProps} />
+<FormPrimitive.Fieldset bind:ref {form} {name} class={cn('space-y-2', className)} {...restProps} />
diff --git a/src/lib/components/ui/form/form-label.svelte b/src/lib/components/ui/form/form-label.svelte
index 8749360..6d92ce7 100644
--- a/src/lib/components/ui/form/form-label.svelte
+++ b/src/lib/components/ui/form/form-label.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import * as FormPrimitive from "formsnap";
-	import { Label } from "$lib/components/ui/label/index.js";
-	import { cn, type WithoutChild } from "$lib/utils.js";
+	import * as FormPrimitive from 'formsnap';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import { cn, type WithoutChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -16,7 +16,7 @@
 		<Label
 			{...props}
 			data-slot="form-label"
-			class={cn("data-[fs-error]:text-destructive", className)}
+			class={cn('data-[fs-error]:text-destructive', className)}
 		>
 			{@render children?.()}
 		</Label>
diff --git a/src/lib/components/ui/form/form-legend.svelte b/src/lib/components/ui/form/form-legend.svelte
index 9d52f6a..bc91222 100644
--- a/src/lib/components/ui/form/form-legend.svelte
+++ b/src/lib/components/ui/form/form-legend.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import * as FormPrimitive from "formsnap";
-	import { cn, type WithoutChild } from "$lib/utils.js";
+	import * as FormPrimitive from 'formsnap';
+	import { cn, type WithoutChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +11,6 @@
 
 <FormPrimitive.Legend
 	bind:ref
-	class={cn("data-[fs-error]:text-destructive text-sm font-medium leading-none", className)}
+	class={cn('data-[fs-error]:text-destructive text-sm leading-none font-medium', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/form/index.ts b/src/lib/components/ui/form/index.ts
index 0713927..2d129aa 100644
--- a/src/lib/components/ui/form/index.ts
+++ b/src/lib/components/ui/form/index.ts
@@ -1,12 +1,12 @@
-import * as FormPrimitive from "formsnap";
-import Description from "./form-description.svelte";
-import Label from "./form-label.svelte";
-import FieldErrors from "./form-field-errors.svelte";
-import Field from "./form-field.svelte";
-import Fieldset from "./form-fieldset.svelte";
-import Legend from "./form-legend.svelte";
-import ElementField from "./form-element-field.svelte";
-import Button from "./form-button.svelte";
+import * as FormPrimitive from 'formsnap';
+import Description from './form-description.svelte';
+import Label from './form-label.svelte';
+import FieldErrors from './form-field-errors.svelte';
+import Field from './form-field.svelte';
+import Fieldset from './form-fieldset.svelte';
+import Legend from './form-legend.svelte';
+import ElementField from './form-element-field.svelte';
+import Button from './form-button.svelte';
 
 const Control = FormPrimitive.Control;
 
@@ -29,5 +29,5 @@ export {
 	Fieldset as FormFieldset,
 	Legend as FormLegend,
 	ElementField as FormElementField,
-	Button as FormButton,
+	Button as FormButton
 };
diff --git a/src/lib/components/ui/input/index.ts b/src/lib/components/ui/input/index.ts
index f47b6d3..15c0933 100644
--- a/src/lib/components/ui/input/index.ts
+++ b/src/lib/components/ui/input/index.ts
@@ -1,7 +1,7 @@
-import Root from "./input.svelte";
+import Root from './input.svelte';
 
 export {
 	Root,
 	//
-	Root as Input,
+	Root as Input
 };
diff --git a/src/lib/components/ui/input/input.svelte b/src/lib/components/ui/input/input.svelte
index 19c6dae..7598a86 100644
--- a/src/lib/components/ui/input/input.svelte
+++ b/src/lib/components/ui/input/input.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
-	type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+	type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
 
 	type Props = WithElementRef<
-		Omit<HTMLInputAttributes, "type"> &
-			({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
+		Omit<HTMLInputAttributes, 'type'> &
+			({ type: 'file'; files?: FileList } | { type?: InputType; files?: undefined })
 	>;
 
 	let {
@@ -19,14 +19,14 @@
 	}: Props = $props();
 </script>
 
-{#if type === "file"}
+{#if type === 'file'}
 	<input
 		bind:this={ref}
 		data-slot="input"
 		class={cn(
-			"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+			'selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+			'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+			'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
 			className
 		)}
 		type="file"
@@ -39,9 +39,9 @@
 		bind:this={ref}
 		data-slot="input"
 		class={cn(
-			"border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+			'border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+			'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+			'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
 			className
 		)}
 		{type}
diff --git a/src/lib/components/ui/label/index.ts b/src/lib/components/ui/label/index.ts
index 8bfca0b..808d141 100644
--- a/src/lib/components/ui/label/index.ts
+++ b/src/lib/components/ui/label/index.ts
@@ -1,7 +1,7 @@
-import Root from "./label.svelte";
+import Root from './label.svelte';
 
 export {
 	Root,
 	//
-	Root as Label,
+	Root as Label
 };
diff --git a/src/lib/components/ui/label/label.svelte b/src/lib/components/ui/label/label.svelte
index d0afda3..7fef72e 100644
--- a/src/lib/components/ui/label/label.svelte
+++ b/src/lib/components/ui/label/label.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Label as LabelPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Label as LabelPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="label"
 	class={cn(
-		"flex select-none items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
+		'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/menubar/index.ts b/src/lib/components/ui/menubar/index.ts
index 57a6cfb..8489c00 100644
--- a/src/lib/components/ui/menubar/index.ts
+++ b/src/lib/components/ui/menubar/index.ts
@@ -1,17 +1,17 @@
-import { Menubar as MenubarPrimitive } from "bits-ui";
-import Root from "./menubar.svelte";
-import CheckboxItem from "./menubar-checkbox-item.svelte";
-import Content from "./menubar-content.svelte";
-import Item from "./menubar-item.svelte";
-import Group from "./menubar-group.svelte";
-import RadioItem from "./menubar-radio-item.svelte";
-import Separator from "./menubar-separator.svelte";
-import Shortcut from "./menubar-shortcut.svelte";
-import SubContent from "./menubar-sub-content.svelte";
-import SubTrigger from "./menubar-sub-trigger.svelte";
-import Trigger from "./menubar-trigger.svelte";
-import Label from "./menubar-label.svelte";
-import GroupHeading from "./menubar-group-heading.svelte";
+import { Menubar as MenubarPrimitive } from 'bits-ui';
+import Root from './menubar.svelte';
+import CheckboxItem from './menubar-checkbox-item.svelte';
+import Content from './menubar-content.svelte';
+import Item from './menubar-item.svelte';
+import Group from './menubar-group.svelte';
+import RadioItem from './menubar-radio-item.svelte';
+import Separator from './menubar-separator.svelte';
+import Shortcut from './menubar-shortcut.svelte';
+import SubContent from './menubar-sub-content.svelte';
+import SubTrigger from './menubar-sub-trigger.svelte';
+import Trigger from './menubar-trigger.svelte';
+import Label from './menubar-label.svelte';
+import GroupHeading from './menubar-group-heading.svelte';
 
 const Menu = MenubarPrimitive.Menu;
 const Sub = MenubarPrimitive.Sub;
@@ -50,5 +50,5 @@ export {
 	Sub as MenubarSub,
 	RadioGroup as MenubarRadioGroup,
 	Label as MenubarLabel,
-	GroupHeading as MenubarGroupHeading,
+	GroupHeading as MenubarGroupHeading
 };
diff --git a/src/lib/components/ui/menubar/menubar-checkbox-item.svelte b/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
index 012d68b..5f7192e 100644
--- a/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
+++ b/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import CheckIcon from "@lucide/svelte/icons/check";
-	import MinusIcon from "@lucide/svelte/icons/minus";
-	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
-	import type { Snippet } from "svelte";
+	import { Menubar as MenubarPrimitive } from 'bits-ui';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import MinusIcon from '@lucide/svelte/icons/minus';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+	import type { Snippet } from 'svelte';
 
 	let {
 		ref = $bindable(null),
@@ -23,7 +23,7 @@
 	bind:indeterminate
 	data-slot="menubar-checkbox-item"
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground rounded-xs outline-hidden relative flex cursor-default select-none items-center gap-2 py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
@@ -33,7 +33,7 @@
 			{#if indeterminate}
 				<MinusIcon class="size-4" />
 			{:else}
-				<CheckIcon class={cn("size-4", !checked && "text-transparent")} />
+				<CheckIcon class={cn('size-4', !checked && 'text-transparent')} />
 			{/if}
 		</span>
 		{@render childrenProp?.()}
diff --git a/src/lib/components/ui/menubar/menubar-content.svelte b/src/lib/components/ui/menubar/menubar-content.svelte
index d193622..362caec 100644
--- a/src/lib/components/ui/menubar/menubar-content.svelte
+++ b/src/lib/components/ui/menubar/menubar-content.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Menubar as MenubarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		sideOffset = 8,
 		alignOffset = -4,
-		align = "start",
-		side = "bottom",
+		align = 'start',
+		side = 'bottom',
 		portalProps,
 		...restProps
 	}: MenubarPrimitive.ContentProps & {
@@ -25,7 +25,7 @@
 		{alignOffset}
 		{side}
 		class={cn(
-			"bg-popover text-popover-foreground data-[state=open]:animate-in 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 origin-(--bits-menubar-content-transform-origin) z-50 min-w-[12rem] overflow-hidden rounded-md border p-1 shadow-md",
+			'bg-popover text-popover-foreground data-[state=open]:animate-in 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-[12rem] origin-(--bits-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
 			className
 		)}
 		{...restProps}
diff --git a/src/lib/components/ui/menubar/menubar-group-heading.svelte b/src/lib/components/ui/menubar/menubar-group-heading.svelte
index 024e742..522ae0a 100644
--- a/src/lib/components/ui/menubar/menubar-group-heading.svelte
+++ b/src/lib/components/ui/menubar/menubar-group-heading.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { cn } from "$lib/utils.js";
-	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import type { ComponentProps } from "svelte";
+	import { cn } from '$lib/utils.js';
+	import { Menubar as MenubarPrimitive } from 'bits-ui';
+	import type { ComponentProps } from 'svelte';
 
 	let {
 		ref = $bindable(null),
@@ -17,6 +17,6 @@
 	bind:ref
 	data-slot="menubar-group-heading"
 	data-inset={inset}
-	class={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
+	class={cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/menubar/menubar-group.svelte b/src/lib/components/ui/menubar/menubar-group.svelte
index f75b75a..6c02051 100644
--- a/src/lib/components/ui/menubar/menubar-group.svelte
+++ b/src/lib/components/ui/menubar/menubar-group.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { Menubar as MenubarPrimitive } from 'bits-ui';
 
 	let {
 		ref = $bindable(null),
diff --git a/src/lib/components/ui/menubar/menubar-item.svelte b/src/lib/components/ui/menubar/menubar-item.svelte
index 8c20d42..0e57f1b 100644
--- a/src/lib/components/ui/menubar/menubar-item.svelte
+++ b/src/lib/components/ui/menubar/menubar-item.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Menubar as MenubarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		inset = undefined,
-		variant = "default",
+		variant = 'default',
 		...restProps
 	}: MenubarPrimitive.ItemProps & {
 		inset?: boolean;
-		variant?: "default" | "destructive";
+		variant?: 'default' | 'destructive';
 	} = $props();
 </script>
 
@@ -20,7 +20,7 @@
 	data-inset={inset}
 	data-variant={variant}
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/menubar/menubar-label.svelte b/src/lib/components/ui/menubar/menubar-label.svelte
index 1b36f6c..4d05d2e 100644
--- a/src/lib/components/ui/menubar/menubar-label.svelte
+++ b/src/lib/components/ui/menubar/menubar-label.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { cn } from "$lib/utils.js";
-	import { type WithElementRef } from "bits-ui";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils.js';
+	import { type WithElementRef } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -18,7 +18,7 @@
 	bind:this={ref}
 	data-slot="menubar-label"
 	data-inset={inset}
-	class={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
+	class={cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/menubar/menubar-radio-item.svelte b/src/lib/components/ui/menubar/menubar-radio-item.svelte
index 3da12d4..b03b6f7 100644
--- a/src/lib/components/ui/menubar/menubar-radio-item.svelte
+++ b/src/lib/components/ui/menubar/menubar-radio-item.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import CircleIcon from "@lucide/svelte/icons/circle";
-	import { cn, type WithoutChild } from "$lib/utils.js";
+	import { Menubar as MenubarPrimitive } from 'bits-ui';
+	import CircleIcon from '@lucide/svelte/icons/circle';
+	import { cn, type WithoutChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -15,7 +15,7 @@
 	bind:ref
 	data-slot="menubar-radio-item"
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground rounded-xs outline-hidden relative flex cursor-default select-none items-center gap-2 py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/menubar/menubar-separator.svelte b/src/lib/components/ui/menubar/menubar-separator.svelte
index a2caf6e..b3c2565 100644
--- a/src/lib/components/ui/menubar/menubar-separator.svelte
+++ b/src/lib/components/ui/menubar/menubar-separator.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Menubar as MenubarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <MenubarPrimitive.Separator
 	bind:ref
 	data-slot="menubar-separator"
-	class={cn("bg-border -mx-1 my-1 h-px", className)}
+	class={cn('bg-border -mx-1 my-1 h-px', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/menubar/menubar-shortcut.svelte b/src/lib/components/ui/menubar/menubar-shortcut.svelte
index 0e08313..2ad1f11 100644
--- a/src/lib/components/ui/menubar/menubar-shortcut.svelte
+++ b/src/lib/components/ui/menubar/menubar-shortcut.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <span
 	bind:this={ref}
 	data-slot="menubar-shortcut"
-	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+	class={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/menubar/menubar-sub-content.svelte b/src/lib/components/ui/menubar/menubar-sub-content.svelte
index cb4d04c..ea29c22 100644
--- a/src/lib/components/ui/menubar/menubar-sub-content.svelte
+++ b/src/lib/components/ui/menubar/menubar-sub-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Menubar as MenubarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="menubar-sub-content"
 	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 origin-(--bits-menubar-content-transform-origin) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
+		'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] origin-(--bits-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/menubar/menubar-sub-trigger.svelte b/src/lib/components/ui/menubar/menubar-sub-trigger.svelte
index 4f9f28a..aa649db 100644
--- a/src/lib/components/ui/menubar/menubar-sub-trigger.svelte
+++ b/src/lib/components/ui/menubar/menubar-sub-trigger.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
-	import { cn, type WithoutChild } from "$lib/utils.js";
+	import { Menubar as MenubarPrimitive } from 'bits-ui';
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { cn, type WithoutChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -19,7 +19,7 @@
 	data-slot="menubar-sub-trigger"
 	data-inset={inset}
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent 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-[inset]:pl-8",
+		'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/menubar/menubar-trigger.svelte b/src/lib/components/ui/menubar/menubar-trigger.svelte
index 1c3dd6a..4a44f2b 100644
--- a/src/lib/components/ui/menubar/menubar-trigger.svelte
+++ b/src/lib/components/ui/menubar/menubar-trigger.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Menubar as MenubarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="menubar-trigger"
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground outline-hidden flex select-none items-center rounded-sm px-2 py-1 text-sm font-medium",
+		'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/menubar/menubar.svelte b/src/lib/components/ui/menubar/menubar.svelte
index 37e0206..de292ca 100644
--- a/src/lib/components/ui/menubar/menubar.svelte
+++ b/src/lib/components/ui/menubar/menubar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Menubar as MenubarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,9 +12,6 @@
 <MenubarPrimitive.Root
 	bind:ref
 	data-slot="menubar"
-	class={cn(
-		"bg-background shadow-xs flex h-9 items-center gap-1 rounded-md border p-1",
-		className
-	)}
+	class={cn('bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/navigation-menu/index.ts b/src/lib/components/ui/navigation-menu/index.ts
index bbc250f..9af7ef6 100644
--- a/src/lib/components/ui/navigation-menu/index.ts
+++ b/src/lib/components/ui/navigation-menu/index.ts
@@ -1,11 +1,11 @@
-import Root from "./navigation-menu.svelte";
-import Content from "./navigation-menu-content.svelte";
-import Indicator from "./navigation-menu-indicator.svelte";
-import Item from "./navigation-menu-item.svelte";
-import Link from "./navigation-menu-link.svelte";
-import List from "./navigation-menu-list.svelte";
-import Trigger from "./navigation-menu-trigger.svelte";
-import Viewport from "./navigation-menu-viewport.svelte";
+import Root from './navigation-menu.svelte';
+import Content from './navigation-menu-content.svelte';
+import Indicator from './navigation-menu-indicator.svelte';
+import Item from './navigation-menu-item.svelte';
+import Link from './navigation-menu-link.svelte';
+import List from './navigation-menu-list.svelte';
+import Trigger from './navigation-menu-trigger.svelte';
+import Viewport from './navigation-menu-viewport.svelte';
 
 export {
 	Root,
@@ -24,5 +24,5 @@ export {
 	Link as NavigationMenuLink,
 	List as NavigationMenuList,
 	Trigger as NavigationMenuTrigger,
-	Viewport as NavigationMenuViewport,
+	Viewport as NavigationMenuViewport
 };
diff --git a/src/lib/components/ui/navigation-menu/navigation-menu-content.svelte b/src/lib/components/ui/navigation-menu/navigation-menu-content.svelte
index 9dbdb36..7e11a03 100644
--- a/src/lib/components/ui/navigation-menu/navigation-menu-content.svelte
+++ b/src/lib/components/ui/navigation-menu/navigation-menu-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,8 +13,8 @@
 	bind:ref
 	data-slot="navigation-menu-content"
 	class={cn(
-		"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 left-0 top-0 w-full md:absolute md:w-auto",
-		"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200",
+		'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full md:absolute md:w-auto',
+		'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/navigation-menu/navigation-menu-indicator.svelte b/src/lib/components/ui/navigation-menu/navigation-menu-indicator.svelte
index 6c9bdfd..2876ae8 100644
--- a/src/lib/components/ui/navigation-menu/navigation-menu-indicator.svelte
+++ b/src/lib/components/ui/navigation-menu/navigation-menu-indicator.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="navigation-menu-indicator"
 	class={cn(
-		"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+		'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/navigation-menu/navigation-menu-item.svelte b/src/lib/components/ui/navigation-menu/navigation-menu-item.svelte
index b00b4b4..77f4e0a 100644
--- a/src/lib/components/ui/navigation-menu/navigation-menu-item.svelte
+++ b/src/lib/components/ui/navigation-menu/navigation-menu-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <NavigationMenuPrimitive.Item
 	bind:ref
 	data-slot="navigation-menu-item"
-	class={cn("relative", className)}
+	class={cn('relative', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/navigation-menu/navigation-menu-link.svelte b/src/lib/components/ui/navigation-menu/navigation-menu-link.svelte
index 867851e..47c6a1a 100644
--- a/src/lib/components/ui/navigation-menu/navigation-menu-link.svelte
+++ b/src/lib/components/ui/navigation-menu/navigation-menu-link.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="navigation-menu-link"
 	class={cn(
-		"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm outline-none transition-all focus-visible:outline-1 focus-visible:ring-[3px] [&_svg:not([class*='size-'])]:size-4",
+		"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/navigation-menu/navigation-menu-list.svelte b/src/lib/components/ui/navigation-menu/navigation-menu-list.svelte
index c2c5880..44ab7a1 100644
--- a/src/lib/components/ui/navigation-menu/navigation-menu-list.svelte
+++ b/src/lib/components/ui/navigation-menu/navigation-menu-list.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <NavigationMenuPrimitive.List
 	bind:ref
 	data-slot="navigation-menu-list"
-	class={cn("group flex flex-1 list-none items-center justify-center gap-1", className)}
+	class={cn('group flex flex-1 list-none items-center justify-center gap-1', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/navigation-menu/navigation-menu-trigger.svelte b/src/lib/components/ui/navigation-menu/navigation-menu-trigger.svelte
index aad82a2..766e465 100644
--- a/src/lib/components/ui/navigation-menu/navigation-menu-trigger.svelte
+++ b/src/lib/components/ui/navigation-menu/navigation-menu-trigger.svelte
@@ -1,15 +1,15 @@
 <script lang="ts" module>
-	import { cn } from "$lib/utils.js";
-	import { tv } from "tailwind-variants";
+	import { cn } from '$lib/utils.js';
+	import { tv } from 'tailwind-variants';
 
 	export const navigationMenuTriggerStyle = tv({
-		base: "bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium outline-none transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50",
+		base: 'bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium outline-none transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50'
 	});
 </script>
 
 <script lang="ts">
-	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
-	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+	import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 
 	let {
 		ref = $bindable(null),
@@ -22,7 +22,7 @@
 <NavigationMenuPrimitive.Trigger
 	bind:ref
 	data-slot="navigation-menu-trigger"
-	class={cn(navigationMenuTriggerStyle(), "group", className)}
+	class={cn(navigationMenuTriggerStyle(), 'group', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/navigation-menu/navigation-menu-viewport.svelte b/src/lib/components/ui/navigation-menu/navigation-menu-viewport.svelte
index 655741d..8dfee38 100644
--- a/src/lib/components/ui/navigation-menu/navigation-menu-viewport.svelte
+++ b/src/lib/components/ui/navigation-menu/navigation-menu-viewport.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -9,12 +9,12 @@
 	}: NavigationMenuPrimitive.ViewportProps = $props();
 </script>
 
-<div class={cn("absolute left-0 top-full isolate z-50 flex justify-center")}>
+<div class={cn('absolute top-full left-0 isolate z-50 flex justify-center')}>
 	<NavigationMenuPrimitive.Viewport
 		bind:ref
 		data-slot="navigation-menu-viewport"
 		class={cn(
-			"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--bits-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--bits-navigation-menu-viewport-width)]",
+			'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--bits-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--bits-navigation-menu-viewport-width)]',
 			className
 		)}
 		{...restProps}
diff --git a/src/lib/components/ui/navigation-menu/navigation-menu.svelte b/src/lib/components/ui/navigation-menu/navigation-menu.svelte
index 69c3d13..327feec 100644
--- a/src/lib/components/ui/navigation-menu/navigation-menu.svelte
+++ b/src/lib/components/ui/navigation-menu/navigation-menu.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
-	import NavigationMenuViewport from "./navigation-menu-viewport.svelte";
+	import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+	import NavigationMenuViewport from './navigation-menu-viewport.svelte';
 
 	let {
 		ref = $bindable(null),
@@ -19,7 +19,7 @@
 	data-slot="navigation-menu"
 	data-viewport={viewport}
 	class={cn(
-		"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+		'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/pagination/index.ts b/src/lib/components/ui/pagination/index.ts
index d83c7a9..2f5532a 100644
--- a/src/lib/components/ui/pagination/index.ts
+++ b/src/lib/components/ui/pagination/index.ts
@@ -1,10 +1,10 @@
-import Root from "./pagination.svelte";
-import Content from "./pagination-content.svelte";
-import Item from "./pagination-item.svelte";
-import Link from "./pagination-link.svelte";
-import PrevButton from "./pagination-prev-button.svelte";
-import NextButton from "./pagination-next-button.svelte";
-import Ellipsis from "./pagination-ellipsis.svelte";
+import Root from './pagination.svelte';
+import Content from './pagination-content.svelte';
+import Item from './pagination-item.svelte';
+import Link from './pagination-link.svelte';
+import PrevButton from './pagination-prev-button.svelte';
+import NextButton from './pagination-next-button.svelte';
+import Ellipsis from './pagination-ellipsis.svelte';
 
 export {
 	Root,
@@ -21,5 +21,5 @@ export {
 	Link as PaginationLink,
 	PrevButton as PaginationPrevButton,
 	NextButton as PaginationNextButton,
-	Ellipsis as PaginationEllipsis,
+	Ellipsis as PaginationEllipsis
 };
diff --git a/src/lib/components/ui/pagination/pagination-content.svelte b/src/lib/components/ui/pagination/pagination-content.svelte
index e1124fc..ce650ce 100644
--- a/src/lib/components/ui/pagination/pagination-content.svelte
+++ b/src/lib/components/ui/pagination/pagination-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <ul
 	bind:this={ref}
 	data-slot="pagination-content"
-	class={cn("flex flex-row items-center gap-1", className)}
+	class={cn('flex flex-row items-center gap-1', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/pagination/pagination-ellipsis.svelte b/src/lib/components/ui/pagination/pagination-ellipsis.svelte
index 3be94c9..a5c800e 100644
--- a/src/lib/components/ui/pagination/pagination-ellipsis.svelte
+++ b/src/lib/components/ui/pagination/pagination-ellipsis.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
-	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import EllipsisIcon from '@lucide/svelte/icons/ellipsis';
+	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	aria-hidden="true"
 	data-slot="pagination-ellipsis"
-	class={cn("flex size-9 items-center justify-center", className)}
+	class={cn('flex size-9 items-center justify-center', className)}
 	{...restProps}
 >
 	<EllipsisIcon class="size-4" />
diff --git a/src/lib/components/ui/pagination/pagination-item.svelte b/src/lib/components/ui/pagination/pagination-item.svelte
index fd7ffc3..f185bf5 100644
--- a/src/lib/components/ui/pagination/pagination-item.svelte
+++ b/src/lib/components/ui/pagination/pagination-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLLiAttributes } from "svelte/elements";
-	import type { WithElementRef } from "$lib/utils.js";
+	import type { HTMLLiAttributes } from 'svelte/elements';
+	import type { WithElementRef } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
diff --git a/src/lib/components/ui/pagination/pagination-link.svelte b/src/lib/components/ui/pagination/pagination-link.svelte
index 58b1a5c..61cdae9 100644
--- a/src/lib/components/ui/pagination/pagination-link.svelte
+++ b/src/lib/components/ui/pagination/pagination-link.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { Pagination as PaginationPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
-	import { type Props, buttonVariants } from "$lib/components/ui/button/index.js";
+	import { Pagination as PaginationPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+	import { type Props, buttonVariants } from '$lib/components/ui/button/index.js';
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		size = "icon",
+		size = 'icon',
 		isActive,
 		page,
 		children,
@@ -24,13 +24,13 @@
 <PaginationPrimitive.Page
 	bind:ref
 	{page}
-	aria-current={isActive ? "page" : undefined}
+	aria-current={isActive ? 'page' : undefined}
 	data-slot="pagination-link"
 	data-active={isActive}
 	class={cn(
 		buttonVariants({
-			variant: isActive ? "outline" : "ghost",
-			size,
+			variant: isActive ? 'outline' : 'ghost',
+			size
 		}),
 		className
 	)}
diff --git a/src/lib/components/ui/pagination/pagination-next-button.svelte b/src/lib/components/ui/pagination/pagination-next-button.svelte
index d4b9553..8fed8d3 100644
--- a/src/lib/components/ui/pagination/pagination-next-button.svelte
+++ b/src/lib/components/ui/pagination/pagination-next-button.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Pagination as PaginationPrimitive } from "bits-ui";
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
-	import { buttonVariants } from "$lib/components/ui/button/index.js";
-	import { cn } from "$lib/utils.js";
+	import { Pagination as PaginationPrimitive } from 'bits-ui';
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -22,9 +22,9 @@
 	aria-label="Go to next page"
 	class={cn(
 		buttonVariants({
-			size: "default",
-			variant: "ghost",
-			class: "gap-1 px-2.5 sm:pr-2.5",
+			size: 'default',
+			variant: 'ghost',
+			class: 'gap-1 px-2.5 sm:pr-2.5'
 		}),
 		className
 	)}
diff --git a/src/lib/components/ui/pagination/pagination-prev-button.svelte b/src/lib/components/ui/pagination/pagination-prev-button.svelte
index 2d3dc70..016e7bf 100644
--- a/src/lib/components/ui/pagination/pagination-prev-button.svelte
+++ b/src/lib/components/ui/pagination/pagination-prev-button.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Pagination as PaginationPrimitive } from "bits-ui";
-	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
-	import { buttonVariants } from "$lib/components/ui/button/index.js";
-	import { cn } from "$lib/utils.js";
+	import { Pagination as PaginationPrimitive } from 'bits-ui';
+	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -22,9 +22,9 @@
 	aria-label="Go to previous page"
 	class={cn(
 		buttonVariants({
-			size: "default",
-			variant: "ghost",
-			class: "gap-1 px-2.5 sm:pl-2.5",
+			size: 'default',
+			variant: 'ghost',
+			class: 'gap-1 px-2.5 sm:pl-2.5'
 		}),
 		className
 	)}
diff --git a/src/lib/components/ui/pagination/pagination.svelte b/src/lib/components/ui/pagination/pagination.svelte
index 60e3471..dac89a0 100644
--- a/src/lib/components/ui/pagination/pagination.svelte
+++ b/src/lib/components/ui/pagination/pagination.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { Pagination as PaginationPrimitive } from 'bits-ui';
 
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -20,7 +20,7 @@
 	role="navigation"
 	aria-label="pagination"
 	data-slot="pagination"
-	class={cn("mx-auto flex w-full justify-center", className)}
+	class={cn('mx-auto flex w-full justify-center', className)}
 	{count}
 	{perPage}
 	{siblingCount}
diff --git a/src/lib/components/ui/popover/index.ts b/src/lib/components/ui/popover/index.ts
index 9f30922..0dcc3cc 100644
--- a/src/lib/components/ui/popover/index.ts
+++ b/src/lib/components/ui/popover/index.ts
@@ -1,6 +1,6 @@
-import { Popover as PopoverPrimitive } from "bits-ui";
-import Content from "./popover-content.svelte";
-import Trigger from "./popover-trigger.svelte";
+import { Popover as PopoverPrimitive } from 'bits-ui';
+import Content from './popover-content.svelte';
+import Trigger from './popover-trigger.svelte';
 const Root = PopoverPrimitive.Root;
 const Close = PopoverPrimitive.Close;
 
@@ -13,5 +13,5 @@ export {
 	Root as Popover,
 	Content as PopoverContent,
 	Trigger as PopoverTrigger,
-	Close as PopoverClose,
+	Close as PopoverClose
 };
diff --git a/src/lib/components/ui/popover/popover-content.svelte b/src/lib/components/ui/popover/popover-content.svelte
index 9bced7a..620f392 100644
--- a/src/lib/components/ui/popover/popover-content.svelte
+++ b/src/lib/components/ui/popover/popover-content.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { cn } from "$lib/utils.js";
-	import { Popover as PopoverPrimitive } from "bits-ui";
+	import { cn } from '$lib/utils.js';
+	import { Popover as PopoverPrimitive } from 'bits-ui';
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		sideOffset = 4,
-		align = "center",
+		align = 'center',
 		portalProps,
 		...restProps
 	}: PopoverPrimitive.ContentProps & {
@@ -21,7 +21,7 @@
 		{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 origin-(--bits-popover-content-transform-origin) outline-hidden z-50 w-72 rounded-md border p-4 shadow-md",
+			'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 origin-(--bits-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
 			className
 		)}
 		{...restProps}
diff --git a/src/lib/components/ui/popover/popover-trigger.svelte b/src/lib/components/ui/popover/popover-trigger.svelte
index 586323c..f21b1b3 100644
--- a/src/lib/components/ui/popover/popover-trigger.svelte
+++ b/src/lib/components/ui/popover/popover-trigger.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn } from "$lib/utils.js";
-	import { Popover as PopoverPrimitive } from "bits-ui";
+	import { cn } from '$lib/utils.js';
+	import { Popover as PopoverPrimitive } from 'bits-ui';
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <PopoverPrimitive.Trigger
 	bind:ref
 	data-slot="popover-trigger"
-	class={cn("", className)}
+	class={cn('', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/radio-group/index.ts b/src/lib/components/ui/radio-group/index.ts
index 90b33fe..a8bb80f 100644
--- a/src/lib/components/ui/radio-group/index.ts
+++ b/src/lib/components/ui/radio-group/index.ts
@@ -1,10 +1,10 @@
-import Root from "./radio-group.svelte";
-import Item from "./radio-group-item.svelte";
+import Root from './radio-group.svelte';
+import Item from './radio-group-item.svelte';
 
 export {
 	Root,
 	Item,
 	//
 	Root as RadioGroup,
-	Item as RadioGroupItem,
+	Item as RadioGroupItem
 };
diff --git a/src/lib/components/ui/radio-group/radio-group-item.svelte b/src/lib/components/ui/radio-group/radio-group-item.svelte
index 2cb0710..9bc5ec6 100644
--- a/src/lib/components/ui/radio-group/radio-group-item.svelte
+++ b/src/lib/components/ui/radio-group/radio-group-item.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
-	import CircleIcon from "@lucide/svelte/icons/circle";
-	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
+	import CircleIcon from '@lucide/svelte/icons/circle';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:ref
 	data-slot="radio-group-item"
 	class={cn(
-		"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 shadow-xs aspect-square size-4 shrink-0 rounded-full border outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
 		className
 	)}
 	{...restProps}
@@ -23,7 +23,7 @@
 		<div data-slot="radio-group-indicator" class="relative flex items-center justify-center">
 			{#if checked}
 				<CircleIcon
-					class="fill-primary absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2"
+					class="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2"
 				/>
 			{/if}
 		</div>
diff --git a/src/lib/components/ui/radio-group/radio-group.svelte b/src/lib/components/ui/radio-group/radio-group.svelte
index da2912b..062d7e1 100644
--- a/src/lib/components/ui/radio-group/radio-group.svelte
+++ b/src/lib/components/ui/radio-group/radio-group.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		value = $bindable(""),
+		value = $bindable(''),
 		...restProps
 	}: RadioGroupPrimitive.RootProps = $props();
 </script>
@@ -14,6 +14,6 @@
 	bind:ref
 	bind:value
 	data-slot="radio-group"
-	class={cn("grid gap-3", className)}
+	class={cn('grid gap-3', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/select/index.ts b/src/lib/components/ui/select/index.ts
index 9e8d3e9..bfa73d9 100644
--- a/src/lib/components/ui/select/index.ts
+++ b/src/lib/components/ui/select/index.ts
@@ -1,14 +1,14 @@
-import { Select as SelectPrimitive } from "bits-ui";
+import { Select as SelectPrimitive } from 'bits-ui';
 
-import Group from "./select-group.svelte";
-import Label from "./select-label.svelte";
-import Item from "./select-item.svelte";
-import Content from "./select-content.svelte";
-import Trigger from "./select-trigger.svelte";
-import Separator from "./select-separator.svelte";
-import ScrollDownButton from "./select-scroll-down-button.svelte";
-import ScrollUpButton from "./select-scroll-up-button.svelte";
-import GroupHeading from "./select-group-heading.svelte";
+import Group from './select-group.svelte';
+import Label from './select-label.svelte';
+import Item from './select-item.svelte';
+import Content from './select-content.svelte';
+import Trigger from './select-trigger.svelte';
+import Separator from './select-separator.svelte';
+import ScrollDownButton from './select-scroll-down-button.svelte';
+import ScrollUpButton from './select-scroll-up-button.svelte';
+import GroupHeading from './select-group-heading.svelte';
 
 const Root = SelectPrimitive.Root;
 
@@ -33,5 +33,5 @@ export {
 	Separator as SelectSeparator,
 	ScrollDownButton as SelectScrollDownButton,
 	ScrollUpButton as SelectScrollUpButton,
-	GroupHeading as SelectGroupHeading,
+	GroupHeading as SelectGroupHeading
 };
diff --git a/src/lib/components/ui/select/select-content.svelte b/src/lib/components/ui/select/select-content.svelte
index dc16d65..ca9d1b5 100644
--- a/src/lib/components/ui/select/select-content.svelte
+++ b/src/lib/components/ui/select/select-content.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
-	import SelectScrollUpButton from "./select-scroll-up-button.svelte";
-	import SelectScrollDownButton from "./select-scroll-down-button.svelte";
-	import { cn, type WithoutChild } from "$lib/utils.js";
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import SelectScrollUpButton from './select-scroll-up-button.svelte';
+	import SelectScrollDownButton from './select-scroll-down-button.svelte';
+	import { cn, type WithoutChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -22,7 +22,7 @@
 		{sideOffset}
 		data-slot="select-content"
 		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 max-h-(--bits-select-content-available-height) origin-(--bits-select-content-transform-origin) relative z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+			'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 relative z-50 max-h-(--bits-select-content-available-height) min-w-[8rem] origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
 			className
 		)}
 		{...restProps}
@@ -30,7 +30,7 @@
 		<SelectScrollUpButton />
 		<SelectPrimitive.Viewport
 			class={cn(
-				"h-(--bits-select-anchor-height) min-w-(--bits-select-anchor-width) w-full scroll-my-1 p-1"
+				'h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1 p-1'
 			)}
 		>
 			{@render children?.()}
diff --git a/src/lib/components/ui/select/select-group-heading.svelte b/src/lib/components/ui/select/select-group-heading.svelte
index 1fab5f0..3ff7003 100644
--- a/src/lib/components/ui/select/select-group-heading.svelte
+++ b/src/lib/components/ui/select/select-group-heading.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
-	import type { ComponentProps } from "svelte";
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+	import type { ComponentProps } from 'svelte';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 <SelectPrimitive.GroupHeading
 	bind:ref
 	data-slot="select-group-heading"
-	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+	class={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/select/select-group.svelte b/src/lib/components/ui/select/select-group.svelte
index 5454fdb..2520795 100644
--- a/src/lib/components/ui/select/select-group.svelte
+++ b/src/lib/components/ui/select/select-group.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
+	import { Select as SelectPrimitive } from 'bits-ui';
 
 	let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps = $props();
 </script>
diff --git a/src/lib/components/ui/select/select-item.svelte b/src/lib/components/ui/select/select-item.svelte
index 49dbbd7..06e48be 100644
--- a/src/lib/components/ui/select/select-item.svelte
+++ b/src/lib/components/ui/select/select-item.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import CheckIcon from "@lucide/svelte/icons/check";
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { cn, type WithoutChild } from "$lib/utils.js";
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn, type WithoutChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -18,7 +18,7 @@
 	{value}
 	data-slot="select-item"
 	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/select/select-label.svelte b/src/lib/components/ui/select/select-label.svelte
index 4696025..6c76ced 100644
--- a/src/lib/components/ui/select/select-label.svelte
+++ b/src/lib/components/ui/select/select-label.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="select-label"
-	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+	class={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/select/select-scroll-down-button.svelte b/src/lib/components/ui/select/select-scroll-down-button.svelte
index 3629205..3502148 100644
--- a/src/lib/components/ui/select/select-scroll-down-button.svelte
+++ b/src/lib/components/ui/select/select-scroll-down-button.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <SelectPrimitive.ScrollDownButton
 	bind:ref
 	data-slot="select-scroll-down-button"
-	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	class={cn('flex cursor-default items-center justify-center py-1', className)}
 	{...restProps}
 >
 	<ChevronDownIcon class="size-4" />
diff --git a/src/lib/components/ui/select/select-scroll-up-button.svelte b/src/lib/components/ui/select/select-scroll-up-button.svelte
index 1aa2300..3d35e04 100644
--- a/src/lib/components/ui/select/select-scroll-up-button.svelte
+++ b/src/lib/components/ui/select/select-scroll-up-button.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <SelectPrimitive.ScrollUpButton
 	bind:ref
 	data-slot="select-scroll-up-button"
-	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	class={cn('flex cursor-default items-center justify-center py-1', className)}
 	{...restProps}
 >
 	<ChevronUpIcon class="size-4" />
diff --git a/src/lib/components/ui/select/select-separator.svelte b/src/lib/components/ui/select/select-separator.svelte
index 0eac3eb..3624d4c 100644
--- a/src/lib/components/ui/select/select-separator.svelte
+++ b/src/lib/components/ui/select/select-separator.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { Separator as SeparatorPrimitive } from "bits-ui";
-	import { Separator } from "$lib/components/ui/separator/index.js";
-	import { cn } from "$lib/utils.js";
+	import type { Separator as SeparatorPrimitive } from 'bits-ui';
+	import { Separator } from '$lib/components/ui/separator/index.js';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,6 +13,6 @@
 <Separator
 	bind:ref
 	data-slot="select-separator"
-	class={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+	class={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/select/select-trigger.svelte b/src/lib/components/ui/select/select-trigger.svelte
index d405187..f14abe0 100644
--- a/src/lib/components/ui/select/select-trigger.svelte
+++ b/src/lib/components/ui/select/select-trigger.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
-	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
-	import { cn, type WithoutChild } from "$lib/utils.js";
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import { cn, type WithoutChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
-		size = "default",
+		size = 'default',
 		...restProps
 	}: WithoutChild<SelectPrimitive.TriggerProps> & {
-		size?: "sm" | "default";
+		size?: 'sm' | 'default';
 	} = $props();
 </script>
 
@@ -19,7 +19,7 @@
 	data-slot="select-trigger"
 	data-size={size}
 	class={cn(
-		"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 shadow-xs flex w-fit select-none items-center justify-between gap-2 whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/separator/index.ts b/src/lib/components/ui/separator/index.ts
index 82442d2..768efac 100644
--- a/src/lib/components/ui/separator/index.ts
+++ b/src/lib/components/ui/separator/index.ts
@@ -1,7 +1,7 @@
-import Root from "./separator.svelte";
+import Root from './separator.svelte';
 
 export {
 	Root,
 	//
-	Root as Separator,
+	Root as Separator
 };
diff --git a/src/lib/components/ui/separator/separator.svelte b/src/lib/components/ui/separator/separator.svelte
index 09d88f4..6ceb6a5 100644
--- a/src/lib/components/ui/separator/separator.svelte
+++ b/src/lib/components/ui/separator/separator.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Separator as SeparatorPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Separator as SeparatorPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="separator"
 	class={cn(
-		"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
+		'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/sheet/index.ts b/src/lib/components/ui/sheet/index.ts
index 01d40c8..139e2d2 100644
--- a/src/lib/components/ui/sheet/index.ts
+++ b/src/lib/components/ui/sheet/index.ts
@@ -1,12 +1,12 @@
-import { Dialog as SheetPrimitive } from "bits-ui";
-import Trigger from "./sheet-trigger.svelte";
-import Close from "./sheet-close.svelte";
-import Overlay from "./sheet-overlay.svelte";
-import Content from "./sheet-content.svelte";
-import Header from "./sheet-header.svelte";
-import Footer from "./sheet-footer.svelte";
-import Title from "./sheet-title.svelte";
-import Description from "./sheet-description.svelte";
+import { Dialog as SheetPrimitive } from 'bits-ui';
+import Trigger from './sheet-trigger.svelte';
+import Close from './sheet-close.svelte';
+import Overlay from './sheet-overlay.svelte';
+import Content from './sheet-content.svelte';
+import Header from './sheet-header.svelte';
+import Footer from './sheet-footer.svelte';
+import Title from './sheet-title.svelte';
+import Description from './sheet-description.svelte';
 
 const Root = SheetPrimitive.Root;
 const Portal = SheetPrimitive.Portal;
@@ -32,5 +32,5 @@ export {
 	Header as SheetHeader,
 	Footer as SheetFooter,
 	Title as SheetTitle,
-	Description as SheetDescription,
+	Description as SheetDescription
 };
diff --git a/src/lib/components/ui/sheet/sheet-close.svelte b/src/lib/components/ui/sheet/sheet-close.svelte
index ae382c1..b0180c0 100644
--- a/src/lib/components/ui/sheet/sheet-close.svelte
+++ b/src/lib/components/ui/sheet/sheet-close.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { Dialog as SheetPrimitive } from 'bits-ui';
 
 	let { ref = $bindable(null), ...restProps }: SheetPrimitive.CloseProps = $props();
 </script>
diff --git a/src/lib/components/ui/sheet/sheet-content.svelte b/src/lib/components/ui/sheet/sheet-content.svelte
index 856922e..ba4228d 100644
--- a/src/lib/components/ui/sheet/sheet-content.svelte
+++ b/src/lib/components/ui/sheet/sheet-content.svelte
@@ -1,34 +1,36 @@
 <script lang="ts" module>
-	import { tv, type VariantProps } from "tailwind-variants";
+	import { tv, type VariantProps } from 'tailwind-variants';
 	export const sheetVariants = tv({
-		base: "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+		base: 'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
 		variants: {
 			side: {
-				top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
-				bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
-				left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
-				right: "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
-			},
+				top: 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+				bottom:
+					'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+				left: 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+				right:
+					'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm'
+			}
 		},
 		defaultVariants: {
-			side: "right",
-		},
+			side: 'right'
+		}
 	});
 
-	export type Side = VariantProps<typeof sheetVariants>["side"];
+	export type Side = VariantProps<typeof sheetVariants>['side'];
 </script>
 
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from "bits-ui";
-	import XIcon from "@lucide/svelte/icons/x";
-	import type { Snippet } from "svelte";
-	import SheetOverlay from "./sheet-overlay.svelte";
-	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import XIcon from '@lucide/svelte/icons/x';
+	import type { Snippet } from 'svelte';
+	import SheetOverlay from './sheet-overlay.svelte';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		side = "right",
+		side = 'right',
 		portalProps,
 		children,
 		...restProps
@@ -49,7 +51,7 @@
 	>
 		{@render children?.()}
 		<SheetPrimitive.Close
-			class="ring-offset-background focus-visible:ring-ring rounded-xs focus-visible:outline-hidden absolute right-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none"
+			class="ring-offset-background focus-visible:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none"
 		>
 			<XIcon class="size-4" />
 			<span class="sr-only">Close</span>
diff --git a/src/lib/components/ui/sheet/sheet-description.svelte b/src/lib/components/ui/sheet/sheet-description.svelte
index 333b17a..996c102 100644
--- a/src/lib/components/ui/sheet/sheet-description.svelte
+++ b/src/lib/components/ui/sheet/sheet-description.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <SheetPrimitive.Description
 	bind:ref
 	data-slot="sheet-description"
-	class={cn("text-muted-foreground text-sm", className)}
+	class={cn('text-muted-foreground text-sm', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/sheet/sheet-footer.svelte b/src/lib/components/ui/sheet/sheet-footer.svelte
index dd9ed84..aea83f7 100644
--- a/src/lib/components/ui/sheet/sheet-footer.svelte
+++ b/src/lib/components/ui/sheet/sheet-footer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="sheet-footer"
-	class={cn("mt-auto flex flex-col gap-2 p-4", className)}
+	class={cn('mt-auto flex flex-col gap-2 p-4', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/sheet/sheet-header.svelte b/src/lib/components/ui/sheet/sheet-header.svelte
index 757a6a5..00cd281 100644
--- a/src/lib/components/ui/sheet/sheet-header.svelte
+++ b/src/lib/components/ui/sheet/sheet-header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="sheet-header"
-	class={cn("flex flex-col gap-1.5 p-4", className)}
+	class={cn('flex flex-col gap-1.5 p-4', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/sheet/sheet-overlay.svelte b/src/lib/components/ui/sheet/sheet-overlay.svelte
index 345e197..2246de0 100644
--- a/src/lib/components/ui/sheet/sheet-overlay.svelte
+++ b/src/lib/components/ui/sheet/sheet-overlay.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="sheet-overlay"
 	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/50",
+		'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/50',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/sheet/sheet-title.svelte b/src/lib/components/ui/sheet/sheet-title.svelte
index 9fda327..34081c9 100644
--- a/src/lib/components/ui/sheet/sheet-title.svelte
+++ b/src/lib/components/ui/sheet/sheet-title.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <SheetPrimitive.Title
 	bind:ref
 	data-slot="sheet-title"
-	class={cn("text-foreground font-semibold", className)}
+	class={cn('text-foreground font-semibold', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/sheet/sheet-trigger.svelte b/src/lib/components/ui/sheet/sheet-trigger.svelte
index e266975..d95719a 100644
--- a/src/lib/components/ui/sheet/sheet-trigger.svelte
+++ b/src/lib/components/ui/sheet/sheet-trigger.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { Dialog as SheetPrimitive } from 'bits-ui';
 
 	let { ref = $bindable(null), ...restProps }: SheetPrimitive.TriggerProps = $props();
 </script>
diff --git a/src/lib/components/ui/sidebar/constants.ts b/src/lib/components/ui/sidebar/constants.ts
index 4de4435..2d3bbfb 100644
--- a/src/lib/components/ui/sidebar/constants.ts
+++ b/src/lib/components/ui/sidebar/constants.ts
@@ -1,6 +1,6 @@
-export const SIDEBAR_COOKIE_NAME = "sidebar:state";
+export const SIDEBAR_COOKIE_NAME = 'sidebar:state';
 export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-export const SIDEBAR_WIDTH = "16rem";
-export const SIDEBAR_WIDTH_MOBILE = "18rem";
-export const SIDEBAR_WIDTH_ICON = "3rem";
-export const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+export const SIDEBAR_WIDTH = '16rem';
+export const SIDEBAR_WIDTH_MOBILE = '18rem';
+export const SIDEBAR_WIDTH_ICON = '3rem';
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
diff --git a/src/lib/components/ui/sidebar/context.svelte.ts b/src/lib/components/ui/sidebar/context.svelte.ts
index 15248ad..6fa2aa3 100644
--- a/src/lib/components/ui/sidebar/context.svelte.ts
+++ b/src/lib/components/ui/sidebar/context.svelte.ts
@@ -1,6 +1,6 @@
-import { IsMobile } from "$lib/hooks/is-mobile.svelte.js";
-import { getContext, setContext } from "svelte";
-import { SIDEBAR_KEYBOARD_SHORTCUT } from "./constants.js";
+import { IsMobile } from '$lib/hooks/is-mobile.svelte.js';
+import { getContext, setContext } from 'svelte';
+import { SIDEBAR_KEYBOARD_SHORTCUT } from './constants.js';
 
 type Getter<T> = () => T;
 
@@ -24,9 +24,9 @@ class SidebarState {
 	readonly props: SidebarStateProps;
 	open = $derived.by(() => this.props.open());
 	openMobile = $state(false);
-	setOpen: SidebarStateProps["setOpen"];
+	setOpen: SidebarStateProps['setOpen'];
 	#isMobile: IsMobile;
-	state = $derived.by(() => (this.open ? "expanded" : "collapsed"));
+	state = $derived.by(() => (this.open ? 'expanded' : 'collapsed'));
 
 	constructor(props: SidebarStateProps) {
 		this.setOpen = props.setOpen;
@@ -53,13 +53,11 @@ class SidebarState {
 	};
 
 	toggle = () => {
-		return this.#isMobile.current
-			? (this.openMobile = !this.openMobile)
-			: this.setOpen(!this.open);
+		return this.#isMobile.current ? (this.openMobile = !this.openMobile) : this.setOpen(!this.open);
 	};
 }
 
-const SYMBOL_KEY = "scn-sidebar";
+const SYMBOL_KEY = 'scn-sidebar';
 
 /**
  * Instantiates a new `SidebarState` instance and sets it in the context.
diff --git a/src/lib/components/ui/sidebar/index.ts b/src/lib/components/ui/sidebar/index.ts
index 318a341..280e640 100644
--- a/src/lib/components/ui/sidebar/index.ts
+++ b/src/lib/components/ui/sidebar/index.ts
@@ -1,27 +1,27 @@
-import { useSidebar } from "./context.svelte.js";
-import Content from "./sidebar-content.svelte";
-import Footer from "./sidebar-footer.svelte";
-import GroupAction from "./sidebar-group-action.svelte";
-import GroupContent from "./sidebar-group-content.svelte";
-import GroupLabel from "./sidebar-group-label.svelte";
-import Group from "./sidebar-group.svelte";
-import Header from "./sidebar-header.svelte";
-import Input from "./sidebar-input.svelte";
-import Inset from "./sidebar-inset.svelte";
-import MenuAction from "./sidebar-menu-action.svelte";
-import MenuBadge from "./sidebar-menu-badge.svelte";
-import MenuButton from "./sidebar-menu-button.svelte";
-import MenuItem from "./sidebar-menu-item.svelte";
-import MenuSkeleton from "./sidebar-menu-skeleton.svelte";
-import MenuSubButton from "./sidebar-menu-sub-button.svelte";
-import MenuSubItem from "./sidebar-menu-sub-item.svelte";
-import MenuSub from "./sidebar-menu-sub.svelte";
-import Menu from "./sidebar-menu.svelte";
-import Provider from "./sidebar-provider.svelte";
-import Rail from "./sidebar-rail.svelte";
-import Separator from "./sidebar-separator.svelte";
-import Trigger from "./sidebar-trigger.svelte";
-import Root from "./sidebar.svelte";
+import { useSidebar } from './context.svelte.js';
+import Content from './sidebar-content.svelte';
+import Footer from './sidebar-footer.svelte';
+import GroupAction from './sidebar-group-action.svelte';
+import GroupContent from './sidebar-group-content.svelte';
+import GroupLabel from './sidebar-group-label.svelte';
+import Group from './sidebar-group.svelte';
+import Header from './sidebar-header.svelte';
+import Input from './sidebar-input.svelte';
+import Inset from './sidebar-inset.svelte';
+import MenuAction from './sidebar-menu-action.svelte';
+import MenuBadge from './sidebar-menu-badge.svelte';
+import MenuButton from './sidebar-menu-button.svelte';
+import MenuItem from './sidebar-menu-item.svelte';
+import MenuSkeleton from './sidebar-menu-skeleton.svelte';
+import MenuSubButton from './sidebar-menu-sub-button.svelte';
+import MenuSubItem from './sidebar-menu-sub-item.svelte';
+import MenuSub from './sidebar-menu-sub.svelte';
+import Menu from './sidebar-menu.svelte';
+import Provider from './sidebar-provider.svelte';
+import Rail from './sidebar-rail.svelte';
+import Separator from './sidebar-separator.svelte';
+import Trigger from './sidebar-trigger.svelte';
+import Root from './sidebar.svelte';
 
 export {
 	Content,
@@ -71,5 +71,5 @@ export {
 	Separator as SidebarSeparator,
 	Trigger as SidebarTrigger,
 	Trigger,
-	useSidebar,
+	useSidebar
 };
diff --git a/src/lib/components/ui/sidebar/sidebar-content.svelte b/src/lib/components/ui/sidebar/sidebar-content.svelte
index f121800..f1d195e 100644
--- a/src/lib/components/ui/sidebar/sidebar-content.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -15,7 +15,7 @@
 	data-slot="sidebar-content"
 	data-sidebar="content"
 	class={cn(
-		"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+		'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/sidebar/sidebar-footer.svelte b/src/lib/components/ui/sidebar/sidebar-footer.svelte
index 6259cb9..24d67f6 100644
--- a/src/lib/components/ui/sidebar/sidebar-footer.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-footer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-footer"
 	data-sidebar="footer"
-	class={cn("flex flex-col gap-2 p-2", className)}
+	class={cn('flex flex-col gap-2 p-2', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/sidebar/sidebar-group-action.svelte b/src/lib/components/ui/sidebar/sidebar-group-action.svelte
index fb84e4a..929993e 100644
--- a/src/lib/components/ui/sidebar/sidebar-group-action.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-group-action.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { Snippet } from "svelte";
-	import type { HTMLButtonAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -15,15 +15,15 @@
 
 	const mergedProps = $derived({
 		class: cn(
-			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground outline-hidden absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+			'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground outline-hidden absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
 			// Increases the hit area of the button on mobile.
-			"after:absolute after:-inset-2 md:after:hidden",
-			"group-data-[collapsible=icon]:hidden",
+			'after:absolute after:-inset-2 md:after:hidden',
+			'group-data-[collapsible=icon]:hidden',
 			className
 		),
-		"data-slot": "sidebar-group-action",
-		"data-sidebar": "group-action",
-		...restProps,
+		'data-slot': 'sidebar-group-action',
+		'data-sidebar': 'group-action',
+		...restProps
 	});
 </script>
 
diff --git a/src/lib/components/ui/sidebar/sidebar-group-content.svelte b/src/lib/components/ui/sidebar/sidebar-group-content.svelte
index 415255f..fafacee 100644
--- a/src/lib/components/ui/sidebar/sidebar-group-content.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-group-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-group-content"
 	data-sidebar="group-content"
-	class={cn("w-full text-sm", className)}
+	class={cn('w-full text-sm', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/sidebar/sidebar-group-label.svelte b/src/lib/components/ui/sidebar/sidebar-group-label.svelte
index e292945..1de5e84 100644
--- a/src/lib/components/ui/sidebar/sidebar-group-label.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-group-label.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { Snippet } from "svelte";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -15,13 +15,13 @@
 
 	const mergedProps = $derived({
 		class: cn(
-			"text-sidebar-foreground/70 ring-sidebar-ring outline-hidden flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-			"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+			'text-sidebar-foreground/70 ring-sidebar-ring outline-hidden flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+			'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
 			className
 		),
-		"data-slot": "sidebar-group-label",
-		"data-sidebar": "group-label",
-		...restProps,
+		'data-slot': 'sidebar-group-label',
+		'data-sidebar': 'group-label',
+		...restProps
 	});
 </script>
 
diff --git a/src/lib/components/ui/sidebar/sidebar-group.svelte b/src/lib/components/ui/sidebar/sidebar-group.svelte
index ec18a69..897445d 100644
--- a/src/lib/components/ui/sidebar/sidebar-group.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-group.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-group"
 	data-sidebar="group"
-	class={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+	class={cn('relative flex w-full min-w-0 flex-col p-2', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/sidebar/sidebar-header.svelte b/src/lib/components/ui/sidebar/sidebar-header.svelte
index a1b2db1..a546474 100644
--- a/src/lib/components/ui/sidebar/sidebar-header.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-header"
 	data-sidebar="header"
-	class={cn("flex flex-col gap-2 p-2", className)}
+	class={cn('flex flex-col gap-2 p-2', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/sidebar/sidebar-input.svelte b/src/lib/components/ui/sidebar/sidebar-input.svelte
index 19b3666..9ed0aa8 100644
--- a/src/lib/components/ui/sidebar/sidebar-input.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-input.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import type { ComponentProps } from "svelte";
-	import { Input } from "$lib/components/ui/input/index.js";
-	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from 'svelte';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
-		value = $bindable(""),
+		value = $bindable(''),
 		class: className,
 		...restProps
 	}: ComponentProps<typeof Input> = $props();
@@ -16,6 +16,6 @@
 	bind:value
 	data-slot="sidebar-input"
 	data-sidebar="input"
-	class={cn("bg-background h-8 w-full shadow-none", className)}
+	class={cn('bg-background h-8 w-full shadow-none', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/sidebar/sidebar-inset.svelte b/src/lib/components/ui/sidebar/sidebar-inset.svelte
index d862761..05842bc 100644
--- a/src/lib/components/ui/sidebar/sidebar-inset.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-inset.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -14,8 +14,8 @@
 	bind:this={ref}
 	data-slot="sidebar-inset"
 	class={cn(
-		"bg-background relative flex w-full flex-1 flex-col",
-		"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm",
+		'bg-background relative flex w-full flex-1 flex-col',
+		'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/sidebar/sidebar-menu-action.svelte b/src/lib/components/ui/sidebar/sidebar-menu-action.svelte
index fa3fb0c..3f178c8 100644
--- a/src/lib/components/ui/sidebar/sidebar-menu-action.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-menu-action.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { Snippet } from "svelte";
-	import type { HTMLButtonAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -17,20 +17,20 @@
 
 	const mergedProps = $derived({
 		class: cn(
-			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground outline-hidden absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+			'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground outline-hidden absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
 			// Increases the hit area of the button on mobile.
-			"after:absolute after:-inset-2 md:after:hidden",
-			"peer-data-[size=sm]/menu-button:top-1",
-			"peer-data-[size=default]/menu-button:top-1.5",
-			"peer-data-[size=lg]/menu-button:top-2.5",
-			"group-data-[collapsible=icon]:hidden",
+			'after:absolute after:-inset-2 md:after:hidden',
+			'peer-data-[size=sm]/menu-button:top-1',
+			'peer-data-[size=default]/menu-button:top-1.5',
+			'peer-data-[size=lg]/menu-button:top-2.5',
+			'group-data-[collapsible=icon]:hidden',
 			showOnHover &&
-				"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+				'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
 			className
 		),
-		"data-slot": "sidebar-menu-action",
-		"data-sidebar": "menu-action",
-		...restProps,
+		'data-slot': 'sidebar-menu-action',
+		'data-sidebar': 'menu-action',
+		...restProps
 	});
 </script>
 
diff --git a/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte b/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte
index 69e5a3c..a9ebc18 100644
--- a/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -15,12 +15,12 @@
 	data-slot="sidebar-menu-badge"
 	data-sidebar="menu-badge"
 	class={cn(
-		"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums",
-		"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-		"peer-data-[size=sm]/menu-button:top-1",
-		"peer-data-[size=default]/menu-button:top-1.5",
-		"peer-data-[size=lg]/menu-button:top-2.5",
-		"group-data-[collapsible=icon]:hidden",
+		'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+		'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+		'peer-data-[size=sm]/menu-button:top-1',
+		'peer-data-[size=default]/menu-button:top-1.5',
+		'peer-data-[size=lg]/menu-button:top-2.5',
+		'group-data-[collapsible=icon]:hidden',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/sidebar/sidebar-menu-button.svelte b/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
index 4bef683..c358b70 100644
--- a/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
@@ -1,47 +1,45 @@
 <script lang="ts" module>
-	import { tv, type VariantProps } from "tailwind-variants";
+	import { tv, type VariantProps } from 'tailwind-variants';
 
 	export const sidebarMenuButtonVariants = tv({
-		base: "peer/menu-button outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground group-has-data-[sidebar=menu-action]/menu-item:pr-8 data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm transition-[width,height,padding] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+		base: 'peer/menu-button outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground group-has-data-[sidebar=menu-action]/menu-item:pr-8 data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm transition-[width,height,padding] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
 		variants: {
 			variant: {
-				default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+				default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
 				outline:
-					"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
+					'bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]'
 			},
 			size: {
-				default: "h-8 text-sm",
-				sm: "h-7 text-xs",
-				lg: "group-data-[collapsible=icon]:p-0! h-12 text-sm",
-			},
+				default: 'h-8 text-sm',
+				sm: 'h-7 text-xs',
+				lg: 'group-data-[collapsible=icon]:p-0! h-12 text-sm'
+			}
 		},
 		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
+			variant: 'default',
+			size: 'default'
+		}
 	});
 
-	export type SidebarMenuButtonVariant = VariantProps<
-		typeof sidebarMenuButtonVariants
-	>["variant"];
-	export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>["size"];
+	export type SidebarMenuButtonVariant = VariantProps<typeof sidebarMenuButtonVariants>['variant'];
+	export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>['size'];
 </script>
 
 <script lang="ts">
-	import * as Tooltip from "$lib/components/ui/tooltip/index.js";
-	import { cn, type WithElementRef, type WithoutChildrenOrChild } from "$lib/utils.js";
-	import { mergeProps } from "bits-ui";
-	import type { ComponentProps, Snippet } from "svelte";
-	import type { HTMLAttributes } from "svelte/elements";
-	import { useSidebar } from "./context.svelte.js";
+	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
+	import { cn, type WithElementRef, type WithoutChildrenOrChild } from '$lib/utils.js';
+	import { mergeProps } from 'bits-ui';
+	import type { ComponentProps, Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { useSidebar } from './context.svelte.js';
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
 		child,
-		variant = "default",
-		size = "default",
+		variant = 'default',
+		size = 'default',
 		isActive = false,
 		tooltipContent,
 		tooltipContentProps,
@@ -59,11 +57,11 @@
 
 	const buttonProps = $derived({
 		class: cn(sidebarMenuButtonVariants({ variant, size }), className),
-		"data-slot": "sidebar-menu-button",
-		"data-sidebar": "menu-button",
-		"data-size": size,
-		"data-active": isActive,
-		...restProps,
+		'data-slot': 'sidebar-menu-button',
+		'data-sidebar': 'menu-button',
+		'data-size': size,
+		'data-active': isActive,
+		...restProps
 	});
 </script>
 
@@ -90,10 +88,10 @@
 		<Tooltip.Content
 			side="right"
 			align="center"
-			hidden={sidebar.state !== "collapsed" || sidebar.isMobile}
+			hidden={sidebar.state !== 'collapsed' || sidebar.isMobile}
 			{...tooltipContentProps}
 		>
-			{#if typeof tooltipContent === "string"}
+			{#if typeof tooltipContent === 'string'}
 				{tooltipContent}
 			{:else if tooltipContent}
 				{@render tooltipContent()}
diff --git a/src/lib/components/ui/sidebar/sidebar-menu-item.svelte b/src/lib/components/ui/sidebar/sidebar-menu-item.svelte
index 4db4453..acd2860 100644
--- a/src/lib/components/ui/sidebar/sidebar-menu-item.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-menu-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-menu-item"
 	data-sidebar="menu-item"
-	class={cn("group/menu-item relative", className)}
+	class={cn('group/menu-item relative', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte b/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte
index cc63b04..49a18f1 100644
--- a/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import { Skeleton } from "$lib/components/ui/skeleton/index.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -21,14 +21,14 @@
 	bind:this={ref}
 	data-slot="sidebar-menu-skeleton"
 	data-sidebar="menu-skeleton"
-	class={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+	class={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
 	{...restProps}
 >
 	{#if showIcon}
 		<Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
 	{/if}
 	<Skeleton
-		class="max-w-(--skeleton-width) h-4 flex-1"
+		class="h-4 max-w-(--skeleton-width) flex-1"
 		data-sidebar="menu-skeleton-text"
 		style="--skeleton-width: {width};"
 	/>
diff --git a/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte b/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte
index 987f104..95191c2 100644
--- a/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte
@@ -1,36 +1,36 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { Snippet } from "svelte";
-	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
 		children,
 		child,
 		class: className,
-		size = "md",
+		size = 'md',
 		isActive = false,
 		...restProps
 	}: WithElementRef<HTMLAnchorAttributes> & {
 		child?: Snippet<[{ props: Record<string, unknown> }]>;
-		size?: "sm" | "md";
+		size?: 'sm' | 'md';
 		isActive?: boolean;
 	} = $props();
 
 	const mergedProps = $derived({
 		class: cn(
-			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground outline-hidden flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-			"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-			size === "sm" && "text-xs",
-			size === "md" && "text-sm",
-			"group-data-[collapsible=icon]:hidden",
+			'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground outline-hidden flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+			'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+			size === 'sm' && 'text-xs',
+			size === 'md' && 'text-sm',
+			'group-data-[collapsible=icon]:hidden',
 			className
 		),
-		"data-slot": "sidebar-menu-sub-button",
-		"data-sidebar": "menu-sub-button",
-		"data-size": size,
-		"data-active": isActive,
-		...restProps,
+		'data-slot': 'sidebar-menu-sub-button',
+		'data-sidebar': 'menu-sub-button',
+		'data-size': size,
+		'data-active': isActive,
+		...restProps
 	});
 </script>
 
diff --git a/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte b/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte
index 681d0f1..4274f0e 100644
--- a/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-menu-sub-item"
 	data-sidebar="menu-sub-item"
-	class={cn("group/menu-sub-item relative", className)}
+	class={cn('group/menu-sub-item relative', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte b/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte
index 8ab1111..620ea99 100644
--- a/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -15,8 +15,8 @@
 	data-slot="sidebar-menu-sub"
 	data-sidebar="menu-sub"
 	class={cn(
-		"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
-		"group-data-[collapsible=icon]:hidden",
+		'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+		'group-data-[collapsible=icon]:hidden',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/sidebar/sidebar-menu.svelte b/src/lib/components/ui/sidebar/sidebar-menu.svelte
index 946ccce..094f0f0 100644
--- a/src/lib/components/ui/sidebar/sidebar-menu.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-menu.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-menu"
 	data-sidebar="menu"
-	class={cn("flex w-full min-w-0 flex-col gap-1", className)}
+	class={cn('flex w-full min-w-0 flex-col gap-1', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/sidebar/sidebar-rail.svelte b/src/lib/components/ui/sidebar/sidebar-rail.svelte
index c180cf5..56c6299 100644
--- a/src/lib/components/ui/sidebar/sidebar-rail.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-rail.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-	import { useSidebar } from "./context.svelte.js";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { useSidebar } from './context.svelte.js';
 
 	let {
 		ref = $bindable(null),
@@ -22,12 +22,12 @@
 	onclick={sidebar.toggle}
 	title="Toggle Sidebar"
 	class={cn(
-		"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-[calc(1/2*100%-1px)] after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
-		"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
-		"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-		"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
-		"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-		"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+		'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-[calc(1/2*100%-1px)] after:w-[2px] sm:flex',
+		'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+		'[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+		'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+		'[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+		'[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/sidebar/sidebar-separator.svelte b/src/lib/components/ui/sidebar/sidebar-separator.svelte
index 5a7deda..45c1ebc 100644
--- a/src/lib/components/ui/sidebar/sidebar-separator.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-separator.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Separator } from "$lib/components/ui/separator/index.js";
-	import { cn } from "$lib/utils.js";
-	import type { ComponentProps } from "svelte";
+	import { Separator } from '$lib/components/ui/separator/index.js';
+	import { cn } from '$lib/utils.js';
+	import type { ComponentProps } from 'svelte';
 
 	let {
 		ref = $bindable(null),
@@ -14,6 +14,6 @@
 	bind:ref
 	data-slot="sidebar-separator"
 	data-sidebar="separator"
-	class={cn("bg-sidebar-border", className)}
+	class={cn('bg-sidebar-border', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/sidebar/sidebar-trigger.svelte b/src/lib/components/ui/sidebar/sidebar-trigger.svelte
index 1825182..285e6c4 100644
--- a/src/lib/components/ui/sidebar/sidebar-trigger.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-trigger.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { Button } from "$lib/components/ui/button/index.js";
-	import { cn } from "$lib/utils.js";
-	import PanelLeftIcon from "@lucide/svelte/icons/panel-left";
-	import type { ComponentProps } from "svelte";
-	import { useSidebar } from "./context.svelte.js";
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { cn } from '$lib/utils.js';
+	import PanelLeftIcon from '@lucide/svelte/icons/panel-left';
+	import type { ComponentProps } from 'svelte';
+	import { useSidebar } from './context.svelte.js';
 
 	let {
 		ref = $bindable(null),
@@ -22,7 +22,7 @@
 	data-slot="sidebar-trigger"
 	variant="ghost"
 	size="icon"
-	class={cn("size-7", className)}
+	class={cn('size-7', className)}
 	type="button"
 	onclick={(e) => {
 		onclick?.(e);
diff --git a/src/lib/components/ui/sidebar/sidebar.svelte b/src/lib/components/ui/sidebar/sidebar.svelte
index c8c36df..f7e6525 100644
--- a/src/lib/components/ui/sidebar/sidebar.svelte
+++ b/src/lib/components/ui/sidebar/sidebar.svelte
@@ -1,31 +1,31 @@
 <script lang="ts">
-	import * as Sheet from "$lib/components/ui/sheet/index.js";
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-	import { SIDEBAR_WIDTH_MOBILE } from "./constants.js";
-	import { useSidebar } from "./context.svelte.js";
+	import * as Sheet from '$lib/components/ui/sheet/index.js';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { SIDEBAR_WIDTH_MOBILE } from './constants.js';
+	import { useSidebar } from './context.svelte.js';
 
 	let {
 		ref = $bindable(null),
-		side = "left",
-		variant = "sidebar",
-		collapsible = "offcanvas",
+		side = 'left',
+		variant = 'sidebar',
+		collapsible = 'offcanvas',
 		class: className,
 		children,
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		side?: "left" | "right";
-		variant?: "sidebar" | "floating" | "inset";
-		collapsible?: "offcanvas" | "icon" | "none";
+		side?: 'left' | 'right';
+		variant?: 'sidebar' | 'floating' | 'inset';
+		collapsible?: 'offcanvas' | 'icon' | 'none';
 	} = $props();
 
 	const sidebar = useSidebar();
 </script>
 
-{#if collapsible === "none"}
+{#if collapsible === 'none'}
 	<div
 		class={cn(
-			"bg-sidebar text-sidebar-foreground w-(--sidebar-width) flex h-full flex-col",
+			'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
 			className
 		)}
 		bind:this={ref}
@@ -34,10 +34,7 @@
 		{@render children?.()}
 	</div>
 {:else if sidebar.isMobile}
-	<Sheet.Root
-		bind:open={() => sidebar.openMobile, (v) => sidebar.setOpenMobile(v)}
-		{...restProps}
-	>
+	<Sheet.Root bind:open={() => sidebar.openMobile, (v) => sidebar.setOpenMobile(v)} {...restProps}>
 		<Sheet.Content
 			data-sidebar="sidebar"
 			data-slot="sidebar"
@@ -60,7 +57,7 @@
 		bind:this={ref}
 		class="text-sidebar-foreground group peer hidden md:block"
 		data-state={sidebar.state}
-		data-collapsible={sidebar.state === "collapsed" ? collapsible : ""}
+		data-collapsible={sidebar.state === 'collapsed' ? collapsible : ''}
 		data-variant={variant}
 		data-side={side}
 		data-slot="sidebar"
@@ -69,25 +66,25 @@
 		<div
 			data-slot="sidebar-gap"
 			class={cn(
-				"w-(--sidebar-width) relative bg-transparent transition-[width] duration-200 ease-linear",
-				"group-data-[collapsible=offcanvas]:w-0",
-				"group-data-[side=right]:rotate-180",
-				variant === "floating" || variant === "inset"
-					? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
-					: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+				'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+				'group-data-[collapsible=offcanvas]:w-0',
+				'group-data-[side=right]:rotate-180',
+				variant === 'floating' || variant === 'inset'
+					? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+					: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'
 			)}
 		></div>
 		<div
 			data-slot="sidebar-container"
 			class={cn(
-				"w-(--sidebar-width) fixed inset-y-0 z-10 hidden h-svh transition-[left,right,width] duration-200 ease-linear md:flex",
-				side === "left"
-					? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-					: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+				'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+				side === 'left'
+					? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+					: 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
 				// Adjust the padding for floating and inset variants.
-				variant === "floating" || variant === "inset"
-					? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
-					: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+				variant === 'floating' || variant === 'inset'
+					? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+					: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
 				className
 			)}
 			{...restProps}
diff --git a/src/lib/components/ui/skeleton/index.ts b/src/lib/components/ui/skeleton/index.ts
index 186db21..3120ce1 100644
--- a/src/lib/components/ui/skeleton/index.ts
+++ b/src/lib/components/ui/skeleton/index.ts
@@ -1,7 +1,7 @@
-import Root from "./skeleton.svelte";
+import Root from './skeleton.svelte';
 
 export {
 	Root,
 	//
-	Root as Skeleton,
+	Root as Skeleton
 };
diff --git a/src/lib/components/ui/skeleton/skeleton.svelte b/src/lib/components/ui/skeleton/skeleton.svelte
index c7e3d26..35b8577 100644
--- a/src/lib/components/ui/skeleton/skeleton.svelte
+++ b/src/lib/components/ui/skeleton/skeleton.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <div
 	bind:this={ref}
 	data-slot="skeleton"
-	class={cn("bg-accent animate-pulse rounded-md", className)}
+	class={cn('bg-accent animate-pulse rounded-md', className)}
 	{...restProps}
 ></div>
diff --git a/src/lib/components/ui/sonner/index.ts b/src/lib/components/ui/sonner/index.ts
index 1ad9f4a..fcaf06b 100644
--- a/src/lib/components/ui/sonner/index.ts
+++ b/src/lib/components/ui/sonner/index.ts
@@ -1 +1 @@
-export { default as Toaster } from "./sonner.svelte";
+export { default as Toaster } from './sonner.svelte';
diff --git a/src/lib/components/ui/sonner/sonner.svelte b/src/lib/components/ui/sonner/sonner.svelte
index 1f50e1e..cb1f7c1 100644
--- a/src/lib/components/ui/sonner/sonner.svelte
+++ b/src/lib/components/ui/sonner/sonner.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
-	import { mode } from "mode-watcher";
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
+	import { mode } from 'mode-watcher';
 
 	let { ...restProps }: SonnerProps = $props();
 </script>
diff --git a/src/lib/components/ui/switch/index.ts b/src/lib/components/ui/switch/index.ts
index f5533db..129f8f5 100644
--- a/src/lib/components/ui/switch/index.ts
+++ b/src/lib/components/ui/switch/index.ts
@@ -1,7 +1,7 @@
-import Root from "./switch.svelte";
+import Root from './switch.svelte';
 
 export {
 	Root,
 	//
-	Root as Switch,
+	Root as Switch
 };
diff --git a/src/lib/components/ui/switch/switch.svelte b/src/lib/components/ui/switch/switch.svelte
index 78477dd..ce291f3 100644
--- a/src/lib/components/ui/switch/switch.svelte
+++ b/src/lib/components/ui/switch/switch.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Switch as SwitchPrimitive } from "bits-ui";
-	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import { Switch as SwitchPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -15,7 +15,7 @@
 	bind:checked
 	data-slot="switch"
 	class={cn(
-		"data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 shadow-xs peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent outline-none transition-all focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
 		className
 	)}
 	{...restProps}
@@ -23,7 +23,7 @@
 	<SwitchPrimitive.Thumb
 		data-slot="switch-thumb"
 		class={cn(
-			"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+			'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
 		)}
 	/>
 </SwitchPrimitive.Root>
diff --git a/src/lib/components/ui/table/index.ts b/src/lib/components/ui/table/index.ts
index 14695c8..99239ae 100644
--- a/src/lib/components/ui/table/index.ts
+++ b/src/lib/components/ui/table/index.ts
@@ -1,11 +1,11 @@
-import Root from "./table.svelte";
-import Body from "./table-body.svelte";
-import Caption from "./table-caption.svelte";
-import Cell from "./table-cell.svelte";
-import Footer from "./table-footer.svelte";
-import Head from "./table-head.svelte";
-import Header from "./table-header.svelte";
-import Row from "./table-row.svelte";
+import Root from './table.svelte';
+import Body from './table-body.svelte';
+import Caption from './table-caption.svelte';
+import Cell from './table-cell.svelte';
+import Footer from './table-footer.svelte';
+import Head from './table-head.svelte';
+import Header from './table-header.svelte';
+import Row from './table-row.svelte';
 
 export {
 	Root,
@@ -24,5 +24,5 @@ export {
 	Footer as TableFooter,
 	Head as TableHead,
 	Header as TableHeader,
-	Row as TableRow,
+	Row as TableRow
 };
diff --git a/src/lib/components/ui/table/table-body.svelte b/src/lib/components/ui/table/table-body.svelte
index 29e9687..cf720f4 100644
--- a/src/lib/components/ui/table/table-body.svelte
+++ b/src/lib/components/ui/table/table-body.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <tbody
 	bind:this={ref}
 	data-slot="table-body"
-	class={cn("[&_tr:last-child]:border-0", className)}
+	class={cn('[&_tr:last-child]:border-0', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/table/table-caption.svelte b/src/lib/components/ui/table/table-caption.svelte
index 4696cff..61ac415 100644
--- a/src/lib/components/ui/table/table-caption.svelte
+++ b/src/lib/components/ui/table/table-caption.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <caption
 	bind:this={ref}
 	data-slot="table-caption"
-	class={cn("text-muted-foreground mt-4 text-sm", className)}
+	class={cn('text-muted-foreground mt-4 text-sm', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/table/table-cell.svelte b/src/lib/components/ui/table/table-cell.svelte
index 1a2f033..d769915 100644
--- a/src/lib/components/ui/table/table-cell.svelte
+++ b/src/lib/components/ui/table/table-cell.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLTdAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLTdAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="table-cell"
 	class={cn(
-		"whitespace-nowrap bg-clip-padding p-2 align-middle [&:has([role=checkbox])]:pr-0",
+		'bg-clip-padding p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/table/table-footer.svelte b/src/lib/components/ui/table/table-footer.svelte
index b9b14eb..53a9eb4 100644
--- a/src/lib/components/ui/table/table-footer.svelte
+++ b/src/lib/components/ui/table/table-footer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <tfoot
 	bind:this={ref}
 	data-slot="table-footer"
-	class={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+	class={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/table/table-head.svelte b/src/lib/components/ui/table/table-head.svelte
index e9dd237..6331b31 100644
--- a/src/lib/components/ui/table/table-head.svelte
+++ b/src/lib/components/ui/table/table-head.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLThAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLThAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="table-head"
 	class={cn(
-		"text-foreground h-10 whitespace-nowrap bg-clip-padding px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
+		'text-foreground h-10 bg-clip-padding px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/table/table-header.svelte b/src/lib/components/ui/table/table-header.svelte
index f47d259..615b5d8 100644
--- a/src/lib/components/ui/table/table-header.svelte
+++ b/src/lib/components/ui/table/table-header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <thead
 	bind:this={ref}
 	data-slot="table-header"
-	class={cn("[&_tr]:border-b", className)}
+	class={cn('[&_tr]:border-b', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/table/table-row.svelte b/src/lib/components/ui/table/table-row.svelte
index 0df769e..57e044e 100644
--- a/src/lib/components/ui/table/table-row.svelte
+++ b/src/lib/components/ui/table/table-row.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="table-row"
 	class={cn(
-		"hover:[&,&>svelte-css-wrapper]:[&>th,td]:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+		'hover:[&,&>svelte-css-wrapper]:[&>th,td]:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/table/table.svelte b/src/lib/components/ui/table/table.svelte
index a334956..38b0176 100644
--- a/src/lib/components/ui/table/table.svelte
+++ b/src/lib/components/ui/table/table.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLTableAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLTableAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	<table
 		bind:this={ref}
 		data-slot="table"
-		class={cn("w-full caption-bottom text-sm", className)}
+		class={cn('w-full caption-bottom text-sm', className)}
 		{...restProps}
 	>
 		{@render children?.()}
diff --git a/src/lib/components/ui/tabs/index.ts b/src/lib/components/ui/tabs/index.ts
index 12d4327..d2a7939 100644
--- a/src/lib/components/ui/tabs/index.ts
+++ b/src/lib/components/ui/tabs/index.ts
@@ -1,7 +1,7 @@
-import Root from "./tabs.svelte";
-import Content from "./tabs-content.svelte";
-import List from "./tabs-list.svelte";
-import Trigger from "./tabs-trigger.svelte";
+import Root from './tabs.svelte';
+import Content from './tabs-content.svelte';
+import List from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';
 
 export {
 	Root,
@@ -12,5 +12,5 @@ export {
 	Root as Tabs,
 	Content as TabsContent,
 	List as TabsList,
-	Trigger as TabsTrigger,
+	Trigger as TabsTrigger
 };
diff --git a/src/lib/components/ui/tabs/tabs-content.svelte b/src/lib/components/ui/tabs/tabs-content.svelte
index 340d65c..92044c8 100644
--- a/src/lib/components/ui/tabs/tabs-content.svelte
+++ b/src/lib/components/ui/tabs/tabs-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <TabsPrimitive.Content
 	bind:ref
 	data-slot="tabs-content"
-	class={cn("flex-1 outline-none", className)}
+	class={cn('flex-1 outline-none', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/tabs/tabs-list.svelte b/src/lib/components/ui/tabs/tabs-list.svelte
index 08932b6..e875fe4 100644
--- a/src/lib/components/ui/tabs/tabs-list.svelte
+++ b/src/lib/components/ui/tabs/tabs-list.svelte
@@ -1,19 +1,15 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: TabsPrimitive.ListProps = $props();
+	let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props();
 </script>
 
 <TabsPrimitive.List
 	bind:ref
 	data-slot="tabs-list"
 	class={cn(
-		"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+		'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/tabs/tabs-trigger.svelte b/src/lib/components/ui/tabs/tabs-trigger.svelte
index dced992..8dac6c5 100644
--- a/src/lib/components/ui/tabs/tabs-trigger.svelte
+++ b/src/lib/components/ui/tabs/tabs-trigger.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="tabs-trigger"
 	class={cn(
-		"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/tabs/tabs.svelte b/src/lib/components/ui/tabs/tabs.svelte
index ef6cada..b275bda 100644
--- a/src/lib/components/ui/tabs/tabs.svelte
+++ b/src/lib/components/ui/tabs/tabs.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
-		value = $bindable(""),
+		value = $bindable(''),
 		class: className,
 		...restProps
 	}: TabsPrimitive.RootProps = $props();
@@ -14,6 +14,6 @@
 	bind:ref
 	bind:value
 	data-slot="tabs"
-	class={cn("flex flex-col gap-2", className)}
+	class={cn('flex flex-col gap-2', className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/textarea/index.ts b/src/lib/components/ui/textarea/index.ts
index ace797a..9ccb3bf 100644
--- a/src/lib/components/ui/textarea/index.ts
+++ b/src/lib/components/ui/textarea/index.ts
@@ -1,7 +1,7 @@
-import Root from "./textarea.svelte";
+import Root from './textarea.svelte';
 
 export {
 	Root,
 	//
-	Root as Textarea,
+	Root as Textarea
 };
diff --git a/src/lib/components/ui/textarea/textarea.svelte b/src/lib/components/ui/textarea/textarea.svelte
index 545b377..7504574 100644
--- a/src/lib/components/ui/textarea/textarea.svelte
+++ b/src/lib/components/ui/textarea/textarea.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
-	import type { HTMLTextareaAttributes } from "svelte/elements";
+	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils.js';
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="textarea"
 	class={cn(
-		"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 field-sizing-content shadow-xs flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+		'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
 		className
 	)}
 	bind:value
diff --git a/src/lib/components/ui/tooltip/index.ts b/src/lib/components/ui/tooltip/index.ts
index 313a7f0..273d831 100644
--- a/src/lib/components/ui/tooltip/index.ts
+++ b/src/lib/components/ui/tooltip/index.ts
@@ -1,6 +1,6 @@
-import { Tooltip as TooltipPrimitive } from "bits-ui";
-import Trigger from "./tooltip-trigger.svelte";
-import Content from "./tooltip-content.svelte";
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+import Trigger from './tooltip-trigger.svelte';
+import Content from './tooltip-content.svelte';
 
 const Root = TooltipPrimitive.Root;
 const Provider = TooltipPrimitive.Provider;
@@ -17,5 +17,5 @@ export {
 	Content as TooltipContent,
 	Trigger as TooltipTrigger,
 	Provider as TooltipProvider,
-	Portal as TooltipPortal,
+	Portal as TooltipPortal
 };
diff --git a/src/lib/components/ui/tooltip/tooltip-content.svelte b/src/lib/components/ui/tooltip/tooltip-content.svelte
index e495efe..60d68f5 100644
--- a/src/lib/components/ui/tooltip/tooltip-content.svelte
+++ b/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { Tooltip as TooltipPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		sideOffset = 0,
-		side = "top",
+		side = 'top',
 		children,
 		arrowClasses,
 		...restProps
@@ -22,7 +22,7 @@
 		{sideOffset}
 		{side}
 		class={cn(
-			"bg-primary text-primary-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 origin-(--bits-tooltip-content-transform-origin) z-50 w-fit text-balance rounded-md px-3 py-1.5 text-xs",
+			'bg-primary text-primary-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 w-fit origin-(--bits-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
 			className
 		)}
 		{...restProps}
@@ -32,11 +32,11 @@
 			{#snippet child({ props })}
 				<div
 					class={cn(
-						"bg-primary z-50 size-2.5 rotate-45 rounded-[2px]",
-						"data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]",
-						"data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]",
-						"data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2",
-						"data-[side=left]:-translate-y-[calc(50%_-_3px)]",
+						'bg-primary z-50 size-2.5 rotate-45 rounded-[2px]',
+						'data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]',
+						'data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]',
+						'data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2',
+						'data-[side=left]:-translate-y-[calc(50%_-_3px)]',
 						arrowClasses
 					)}
 					{...props}
diff --git a/src/lib/components/ui/tooltip/tooltip-trigger.svelte b/src/lib/components/ui/tooltip/tooltip-trigger.svelte
index 1acdaa4..5631d1b 100644
--- a/src/lib/components/ui/tooltip/tooltip-trigger.svelte
+++ b/src/lib/components/ui/tooltip/tooltip-trigger.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
 
 	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps = $props();
 </script>
diff --git a/src/lib/hooks/is-mobile.svelte.ts b/src/lib/hooks/is-mobile.svelte.ts
index 4829c00..acbe8ef 100644
--- a/src/lib/hooks/is-mobile.svelte.ts
+++ b/src/lib/hooks/is-mobile.svelte.ts
@@ -1,4 +1,4 @@
-import { MediaQuery } from "svelte/reactivity";
+import { MediaQuery } from 'svelte/reactivity';
 
 const DEFAULT_MOBILE_BREAKPOINT = 768;
 
diff --git a/src/lib/hooks/useInitials.ts b/src/lib/hooks/useInitials.ts
index b5d9410..ae53ada 100644
--- a/src/lib/hooks/useInitials.ts
+++ b/src/lib/hooks/useInitials.ts
@@ -1,14 +1,14 @@
 export function getInitials(fullName?: string): string {
-    if (!fullName) return '';
+	if (!fullName) return '';
 
-    const names = fullName.trim().split(' ');
+	const names = fullName.trim().split(' ');
 
-    if (names.length === 0) return '';
-    if (names.length === 1) return names[0].charAt(0).toUpperCase();
+	if (names.length === 0) return '';
+	if (names.length === 1) return names[0].charAt(0).toUpperCase();
 
-    return `${names[0].charAt(0)}${names[names.length - 1].charAt(0)}`.toUpperCase();
+	return `${names[0].charAt(0)}${names[names.length - 1].charAt(0)}`.toUpperCase();
 }
 
 export function useInitials() {
-    return { getInitials };
+	return { getInitials };
 }
diff --git a/src/lib/server/db/index.ts b/src/lib/server/db/index.ts
index 1d6d3a5..f3a89f0 100644
--- a/src/lib/server/db/index.ts
+++ b/src/lib/server/db/index.ts
@@ -1,6 +1,7 @@
 import { drizzle } from 'drizzle-orm/postgres-js';
 import postgres from 'postgres';
 import { env } from '$env/dynamic/private';
+import * as brackets from './schema/brackets';
 import * as breakperiods from './schema/breakperiods';
 import * as competitions from './schema/competitions';
 import * as fields from './schema/fields';
@@ -16,17 +17,20 @@ if (!env.DATABASE_URL) throw new Error('DATABASE_URL is not set');
 
 const client = postgres(env.DATABASE_URL);
 
+export const schema = {
+	...brackets,
+	...breakperiods,
+	...competitions,
+	...fields,
+	...matches,
+	...permissions,
+	...roles,
+	...rounds,
+	...sessions,
+	...teams,
+	...users
+};
+
 export const db = drizzle(client, {
-	schema: {
-		...breakperiods,
-		...competitions,
-		...fields,
-		...matches,
-		...permissions,
-		...roles,
-		...rounds,
-		...sessions,
-		...teams,
-		...users
-	}
+	schema: schema
 });
diff --git a/src/lib/server/db/queries/competitions.ts b/src/lib/server/db/queries/competitions.ts
index fea090a..724458a 100644
--- a/src/lib/server/db/queries/competitions.ts
+++ b/src/lib/server/db/queries/competitions.ts
@@ -1,9 +1,14 @@
 import { eq } from 'drizzle-orm';
 import { db } from '..';
 import { competitions } from '../schema/competitions';
-import type { Round } from '../schema/rounds';
 
-export async function getCompetitionWithAll(id: number) {
+export async function getCompetition(id: string) {
+	return await db.query.competitions.findFirst({
+		where: eq(competitions.id, id)
+	});
+}
+
+export async function getCompetitionWithAll(id: string) {
 	return await db.query.competitions.findFirst({
 		where: eq(competitions.id, id),
 		with: {
diff --git a/src/lib/server/db/queries/rounds.ts b/src/lib/server/db/queries/rounds.ts
index 960f3c5..0a318c5 100644
--- a/src/lib/server/db/queries/rounds.ts
+++ b/src/lib/server/db/queries/rounds.ts
@@ -1,7 +1,27 @@
-import { eq } from 'drizzle-orm';
+import { and, eq } from 'drizzle-orm';
 import { db } from '..';
 import { rounds, type RoundInsert } from '../schema/rounds';
 
-export async function insertRound(competitionId: number, round: RoundInsert) {
-	return await db.insert(rounds).values(round);
+export async function insertRound(competitionId: string, round: RoundInsert) {
+	return await db.insert(rounds).values(round).returning();
+}
+
+export async function getRounds(competitionId: string) {
+	return await db.select().from(rounds).where(eq(rounds.competition_id, competitionId));
+}
+
+export async function getRound(competitionId: string, roundId: string) {
+	return await db
+		.select()
+		.from(rounds)
+		.where(and(eq(rounds.competition_id, competitionId), eq(rounds.id, roundId)));
+}
+
+export async function getRoundWithMatches(competitionId: string, roundId: string) {
+	return await db.query.rounds.findMany({
+		where: and(eq(rounds.competition_id, competitionId), eq(rounds.id, roundId)),
+		with: {
+			matches: true
+		}
+	});
 }
diff --git a/src/lib/server/db/queries/teams.ts b/src/lib/server/db/queries/teams.ts
new file mode 100644
index 0000000..e9d28de
--- /dev/null
+++ b/src/lib/server/db/queries/teams.ts
@@ -0,0 +1,51 @@
+import { eq } from 'drizzle-orm';
+import { db } from '..';
+import { teams } from '../schema/teams';
+
+/**
+ * Get all teams for a specific competition
+ * @param competitionId The ID of the competition
+ * @returns Array of teams
+ */
+export async function getTeamsByCompetition(competitionId: string) {
+	return await db.select().from(teams).where(eq(teams.competition_id, competitionId));
+}
+
+/**
+ * Get a specific team by ID
+ * @param teamId The ID of the team
+ * @returns The team or undefined if not found
+ */
+export async function getTeamById(teamId: string) {
+	const results = await db.select().from(teams).where(eq(teams.id, teamId));
+
+	return results[0];
+}
+
+/**
+ * Insert a new team
+ * @param team The team data to insert
+ * @returns The inserted team
+ */
+export async function insertTeam(team: { name: string; competition_id: string }) {
+	return await db.insert(teams).values(team).returning();
+}
+
+/**
+ * Update an existing team
+ * @param teamId The ID of the team to update
+ * @param data The updated team data
+ * @returns The updated team
+ */
+export async function updateTeam(teamId: string, data: { name?: string }) {
+	return await db.update(teams).set(data).where(eq(teams.id, teamId)).returning();
+}
+
+/**
+ * Delete a team
+ * @param teamId The ID of the team to delete
+ * @returns The deleted team
+ */
+export async function deleteTeam(teamId: string) {
+	return await db.delete(teams).where(eq(teams.id, teamId)).returning();
+}
diff --git a/src/lib/server/db/schema/brackets.ts b/src/lib/server/db/schema/brackets.ts
new file mode 100644
index 0000000..a4280dd
--- /dev/null
+++ b/src/lib/server/db/schema/brackets.ts
@@ -0,0 +1,18 @@
+import * as t from 'drizzle-orm/pg-core';
+import { timestamps } from '../util';
+import { competitions } from './competitions';
+
+export const bracketTypes = t.pgEnum('bracket_type', ['WINNER', 'LOSER', 'CONSOLATION', 'MAIN']);
+
+export const brackets = t.pgTable('brackets', {
+	id: t.uuid('id').primaryKey().defaultRandom(),
+	name: t.text('name').notNull(),
+	bracketType: bracketTypes('bracket_type').notNull(),
+	position: t.integer('position').default(1).notNull(),
+	isActive: t.boolean('is_active').default(true).notNull(),
+	competition_id: t
+		.uuid('competition_id')
+		.notNull()
+		.references(() => competitions.id, { onDelete: 'cascade' }),
+	...timestamps
+});
diff --git a/src/lib/server/db/schema/breakperiods.ts b/src/lib/server/db/schema/breakperiods.ts
index 4661869..2e23151 100644
--- a/src/lib/server/db/schema/breakperiods.ts
+++ b/src/lib/server/db/schema/breakperiods.ts
@@ -12,9 +12,9 @@ export const breakperiodTypes = t.pgEnum('breakperiod_types', [
 ]);
 
 export const breakperiods = t.pgTable('breakperiods', {
-	id: t.serial('id').primaryKey(),
-	competition_id: t.integer('competition_id').notNull(),
-	field_id: t.integer('field_id').notNull(),
+	id: t.uuid('id').primaryKey().defaultRandom(),
+	competition_id: t.uuid('competition_id').notNull(),
+	field_id: t.uuid('field_id').notNull(),
 	type: breakperiodTypes('type').notNull(),
 	round: t.integer('round').notNull(),
 	start_date: t.timestamp({ withTimezone: true, mode: 'date' }).notNull(),
diff --git a/src/lib/server/db/schema/competitions.ts b/src/lib/server/db/schema/competitions.ts
index 4e29a1d..f442a05 100644
--- a/src/lib/server/db/schema/competitions.ts
+++ b/src/lib/server/db/schema/competitions.ts
@@ -1,5 +1,5 @@
 import * as t from 'drizzle-orm/pg-core';
-import { timestamps } from '../util';
+import { timestamps, type TModelWithRelations } from '../util';
 import { relations } from 'drizzle-orm';
 import { users } from './users';
 import { breakperiods } from './breakperiods';
@@ -8,7 +8,7 @@ import { teams } from './teams';
 import { rounds } from './rounds';
 
 export const competitions = t.pgTable('competitions', {
-	id: t.serial('id').primaryKey(),
+	id: t.uuid('id').primaryKey().defaultRandom(),
 	name: t.text('name').notNull(),
 	description: t.text('description'),
 	start_date: t.timestamp({ withTimezone: true, mode: 'date' }).notNull(),
@@ -29,3 +29,5 @@ export const competitionsRelations = relations(competitions, ({ one, many }) =>
 }));
 
 export type Competition = typeof competitions.$inferSelect;
+
+export type CompetitionWithRelations = TModelWithRelations<'competitions'>;
diff --git a/src/lib/server/db/schema/fields.ts b/src/lib/server/db/schema/fields.ts
index abdbf8b..e3f08a6 100644
--- a/src/lib/server/db/schema/fields.ts
+++ b/src/lib/server/db/schema/fields.ts
@@ -4,8 +4,8 @@ import { relations } from 'drizzle-orm';
 import { competitions } from './competitions';
 
 export const fields = t.pgTable('fields', {
-	id: t.serial('id').primaryKey(),
-	competition_id: t.integer('competition_id').notNull(),
+	id: t.uuid('id').primaryKey().defaultRandom(),
+	competition_id: t.uuid('competition_id').notNull(),
 	name: t.text('name').notNull(),
 	description: t.text('description'),
 	...timestamps
diff --git a/src/lib/server/db/schema/matches.ts b/src/lib/server/db/schema/matches.ts
index 7968418..9601638 100644
--- a/src/lib/server/db/schema/matches.ts
+++ b/src/lib/server/db/schema/matches.ts
@@ -3,21 +3,27 @@ import { timestamps } from '../util';
 import { relations } from 'drizzle-orm';
 import { fields } from './fields';
 import { rounds } from './rounds';
+import { teams } from './teams';
+import { brackets } from './brackets';
 
 export const status = t.pgEnum('match_status', ['pending', 'running', 'finished', 'cancelled']);
 
 export const matches = t.pgTable('matches', {
-	id: t.serial('id').primaryKey(),
-	field_id: t.integer('field_id').notNull(),
-	team1: t.text('team1').notNull(),
-	team2: t.text('team2').notNull(),
+	id: t.uuid('id').primaryKey().defaultRandom(),
+	match_number: t.integer('match_number').notNull(),
+	field_id: t.uuid('field_id').notNull(),
+	team1_id: t.uuid('team1_id').notNull(),
+	team2_id: t.uuid('team2_id').notNull(),
+	winner_id: t.uuid('winner_id'),
 	start_date: t.timestamp({ withTimezone: true, mode: 'date' }).notNull(),
 	end_date: t.timestamp({ withTimezone: true, mode: 'date' }).notNull(),
 	score1: t.integer('score1').notNull(),
 	score2: t.integer('score2').notNull(),
 	status: status('status').notNull(),
-	match_number: t.integer('match_number').notNull(),
-	round_id: t.integer('round').notNull(),
+	position: t.integer('position').notNull(),
+	table: t.integer('table').notNull(), // swis/round robin
+	round_id: t.uuid('round_id').notNull(),
+	bracket_id: t.uuid('bracket_id').notNull(),
 	...timestamps
 });
 
@@ -29,7 +35,20 @@ export const matchRelations = relations(matches, ({ one }) => ({
 	round: one(rounds, {
 		fields: [matches.round_id],
 		references: [rounds.id]
-	})
+	}),
+	team1: one(teams, {
+		fields: [matches.team1_id],
+		references: [teams.id]
+	}),
+	team2: one(teams, {
+		fields: [matches.team2_id],
+		references: [teams.id]
+	}),
+	winner: one(teams, {
+		fields: [matches.winner_id],
+		references: [teams.id]
+	}),
+	bracket: one(brackets)
 }));
 
 export type Match = typeof matches.$inferSelect;
diff --git a/src/lib/server/db/schema/permissions.ts b/src/lib/server/db/schema/permissions.ts
index 6fe2328..56f1c8d 100644
--- a/src/lib/server/db/schema/permissions.ts
+++ b/src/lib/server/db/schema/permissions.ts
@@ -4,7 +4,7 @@ import { relations } from 'drizzle-orm';
 import { timestamps } from '../util';
 
 export const permissions = t.pgTable('permission', {
-	id: t.serial('id').primaryKey(),
+	id: t.uuid('id').primaryKey().defaultRandom(),
 	name: t.text('name').notNull().unique(),
 	description: t.text('description').notNull(),
 	is_wildcard: t.boolean('is_wildcard').notNull(),
diff --git a/src/lib/server/db/schema/roles.ts b/src/lib/server/db/schema/roles.ts
index ea81426..d14737c 100644
--- a/src/lib/server/db/schema/roles.ts
+++ b/src/lib/server/db/schema/roles.ts
@@ -4,7 +4,7 @@ import { relations } from 'drizzle-orm';
 import { timestamps } from '../util';
 
 export const roles = t.pgTable('role', {
-	id: t.serial('id').primaryKey(),
+	id: t.uuid('id').primaryKey().defaultRandom(),
 	name: t.text('name').notNull().unique(),
 	description: t.text('description').notNull(),
 	...timestamps
diff --git a/src/lib/server/db/schema/rounds.ts b/src/lib/server/db/schema/rounds.ts
index 9182d09..58e5f09 100644
--- a/src/lib/server/db/schema/rounds.ts
+++ b/src/lib/server/db/schema/rounds.ts
@@ -3,15 +3,27 @@ import * as t from 'drizzle-orm/pg-core';
 import { matches } from './matches';
 import { competitions } from './competitions';
 import { enumToPgEnum, SchedulingMode } from '../../../../types';
+import { timestamps, type TModelWithRelations } from '../util';
+import { brackets } from './brackets';
 
 export const schedulingModes = t.pgEnum('scheduling_modes', enumToPgEnum(SchedulingMode));
 
-export const rounds = t.pgTable('rounds', {
-	id: t.serial('id').primaryKey(),
-	nb_matches: t.integer('nb_matches').notNull(),
-	competition_id: t.integer('competition_id').notNull(),
-	scheduling_mode: schedulingModes('scheduling_modes')
-});
+export const rounds = t.pgTable(
+	'rounds',
+	{
+		id: t.uuid('id').primaryKey().defaultRandom(),
+		name: t.text('name').notNull(),
+		round_number: t.integer('round_number').notNull(),
+		nb_matches: t.integer('nb_matches').notNull(),
+		competition_id: t.uuid('competition_id').notNull(),
+		scheduling_mode: schedulingModes('scheduling_modes'),
+		bracket_id: t.uuid('bracket_id').references(() => brackets.id),
+		...timestamps
+	},
+	(table) => ({
+		uniqueCompetitionRound: t.unique().on(table.competition_id, table.round_number)
+	})
+);
 
 export const roundsRelations = relations(rounds, ({ many, one }) => ({
 	competition: one(competitions, {
@@ -24,3 +36,5 @@ export const roundsRelations = relations(rounds, ({ many, one }) => ({
 export type Round = typeof rounds.$inferSelect;
 
 export type RoundInsert = typeof rounds.$inferInsert;
+
+export type RoundWithRelations = TModelWithRelations<'rounds'>;
diff --git a/src/lib/server/db/schema/schema.ts b/src/lib/server/db/schema/schema.ts
index df4ee4a..ada3efc 100644
--- a/src/lib/server/db/schema/schema.ts
+++ b/src/lib/server/db/schema/schema.ts
@@ -9,11 +9,11 @@ export const permissionsToRoles = t.pgTable(
 	'permissions_to_roles',
 	{
 		permission_id: t
-			.integer('permission_id')
+			.uuid('permission_id')
 			.notNull()
 			.references(() => permissions.id),
 		role_id: t
-			.integer('role_id')
+			.uuid('role_id')
 			.notNull()
 			.references(() => roles.id),
 		granted: t.boolean('granted').notNull(),
@@ -37,11 +37,11 @@ export const usersToRoles = t.pgTable(
 	'users_to_roles',
 	{
 		user_id: t
-			.text('user_id')
+			.uuid('user_id')
 			.notNull()
 			.references(() => users.id),
 		role_id: t
-			.integer('role_id')
+			.uuid('role_id')
 			.notNull()
 			.references(() => roles.id),
 		granted: t.boolean('granted').notNull(),
@@ -65,7 +65,7 @@ export const usersToPermissions = t.pgTable(
 	'users_to_permissions',
 	{
 		user_id: t
-			.text('user_id')
+			.uuid('user_id')
 			.notNull()
 			.references(() => users.id),
 		permission_id: t
diff --git a/src/lib/server/db/schema/sessions.ts b/src/lib/server/db/schema/sessions.ts
index 7c192bb..2027364 100644
--- a/src/lib/server/db/schema/sessions.ts
+++ b/src/lib/server/db/schema/sessions.ts
@@ -6,7 +6,7 @@ export const sessions = t.pgTable('session', {
 	id: t.text('id').primaryKey(),
 	secret_hash: binaryHash('secret_hash').notNull(),
 	user_id: t
-		.text('user_id')
+		.uuid('user_id')
 		.notNull()
 		.references(() => users.id),
 	expires_at: t.timestamp('expires_at', { withTimezone: true, mode: 'date' }).notNull(),
diff --git a/src/lib/server/db/schema/teams.ts b/src/lib/server/db/schema/teams.ts
index 54b1138..2ef87f8 100644
--- a/src/lib/server/db/schema/teams.ts
+++ b/src/lib/server/db/schema/teams.ts
@@ -4,9 +4,9 @@ import { relations } from 'drizzle-orm';
 import { competitions } from './competitions';
 
 export const teams = t.pgTable('teams', {
-	id: t.serial('id').primaryKey(),
+	id: t.uuid('id').primaryKey().defaultRandom(),
 	name: t.text('name').notNull(),
-	competition_id: t.integer('competition_id').notNull(),
+	competition_id: t.uuid('competition_id').notNull(),
 	...timestamps
 });
 
diff --git a/src/lib/server/db/schema/users.ts b/src/lib/server/db/schema/users.ts
index cf1e38b..635d242 100644
--- a/src/lib/server/db/schema/users.ts
+++ b/src/lib/server/db/schema/users.ts
@@ -6,7 +6,7 @@ import { timestamps } from '../util';
 export const users = t.pgTable('user', {
 	id: t.text('id').primaryKey(),
 	username: t.text('username').notNull().unique(),
-	oauth_id: t.text('oauth_id').notNull(),
+	oauth_id: t.uuid('oauth_id').notNull(),
 	email: t.text('email').notNull().unique(),
 	...timestamps
 });
diff --git a/src/lib/server/db/util.ts b/src/lib/server/db/util.ts
index c30ae43..987b6a9 100644
--- a/src/lib/server/db/util.ts
+++ b/src/lib/server/db/util.ts
@@ -1,4 +1,6 @@
+import type { ExtractTablesWithRelations, InferSelectModel, Many } from 'drizzle-orm';
 import * as t from 'drizzle-orm/pg-core';
+import type { schema } from '.';
 
 export const timestamps = {
 	updated_at: t.timestamp({ withTimezone: true, mode: 'date' }).defaultNow(),
@@ -11,3 +13,49 @@ export const binaryHash = t.customType<{ data: Buffer; driverData: Buffer }>({
 		return 'bytea';
 	}
 });
+
+export type Schema = typeof schema;
+export type TSchema = ExtractTablesWithRelations<Schema>;
+
+// Helper type to find the tsName corresponding to a given dbName in TSchema
+export type FindTsNameByDbName<DbNameToFind extends string> = {
+	[K in keyof TSchema]: TSchema[K] extends { dbName: DbNameToFind } ? K : never;
+}[keyof TSchema];
+
+/**
+ * Utility type to infer the model type for a given table name from the schema.
+ * Handles nested relations recursively.
+ * Uses referencedTableName (dbName) and FindTsNameByDbName helper.
+ */
+export type TModelWithRelations<TTableName extends keyof TSchema> = InferSelectModel<
+	Schema[TTableName]
+> & {
+	[K in keyof TSchema[TTableName]['relations']]?: TSchema[TTableName]['relations'][K] extends infer TRelation // Infer the Relation/Many type
+		? // Extract the dbName from the relation's referencedTableName property
+			TRelation extends { referencedTableName: infer TRefDbName extends string }
+			? // Find the corresponding tsName using the helper
+				FindTsNameByDbName<TRefDbName> extends infer TRefTsName extends keyof TSchema
+				? // Check if the original relation was Many or Relation
+					TRelation extends Many<any>
+					? TModelWithRelations<TRefTsName>[] // Use the found tsName for recursion (Array)
+					: TModelWithRelations<TRefTsName> | null // Use the found tsName for recursion (Single | null)
+				: never // Could not find a tsName for the given dbName
+			: never // Could not extract referencedTableName (dbName)
+		: never; // Could not infer TRelation
+};
+
+// Example Usage (assuming you have 'users' and 'posts' tables with relations defined)
+// Assumes 'users' schema object has a relation named 'posts' pointing to the 'posts' table,
+// and 'posts' schema object has a relation named 'author' pointing to the 'users' table.
+
+// Example: Assuming schema.users has relations: { posts: Many<typeof schema.posts> }
+// type UserWithPosts = TModelWithRelations<'users'>;
+
+/* Resulting type would be something like:
+type UserWithPosts = InferSelectModel<typeof schema.users> & {
+  posts?: (InferSelectModel<typeof schema.posts> & {
+     // any relations defined on posts would be nested here too
+     author?: (InferSelectModel<typeof schema.users> & { ... }) | null // Example recursive relation
+  })[];
+}
+*/
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 0dda93c..cbab1e0 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -19,3 +19,5 @@ export function formatDate(date: Date) {
 		day: 'numeric'
 	});
 }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const instanceOf = <T>(value: any, fieldName: string): value is T => fieldName in value;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2bb8bd9..ca684e6 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -18,6 +18,6 @@
 	setContext('permissions', data.permissions);
 </script>
 
-<Toaster />
+<Toaster richColors />
 <ModeWatcher />
 {@render children()}
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index afb6d3e..e63de8c 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -1,11 +1,14 @@
 import { browser } from '$app/environment';
 import '$lib/i18n'; // Import to initialize. Important :)
 import { locale, waitLocale } from 'svelte-i18n';
-import type { LayoutLoad } from './$types';
+import type { LayoutLoad, LayoutLoadEvent } from './$types';
 
-export const load: LayoutLoad = async () => {
+export const load: LayoutLoad = async ({ data }: LayoutLoadEvent) => {
 	if (browser) {
 		locale.set(window.navigator.language);
 	}
 	await waitLocale();
+
+	// return server data
+	return data;
 };
diff --git a/src/routes/api/competitions/[id]/+server.ts b/src/routes/api/competitions/[id]/+server.ts
index cc0dd80..1c1afca 100644
--- a/src/routes/api/competitions/[id]/+server.ts
+++ b/src/routes/api/competitions/[id]/+server.ts
@@ -9,33 +9,40 @@ export const POST: RequestHandler = async ({ request, params }) => {
 	const body = await request.json();
 	let competitionId;
 	try {
-		competitionId = Number.parseInt(params.id, 10);
+		competitionId = params.id;
 	} catch {
 		throw new Error('Invalid competition id');
 	}
-	if (competitionId === -1) {
+	if (competitionId === '') {
 		throw new Error('Invalid competition id');
 	}
 
-	console.log('body', body);
-	console.log('competitionId', competitionId);
-
 	let schedulingMode: SchedulingMode;
+	let name: string;
+	let nbMmatches: number;
 
 	try {
 		schedulingMode = SchedulingMode[body.scheduling_mode as keyof typeof SchedulingMode];
+		name = body.name;
+		nbMmatches = body.nb_matches;
 	} catch {
 		throw new Error('Invalid scheduling mode');
 	}
 
 	// create round
 	const roundInsert: RoundInsert = {
-		nb_matches: 0,
+		nb_matches: nbMmatches,
+		name: name,
 		competition_id: competitionId,
-		scheduling_mode: schedulingMode
+		scheduling_mode: schedulingMode,
+		round_number: -1
 	};
 
-	const round = await insertRound(competitionId, roundInsert);
+	const [round] = await insertRound(competitionId, roundInsert);
 
-	return new Response(JSON.stringify(round));
+	return new Response(JSON.stringify(round), {
+		headers: {
+			'Content-Type': 'application/json'
+		}
+	});
 };
diff --git a/src/routes/competitions/[id]/+page.server.ts b/src/routes/competitions/[id]/+page.server.ts
index e1e11b6..9a11742 100644
--- a/src/routes/competitions/[id]/+page.server.ts
+++ b/src/routes/competitions/[id]/+page.server.ts
@@ -12,9 +12,7 @@ import { getCompetitionWithAll } from '@/lib/server/db/queries/competitions';
 
 export const load: PageServerLoad = async ({ params, locals }) => {
 	try {
-		const id = Number.parseInt(params.id);
-
-		const competition = await getCompetitionWithAll(id);
+		const competition = await getCompetitionWithAll(params.id);
 
 		if (!competition) {
 			throw error(404, 'Competition not found');
@@ -28,7 +26,7 @@ export const load: PageServerLoad = async ({ params, locals }) => {
 			competition: competition,
 			createForm: await superValidate(zod(formSchema))
 		};
-	} catch (e) {
+	} catch {
 		return redirect(302, '/');
 	}
 };
@@ -44,9 +42,9 @@ export const actions = {
 		}
 
 		// get competition id from url
-		const id = Number.parseInt(event.params.id, 10);
+		const id = event.params.id;
 
-		if (id === -1) {
+		if (id === '') {
 			throw error(400, 'Invalid competition id');
 		}
 
@@ -84,12 +82,12 @@ export const actions = {
 			throw error(400, 'Team name is required');
 		}
 
-		const teamId = Number.parseInt(team, 10);
+		const teamId = team;
 
 		// get competition id from url
-		const id = Number.parseInt(event.params.id, 10);
+		const id = event.params.id;
 
-		if (id === -1) {
+		if (id === '') {
 			throw error(400, 'Invalid competition id');
 		}
 
@@ -120,9 +118,9 @@ export const actions = {
 		const description = data.get('description')?.toString();
 
 		// get competition id from url
-		const id = Number.parseInt(event.params.id, 10);
+		const id = event.params.id;
 
-		if (id === -1) {
+		if (id === '') {
 			console.log(id);
 			throw error(400, 'Invalid competition id');
 		}
diff --git a/src/routes/competitions/[id]/+page.svelte b/src/routes/competitions/[id]/+page.svelte
index 9b7bb4c..2481f7f 100644
--- a/src/routes/competitions/[id]/+page.svelte
+++ b/src/routes/competitions/[id]/+page.svelte
@@ -14,13 +14,14 @@
 	import Tabs from '$lib/components/ui/tabs/tabs.svelte';
 	import Textarea from '$lib/components/ui/textarea/textarea.svelte';
 	import { formatDate } from '$lib/utils';
-	import { CalendarDays, Clock, MapPin, PlusIcon, Trash2Icon, Trophy, Users } from 'lucide-svelte';
-	import { Svelvet } from 'svelvet';
-	import type { PageProps } from './$types';
 	import CreateRound from '@/lib/components/rounds/create-round.svelte';
+	import { CalendarDays, Clock, MapPin, PlusIcon, Trash2Icon, Users } from 'lucide-svelte';
+	import type { PageProps } from './$types';
 
 	let { data }: PageProps = $props();
 
+	let competition = $state(data.competition);
+
 	let tabValue = $state('rounds');
 
 	let showInputTeam = $state(false);
@@ -29,33 +30,54 @@
 
 	let showAddRound = $state(false);
 
+	$effect(() => {
+		competition = data.competition;
+	});
+
+	$effect(() => {
+		if (competition.rounds) {
+			// on new one added scroll to it
+			const round = competition.rounds[competition.rounds.length - 1];
+			if (round) {
+				console.log(round.id);
+				const roundElement = document.getElementById(`round-${round.id}`);
+				if (roundElement) {
+					console.log('found element', roundElement);
+					roundElement.scrollIntoView({ behavior: 'smooth' });
+				} else {
+					console.log('no element found');
+				}
+			}
+		}
+	});
+
 	function clearAndCloseDescription() {
 		showInputDescription = false;
 	}
 </script>
 
 <svelte:head>
-	<title>{data.competition.name} | Competition Details</title>
+	<title>{competition.name} | Competition Details</title>
 </svelte:head>
 
 <div class="container mx-auto max-w-4xl px-4 py-8">
 	<div class="mb-8 flex items-start justify-between">
 		<div>
-			<h1 class="text-3xl font-bold">{data.competition.name}</h1>
+			<h1 class="text-3xl font-bold">{competition.name}</h1>
 			<div class="mt-2 flex items-center gap-2">
 				<Badge variant="outline" class="flex items-center gap-1">
 					<CalendarDays class="h-4 w-4" />
-					{formatDate(new Date(data.competition.start_date))}
+					{formatDate(new Date(competition.start_date))}
 				</Badge>
-				{#if data.competition.location}
+				{#if competition.location}
 					<Badge variant="outline" class="flex items-center gap-1">
 						<MapPin class="h-4 w-4" />
-						{data.competition.location}
+						{competition.location}
 					</Badge>
 				{/if}
 				<Badge variant="outline" class="flex items-center gap-1">
 					<Users class="h-4 w-4" />
-					Teams: {data.competition.teams?.length || 0}
+					Teams: {competition.teams?.length || 0}
 				</Badge>
 			</div>
 		</div>
@@ -71,9 +93,7 @@
 				<TabsTrigger value="rounds">Rounds</TabsTrigger>
 			</TabsList>
 			<Button
-				hidden={tabValue !== 'rounds' ||
-					!data.competition.rounds ||
-					data.competition.rounds.length === 0}
+				hidden={tabValue !== 'rounds' || !competition.rounds || competition.rounds.length === 0}
 				onclick={() => (showAddRound = !showAddRound)}>Add Round<PlusIcon /></Button
 			>
 		</div>
@@ -97,8 +117,8 @@
 									<Button onclick={() => clearAndCloseDescription()}>Cancel</Button>
 								</div>
 							</form>
-						{:else if data.competition.description}
-							<p class="text-gray-700 dark:text-gray-300">{data.competition.description}</p>
+						{:else if competition.description}
+							<p class="text-gray-700 dark:text-gray-300">{competition.description}</p>
 						{:else}
 							<p class="text-gray-500 italic">No description available</p>
 						{/if}
@@ -117,12 +137,12 @@
 					<CardContent>
 						<div class="flex items-center gap-2">
 							<Clock class="h-5 w-5 text-blue-500" />
-							<span>Created: {formatDate(new Date(data.competition.created_at))}</span>
+							<span>Created: {formatDate(new Date(competition.created_at))}</span>
 						</div>
-						{#if data.competition.updated_at}
+						{#if competition.updated_at}
 							<div class="flex items-center gap-2">
 								<Clock class="h-5 w-5 text-green-500" />
-								<span>Updated: {formatDate(new Date(data.competition.updated_at))}</span>
+								<span>Updated: {formatDate(new Date(competition.updated_at))}</span>
 							</div>
 						{/if}
 					</CardContent>
@@ -135,11 +155,11 @@
 					<h2 class="text-xl font-semibold">Teams</h2>
 				</CardHeader>
 				<CardContent>
-					{#if !data.competition.teams || data.competition.teams.length === 0}
+					{#if !competition.teams || competition.teams.length === 0}
 						<p class="text-gray-500 italic">No teams have been added yet</p>
 					{:else}
 						<div class="flex flex-col gap-4">
-							{#each data.competition.teams as team}
+							{#each competition.teams as team}
 								<div class="">
 									<form
 										method="post"
@@ -179,11 +199,15 @@
 		</TabsContent>
 
 		<TabsContent value="rounds">
-			{#if showAddRound || !data.competition.rounds || data.competition.rounds.length === 0}
-				<CreateRound competitionId={data.competition.id} />
+			{#if showAddRound || !competition.rounds || competition.rounds.length === 0}
+				<CreateRound
+					bind:showAddRound
+					bind:rounds={competition.rounds}
+					competitionId={competition.id}
+				/>
 			{:else}
-				{#each data.competition.rounds as round (round.id)}
-					<Round {round} />
+				{#each competition.rounds as round, round_number (round.id)}
+					<Round id={round.id} {round} {round_number} />
 				{/each}
 			{/if}
 		</TabsContent>
diff --git a/src/routes/competitions/[id]/rounds/[round_id]/+page.server.ts b/src/routes/competitions/[id]/rounds/[round_id]/+page.server.ts
new file mode 100644
index 0000000..7c1b4e7
--- /dev/null
+++ b/src/routes/competitions/[id]/rounds/[round_id]/+page.server.ts
@@ -0,0 +1,31 @@
+import { getCompetition } from '@/lib/server/db/queries/competitions';
+import { getRound } from '@/lib/server/db/queries/rounds';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ params, locals }) => {
+	const competitionId = params.id;
+	const roundId = params.round_id;
+	const { user } = locals;
+	if (!user) {
+		throw new Error('Unauthorized');
+	}
+	if (competitionId === '') {
+		throw new Error('Invalid competition id');
+	}
+	if (roundId === '') {
+		throw new Error('Invalid round id');
+	}
+
+	const competition = await getCompetition(competitionId);
+	if (!competition) {
+		throw new Error('Invalid competition');
+	}
+	if (competition.owner !== locals.user.id) {
+		throw new Error('Unauthorized');
+	}
+	const round = await getRound(competitionId, roundId);
+	if (!round) {
+		throw new Error('Invalid round');
+	}
+	return { competition: competition, round };
+};
diff --git a/src/routes/competitions/[id]/rounds/[round_id]/+page.svelte b/src/routes/competitions/[id]/rounds/[round_id]/+page.svelte
new file mode 100644
index 0000000..491807b
--- /dev/null
+++ b/src/routes/competitions/[id]/rounds/[round_id]/+page.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import type { PageProps } from './$types';
+
+	let { data }: PageProps = $props();
+</script>
+
+{JSON.stringify(data)}
diff --git a/src/types.ts b/src/types.ts
index ce32b76..f1dfa6c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -21,6 +21,11 @@ export enum SchedulingMode {
 	double_round_robin = 'double_round_robin'
 }
 
+export enum Bracket {
+	winners = 'winner',
+	losers = 'loser'
+}
+
 export function enumToPgEnum<T extends Record<string, any>>(
 	myEnum: T
 ): [T[keyof T], ...T[keyof T][]] {