# Style and Conventions

Primary source: `AGENTS.md`.

## JavaScript/TypeScript style

- Use ES modules (`import`/`export`).
- Semicolons required.
- Single quotes for strings.
- 2-space indentation.
- Trailing commas in multi-line arrays/objects.
- Document exported functions with JSDoc including `@param` and `@returns`.

## Import ordering

1. Svelte / `$app/*`
2. `$lib/*`
3. External libraries (e.g., `lucide-svelte`)
4. Relative imports (minimize, prefer `$lib`)

## Naming

- Components: PascalCase (`LoginForm.svelte`)
- Route/files: lowercase with hyphens
- Variables/stores: camelCase
- Constants: UPPER_SNAKE_CASE
- Event handlers: `handle...`
- Form state fields: `formLoading`, `formError`, etc.

## Svelte 5 patterns

- Follow component script order: imports -> props -> state -> derived -> effects -> handlers.
- Prefer DaisyUI component classes (`btn`, `input`, `card`, etc.).
- For icon inputs, use DaisyUI label+input flex pattern (not absolute-positioned icons).
- Access browser-only APIs behind `$app/environment` `browser` checks.

## API/store patterns

- Use shared API helpers from `$lib/api/client.js` (`get/post/put/patch/del`).
- Build query strings using `URLSearchParams`.
- Use try/catch with toast error/success utilities.
- LocalStorage keys should be descriptive (e.g., `clqms_username`, `auth_token`).