# HRM

Svelte 5 + shadcn-svelte + PocketBase, using [Bun](https://bun.sh).

## Stack

- **Svelte 5** (SvelteKit) with TypeScript
- **Tailwind CSS v4** via `@tailwindcss/vite`
- **shadcn-svelte** (new-york style, slate base)
- **PocketBase** — client and server connector for `https://pocketbase.ccllc.pro`

## Develop

```sh
bun install
bun run dev
```

Open [http://localhost:5173](http://localhost:5173). Use `bun run dev -- --open` to open automatically.

## Build

```sh
bun run build
bun run preview   # preview production build
```

## PocketBase

- **Client:** use the shared client in `$lib/pocketbase` (e.g. `import { pb } from '$lib/pocketbase'`) for browser-side API calls and auth.
- **Server:** use `event.locals.pb` in `load` functions, form actions, and API routes. Auth is restored from the `pb_auth` cookie and refreshed in `src/hooks.server.ts`.

To change the PocketBase URL or auth collection, edit:

- `src/lib/pocketbase.ts` — client base URL
- `src/hooks.server.ts` — server base URL and `users` auth collection name if different

## shadcn-svelte

Add components with:

```sh
bunx shadcn-svelte@latest add <component>
```

Example: `bunx shadcn-svelte@latest add card input label`

Config: `components.json`. Global styles and theme: `src/routes/app.css`.

## Project layout

- `src/lib/components/ui/` — shadcn-svelte components
- `src/lib/pocketbase.ts` — PocketBase client (browser)
- `src/lib/utils.ts` — `cn()` and shared types
- `src/hooks.server.ts` — PocketBase per-request instance and cookie auth