frontend-svelte/README.md

# GlyphDiff

A modern font exploration and comparison tool for browsing fonts from Google Fonts and Fontshare with real-time visual comparisons, advanced filtering, and customizable typography.

## Features

- **Multi-Provider Catalog**: Browse fonts from Google Fonts and Fontshare in one place
- **Side-by-Side Comparison**: Compare up to 4 fonts simultaneously with customizable text, size, and typography settings
- **Advanced Filtering**: Filter by category, provider, character subsets, and weight
- **Virtual Scrolling**: Fast, smooth browsing of thousands of fonts
- **Responsive UI**: Beautiful interface built with shadcn components and Tailwind CSS
- **Type-Safe**: Full TypeScript coverage with strict mode enabled

## Tech Stack

- **Framework**: Svelte 5 with reactive primitives (runes)
- **Styling**: Tailwind CSS v4
- **Components**: shadcn-svelte (via bits-ui)
- **State Management**: TanStack Query for async data
- **Architecture**: Feature-Sliced Design (FSD)
- **Quality**: oxlint (linting), dprint (formatting), lefthook (git hooks)

## Project Structure

```
src/
├── app/          # App shell, layout, providers
├── widgets/      # Composed UI blocks (ComparisonSlider, SampleList, FontSearch)
├── features/     # Business features (filters, search, display)
├── entities/     # Domain models and stores (Font, Breadcrumb)
├── shared/       # Reusable utilities, UI components, helpers
└── routes/       # Page-level components
```

## Quick Start

```bash
# Install dependencies
yarn install

# Start development server
yarn dev

# Build for production
yarn build

# Preview production build
yarn preview
```

## Available Scripts

| Command             | Description                |
| ------------------- | -------------------------- |
| `yarn dev`          | Start development server   |
| `yarn build`        | Build for production       |
| `yarn preview`      | Preview production build   |
| `yarn check`        | Run Svelte type checking   |
| `yarn lint`         | Run oxlint                 |
| `yarn format`       | Format code with dprint    |
| `yarn test:unit`    | Run unit tests             |
| `yarn test:unit:ui` | Run Vitest UI              |
| `yarn storybook`    | Start Storybook dev server |

## Code Style

- **Path Aliases**: Use `$app/`, `$shared/`, `$features/`, `$entities/`, `$widgets/`, `$routes/`
- **Components**: PascalCase (e.g., `ComparisonSlider.svelte`)
- **Formatting**: 100 char line width, 4-space indent, single quotes
- **Type Safety**: Strict TypeScript with JSDoc comments for public APIs

## Architecture Notes

This project follows the Feature-Sliced Design (FSD) methodology for clean separation of concerns. The application uses Svelte 5's new runes system (`$state`, `$derived`, `$effect`) for reactive state management.

## License

MIT