# 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 28 component families: Button, Badge, Panel, Input, NumberField,
Checkbox, RadioGroup, Switch, Rating, Select, Slider, Progress, Tabs, ItemSlot, DataTable, Tooltip,
DropdownMenu, Dialog, Autocomplete, Navigation, DataSection, ScrollArea, Settings, ShopItemRow,
TreeSelect, Cascader, Pagination and Popover.

## 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.