# SvelteKit + Token-First Design System (Monorepo)

This template uses a namespaced Turborepo structure with framework-agnostic design tokens and framework-specific UI packages.

## Setup

This project uses [mise](https://mise.jdx.dev) as a dev tools manager. It handles installing the correct version of `bun` and all project dependencies — a single command is all you need.

### 1. Install mise

```bash
brew install mise
```

Then activate mise in your shell (add to `~/.zshrc` or `~/.bashrc`):

```bash
eval "$(mise activate zsh)"   # zsh
eval "$(mise activate bash)"  # bash
```

Restart your terminal (or `source ~/.zshrc`) for the change to take effect.

### 2. Install everything

```bash
mise install
```

This installs `bun` at the pinned version and runs `bun install` to set up all project dependencies. That's it — you're ready to run the project.

## Structure

- `apps/sveltekit` - SvelteKit application
- `packages/@design-system/tokens` - Style Dictionary token source and generated outputs
- `packages/@design-system/components` - namespace package for framework-specific app imports
- `packages/@svelte/components` - Svelte primitives and shadcn-svelte adapter layer
- `packages/@react/components` - React shared component package
- `packages/@configs/*` - shared workspace configs

## Design System Flow

1. Source tokens live in `packages/@design-system/tokens/tokens/**`
2. Style Dictionary builds CSS and JSON artifacts into `packages/@design-system/tokens/dist/**`
3. `packages/@svelte/components` maps generic `--ds-*` tokens into the variables expected by the Svelte component layer
4. Apps import framework-specific subpaths such as `@design-system/components/svelte` and `@design-system/components/svelte/styles.css`

## Adding Svelte Components

Run the generator from the Svelte package:

```bash
cd packages/@svelte/components
bun run component:add button
```

## Using Components

Import shared components from the framework-specific design-system subpath:

```svelte
<script lang="ts">
	import { Button } from '@design-system/components/svelte';
</script>

<Button>Button</Button>
```