feat: adopt @plures/design-dojo as sole UI component library

[Copilot]

Replace all ad-hoc local UI primitives with @plures/design-dojo components and enforce the constraint via ESLint. Every route page now uses design tokens exclusively — zero hard-coded hex colors or px spacing values remain.

New packages

packages/design-dojo (@plures/design-dojo)

Svelte 5 runes-based component library, ships .svelte sources for SvelteKit to process.

• Components: Button (variant + size), Input, Select (custom chevron, auto-ID via module counter), Card (padding/elevation/slots), Badge, Alert, EmptyState
• tokens.css: full --color-*, --space-*, --font-*, --radius-*, --shadow-*, --motion-*, --z-* scale
• Motion: dojoFade, dojoSlide, dojoScale transitions backed by token values

<Button variant="danger" size="sm" onclick={() => deleteGoal(goal.id)}>Delete</Button>
<Input label="Target Amount *" id="targetAmount" type="number" bind:value={newGoal.targetAmount} />
<Select label="Period *" id="period" bind:value={newBudget.period}>…</Select>

packages/eslint-plugin-design-dojo (@plures/eslint-plugin-design-dojo)

Flat-config ESLint plugin that enforces adoption at the lint layer.

• no-local-primitives (error): flags raw <button>, <input>, <select>, <textarea> in .svelte files; ignores PascalCase components via exact-case matching
• prefer-design-dojo-imports (warn): flags known dojo component names imported from local paths ($lib/components, $lib/ui, etc.)

Root-level changes

• package.json: both new packages added as file: workspace references
• eslint.config.js: design-dojo plugin registered for **/*.svelte
• src/app.css: @import '@plures/design-dojo/tokens.css'; body uses var(--font-family-sans) etc.

Route page refactors

All seven route pages (+page, accounts, transactions, budgets, goals, reports, settings) updated:

• Every <button>/<input>/<select> replaced with dojo equivalents
• Inline styles and hex literals replaced with var(--color-*) / var(--space-*) tokens
• dojoSlide transition on add-forms; dojoFade on modal backdrops
• Accessibility: aria-labelledby on modal dialogs, aria-label on progressbars, visible label prop on all form fields

Original prompt

---

This section details on the original issue you should resolve

<issue_title>feat: adopt design-dojo as sole UI component library</issue_title>
<issue_description>## Summary
Replace all local/ad-hoc UI components with @plures/design-dojo components. The app should be a flagship consumer of the design-dojo library.

Current State

The app likely has local Svelte components that duplicate design-dojo primitives (Button, Input, Select, etc.). All of these should be replaced.

Requirements

• Add @plures/design-dojo as dependency
• Replace all local UI primitives with dojo equivalents
• Add design-dojo ESLint enforce plugin (no-local-components, prefer-design-dojo-imports)
• Use design-dojo tokens for all colors, spacing, typography
• Use design-dojo motion system for all animations
• File issues in design-dojo for any missing components needed by FinancialAdvisor

Review UI Components Needed

• Import wizard (file drop, column mapping, preview)
• Transaction list with search/filter/sort
• Merchant resolution review panel
• Recurring detection review panel
• Budget vs actual charts
• Account overview dashboard
• Category breakdown visualizations

Acceptance

• Zero local UI primitives — all from design-dojo
• ESLint enforce plugin passes with zero violations
• App uses dojo design tokens exclusively
• Missing components filed as issues in design-dojo repo</issue_description>

Comments on the Issue (you are @copilot in this section)

@kayodebristol @copilot Please implement this issue.

• Fixes feat: adopt design-dojo as sole UI component library #61

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.