# DCalc frontend-ui

`frontend-ui` is the progressive UI refactor of the current `frontend` application. The original
project remains available as the behavior baseline.

## Foundation

- Vue 3, Vue Router, Pinia, Vite and TypeScript track the current stable release line.
- Reka UI provides accessible interaction primitives.
- Tailwind CSS 4 provides layout utilities without Preflight during the migration period.
- CSS variables define the stable semantic contract between components and themes.
- SCSS/CSS remains available for game textures, image borders and state effects.
- `class-variance-authority` defines component variants in the local, source-owned UI layer.
- Oxc (`oxlint` and `oxfmt`) handles linting and formatting.

## Theme model

Components consume `--ui-*` semantic variables. Each skin maps its own palette and effects to that
contract under `[data-theme]`. Add a theme stylesheet and register it in `useTheme.ts`; component
code should not need to change.

The initial themes are:

- `dcalc`: tokens captured from `design/src-web`.
- `midnight`: a second skin used to verify that components are not coupled to the classic palette.

## Commands

```sh
pnpm install
pnpm dev
pnpm check
pnpm build
```

Open `/components` for the complete catalog of currently introduced components and their live
interactions. `/ui-preview` remains the smaller foundation smoke-test page.

See [`docs/ui-migration-standard.md`](docs/ui-migration-standard.md) for the reusable component
migration, theming, responsive implementation and browser QA standard.

The current catalog covers Button, Badge, Panel, Input, NumberField, Checkbox, RadioGroup, Switch,
Rating, Select, Slider, Progress, Tabs, ItemSlot, DataTable, Tooltip, DropdownMenu and Dialog.

## Migration rule

New UI components live under `src/components/ui`. Route changes, keyboard shortcuts and DNF data
mapping belong to pages, composables or domain components instead of generic primitives. Existing
`calc-*` components remain only until their business call sites are migrated.