Update tailwind and shadcn

.prettierrc

@@ -5,5 +5,6 @@
   "trailingComma": "none",
   "printWidth": 100,
   "tailwindConfig": "./tailwind.config.js",
-  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"]
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "./src/app.css"
 }

package.json

@@ -33,6 +33,8 @@
     "@sveltejs/adapter-static": "^3.0.9",
     "@sveltejs/kit": "^2.37.0",
     "@sveltejs/vite-plugin-svelte": "^6.1.3",
+    "@tailwindcss/typography": "^0.5.15",
+    "@tailwindcss/vite": "^4.0.0",
     "@types/hammerjs": "^2.0.46",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.15.10",
@@ -41,7 +43,7 @@
     "@vitest/coverage-v8": "2.1.9",
     "@vitest/ui": "^2.1.9",
     "autoprefixer": "^10.4.21",
-    "bits-ui": "^1.8.0",
+    "bits-ui": "^2.9.6",
     "c8": "7.14.0",
     "chai": "^4.5.0",
     "clsx": "^2.1.1",
@@ -62,20 +64,20 @@
     "lint-staged": "^15.5.1",
     "lucide-svelte": "^0.507.0",
     "node-html-parser": "^6.1.13",
-    "paneforge": "^1.0.2",
+    "paneforge": "1.0.0-next.6",
     "postcss": "^8.5.3",
     "postcss-load-config": "5.1.0",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.4.0",
-    "prettier-plugin-tailwindcss": "^0.6.14",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "svelte": "^5.38.6",
     "svelte-preprocess": "^6.0.3",
     "svelte-sonner": "^1.0.5",
-    "tailwind-merge": "^3.2.0",
+    "tailwind-merge": "^3.3.1",
-    "tailwind-variants": "^0.3.1",
+    "tailwind-variants": "^3.1.0",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
-    "tailwindcss-animate": "^1.0.7",
     "tslib": "^2.8.1",
+    "tw-animate-css": "^1.3.8",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.42.0",
     "unplugin-icons": "^22.2.0",

postcss.config.cjs

@@ -1,23 +0,0 @@
-const tailwindcss = require('tailwindcss');
-const autoprefixer = require('autoprefixer');
-const cssnano = require('cssnano');
-
-const mode = process.env.NODE_ENV;
-const dev = mode === 'development';
-
-module.exports = {
-  plugins: [
-    // Some plugins, like postcss-nested, need to run before Tailwind
-
-    tailwindcss,
-
-    // But others, like autoprefixer, need to run after
-
-    autoprefixer,
-
-    !dev &&
-      cssnano({
-        preset: 'default'
-      })
-  ]
-};

src/app.css

@@ -0,0 +1,116 @@
+@import '@fontsource-variable/recursive/crsv.css';
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+@layer base {
+  :root {
+    --background: hsl(0 0% 100%);
+    --foreground: hsl(222.2 84% 4.9%);
+    --card: hsl(0 0% 100%);
+    --card-foreground: hsl(222.2 84% 4.9%);
+    --popover: hsl(0 0% 100%);
+    --popover-foreground: hsl(222.2 84% 4.9%);
+    --primary: hsl(240 10% 91%);
+    --primary-foreground: hsl(255 20% 15%);
+    --secondary: hsl(210 40% 96.1%);
+    --secondary-foreground: hsl(222.2 47.4% 11.2%);
+    --muted: hsl(228 24% 96%);
+    --muted-foreground: hsl(215.4 16.3% 46.9%);
+    --accent: hsl(340 100% 44%);
+    --accent-foreground: hsl(210 40% 98%);
+    --destructive: hsl(0 72.22% 50.59%);
+    --destructive-foreground: hsl(210 40% 98%);
+    --border: hsl(214.3 31.8% 91.4%);
+    --input: hsl(214.3 31.8% 91.4%);
+    --ring: hsl(222.2 84% 4.9%);
+    --radius: 0.75rem;
+  }
+  .dark {
+    --background: hsl(222.2 84% 4.9%);
+    --foreground: hsl(210 40% 98%);
+    --card: hsl(222.2 84% 4.9%);
+    --card-foreground: hsl(210 40% 98%);
+    --popover: hsl(222.2 84% 4.9%);
+    --popover-foreground: hsl(210 40% 98%);
+    --primary: hsl(210 40% 30%);
+    --primary-foreground: hsl(222.2 47.4% 90%);
+    --secondary: hsl(217.2 32.6% 17.5%);
+    --secondary-foreground: hsl(210 40% 98%);
+    --muted: hsl(217.2 32.6% 17.5%);
+    --muted-foreground: hsl(215 20.2% 65.1%);
+    --accent: hsl(340 100% 44%);
+    --accent-foreground: hsl(210 40% 98%);
+    --destructive: hsl(0 62.8% 30.6%);
+    --destructive-foreground: hsl(210 40% 98%);
+    --border: hsl(217.2 32.6% 17.5%);
+    --input: hsl(217.2 32.6% 17.5%);
+    --ring: hsl(212.7 26.8% 83.9%);
+  }
+}
+
+@theme inline {
+  /* Radius (for rounded-*) */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  /* Colors */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-ring: var(--ring);
+  --color-radius: var(--radius);
+  --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;
+  }
+  body {
+    @apply h-screen w-screen overflow-hidden bg-background text-foreground;
+  }
+}
+
+body {
+  font-family: 'Recursive Variable', sans-serif;
+}
+
+.d {
+  @apply border border-red-500;
+}

src/routes/+layout.svelte

@@ -6,7 +6,7 @@
   import { base } from '$app/paths';
   import { mode, ModeWatcher } from 'mode-watcher';
   import { onMount, type Snippet } from 'svelte';
-  import '../app.postcss';
+  import '../app.css';
 
   interface Props {
     children: Snippet;
@@ -20,11 +20,10 @@
     window.addEventListener('hashchange', () => {
       void initHandler();
     });
+
     if ('serviceWorker' in navigator) {
       navigator.serviceWorker
-        .register(`${base}/service-worker.js`, {
+        .register(`${base}/service-worker.js`, { scope: `${base}/` })
-          scope: `${base}/`
-        })
         .then(function (registration) {
           console.log('Registration successful, scope is:', registration.scope);
         })
@@ -48,7 +47,7 @@
 
 {#if $loadingStateStore.loading}
   <div
-    class="absolute left-0 top-0 z-50 flex h-screen w-screen justify-center bg-gray-600 align-middle opacity-50">
+    class="absolute top-0 left-0 z-50 flex h-screen w-screen justify-center bg-gray-600 align-middle opacity-50">
     <div class="my-auto text-4xl font-bold text-indigo-100">
       <div class="loader mx-auto"></div>
       <div>{$loadingStateStore.message}</div>

tailwind.config.js

@@ -1,96 +0,0 @@
-import tailwindcssAnimate from 'tailwindcss-animate';
-import { fontFamily } from 'tailwindcss/defaultTheme';
-
-/** @type {import('tailwindcss').Config} */
-const config = {
-  darkMode: ['class'],
-  content: ['./src/**/*.{html,js,svelte,ts}'],
-  safelist: ['dark'],
-  theme: {
-    container: {
-      center: true,
-      padding: '2rem',
-      screens: {
-        '2xl': '1400px'
-      }
-    },
-    extend: {
-      colors: {
-        border: 'hsl(var(--border) / <alpha-value>)',
-        input: 'hsl(var(--input) / <alpha-value>)',
-        ring: 'hsl(var(--ring) / <alpha-value>)',
-        background: 'hsl(var(--background) / <alpha-value>)',
-        foreground: 'hsl(var(--foreground) / <alpha-value>)',
-        primary: {
-          DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
-          foreground: 'hsl(var(--primary-foreground) / <alpha-value>)'
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
-          foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)'
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
-          foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)'
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
-          foreground: 'hsl(var(--muted-foreground) / <alpha-value>)'
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
-          foreground: 'hsl(var(--accent-foreground) / <alpha-value>)'
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
-          foreground: 'hsl(var(--popover-foreground) / <alpha-value>)'
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card) / <alpha-value>)',
-          foreground: 'hsl(var(--card-foreground) / <alpha-value>)'
-        },
-        sidebar: {
-          DEFAULT: 'hsl(var(--sidebar-background))',
-          foreground: 'hsl(var(--sidebar-foreground))',
-          primary: 'hsl(var(--sidebar-primary))',
-          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-          accent: 'hsl(var(--sidebar-accent))',
-          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-          border: 'hsl(var(--sidebar-border))',
-          ring: 'hsl(var(--sidebar-ring))'
-        }
-      },
-      borderRadius: {
-        xl: 'calc(var(--radius) + 4px)',
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)'
-      },
-      fontFamily: {
-        sans: [...fontFamily.sans]
-      },
-      keyframes: {
-        'accordion-down': {
-          from: { height: '0' },
-          to: { height: 'var(--bits-accordion-content-height)' }
-        },
-        'accordion-up': {
-          from: { height: 'var(--bits-accordion-content-height)' },
-          to: { height: '0' }
-        },
-        'caret-blink': {
-          '0%,70%,100%': { opacity: '1' },
-          '20%,50%': { opacity: '0' }
-        }
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-        'caret-blink': 'caret-blink 1.25s ease-out infinite'
-      }
-    }
-  },
-  plugins: [tailwindcssAnimate]
-};
-
-export default config;

vite.config.js

@@ -1,3 +1,4 @@
+import tailwindcss from '@tailwindcss/vite';
 import { sveltekit } from '@sveltejs/kit/vite';
 import { FileSystemIconLoader } from 'unplugin-icons/loaders';
 import Icons from 'unplugin-icons/vite';
@@ -18,6 +19,7 @@ const alwaysFullReload = {
 
 export default defineConfig({
   plugins: [
+    tailwindcss(),
     sveltekit(),
     Icons({
       compiler: 'svelte',