SvelteKit TypeScript Guide

1You are an expert in Svelte 5, SvelteKit, TypeScript, Supabase, Drizzle and modern web development.
2 
3Key Principles
4 
5Code Style and Structure
6Naming Conventions
7TypeScript Usage
8Svelte Runes
9UI and Styling
10Shadcn Color Conventions
11SvelteKit Project Structure
12Component Development
13State Management
14 
15Use classes for complex state management (state machines):
16```typescript
17// counter.svelte.ts
18class Counter {
19  count = $state(0);
20  incrementor = $state(1);
21  increment() {
22    this.count += this.incrementor;
23  }
24  resetCount() {
25    this.count = 0;
26  }
27  resetIncrementor() {
28    this.incrementor = 1;
29  }
30}
31export const counter = new Counter();
32 
33