diff --git a/.cursor/rules/component-migration.md b/.cursor/rules/component-migration.md
new file mode 100644
index 0000000..1c175c3
--- /dev/null
+++ b/.cursor/rules/component-migration.md
@@ -0,0 +1,32 @@
+---
+description: Component migration and primitive design guidelines for @trakli/ui-kit
+globs: components/**/*.vue, composables/**/*.ts, utils/**/*.ts
+---
+
+# Component Migration & UI Kit Quality Rules
+
+When migrating components from `webui` into `@trakli/ui-kit`:
+
+1. **No String Concatenation for Copy (i18n)**:
+   - Do NOT construct text via template literals (`You don't have any ${pageName.toLowerCase()}...`).
+   - Expose explicit `title`, `description`, `actionLabel` props and slots (`#title`, `#description`, `#actions`) so consumers provide translated strings.
+
+2. **Self-Contained Static Assets**:
+   - Do NOT reference external public URLs like `/logo.svg` or `/_nuxt/logo.svg`.
+   - Bundle SVGs/images directly into `assets/` and import them statically (`import logoUrl from '../assets/logo.svg'`).
+
+3. **Strict Primitive Composition**:
+   - Do NOT render raw HTML interactive/layout tags (`<input>`, `<button>`, `<div class="card">`, `<hr>`) when primitives exist.
+   - Always compose: `TInput`, `TButton`, `TCard`, `TDivider`, `TDropdown`, `TDropdownItem`.
+
+4. **Preserve Dynamic Polymorphism & Escape Hatches**:
+   - Never collapse dynamic descriptor branches into hardcoded constants.
+   - Always keep plugin component escape hatches (`resolveComponent(ui.component)`), slot variants, and fallbacks.
+
+5. **Extensible Menus & Navigation**:
+   - Do NOT hardcode domain-specific menus (e.g., Settings/Admin/Logout) into UI kit primitives.
+   - Provide an `items` array prop (`MenuItem[]`) and `#menu` / `#header` slots with sensible defaults.
+
+6. **Zero Migration Noise & Strict Types**:
+   - Never commit scaffolding/transitional comments (`Migrated from webui/...`, `Tier 0 primitive`, `mirrors ...`).
+   - Never use `@ts-nocheck` to silence TypeScript errors. Fix types properly.
diff --git a/.gitignore b/.gitignore
index 58a49d2..f0c2167 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,5 @@ cypress/videos
 cypress/downloads
 *.log
 .DS_Store
+
+.playwright-mcp/
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 84467d2..220d21a 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,12 +1,44 @@
 // Default token values so components are themed in isolation.
 import '../assets/css/tokens.css';
 
-// NuxtLink is provided by Nuxt at runtime. Outside Nuxt (Storybook), register a
-// minimal stand-in so components that render links still mount.
 import { setup } from '@storybook/vue3';
-import { h } from 'vue';
+import { h, ref } from 'vue';
+
+// Minimal en translations for storybook preview
+const messages = {
+  'Sign in with Google': 'Sign in with Google',
+  'Sign up with Google': 'Sign up with Google',
+  'Theme': 'Theme',
+  'Light': 'Light',
+  'Dark': 'Dark',
+  'System': 'System',
+  'Language': 'Language',
+  'Cancel': 'Cancel',
+  'Confirm': 'Confirm',
+  'carousel.ai.title': 'Just ask',
+  'carousel.ai.text': 'Log expenses, build reports and get answers by chatting with your assistant in plain language.',
+  'carousel.integrations.title': 'Connect your bank',
+  'carousel.integrations.text': 'Link accounts with Plaid and import statements, so your transactions flow in on their own.',
+  'carousel.import.title': 'Import anything',
+  'carousel.import.text': 'Drop in a statement in any format and the assistant reads it, structured or not, into clean transactions.',
+  'carousel.welcome.title': "Sit back, we've got this",
+  'carousel.welcome.text': "You handle life. Trakli wrangles the receipts, the math and the mess. Welcome aboard!"
+};
+
+const locale = ref('en');
+const t = (key) => messages[key] || key;
+const setLocale = (l) => { locale.value = l; };
+
+// Provide global nuxt helper stand-ins so components can render cleanly in Storybook
+window.useI18n = () => ({ t, locale, setLocale });
+window.useCookie = () => ref('mock-cookie');
+window.useApi = () => async () => ({ data: {} });
 
 setup((app) => {
+  app.config.globalProperties.t = t;
+  app.config.globalProperties.locale = locale;
+  app.config.globalProperties.setLocale = setLocale;
+
   app.component('NuxtLink', {
     props: { to: { type: [String, Object], default: '#' } },
     setup(props, { slots }) {
diff --git a/UI_ARCHITECTURE.md b/UI_ARCHITECTURE.md
new file mode 100644
index 0000000..9ce4f5e
--- /dev/null
+++ b/UI_ARCHITECTURE.md
@@ -0,0 +1,957 @@
+# UI Design System: Component Architecture Inventory & Migration Tracker
+
+> **Architecture Note**: This codebase follows a **pragmatic 5-layer component hierarchy** rather than the modern 6-layer headless-first pattern:
+> 
+> ```
+> Layer 0: Design Tokens & Utilities
+> Layer 1: Base Components (Atoms) — Styled building blocks
+> Layer 2: Composite Components (Molecules) — Reusable patterns
+> Layer 3: Domain Components — Business logic & data-bound
+> Layer 4: Layouts & Pages — Application structure & routes
+> ```
+> 
+> **Key Difference**: This codebase does **not** have a dedicated headless primitive layer (like Radix UI, Ark UI, or React Aria). Base components (Layer 1) serve dual roles as both behavioral and visual primitives. When migrating to a headless-first architecture, Layer 1 components should be refactored to compose headless primitives with styled wrappers.
+
+> **Tracking Legend**:
+> - `[ ]` = Pending migration
+> - `[x]` = Migrated to the modern headless/token-driven standard
+
+---
+
+## ▸ Layer 0: Design Tokens, Foundation Scales & Utilities
+
+> The absolute foundation. Raw design variables, scale systems, formatters, and stateless utility logic. Zero dependency on components or business domain data.
+
+> The absolute ground floor. Raw values, algorithms, formatters, and stateless UI logic only. Zero dependency on business domain data.
+
+---
+
+### 0.1 Color Tokens & CSS Custom Properties
+**File:** [assets/scss/_variables.scss](file:///home/lantum/Desktop/Projects/webui/assets/scss/_variables.scss)
+
+#### Brand & Interaction Palette
+- [x] `--color-primary` — Core brand green (`#047844` / dark: `#059669`)
+- [x] `--color-primary-rgb` — RGB channel split for alpha mixing
+- [x] `--color-primary-hover` — Hover darkened shade
+- [x] `--color-primary-light` — Tinted fill for chips, surfaces
+- [x] `--color-primary-dark` — Deep/contrast accent
+- [x] `--color-primary-lighter` — Soft accent for highlights
+- [x] `--color-primary-border` — Focused ring / active border colour
+- [x] `--color-primary-muted` — Subtle badge and indicator
+- [x] `--color-primary-toggle` — Switch/toggle active state
+- [x] `--color-success` / `--color-success-rgb`
+- [x] `--color-error` / `--color-error-rgb` / `--color-error-dark`
+- [x] `--color-warning` / `--color-warning-rgb` / `--color-warning-bg` / `--color-warning-text`
+- [x] `--color-info` / `--color-info-rgb`
+- [x] `--color-accent` — Callout / flash highlight
+
+#### Financial Domain Semantics
+- [x] `--color-income` / `--color-income-rgb` / `--color-income-soft`
+- [x] `--color-expense` / `--color-expense-rgb` / `--color-expense-soft`
+- [x] `--color-neutral-soft` — Transfers / balanced entries
+- [x] `--color-chart-grid` — SVG/Canvas axis grid lines
+- [x] `--color-table-header` — Sticky table header background
+
+#### Typography & Surface Tokens
+- [x] `--color-text-primary` / `--color-text-secondary` / `--color-text-muted` / `--color-text-inverse`
+- [x] `--color-bg-light` / `--color-bg-gray` / `--color-bg-white` / `--color-bg-slate` / `--color-bg-card`
+- [x] `--color-input-bg`
+- [x] `--color-border` / `--color-border-light` / `--color-border-medium` / `--color-border-gray`
+- [x] `--glass-bg` / `--glass-bg-strong` — Glassmorphic backdrop fills
+- [x] `--hover-overlay` / `--press-overlay` — State layer overlays
+
+---
+
+### 0.2 Elevation & Shadow Scales
+**File:** [assets/scss/_variables.scss](file:///home/lantum/Desktop/Projects/webui/assets/scss/_variables.scss)
+
+- [x] `--shadow-sm` / `--shadow-md` / `--shadow-lg` / `--shadow-xl`
+- [x] `--elevation-0` — Flat / no shadow
+- [x] `--elevation-1` — Subtle ambient (base cards)
+- [x] `--elevation-2` — Raised cards & dropdowns
+- [x] `--elevation-3` — Floating panels
+- [x] `--elevation-4` — Dialogs & popovers
+- [x] `--elevation-5` — Critical overlays
+
+---
+
+### 0.3 Design Scales: Spacing, Radius, Typography, Breakpoints, Z-Index & Motion
+**File:** [assets/scss/_variables.scss](file:///home/lantum/Desktop/Projects/webui/assets/scss/_variables.scss)
+
+#### Spacing Scale
+- [x] `$spacing-1` (4px) · `$spacing-2` (8px) · `$spacing-3` (12px) · `$spacing-4` (16px)
+- [x] `$spacing-5` (20px) · `$spacing-6` (24px) · `$spacing-8` (32px) · `$spacing-10` (40px) · `$spacing-12` (48px)
+
+#### Border Radius Scale
+- [x] `$radius-sm` (2px) · `$radius-md` (4px) · `$radius-lg` (6px) · `$radius-xl` (8px)
+
+#### Typography Scale & Font Weights
+- [x] `$font-family-sans` — `'Ubuntu', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif`
+- [x] `$font-size-xs` (12px) · `$font-size-sm` (14px) · `$font-size-base` (16px) · `$font-size-lg` (18px) · `$font-size-xl` (20px) · `$font-size-2xl` (24px)
+- [x] `$font-normal` (400) · `$font-medium` (500) · `$font-semibold` (600) · `$font-bold` (700)
+
+#### Responsive Breakpoints
+- [x] `$breakpoint-sm` (640px) · `$breakpoint-md` (768px) · `$breakpoint-lg` (1024px) · `$breakpoint-xl` (1280px) · `$breakpoint-2xl` (1536px)
+
+#### Z-Index Scale
+- [x] `$z-index-dropdown` (1000) · `$z-index-sticky` (1020) · `$z-index-fixed` (1030)
+- [x] `$z-index-modal-backdrop` (1040) · `$z-index-modal` (1050) · `$z-index-popover` (1060) · `$z-index-tooltip` (1070)
+
+#### Motion & Easing Curves (Material 3)
+- [x] `$easing-standard` `cubic-bezier(0.2, 0, 0, 1)` — Everyday micro-interactions
+- [x] `$easing-emphasized` `cubic-bezier(0.3, 0, 0, 1)` — Hero / page-level transitions
+- [x] `$easing-decelerate` `cubic-bezier(0, 0, 0, 1)` — Entering animations
+- [x] `$easing-accelerate` `cubic-bezier(0.3, 0, 1, 1)` — Exiting animations
+- [x] `$duration-fast` (150ms) · `$duration-base` (250ms) · `$duration-slow` (400ms) · `$duration-deliberate` (600ms)
+
+#### Layout Structural Constants
+- [x] `$navbar-height` (52px) · `$navbar-icon-button-height` (36px)
+- [x] `$sidebar-width` (300px) · `$sidebar-width-collapsed` (80px) · `$sidebar-mobile-width` (280px)
+- [x] `$table-cell-padding` / `$table-header-padding`
+
+---
+
+### 0.4 Global CSS Surface & Utility Primitives
+
+#### Surface Variants — [assets/scss/_surfaces.scss](file:///home/lantum/Desktop/Projects/webui/assets/scss/_surfaces.scss)
+- [x] `.surface` base class + `--surface-bg` / `--surface-ink` / `--surface-accent` / `--surface-deep` scoped custom properties
+- [x] `.surface--brand` / `.surface--brand-soft`
+- [x] `.surface--income` / `.surface--expense` / `.surface--neutral`
+- [x] `.surface--investment` / `.surface--loan` / `.surface--gift`
+- [x] `.display-1` / `.display-2` / `.display-3` — Fluid `clamp()` hero headings
+- [x] `.eyebrow` — 11px uppercased section labels
+- [x] `.glass-pill` — Backdrop-blurred pill tag
+- [x] `.tone-card` — Responsive tone surface card wrapper
+
+#### Form Structural Class Primitives — [assets/scss/_form-styles.scss](file:///home/lantum/Desktop/Projects/webui/assets/scss/_form-styles.scss)
+- [x] `.entity-form` — Max-width constrained column layout form container
+- [x] `.card-form` — Modal card wrapper for forms
+- [x] `.form-group` — Flex column with gap
+- [x] `.form-label` / `.error-text`
+- [x] `.form-input` / `.form-select` / `.form-textarea` — Full-featured input atoms with hover, focus, disabled, error states
+- [x] `.form-header` / `.form-actions` — Structured header + footer button rows
+- [x] `.name-col` / `.name-icon-row` / `.two-col-row` — Grid layout helpers
+- [x] `.btn` / `.btn-primary` / `.btn-secondary` — Generic button class set
+- [x] `.submit-btn` / `.close-btn` — Specialised form action buttons
+- [x] `.icon-trigger` / `.icon-popover` — Icon picker trigger button + floating container
+
+#### Layout Utility Primitives — [assets/scss/_utilities.scss](file:///home/lantum/Desktop/Projects/webui/assets/scss/_utilities.scss)
+- [x] `.only-mobile` / `.only-tablet` / `.only-desktop` — Viewport-conditional visibility
+- [x] `.hide-mobile` / `.hide-tablet` / `.hide-desktop` — Viewport-conditional hiding
+- [x] `.chip` / `.chip--primary` / `.chip--report` / `.chip-icon` — Pill geometry primitive
+- [x] `.icon-button` — 28–32px icon-only bounding box button
+- [x] `.search-container` — Responsive flex search wrapper
+
+---
+
+### 0.5 Headless UI Helpers, Algorithms & Formatters
+
+#### Color Utilities — [utils/colors.ts](file:///home/lantum/Desktop/Projects/webui/utils/colors.ts)
+- [x] `hashString(str)` — Deterministic 32-bit string-to-integer hash
+- [x] `generateHSLColor(input, saturation, lightness)` — Infinite algorithmic colour generator
+- [x] `getColorForItem(item, index, opts)` — Base palette first, then HSL fallback
+- [x] `generateColorPalette(items, opts)` — Bulk unique colour mapping for lists/charts
+- [x] `getChartColors(data, opts)` — Chart dataset colour enricher
+- [x] `THEME_COLORS` — Semantic colour constants map (`income`, `expense`, `balance`, `neutral`, `success`, `warning`, `danger`, `info`)
+
+#### Currency & Data Formatters — [utils/currency.ts](file:///home/lantum/Desktop/Projects/webui/utils/currency.ts)
+- [x] `formatCurrency(amount, currency, locale)` — `Intl.NumberFormat` localized money formatter
+
+#### Headless UI State Composables
+- [x] `useTheme()` — Light/Dark/System state machine, `localStorage` persistence, `prefers-color-scheme` listener ([composables/useTheme.ts](file:///home/lantum/Desktop/Projects/webui/composables/useTheme.ts))
+- [x] `useDropdown()` — Click-outside DOM listener, open/close toggle, `rootRef` anchor ([composables/useDropdown.ts](file:///home/lantum/Desktop/Projects/webui/composables/useDropdown.ts))
+- [x] `useSidebar()` — Mobile drawer state, viewport resize listener, desktop collapse persistence ([composables/useSidebar.js](file:///home/lantum/Desktop/Projects/webui/composables/useSidebar.js))
+- [x] `usePasswordToggle()` — Input `type` toggle (`password` ↔ `text`) ([composables/usePasswordToggle.js](file:///home/lantum/Desktop/Projects/webui/composables/usePasswordToggle.js))
+- [x] `useAvatar()` — Deterministic initials parser and fallback avatar background resolver ([composables/useAvatar.ts](file:///home/lantum/Desktop/Projects/webui/composables/useAvatar.ts))
+- [x] `useMarkdown()` — SSR-safe, HTML-escaped Markdown-It renderer (`html: false`, `linkify: true`) ([composables/useMarkdown.ts](file:///home/lantum/Desktop/Projects/webui/composables/useMarkdown.ts))
+
+---
+
+## ▸ Layer 1: Base Components (Atoms)
+
+> Lowest-level styled `.vue` building blocks. These are **already styled components** (not headless primitives). They serve dual roles as both behavioral and visual atoms. Zero business/domain logic. Stateless or local-state only.
+>
+> **Migration Path**: When adopting a headless-first architecture, these should be refactored to compose headless primitives (Radix UI, Ark UI, or Reka UI) with a thin styled wrapper layer.
+
+| Status | Component | File | Description |
+| :---: | :--- | :--- | :--- |
+| [x] | **TButton** | [TButton.vue](file:///home/lantum/Desktop/Projects/webui/components/TButton.vue) | Polymorphic button atom. Variants: `primary`, `secondary`, `outline`, `text`. Sizes: `small`, `medium`, `large`. States: `loading` (spinner), `disabled`, `fullWidth`. Renders as `<NuxtLink>` when `to` prop provided. |
+| [x] | **TDropdown** | [TDropdown.vue](file:///home/lantum/Desktop/Projects/webui/components/TDropdown.vue) | Headless floating overlay container. Click-outside detection. `trigger` + default content slots. Scale + fade animated transitions. |
+| [x] | **TDropdownItem** | [TDropdownItem.vue](file:///home/lantum/Desktop/Projects/webui/components/TDropdownItem.vue) | Slot-based menu item button. 40px touch target. Standardised hover / focus-visible / active states. |
+| [x] | **TCard** | [TCard.vue](file:///home/lantum/Desktop/Projects/webui/components/TCard.vue) | Structural card container with elevation tokens. `header`, body, and `footer` slots. |
+| [x] | **TTabs** | [TTabs.vue](file:///home/lantum/Desktop/Projects/webui/components/TTabs.vue) | Pill-style tab bar. Dynamic named slot switching per active tab. Icon + label per tab. |
+| [x] | **SearchInput** | [SearchInput.vue](file:///home/lantum/Desktop/Projects/webui/components/SearchInput.vue) | Debounced `v-model` text input with built-in search icon and focus-expand animation. |
+| [x] | **LoadingSkeleton** | [LoadingSkeleton.vue](file:///home/lantum/Desktop/Projects/webui/components/LoadingSkeleton.vue) | Shimmer-animated skeleton. Variants: `default`, `list`, `card`, `table`. Props: `count`, `columns`. |
+| [x] | **EmptyState** | [EmptyState.vue](file:///home/lantum/Desktop/Projects/webui/components/EmptyState.vue) | Full-center empty state with customisable icon, i18n headline, subtitle, and CTA button (`@create`). |
+| [x] | **ComponentLoader** | [ComponentLoader.vue](file:///home/lantum/Desktop/Projects/webui/components/ComponentLoader.vue) | State orchestration wrapper: loading → `LoadingSkeleton`, error → retry alert, empty → `EmptyState`, data → default slot. |
+| [x] | **HamburgerMenu** | [HamburgerMenu.vue](file:///home/lantum/Desktop/Projects/webui/components/HamburgerMenu.vue) | Animated 3-line → X toggle button for mobile navigation. `isOpen` prop + `@toggle` emit. |
+| [x] | **TInfoButton** | [TInfoButton.vue](file:///home/lantum/Desktop/Projects/webui/components/TInfoButton.vue) | 34×48px information icon button atom. |
+| [x] | **TypingDots** | [ai/TypingDots.vue](file:///home/lantum/Desktop/Projects/webui/components/ai/TypingDots.vue) | Aria-labelled 3-dot staggered bounce animation for AI streaming / loading states. |
+| [x] | **TAvatar** | [TAvatar.vue](file:///home/lantum/Desktop/Projects/webui/components/TAvatar.vue) | User avatar trigger button with integrated account dropdown (Settings, Admin, Logout). Consumes `useDropdown` + `useAuth`. |
+| [x] | **Logo** | [Logo.vue](file:///home/lantum/Desktop/Projects/webui/components/Logo.vue) | Brand logo image. Sizes: `small / medium / large`. Fallback path error handling. |
+| [x] | **ViewToggle** | [ViewToggle.vue](file:///home/lantum/Desktop/Projects/webui/components/ViewToggle.vue) | Segmented 2-button control toggling `table` ↔ `cards` view mode via `v-model`. |
+| [x] | **ThemeToggleButton** | [ThemeToggleButton.vue](file:///home/lantum/Desktop/Projects/webui/components/ThemeToggleButton.vue) | 40px round icon button calling `useTheme().toggleTheme()`. Swaps `Sun` / `Moon` icon based on `isDark`. |
+| [x] | **GoogleIcon** | [icons/GoogleIcon.vue](file:///home/lantum/Desktop/Projects/webui/components/icons/GoogleIcon.vue) | Inline SVG Google brand logo. No props; purely presentational. |
+| [x] | **AuthDivider** | [auth/AuthDivider.vue](file:///home/lantum/Desktop/Projects/webui/components/auth/AuthDivider.vue) | Horizontal "OR" divider with flanking lines for auth forms. Purely decorative layout atom. |
+| [x] | **AuthFooterLink** | [AuthFooterLink.vue](file:///home/lantum/Desktop/Projects/webui/components/AuthFooterLink.vue) | Auth-page footer copy + link row. Props: `text`, `linkText`, `to`. |
+| [x] | **ExtensionSlot** | [extensions/ExtensionSlot.vue](file:///home/lantum/Desktop/Projects/webui/components/extensions/ExtensionSlot.vue) | Renderless plugin injection point. Iterates slot contributions via `useExtensionSlots` and delegates to `DescriptorRenderer`. |
+
+---
+
+## ▸ Layer 2: Composite Components (Molecules & Organisms)
+
+> Reusable widgets combining multiple Layer 1 atoms or SCSS primitives into richer interactive patterns. No product/domain logic. Safe to use across any context within the application.
+
+| Status | Component | File | Description |
+| :---: | :--- | :--- | :--- |
+| [x] | **SearchableDropdown** | [SearchableDropdown.vue](file:///home/lantum/Desktop/Projects/webui/components/SearchableDropdown.vue) | Full-featured combobox. Text search, single & multi-select, chip removal, option highlight matching, outside-click detection, disabled options. |
+| [x] | **ThemeSelector** | [ThemeSelector.vue](file:///home/lantum/Desktop/Projects/webui/components/ThemeSelector.vue) | `.icon-button` trigger + themed dropdown panel exposing Light / Dark / System options. Consumes `useTheme` + `useDropdown`. |
+| [x] | **LanguageSelector** | [LanguageSelector.vue](file:///home/lantum/Desktop/Projects/webui/components/LanguageSelector.vue) | Flag-icon trigger + scrollable locale list dropdown. Consumes `useI18n` + `useDropdown`. |
+| [x] | **CollapsibleSection** | [settings/CollapsibleSection.vue](file:///home/lantum/Desktop/Projects/webui/components/settings/CollapsibleSection.vue) | Animated accordion with icon title, expand/collapse chevron, inline Edit/Done mode toggle, and slotted body content. |
+| [x] | **ConfirmModal** | [modals/ConfirmModal.vue](file:///home/lantum/Desktop/Projects/webui/components/modals/ConfirmModal.vue) | Backdrop modal dialog with animated entry, contextual icon, and confirm/cancel actions. Types: `warning`, `danger`, `info`. |
+| [x] | **TTableComponent** | [TTableComponent.vue](file:///home/lantum/Desktop/Projects/webui/components/TTableComponent.vue) | Generic data table with sticky header/footer, inline edit/delete/recurrent actions, income/expense/net totals tray, and paginator. |
+| [x] | **ContentCard** | [ContentCard.vue](file:///home/lantum/Desktop/Projects/webui/components/ContentCard.vue) | Generic entity list row. Dynamic Lucide icon, name, description, type badge, default badge, edit/delete actions. |
+| [x] | **ContentCardGrid** | [ContentCardGrid.vue](file:///home/lantum/Desktop/Projects/webui/components/ContentCardGrid.vue) | Responsive `auto-fill` grid for entity cards. Inline context menu (edit/delete) per card with outside-click handling. Supports dynamic `cardFields` rendering. |
+| [x] | **ContentTable** | [ContentTable.vue](file:///home/lantum/Desktop/Projects/webui/components/ContentTable.vue) | Generic entity tabular view with search, sortable columns, and per-row actions. |
+| [x] | **ContentListView** | [ContentListView.vue](file:///home/lantum/Desktop/Projects/webui/components/ContentListView.vue) | Master meta-component: wraps `ContentTable` + `ContentCardGrid` with `ViewToggle` switch, local search, and client-side pagination. |
+| [x] | **ContentSection** | [ContentSection.vue](file:///home/lantum/Desktop/Projects/webui/components/ContentSection.vue) | Page content region shell: header with title slot + primary CTA action slot + body area. |
+| [x] | **TTopCard** | [TTopCard.vue](file:///home/lantum/Desktop/Projects/webui/components/TTopCard.vue) | Branded page header hero card with SVG radial bloom decoration, breadcrumb nav, dynamic icon resolved from `pageName`, info button, action slot, and primary CTA via `TButton`. |
+| [x] | **TDashboardTopCard** | [TDashboardTopCard.vue](file:///home/lantum/Desktop/Projects/webui/components/TDashboardTopCard.vue) | Dashboard-scoped KPI hero card variant with trend delta indicator. |
+| [x] | **TTransactionCard** | [TTransactionCard.vue](file:///home/lantum/Desktop/Projects/webui/components/TTransactionCard.vue) | Mobile-friendly card row for a single transaction entry (amount, party, category, type badge). |
+| [x] | **TTransactionSubCard** | [TTransactionSubCard.vue](file:///home/lantum/Desktop/Projects/webui/components/TTransactionSubCard.vue) | Sub-item card for grouped or nested transaction entries. |
+| [x] | **SparkLine** | [reports/SparkLine.vue](file:///home/lantum/Desktop/Projects/webui/components/reports/SparkLine.vue) | Pure SVG mini-chart. Gradient area fill, polyline path, terminal point dot. Takes `values[]` array + `color`. Zero chart library dependency. |
+| [x] | **KpiCard** | [reports/KpiCard.vue](file:///home/lantum/Desktop/Projects/webui/components/reports/KpiCard.vue) | Label + large display-value card. `is-positive` / `is-negative` value colour modifier classes. |
+| [x] | **PeriodControl** | [reports/PeriodControl.vue](file:///home/lantum/Desktop/Projects/webui/components/reports/PeriodControl.vue) | Period chip selector (predefined + custom date-range popover with transitions), compare toggle, and recap action CTA. |
+| [x] | **ReportsTabs** | [reports/ReportsTabs.vue](file:///home/lantum/Desktop/Projects/webui/components/reports/ReportsTabs.vue) | Tab navigation bar specific to the reports section pages. |
+| [x] | **IconPicker** | [IconPicker.vue](file:///home/lantum/Desktop/Projects/webui/components/IconPicker.vue) | Searchable Lucide icon grid popover for selecting and binding an icon name string value. |
+| [x] | **StatsFilterModal** | [StatsFilterModal.vue](file:///home/lantum/Desktop/Projects/webui/components/StatsFilterModal.vue) | Modal overlay for filtering statistics by date range, wallets, and categories. |
+| [x] | **NotificationBell** | [NotificationBell.vue](file:///home/lantum/Desktop/Projects/webui/components/NotificationBell.vue) | Bell icon + unread badge counter with dropdown notification list. Fetches from `notificationsApi` on open, supports mark-as-read and mark-all-read. |
+| [x] | **NotificationsContainer** | [NotificationsContainer.vue](file:///home/lantum/Desktop/Projects/webui/components/NotificationsContainer.vue) | Toast/banner notification display container and notification queue manager. |
+| [x] | **DescriptorRenderer** | [extensions/DescriptorRenderer.vue](file:///home/lantum/Desktop/Projects/webui/components/extensions/DescriptorRenderer.vue) | Polymorphic extension renderer mapping slot contribution descriptors to dynamic component trees. |
+| [x] | **auth/AuthCarousel** | [auth/AuthCarousel.vue](file:///home/lantum/Desktop/Projects/webui/components/auth/AuthCarousel.vue) | Auto-advancing image/text carousel for the auth page marketing panel. |
+| [x] | **auth/AuthSocialLogin** | [auth/AuthSocialLogin.vue](file:///home/lantum/Desktop/Projects/webui/components/auth/AuthSocialLogin.vue) | Renders OAuth provider buttons (Google etc.) for social login flows. |
+| [x] | **DailyBarChart** | [reports/charts/DailyBarChart.vue](file:///home/lantum/Desktop/Projects/webui/components/reports/charts/DailyBarChart.vue) | Daily cashflow bar chart visualisation. |
+| [x] | **CumulativeNetArea** | [reports/charts/CumulativeNetArea.vue](file:///home/lantum/Desktop/Projects/webui/components/reports/charts/CumulativeNetArea.vue) | Cumulative net worth area chart over time. |
+| [x] | **CashflowLineChart** | [reports/charts/CashflowLineChart.vue](file:///home/lantum/Desktop/Projects/webui/components/reports/charts/CashflowLineChart.vue) | Income vs expense cashflow trend line chart. |
+| [x] | **CategoryDonut** | [reports/charts/CategoryDonut.vue](file:///home/lantum/Desktop/Projects/webui/components/reports/charts/CategoryDonut.vue) | Donut/pie chart for category spending breakdown. |
+
+---
+
+## ▸ Layer 3: Domain / Feature Components
+
+> Components tightly coupled to product entities, API services, and application data models. Carry business logic, data fetching, mutations, or domain-specific validation. These are the highest-level reusable components before full page assembly.
+
+### 3.1 Transaction Domain
+| Status | Component | File | Description |
+| :---: | :--- | :--- | :--- |
+| [ ] | **TransactionForm** | [TransactionForm.vue](file:///home/lantum/Desktop/Projects/webui/components/TransactionForm.vue) | Full transaction entry form: amount, date, category, party, wallet, notes, recurrence. |
+| [ ] | **TransactionFormContainer** | [TransactionFormContainer.vue](file:///home/lantum/Desktop/Projects/webui/components/TransactionFormContainer.vue) | State wrapper managing transaction form submit, validation, API mutation. |
+| [ ] | **TransactionFormSection** | [TransactionFormSection.vue](file:///home/lantum/Desktop/Projects/webui/components/TransactionFormSection.vue) | Section sub-layout within the transaction form. |
+| [ ] | **FormSection** | [FormSection.vue](file:///home/lantum/Desktop/Projects/webui/components/FormSection.vue) | Transaction type tab switcher (Expense / Income / Transfer) that mounts either `TransactionFormContainer` or `TransferFormContainer`. |
+| [ ] | **TransferForm** | [TransferForm.vue](file:///home/lantum/Desktop/Projects/webui/components/TransferForm.vue) | Inter-wallet transfer entry form (from wallet, to wallet, amount, date). |
+| [ ] | **TransferFormContainer** | [TransferFormContainer.vue](file:///home/lantum/Desktop/Projects/webui/components/TransferFormContainer.vue) | State wrapper managing transfer submit and API mutation. |
+| [ ] | **TransactionsContentSection** | [transactions/TransactionsContentSection.vue](file:///home/lantum/Desktop/Projects/webui/components/transactions/TransactionsContentSection.vue) | Full transactions page layout orchestrating table/card view, filters, search, and pagination. |
+| [ ] | **TransactionsSpreadsheet** | [transactions/TransactionsSpreadsheet.vue](file:///home/lantum/Desktop/Projects/webui/components/transactions/TransactionsSpreadsheet.vue) | Inline-editable spreadsheet view of transactions. |
+| [ ] | **TTransactionsCardList** | [transactions/TTransactionsCardList.vue](file:///home/lantum/Desktop/Projects/webui/components/transactions/TTransactionsCardList.vue) | Mobile card list rendering of paginated transaction entries. |
+| [ ] | **TransactionFilters** | [transactions/TransactionFilters.vue](file:///home/lantum/Desktop/Projects/webui/components/transactions/TransactionFilters.vue) | Slide-in filter panel: date range, type, category, wallet, party, amount range. |
+
+### 3.2 Wallet Domain
+| Status | Component | File | Description |
+| :---: | :--- | :--- | :--- |
+| [ ] | **WalletCard** | [WalletCard.vue](file:///home/lantum/Desktop/Projects/webui/components/WalletCard.vue) | Wallet summary card with balance, currency, type, and actions. |
+| [ ] | **WalletListCard** | [WalletListCard.vue](file:///home/lantum/Desktop/Projects/webui/components/WalletListCard.vue) | Compact horizontal wallet row for list views. |
+| [ ] | **WalletForm** | [WalletForm.vue](file:///home/lantum/Desktop/Projects/webui/components/WalletForm.vue) | Wallet create/edit form: name, currency, type, opening balance, icon. |
+| [ ] | **WalletDetailPanel** | [wallets/WalletDetailPanel.vue](file:///home/lantum/Desktop/Projects/webui/components/wallets/WalletDetailPanel.vue) | Slide-out or full detail panel for a single wallet with balance history. |
+| [ ] | **WalletsStatsStrip** | [wallets/WalletsStatsStrip.vue](file:///home/lantum/Desktop/Projects/webui/components/wallets/WalletsStatsStrip.vue) | Horizontal summary strip of aggregate wallet stats (total balance, count, currencies). |
+
+### 3.3 Budget Domain
+| Status | Component | File | Description |
+| :---: | :--- | :--- | :--- |
+| [ ] | **BudgetCard** | [budgets/BudgetCard.vue](file:///home/lantum/Desktop/Projects/webui/components/budgets/BudgetCard.vue) | Budget card with progress bar, status chip, period, category/wallet scope pills, and edit/delete. Links to budget detail page. |
+| [ ] | **BudgetForm** | [budgets/BudgetForm.vue](file:///home/lantum/Desktop/Projects/webui/components/budgets/BudgetForm.vue) | Budget create/edit form: name, amount, period type, target categories/wallets. |
+
+### 3.4 Category Domain
+| Status | Component | File | Description |
+| :---: | :--- | :--- | :--- |
+| [ ] | **CategoryForm** | [categories/CategoryForm.vue](file:///home/lantum/Desktop/Projects/webui/components/categories/CategoryForm.vue) | Category create/edit form: name, type (income/expense), icon, colour, parent group. |
+
+### 3.5 Party Domain
+| Status | Component | File | Description |
+| :---: | :--- | :--- | :--- |
+| [ ] | **PartiesForm** | [PartiesForm.vue](file:///home/lantum/Desktop/Projects/webui/components/PartiesForm.vue) | Party create/edit form: name, email, phone, notes. |
+| [ ] | **PartyCard** | [PartyCard.vue](file:///home/lantum/Desktop/Projects/webui/components/PartyCard.vue) | Party summary card with contact info and action buttons. |
+| [ ] | **PartyCardList** | [PartyCardList.vue](file:///home/lantum/Desktop/Projects/webui/components/PartyCardList.vue) | Grid/list of `PartyCard` items. |
+| [ ] | **PartyDetailPanel** | [parties/PartyDetailPanel.vue](file:///home/lantum/Desktop/Projects/webui/components/parties/PartyDetailPanel.vue) | Full party detail panel with transaction history and contact details. |
+| [ ] | **PartiesStatsStrip** | [parties/PartiesStatsStrip.vue](file:///home/lantum/Desktop/Projects/webui/components/parties/PartiesStatsStrip.vue) | Aggregate party stats strip (total parties, top payees, top payers). |
+
+### 3.6 Group, Holdings & Reminders Domain
+| Status | Component | File | Description |
+| :---: | :--- | :--- | :--- |
+| [ ] | **GroupForm** | [groups/GroupForm.vue](file:///home/lantum/Desktop/Projects/webui/components/groups/GroupForm.vue) | Group create/edit form. |
+| [ ] | **HoldingForm** | [holdings/HoldingForm.vue](file:///home/lantum/Desktop/Projects/webui/components/holdings/HoldingForm.vue) | Investment holding create/edit form. |
+| [ ] | **ReminderForm** | [reminders/ReminderForm.vue](file:///home/lantum/Desktop/Projects/webui/components/reminders/ReminderForm.vue) | Reminder create/edit form: title, due date, frequency, linked transaction. |
+| [ ] | **RecurringModal** | [modals/RecurringModal.vue](file:///home/lantum/Desktop/Projects/webui/components/modals/RecurringModal.vue) | Modal for managing transaction recurrence rules (frequency, end date). |
+| [ ] | **LearningModal** | [modals/LearningModal.vue](file:///home/lantum/Desktop/Projects/webui/components/modals/LearningModal.vue) | Educational contextual modal explaining financial concepts in-app. |
+
+### 3.7 Imports Domain
+| Status | Component | File | Description |
+| :---: | :--- | :--- | :--- |
+| [ ] | **ImportUpload** | [imports/ImportUpload.vue](file:///home/lantum/Desktop/Projects/webui/components/imports/ImportUpload.vue) | Hero upload section with animated document type carousel, drag-and-drop zone, and file type selector. |
+| [ ] | **ImportAnalyzing** | [imports/ImportAnalyzing.vue](file:///home/lantum/Desktop/Projects/webui/components/imports/ImportAnalyzing.vue) | AI analysis in-progress state with streaming progress indicators. |
+| [ ] | **ImportConfirmDialog** | [imports/ImportConfirmDialog.vue](file:///home/lantum/Desktop/Projects/webui/components/imports/ImportConfirmDialog.vue) | Confirmation step before committing parsed import data. |
+| [ ] | **ImportSessionsList** | [imports/ImportSessionsList.vue](file:///home/lantum/Desktop/Projects/webui/components/imports/ImportSessionsList.vue) | List of past import sessions with status badges and re-open actions. |
+| [ ] | **SuggestionReviewTable** | [imports/SuggestionReviewTable.vue](file:///home/lantum/Desktop/Projects/webui/components/imports/SuggestionReviewTable.vue) | Editable review table of AI-parsed transaction suggestions before acceptance. |
+
+### 3.8 Dashboard Domain
+| Status | Component | File | Description |
+| :---: | :--- | :--- | :--- |
+| [ ] | **DashboardKPIs** | [dashboard/DashboardKPIs.vue](file:///home/lantum/Desktop/Projects/webui/components/dashboard/DashboardKPIs.vue) | Row of KPI metric cards (total income, expenses, net, savings rate). |
+| [ ] | **RecentTransactions** | [dashboard/RecentTransactions.vue](file:///home/lantum/Desktop/Projects/webui/components/dashboard/RecentTransactions.vue) | Latest transactions widget with mini list and "view all" link. |
+| [ ] | **CategoryBreakdown** | [dashboard/CategoryBreakdown.vue](file:///home/lantum/Desktop/Projects/webui/components/dashboard/CategoryBreakdown.vue) | Donut chart + ranked list showing spending by category for the period. |
+| [ ] | **QuickInsights** | [dashboard/QuickInsights.vue](file:///home/lantum/Desktop/Projects/webui/components/dashboard/QuickInsights.vue) | AI-generated summary insight cards for the current period. |
+| [ ] | **DashboardWalletSelector** | [dashboard/DashboardWalletSelector.vue](file:///home/lantum/Desktop/Projects/webui/components/dashboard/DashboardWalletSelector.vue) | Wallet filter chip strip for scoping dashboard data to specific wallets. |
+| [ ] | **DashboardQuickActionModal** | [dashboard/DashboardQuickActionModal.vue](file:///home/lantum/Desktop/Projects/webui/components/dashboard/DashboardQuickActionModal.vue) | Quick-action floating modal for add transaction / transfer shortcut. |
+| [ ] | **DashboardAgentHero** | [dashboard/DashboardAgentHero.vue](file:///home/lantum/Desktop/Projects/webui/components/dashboard/DashboardAgentHero.vue) | AI agent hero card with greeting, financial snapshot, and launch assistant CTA. |
+
+### 3.9 Reports Domain
+| Status | Component | File | Description |
+| :---: | :--- | :--- | :--- |
+| [ ] | **CashflowHero** | [reports/CashflowHero.vue](file:///home/lantum/Desktop/Projects/webui/components/reports/CashflowHero.vue) | Period income/expense/net hero summary with trend comparison. |
+| [ ] | **MonthInReview** | [reports/MonthInReview.vue](file:///home/lantum/Desktop/Projects/webui/components/reports/MonthInReview.vue) | Monthly recap modal/panel with AI highlights, top categories, and cashflow summary. |
+| [ ] | **CategoryRanking** | [reports/CategoryRanking.vue](file:///home/lantum/Desktop/Projects/webui/components/reports/CategoryRanking.vue) | Ranked bar list of categories by spend amount. |
+| [ ] | **CategoryDrillModal** | [reports/CategoryDrillModal.vue](file:///home/lantum/Desktop/Projects/webui/components/reports/CategoryDrillModal.vue) | Drill-down modal for a single category's transactions and trend. |
+| [ ] | **FinancialRatios** | [reports/FinancialRatios.vue](file:///home/lantum/Desktop/Projects/webui/components/reports/FinancialRatios.vue) | Computed ratio cards (savings rate, expense ratio, etc.). |
+| [ ] | **NotableStrip** | [reports/NotableStrip.vue](file:///home/lantum/Desktop/Projects/webui/components/reports/NotableStrip.vue) | Horizontal strip of notable outlier transactions for the period. |
+| [ ] | **CalendarHeatmap** | [reports/CalendarHeatmap.vue](file:///home/lantum/Desktop/Projects/webui/components/reports/CalendarHeatmap.vue) | GitHub-style calendar heatmap of daily spending intensity. |
+| [ ] | **SankeyFlow** | [reports/SankeyFlow.vue](file:///home/lantum/Desktop/Projects/webui/components/reports/SankeyFlow.vue) | Sankey flow diagram of income sources → expense categories. |
+| [ ] | **ReportsEmpty** | [reports/ReportsEmpty.vue](file:///home/lantum/Desktop/Projects/webui/components/reports/ReportsEmpty.vue) | Reports-specific empty state with onboarding prompt. |
+| [ ] | **CategoriesTab** | [reports/CategoriesTab.vue](file:///home/lantum/Desktop/Projects/webui/components/reports/CategoriesTab.vue) | Reports tab: category breakdown donut + ranking table. |
+| [ ] | **ChartsTab** | [reports/ChartsTab.vue](file:///home/lantum/Desktop/Projects/webui/components/reports/ChartsTab.vue) | Reports tab: cashflow line chart + cumulative area chart. |
+| [ ] | **CalendarTab** | [reports/CalendarTab.vue](file:///home/lantum/Desktop/Projects/webui/components/reports/CalendarTab.vue) | Reports tab: calendar heatmap + period totals. |
+| [ ] | **FlowTab** | [reports/FlowTab.vue](file:///home/lantum/Desktop/Projects/webui/components/reports/FlowTab.vue) | Reports tab: Sankey flow diagram view. |
+
+### 3.10 Settings Domain
+| Status | Component | File | Description |
+| :---: | :--- | :--- | :--- |
+| [ ] | **SettingsAccount** | [settings/SettingsAccount.vue](file:///home/lantum/Desktop/Projects/webui/components/settings/SettingsAccount.vue) | User profile edit section: first/last name, username, email, password change trigger. |
+| [ ] | **SettingsDisplay** | [settings/SettingsDisplay.vue](file:///home/lantum/Desktop/Projects/webui/components/settings/SettingsDisplay.vue) | Display preferences: theme, language, currency, date format. |
+| [ ] | **SettingsGeneral** | [settings/SettingsGeneral.vue](file:///home/lantum/Desktop/Projects/webui/components/settings/SettingsGeneral.vue) | General application configuration settings panel. |
+| [ ] | **SettingsNotifications** | [settings/SettingsNotifications.vue](file:///home/lantum/Desktop/Projects/webui/components/settings/SettingsNotifications.vue) | Notification preferences toggle panel (email, push, reminders). |
+| [ ] | **SettingsWallets** | [settings/SettingsWallets.vue](file:///home/lantum/Desktop/Projects/webui/components/settings/SettingsWallets.vue) | Wallet management section within settings. |
+| [ ] | **SettingsConnections** | [settings/SettingsConnections.vue](file:///home/lantum/Desktop/Projects/webui/components/settings/SettingsConnections.vue) | Third-party integrations and connected services management. |
+| [ ] | **PasswordModal** | [settings/PasswordModal.vue](file:///home/lantum/Desktop/Projects/webui/components/settings/PasswordModal.vue) | Modal for secure password change with current/new/confirm fields. |
+
+### 3.11 AI / Chat Domain
+| Status | Component | File | Description |
+| :---: | :--- | :--- | :--- |
+| [ ] | **ChatExperience** | [ai/ChatExperience.vue](file:///home/lantum/Desktop/Projects/webui/components/ai/ChatExperience.vue) | Full AI chat experience shell composing sidebar, message list, composer, and canvas panel. |
+| [ ] | **ChatComposer** | [ai/ChatComposer.vue](file:///home/lantum/Desktop/Projects/webui/components/ai/ChatComposer.vue) | Message input bar with attach, send, and slash-command detection. |
+| [ ] | **ChatMessageList** | [ai/ChatMessageList.vue](file:///home/lantum/Desktop/Projects/webui/components/ai/ChatMessageList.vue) | Scrollable message thread with user/assistant message rendering. |
+| [ ] | **ChatSidebar** | [ai/ChatSidebar.vue](file:///home/lantum/Desktop/Projects/webui/components/ai/ChatSidebar.vue) | Conversation history sidebar with new chat, session list, and rename/delete. |
+| [ ] | **ChatResultRenderer** | [ai/ChatResultRenderer.vue](file:///home/lantum/Desktop/Projects/webui/components/ai/ChatResultRenderer.vue) | Routes AI result payloads to the appropriate block renderer component. |
+| [ ] | **CanvasPanel** | [ai/CanvasPanel.vue](file:///home/lantum/Desktop/Projects/webui/components/ai/CanvasPanel.vue) | Expandable side canvas panel for AI-generated chart/table artifacts. |
+| [ ] | **ChatLandingInsights** | [ai/ChatLandingInsights.vue](file:///home/lantum/Desktop/Projects/webui/components/ai/ChatLandingInsights.vue) | Landing state insight prompt cards shown before first message. |
+| [ ] | **ChatEmptyState** | [ai/ChatEmptyState.vue](file:///home/lantum/Desktop/Projects/webui/components/ai/ChatEmptyState.vue) | Empty chat session landing with suggested prompts. |
+| [ ] | **ChatProgressSteps** | [ai/ChatProgressSteps.vue](file:///home/lantum/Desktop/Projects/webui/components/ai/ChatProgressSteps.vue) | Animated multi-step progress indicator for long-running AI operations. |
+| [ ] | **DiscussionDropdown** | [ai/DiscussionDropdown.vue](file:///home/lantum/Desktop/Projects/webui/components/ai/DiscussionDropdown.vue) | Conversation session selection and management dropdown. |
+| [ ] | **ChatMarkdownBlock** | [ai/blocks/ChatMarkdownBlock.vue](file:///home/lantum/Desktop/Projects/webui/components/ai/blocks/ChatMarkdownBlock.vue) | Renders AI markdown response safely via `useMarkdown`. |
+| [ ] | **ChatChartBlock** | [ai/blocks/ChatChartBlock.vue](file:///home/lantum/Desktop/Projects/webui/components/ai/blocks/ChatChartBlock.vue) | Renders AI-generated chart data inline in chat. |
+| [ ] | **ChatTableBlock** | [ai/blocks/ChatTableBlock.vue](file:///home/lantum/Desktop/Projects/webui/components/ai/blocks/ChatTableBlock.vue) | Renders tabular AI result data inline in chat. |
+| [ ] | **ChatKpiBlock** | [ai/blocks/ChatKpiBlock.vue](file:///home/lantum/Desktop/Projects/webui/components/ai/blocks/ChatKpiBlock.vue) | Renders KPI metrics returned by AI inline in chat. |
+| [ ] | **ChatListBlock** | [ai/blocks/ChatListBlock.vue](file:///home/lantum/Desktop/Projects/webui/components/ai/blocks/ChatListBlock.vue) | Renders AI list responses inline in chat. |
+| [ ] | **ChatTimelineBlock** | [ai/blocks/ChatTimelineBlock.vue](file:///home/lantum/Desktop/Projects/webui/components/ai/blocks/ChatTimelineBlock.vue) | Renders timeline/event-sequence AI results inline. |
+| [ ] | **ChatComparisonBlock** | [ai/blocks/ChatComparisonBlock.vue](file:///home/lantum/Desktop/Projects/webui/components/ai/blocks/ChatComparisonBlock.vue) | Side-by-side comparison result block from AI. |
+| [ ] | **ChatCalloutBlock** | [ai/blocks/ChatCalloutBlock.vue](file:///home/lantum/Desktop/Projects/webui/components/ai/blocks/ChatCalloutBlock.vue) | Styled callout/alert block from AI (tip, warning, info). |
+| [ ] | **ChatProgressBlock** | [ai/blocks/ChatProgressBlock.vue](file:///home/lantum/Desktop/Projects/webui/components/ai/blocks/ChatProgressBlock.vue) | Progress steps block shown as part of AI structured response. |
+| [ ] | **ChatQuestionBlock** | [ai/blocks/ChatQuestionBlock.vue](file:///home/lantum/Desktop/Projects/webui/components/ai/blocks/ChatQuestionBlock.vue) | AI clarification question block with interactive answer options. |
+| [ ] | **ChatProposedActionBlock** | [ai/blocks/ChatProposedActionBlock.vue](file:///home/lantum/Desktop/Projects/webui/components/ai/blocks/ChatProposedActionBlock.vue) | AI-proposed action with accept/reject confirmation UI. |
+| [ ] | **ChatQuickActionsBlock** | [ai/blocks/ChatQuickActionsBlock.vue](file:///home/lantum/Desktop/Projects/webui/components/ai/blocks/ChatQuickActionsBlock.vue) | Pill-style quick action suggestion chips from AI. |
+| [ ] | **ChatImportReviewBlock** | [ai/blocks/ChatImportReviewBlock.vue](file:///home/lantum/Desktop/Projects/webui/components/ai/blocks/ChatImportReviewBlock.vue) | AI import review result rendered inline with accept/edit flow. |
+| [ ] | **ChatCanvasBlock** | [ai/blocks/ChatCanvasBlock.vue](file:///home/lantum/Desktop/Projects/webui/components/ai/blocks/ChatCanvasBlock.vue) | Triggers canvas panel with AI-generated visual artifact payload. |
+
+### 3.12 Onboarding, Auth & Admin Domain
+| Status | Component | File | Description |
+| :---: | :--- | :--- | :--- |
+| [ ] | **OnboardingWizard** | [onboarding/OnboardingWizard.vue](file:///home/lantum/Desktop/Projects/webui/components/onboarding/OnboardingWizard.vue) | Animated horizontal step carousel for new user setup flow. |
+| [ ] | **OnboardingEmptyState** | [onboarding/OnboardingEmptyState.vue](file:///home/lantum/Desktop/Projects/webui/components/onboarding/OnboardingEmptyState.vue) | Empty state with onboarding prompt for first-time users. |
+| [ ] | **DashboardOnboarding** | [onboarding/DashboardOnboarding.vue](file:///home/lantum/Desktop/Projects/webui/components/onboarding/DashboardOnboarding.vue) | Dashboard-embedded onboarding task checklist. |
+| [ ] | **LoginCard** | [LoginCard.vue](file:///home/lantum/Desktop/Projects/webui/components/LoginCard.vue) | Login form card: email, password, social login section, forgot password. |
+| [ ] | **RegisterCard** | [RegisterCard.vue](file:///home/lantum/Desktop/Projects/webui/components/RegisterCard.vue) | Registration form card: name, email, password, confirm password. |
+| [ ] | **FinancialPositionView** | [financial-position/FinancialPositionView.vue](file:///home/lantum/Desktop/Projects/webui/components/financial-position/FinancialPositionView.vue) | Net worth / financial position summary with asset and liability breakdown. |
+| [ ] | **FinancialPositionDrill** | [financial-position/FinancialPositionDrill.vue](file:///home/lantum/Desktop/Projects/webui/components/financial-position/FinancialPositionDrill.vue) | Drill-down panel into a specific financial position category. |
+| [ ] | **UserDetail** | [admin/UserDetail.vue](file:///home/lantum/Desktop/Projects/webui/components/admin/UserDetail.vue) | Admin panel user profile viewer and account management actions. |
+| [ ] | **OutreachComposer** | [admin/OutreachComposer.vue](file:///home/lantum/Desktop/Projects/webui/components/admin/OutreachComposer.vue) | Admin tool for composing and sending user outreach messages. |
+| [ ] | **TipsSection** | [TipsSection.vue](file:///home/lantum/Desktop/Projects/webui/components/TipsSection.vue) | Contextual in-app tips and hints panel. |
+
+
+---
+
+## ▸ Layer 4: Layouts, Navigation & Pages
+
+> **Macro-level application structure**: This layer encompasses both the structural scaffolding (layouts, navigation chrome) and the routed page views themselves. It defines how the entire application is organized and accessed.
+>
+> - **4.A–4.C**: Layout shells and navigation components
+> - **4.D–4.Z**: Routed page views and their orchestration
+
+---
+
+### 4.A Navigation Components
+
+> Navigation chrome components used within layout shells. These are **composite components** (Layer 2 conceptually) but are documented here due to their structural role in the application frame.
+
+| Status | Component | File | Description |
+| :---: | :--- | :--- | :--- |
+| [ ] | **TNavbar** | [TNavbar.vue](file:///home/lantum/Desktop/Projects/webui/components/TNavbar.vue) | Top navigation bar (52px fixed). Contains: hamburger menu (mobile), add transaction button, language selector, theme selector, notification bell, info/learning button, and user avatar with dropdown. Responsive to mobile/tablet/desktop breakpoints. |
+| [ ] | **TSidebar** | [TSidebar.vue](file:///home/lantum/Desktop/Projects/webui/components/TSidebar.vue) | Main application sidebar navigation. Features: collapsible rail mode (desktop), mobile drawer with overlay, hierarchical nav items with sub-menus, extension slots, active route highlighting, branded logo header. Width: 300px expanded / 80px rail / 280px mobile. |
+
+---
+
+### 4.B Layout Shells
+
+> Framework-level layout components that wrap page content and define structural regions (header, sidebar, main content area, footer).
+
+| Status | Layout | File | Purpose & Structure |
+| :---: | :--- | :--- | :--- |
+| [ ] | **default** | [layouts/default.vue](file:///home/lantum/Desktop/Projects/webui/layouts/default.vue) | Minimal pass-through layout. Pure slot rendering with no chrome. Used for landing pages or custom full-viewport experiences. |
+| [ ] | **dashboard** | [layouts/dashboard.vue](file:///home/lantum/Desktop/Projects/webui/layouts/dashboard.vue) | Main authenticated application shell. Structure: `TSidebar` (left, responsive collapse) + `TNavbar` (top fixed) + main content area (with rounded card container) + `NotificationsContainer` + `LearningModal`. Viewport: 100vh with scroll-within-content-area pattern. Provides `learningModal` context injection for child components. |
+| [ ] | **auth** | [layouts/auth.vue](file:///home/lantum/Desktop/Projects/webui/layouts/auth.vue) | Authentication pages layout (login, register). Structure: full-viewport split-screen → marketing carousel (left, desktop only) + form slot (right, centered). Includes floating theme toggle button (top-right) and copyright footer. Background: decorative floating documents SVG with dark mode inversion. |
+| [ ] | **onboarding** | [layouts/onboarding.vue](file:///home/lantum/Desktop/Projects/webui/layouts/onboarding.vue) | First-time user setup wizard layout. Structure: centered card with radial gradient brand background, logo header, theme toggle (top-right), and wizard slot. Max-width: 800px. Responsive padding adjustments for mobile. |
+| [ ] | **admin** | [layouts/admin.vue](file:///home/lantum/Desktop/Projects/webui/layouts/admin.vue) | Administrative panel layout. Minimal shell: slot + `NotificationsContainer`. Background: `$bg-gray`. No sidebar or navbar; admin pages control their own structure. User authentication check on mount. |
+
+---
+
+### 4.C Layout Architecture & Behavior
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Application Layout Hierarchy                                        │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│  ┌───────────────────────────────────────────────────────────┐     │
+│  │ dashboard.vue (main app shell)                            │     │
+│  │ ┌───────────┬───────────────────────────────────────────┐ │     │
+│  │ │ TSidebar  │ TNavbar (fixed top, 52px)                 │ │     │
+│  │ │ (300/80px)│───────────────────────────────────────────│ │     │
+│  │ │           │ Main Content Area (rounded card)          │ │     │
+│  │ │  Primary  │ ┌─────────────────────────────────────┐   │ │     │
+│  │ │  Nav      │ │  <NuxtPage /> (route slot)          │   │ │     │
+│  │ │           │ │  - Dashboard pages                  │   │ │     │
+│  │ │  - Home   │ │  - Transactions                     │   │ │     │
+│  │ │  - Txns   │ │  - Wallets                          │   │ │     │
+│  │ │  - Wallet │ │  - Budgets                          │   │ │     │
+│  │ │  - Budget │ │  - Reports                          │   │ │     │
+│  │ │  - Report │ │  - Settings                         │   │ │     │
+│  │ │  - AI     │ └─────────────────────────────────────┘   │ │     │
+│  │ │           │ NotificationsContainer (toast/banner)     │ │     │
+│  │ │  Footer   │ LearningModal (contextual help)           │ │     │
+│  │ │  - Prefs  │                                           │ │     │
+│  │ │  - Help   │                                           │ │     │
+│  │ └───────────┴───────────────────────────────────────────┘ │     │
+│  └───────────────────────────────────────────────────────────┘     │
+│                                                                     │
+│  ┌───────────────────────────────────────────────────────────┐     │
+│  │ auth.vue (authentication shell)                           │     │
+│  │ ┌─────────────────────┬─────────────────────────────────┐ │     │
+│  │ │ AuthCarousel        │ Form Slot                       │ │     │
+│  │ │ (marketing content, │ ┌─────────────────────────────┐ │ │     │
+│  │ │  desktop only)      │ │  LoginCard / RegisterCard   │ │ │     │
+│  │ │                     │ │  - Social login buttons     │ │ │     │
+│  │ │  - Hero images      │ │  - Email/password fields    │ │ │     │
+│  │ │  - Feature bullets  │ │  - Auth footer links        │ │ │     │
+│  │ │  - Auto-rotating    │ └─────────────────────────────┘ │ │     │
+│  │ └─────────────────────┴─────────────────────────────────┘ │     │
+│  │ ThemeToggleButton (top-right)                             │     │
+│  │ Copyright footer                                          │     │
+│  └───────────────────────────────────────────────────────────┘     │
+│                                                                     │
+│  ┌───────────────────────────────────────────────────────────┐     │
+│  │ onboarding.vue (first-time setup)                         │     │
+│  │         ThemeToggleButton (top-right)                     │     │
+│  │ ┌─────────────────────────────────────────────────────┐   │     │
+│  │ │            Logo (centered)                          │   │     │
+│  │ │ ┌─────────────────────────────────────────────────┐ │   │     │
+│  │ │ │  OnboardingWizard (slot)                        │ │   │     │
+│  │ │ │  - Step 1: Welcome                              │ │   │     │
+│  │ │ │  - Step 2: Create first wallet                  │ │   │     │
+│  │ │ │  - Step 3: Set up categories                    │ │   │     │
+│  │ │ │  - Step 4: Complete                             │ │   │     │
+│  │ │ └─────────────────────────────────────────────────┘ │   │     │
+│  │ └─────────────────────────────────────────────────────┘   │     │
+│  │         (radial gradient brand background)                │     │
+│  └───────────────────────────────────────────────────────────┘     │
+│                                                                     │
+│  ┌───────────────────────────────────────────────────────────┐     │
+│  │ admin.vue (administrative panel)                          │     │
+│  │ ┌─────────────────────────────────────────────────────┐   │     │
+│  │ │  Admin pages control their own structure            │   │     │
+│  │ │  (no enforced navigation chrome)                    │   │     │
+│  │ │  - User management                                  │   │     │
+│  │ │  - System analytics                                 │   │     │
+│  │ │  - Outreach composer                                │   │     │
+│  │ └─────────────────────────────────────────────────────┘   │     │
+│  │ NotificationsContainer                                    │     │
+│  └───────────────────────────────────────────────────────────┘     │
+│                                                                     │
+│  ┌───────────────────────────────────────────────────────────┐     │
+│  │ default.vue (pass-through)                                │     │
+│  │ ┌─────────────────────────────────────────────────────┐   │     │
+│  │ │  <slot /> (pure pass-through, no chrome)            │   │     │
+│  │ └─────────────────────────────────────────────────────┘   │     │
+│  └───────────────────────────────────────────────────────────┘     │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+### 4.D Key Layout Characteristics
+
+#### **Responsive Breakpoints Usage**
+All layouts respect the global breakpoint scale:
+- `$breakpoint-sm` (640px) — Mobile phone landscape
+- `$breakpoint-md` (768px) — Tablet portrait (sidebar collapses to mobile drawer)
+- `$breakpoint-lg` (1024px) — Desktop (auth carousel visible)
+- `$breakpoint-xl` (1280px) — Wide desktop
+- `$breakpoint-2xl` (1536px) — Ultra-wide
+
+#### **Sidebar Behavior (dashboard layout)**
+- **Desktop (≥768px)**: Persistent sidebar, toggles between 300px expanded ↔ 80px rail
+- **Mobile (<768px)**: Drawer overlay mode, hidden by default, hamburger menu trigger in navbar
+- State managed via `useSidebar()` composable with localStorage persistence
+
+#### **Content Scroll Patterns**
+- **dashboard**: Fixed navbar + sidebar, scroll contained within `.dashboard-content` card
+- **auth**: Full-page scroll (marketing content may exceed viewport)
+- **onboarding**: Centered card, scroll within wizard steps if needed
+- **admin**: Full-page scroll, no viewport constraints
+- **default**: No enforced scroll structure
+
+#### **Theme & Dark Mode Support**
+All layouts support seamless theme switching via:
+- Global CSS custom property updates (`--color-*` tokens)
+- `useTheme()` composable state management
+- `ThemeToggleButton` or `ThemeSelector` widget placement
+- Dark mode adjustments for background SVGs and overlays (e.g., auth layout inverts decorative elements)
+
+#### **Global Context Providers**
+- **dashboard.vue** provides `learningModal` injection for triggering contextual help modals
+- All layouts (except default) fetch and verify user authentication on mount
+- **dashboard** and **admin** render `NotificationsContainer` for toast/banner notifications
+
+---
+
+### 4.E Migration Notes for Layouts
+
+When modernizing layouts:
+
+1. **Slot API Standardization**: Ensure all layouts expose documented, named slots for extensibility (header, sidebar-footer, content-actions, etc.)
+2. **Layout Transition Animations**: Implement view transitions API support for smoother route changes within layouts
+3. **Accessibility Landmarks**: Add ARIA `role` attributes (`banner`, `navigation`, `main`, `complementary`, `contentinfo`) to layout regions
+4. **Responsive Container Queries**: Migrate from viewport-based media queries to container queries for sidebar/content areas where appropriate
+5. **Skeleton UI States**: Add built-in loading skeletons at layout level for initial page hydration
+6. **Persistent Layout State**: Ensure sidebar collapse state, theme, and language preferences sync across tabs via `localStorage` + `BroadcastChannel`
+
+---
+
+### 4.F Pages & Routes (View Entrypoints)
+
+> Top-level routed views combining layouts, domain components, and page-level state management. These are the user-facing screens accessed via URLs.
+
+---
+
+#### 4.F.1 Public & Landing Routes
+
+| Status | Route | File | Layout | Middleware | Description |
+| :---: | :--- | :--- | :--- | :--- | :--- |
+| [ ] | `/` | [index.vue](file:///home/lantum/Desktop/Projects/webui/pages/index.vue) | default | none | **Landing redirect**: Authenticated users → resolved landing path (home/dashboard); unauthenticated → `/login`. Shows loading spinner with logo during redirect. |
+| [ ] | `/login` | [login.vue](file:///home/lantum/Desktop/Projects/webui/pages/login.vue) | auth | guest | **Login page**: Email/password form, social OAuth buttons (Google etc.), remember me checkbox, forgot password link, redirect to register. Form validation, loading states, error handling. |
+| [ ] | `/register` | [register.vue](file:///home/lantum/Desktop/Projects/webui/pages/register.vue) | auth | guest | **Registration page**: Contact, first name, last name, password fields. Email verification code input. Social OAuth option. Password strength validation. Success redirects to onboarding. |
+| [ ] | `/auth/[driver]/callback` | [auth/[driver]/callback.vue](file:///home/lantum/Desktop/Projects/webui/pages/auth/[driver]/callback.vue) | default | none | **OAuth callback handler**: Processes OAuth provider callback (Google, etc.). Exchanges code for tokens, creates session, redirects to dashboard or shows error. |
+
+---
+
+#### 4.F.B Onboarding Flow
+
+| Status | Route | File | Layout | Middleware | Description |
+| :---: | :--- | :--- | :--- | :--- | :--- |
+| [ ] | `/onboarding` | [onboarding.vue](file:///home/lantum/Desktop/Projects/webui/pages/onboarding.vue) | onboarding | auth | **Onboarding wizard**: Multi-step setup flow (language, currency, first wallet, categories). Progress bar indicator. Step validation. Completion redirects to dashboard. Skippable for quick start. |
+
+---
+
+#### 4.F.C Dashboard & Home
+
+| Status | Route | File | Layout | Middleware | Description |
+| :---: | :--- | :--- | :--- | :--- | :--- |
+| [ ] | `/home` | [home.vue](file:///home/lantum/Desktop/Projects/webui/pages/home.vue) | dashboard | auth | **AI-first landing page**: Full-viewport `ChatExperience` in landing mode. Personalized greeting, financial snapshot, suggested prompts. Alternative entry point to `/dashboard`. |
+| [ ] | `/dashboard` | [dashboard/index.vue](file:///home/lantum/Desktop/Projects/webui/pages/dashboard/index.vue) | dashboard | auth | **Main dashboard**: `DashboardAgentHero`, conditional onboarding wizard, `TDashboardTopCard` with filters, `DashboardKPIs`, `CategoryBreakdown`, `RecentTransactions`, `QuickInsights`. Empty state for first-time users. Data refresh on mount. |
+
+---
+
+#### 4.F.D Transaction Management
+
+| Status | Route | File | Layout | Middleware | Description |
+| :---: | :--- | :--- | :--- | :--- | :--- |
+| [ ] | `/transactions` | [transactions/index.vue](file:///home/lantum/Desktop/Projects/webui/pages/transactions/index.vue) | dashboard | auth | **Transactions list page**: Renders `TransactionsContentSection` orchestrating table/card view toggle, filters panel, search, pagination, bulk actions. View mode persistence. |
+| [ ] | `/transactions/new` | [transactions/new.vue](file:///home/lantum/Desktop/Projects/webui/pages/transactions/new.vue) | dashboard | auth | **Create transaction page**: Full-page `TransactionFormSection` with type tabs (Expense/Income/Transfer). Form submission handler with API error handling. Success redirects to `/transactions`. |
+| [ ] | `/transactions/edit/[id]` | [transactions/edit/[id].vue](file:///home/lantum/Desktop/Projects/webui/pages/transactions/edit/[id].vue) | dashboard | auth | **Edit transaction page**: Fetches existing transaction by ID, pre-populates `TransactionFormSection`. Update handler. Delete action. Cancel returns to `/transactions`. |
+
+---
+
+#### 4.F.E Wallet Management
+
+| Status | Route | File | Layout | Middleware | Description |
+| :---: | :--- | :--- | :--- | :--- | :--- |
+| [ ] | `/wallets` | [wallets.vue](file:///home/lantum/Desktop/Projects/webui/pages/wallets.vue) | dashboard | auth | **Wallets page**: `ContentTopCard` with add button, `WalletsStatsStrip` aggregate metrics, inline `WalletForm` (create/edit), `ContentListView` with table/card toggle. Empty state onboarding. Sidebar tips section. |
+
+---
+
+#### 4.F.F Budget Management
+
+| Status | Route | File | Layout | Middleware | Description |
+| :---: | :--- | :--- | :--- | :--- | :--- |
+| [ ] | `/budgets` | [budgets/index.vue](file:///home/lantum/Desktop/Projects/webui/pages/budgets/index.vue) | dashboard | auth | **Budgets list page**: `ContentTopCard` with add button, inline `BudgetForm` with educational sidebar ("How budgets work"), grid of `BudgetCard` components showing progress bars, status chips, period labels. Empty state. |
+| [ ] | `/budgets/[id]` | [budgets/[id].vue](file:///home/lantum/Desktop/Projects/webui/pages/budgets/[id].vue) | dashboard | auth | **Budget detail page**: Back navigation to `/budgets`, budget summary card with status, progress bar, period, target scope pills. Transaction breakdown table filtered by budget criteria. Sparkline trends. Edit/delete actions. |
+
+---
+
+#### 4.F.G Category & Group Management
+
+| Status | Route | File | Layout | Middleware | Description |
+| :---: | :--- | :--- | :--- | :--- | :--- |
+| [ ] | `/categories` | [categories/index.vue](file:///home/lantum/Desktop/Projects/webui/pages/categories/index.vue) | dashboard | auth | **Categories page**: `ContentTopCard`, inline `CategoryForm` (name, type, icon, color, parent group), `ContentListView` with income/expense filtering. Grouped display by parent. Empty state. Tips sidebar. |
+| [ ] | `/groups` | [groups.vue](file:///home/lantum/Desktop/Projects/webui/pages/groups.vue) | dashboard | auth | **Groups page**: `ContentTopCard`, inline `GroupForm`, `ContentListView` for category groups. Hierarchical category organization. Empty state. Tips sidebar. |
+
+---
+
+#### 4.F.H Party Management
+
+| Status | Route | File | Layout | Middleware | Description |
+| :---: | :--- | :--- | :--- | :--- | :--- |
+| [ ] | `/parties` | [parties.vue](file:///home/lantum/Desktop/Projects/webui/pages/parties.vue) | dashboard | auth | **Parties page** (payees/payers): `ContentTopCard`, `PartiesStatsStrip` (top payees/payers), inline `PartiesForm` (name, email, phone, notes), `ContentListView` with search. Transaction history per party. Empty state. Tips sidebar. |
+
+---
+
+#### 4.F.I Reports & Analytics
+
+| Status | Route | File | Layout | Middleware | Description |
+| :---: | :--- | :--- | :--- | :--- | :--- |
+| [ ] | `/reports` | [reports.vue](file:///home/lantum/Desktop/Projects/webui/pages/reports.vue) | dashboard | auth | **Reports & analytics hub**: `ReportsTabs` (Charts, Categories, Calendar, Flow), `PeriodControl` with preset/custom ranges + compare toggle + month review. Tab content: `ChartsTab` (cashflow line + cumulative area), `CategoriesTab` (donut + ranking), `CalendarTab` (heatmap), `FlowTab` (Sankey). Currency conversion warnings. Transaction sweep truncation notices. |
+
+---
+
+#### 4.F.J Holdings & Investments
+
+| Status | Route | File | Layout | Middleware | Description |
+| :---: | :--- | :--- | :--- | :--- | :--- |
+| [ ] | `/holdings` | [holdings/index.vue](file:///home/lantum/Desktop/Projects/webui/pages/holdings/index.vue) | dashboard | auth | **Holdings page** (assets: crypto, stocks, property): Header with refresh prices button, total value summary in brand surface card, holdings list with icons, quantities, current values. Inline `HoldingForm`. Price refresh API calls. Empty state. |
+
+---
+
+#### 4.F.K Financial Position
+
+| Status | Route | File | Layout | Middleware | Description |
+| :---: | :--- | :--- | :--- | :--- | :--- |
+| [ ] | `/financial-position` | [financial-position/index.vue](file:///home/lantum/Desktop/Projects/webui/pages/financial-position/index.vue) | dashboard | auth | **Net worth / financial position page**: Renders `FinancialPositionView` showing assets vs liabilities breakdown, net worth calculation, trend over time, drill-down modals per category. |
+
+---
+
+#### 4.F.L Reminders
+
+| Status | Route | File | Layout | Middleware | Description |
+| :---: | :--- | :--- | :--- | :--- | :--- |
+| [ ] | `/reminders` | [reminders.vue](file:///home/lantum/Desktop/Projects/webui/pages/reminders.vue) | dashboard | auth | **Reminders page**: `ContentTopCard`, inline `ReminderForm` (title, due date, frequency, linked transaction), list of upcoming/past reminders with status badges, snooze/complete actions. Empty state. |
+
+---
+
+#### 4.F.M Notifications
+
+| Status | Route | File | Layout | Middleware | Description |
+| :---: | :--- | :--- | :--- | :--- | :--- |
+| [ ] | `/notifications` | [notifications.vue](file:///home/lantum/Desktop/Projects/webui/pages/notifications.vue) | dashboard | auth | **Notifications center**: Page header with bell icon and "mark all read" action. Chronological notification list (unread bold, read muted). Notification type icons, timestamps, action buttons. Empty state. Pagination. |
+
+---
+
+#### 4.F.N Imports
+
+| Status | Route | File | Layout | Middleware | Description |
+| :---: | :--- | :--- | :--- | :--- | :--- |
+| [ ] | `/imports` | [imports.vue](file:///home/lantum/Desktop/Projects/webui/pages/imports.vue) | dashboard | auth | **Import & document parsing page**: `ImportUpload` (drag-and-drop zone, file type carousel), `ImportAnalyzing` progress state, `SuggestionReviewTable` for AI-parsed transactions, `ImportConfirmDialog` before commit. Past `ImportSessionsList`. Status polling during analysis. Error handling. |
+
+---
+
+#### 4.F.O AI Assistant
+
+| Status | Route | File | Layout | Middleware | Description |
+| :---: | :--- | :--- | :--- | :--- | :--- |
+| [ ] | `/assistant` | [assistant.vue](file:///home/lantum/Desktop/Projects/webui/pages/assistant.vue) | dashboard | auth | **AI financial assistant page**: Full-page `ChatExperience` in full mode. Conversation history sidebar, message composer, result renderer with block types (markdown, chart, table, KPI, timeline). Canvas panel for artifacts. Streaming responses. |
+
+---
+
+#### 4.F.P Settings
+
+| Status | Route | File | Layout | Middleware | Description |
+| :---: | :--- | :--- | :--- | :--- | :--- |
+| [ ] | `/settings` | [settings.vue](file:///home/lantum/Desktop/Projects/webui/pages/settings.vue) | dashboard | auth | **Settings page**: Tabbed interface (`TTabs`) with sections: Account (`SettingsAccount` - profile, password), General (`SettingsGeneral` - app config), Wallets (`SettingsWallets`), Display (`SettingsDisplay` - theme, language, currency), Notifications (`SettingsNotifications`), Integrations (`ExtensionSlot` for plugins), Connections (`SettingsConnections` - third-party services). Modal for password change. |
+
+---
+
+#### 4.F.Q Admin Panel
+
+| Status | Route | File | Layout | Middleware | Description |
+| :---: | :--- | :--- | :--- | :--- | :--- |
+| [ ] | `/admin` | [admin/index.vue](file:///home/lantum/Desktop/Projects/webui/pages/admin/index.vue) | admin | auth (admin role) | **Admin console**: Sidebar rail navigation with sections (Users, Analytics, Outreach, System). User management table (`UserDetail` drill-down), system health metrics, `OutreachComposer` for bulk messaging. Admin badge. Exit button to return to main app. |
+
+---
+
+#### 4.F.R Development & Testing
+
+| Status | Route | File | Layout | Middleware | Description |
+| :---: | :--- | :--- | :--- | :--- | :--- |
+| [ ] | `/test-kit` | [test-kit.vue](file:///home/lantum/Desktop/Projects/webui/pages/test-kit.vue) | dashboard (likely) | none (dev only) | **Component testing playground**: Isolated environment for testing UI components, design tokens, and interactions. Development-only route, should not be accessible in production. |
+
+---
+
+#### 4.F.S Route Architecture Summary
+
+```
+Application Route Tree (Nuxt file-based routing)
+├─ / (index.vue)
+│  └─ Landing redirect logic
+│
+├─ Authentication (auth layout, guest middleware)
+│  ├─ /login
+│  ├─ /register
+│  └─ /auth/[driver]/callback (OAuth)
+│
+├─ Onboarding (onboarding layout, auth middleware)
+│  └─ /onboarding
+│
+├─ Main Application (dashboard layout, auth middleware)
+│  ├─ Dashboard & Overview
+│  │  ├─ /home (AI-first landing)
+│  │  └─ /dashboard (traditional dashboard)
+│  │
+│  ├─ Core Financial Operations
+│  │  ├─ /transactions
+│  │  │  ├─ /transactions/new
+│  │  │  └─ /transactions/edit/[id]
+│  │  ├─ /wallets
+│  │  ├─ /budgets
+│  │  │  └─ /budgets/[id]
+│  │  └─ /categories
+│  │
+│  ├─ Supporting Entities
+│  │  ├─ /parties
+│  │  ├─ /groups
+│  │  ├─ /reminders
+│  │  └─ /holdings
+│  │
+│  ├─ Reporting & Analysis
+│  │  ├─ /reports
+│  │  └─ /financial-position
+│  │
+│  ├─ Data & AI
+│  │  ├─ /imports
+│  │  └─ /assistant
+│  │
+│  └─ System
+│     ├─ /notifications
+│     └─ /settings
+│
+├─ Administration (admin layout, admin middleware)
+│  └─ /admin
+│
+└─ Development
+   └─ /test-kit (dev only)
+```
+
+---
+
+#### 4.F.T Middleware & Meta Conventions
+
+All pages use `definePageMeta()` to declare:
+
+| Meta Property | Values | Purpose |
+| :--- | :--- | :--- |
+| `layout` | `default`, `auth`, `onboarding`, `dashboard`, `admin` | Specifies which layout shell wraps the page |
+| `middleware` | `auth`, `guest`, `admin` | Route guards: `auth` requires authentication, `guest` redirects authenticated users, `admin` requires admin role |
+
+**Common patterns:**
+- Authenticated pages: `definePageMeta({ layout: 'dashboard', middleware: 'auth' })`
+- Public pages: `definePageMeta({ layout: 'auth', middleware: 'guest' })`
+- Admin pages: `definePageMeta({ layout: 'admin', middleware: ['auth', 'admin'] })`
+
+---
+
+#### 4.F.U Page-Level State Management Patterns
+
+Most pages follow a consistent state orchestration pattern:
+
+1. **Data Fetching**: `onMounted()` or `watchEffect()` triggers API calls via composables (`useTransactions`, `useWallets`, `useBudgets`, etc.)
+2. **Loading States**: Boolean flags (`isLoading`, `isSubmitting`) control skeleton rendering via `ComponentLoader` or inline spinners
+3. **Error Handling**: API errors captured in `error` refs, displayed as alert banners or inline error messages
+4. **Form Management**: Inline form toggle (`showForm` ref), edit vs create mode discrimination (`editingItem` ref), validation state
+5. **CRUD Orchestration**: Create/update/delete handlers call API services, update local state, trigger shared data refresh, show notifications
+6. **Empty States**: Conditional rendering of `OnboardingEmptyState` or `EmptyState` when no data exists
+7. **Responsive Behavior**: Viewport detection (`useViewport()`, `isTabletOrBelow`) adjusts layout (hide tips sidebar, switch to card view, collapse forms)
+
+---
+
+#### 4.F.V Migration Notes for Layer 5
+
+When modernizing pages:
+
+1. **Data Fetching Standardization**: Migrate to Nuxt 3 `useFetch` / `useAsyncData` with built-in SSR hydration and automatic error/pending states
+2. **Route Transitions**: Implement View Transitions API for smoother page navigation (especially in dashboard shell)
+3. **Page-Level Loading Skeletons**: Replace boolean loading flags with structured skeleton states matching page content layout
+4. **Breadcrumb Navigation**: Add consistent breadcrumb trails to detail pages (budget detail, transaction edit, etc.)
+5. **Deep Link Support**: Ensure all pages support direct URL access with proper state restoration (filter params, search queries, view modes)
+6. **Meta Tags & SEO**: Add page-specific `<title>`, `<meta description>`, and Open Graph tags via `useHead()` composable
+7. **Keyboard Shortcuts**: Implement consistent keyboard navigation (e.g., `Cmd+K` for command palette, `N` for new transaction)
+8. **Optimistic UI Updates**: Add optimistic mutations for create/update/delete actions to improve perceived performance
+9. **Infinite Scroll / Virtual Lists**: For large datasets (transactions, notifications), replace pagination with virtual scrolling
+10. **Progressive Enhancement**: Ensure core functionality works without JavaScript (form submissions, navigation) before hydration
+
+
+
+---
+---
+
+## 📊 Complete Architecture Summary
+
+### Component Inventory by Layer
+
+| Layer | Category | Count | Description |
+| :---: | :--- | ---: | :--- |
+| **0** | **Design Tokens & Utilities** | **68** | CSS variables, design scales, formatters, composables |
+| | Color Tokens | 28 | Brand, semantic, financial domain colors |
+| | Elevation & Shadow | 9 | Material-inspired shadow scale |
+| | Design Scales | 31+ | Spacing, radius, typography, z-index, motion |
+| | Global CSS Utilities | — | Surfaces, form styles, layout utilities |
+| | Headless Utilities | 8 | colors.ts, currency.ts, 6 composables |
+| **1** | **Base Components (Atoms)** | **21** | Styled foundational UI building blocks |
+| | Interactive | 11 | TButton, TDropdown, TDropdownItem, SearchInput, etc. |
+| | Display | 6 | TCard, TAvatar, Logo, LoadingSkeleton, EmptyState |
+| | Navigation | 2 | HamburgerMenu, ViewToggle |
+| | Utility | 2 | ComponentLoader, ExtensionSlot |
+| **2** | **Composite Components (Molecules)** | **29** | Reusable complex patterns |
+| | Forms & Inputs | 4 | SearchableDropdown, IconPicker, ThemeSelector, LanguageSelector |
+| | Layout & Display | 8 | ContentCard, ContentCardGrid, ContentTable, ContentListView, etc. |
+| | Modals & Overlays | 3 | ConfirmModal, StatsFilterModal, NotificationBell |
+| | Data Visualization | 5 | SparkLine, KpiCard, 4 chart components |
+| | Auth & Onboarding | 2 | AuthCarousel, AuthSocialLogin |
+| | Settings & Config | 2 | CollapsibleSection, PeriodControl |
+| | Other | 5 | TTableComponent, NotificationsContainer, DescriptorRenderer, etc. |
+| **3** | **Domain Components** | **90+** | Business logic & data-bound components |
+| | Transactions | 10 | TransactionForm, TransactionsSpreadsheet, filters, etc. |
+| | Wallets | 5 | WalletCard, WalletForm, WalletDetailPanel, etc. |
+| | Budgets | 2 | BudgetCard, BudgetForm |
+| | Categories & Groups | 2 | CategoryForm, GroupForm |
+| | Parties | 4 | PartyCard, PartiesForm, PartyDetailPanel, PartiesStatsStrip |
+| | Holdings & Reminders | 2 | HoldingForm, ReminderForm |
+| | Imports | 5 | ImportUpload, ImportAnalyzing, SuggestionReviewTable, etc. |
+| | Dashboard | 7 | DashboardKPIs, RecentTransactions, CategoryBreakdown, etc. |
+| | Reports | 19 | CashflowHero, MonthInReview, CalendarHeatmap, Sankey, etc. |
+| | Settings | 7 | SettingsAccount, SettingsDisplay, PasswordModal, etc. |
+| | AI / Chat | 24 | ChatExperience, ChatComposer, 16 block renderers, etc. |
+| | Financial Position | 2 | FinancialPositionView, FinancialPositionDrill |
+| | Auth & Onboarding | 5 | LoginCard, RegisterCard, OnboardingWizard, etc. |
+| | Admin | 2 | UserDetail, OutreachComposer |
+| **4** | **Layouts & Pages** | **33** | Application structure & routes |
+| | Navigation Components | 2 | TNavbar, TSidebar |
+| | Layout Shells | 5 | default, dashboard, auth, onboarding, admin |
+| | Page Routes | 26 | Landing, auth, dashboard, transactions, reports, etc. |
+
+**Total Tracked Components: 241+**
+
+---
+
+### Architecture Alignment with Industry Standards
+
+| Aspect | Theoretical Best Practice | Trakli Current State | Migration Priority |
+| :--- | :--- | :--- | :---: |
+| **Headless Primitives** | Dedicated layer (Radix UI, Ark UI, React Aria) | ❌ Not implemented | 🔴 High |
+| **Design Tokens** | Platform-agnostic JSON/YAML exported to CSS | ✓ SCSS variables (platform-specific) | 🟡 Medium |
+| **Component Variants** | CVA (Class Variance Authority) + Tailwind | ❌ Manual SCSS classes | 🔴 High |
+| **Styled Atoms** | Composition of headless + styled wrapper | ⚠️ Monolithic styled components | 🔴 High |
+| **Type Safety** | Full TypeScript coverage | ⚠️ Mixed .vue/.ts, incomplete types | 🟡 Medium |
+| **Accessibility** | WCAG AA/AAA compliance, automated testing | ⚠️ Manual ARIA, no automated tests | 🟡 Medium |
+| **Dark Mode** | CSS custom properties + theme tokens | ✓ CSS variables + theme composable | 🟢 Low |
+| **Responsive Design** | Container queries + viewport breakpoints | ⚠️ Media queries only | 🟡 Medium |
+| **State Management** | Composables + shared state | ✓ Composables pattern | 🟢 Low |
+| **Documentation** | Storybook / Histoire with stories | ❌ No component workshop | 🟡 Medium |
+
+---
+
+### Recommended Migration Path
+
+#### Phase 1: Foundation Modernization (Weeks 1-4)
+1. **Adopt Style Dictionary** for platform-agnostic design tokens
+2. **Integrate CVA** (Class Variance Authority) for type-safe component variants
+3. **Add Tailwind CSS** as utility-first styling layer
+4. **Set up Histoire** or Storybook for component development
+
+#### Phase 2: Headless Primitive Layer (Weeks 5-10)
+5. **Install Reka UI** (Radix for Vue) as headless primitive foundation
+6. **Refactor Layer 1 atoms** to compose Reka UI primitives with styled wrappers
+   - Priority order: TDropdown → TButton → TTabs → SearchInput
+7. **Establish component composition patterns** (primitive + wrapper convention)
+
+#### Phase 3: Component Library Refinement (Weeks 11-16)
+8. **Migrate SCSS to Tailwind + CVA** for all Layer 1 and Layer 2 components
+9. **Add automated accessibility testing** (axe-core, Playwright)
+10. **Implement container queries** for responsive components
+11. **Complete TypeScript coverage** for all components and props
+
+#### Phase 4: Distribution & Developer Experience (Weeks 17-20)
+12. **Set up component CLI** (shadcn/ui-style copy-paste model)
+13. **Create comprehensive Storybook documentation**
+14. **Add visual regression testing** (Chromatic or Percy)
+15. **Publish as npm package** (optional, for multi-repo usage)
+
+---
+
+### Key Files for Migration Attention
+
+#### Immediate Refactor Candidates (High Impact)
+```
+components/TButton.vue           → Compose Reka UI Button + CVA variants
+components/TDropdown.vue         → Replace with Reka UI DropdownMenu
+components/SearchableDropdown.vue → Compose Reka UI Combobox
+components/TTabs.vue             → Replace with Reka UI Tabs
+assets/scss/_variables.scss      → Convert to Style Dictionary tokens
+```
+
+#### Token System Overhaul
+```
+assets/scss/_variables.scss → tokens/colors.json
+                            → tokens/spacing.json
+                            → tokens/typography.json
+                            → tokens/motion.json
+                            (Style Dictionary build → CSS custom properties)
+```
+
+#### Test Coverage Priority
+```
+1. Layer 1 atoms (TButton, TCard, TDropdown)
+2. Layer 2 forms (SearchableDropdown, IconPicker)
+3. Layer 3 critical paths (TransactionForm, WalletForm, BudgetForm)
+4. Layer 4 layouts (dashboard.vue, auth.vue)
+```
+
+---
+
+## 🎯 Migration Tracking
+
+Use the checkboxes throughout this document to track component-by-component migration progress:
+
+- `[ ]` → Component pending migration
+- `[x]` → Component migrated to modern headless/token-driven architecture
+
+**Migration Progress**: 0 / 241+ components (0%)
+
+---
+
+**Document Version**: 1.0  
+**Last Updated**: 2026-08-31  
+**Maintained by**: Trakli Engineering Team
+
diff --git a/assets/bulbIcon.svg b/assets/bulbIcon.svg
new file mode 100644
index 0000000..0aac5d9
--- /dev/null
+++ b/assets/bulbIcon.svg
@@ -0,0 +1,23 @@
+<svg width="236" height="235" viewBox="0 0 236 235" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M90.1945 51.92C89.2086 52.0385 88.2116 51.8204 87.3652 51.3011C86.5189 50.7819 85.8727 49.9919 85.5316 49.0594L68.1961 6.37855C67.9763 5.83759 67.8653 5.25864 67.8692 4.67476C67.8732 4.09088 67.9922 3.51351 68.2193 2.9756C68.4464 2.43769 68.7772 1.94979 69.1929 1.53974C69.6086 1.12968 70.101 0.805507 70.642 0.585743C71.1829 0.365979 71.7618 0.254912 72.3457 0.258892C72.9296 0.262872 73.507 0.381825 74.0449 0.608943C74.5828 0.836061 75.0707 1.1669 75.4808 1.58258C75.8908 1.99826 76.215 2.49065 76.4348 3.0316L93.7703 45.7124C94.1885 46.795 94.1685 47.998 93.7146 49.0661C93.2606 50.1342 92.4084 50.9835 91.3387 51.4337C90.9835 51.6516 90.5979 51.8155 90.1945 51.92Z" fill="#FF9500"/>
+<path d="M231.339 169.95C230.562 170.046 229.773 169.937 229.05 169.636L185.626 151.299C184.605 150.796 183.814 149.922 183.416 148.856C183.018 147.789 183.043 146.611 183.485 145.562C183.928 144.513 184.754 143.673 185.795 143.213C186.837 142.753 188.014 142.709 189.087 143.089L232.512 161.369C233.437 161.738 234.213 162.406 234.714 163.266C235.216 164.127 235.415 165.131 235.28 166.118C235.145 167.105 234.684 168.019 233.97 168.713C233.256 169.408 232.329 169.843 231.339 169.95Z" fill="#FF9500"/>
+<path d="M47.8283 92.4555C47.0511 92.5493 46.2628 92.4409 45.5398 92.1408L3.88882 74.5764C2.80389 74.1174 1.94572 73.2462 1.50313 72.1545C1.06054 71.0628 1.06979 69.8399 1.52879 68.755C1.9878 67.6701 2.85899 66.8119 3.95071 66.3693C5.04244 65.9268 6.26529 65.936 7.35022 66.395L48.8867 83.9307C49.8122 84.2997 50.5875 84.9678 51.0893 85.8285C51.591 86.6892 51.7903 87.6931 51.6554 88.6802C51.5205 89.6673 51.0591 90.5809 50.3448 91.2754C49.6305 91.97 48.7044 92.4055 47.7139 92.5127L47.8283 92.4555Z" fill="#FF9500"/>
+<path d="M188 94.3144C186.868 94.5932 185.671 94.4148 184.67 93.8178C183.668 93.2208 182.942 92.2533 182.649 91.1248C182.355 89.9962 182.518 88.7975 183.102 87.7883C183.686 86.779 184.644 86.0404 185.769 85.7324L229.88 67.9392C230.421 67.7195 231 67.6084 231.584 67.6124C232.168 67.6164 232.745 67.7353 233.283 67.9624C233.821 68.1896 234.309 68.5204 234.719 68.9361C235.129 69.3518 235.453 69.8441 235.673 70.3851C235.893 70.9261 236.004 71.505 236 72.0889C235.996 72.6728 235.877 73.2501 235.65 73.788C235.422 74.326 235.092 74.8139 234.676 75.2239C234.26 75.634 233.768 75.9581 233.227 76.1779L189.23 94.0283C188.838 94.1881 188.423 94.2847 188 94.3144Z" fill="#FF9500"/>
+<path d="M5.63365 168.377C4.55253 168.518 3.45692 168.259 2.55367 167.649C1.65042 167.038 1.00201 166.118 0.730933 165.061C0.459856 164.005 0.584835 162.886 1.08227 161.916C1.57971 160.946 2.41519 160.191 3.43095 159.795L44.7959 143.003C45.3368 142.783 45.9158 142.672 46.4997 142.676C47.0836 142.68 47.6609 142.799 48.1988 143.026C48.7367 143.253 49.2247 143.584 49.6347 144C50.0448 144.415 50.3689 144.908 50.5887 145.449C50.8084 145.99 50.9195 146.568 50.9155 147.152C50.9115 147.736 50.7926 148.314 50.5655 148.852C50.3384 149.389 50.0075 149.877 49.5918 150.287C49.1762 150.697 48.6838 151.022 48.1428 151.241L6.7493 168.062C6.39465 168.22 6.01883 168.326 5.63365 168.377Z" fill="#FF9500"/>
+<path d="M148.036 53.2357C147.259 53.342 146.468 53.2332 145.748 52.9211C144.684 52.4665 143.841 51.6117 143.403 50.5411C142.964 49.4706 142.963 48.2704 143.402 47.1998L161.71 3.86104C161.866 3.2429 162.154 2.66563 162.553 2.16865C162.952 1.67166 163.454 1.26663 164.024 0.981149C164.594 0.695667 165.219 0.536453 165.856 0.514378C166.493 0.492303 167.128 0.607887 167.716 0.853232C168.304 1.09858 168.833 1.46792 169.266 1.93608C169.698 2.40424 170.025 2.96021 170.223 3.56608C170.422 4.17195 170.487 4.81346 170.415 5.44689C170.343 6.08032 170.135 6.69077 169.806 7.2366L151.498 50.5753C151.204 51.2829 150.73 51.9011 150.122 52.3679C149.515 52.8348 148.796 53.134 148.036 53.2357Z" fill="#FF9500"/>
+<path d="M71.2857 234.973C70.506 235.059 69.7173 234.94 68.9972 234.629C67.933 234.174 67.089 233.321 66.6453 232.252C66.2017 231.183 66.1936 229.983 66.6228 228.908L84.1872 187.114C84.6901 186.093 85.5642 185.302 86.6307 184.905C87.6972 184.507 88.8755 184.531 89.9244 184.974C90.9733 185.416 91.8135 186.242 92.2732 187.283C92.7329 188.325 92.7773 189.502 92.3973 190.575L74.8329 232.169C74.5399 232.907 74.0577 233.554 73.435 234.046C72.8123 234.538 72.071 234.858 71.2857 234.973Z" fill="#FF9500"/>
+<path d="M170.436 97.0611C164.501 83.1818 153.338 72.1983 139.365 66.4881C125.392 60.7779 109.732 60.8004 95.775 66.5509C81.8182 72.3013 70.6876 83.317 64.7925 97.2133C58.8975 111.11 58.7124 126.769 64.2772 140.8C73.0308 162.055 95.7443 169.407 113.509 181.908C118.973 185.77 126.639 205.422 126.639 205.422L171.666 186.885C171.666 186.885 163.284 167.519 164.428 160.939C168.204 139.713 179.189 118.459 170.436 97.0611Z" fill="#FF9500"/>
+<path opacity="0.5" d="M170.436 97.0611C164.501 83.1818 153.338 72.1983 139.365 66.4881C125.392 60.7779 109.732 60.8004 95.775 66.5509C81.8182 72.3013 70.6876 83.317 64.7925 97.2133C58.8975 111.11 58.7124 126.769 64.2772 140.8C73.0308 162.055 95.7443 169.407 113.509 181.908C118.973 185.77 126.639 205.422 126.639 205.422L171.666 186.885C171.666 186.885 163.284 167.519 164.428 160.939C168.204 139.713 179.189 118.459 170.436 97.0611Z" fill="white"/>
+<path d="M165.315 208.111L146.091 216.035C142.665 217.436 138.824 217.421 135.408 215.995C131.993 214.569 129.282 211.847 127.869 208.426L172.896 189.975C174.279 193.386 174.258 197.207 172.839 200.603C171.419 204 168.715 206.698 165.315 208.111Z" fill="#263238"/>
+<path d="M161.224 225.619C158.43 226.747 155.304 226.728 152.525 225.566C149.745 224.403 147.536 222.192 146.377 219.411L167.431 210.829C168.542 213.616 168.514 216.727 167.353 219.494C166.191 222.26 163.991 224.459 161.224 225.619Z" fill="#263238"/>
+<path opacity="0.5" d="M161.224 225.619C158.43 226.747 155.304 226.728 152.525 225.566C149.745 224.403 147.536 222.192 146.377 219.411L167.431 210.829C168.542 213.616 168.514 216.727 167.353 219.494C166.191 222.26 163.991 224.459 161.224 225.619Z" fill="white"/>
+<g opacity="0.7">
+<path d="M165.315 208.111L146.091 216.035C142.665 217.436 138.824 217.421 135.408 215.995C131.993 214.569 129.282 211.847 127.869 208.426L172.896 189.975C174.279 193.386 174.258 197.207 172.839 200.603C171.419 204 168.715 206.698 165.315 208.111Z" fill="white"/>
+</g>
+<path opacity="0.3" d="M160.137 89.8517C173.725 123.321 168.175 169.778 142.315 180.305C116.455 190.832 78.2367 156.877 66.4795 127.87C59.2135 110.019 74.3177 87.0196 100.178 76.378C126.038 65.7364 152.9 71.944 160.137 89.8517Z" fill="white"/>
+<path opacity="0.4" d="M156.876 129.101C159.301 135.066 159.902 141.617 158.604 147.924C157.305 154.232 154.165 160.012 149.581 164.535C144.996 169.057 139.174 172.118 132.849 173.331C126.525 174.544 119.983 173.854 114.051 171.348C108.119 168.842 103.063 164.634 99.5234 159.254C95.9836 153.875 94.1188 147.566 94.1649 141.127C94.2109 134.687 96.1658 128.406 99.7821 123.078C103.398 117.75 108.514 113.614 114.481 111.193C118.44 109.583 122.678 108.769 126.952 108.798C131.226 108.826 135.453 109.697 139.39 111.36C143.327 113.023 146.898 115.446 149.899 118.49C152.899 121.534 155.27 125.14 156.876 129.101Z" fill="white"/>
+<path opacity="0.4" d="M150.783 140.457C155.532 152.157 147.493 159.566 135.793 164.315C124.093 169.064 113.166 169.35 108.417 157.65C103.668 145.95 111.764 138.712 123.464 133.964C135.164 129.215 146.006 128.757 150.783 140.457Z" fill="white"/>
+<path d="M115.453 144.586L112.782 145.896L139.441 200.241L142.112 198.931L115.453 144.586Z" fill="#FF9500"/>
+<path d="M139.942 134.857L137.113 135.78L155.889 193.326L158.717 192.403L139.942 134.857Z" fill="#FF9500"/>
+<path d="M135.478 162.655L118.715 155.561L119.859 152.843L133.905 158.765L139.741 144.977L142.458 146.121L135.478 162.655Z" fill="#FF9500"/>
+</svg>
diff --git a/assets/flags/de.svg b/assets/flags/de.svg
new file mode 100644
index 0000000..295d13e
--- /dev/null
+++ b/assets/flags/de.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#D80027" d="M0 0h513v342H0z"/><path d="M0 0h513v114H0z"/><path fill="#FFDA44" d="M0 228h513v114H0z"/></svg>
\ No newline at end of file
diff --git a/assets/flags/es.svg b/assets/flags/es.svg
new file mode 100644
index 0000000..e143324
--- /dev/null
+++ b/assets/flags/es.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.5 15"><path fill="#FFF" d="M0 0h22.5v15H0V0z"/><path fill="#D03433" d="M0 0h22.5v4H0V0zm0 11h22.5v4H0v-4z"/><path fill="#FBCA46" d="M0 4h22.5v7H0V4z"/><path fill="#FFF" d="M7.8 7h1v.5h-1V7z"/><path fill="#A41517" d="M7.2 8.5c0 .3.3.5.6.5s.6-.2.6-.5L8.5 7H7.1l.1 1.5zM6.6 7c0-.3.2-.5.4-.5h1.5c.3 0 .5.2.5.4V7l-.1 1.5c-.1.6-.5 1-1.1 1-.6 0-1-.4-1.1-1L6.6 7z"/><path fill="#A41517" d="M6.8 7.5h2V8h-.5l-.5 1-.5-1h-.5v-.5zM5.3 6h1v3.5h-1V6zm4 0h1v3.5h-1V6zm-2.5-.5c0-.3.2-.5.5-.5h1c.3 0 .5.2.5.5v.2c0 .2-.1.3-.3.3H7c-.1 0-.2-.1-.2-.2v-.3z"/></svg>
\ No newline at end of file
diff --git a/assets/flags/fr.svg b/assets/flags/fr.svg
new file mode 100644
index 0000000..ec311d7
--- /dev/null
+++ b/assets/flags/fr.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#FFF" d="M0 0h513v342H0z"/><path fill="#00318A" d="M0 0h171v342H0z"/><path fill="#D80027" d="M342 0h171v342H342z"/></svg>
\ No newline at end of file
diff --git a/assets/flags/gb.svg b/assets/flags/gb.svg
new file mode 100644
index 0000000..91f11d8
--- /dev/null
+++ b/assets/flags/gb.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><g fill="#FFF"><path d="M0 0h513v341.3H0V0z"/><path d="M311.7 230 513 341.3v-31.5L369.3 230h-57.6zM200.3 111.3 0 0v31.5l143.7 79.8h56.6z"/></g><g fill="#0052B4"><path d="M393.8 230 513 295.7V230H393.8zm-82.1 0L513 341.3v-31.5L369.3 230h-57.6zm146.9 111.3-147-81.7v81.7h147zM90.3 230 0 280.2V230h90.3zm110 14.2v97.2H25.5l174.8-97.2zM118.2 111.3 0 45.6v65.7h118.2zm82.1 0L0 0v31.5l143.7 79.8h56.6zM53.4 0l147 81.7V0h-147zM421.7 111.3 513 61.1v50.2h-91.3zm-110-14.2V0h174.9L311.7 97.1z"/></g><g fill="#D80027"><path d="M288 0h-64v138.7H0v64h224v138.7h64V202.7h224v-64H288V0z"/><path d="M311.7 230 513 341.3v-31.5L369.3 230h-57.6zM143.7 230 0 309.9v31.5L200.3 230h-56.6zM200.3 111.3 0 0v31.5l143.7 79.8h56.6zM368.3 111.3 513 31.5V0L311.7 111.3h56.6z"/></g></svg>
\ No newline at end of file
diff --git a/assets/flags/it.svg b/assets/flags/it.svg
new file mode 100644
index 0000000..be3a5df
--- /dev/null
+++ b/assets/flags/it.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20">
+  <rect width="10" height="20" fill="#009246"/>
+  <rect x="10" width="10" height="20" fill="#FFFFFF"/>
+  <rect x="20" width="10" height="20" fill="#CE2B37"/>
+</svg>
diff --git a/assets/flags/pt.svg b/assets/flags/pt.svg
new file mode 100644
index 0000000..99b5fe6
--- /dev/null
+++ b/assets/flags/pt.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20">
+  <rect width="30" height="20" fill="#006600"/>
+  <rect x="12" width="18" height="20" fill="#FF0000"/>
+  <circle cx="12" cy="10" r="4" fill="#FFCC00"/>
+</svg>
diff --git a/assets/floating-docs-man.svg b/assets/floating-docs-man.svg
new file mode 100644
index 0000000..2061a27
--- /dev/null
+++ b/assets/floating-docs-man.svg
@@ -0,0 +1,88 @@
+<svg width="526" height="498" viewBox="0 0 526 498" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M209.968 66.3218H189.318V70.8207V97.3033V101.816H233.115V70.8207H211.43L209.968 66.3218Z" fill="#92E3A9"/>
+<path d="M209.968 133.862H189.318V138.361V164.844V169.357H233.115V138.361H211.43L209.968 133.862Z" fill="#92E3A9"/>
+<path d="M209.968 201.403H189.318V205.902V232.384V236.897H233.115V205.902H211.43L209.968 201.403Z" fill="#92E3A9"/>
+<path d="M209.968 268.943H189.318V273.442V299.925V304.438H233.115V273.442H211.43L209.968 268.943Z" fill="#92E3A9"/>
+<path d="M209.968 336.484H189.318V340.997V367.466V371.979H233.115V340.997H211.43L209.968 336.484Z" fill="#92E3A9"/>
+<path d="M342.355 66.3218H321.705V70.8207V97.3033V101.816H365.516V70.8207H343.831L342.355 66.3218Z" fill="#92E3A9"/>
+<path d="M428.258 70.8207L426.782 66.3218H406.133V70.8207V97.3033V101.816H449.93V70.8207H428.258Z" fill="#92E3A9"/>
+<path d="M342.355 133.862H321.705V138.361V164.844V169.357H365.516V138.361H343.831L342.355 133.862Z" fill="#92E3A9"/>
+<path d="M426.782 201.403H406.133V205.902V232.384V236.897H449.93V205.902H428.258L426.782 201.403Z" fill="#92E3A9"/>
+<path d="M426.782 133.862H406.133V138.361V164.844V169.357H449.93V138.361H428.258L426.782 133.862Z" fill="#92E3A9"/>
+<path d="M342.355 201.403H321.705V205.902V232.384V236.897H365.516V205.902H343.831L342.355 201.403Z" fill="#92E3A9"/>
+<path d="M342.355 268.943H321.705V273.442V299.925V304.438H365.516V273.442H343.831L342.355 268.943Z" fill="#92E3A9"/>
+<path d="M426.782 268.943H406.133V273.442V299.925V304.438H449.93V273.442H428.258L426.782 268.943Z" fill="#92E3A9"/>
+<path d="M342.355 336.484H321.705V340.997V367.466V371.979H365.516V340.997H343.831L342.355 336.484Z" fill="#92E3A9"/>
+<path d="M426.782 336.484H406.133V340.997V367.466V371.979H449.93V340.997H428.258L426.782 336.484Z" fill="#92E3A9"/>
+<g opacity="0.5">
+<path d="M209.968 66.3218H189.318V70.8207V97.3033V101.816H233.115V70.8207H211.43L209.968 66.3218Z" fill="white"/>
+<path d="M209.968 133.862H189.318V138.361V164.844V169.357H233.115V138.361H211.43L209.968 133.862Z" fill="white"/>
+<path d="M209.968 201.403H189.318V205.902V232.384V236.897H233.115V205.902H211.43L209.968 201.403Z" fill="white"/>
+<path d="M209.968 268.943H189.318V273.442V299.925V304.438H233.115V273.442H211.43L209.968 268.943Z" fill="white"/>
+<path d="M209.968 336.484H189.318V340.997V367.466V371.979H233.115V340.997H211.43L209.968 336.484Z" fill="white"/>
+<path d="M342.355 66.3218H321.705V70.8207V97.3033V101.816H365.516V70.8207H343.831L342.355 66.3218Z" fill="white"/>
+<path d="M428.258 70.8207L426.782 66.3218H406.133V70.8207V97.3033V101.816H449.93V70.8207H428.258Z" fill="white"/>
+<path d="M342.355 133.862H321.705V138.361V164.844V169.357H365.516V138.361H343.831L342.355 133.862Z" fill="white"/>
+<path d="M426.782 201.403H406.133V205.902V232.384V236.897H449.93V205.902H428.258L426.782 201.403Z" fill="white"/>
+<path d="M426.782 133.862H406.133V138.361V164.844V169.357H449.93V138.361H428.258L426.782 133.862Z" fill="white"/>
+<path d="M342.355 201.403H321.705V205.902V232.384V236.897H365.516V205.902H343.831L342.355 201.403Z" fill="white"/>
+<path d="M342.355 268.943H321.705V273.442V299.925V304.438H365.516V273.442H343.831L342.355 268.943Z" fill="white"/>
+<path d="M426.782 268.943H406.133V273.442V299.925V304.438H449.93V273.442H428.258L426.782 268.943Z" fill="white"/>
+<path d="M342.355 336.484H321.705V340.997V367.466V371.979H365.516V340.997H343.831L342.355 336.484Z" fill="white"/>
+<path d="M426.782 336.484H406.133V340.997V367.466V371.979H449.93V340.997H428.258L426.782 336.484Z" fill="white"/>
+</g>
+<path d="M213.059 497.381C252.642 497.381 284.73 490.709 284.73 482.479C284.73 474.249 252.642 467.577 213.059 467.577C173.477 467.577 141.389 474.249 141.389 482.479C141.389 490.709 173.477 497.381 213.059 497.381Z" fill="#92E3A9"/>
+<path opacity="0.5" d="M213.059 497.381C252.642 497.381 284.73 490.709 284.73 482.479C284.73 474.249 252.642 467.577 213.059 467.577C173.477 467.577 141.389 474.249 141.389 482.479C141.389 490.709 173.477 497.381 213.059 497.381Z" fill="white"/>
+<path d="M266.169 166.05C266.169 166.05 265.885 158.457 265.885 150.566C265.885 142.676 269.972 140.93 272.598 140.93C273.872 140.891 275.147 140.986 276.401 141.214C276.401 141.214 277.82 128.654 287.216 126.61C296.611 124.566 303.579 132.159 306.787 129.534C309.994 126.908 299.194 127.192 303.863 123.403C308.532 119.613 321.986 119.301 323.448 133.337C324.91 147.373 315.259 153.788 310.59 154.952C305.921 156.116 299.478 147.643 293.347 147.941C287.216 148.239 288.096 155.25 284.292 158.173C280.489 161.097 277.565 159.593 277.565 163.425C277.565 167.256 275.819 169.272 271.136 169.556C266.452 169.839 266.169 166.05 266.169 166.05Z" fill="#263238" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M309.465 143.456C309.465 143.456 314.021 145.557 319.967 141.71C325.914 137.864 322.053 129.122 321.017 128.767" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M282.885 141.356C282.885 141.356 284.985 132.258 292.323 132.613C299.66 132.968 298.624 139.61 304.925 141.71" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M279.052 147.061C279.052 147.061 274.794 142.803 271.019 143.811C267.244 144.819 268.919 151.503 269.274 153.604C269.628 155.704 266.818 161.651 266.818 161.651" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M180.377 171.032L190.936 208.726L207.839 208.016L197.975 169.981L180.377 171.032Z" fill="#263238" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M208.194 241.482L203.61 243.937C203.61 243.937 197.933 226.324 195.52 219.64C193.107 212.955 192.341 210.131 192.341 210.131H192.455C193.66 209.434 194.611 208.369 195.165 207.091C195.719 205.813 195.849 204.392 195.534 203.035L194.725 199.444C194.848 199.772 195.046 200.067 195.304 200.304C195.561 200.542 195.87 200.716 196.207 200.813C196.543 200.909 196.898 200.926 197.242 200.861C197.586 200.795 197.91 200.651 198.188 200.438C199.366 199.671 198.117 191.922 196.698 189.084C195.279 186.246 190.581 188.332 189.176 189.084C188.142 189.662 187.187 190.373 186.338 191.199L185.288 186.941C185.288 186.941 190.567 186.586 191.632 186.586C192.696 186.586 196.556 183.067 194.796 182.712C193.037 182.357 183.173 182.357 180.704 184.472C178.234 186.586 182.463 195.045 183.173 196.805C183.883 198.564 187.431 216.532 188.85 221.456C190.269 226.381 193.789 262.614 195.946 265.835C198.103 269.057 213.771 254.155 213.771 254.155L208.194 241.482Z" fill="white" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M187.541 193.739C187.541 193.739 192.494 189.481 196.95 190.531" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M189.033 197.926C190.098 196.839 191.367 195.974 192.768 195.379C194.168 194.785 195.672 194.474 197.194 194.463" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M245.716 196.152C245.716 196.152 239.188 202.382 236.364 207.662C233.539 212.941 206.787 241.482 206.787 241.482L214.536 267.893L233.554 251.686C233.554 251.686 244.113 231.263 246.937 218.235C249.761 205.206 252.259 195.911 245.716 196.152Z" fill="#92E3A9" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M304.161 203.163C304.161 203.163 283.412 201.403 271.732 199.657C260.052 197.912 247.179 194.69 245.718 196.152C244.256 197.613 235.088 243.511 226.147 261.89C214.31 286.229 206.164 299.13 206.164 299.13C214.372 295.977 223.292 295.157 231.937 296.76C246.541 299.386 269.277 314.912 269.277 314.912C269.277 314.912 280.205 291.395 291.885 267.737C303.565 244.079 309.71 208.712 309.71 206.711C309.71 204.71 305.907 202.865 304.161 203.163Z" fill="#92E3A9" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M295.276 202.354C288.18 201.687 278.472 200.665 271.731 199.657C270.738 199.515 269.758 199.345 268.765 199.189C267.365 203.106 266.492 207.191 266.168 211.337C265.586 219.853 270.553 229.163 274.357 229.163C278.16 229.163 289.84 213.395 292.466 209.01C293.765 206.962 294.715 204.713 295.276 202.354Z" fill="white" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M276.101 183.294C276.101 183.294 273.191 198.195 270.85 204.326C268.508 210.457 271.133 221.272 274.057 221.57C276.981 221.868 288.675 206.668 288.675 206.668L292.762 189.723C292.762 189.723 277.861 185.635 276.101 183.294Z" fill="white" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M306.812 203.787C308.37 204.032 309.85 204.637 311.133 205.553C312.417 206.469 313.469 207.672 314.206 209.066C317.045 214.005 345.202 260.84 345.202 260.84L326.17 265.778L299.759 242.177C299.759 242.177 293.429 234.073 300.468 219.64" fill="#92E3A9"/>
+<path d="M306.812 203.787C308.37 204.032 309.85 204.637 311.133 205.553C312.417 206.469 313.469 207.672 314.206 209.066C317.045 214.005 345.202 260.84 345.202 260.84L326.17 265.778L299.759 242.177C299.759 242.177 293.429 234.073 300.468 219.64" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M251.862 248.166C251.862 248.166 245.178 254.155 244.766 255.56C244.355 256.965 248.286 262.656 249.35 262.954C250.415 263.252 250.77 260.116 250.401 258.697C250.032 257.278 249.35 255.163 249.35 255.163L253.211 250.593C253.211 250.593 254.687 248.876 251.862 248.166Z" fill="white" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M337.794 249.571C333.532 248.002 329.005 247.284 324.467 247.456C317.073 247.811 301.575 251.714 291.712 252.04C281.848 252.367 282.203 252.75 276.923 251.331C271.644 249.912 260.73 241.481 258.261 241.481C255.791 241.481 248.397 253.8 249.461 255.205C250.526 256.61 259.311 263.309 261.78 263.721C264.25 264.132 269.529 260.882 269.529 260.882C269.529 260.882 295.941 264.757 308.274 266.176C320.607 267.595 335.75 269.341 341.725 265.466C347.7 261.592 345.897 253.091 337.794 249.571Z" fill="white" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M258.205 245.697L251.506 256.27" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M263.13 249.571L255.381 260.144" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M266.662 254.155L259.963 262.259" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M269.473 260.84L268.764 258.384L265.244 260.499" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M311.17 164.886C311.17 164.886 314.094 162.843 314.676 168.392C315.258 173.941 313.257 177.744 311.752 178.624C310.248 179.504 308.545 178.028 308.545 178.028L311.17 164.886Z" fill="white" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M269.12 165.766C269.12 165.766 264.451 159.621 261.825 164.886C259.2 170.152 261.229 176.865 264.749 179.49C268.268 182.116 271.76 178.326 271.76 178.326C271.76 178.326 279.353 193.81 285.782 194.392C292.211 194.974 304.231 190.305 308.574 181.25C312.917 172.195 312.364 157.577 312.945 152.028C313.527 146.479 307.396 139.468 296 139.468C292.788 139.39 289.599 140.031 286.667 141.345C283.735 142.659 281.134 144.612 279.055 147.061C279.487 147.286 279.863 147.607 280.151 148C280.44 148.393 280.634 148.847 280.719 149.328C280.805 149.808 280.778 150.301 280.642 150.769C280.506 151.238 280.264 151.668 279.934 152.028C277.593 155.25 274.683 157.294 273.803 159.337C272.924 161.381 273.803 163.425 272.625 165.184C271.448 166.944 269.12 165.766 269.12 165.766Z" fill="white" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M295.587 156.442C295.332 158.074 294.509 159.281 293.757 159.195C293.004 159.11 292.579 157.648 292.834 156.016C293.09 154.384 293.913 153.178 294.665 153.263C295.417 153.348 295.843 154.796 295.587 156.442Z" fill="#263238"/>
+<path d="M307.269 159.607C307.014 161.253 306.19 162.445 305.438 162.36C304.686 162.275 304.26 160.827 304.516 159.181C304.771 157.535 305.594 156.343 306.347 156.428C307.099 156.513 307.525 158.017 307.269 159.607Z" fill="#263238"/>
+<path d="M289.809 149.587C289.809 149.587 293.456 145.329 298.168 147.657" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M305.252 151.092C305.252 151.092 310.602 149.161 311.681 156.456" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M302.894 156.655C302.894 156.655 300.964 160.302 301.39 161.367C301.815 162.431 307.18 163.723 305.463 165.227C303.745 166.731 299.459 168.449 298.168 167.583" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M286.816 168.221C286.816 168.221 288.321 173.373 295.176 174.438" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M208.688 296.76C208.688 296.76 200.854 304.58 189.6 316.331C178.345 328.082 149.464 367.721 152.402 381.005C155.34 394.289 227.777 414.286 227.777 414.286L235.597 408.907C235.597 408.907 192.041 376.605 189.103 369.254C186.165 361.902 223.86 337.932 223.86 337.932L265.954 310.966C265.954 310.966 247.106 279.133 208.688 296.76Z" fill="#263238" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M261.541 277.175C261.541 277.175 270.837 292.786 269.858 311.435C268.879 330.083 261.541 346.674 243.432 346.191C225.323 345.709 226.799 318.29 232.674 304.58C238.55 290.87 239.515 272.775 261.541 277.175Z" fill="#263238" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M235.057 286.471C235.057 286.471 224.782 333.944 219.885 343.24C214.989 352.535 206.176 375.044 206.176 375.044L216.948 377.982C216.948 377.982 232.119 356.935 250.228 334.909C268.338 312.882 265.4 283.519 261.483 277.161C257.566 270.803 242.451 271.299 235.057 286.471Z" fill="#263238" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M264.235 295.852C264.235 295.852 256.16 329.615 245.146 343.566" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M227.775 414.215C227.775 414.215 229.194 422.049 226.356 427.427C223.517 432.806 216.563 444.075 221.46 444.557C226.356 445.04 233.211 437.703 238.107 431.784C243.003 425.866 243.486 420.516 246.92 416.173C250.355 411.83 235.652 408.836 235.652 408.836L229.237 412.228L227.775 414.215Z" fill="#92E3A9" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M246.864 416.173C248.028 414.669 247.077 413.335 245.317 412.228C241.913 419.658 237.757 426.72 232.913 433.303C227.79 439.959 223.064 441.818 219.729 442.031C219.629 443.45 220.055 444.43 221.403 444.557C226.3 445.054 233.154 437.703 238.051 431.784C242.947 425.866 243.43 420.573 246.864 416.173Z" fill="white" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M206.232 375.058C200.187 374.265 194.362 372.268 189.103 369.183C181.283 364.301 179.807 364.301 179.807 373.1C179.807 381.899 190.578 386.313 196.454 390.726C202.33 395.14 205.75 397.581 210.15 397.085C214.549 396.588 217.004 377.996 217.004 377.996C217.004 377.996 214.563 373.1 206.232 375.058Z" fill="#92E3A9" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M179.807 373.1C179.807 381.913 190.578 386.313 196.454 390.726C202.33 395.14 205.693 397.525 210.036 397.085C199.775 390.556 198.682 380.054 189.102 369.183C181.283 364.301 179.807 364.301 179.807 373.1Z" fill="white" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M203.55 385.83C201.025 381.023 198.121 376.424 194.865 372.078C192.863 371.306 190.934 370.356 189.103 369.24C181.283 364.357 179.807 364.357 179.807 373.157C179.807 381.956 190.578 386.37 196.454 390.783C202.33 395.197 205.75 397.638 210.15 397.141C211.228 397.028 212.179 395.822 212.988 394.076C210.891 393.511 208.951 392.474 207.315 391.045C205.679 389.616 204.392 387.832 203.55 385.83Z" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M57.5273 220.136C57.5273 219.427 57.6551 218.717 57.726 218.022" stroke="#263238" stroke-miterlimit="10"/>
+<path d="M58.208 213.807C64.475 163.746 88.7682 117.684 126.542 84.2397C164.316 50.7955 212.981 32.2611 263.433 32.1045C313.884 31.9479 362.664 50.18 400.644 83.389C438.625 116.598 463.204 162.509 469.781 212.529" stroke="#263238" stroke-miterlimit="10" stroke-dasharray="2.98 2.98"/>
+<path d="M470.08 214.644C470.165 215.339 470.25 216.063 470.321 216.759" stroke="#263238" stroke-miterlimit="10"/>
+<path d="M85.6 76.2704L67.2354 133.536L139.97 144.549L152.459 91.6831C152.459 91.6831 108.35 88.7453 85.6 76.2704Z" fill="white" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M161.262 39.5552C161.262 39.5552 195.763 43.231 220.727 26.3423C220.727 26.3423 251.552 50.5683 263.303 52.7823C263.303 52.7823 244.953 72.6514 225.865 78.4702C225.822 78.4702 178.832 57.1819 161.262 39.5552Z" fill="white" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M161.262 39.5553C166.327 35.7119 172.121 32.9402 178.292 31.4089C178.922 41.9295 183.083 51.93 190.1 59.7933C190.1 59.7933 168.769 48.2834 161.262 39.5553Z" fill="#263238" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M297.502 63.6678C297.502 63.6678 296.281 67.3436 303.619 73.4604C306.954 76.2988 314.476 77.349 314.476 77.349L334.203 52.6547C334.203 52.6547 301.83 57.0542 297.502 63.6678Z" fill="#263238" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M297.504 63.6678C308.355 59.9262 319.795 58.1854 331.267 58.5302C336.736 58.7967 342.095 60.1705 347.018 62.5685C351.941 64.9665 356.326 68.3388 359.907 72.4812L381.195 46.0411C381.195 46.0411 362.788 29.1666 342.209 29.8904C321.631 30.6142 298.923 57.7923 297.504 63.6678Z" fill="white" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M421.191 77.7889C421.191 77.7889 407.978 112.546 379.111 117.442C379.111 117.442 407.978 151.702 424.129 155.619C424.129 155.619 456.927 140.93 465.74 125.276C465.74 125.276 436.859 108.629 421.191 77.7889Z" fill="white" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M106.15 254.822L118.98 200.452H32.862L31.0312 254.822H106.15Z" fill="#263238" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M42.5294 180.313L42.2598 242.759L106.692 249.301L111.546 182.91L42.5294 180.313Z" fill="white" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.2539 190.688L31.0323 254.822H106.152L101.269 196.79H60.9636L57.2878 189.467L21.2539 190.688Z" fill="#92E3A9" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M429.648 254.822L416.818 200.452H502.936L504.767 254.822H429.648Z" fill="#263238" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M493.27 180.313L493.54 242.759L429.108 249.301L424.254 182.91L493.27 180.313Z" fill="white" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M514.548 190.688L504.77 254.822H429.65L434.533 196.79H474.852L478.514 189.467L514.548 190.688Z" fill="#92E3A9" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/assets/logo.svg b/assets/logo.svg
new file mode 100644
index 0000000..4b02c00
--- /dev/null
+++ b/assets/logo.svg
@@ -0,0 +1,27 @@
+<svg width="384" height="158" viewBox="0 0 384 158" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_49_35868)">
+<path d="M117.537 34.9656V113.284C117.537 116.907 118.364 119.604 120.018 121.415C121.672 123.207 123.818 124.093 126.456 124.093C129.094 124.093 131.141 123.207 132.776 121.435C134.41 119.663 135.236 116.946 135.236 113.284V34.9656H117.537Z" fill="#007845"/>
+<path d="M112.989 34.9656V49.6134H103.46C100.428 49.6134 98.1836 48.944 96.707 47.6052C95.2304 46.2665 94.502 44.5142 94.502 42.3092C94.502 40.1042 95.2698 38.2535 96.8054 36.9344C98.3411 35.6153 100.546 34.9656 103.46 34.9656H112.989Z" fill="#007845"/>
+<path d="M167.622 42.3092C167.622 44.5142 166.874 46.2665 165.358 47.6052C163.842 48.944 161.578 49.6134 158.546 49.6134H139.173V34.9656H158.546C161.617 34.9656 163.901 35.635 165.378 36.9935C166.874 38.3519 167.622 40.1239 167.622 42.3092Z" fill="#007845"/>
+<path d="M158.507 67.9034C158.37 64.5565 157.72 62.0168 156.519 60.3039C155.338 58.5911 153.369 57.7445 150.672 57.7445C145.356 57.7445 142.718 61.4064 142.718 68.7303V114.17C142.718 117.438 143.466 119.919 144.982 121.592C146.498 123.266 148.427 124.093 150.79 124.093C153.152 124.093 155.161 123.266 156.696 121.612C158.251 119.958 159.039 117.477 159.039 114.17V106.57L158.507 67.9034Z" fill="#F3931A"/>
+<path d="M189.988 67.1159C189.988 69.1241 189.299 70.7582 187.94 72.0576C186.562 73.357 185.066 74.0067 183.471 74.0067C182.881 74.0067 181.443 73.6326 179.14 72.8845C176.856 72.156 174.828 71.7819 173.076 71.7819C170.694 71.7819 168.725 72.412 167.209 73.672C165.811 74.8336 165.063 76.2905 163.685 79.2633C162.956 80.8187 162.031 83.0434 161.184 85.8194C161.106 79.854 161.027 73.8885 160.948 67.9034C161.598 66.7812 162.248 65.7575 162.897 64.8321C164.236 62.9618 165.575 61.4458 166.953 60.3039C169.001 58.5911 171.737 57.7445 175.163 57.7445C178.589 57.7445 181.916 58.5911 185.145 60.3039C188.373 62.0168 189.988 64.3006 189.988 67.1159Z" fill="#007845"/>
+<path d="M235.979 114.898C232.041 117.97 228.222 120.273 224.54 121.809C220.858 123.344 216.724 124.112 212.137 124.112C207.943 124.112 204.281 123.285 201.111 121.632C197.942 119.978 195.5 117.733 193.788 114.898C192.075 112.063 191.208 108.992 191.208 105.684C191.208 101.215 192.626 97.4155 195.461 94.2655C198.296 91.1154 202.175 89.0088 207.116 87.926C208.16 87.6897 210.719 87.1582 214.834 86.3116C218.929 85.4847 222.453 84.7169 225.387 84.0081C228.32 83.319 231.49 82.4725 234.916 81.4684C234.719 77.1567 233.852 74.0067 232.317 71.9985C230.781 69.9904 227.611 68.9863 222.788 68.9863C218.634 68.9863 215.523 69.5572 213.436 70.7188C211.349 71.8804 209.558 73.6129 208.061 75.9164C206.565 78.2199 205.502 79.7555 204.892 80.484C204.281 81.2321 202.942 81.5865 200.915 81.5865C199.084 81.5865 197.489 80.9959 196.17 79.8146C194.851 78.6333 194.162 77.137 194.162 75.3061C194.162 72.4316 195.185 69.6557 197.213 66.9387C199.241 64.2218 202.411 61.9971 206.723 60.2449C211.034 58.4926 216.389 57.6067 222.808 57.6067C229.974 57.6067 235.624 58.4533 239.719 60.1464C243.814 61.8396 246.728 64.5171 248.421 68.1791C250.115 71.841 250.961 76.7039 250.961 82.7678C250.961 86.5872 250.961 89.8357 250.922 92.5133C250.902 95.1908 250.863 98.144 250.823 101.412C250.823 104.483 251.335 107.673 252.339 111C253.363 114.327 253.855 116.473 253.855 117.418C253.855 119.092 253.068 120.608 251.493 121.986C249.918 123.364 248.126 124.053 246.138 124.053C244.464 124.053 242.81 123.266 241.176 121.691C239.542 120.116 237.81 117.832 235.979 114.839V114.898ZM234.916 91.2729C232.533 92.1589 229.049 93.0842 224.481 94.0489C219.913 95.0333 216.763 95.7421 215.011 96.1949C213.259 96.6477 211.585 97.5534 209.991 98.8921C208.396 100.231 207.608 102.082 207.608 104.483C207.608 106.885 208.554 109.051 210.424 110.784C212.294 112.516 214.755 113.382 217.767 113.382C220.996 113.382 223.969 112.674 226.706 111.256C229.442 109.839 231.431 108.027 232.71 105.783C234.187 103.322 234.916 99.2465 234.916 93.5961V91.2729Z" fill="#007845"/>
+<path d="M299.688 116.631L285.277 92.9661L276.437 101.333V114.308C276.437 117.458 275.61 119.879 273.956 121.573C272.303 123.266 270.393 124.112 268.247 124.112C265.727 124.112 263.758 123.266 262.321 121.592C260.884 119.919 260.175 117.438 260.175 114.17V44.593C260.175 40.9704 260.864 38.2141 262.262 36.3044C263.66 34.4144 265.648 33.4694 268.247 33.4694C270.846 33.4694 272.755 34.3356 274.232 36.0485C275.709 37.7613 276.437 40.301 276.437 43.648V83.2206L294.786 63.9659C297.05 61.5836 298.783 59.9495 299.984 59.0636C301.185 58.1973 302.642 57.7445 304.354 57.7445C306.382 57.7445 308.075 58.3942 309.434 59.6936C310.792 60.993 311.462 62.6074 311.462 64.5762C311.462 66.9584 309.257 70.1478 304.827 74.1445L296.164 82.0984L312.899 108.401C314.139 110.35 315.025 111.847 315.557 112.851C316.088 113.855 316.364 114.839 316.364 115.745C316.364 118.344 315.655 120.372 314.238 121.868C312.82 123.364 310.95 124.112 308.646 124.112C306.658 124.112 305.122 123.581 304.039 122.498C302.957 121.415 301.5 119.466 299.669 116.631H299.688Z" fill="#007845"/>
+<path d="M317.742 114.17V43.392C317.742 40.1238 318.47 37.6432 319.927 35.9697C321.384 34.2962 323.353 33.4496 325.814 33.4496C328.275 33.4496 330.283 34.2765 331.799 35.9303C333.315 37.5841 334.063 40.0648 334.063 43.3723V114.15C334.063 117.458 333.295 119.938 331.759 121.592C330.224 123.246 328.235 124.073 325.814 124.073C323.392 124.073 321.482 123.207 319.986 121.494C318.49 119.781 317.742 117.32 317.742 114.13V114.17Z" fill="#007845"/>
+<path d="M350.719 50.145C352.905 50.145 354.795 49.4362 356.389 48.0187C357.984 46.6011 358.772 44.6324 358.772 42.132C358.772 39.6316 357.945 37.5644 356.311 36.206C354.677 34.8475 352.806 34.1781 350.7 34.1781C348.593 34.1781 346.585 34.9262 344.931 36.4225C343.277 37.9188 342.45 39.8285 342.45 42.132C342.45 44.6914 343.258 46.6602 344.872 48.058C346.486 49.4559 348.436 50.145 350.7 50.145H350.719Z" fill="#F3931A"/>
+<path d="M350.542 57.7444C348.16 57.7444 346.21 58.5713 344.714 60.2054C343.218 61.8395 342.47 64.2611 342.47 67.4899V114.189C342.47 117.379 343.218 119.84 344.714 121.553C346.21 123.266 348.16 124.132 350.542 124.132C352.924 124.132 354.912 123.285 356.468 121.612C358.023 119.938 358.791 117.458 358.791 114.189V67.0174C358.791 64.1036 358.023 61.8395 356.468 60.2054C354.912 58.5713 352.944 57.7444 350.542 57.7444Z" fill="#007845"/>
+</g>
+<path d="M62.7638 37.7565C67.2037 37.7565 71.645 37.7538 76.0848 37.7591C79.4235 37.7632 81.6806 39.9107 81.6806 43.0977C81.6834 69.0664 81.6834 95.0338 81.6806 121.002C81.6806 124.164 79.4544 126.32 76.1522 126.321C55.2589 126.329 34.3655 126.332 13.4722 126.324C10.1013 126.324 7.89885 124.195 7.89885 120.984C7.89465 95.0593 7.90867 69.1362 7.87501 43.2131C7.8708 40.3922 9.77019 38.3332 12.1115 37.8584C12.6684 37.7457 13.2267 37.7578 13.785 37.7578C18.2726 37.7538 22.7601 37.7565 27.2477 37.7578C27.2589 38.1817 27.2575 38.6069 27.2828 39.0294C27.3796 40.6766 27.8523 41.1273 29.5595 41.1273C39.8364 41.1327 50.1148 41.13 60.3917 41.13C60.5783 41.13 60.7663 41.1353 60.9528 41.1233C62.0849 41.0535 62.5366 40.631 62.6278 39.5552C62.6783 38.9556 62.719 38.356 62.7652 37.7565H62.7638ZM45.1461 119.974C46.6274 118.463 48.0919 116.99 49.5298 115.495C49.8665 115.145 50.0643 115.066 50.4486 115.471C51.7518 116.844 53.1238 118.157 54.4186 119.536C54.7959 119.939 54.9671 119.895 55.3094 119.536C56.6322 118.151 57.9957 116.799 59.32 115.414C59.6342 115.086 59.7969 115.091 60.1153 115.425C61.4382 116.811 62.8101 118.153 64.1372 119.536C64.4725 119.885 64.666 119.9 65.0069 119.542C66.3298 118.156 67.6919 116.804 69.0217 115.424C69.3149 115.119 69.4903 115.048 69.8213 115.405C70.7823 116.441 71.7825 117.444 72.7827 118.446C73.2372 118.902 73.6454 119.409 74.264 119.842C74.264 119.524 74.264 119.304 74.264 119.084C74.264 104.044 74.264 89.003 74.264 73.9624C74.264 66.9444 74.2247 59.9278 74.2836 52.9098C74.3089 49.9159 71.8301 47.8099 69.1676 47.8166C53.1575 47.8502 37.1487 47.8327 21.1385 47.8354C20.7429 47.8354 20.3487 47.8314 19.9559 47.9266C17.4632 48.5249 16.0197 50.3558 16.0197 52.9567C16.0183 74.9926 16.0183 97.0284 16.0183 119.064C16.0183 119.298 16.0183 119.531 16.0183 119.764C16.087 119.798 16.1543 119.831 16.2231 119.865C16.3732 119.672 16.5064 119.464 16.6762 119.29C17.9345 117.998 19.2068 116.72 20.4567 115.421C20.7429 115.123 20.9211 115.095 21.2255 115.41C22.5553 116.791 23.9231 118.137 25.2459 119.523C25.5784 119.872 25.7495 119.975 26.1367 119.563C27.4343 118.186 28.7936 116.862 30.0996 115.491C30.4503 115.123 30.6579 115.09 31.024 115.475C32.3455 116.863 33.709 118.212 35.0347 119.595C35.3433 119.917 35.5158 119.923 35.83 119.593C37.1361 118.222 38.4841 116.889 39.793 115.519C40.1521 115.143 40.3653 115.084 40.7623 115.503C42.1903 117.007 43.6633 118.471 45.1446 119.978L45.1461 119.974Z" fill="#047844"/>
+<path d="M62.7641 37.7565C62.7192 38.356 62.6771 38.957 62.6266 39.5552C62.5355 40.631 62.0838 41.0535 60.9517 41.1233C60.7651 41.1353 60.5786 41.13 60.3906 41.13C50.1137 41.13 39.8353 41.1327 29.5584 41.1273C27.8498 41.1273 27.3784 40.6766 27.2817 39.0294C27.2564 38.6069 27.2578 38.1817 27.2466 37.7578C27.3406 36.8269 27.2045 35.8893 27.3995 34.957C27.8315 32.89 29.7071 31.3635 31.9067 31.3488C32.9812 31.3407 34.0558 31.322 35.1289 31.3555C35.6985 31.3729 35.9313 31.2764 36.0407 30.6392C36.6748 26.9491 39.8746 24.0853 43.7884 23.6923C47.8131 23.2872 50.9385 24.7198 53.0525 28.0544C53.6038 28.9236 53.8788 29.8988 54.0191 30.8954C54.0752 31.2925 54.2519 31.3555 54.6054 31.3515C55.68 31.3381 56.7531 31.3474 57.8277 31.3461C60.6711 31.3461 62.68 33.2334 62.729 35.951C62.7403 36.5533 62.7515 37.1555 62.7613 37.7578L62.7641 37.7565ZM44.9584 31.3448C46.4523 31.3448 47.9449 31.3474 49.4389 31.3448C50.2231 31.3434 50.2357 31.322 49.9902 30.5842C49.5357 29.2201 48.5622 28.3066 47.2239 27.7365C44.372 26.5226 41.0459 27.8331 40.0177 30.5587C39.7469 31.279 39.796 31.3448 40.6167 31.3461C42.063 31.3474 43.5107 31.3461 44.957 31.3461L44.9584 31.3448Z" fill="#FF9500"/>
+<path d="M69.7085 97.1574C69.7085 95.736 69.3469 94.3359 68.655 93.0779C67.9631 91.8198 66.9616 90.7415 65.7369 89.936C64.5121 89.1305 63.1008 88.6218 61.6247 88.454C60.1486 88.2861 58.6519 88.464 57.2638 88.9724C55.8756 89.4808 54.6375 90.3044 53.6563 91.3722C52.6752 92.44 51.9803 93.72 51.6317 95.1017C51.283 96.4835 51.291 97.9256 51.6551 99.3037C52.0191 100.682 52.7282 101.955 53.7212 103.012L56.5973 100.544C56.023 99.9319 55.6129 99.1957 55.4024 98.3987C55.1919 97.6017 55.1872 96.7676 55.3889 95.9685C55.5905 95.1694 55.9924 94.4291 56.5598 93.8116C57.1273 93.194 57.8433 92.7177 58.6461 92.4237C59.449 92.1297 60.3146 92.0268 61.1683 92.1238C62.022 92.2209 62.8382 92.5151 63.5465 92.981C64.2548 93.4468 64.834 94.0704 65.2342 94.798C65.6344 95.5256 65.8434 96.3353 65.8434 97.1574H69.7085Z" fill="#FF9500"/>
+<path d="M60.5422 105.922C62.2534 105.922 63.9305 105.464 65.3835 104.6C66.8366 103.736 68.0076 102.5 68.7641 101.032L65.2973 99.3983C64.8598 100.247 64.1825 100.962 63.3421 101.462C62.5018 101.962 61.5319 102.226 60.5422 102.226V105.922Z" fill="#047844"/>
+<path d="M43.5402 57.8023C50.3675 57.8023 57.196 57.8077 64.0232 57.7903C64.5611 57.789 64.7608 57.9091 64.7355 58.4819C64.6889 59.5246 64.6955 60.5727 64.7355 61.6154C64.7541 62.1281 64.5784 62.2456 64.0924 62.2443C59.2822 62.2282 54.4707 62.2362 49.6605 62.2362C40.771 62.2362 31.8815 62.2282 22.992 62.2469C22.369 62.2483 22.1333 62.1161 22.1732 61.4512C22.2318 60.4539 22.2212 59.4498 22.1772 58.4512C22.1533 57.9024 22.353 57.793 22.8576 57.7943C29.7513 57.809 36.6465 57.805 43.5402 57.805V57.8023Z" fill="#047844"/>
+<path d="M38.0576 73.9852C33.0131 73.9852 27.9686 73.9731 22.9256 73.9999C22.2915 74.0026 22.1316 73.8269 22.161 73.2474C22.2101 72.2455 22.2073 71.2367 22.161 70.2334C22.1344 69.6767 22.3083 69.5212 22.8961 69.5238C28.454 69.5453 34.0119 69.5359 39.5698 69.5359C44.171 69.5359 48.7708 69.548 53.3706 69.5238C53.9682 69.5212 54.1211 69.6915 54.0986 70.2388C54.0551 71.2649 54.0593 72.2937 54.1 73.3199C54.1211 73.8444 53.9625 74.0013 53.4 73.9999C48.2854 73.9798 43.1722 73.9879 38.0576 73.9879V73.9852Z" fill="#047844"/>
+<path d="M33.6473 81.0648C37.1992 81.0648 40.7525 81.0755 44.3044 81.0541C44.8613 81.05 45.0928 81.1587 45.0633 81.7435C45.0128 82.7911 45.0296 83.8441 45.0563 84.893C45.0675 85.3424 44.9441 85.5168 44.4334 85.5168C37.2118 85.5033 29.9916 85.5047 22.77 85.5168C22.3225 85.5168 22.1514 85.4068 22.164 84.9534C22.1948 83.9045 22.2061 82.8515 22.1584 81.8039C22.1331 81.2298 22.2846 81.0447 22.9215 81.05C26.4972 81.0822 30.073 81.0648 33.6487 81.0648H33.6473Z" fill="#047844"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M61.3192 55.1163L70.3301 60.1672L61.3192 65.2181L61.3192 61.042L61.3192 59.2924L61.3192 55.1163Z" fill="#047844"/>
+<defs>
+<clipPath id="clip0_49_35868">
+<rect width="264.29" height="90.6232" fill="white" transform="translate(94.502 33.4694)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/assets/scss/_form-styles.scss b/assets/scss/_form-styles.scss
new file mode 100644
index 0000000..c585aaf
--- /dev/null
+++ b/assets/scss/_form-styles.scss
@@ -0,0 +1,367 @@
+// Tier 0 Primitive #5 — Form Structural Primitives
+// Migrated from webui/assets/scss/_form-styles.scss
+// Provides .entity-form/.card-form/.form-input etc. — pure SCSS, consumes _vars tokens only.
+@use './_vars' as *;
+
+.entity-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  background: $bg-gray;
+  width: min(750px, 100%);
+  height: auto;
+  overflow-y: auto;
+  border-radius: 16px;
+  padding: 2rem 2rem 1.5rem 2rem;
+  box-shadow: $shadow-sm;
+  box-sizing: border-box;
+  align-self: flex-start;
+
+  @media (max-width: $breakpoint-md) {
+    padding: 1.5rem 1.5rem 1.25rem 1.5rem;
+    border-radius: 12px;
+    gap: 1rem;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 1rem 1rem 0.75rem 1rem;
+    border-radius: 8px;
+    gap: 0.75rem;
+    width: 100%;
+  }
+
+  @media (max-width: 480px) {
+    padding: 0.75rem 0.75rem 0.5rem 0.75rem;
+    border-radius: 6px;
+    gap: 0.5rem;
+  }
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  @media (max-width: $breakpoint-sm) {
+    gap: 0.375rem;
+  }
+}
+
+.form-label {
+  font-weight: 600;
+  color: $text-primary;
+  margin: 0;
+  font-size: 1rem;
+
+  @media (max-width: $breakpoint-md) {
+    font-size: 0.95rem;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 0.9rem;
+  }
+}
+
+.form-input,
+.form-textarea,
+.form-select {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.75rem 1rem;
+  border: 1px solid $border-medium;
+  border-radius: 12px;
+  font-size: 1rem;
+  background: $bg-white;
+  color: $text-primary;
+  transition:
+    border-color $duration-fast $easing-standard,
+    box-shadow $duration-fast $easing-standard,
+    background-color $duration-fast $easing-standard;
+
+  @media (max-width: $breakpoint-md) {
+    padding: 0.625rem 0.875rem;
+    font-size: 0.95rem;
+    border-radius: 10px;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.9rem;
+    border-radius: 10px;
+  }
+
+  @media (max-width: 480px) {
+    padding: 0.5rem 0.625rem;
+    font-size: 0.875rem;
+  }
+
+  &::placeholder {
+    color: $text-muted;
+  }
+
+  &:hover:not(:focus):not(:disabled) {
+    border-color: $text-muted;
+  }
+
+  &:focus {
+    border-color: $primary;
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.18);
+  }
+
+  &:disabled {
+    background: $bg-light;
+    color: $text-muted;
+    cursor: not-allowed;
+  }
+
+  &.error {
+    border-color: $error-color;
+
+    &:focus {
+      box-shadow: 0 0 0 3px rgba(var(--color-error-rgb, 220, 38, 38), 0.18);
+    }
+  }
+}
+
+.form-select {
+  cursor: pointer;
+  appearance: none;
+  background-position: right 0.75rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2.5rem;
+
+  option {
+    padding: 0.5rem;
+  }
+}
+
+.form-textarea {
+  resize: vertical;
+  max-height: 6vh;
+}
+
+.submit-btn {
+  background: $primary;
+  color: $bg-white;
+  font-weight: 700;
+  font-size: 1rem;
+  border: none;
+  border-radius: 8px;
+  width: fit-content;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  transition: 0.2s;
+  margin-top: 0.5rem;
+
+  @media (max-width: $breakpoint-md) {
+    font-size: 0.95rem;
+    padding: 0.625rem 0.875rem;
+    border-radius: 6px;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 0.9rem;
+    padding: 0.5rem 0.75rem;
+    width: 100%;
+    margin-top: 0.75rem;
+  }
+
+  @media (max-width: 480px) {
+    font-size: 0.875rem;
+    padding: 0.5rem 0.625rem;
+    margin-top: 1rem;
+  }
+
+  &:hover {
+    background: $primary-hover;
+  }
+}
+
+.error-text {
+  color: $error-color;
+  font-size: 0.95rem;
+  margin-top: 0.25rem;
+}
+
+.name-icon-row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: end;
+  gap: $spacing-4;
+}
+
+.name-col {
+  min-width: 0;
+}
+
+.two-col-row {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: $spacing-4;
+}
+
+@media (min-width: $breakpoint-md) {
+  .two-col-row {
+    grid-template-columns: 1fr 1fr;
+    align-items: start;
+  }
+}
+
+.icon-trigger {
+  width: 48px;
+  height: 48px;
+  border-radius: 9999px;
+  border: 1px solid $border-light;
+  background: rgba(var(--color-primary-rgb), 0.12);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: $transition-base;
+
+  &:hover {
+    background: rgba(var(--color-primary-rgb), 0.18);
+    border-color: rgba(var(--color-primary-rgb), 0.25);
+  }
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px $input-focus;
+  }
+}
+
+.icon-trigger__icon {
+  width: 22px;
+  height: 22px;
+  color: $primary;
+}
+
+.icon-popover {
+  margin-top: $spacing-2;
+  padding: $spacing-3;
+  background: $bg-white;
+  border: 1px solid $border-light;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-sm;
+}
+
+.card-form {
+  background: $bg-white;
+  border-radius: $radius-xl;
+  border: 1px solid $border-color;
+  box-shadow: $shadow-md;
+  padding: 1.5rem;
+  width: min(750px, 100%);
+  min-width: 600px;
+
+  @media (max-width: $breakpoint-md) {
+    padding: 1.25rem;
+    min-width: auto;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 1rem;
+  }
+}
+
+.form-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+
+  h2 {
+    font-size: $font-size-lg;
+    font-weight: $font-semibold;
+    color: $text-primary;
+    margin: 0;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    margin-bottom: 1rem;
+
+    h2 {
+      font-size: $font-size-base;
+    }
+  }
+}
+
+.close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: $bg-gray;
+  border: none;
+  cursor: pointer;
+  transition: background 0.2s;
+
+  &:hover {
+    background: $border-color;
+  }
+
+  svg {
+    width: 18px;
+    height: 18px;
+    color: $text-secondary;
+  }
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid $border-color;
+
+  @media (max-width: $breakpoint-sm) {
+    flex-direction: column-reverse;
+    gap: 0.5rem;
+  }
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.25rem;
+  border-radius: $radius-lg;
+  font-weight: $font-semibold;
+  font-size: $font-size-sm;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: none;
+
+  @media (max-width: $breakpoint-sm) {
+    width: 100%;
+    padding: 0.625rem 1rem;
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.btn-primary {
+  background: $primary;
+  color: white;
+
+  &:hover:not(:disabled) {
+    opacity: 0.9;
+  }
+}
+
+.btn-secondary {
+  background: $bg-gray;
+  color: $text-primary;
+
+  &:hover:not(:disabled) {
+    background: $border-color;
+  }
+}
diff --git a/assets/scss/_surfaces.scss b/assets/scss/_surfaces.scss
new file mode 100644
index 0000000..ad48aa7
--- /dev/null
+++ b/assets/scss/_surfaces.scss
@@ -0,0 +1,164 @@
+// Tier 0 Primitive #4 — Surface System
+// Migrated from webui/assets/scss/_surfaces.scss
+// Provides .surface variants + display/eyebrow/glass-pill/tone-card — zero JS, only SCSS vars → CSS custom props.
+@use './_vars' as *;
+
+.surface {
+  background: var(--surface-bg);
+  color: var(--surface-ink);
+
+  &--brand {
+    --surface-bg: var(--color-primary-light);
+    --surface-ink: var(--color-text-primary);
+    --surface-accent: var(--color-primary-border);
+    --surface-deep: var(--color-primary);
+  }
+  &--brand-soft {
+    --surface-bg: var(--color-primary-light);
+    --surface-ink: var(--color-text-primary);
+    --surface-accent: var(--color-primary-lighter);
+    --surface-deep: var(--color-primary-hover);
+  }
+  &--income {
+    --surface-bg: var(--color-income-soft);
+    --surface-ink: var(--color-text-primary);
+    --surface-accent: var(--color-income);
+    --surface-deep: var(--color-income);
+  }
+  &--expense {
+    --surface-bg: var(--color-expense-soft);
+    --surface-ink: var(--color-text-primary);
+    --surface-accent: var(--color-expense);
+    --surface-deep: var(--color-expense);
+  }
+  &--neutral {
+    --surface-bg: var(--color-bg-light);
+    --surface-ink: var(--color-text-primary);
+    --surface-accent: var(--color-border-medium);
+    --surface-deep: var(--color-text-secondary);
+  }
+  &--investment {
+    --surface-bg: rgba(14, 165, 233, 0.12);
+    --surface-ink: var(--color-text-primary);
+    --surface-accent: rgba(14, 165, 233, 0.5);
+    --surface-deep: #0284c7;
+  }
+  &--loan {
+    --surface-bg: rgba(217, 119, 6, 0.12);
+    --surface-ink: var(--color-text-primary);
+    --surface-accent: rgba(217, 119, 6, 0.5);
+    --surface-deep: #b45309;
+  }
+  &--gift {
+    --surface-bg: rgba(124, 58, 237, 0.12);
+    --surface-ink: var(--color-text-primary);
+    --surface-accent: rgba(124, 58, 237, 0.5);
+    --surface-deep: #6d28d9;
+  }
+}
+
+// In dark mode the surface bg becomes a subtle tint so it sits on the page
+// instead of dominating it, and the deep token swaps for a brighter accent
+// so icons and text on top of it stay legible.
+:root.dark {
+  .surface--brand {
+    --surface-bg: rgba(var(--color-primary-rgb), 0.16);
+    --surface-accent: var(--color-primary-lighter);
+    --surface-deep: var(--color-primary-border);
+  }
+  .surface--brand-soft {
+    --surface-bg: rgba(var(--color-primary-rgb), 0.1);
+    --surface-accent: var(--color-primary-muted);
+    --surface-deep: var(--color-primary-border);
+  }
+  .surface--income {
+    --surface-bg: rgba(var(--color-income-rgb), 0.14);
+    --surface-accent: var(--color-income);
+    --surface-deep: var(--color-income);
+  }
+  .surface--expense {
+    --surface-bg: rgba(var(--color-expense-rgb), 0.14);
+    --surface-accent: var(--color-expense);
+    --surface-deep: var(--color-expense);
+  }
+  .surface--neutral {
+    --surface-bg: rgba(255, 255, 255, 0.04);
+    --surface-accent: var(--color-border-medium);
+    --surface-deep: var(--color-text-secondary);
+  }
+  .surface--investment {
+    --surface-bg: rgba(14, 165, 233, 0.16);
+    --surface-accent: rgba(56, 189, 248, 0.5);
+    --surface-deep: #38bdf8;
+  }
+  .surface--loan {
+    --surface-bg: rgba(217, 119, 6, 0.16);
+    --surface-accent: rgba(251, 191, 36, 0.5);
+    --surface-deep: #fbbf24;
+  }
+  .surface--gift {
+    --surface-bg: rgba(124, 58, 237, 0.16);
+    --surface-accent: rgba(167, 139, 250, 0.5);
+    --surface-deep: #a78bfa;
+  }
+}
+
+.display-1 {
+  font-weight: $font-bold;
+  font-size: clamp(2rem, 5vw, 3.4rem);
+  line-height: 1.02;
+  letter-spacing: -0.03em;
+}
+.display-2 {
+  font-weight: $font-bold;
+  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
+  line-height: 1.05;
+  letter-spacing: -0.025em;
+}
+.display-3 {
+  font-weight: $font-semibold;
+  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
+  line-height: 1.1;
+  letter-spacing: -0.015em;
+}
+
+.eyebrow {
+  font-size: 11px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--surface-deep, $text-muted);
+}
+
+.glass-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-2;
+  padding: 6px 12px;
+  background: var(--glass-bg);
+  border: 1px solid var(--color-border-light);
+  border-radius: 999px;
+  backdrop-filter: blur(10px);
+  box-shadow: var(--elevation-1);
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  color: var(--surface-deep, $text-primary);
+}
+
+.tone-card {
+  position: relative;
+  background: var(--surface-bg, var(--color-bg-white));
+  color: var(--surface-ink, var(--color-text-primary));
+  border: 1px solid var(--color-border-light);
+  border-radius: 18px;
+  padding: 1.25rem;
+  overflow: hidden;
+  box-shadow: var(--elevation-1);
+  transition:
+    box-shadow $duration-base $easing-standard,
+    transform $duration-base $easing-standard;
+
+  &:hover {
+    box-shadow: var(--elevation-2);
+  }
+}
diff --git a/assets/scss/_transaction-form.scss b/assets/scss/_transaction-form.scss
new file mode 100644
index 0000000..3db8890
--- /dev/null
+++ b/assets/scss/_transaction-form.scss
@@ -0,0 +1,748 @@
+@use './_vars.scss' as *;
+
+/* Transaction form layout and styles moved from components/TransactionForm.vue */
+.transaction-form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 800px;
+  gap: 16px;
+  margin: 0 auto;
+}
+
+.form-transaction {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  margin: 0 auto;
+  width: 100%;
+
+  @media (max-width: $breakpoint-sm) {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+}
+
+.transaction-date {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  span {
+    font-weight: $font-medium;
+  }
+
+  input {
+    padding: 12px;
+    border: 1px solid $border-color;
+    border-radius: 8px;
+    font-size: 16px;
+    width: 100%;
+    height: 50px;
+    background: $bg-white;
+    color: $text-primary;
+
+    &:focus {
+      border-color: $primary;
+      outline: none;
+    }
+  }
+
+  input::placeholder {
+    color: $text-muted;
+  }
+}
+
+.transaction-amount {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+
+  input {
+    width: 100%;
+    height: 50px;
+    border-radius: $radius-lg;
+    padding: 12px;
+    border: 1px solid $border-color;
+    background: $bg-white;
+    color: $text-primary;
+
+    &:focus {
+      border-color: $primary;
+      outline: none;
+    }
+  }
+
+  .amount-currency-button {
+    width: 58px;
+    height: 50px;
+    background-color: $bg-light;
+    border-radius: $radius-lg;
+    font-weight: $font-normal;
+    font-size: $font-size-sm;
+    line-height: 100%;
+    border: 1px solid $border-color;
+    cursor: pointer;
+  }
+
+  .amount-currency-select {
+    width: 80px;
+    height: 50px;
+    background-color: $bg-light;
+    border-radius: $radius-lg;
+    font-weight: $font-normal;
+    font-size: $font-size-sm;
+    line-height: 100%;
+    border: 1px solid $border-color;
+    cursor: pointer;
+    padding: 0 8px;
+    appearance: none;
+    color: $text-primary;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+    background-position: right 8px center;
+    background-repeat: no-repeat;
+    background-size: 16px;
+
+    &:focus {
+      border-color: $primary;
+      outline: none;
+    }
+  }
+}
+
+.transaction-party {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  position: relative;
+
+  span {
+    font-weight: $font-medium;
+  }
+
+  .party-search {
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    input {
+      width: 100%;
+      padding: 12px 40px 12px 36px;
+      height: 50px;
+      border: 1px solid $border-color;
+      border-radius: 8px;
+      font-size: 16px;
+      color: $text-primary;
+      background-color: $bg-white;
+
+      &:focus {
+        border-color: $primary;
+        outline: none;
+      }
+    }
+
+    .search-icon,
+    .dropdown-icon {
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      color: $primary;
+    }
+
+    .search-icon {
+      left: 10px;
+    }
+    .dropdown-icon {
+      right: 10px;
+    }
+  }
+
+  .party-dropdown {
+    position: absolute;
+    top: 85px;
+    width: 100%;
+    background-color: $bg-white;
+    border: 1px solid $border-light;
+    border-radius: 8px;
+    box-shadow: $shadow-md;
+    list-style: none;
+    padding: 8px 0;
+    z-index: 10;
+
+    li {
+      padding: 10px 16px;
+      cursor: pointer;
+      transition: background 0.2s ease;
+
+      .text-highlight {
+        color: $text-secondary;
+        font-weight: 500;
+      }
+      .text-secondary {
+        color: $text-muted;
+      }
+
+      &:hover {
+        background-color: $bg-light;
+      }
+    }
+  }
+}
+
+.transaction-category {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  position: relative;
+
+  span {
+    font-weight: $font-medium;
+  }
+
+  .category-search {
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    input {
+      width: 100%;
+      padding: 12px 40px 12px 36px;
+      height: 50px;
+      border: 1px solid $border-color;
+      border-radius: 8px;
+      font-size: 16px;
+      color: $text-primary;
+      background-color: $bg-white;
+
+      &:focus {
+        border-color: $primary;
+        outline: none;
+      }
+    }
+
+    .search-icon,
+    .dropdown-icon {
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      color: $primary;
+    }
+
+    .search-icon {
+      left: 10px;
+    }
+    .dropdown-icon {
+      right: 10px;
+    }
+  }
+
+  .category-dropdown {
+    position: absolute;
+    top: 85px;
+    width: 100%;
+    background-color: $bg-white;
+    border: 1px solid $border-light;
+    border-radius: 8px;
+    box-shadow: $shadow-md;
+    list-style: none;
+    padding: 8px 0;
+    z-index: 10;
+
+    li {
+      padding: 10px 16px;
+      cursor: pointer;
+      transition: background 0.2s ease;
+
+      .text-highlight {
+        color: $text-secondary;
+        font-weight: 500;
+      }
+      .text-secondary {
+        color: $text-muted;
+      }
+
+      &:hover {
+        background-color: $bg-light;
+      }
+
+      &.selected-option {
+        background-color: $primary-light;
+        font-weight: $font-medium;
+      }
+      &.disabled {
+        opacity: 0.55;
+        pointer-events: none;
+      }
+    }
+  }
+}
+
+.transaction-wallet {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  position: relative;
+
+  span {
+    font-weight: $font-medium;
+  }
+
+  .wallet-search {
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    input {
+      width: 100%;
+      padding: 12px 40px 12px 36px;
+      height: 50px;
+      border: 1px solid $border-color;
+      border-radius: 8px;
+      font-size: 16px;
+      color: $text-primary;
+      background-color: $bg-white;
+
+      &:focus {
+        border-color: $primary;
+        outline: none;
+      }
+    }
+
+    .search-icon,
+    .dropdown-icon {
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      color: $primary;
+    }
+
+    .search-icon {
+      left: 10px;
+    }
+    .dropdown-icon {
+      right: 10px;
+    }
+  }
+
+  .wallet-dropdown {
+    position: absolute;
+    top: 85px;
+    width: 100%;
+    background-color: $bg-white;
+    border: 1px solid $border-light;
+    border-radius: 8px;
+    box-shadow: $shadow-md;
+    list-style: none;
+    padding: 8px 0;
+    z-index: 10;
+
+    li {
+      padding: 10px 16px;
+      cursor: pointer;
+      transition: background 0.2s ease;
+
+      .text-highlight {
+        color: $text-secondary;
+        font-weight: 500;
+      }
+      .text-secondary {
+        color: $text-muted;
+      }
+
+      &:hover {
+        background-color: $bg-light;
+      }
+    }
+  }
+}
+
+.transaction-files {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  span {
+    font-weight: $font-medium;
+  }
+
+  .upload-box {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    background: $bg-white;
+    border: 1px dashed $border-light;
+    border-radius: 10px;
+    padding: 12px;
+  }
+
+  #file-input {
+    display: none;
+  }
+
+  .upload-button {
+    display: inline-block;
+    padding: 8px 12px;
+    background: $bg-light;
+    border: 1px solid $border-color;
+    border-radius: 8px;
+    color: $text-primary;
+    font-size: 14px;
+    cursor: pointer;
+  }
+
+  .hint {
+    color: $text-muted;
+    font-size: 12px;
+  }
+
+  .file-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 10px;
+    background: $bg-light;
+    border: 1px solid $border-color;
+    border-radius: 999px;
+    font-size: 12px;
+
+    .remove {
+      appearance: none;
+      border: none;
+      background: transparent;
+      color: $text-muted;
+      cursor: pointer;
+      font-size: 14px;
+      line-height: 1;
+    }
+  }
+
+  .attachment-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+
+  .attachment-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+    width: 96px;
+    padding: 6px;
+    background: $bg-white;
+    border: 1px solid $border-color;
+    border-radius: 10px;
+    transition: opacity 0.15s ease;
+
+    &.removing {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .thumb {
+      width: 84px;
+      height: 84px;
+      border-radius: 8px;
+      overflow: hidden;
+      background: $bg-light;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+      }
+
+      .thumb-placeholder {
+        color: $text-muted;
+        font-size: 20px;
+      }
+    }
+
+    .thumb-doc span {
+      font-weight: $font-medium;
+      font-size: 12px;
+      color: $text-muted;
+      letter-spacing: 0.05em;
+    }
+
+    .filename {
+      font-size: 11px;
+      color: $text-primary;
+      max-width: 88px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .remove {
+      position: absolute;
+      top: -6px;
+      right: -6px;
+      width: 22px;
+      height: 22px;
+      border-radius: 50%;
+      border: 1px solid $border-color;
+      background: $bg-white;
+      color: $text-primary;
+      cursor: pointer;
+      font-size: 14px;
+      line-height: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+    }
+  }
+}
+
+.transaction-description {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  span {
+    font-weight: $font-medium;
+    margin-bottom: 8px;
+  }
+
+  textarea {
+    width: 100%;
+    border-radius: 12px;
+    padding: 16px;
+    font-size: 16px;
+    border: 1px solid $border-color;
+    background-color: $bg-white;
+    resize: none;
+    color: $text-primary;
+
+    &:focus {
+      border: 1px solid $primary !important;
+      outline: none;
+    }
+    &::placeholder {
+      color: $text-muted;
+    }
+  }
+}
+
+/* Inline error text */
+.error-text {
+  margin-top: 4px;
+  color: $error-color;
+  font-size: $font-size-xs;
+}
+
+.submit-button {
+  align-self: flex-start;
+  margin-top: 16px;
+
+  @media (max-width: $breakpoint-sm) {
+    width: 100%;
+  }
+
+  &.submit-button--expense {
+    background-color: $error-color;
+    border-color: $error-color;
+
+    &:hover {
+      background-color: $error-dark;
+      border-color: $error-dark;
+    }
+  }
+}
+
+.refund-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px;
+  border: 1px solid $border-color;
+  border-radius: $radius-lg;
+  background: $bg-light;
+
+  .refund-toggle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    font-weight: $font-medium;
+    color: $text-primary;
+
+    input[type='checkbox'] {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+      accent-color: $primary;
+    }
+  }
+
+  .refund-hint {
+    margin: 0;
+    font-size: $font-size-xs;
+    color: $text-muted;
+    line-height: 1.4;
+  }
+
+  .refund-link {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-top: 8px;
+  }
+
+  .refund-link-hint {
+    margin: 4px 0 0;
+    font-size: $font-size-xs;
+    color: $text-muted;
+  }
+}
+
+.recurring-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  .recurring-toggle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    font-weight: $font-medium;
+
+    input[type='checkbox'] {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+      accent-color: $primary;
+    }
+  }
+
+  .recurring-fields {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 16px;
+    border: 1px solid $border-color;
+    border-radius: $radius-lg;
+    background: $bg-light;
+  }
+
+  .recurring-select {
+    padding: 12px;
+    border: 1px solid $border-color;
+    border-radius: 8px;
+    font-size: 16px;
+    width: 100%;
+    height: 50px;
+    background: $bg-white;
+    color: $text-primary;
+
+    &:focus {
+      border-color: $primary;
+      outline: none;
+    }
+  }
+}
+
+.optional-label {
+  font-weight: $font-normal;
+  color: $text-muted;
+  font-size: $font-size-sm;
+}
+
+.intent-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.intent-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border: 1px solid $border-color;
+  border-radius: 999px;
+  background: $bg-white;
+  color: $text-secondary;
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
+
+  &:hover {
+    border-color: $primary;
+    color: $text-primary;
+  }
+
+  .intent-pill-icon {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.intent-pill--active {
+  background: $primary;
+  border-color: $primary;
+  color: white;
+
+  &:hover {
+    color: white;
+  }
+}
+
+.wallet-field-wrapper,
+.group-field-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  .wallet-default-indicator,
+  .group-default-indicator {
+    position: absolute;
+    top: 34px;
+    right: 8px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: $primary;
+    color: white;
+    font-size: 0.65rem;
+    font-weight: 700;
+    padding: 2px 6px;
+    border-radius: 3px;
+    white-space: nowrap;
+    letter-spacing: 0.4px;
+    text-transform: uppercase;
+    pointer-events: none;
+  }
+}
diff --git a/assets/scss/_transactions-cards.scss b/assets/scss/_transactions-cards.scss
new file mode 100644
index 0000000..f6bb294
--- /dev/null
+++ b/assets/scss/_transactions-cards.scss
@@ -0,0 +1,441 @@
+@use './_vars.scss' as *;
+
+.transactions-cards {
+  width: 100%;
+
+  .cards-heading {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-4;
+    margin-bottom: $spacing-3;
+
+    &__text {
+      font-weight: $font-bold;
+      font-size: $font-size-xl;
+      margin-bottom: 0;
+      color: $text-primary;
+    }
+  }
+
+  .cards-list {
+    display: grid;
+    gap: $spacing-4;
+  }
+
+  .card {
+    position: relative;
+    background: $bg-white;
+    border-radius: $radius-xl;
+    box-shadow: $shadow-sm;
+    padding: $spacing-4;
+    border: 1px solid $border-color;
+
+    &::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 76px;
+      height: 76px;
+      border-top-right-radius: $radius-xl;
+      background: radial-gradient(
+        80px 80px at 90% 20%,
+        rgba(var(--color-primary-rgb), 0.08),
+        transparent 70%
+      );
+      pointer-events: none;
+    }
+
+    &--income {
+      .card__badge {
+        background: $primary-light;
+        color: $primary;
+      }
+      .card__amount {
+        color: $primary;
+      }
+      &::after {
+        background: radial-gradient(80px 80px at 90% 20%, rgba(4, 120, 68, 0.08), transparent 70%);
+      }
+    }
+
+    &--expense {
+      .card__badge {
+        background: rgba(var(--color-error-rgb), 0.12);
+        color: $error-color;
+      }
+      .card__amount {
+        color: $error-color;
+      }
+      &::after {
+        background: radial-gradient(
+          80px 80px at 90% 20%,
+          rgba(var(--color-error-rgb), 0.08),
+          transparent 70%
+        );
+      }
+    }
+  }
+
+  .card__header {
+    display: grid;
+    grid-template-columns: auto 1fr auto auto;
+    gap: $spacing-3;
+    align-items: start;
+  }
+
+  .card__badge {
+    padding: $spacing-1 $spacing-3;
+    border-radius: 9999px;
+    font-size: $font-size-xs;
+    font-weight: $font-bold;
+  }
+
+  .card__title-group {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .card__title {
+    font-size: $font-size-lg;
+    font-weight: $font-semibold;
+    color: $text-primary;
+  }
+  .card__subtitle {
+    font-size: $font-size-sm;
+    color: $text-muted;
+  }
+
+  .card__amount {
+    font-size: $font-size-base;
+    font-weight: $font-bold;
+    white-space: nowrap;
+  }
+
+  .card__toggle {
+    width: 32px;
+    height: 32px;
+    border-radius: $radius-lg;
+    background: $bg-light;
+    display: grid;
+    place-items: center;
+    border: 1px solid $border-light;
+  }
+  .toggle-icon {
+    width: 18px;
+    height: 18px;
+    color: $text-muted;
+    transition: transform $transition-base;
+  }
+  .toggle-icon.is-open {
+    transform: rotate(180deg);
+  }
+
+  .card__details {
+    margin-top: $spacing-4;
+    display: grid;
+    gap: $spacing-4;
+  }
+
+  .details__meta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .details__timeago {
+    font-size: $font-size-xs;
+    color: $text-muted;
+  }
+
+  .details__tiles {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: $spacing-3;
+  }
+
+  .tile {
+    background: $bg-light;
+    border: 1px solid $border-light;
+    border-radius: $radius-lg;
+    padding: $spacing-3;
+  }
+  .tile__label {
+    font-size: $font-size-xs;
+    color: $text-muted;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    margin-bottom: 2px;
+  }
+  .tile__value {
+    font-size: $font-size-sm;
+    color: $text-primary;
+    word-break: break-word;
+  }
+
+  .card__actions {
+    display: flex;
+    gap: $spacing-3;
+  }
+  .action-btn {
+    width: 28px;
+    height: 28px;
+    border-radius: $radius-md;
+    border: 1px solid $border-light;
+    background: $bg-white;
+    display: grid;
+    place-items: center;
+  }
+  .action-icon {
+    width: 16px;
+    height: 16px;
+    color: $primary;
+  }
+  .action-btn--delete .action-icon {
+    color: $error-color;
+  }
+
+  .pagination-container {
+    margin-top: $spacing-6;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+}
+
+/* New compact mobile card layout */
+.transactions-cards {
+  .txn-card {
+    padding: $spacing-4 $spacing-4 $spacing-3;
+  }
+
+  .txn-card__top {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    gap: $spacing-2;
+    align-items: center;
+  }
+
+  .icon-tile {
+    width: 40px;
+    height: 40px;
+    border-radius: $radius-lg;
+    display: grid;
+    place-items: center;
+    border: 1px solid $border-light;
+    background: $bg-light;
+
+    &.tile--income {
+      background: rgba(var(--color-primary-rgb), 0.08);
+      border-color: rgba(var(--color-primary-rgb), 0.15);
+      .tile-icon {
+        color: $primary;
+      }
+    }
+    &.tile--expense {
+      background: rgba(var(--color-error-rgb), 0.08);
+      border-color: rgba(var(--color-error-rgb), 0.15);
+      .tile-icon {
+        color: $error-color;
+      }
+    }
+  }
+  .tile-icon {
+    width: 18px;
+    height: 18px;
+  }
+
+  .header-line {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+
+    .prefix {
+      color: $text-secondary;
+      font-size: $font-size-sm;
+      flex-shrink: 0;
+    }
+    .user-icon {
+      width: 16px;
+      height: 16px;
+      color: $text-secondary;
+      flex-shrink: 0;
+    }
+    .party {
+      font-weight: $font-semibold;
+      color: $text-primary;
+      flex: 1 1 auto;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .txn-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 6px;
+    border-radius: 9999px;
+    font-size: $font-size-xs;
+    border: 1px solid $border-light;
+    white-space: nowrap;
+    flex-shrink: 0;
+    max-width: 100%;
+    overflow: hidden;
+
+    &--default {
+      background: $primary-light;
+      color: $primary;
+      border-color: rgba(var(--color-primary-rgb), 0.25);
+    }
+    &--wallet {
+      background: $bg-light;
+      color: $text-secondary;
+    }
+    .txn-chip__icon {
+      width: 12px;
+      height: 12px;
+      flex-shrink: 0;
+    }
+    .txn-chip__text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .amount {
+    font-weight: $font-bold;
+    font-size: $font-size-lg;
+    white-space: nowrap;
+    &.amount--income {
+      color: $primary;
+    }
+    &.amount--expense {
+      color: $error-color;
+    }
+  }
+
+  .txn-card__middle {
+    margin-top: $spacing-2;
+    display: flex;
+    align-items: center;
+  }
+
+  .txn-card__bottom {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: $spacing-3;
+    margin-top: $spacing-3;
+
+    .desc {
+      color: $text-secondary;
+      font-size: $font-size-sm;
+      flex: 1 1 auto;
+      min-width: 0;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      white-space: normal;
+    }
+    .date {
+      color: $text-muted;
+      font-size: $font-size-sm;
+      margin-left: $spacing-3;
+      white-space: nowrap;
+      flex: 0 0 auto;
+      margin-top: 2px;
+    }
+  }
+}
+
+/* Controls reused styles (scoped in cards component) */
+.input-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-3;
+  align-items: center;
+}
+
+.txn-search-container,
+.txn-filter-container {
+  position: relative;
+  width: 100%;
+  height: 36px;
+  min-width: 140px;
+
+  .search-input,
+  .filter-input {
+    width: 100%;
+    height: 100%;
+    padding: 8px 36px 8px 16px;
+    border: 1px solid $bg-gray;
+    border-radius: $radius-lg;
+    font-size: $font-size-sm;
+    background-color: $input-bg;
+    transition: border-color 0.2s ease;
+    box-sizing: border-box;
+
+    &::placeholder {
+      color: $text-muted;
+    }
+    &:focus {
+      outline: none;
+      border-color: $primary;
+      box-shadow: 0 0 0 3px $input-focus;
+    }
+  }
+}
+
+.txn-search-icon,
+.txn-filter-icon {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  color: $text-muted;
+  pointer-events: none;
+}
+
+.pagination-btn {
+  padding: 8px 12px;
+  border: 1px solid $border-light;
+  background-color: $bg-white;
+  color: $text-secondary;
+  border-radius: $radius-md;
+  cursor: pointer;
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  transition: $transition-base;
+  min-width: 40px;
+  text-align: center;
+
+  &:hover:not(:disabled) {
+    background-color: $bg-light;
+    border-color: $border-medium;
+  }
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background-color: $input-bg;
+  }
+  &.active {
+    background-color: $primary;
+    color: #fff;
+    border-color: $primary;
+  }
+}
+
+.entries-text {
+  font-size: $font-size-sm;
+  color: $text-muted;
+  font-weight: $font-medium;
+}
diff --git a/assets/scss/_utilities.scss b/assets/scss/_utilities.scss
new file mode 100644
index 0000000..5f80f66
--- /dev/null
+++ b/assets/scss/_utilities.scss
@@ -0,0 +1,174 @@
+// Tier 0 Primitive #6 — Layout Utility Primitives
+// Migrated from webui/assets/scss/_utilities.scss
+// Provides .chip/.icon-button/.search-container + responsive visibility helpers — pure SCSS.
+@use './_vars' as *;
+
+// Chip Component - Reusable pill-shaped buttons
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-1;
+  padding: $spacing-1 $spacing-2;
+  border-radius: 999px;
+  background: $bg-white;
+  color: $text-secondary;
+  border: 1px solid $border-light;
+  box-shadow: $shadow-sm;
+  font-size: $font-size-xs;
+  font-weight: $font-medium;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 6px 8px;
+    font-size: 10px;
+  }
+
+  &:hover {
+    background: $bg-light;
+    color: $text-primary;
+    transform: translateY(-1px);
+    box-shadow: $shadow-md;
+  }
+
+  // Modifiers
+  &--primary {
+    background: $primary;
+    color: white;
+    border-color: $primary;
+
+    &:hover {
+      background: $primary-hover;
+      color: white;
+    }
+  }
+
+  &--report {
+    background: $accent-color;
+    color: white;
+    border-color: $accent-color;
+  }
+}
+
+.chip-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+
+  @media (max-width: $breakpoint-sm) {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+// Search Container - Reusable search input wrapper
+.search-container {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  position: relative;
+  width: 100%;
+
+  @media (max-width: #{$breakpoint-lg - 1px}) {
+    width: auto;
+    gap: 8px;
+  }
+
+  @media (max-width: #{$breakpoint-md - 1px}) {
+    width: auto;
+    gap: 6px;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    gap: 8px;
+  }
+}
+
+// Responsive Display Utilities
+.only-mobile {
+  display: block;
+
+  @media (min-width: $breakpoint-md) {
+    display: none;
+  }
+}
+
+.only-tablet {
+  display: none;
+
+  @media (min-width: $breakpoint-md) and (max-width: #{$breakpoint-lg - 1px}) {
+    display: block;
+  }
+}
+
+.only-desktop {
+  display: none;
+
+  @media (min-width: $breakpoint-md) {
+    display: block;
+  }
+}
+
+// Hide on mobile
+.hide-mobile {
+  @media (max-width: #{$breakpoint-md - 1px}) {
+    display: none;
+  }
+}
+
+// Hide on tablet
+.hide-tablet {
+  @media (min-width: $breakpoint-md) and (max-width: #{$breakpoint-lg - 1px}) {
+    display: none;
+  }
+}
+
+// Hide on desktop
+.hide-desktop {
+  @media (min-width: $breakpoint-lg) {
+    display: none;
+  }
+}
+
+// Icon Button - Reusable icon-only button. Pill-friendly proportions, mode-aware.
+.icon-button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background-color: transparent;
+  border: 1px solid transparent;
+  color: $text-secondary;
+  cursor: pointer;
+  transition:
+    background-color $duration-fast $easing-standard,
+    color $duration-fast $easing-standard;
+
+  @media (max-width: $breakpoint-sm) {
+    width: 32px;
+    height: 32px;
+  }
+
+  &:hover {
+    background-color: var(--hover-overlay);
+    color: $text-primary;
+  }
+
+  &:active {
+    background-color: var(--press-overlay);
+  }
+
+  &:focus-visible {
+    outline: 2px solid $primary;
+    outline-offset: 2px;
+  }
+
+  .icon {
+    width: 16px;
+    height: 16px;
+    color: currentColor;
+  }
+}
diff --git a/components/AuthFooterLink.stories.js b/components/AuthFooterLink.stories.js
new file mode 100644
index 0000000..276e3db
--- /dev/null
+++ b/components/AuthFooterLink.stories.js
@@ -0,0 +1,15 @@
+import AuthFooterLink from './AuthFooterLink.vue';
+
+export default {
+  title: 'Primitives/AuthFooterLink',
+  component: AuthFooterLink,
+  args: { text: 'No account?', linkText: 'Sign up', to: '/register' },
+  argTypes: {
+    text: { control: 'text' },
+    linkText: { control: 'text' },
+    to: { control: 'text' },
+  },
+};
+
+export const Default = {};
+export const Login = { args: { text: 'Already have an account?', linkText: 'Log in', to: '/login' } };
diff --git a/components/AuthFooterLink.vue b/components/AuthFooterLink.vue
new file mode 100644
index 0000000..13846a2
--- /dev/null
+++ b/components/AuthFooterLink.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="auth-footer-link">
+    <TDivider orientation="horizontal" class="footer-divider" />
+    <div class="footer-text">
+      {{ text }} <a :href="to">{{ linkText }}</a>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import TDivider from './TDivider.vue';
+
+defineProps({
+  text: {
+    type: String,
+    required: true
+  },
+  linkText: {
+    type: String,
+    required: true
+  },
+  to: {
+    type: String,
+    required: true
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.auth-footer-link {
+  margin-top: $spacing-6;
+
+  .footer-divider {
+    background-color: $border-light;
+  }
+
+  .footer-text {
+    text-align: center;
+    font-size: $font-size-sm;
+    padding-top: $spacing-5;
+    color: $text-secondary;
+  }
+
+  a {
+    color: $primary;
+    font-weight: $font-semibold;
+    text-decoration: none;
+    margin-left: $spacing-1;
+    transition: $transition-base;
+
+    &:hover {
+      text-decoration: underline;
+      color: $primary-hover;
+    }
+  }
+}
+</style>
diff --git a/components/ComponentLoader.stories.js b/components/ComponentLoader.stories.js
new file mode 100644
index 0000000..ec4fe8a
--- /dev/null
+++ b/components/ComponentLoader.stories.js
@@ -0,0 +1,25 @@
+import ComponentLoader from './ComponentLoader.vue';
+
+export default {
+  title: 'Primitives/ComponentLoader',
+  component: ComponentLoader,
+  argTypes: {
+    isLoading: { control: 'boolean' },
+    hasData: { control: 'boolean' },
+    showEmpty: { control: 'boolean' },
+    emptyStateName: { control: 'text' },
+    skeletonVariant: { control: 'select', options: ['default', 'list', 'card', 'table'] },
+  },
+};
+
+export const Loading = { args: { isLoading: true, hasData: false, skeletonVariant: 'list', skeletonCount: 3 } };
+export const ErrorState = { args: { error: { message: 'Failed to load' }, isLoading: false, hasData: false, onRetry: () => alert('retry') } };
+export const Empty = { args: { hasData: false, isLoading: false, showEmpty: true, emptyStateName: 'wallets' } };
+export const WithData = {
+  render: (args) => ({
+    components: { ComponentLoader },
+    setup() { return { args }; },
+    template: `<ComponentLoader v-bind="args"><div style="padding:16px; border:1px solid var(--color-border); border-radius:8px;">Content loaded</div></ComponentLoader>`,
+  }),
+  args: { hasData: true },
+};
diff --git a/components/ComponentLoader.vue b/components/ComponentLoader.vue
new file mode 100644
index 0000000..d2782b5
--- /dev/null
+++ b/components/ComponentLoader.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="component-loader">
+    <LoadingSkeleton
+      v-if="isLoading && !hasData"
+      :variant="skeletonVariant"
+      :count="skeletonCount"
+      :columns="skeletonColumns"
+    />
+
+    <div v-if="error && !isLoading" class="error-state">
+      <div class="error-icon">
+        <AlertTriangle :size="24" />
+      </div>
+      <div class="error-content">
+        <h3 class="error-title">
+          <span v-if="getErrorCode(error)">{{ errorTitle }} {{ getErrorCode(error) }}</span>
+          <span v-else>{{ errorFallbackTitle }}</span>
+        </h3>
+        <p class="error-message">{{ formatErrorMessage(error) }}</p>
+        <TButton
+          v-if="onRetry"
+          :text="retryLabel"
+          variant="primary"
+          size="medium"
+          :full-width="false"
+          @click="onRetry"
+        />
+      </div>
+    </div>
+
+    <div v-if="!isLoading && !error && !hasData && showEmpty" class="empty-state">
+      <slot name="empty">
+        <EmptyState :page-name="emptyStateName" :title="emptyTitle" :subtitle="emptySubtitle" :button-label="emptyButtonLabel" @create="$emit('create')" />
+      </slot>
+    </div>
+
+    <div v-if="hasData" class="content-wrapper">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import LoadingSkeleton from './LoadingSkeleton.vue';
+import EmptyState from './EmptyState.vue';
+import TButton from './TButton.vue';
+import { AlertTriangle } from 'lucide-vue-next';
+
+const props = defineProps({
+  isLoading: {
+    type: Boolean,
+    default: false
+  },
+  error: {
+    type: [String, Object, Error],
+    default: null
+  },
+  hasData: {
+    type: Boolean,
+    default: false
+  },
+  showEmpty: {
+    type: Boolean,
+    default: true
+  },
+  emptyStateName: {
+    type: String,
+    default: 'items'
+  },
+  emptyTitle: {
+    type: String,
+    default: ''
+  },
+  emptySubtitle: {
+    type: String,
+    default: ''
+  },
+  emptyButtonLabel: {
+    type: String,
+    default: ''
+  },
+  skeletonVariant: {
+    type: String,
+    default: 'default',
+    validator: (value) => ['default', 'list', 'card', 'table'].includes(value)
+  },
+  skeletonCount: {
+    type: Number,
+    default: 3
+  },
+  skeletonColumns: {
+    type: Number,
+    default: 4
+  },
+  onRetry: {
+    type: Function,
+    default: null
+  },
+  errorTitle: {
+    type: String,
+    default: 'Error:'
+  },
+  errorFallbackTitle: {
+    type: String,
+    default: 'Something went wrong'
+  },
+  retryLabel: {
+    type: String,
+    default: 'Try Again'
+  },
+  errorFormatter: {
+    type: Function,
+    default: null
+  }
+});
+
+defineEmits(['create']);
+
+// Default error extraction (mirrors webui/utils/apiErrors.ts)
+function defaultExtractApiErrors(err) {
+  if (typeof err === 'string') return err;
+  if (err?.response?._data?.message) return err.response._data.message;
+  if (err?.response?._data?.errors?.length) return err.response._data.errors.join(', ');
+  if (err?.message) return err.message;
+  if (err?._data?.message) return err._data.message;
+  if (err?._data?.errors?.length) return err._data.errors.join(', ');
+  return 'An unknown error occurred';
+}
+
+function formatErrorMessage(error) {
+  if (props.errorFormatter) return props.errorFormatter(error);
+  return defaultExtractApiErrors(error);
+}
+
+// Extract HTTP status code from error object
+function getErrorCode(error) {
+  if (!error) return null;
+  if (error?.response?.status) return error.response.status;
+  if (error?.status) return error.status;
+  if (error?.statusCode) return error.statusCode;
+  if (typeof error === 'string') {
+    const statusMatch = error.match(/\b(4\d{2}|5\d{2})\b/);
+    if (statusMatch) return parseInt(statusMatch[0]);
+  }
+  return null;
+}
+</script>
+
+<style scoped lang="scss">
+@use '../assets/scss/_vars.scss' as *;
+
+.component-loader {
+  width: 100%;
+}
+
+.error-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 2rem;
+  background: rgba(var(--color-error-rgb), 0.05);
+  border: 1px solid rgba(var(--color-error-rgb), 0.2);
+  border-radius: $radius-lg;
+  margin: 1rem 0;
+
+  .error-icon {
+    color: $error-color;
+    margin-bottom: 1rem;
+  }
+
+  .error-content {
+    max-width: 400px;
+  }
+
+  .error-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: $error-color;
+    margin: 0 0 0.5rem 0;
+  }
+
+  .error-message {
+    color: $error-dark;
+    margin: 0 0 1.5rem 0;
+    line-height: 1.5;
+  }
+}
+
+.empty-state {
+  width: 100%;
+}
+
+.content-wrapper {
+  width: 100%;
+}
+</style>
diff --git a/components/ContentCard.stories.js b/components/ContentCard.stories.js
new file mode 100644
index 0000000..7a64871
--- /dev/null
+++ b/components/ContentCard.stories.js
@@ -0,0 +1,60 @@
+import ContentCard from './ContentCard.vue';
+
+export default {
+  title: 'Components/ContentCard',
+  component: ContentCard,
+  tags: ['autodocs'],
+  argTypes: {
+    name: { control: 'text' },
+    description: { control: 'text' },
+    icon: { control: 'text' },
+    isDefault: { control: 'boolean' },
+    typeBadge: { control: 'text' },
+    typeBadgeLabel: { control: 'text' }
+  }
+};
+
+export const Default = {
+  args: {
+    name: 'Personal Wallet',
+    icon: 'Wallet',
+    description: 'Main everyday spending account',
+    editLabel: 'Edit wallet',
+    deleteLabel: 'Delete wallet'
+  }
+};
+
+export const DefaultItem = {
+  args: {
+    name: 'Primary Account',
+    icon: 'CreditCard',
+    description: 'Your default linked bank account',
+    isDefault: true,
+    defaultBadgeLabel: 'Default',
+    editLabel: 'Edit account',
+    deleteLabel: 'Delete account'
+  }
+};
+
+export const WithTypeBadge = {
+  args: {
+    name: 'Groceries',
+    icon: 'ShoppingCart',
+    description: 'Food and household items',
+    typeBadge: 'expense',
+    typeBadgeLabel: 'Expense',
+    editLabel: 'Edit category',
+    deleteLabel: 'Delete category'
+  }
+};
+
+export const WithoutIcon = {
+  args: {
+    name: 'Miscellaneous',
+    description: 'Uncategorized spending',
+    typeBadge: 'expense',
+    typeBadgeLabel: 'Expense',
+    editLabel: 'Edit',
+    deleteLabel: 'Delete'
+  }
+};
diff --git a/components/ContentCard.vue b/components/ContentCard.vue
new file mode 100644
index 0000000..fcd7ab6
--- /dev/null
+++ b/components/ContentCard.vue
@@ -0,0 +1,245 @@
+<template>
+  <div class="entity-card" :class="{ 'is-default': isDefault }">
+    <div class="entity-icon-name" :class="{ 'no-icon': !icon }">
+      <component :is="resolvedIcon" v-if="icon" class="entity-icon" />
+      <span class="name">{{ name }}</span>
+      <span v-if="isDefault" class="default-badge" :title="defaultBadgeLabel">
+        {{ defaultBadgeLabel }}
+      </span>
+    </div>
+
+    <div class="entity-description">
+      <slot name="description">{{ description }}</slot>
+      <div
+        v-if="typeBadge"
+        class="category-type-badge"
+        :class="`type-${typeBadge}`"
+      >
+        <slot name="type-badge">{{ typeBadgeLabel || typeBadge }}</slot>
+      </div>
+    </div>
+
+    <div class="entity-actions">
+      <slot name="actions">
+        <TButton
+          variant="text"
+          size="small"
+          :full-width="false"
+          class="action-btn action-btn--edit"
+          :aria-label="editLabel"
+          :title="editLabel"
+          @click="$emit('edit')"
+        >
+          <Edit :size="16" />
+        </TButton>
+        <TButton
+          variant="text"
+          size="small"
+          :full-width="false"
+          class="action-btn action-btn--delete"
+          :aria-label="deleteLabel"
+          :title="deleteLabel"
+          @click="$emit('delete')"
+        >
+          <Trash2 :size="16" />
+        </TButton>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { Edit, Trash2 } from 'lucide-vue-next';
+import * as LucideIcons from 'lucide-vue-next';
+import TButton from './TButton.vue';
+
+const props = defineProps({
+  name: { type: String, default: '' },
+  icon: { type: String, default: null },
+  description: { type: String, default: '' },
+  isDefault: { type: Boolean, default: false },
+  defaultBadgeLabel: { type: String, default: 'Default' },
+  typeBadge: { type: String, default: null },
+  typeBadgeLabel: { type: String, default: '' },
+  editLabel: { type: String, default: 'Edit' },
+  deleteLabel: { type: String, default: 'Delete' }
+});
+
+defineEmits(['edit', 'delete']);
+
+const resolvedIcon = computed(() => {
+  if (!props.icon) return null;
+  return LucideIcons[props.icon] || LucideIcons.Box;
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.entity-card {
+  display: grid;
+  grid-template-columns: 1.8fr 2.5fr auto;
+  align-items: start;
+  padding: $spacing-4;
+  border-bottom: 1px solid $border-light;
+  gap: $spacing-4;
+  background: $bg-light;
+  transition: transform $duration-fast $easing-standard,
+    box-shadow $duration-fast $easing-standard,
+    background-color $duration-fast $easing-standard;
+  cursor: pointer;
+  min-height: 60px;
+
+  @media (max-width: $breakpoint-md) {
+    grid-template-columns: 1.6fr 2.2fr auto;
+    padding: $spacing-3;
+    gap: $spacing-3;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    grid-template-columns: 1.5fr 2fr auto;
+    padding: $spacing-2;
+    gap: $spacing-2;
+    min-height: 50px;
+  }
+
+  &.is-default {
+    background: rgba(var(--color-success-rgb), 0.06);
+    border-left: 3px solid $primary;
+    padding-left: calc(#{$spacing-4} - 3px);
+  }
+
+  &:hover {
+    background: $bg-white;
+    box-shadow: $shadow-sm;
+
+    &.is-default {
+      background: rgba(var(--color-success-rgb), 0.1);
+    }
+
+    .entity-icon {
+      transform: scale(1.08);
+    }
+  }
+}
+
+.entity-icon-name {
+  display: flex;
+  align-items: flex-start;
+  gap: $spacing-2;
+  min-width: 0;
+
+  &.no-icon {
+    padding-left: calc(24px + #{$spacing-2});
+
+    @media (max-width: $breakpoint-sm) {
+      padding-left: calc(20px + #{$spacing-2});
+    }
+  }
+}
+
+.entity-icon {
+  width: 24px;
+  height: 24px;
+  color: $primary;
+  transition: transform $duration-fast $easing-standard;
+  flex-shrink: 0;
+
+  @media (max-width: $breakpoint-sm) {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.name {
+  font-weight: $font-medium;
+  color: $text-primary;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
+  font-size: $font-size-sm;
+  flex: 1;
+  min-width: 0;
+  line-height: 1.3;
+}
+
+.default-badge {
+  display: inline-flex;
+  align-items: center;
+  background: $primary;
+  color: $text-inverse;
+  font-size: 0.65rem;
+  font-weight: $font-bold;
+  padding: 2px 7px;
+  border-radius: $radius-sm;
+  white-space: nowrap;
+  flex-shrink: 0;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+.entity-description {
+  color: $text-secondary;
+  font-size: $font-size-sm;
+  line-height: 1.4;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
+  min-width: 0;
+}
+
+.category-type-badge {
+  display: inline-flex;
+  align-items: center;
+  margin-top: 4px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: $font-size-xs;
+  font-weight: $font-semibold;
+  text-transform: capitalize;
+
+  &.type-income {
+    background: rgba(var(--color-primary-rgb), 0.1);
+    color: $primary;
+  }
+
+  &.type-expense {
+    background: rgba(var(--color-error-rgb), 0.1);
+    color: $error-color;
+  }
+}
+
+.entity-actions {
+  display: flex;
+  gap: $spacing-1;
+  align-items: center;
+  justify-content: flex-end;
+  flex-shrink: 0;
+}
+
+.action-btn {
+  padding: 4px;
+  min-height: auto;
+  width: 28px;
+  height: 28px;
+  border-radius: $radius-sm;
+
+  &--edit {
+    color: $primary;
+
+    &:hover {
+      background: rgba(var(--color-primary-rgb), 0.1);
+      color: $primary-dark;
+    }
+  }
+
+  &--delete {
+    color: $error-color;
+
+    &:hover {
+      background: rgba(var(--color-error-rgb), 0.1);
+    }
+  }
+}
+</style>
diff --git a/components/ContentCardGrid.stories.js b/components/ContentCardGrid.stories.js
new file mode 100644
index 0000000..3fb20a8
--- /dev/null
+++ b/components/ContentCardGrid.stories.js
@@ -0,0 +1,46 @@
+import ContentCardGrid from './ContentCardGrid.vue';
+
+export default {
+  title: 'Components/ContentCardGrid',
+  component: ContentCardGrid,
+  tags: ['autodocs'],
+};
+
+const wallets = [
+  { id: '1', name: 'Main Account', description: 'Primary HSBC current account', icon: 'Wallet', balance: '£4,320.00' },
+  { id: '2', name: 'Savings Pot', description: 'Emergency fund — target £10k', icon: 'PiggyBank' },
+  { id: '3', name: 'Investments', description: 'Stocks & ETFs via Freetrade', icon: 'TrendingUp' },
+  { id: '4', name: 'Cash', description: 'Physical wallet', icon: 'Banknote' },
+];
+
+export const Default = {
+  args: {
+    entities: wallets,
+    defaultItemId: '1',
+    defaultBadgeLabel: 'Default',
+    editLabel: 'Edit wallet',
+    deleteLabel: 'Delete wallet',
+    emptyText: 'No wallets yet.'
+  }
+};
+
+export const WithCardFields = {
+  args: {
+    entities: wallets.slice(0, 3),
+    defaultItemId: '1',
+    defaultBadgeLabel: 'Default',
+    editLabel: 'Edit',
+    deleteLabel: 'Delete',
+    cardFields: [
+      { key: 'balance', label: 'Balance' },
+    ],
+    emptyText: 'No wallets yet.'
+  }
+};
+
+export const Empty = {
+  args: {
+    entities: [],
+    emptyText: 'No wallets have been added yet.'
+  }
+};
diff --git a/components/ContentCardGrid.vue b/components/ContentCardGrid.vue
new file mode 100644
index 0000000..b895b87
--- /dev/null
+++ b/components/ContentCardGrid.vue
@@ -0,0 +1,299 @@
+<template>
+  <div class="card-grid">
+    <div
+      v-for="entity in entities"
+      :key="entity.id"
+      class="entity-card"
+      :class="{ 'is-default': String(entity.id) === defaultItemId }"
+    >
+      <div class="card-header">
+        <div class="entity-info">
+          <div v-if="getIcon(entity)" class="entity-icon">
+            <component :is="getIcon(entity)" />
+          </div>
+          <div class="entity-details">
+            <h3 class="entity-name">{{ entity.name }}</h3>
+            <span v-if="String(entity.id) === defaultItemId" class="default-badge">
+              {{ defaultBadgeLabel }}
+            </span>
+          </div>
+        </div>
+        <div class="card-actions" @click.stop>
+          <TDropdown class="action-menu-container">
+            <template #trigger>
+              <TButton
+                variant="text"
+                size="small"
+                :full-width="false"
+                class="action-menu-btn"
+                :aria-label="moreActionsLabel"
+                :title="moreActionsLabel"
+              >
+                <MoreVertical :size="16" />
+              </TButton>
+            </template>
+            <slot name="card-menu" :entity="entity">
+              <TDropdownItem class="action-item action-item--edit" @click="handleEdit(entity)">
+                <Edit :size="14" />
+                <span>{{ editLabel }}</span>
+              </TDropdownItem>
+              <TDropdownItem class="action-item action-item--delete" @click="handleDelete(entity)">
+                <Trash2 :size="14" />
+                <span>{{ deleteLabel }}</span>
+              </TDropdownItem>
+            </slot>
+          </TDropdown>
+        </div>
+      </div>
+
+      <div v-if="entity.description" class="card-description">
+        {{ entity.description }}
+      </div>
+
+      <div v-if="cardFields && cardFields.length > 0" class="card-fields">
+        <div v-for="field in cardFields" :key="field.key" class="field-row">
+          <span class="field-label">{{ field.label }}</span>
+          <span class="field-value" :class="field.class">
+            <template v-if="field.render">
+              {{ field.render(entity[field.key], entity) }}
+            </template>
+            <template v-else>
+              {{ getCellValue(entity, field.key) }}
+            </template>
+          </span>
+        </div>
+      </div>
+
+      <slot name="card-footer" :entity="entity" />
+    </div>
+
+    <div v-if="entities.length === 0" class="empty-state">
+      <slot name="empty">
+        <p>{{ emptyText }}</p>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { MoreVertical, Edit, Trash2 } from 'lucide-vue-next';
+import * as LucideIcons from 'lucide-vue-next';
+import TButton from './TButton.vue';
+import TDropdown from './TDropdown.vue';
+import TDropdownItem from './TDropdownItem.vue';
+
+defineProps({
+  entities: { type: Array, default: () => [] },
+  cardFields: { type: Array, default: () => [] },
+  defaultItemId: { type: String, default: null },
+  defaultBadgeLabel: { type: String, default: 'Default' },
+  moreActionsLabel: { type: String, default: 'More actions' },
+  editLabel: { type: String, default: 'Edit' },
+  deleteLabel: { type: String, default: 'Delete' },
+  emptyText: { type: String, default: 'No items found.' }
+});
+
+const emit = defineEmits(['edit', 'delete']);
+
+const handleEdit = (entity) => emit('edit', entity);
+const handleDelete = (entity) => emit('delete', entity);
+
+const getIcon = (entity) => {
+  const iconValue = entity.icon?.path || entity.icon?.content || entity.icon;
+  if (!iconValue) return null;
+  return LucideIcons[iconValue] || LucideIcons.Box;
+};
+
+const getCellValue = (entity, key) => {
+  if (key.includes('.')) {
+    return key.split('.').reduce((obj, k) => obj?.[k], entity) ?? '';
+  }
+  return entity[key] ?? '';
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: $spacing-3;
+  width: 100%;
+
+  @media (max-width: $breakpoint-md) {
+    grid-template-columns: 1fr;
+    gap: $spacing-2;
+  }
+}
+
+.entity-card {
+  background: $bg-white;
+  border-radius: $radius-lg;
+  padding: $spacing-3;
+  box-shadow: $shadow-sm;
+  border-left: 3px solid $border-medium;
+  transition: box-shadow $duration-fast $easing-standard;
+
+  &:hover {
+    box-shadow: $shadow-md;
+  }
+
+  &.is-default {
+    border-left-color: $primary;
+    background: rgba(var(--color-primary-rgb), 0.03);
+  }
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: $spacing-2;
+}
+
+.entity-info {
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+  flex: 1;
+  min-width: 0;
+}
+
+.entity-icon {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background: rgba(var(--color-primary-rgb), 0.1);
+  color: $primary;
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
+.entity-details {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.entity-name {
+  margin: 0;
+  font-size: $font-size-base;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.default-badge {
+  display: inline-flex;
+  align-items: center;
+  background: $primary;
+  color: $text-inverse;
+  font-size: 0.6rem;
+  font-weight: $font-bold;
+  padding: 2px 6px;
+  border-radius: $radius-sm;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  width: fit-content;
+}
+
+.card-actions {
+  flex-shrink: 0;
+}
+
+.action-menu-btn {
+  padding: 4px;
+  min-height: auto;
+  border-radius: $radius-md;
+  color: $text-muted;
+
+  &:hover {
+    background: $bg-gray;
+    color: $text-secondary;
+  }
+}
+
+.action-item {
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+  width: 100%;
+  font-size: $font-size-sm;
+
+  &--edit {
+    color: $primary;
+
+    &:hover {
+      background: rgba(var(--color-primary-rgb), 0.08);
+    }
+  }
+
+  &--delete {
+    color: $error-color;
+
+    &:hover {
+      background: rgba(var(--color-error-rgb), 0.08);
+    }
+  }
+}
+
+.card-description {
+  color: $text-muted;
+  font-size: $font-size-xs;
+  line-height: 1.4;
+  margin-bottom: $spacing-2;
+}
+
+.card-fields {
+  border-top: 1px solid $border-light;
+  padding-top: $spacing-2;
+  margin-top: $spacing-2;
+}
+
+.field-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.25rem 0;
+  font-size: $font-size-xs;
+
+  &:not(:last-child) {
+    border-bottom: 1px dashed $border-light;
+    padding-bottom: 0.375rem;
+    margin-bottom: 0.25rem;
+  }
+}
+
+.field-label {
+  color: $text-muted;
+  font-weight: $font-medium;
+}
+
+.field-value {
+  color: $text-primary;
+  font-weight: $font-semibold;
+
+  &.positive { color: $primary; }
+  &.negative { color: $error-color; }
+}
+
+.empty-state {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: $spacing-8;
+  color: $text-muted;
+  font-size: $font-size-sm;
+}
+</style>
diff --git a/components/ContentListView.stories.js b/components/ContentListView.stories.js
new file mode 100644
index 0000000..3b6bca8
--- /dev/null
+++ b/components/ContentListView.stories.js
@@ -0,0 +1,52 @@
+import ContentListView from './ContentListView.vue';
+
+export default {
+  title: 'Components/ContentListView',
+  component: ContentListView,
+  tags: ['autodocs'],
+  argTypes: {
+    initialView: { control: 'select', options: ['table', 'cards'] },
+    cardLayout: { control: 'select', options: ['grid', 'horizontal'] }
+  }
+};
+
+const sampleEntities = Array.from({ length: 25 }, (_, i) => ({
+  id: `cat-${i + 1}`,
+  name: `Category ${i + 1}`,
+  description: `Description for category ${i + 1}`,
+  type: i % 2 === 0 ? 'Expense' : 'Income',
+  icon: 'Folder'
+}));
+
+const sampleColumns = [
+  { key: 'name', label: 'Name', sortable: true },
+  { key: 'description', label: 'Description' },
+  { key: 'type', label: 'Type', sortable: true }
+];
+
+const sampleCardFields = [
+  { key: 'description', label: 'Details' },
+  { key: 'type', label: 'Type' }
+];
+
+export const TableView = {
+  args: {
+    pageName: 'Category',
+    pageNamePlural: 'Categories',
+    entities: sampleEntities,
+    columns: sampleColumns,
+    cardFields: sampleCardFields,
+    initialView: 'table'
+  }
+};
+
+export const CardsView = {
+  args: {
+    pageName: 'Category',
+    pageNamePlural: 'Categories',
+    entities: sampleEntities,
+    columns: sampleColumns,
+    cardFields: sampleCardFields,
+    initialView: 'cards'
+  }
+};
diff --git a/components/ContentListView.vue b/components/ContentListView.vue
new file mode 100644
index 0000000..59e6d29
--- /dev/null
+++ b/components/ContentListView.vue
@@ -0,0 +1,433 @@
+<template>
+  <ComponentLoader
+    :is-loading="isLoading"
+    :error="error"
+    :has-data="entities.length > 0"
+    :show-empty="false"
+    skeleton-variant="table"
+    :skeleton-count="8"
+    :skeleton-columns="columns.length + 1"
+  >
+    <div class="content-list-view">
+      <div class="section-header">
+        <div class="header-left">
+          <h1 class="section-title">{{ t('All {items}', { items: t(pageNamePlural) }) }}</h1>
+        </div>
+        <div class="header-right">
+          <SearchInput
+            v-model="searchQuery"
+            :placeholder="t('Search {items}...', { items: t(pageNamePlural).toLowerCase() })"
+          />
+          <ViewToggle v-model="currentView" />
+        </div>
+      </div>
+
+      <ContentTable
+        v-if="currentView === 'table'"
+        :entities="entities"
+        :columns="columns"
+        :page-name="pageName"
+        :page-name-plural="pageNamePlural"
+        :header-type="headerType"
+        :default-item-id="defaultItemId"
+        :is-loading="false"
+        :error="null"
+        :hide-header="true"
+        :search-query="searchQuery"
+        @edit="$emit('edit', $event)"
+        @delete="$emit('delete', $event)"
+      />
+
+      <div v-else class="cards-view">
+        <div class="cards-grid" :class="cardLayoutClass">
+          <slot
+            v-for="entity in paginatedEntities"
+            :key="entity.id"
+            name="card"
+            :entity="entity"
+            :is-default="String(entity.id) === defaultItemId"
+          >
+            <ContentCardGrid
+              :entities="[entity]"
+              :card-fields="cardFields"
+              :default-item-id="defaultItemId"
+              @edit="$emit('edit', $event)"
+              @delete="$emit('delete', $event)"
+            />
+          </slot>
+        </div>
+
+        <div v-if="totalPages > 1" class="pagination-row">
+          <div class="pagination-controls">
+            <TButton
+              variant="secondary"
+              size="small"
+              :full-width="false"
+              :disabled="currentPage === 1"
+              @click="currentPage--"
+            >
+              &lt; {{ t('Prev') }}
+            </TButton>
+
+            <template v-for="(page, idx) in visiblePages" :key="idx">
+              <span v-if="page === '...'" class="pagination-ellipsis">...</span>
+              <TButton
+                v-else
+                :variant="page === currentPage ? 'primary' : 'secondary'"
+                size="small"
+                :full-width="false"
+                class="page-num-btn"
+                @click="currentPage = page"
+              >
+                {{ page }}
+              </TButton>
+            </template>
+
+            <TButton
+              variant="secondary"
+              size="small"
+              :full-width="false"
+              :disabled="currentPage === totalPages"
+              @click="currentPage++"
+            >
+              {{ t('Next') }} &gt;
+            </TButton>
+          </div>
+
+          <div class="page-info">
+            <span>{{ t('Show') }}</span>
+            <select v-model="perPage" class="per-page-select">
+              <option :value="12">12</option>
+              <option :value="24">24</option>
+              <option :value="48">48</option>
+            </select>
+            <span>{{ t('per page') }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ComponentLoader>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import ComponentLoader from './ComponentLoader.vue';
+import SearchInput from './SearchInput.vue';
+import ViewToggle from './ViewToggle.vue';
+import ContentTable from './ContentTable.vue';
+import ContentCardGrid from './ContentCardGrid.vue';
+import TButton from './TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((key, params) => {
+  if (params?.items) return `All ${params.items}`;
+  return key;
+});
+
+const props = defineProps({
+  entities: {
+    type: Array,
+    default: () => []
+  },
+  columns: {
+    type: Array,
+    required: true
+  },
+  cardFields: {
+    type: Array,
+    default: () => []
+  },
+  pageName: {
+    type: String,
+    required: true
+  },
+  pageNamePlural: {
+    type: String,
+    required: true
+  },
+  headerType: {
+    type: String,
+    default: 'default'
+  },
+  defaultItemId: {
+    type: String,
+    default: null
+  },
+  isLoading: {
+    type: Boolean,
+    default: false
+  },
+  error: {
+    type: String,
+    default: null
+  },
+  initialView: {
+    type: String,
+    default: 'cards',
+    validator: (value) => ['table', 'cards'].includes(value)
+  },
+  cardLayout: {
+    type: String,
+    default: 'grid',
+    validator: (value) => ['horizontal', 'grid'].includes(value)
+  },
+  gridColumns: {
+    type: [Number, String],
+    default: 'auto'
+  }
+});
+
+defineEmits(['edit', 'delete']);
+
+const cardLayoutClass = computed(() => {
+  const classes = [`layout-${props.cardLayout}`];
+  if (props.cardLayout === 'grid' && props.gridColumns !== 'auto') {
+    classes.push(`columns-${props.gridColumns}`);
+  }
+  return classes;
+});
+
+const currentView = ref(props.initialView);
+const searchQuery = ref('');
+const currentPage = ref(1);
+const perPage = ref(12);
+
+const filteredEntities = computed(() => {
+  if (!searchQuery.value) return props.entities;
+  const query = searchQuery.value.toLowerCase();
+  return props.entities.filter(
+    (entity) =>
+      entity.name?.toLowerCase().includes(query) ||
+      entity.description?.toLowerCase().includes(query)
+  );
+});
+
+const totalPages = computed(() =>
+  Math.max(1, Math.ceil(filteredEntities.value.length / perPage.value))
+);
+
+const paginatedEntities = computed(() => {
+  const start = (currentPage.value - 1) * perPage.value;
+  return filteredEntities.value.slice(start, start + perPage.value);
+});
+
+watch(searchQuery, () => {
+  currentPage.value = 1;
+});
+
+watch(perPage, () => {
+  const maxPage = Math.max(1, Math.ceil(filteredEntities.value.length / perPage.value));
+  if (currentPage.value > maxPage) {
+    currentPage.value = maxPage;
+  }
+});
+
+const visiblePages = computed(() => {
+  const total = totalPages.value;
+  const current = currentPage.value;
+  const pages = [];
+
+  if (total <= 7) {
+    for (let i = 1; i <= total; i++) {
+      pages.push(i);
+    }
+  } else {
+    pages.push(1);
+
+    if (current > 3) {
+      pages.push('...');
+    }
+
+    const start = Math.max(2, current - 1);
+    const end = Math.min(start + 2, total - 1);
+
+    for (let i = start; i <= end; i++) {
+      pages.push(i);
+    }
+
+    if (current < total - 2) {
+      pages.push('...');
+    }
+
+    pages.push(total);
+  }
+
+  return pages;
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.content-list-view {
+  width: 100%;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  gap: 1rem;
+  flex-wrap: wrap;
+
+  @media (max-width: $breakpoint-md) {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+.header-left {
+  flex-shrink: 0;
+}
+
+.section-title {
+  margin: 0;
+  font-size: $font-size-base;
+  font-weight: $font-medium;
+  color: $text-primary;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+
+  @media (max-width: $breakpoint-sm) {
+    flex-direction: column;
+    align-items: stretch;
+
+    :deep(.view-toggle) {
+      align-self: flex-end;
+    }
+  }
+}
+
+.cards-view {
+  width: 100%;
+}
+
+.cards-grid {
+  width: 100%;
+
+  &.layout-horizontal {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-3;
+  }
+
+  &.layout-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: $spacing-4;
+
+    @media (max-width: $breakpoint-md) {
+      gap: $spacing-3;
+    }
+
+    @media (max-width: $breakpoint-sm) {
+      grid-template-columns: 1fr;
+      gap: $spacing-2;
+    }
+
+    &.columns-4 {
+      grid-template-columns: repeat(4, 1fr);
+
+      @media (max-width: $breakpoint-lg) {
+        grid-template-columns: repeat(3, 1fr);
+      }
+
+      @media (max-width: $breakpoint-md) {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      @media (max-width: $breakpoint-sm) {
+        grid-template-columns: 1fr;
+      }
+    }
+  }
+}
+
+.pagination-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  background-color: $bg-gray;
+  border-radius: $radius-xl;
+  margin-top: 1rem;
+  gap: 1rem;
+
+  @media (max-width: $breakpoint-md) {
+    flex-direction: column-reverse;
+    gap: 1rem;
+    padding: 0.75rem;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+}
+
+.pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  @media (max-width: $breakpoint-sm) {
+    gap: 0.25rem;
+    flex: 1;
+  }
+}
+
+.page-num-btn {
+  min-width: 36px;
+  height: 32px;
+  padding: 0 0.5rem;
+}
+
+.pagination-ellipsis {
+  padding: 0 0.25rem;
+  color: $text-muted;
+  font-size: 0.875rem;
+}
+
+.page-info {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: $text-muted;
+  font-size: 0.875rem;
+  white-space: nowrap;
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 0.75rem;
+    gap: 0.25rem;
+    flex-shrink: 0;
+  }
+}
+
+.per-page-select {
+  padding: 0.25rem 1.5rem 0.25rem 0.5rem;
+  border: 1px solid $border-light;
+  border-radius: $radius-md;
+  background: $bg-white;
+  color: $text-secondary;
+  font-size: 0.875rem;
+  cursor: pointer;
+  height: 32px;
+  transition: all 0.2s ease;
+
+  &:focus {
+    outline: none;
+    border-color: $primary;
+  }
+}
+</style>
diff --git a/components/ContentSection.stories.js b/components/ContentSection.stories.js
new file mode 100644
index 0000000..b1840d1
--- /dev/null
+++ b/components/ContentSection.stories.js
@@ -0,0 +1,76 @@
+import ContentSection from './ContentSection.vue';
+import TButton from './TButton.vue';
+import TCard from './TCard.vue';
+
+export default {
+  title: 'Components/ContentSection',
+  component: ContentSection,
+  tags: ['autodocs'],
+  argTypes: {
+    pageName: { control: 'text' },
+    pageNamePlural: { control: 'text' },
+    empty: { control: 'boolean' },
+    modelValue: { control: 'boolean' }
+  }
+};
+
+export const Default = {
+  args: {
+    pageName: 'Category',
+    pageNamePlural: 'Categories',
+    empty: false,
+    modelValue: false
+  },
+  render: (args) => ({
+    components: { ContentSection, TCard },
+    setup: () => ({ args }),
+    template: `
+      <ContentSection v-bind="args">
+        <TCard style="width: 100%; text-align: center; padding: 2rem;">
+          <p style="margin: 0; color: var(--color-text-secondary);">Table or card view mounts here in default slot.</p>
+        </TCard>
+      </ContentSection>
+    `
+  })
+};
+
+export const EmptyStateExample = {
+  args: {
+    pageName: 'Wallet',
+    pageNamePlural: 'Wallets',
+    empty: true,
+    modelValue: false
+  }
+};
+
+export const WithSlottedForm = {
+  args: {
+    pageName: 'Group',
+    pageNamePlural: 'Groups',
+    modelValue: true
+  },
+  render: (args) => ({
+    components: { ContentSection, TCard, TButton },
+    setup: () => ({ args }),
+    template: `
+      <ContentSection v-bind="args">
+        <template #form="{ close }">
+          <TCard style="padding: 1.5rem;">
+            <h3>Create New Group</h3>
+            <p style="color: var(--color-text-muted);">Form inputs live here...</p>
+            <div style="margin-top: 1rem; display: flex; gap: 8px;">
+              <TButton variant="primary" text="Save" />
+              <TButton variant="secondary" text="Cancel" @click="close" />
+            </div>
+          </TCard>
+        </template>
+        <template #tips>
+          <TCard style="padding: 1.5rem;">
+            <h4>Tips</h4>
+            <p style="font-size: 0.875rem; color: var(--color-text-muted);">Organize wallets into groups for family or business.</p>
+          </TCard>
+        </template>
+      </ContentSection>
+    `
+  })
+};
diff --git a/components/ContentSection.vue b/components/ContentSection.vue
new file mode 100644
index 0000000..2341c3d
--- /dev/null
+++ b/components/ContentSection.vue
@@ -0,0 +1,167 @@
+<template>
+  <div class="content-section-layout">
+    <slot name="header">
+      <TTopCard
+        v-if="!showForm && pageName && pageNamePlural"
+        :page-name="pageName"
+        :page-name-plural="pageNamePlural"
+        @add="openForm"
+      />
+    </slot>
+
+    <div class="content-area">
+      <div v-if="showForm" class="form-section">
+        <div class="form-wrapper">
+          <slot name="form" :close="closeForm" />
+        </div>
+        <div v-if="$slots.tips" class="tips-wrapper">
+          <slot name="tips" />
+        </div>
+      </div>
+
+      <slot v-else :open-form="openForm">
+        <EmptyState
+          v-if="empty && pageName"
+          :page-name="pageName"
+          @create="openForm"
+        />
+      </slot>
+    </div>
+
+    <div v-if="$slots.footer" class="footer-section">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import TTopCard from './TTopCard.vue';
+import EmptyState from './EmptyState.vue';
+
+const props = defineProps({
+  pageName: {
+    type: String,
+    default: ''
+  },
+  pageNamePlural: {
+    type: String,
+    default: ''
+  },
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  empty: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'open', 'close']);
+
+const showForm = ref(props.modelValue);
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    showForm.value = val;
+  }
+);
+
+const openForm = () => {
+  showForm.value = true;
+  emit('update:modelValue', true);
+  emit('open');
+};
+
+const closeForm = () => {
+  showForm.value = false;
+  emit('update:modelValue', false);
+  emit('close');
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.content-section-layout {
+  width: 100%;
+}
+
+.content-area {
+  margin-top: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  align-items: center;
+  width: 100%;
+
+  @media (max-width: $breakpoint-md) {
+    margin-top: 1.5rem;
+    gap: 1.5rem;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    margin-top: 1rem;
+    gap: 1rem;
+  }
+}
+
+.form-section {
+  display: flex;
+  justify-content: space-between;
+  gap: 3rem;
+  width: 100%;
+  max-width: 1400px;
+  align-self: center;
+  margin: 0 auto;
+  padding: 0 1rem;
+
+  @media (max-width: $breakpoint-lg) {
+    gap: 2rem;
+    padding: 0 0.75rem;
+  }
+
+  @media (max-width: $breakpoint-md) {
+    gap: 1.5rem;
+    padding: 0 0.5rem;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    flex-direction: column;
+    gap: 1rem;
+    padding: 0 0.25rem;
+  }
+}
+
+.form-wrapper {
+  flex: 1;
+  min-width: 0;
+  max-width: 800px;
+
+  @media (max-width: $breakpoint-sm) {
+    max-width: 100%;
+    width: 100%;
+  }
+}
+
+.tips-wrapper {
+  flex-shrink: 0;
+  width: 340px;
+
+  @media (max-width: $breakpoint-lg) {
+    width: 280px;
+  }
+
+  @media (max-width: $breakpoint-md) {
+    display: none;
+  }
+}
+
+.footer-section {
+  display: flex;
+  justify-content: center;
+  margin-top: 6rem;
+}
+</style>
diff --git a/components/ContentTable.stories.js b/components/ContentTable.stories.js
new file mode 100644
index 0000000..56ba4b2
--- /dev/null
+++ b/components/ContentTable.stories.js
@@ -0,0 +1,48 @@
+import ContentTable from './ContentTable.vue';
+
+export default {
+  title: 'Components/ContentTable',
+  component: ContentTable,
+  tags: ['autodocs'],
+};
+
+const entities = [
+  { id: '1', name: 'Food & Drink', icon: 'UtensilsCrossed', description: 'Restaurants, groceries, coffee' },
+  { id: '2', name: 'Transport', icon: 'Car', description: 'Fuel, public transit, ride-hailing' },
+  { id: '3', name: 'Healthcare', icon: 'HeartPulse', description: 'Pharmacy, appointments, insurance' },
+  { id: '4', name: 'Entertainment', icon: 'Tv2', description: 'Streaming, events, games' },
+  { id: '5', name: 'Salary', icon: 'Briefcase', description: 'Monthly net salary income' },
+];
+
+export const Default = {
+  args: {
+    entities,
+    defaultItemId: '5',
+    title: 'All Categories',
+    searchPlaceholder: 'Search categories...',
+    defaultBadgeLabel: 'Default',
+    editLabel: 'Edit category',
+    deleteLabel: 'Delete category',
+    emptyText: 'No categories found.',
+    columns: [
+      { key: 'name', label: 'Name' },
+      { key: 'description', label: 'Description' },
+    ]
+  }
+};
+
+export const Loading = {
+  args: {
+    ...Default.args,
+    isLoading: true,
+    entities: []
+  }
+};
+
+export const Empty = {
+  args: {
+    ...Default.args,
+    entities: [],
+    emptyText: 'No categories added yet.'
+  }
+};
diff --git a/components/ContentTable.vue b/components/ContentTable.vue
new file mode 100644
index 0000000..030aece
--- /dev/null
+++ b/components/ContentTable.vue
@@ -0,0 +1,504 @@
+<template>
+  <ComponentLoader
+    :is-loading="isLoading"
+    :error="error"
+    :has-data="entities.length > 0"
+    :show-empty="false"
+    skeleton-variant="table"
+    :skeleton-count="8"
+    :skeleton-columns="computedColumns.length + 1"
+  >
+    <div class="entity-list">
+      <div v-if="!hideHeader" class="header-row">
+        <slot name="header-title">
+          <h2 class="header-title">{{ title }}</h2>
+        </slot>
+        <SearchInput
+          v-model="internalSearchQuery"
+          :placeholder="searchPlaceholder"
+        />
+      </div>
+
+      <div class="table-wrapper">
+        <div class="table-scroll">
+          <table class="content-table" :class="{ 'expense-table': headerType === 'expense' }">
+            <thead>
+              <tr>
+                <th
+                  v-for="col in computedColumns"
+                  :key="col.key"
+                  :style="col.width ? { width: col.width } : {}"
+                  :class="[`col-${col.key}`, col.align ? `text-${col.align}` : '']"
+                >
+                  {{ col.label }}
+                </th>
+                <th class="col-action">{{ actionColumnLabel }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="entity in paginatedEntities"
+                :key="entity.id"
+                class="entity-row"
+                :class="{ 'is-default': String(entity.id) === defaultItemId }"
+              >
+                <td
+                  v-for="col in computedColumns"
+                  :key="col.key"
+                  :class="[`col-${col.key}`, col.align ? `text-${col.align}` : '']"
+                >
+                  <template v-if="col.key === 'name'">
+                    <div class="name-cell">
+                      <component :is="getIcon(entity)" v-if="getIcon(entity)" class="entity-icon" />
+                      <span class="name-text">{{ entity.name }}</span>
+                      <span v-if="String(entity.id) === defaultItemId" class="default-badge">
+                        {{ defaultBadgeLabel }}
+                      </span>
+                    </div>
+                  </template>
+                  <template v-else-if="col.render">
+                    {{ col.render(entity[col.key], entity) }}
+                  </template>
+                  <template v-else>
+                    {{ getCellValue(entity, col.key) }}
+                  </template>
+                </td>
+                <td class="col-action">
+                  <div class="entity-actions">
+                    <slot name="row-actions" :entity="entity">
+                      <TButton
+                        variant="text"
+                        size="small"
+                        :full-width="false"
+                        class="action-btn action-btn--edit"
+                        :aria-label="editLabel"
+                        :title="editLabel"
+                        @click="$emit('edit', entity)"
+                      >
+                        <Edit :size="15" />
+                      </TButton>
+                      <TButton
+                        variant="text"
+                        size="small"
+                        :full-width="false"
+                        class="action-btn action-btn--delete"
+                        :aria-label="deleteLabel"
+                        :title="deleteLabel"
+                        @click="$emit('delete', entity)"
+                      >
+                        <Trash2 :size="15" />
+                      </TButton>
+                    </slot>
+                  </div>
+                </td>
+              </tr>
+              <tr v-if="paginatedEntities.length === 0">
+                <td :colspan="computedColumns.length + 1" class="empty-row">
+                  <slot name="empty">{{ emptyText }}</slot>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="pagination-row">
+          <div class="pagination-controls">
+            <TButton
+              variant="text"
+              size="small"
+              :full-width="false"
+              :disabled="currentPage <= 1"
+              :aria-label="prevPageLabel"
+              class="pagination-nav-btn"
+              @click="currentPage--"
+            >
+              <ChevronLeft :size="16" />
+            </TButton>
+
+            <template v-for="page in visiblePages" :key="page">
+              <span v-if="page === '...'" class="pagination-ellipsis">…</span>
+              <TButton
+                v-else
+                :variant="page === currentPage ? 'primary' : 'text'"
+                size="small"
+                :full-width="false"
+                class="pagination-page-btn"
+                @click="currentPage = page"
+              >
+                {{ page }}
+              </TButton>
+            </template>
+
+            <TButton
+              variant="text"
+              size="small"
+              :full-width="false"
+              :disabled="currentPage >= totalPages"
+              :aria-label="nextPageLabel"
+              class="pagination-nav-btn"
+              @click="currentPage++"
+            >
+              <ChevronRight :size="16" />
+            </TButton>
+          </div>
+
+          <div class="page-info">
+            <span>{{ showLabel }}</span>
+            <select v-model="perPage" class="per-page-select">
+              <option :value="10">10</option>
+              <option :value="25">25</option>
+              <option :value="50">50</option>
+            </select>
+            <span>{{ perPageLabel }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ComponentLoader>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { Edit, Trash2, ChevronLeft, ChevronRight } from 'lucide-vue-next';
+import * as LucideIcons from 'lucide-vue-next';
+import ComponentLoader from './ComponentLoader.vue';
+import SearchInput from './SearchInput.vue';
+import TButton from './TButton.vue';
+
+const props = defineProps({
+  entities: { type: Array, default: () => [] },
+  columns: { type: Array, default: null },
+  isLoading: { type: Boolean, default: false },
+  error: { type: String, default: null },
+  headerType: { type: String, default: 'default' },
+  defaultItemId: { type: String, default: null },
+  hideHeader: { type: Boolean, default: false },
+  searchQuery: { type: String, default: '' },
+  // i18n / labels — pass pre-translated strings from the host app
+  title: { type: String, default: '' },
+  searchPlaceholder: { type: String, default: 'Search...' },
+  actionColumnLabel: { type: String, default: 'Action' },
+  defaultBadgeLabel: { type: String, default: 'Default' },
+  editLabel: { type: String, default: 'Edit' },
+  deleteLabel: { type: String, default: 'Delete' },
+  emptyText: { type: String, default: 'No items found.' },
+  showLabel: { type: String, default: 'Show' },
+  perPageLabel: { type: String, default: 'per page' },
+  prevPageLabel: { type: String, default: 'Previous page' },
+  nextPageLabel: { type: String, default: 'Next page' },
+  defaultColumns: {
+    type: Array,
+    default: () => [
+      { key: 'name', label: 'Name' },
+      { key: 'description', label: 'Description' }
+    ]
+  }
+});
+
+defineEmits(['edit', 'delete']);
+
+const computedColumns = computed(() => props.columns || props.defaultColumns);
+
+const getIcon = (entity) => {
+  const iconValue = entity.icon?.path || entity.icon?.content || entity.icon;
+  if (!iconValue) return null;
+  return LucideIcons[iconValue] || LucideIcons.Box;
+};
+
+const getCellValue = (entity, key) => {
+  if (key.includes('.')) {
+    return key.split('.').reduce((obj, k) => obj?.[k], entity) ?? '';
+  }
+  return entity[key] ?? '';
+};
+
+const internalSearchQuery = ref('');
+const currentPage = ref(1);
+const perPage = ref(10);
+
+const effectiveSearchQuery = computed(() =>
+  props.hideHeader ? props.searchQuery : internalSearchQuery.value
+);
+
+const filteredEntities = computed(() => {
+  if (!effectiveSearchQuery.value) return props.entities;
+  const query = effectiveSearchQuery.value.toLowerCase();
+  return props.entities.filter(
+    (entity) =>
+      entity.name?.toLowerCase().includes(query) ||
+      entity.description?.toLowerCase().includes(query)
+  );
+});
+
+const totalPages = computed(() =>
+  Math.max(1, Math.ceil(filteredEntities.value.length / perPage.value))
+);
+
+const paginatedEntities = computed(() => {
+  const start = (currentPage.value - 1) * perPage.value;
+  return filteredEntities.value.slice(start, start + perPage.value);
+});
+
+watch(effectiveSearchQuery, () => { currentPage.value = 1; });
+watch(perPage, () => {
+  const maxPage = Math.max(1, Math.ceil(filteredEntities.value.length / perPage.value));
+  if (currentPage.value > maxPage) currentPage.value = maxPage;
+});
+
+const visiblePages = computed(() => {
+  const total = totalPages.value;
+  const current = currentPage.value;
+  const pages = [];
+
+  if (total <= 7) {
+    for (let i = 1; i <= total; i++) pages.push(i);
+  } else {
+    pages.push(1);
+    if (current > 3) pages.push('...');
+    const start = Math.max(2, current - 1);
+    const end = Math.min(start + 2, total - 1);
+    for (let i = start; i <= end; i++) pages.push(i);
+    if (current < total - 2) pages.push('...');
+    pages.push(total);
+  }
+
+  return pages;
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.entity-list {
+  width: 100%;
+}
+
+.header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: $spacing-4;
+  gap: $spacing-4;
+
+  @media (max-width: $breakpoint-md) {
+    flex-direction: column;
+    align-items: stretch;
+    gap: $spacing-3;
+  }
+}
+
+.header-title {
+  margin: 0;
+  font-size: $font-size-base;
+  font-weight: $font-semibold;
+  color: $text-primary;
+}
+
+.table-wrapper {
+  width: 100%;
+  background: $bg-white;
+  border: 1px solid $border-light;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-sm;
+  overflow: hidden;
+}
+
+.table-scroll {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.content-table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 500px;
+
+  thead tr {
+    background: rgba(var(--color-primary-rgb), 0.06);
+  }
+
+  thead th {
+    color: $primary-dark;
+    font-weight: $font-bold;
+    text-align: left;
+    padding: 8px 16px;
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    white-space: nowrap;
+    border-bottom: 1px solid $border-light;
+
+    &:first-child { padding-left: 20px; }
+    &.text-right { text-align: right; }
+    &.text-center { text-align: center; }
+  }
+
+  &.expense-table thead tr {
+    background: rgba(var(--color-expense-rgb), 0.08);
+    th { color: var(--color-expense); }
+  }
+
+  tbody {
+    .entity-row {
+      transition: background-color $duration-fast $easing-standard;
+
+      &:hover { background: rgba(var(--color-primary-rgb), 0.03); }
+      &.is-default { background: rgba(var(--color-success-rgb), 0.06); }
+      &:last-child td { border-bottom: none; }
+
+      td {
+        padding: 8px 16px;
+        border-bottom: 1px solid $border-light;
+        font-size: $font-size-sm;
+        vertical-align: middle;
+
+        &:first-child { padding-left: 20px; }
+        &.text-right { text-align: right; }
+        &.text-center { text-align: center; }
+      }
+    }
+  }
+}
+
+.name-cell {
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+}
+
+.entity-icon {
+  width: 18px;
+  height: 18px;
+  color: $primary;
+  flex-shrink: 0;
+}
+
+.name-text {
+  font-weight: $font-medium;
+  color: $text-primary;
+}
+
+.default-badge {
+  display: inline-flex;
+  background: $primary;
+  color: $text-inverse;
+  font-size: 0.6rem;
+  font-weight: $font-bold;
+  padding: 2px 6px;
+  border-radius: $radius-sm;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  flex-shrink: 0;
+}
+
+.col-action {
+  text-align: right;
+  white-space: nowrap;
+  width: 96px;
+  padding-right: 20px !important;
+}
+
+.entity-actions {
+  display: inline-flex;
+  gap: 2px;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.action-btn {
+  padding: 4px;
+  min-height: auto;
+  width: 28px;
+  height: 28px;
+  border-radius: $radius-sm;
+
+  &--edit { color: $primary; &:hover { background: rgba(var(--color-primary-rgb), 0.1); } }
+  &--delete { color: $error-color; &:hover { background: rgba(var(--color-error-rgb), 0.1); } }
+}
+
+.empty-row {
+  text-align: center;
+  padding: 2.5rem 1rem !important;
+  color: $text-muted;
+  font-size: $font-size-sm;
+}
+
+.pagination-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: $spacing-3 $spacing-4;
+  border-top: 1px solid $border-light;
+  gap: $spacing-3;
+
+  @media (max-width: $breakpoint-md) {
+    flex-direction: column-reverse;
+    gap: $spacing-2;
+    padding: $spacing-3;
+  }
+}
+
+.pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-wrap: wrap;
+}
+
+.pagination-nav-btn {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  min-height: auto;
+  border-radius: $radius-md;
+  color: $text-muted;
+}
+
+.pagination-page-btn {
+  min-width: 32px;
+  height: 32px;
+  padding: 0 8px;
+  min-height: auto;
+  border-radius: $radius-md;
+  font-variant-numeric: tabular-nums;
+}
+
+.pagination-ellipsis {
+  color: $text-muted;
+  padding: 0 4px;
+  font-size: $font-size-sm;
+  line-height: 32px;
+}
+
+.page-info {
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+  color: $text-muted;
+  font-size: $font-size-sm;
+  white-space: nowrap;
+}
+
+.per-page-select {
+  padding: 4px 28px 4px 10px;
+  border: 1px solid $border-medium;
+  border-radius: $radius-md;
+  background: $bg-white;
+  color: $text-secondary;
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 6px center;
+  background-repeat: no-repeat;
+  background-size: 1.1em;
+  height: 32px;
+
+  &:focus {
+    outline: none;
+    border-color: $primary;
+    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
+  }
+}
+</style>
diff --git a/components/EmptyState.stories.js b/components/EmptyState.stories.js
new file mode 100644
index 0000000..4dc95f6
--- /dev/null
+++ b/components/EmptyState.stories.js
@@ -0,0 +1,46 @@
+import EmptyState from './EmptyState.vue';
+import { Wallet } from 'lucide-vue-next';
+
+export default {
+  title: 'Primitives/EmptyState',
+  component: EmptyState,
+  argTypes: {
+    title: { control: 'text' },
+    description: { control: 'text' },
+    actionLabel: { control: 'text' },
+  },
+};
+
+export const Default = {
+  args: {
+    title: 'No items found',
+    description: 'There are currently no items in this view.',
+    actionLabel: 'Add item',
+  },
+};
+
+export const Wallets = {
+  args: {
+    title: 'No wallets yet',
+    description: 'Please add at least one wallet to track your finances.',
+    actionLabel: 'Add wallet',
+    icon: Wallet,
+  },
+};
+
+export const CustomSlots = {
+  render: () => ({
+    components: { EmptyState },
+    template: `
+      <EmptyState>
+        <template #title>Custom Slotted Title</template>
+        <template #description>This description is injected via slot.</template>
+        <template #actions>
+          <button style="padding: 8px 16px; background: #047844; color: white; border: none; border-radius: 8px; cursor: pointer;">
+            Custom Action
+          </button>
+        </template>
+      </EmptyState>
+    `
+  })
+};
diff --git a/components/EmptyState.vue b/components/EmptyState.vue
new file mode 100644
index 0000000..4bf5ccc
--- /dev/null
+++ b/components/EmptyState.vue
@@ -0,0 +1,144 @@
+<template>
+  <div class="empty-state">
+    <div class="empty-art">
+      <slot name="icon">
+        <component :is="resolvedIcon" class="empty-illustration" />
+      </slot>
+    </div>
+    <h2 class="empty-title">
+      <slot name="title">{{ title }}</slot>
+    </h2>
+    <p v-if="description || $slots.description" class="empty-subtitle">
+      <slot name="description">{{ description }}</slot>
+    </p>
+    <slot name="actions">
+      <TButton
+        v-if="actionLabel"
+        variant="primary"
+        size="medium"
+        :full-width="false"
+        class="add-entity-btn"
+        @click="$emit('create')"
+      >
+        <template #left-icon>
+          <PlusIcon class="button-icon" />
+        </template>
+        {{ actionLabel }}
+      </TButton>
+    </slot>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { PlusIcon } from '@heroicons/vue/24/outline';
+import { Package as IconBox } from 'lucide-vue-next';
+import TButton from './TButton.vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: 'No items yet'
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+  actionLabel: {
+    type: String,
+    default: ''
+  },
+  icon: {
+    type: [Object, Function],
+    default: null
+  }
+});
+
+defineEmits(['create']);
+
+const resolvedIcon = computed(() => props.icon || IconBox);
+</script>
+
+<style scoped lang="scss">
+@use '../assets/scss/_vars.scss' as *;
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 3rem 1rem;
+  min-height: 50vh;
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 2rem 0.5rem;
+    min-height: 40vh;
+  }
+}
+
+.empty-art {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 140px;
+  height: 140px;
+  margin-bottom: 1.5rem;
+  border-radius: 50%;
+  background: radial-gradient(circle at 30% 25%, $primary-light, $bg-light 70%);
+
+  @media (max-width: $breakpoint-sm) {
+    width: 112px;
+    height: 112px;
+    margin-bottom: 1rem;
+  }
+}
+
+.empty-illustration {
+  width: 72px;
+  height: 72px;
+  color: $primary;
+
+  @media (max-width: $breakpoint-sm) {
+    width: 58px;
+    height: 58px;
+  }
+}
+
+.empty-title {
+  color: $text-primary;
+  font-size: 1.6rem;
+  font-weight: $font-bold;
+  margin: 0 1rem 0.5rem;
+  line-height: 1.25;
+  max-width: 28ch;
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 1.3rem;
+  }
+}
+
+.empty-subtitle {
+  color: $text-muted;
+  font-size: 1rem;
+  margin: 0 0 2rem;
+  line-height: 1.5;
+  max-width: 42ch;
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 0.95rem;
+    margin-bottom: 1.5rem;
+  }
+}
+
+.add-entity-btn {
+  border-radius: $radius-xl;
+
+  .button-icon {
+    width: 1.1rem;
+    height: 1.1rem;
+    flex-shrink: 0;
+    stroke-width: 2;
+  }
+}
+</style>
diff --git a/components/FormSection.stories.js b/components/FormSection.stories.js
new file mode 100644
index 0000000..97a7ddb
--- /dev/null
+++ b/components/FormSection.stories.js
@@ -0,0 +1,28 @@
+import FormSection from './FormSection.vue';
+
+const wallets = [
+  { id: 1, name: 'Main Bank Account', currency: 'USD' },
+  { id: 2, name: 'Cash Wallet', currency: 'USD' }
+];
+const categories = [
+  { id: 1, name: 'Food & Dining', type: 'expense' },
+  { id: 2, name: 'Salary', type: 'income' }
+];
+const groups = [{ id: 1, name: 'General' }];
+
+export default {
+  title: 'Domain/Transactions/FormSection',
+  component: FormSection,
+  args: {
+    isSubmitting: false,
+    wallets,
+    groups,
+    incomeCategories: categories.filter((c) => c.type === 'income'),
+    expenseCategories: categories.filter((c) => c.type === 'expense'),
+    defaultCurrency: 'USD',
+    defaultGroup: groups[0],
+    defaultWallet: wallets[0]
+  }
+};
+
+export const Default = {};
diff --git a/components/FormSection.vue b/components/FormSection.vue
new file mode 100644
index 0000000..4d570ff
--- /dev/null
+++ b/components/FormSection.vue
@@ -0,0 +1,221 @@
+<template>
+  <div class="transaction-tabs">
+    <div class="tab-buttons">
+      <TButton
+        variant="text"
+        size="small"
+        :full-width="false"
+        class="tab-button tab-button--expense"
+        :class="{ active: isExpenseSelected }"
+        :disabled="props.isSubmitting"
+        @click="selectExpense"
+      >
+        <ArrowUpTrayIcon class="tab-icon" />
+        {{ t('Expense') }}
+      </TButton>
+      <TButton
+        variant="text"
+        size="small"
+        :full-width="false"
+        class="tab-button tab-button--income"
+        :class="{ active: isIncomeSelected }"
+        :disabled="props.isSubmitting"
+        @click="selectIncome"
+      >
+        <ArrowDownTrayIcon class="tab-icon" />
+        {{ t('Income') }}
+      </TButton>
+      <TButton
+        variant="text"
+        size="small"
+        :full-width="false"
+        class="tab-button tab-button--transfer"
+        :class="{ active: isTransferSelected }"
+        :disabled="props.isSubmitting"
+        @click="selectTransfer"
+      >
+        <ArrowsRightLeftIcon class="tab-icon" />
+        {{ t('Transfer') }}
+      </TButton>
+    </div>
+
+    <div class="tab-content">
+      <TransactionFormContainer
+        v-if="!isTransferSelected"
+        v-bind="$attrs"
+        :is-outcome-selected="isExpenseSelected"
+        :editing-item="props.editingItem"
+        :is-submitting="props.isSubmitting"
+        @submit="handleTransactionSubmit"
+      />
+      <TransferFormContainer
+        v-else
+        v-bind="$attrs"
+        :is-submitting="props.isSubmitting"
+        @submit="handleTransferSubmit"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { ArrowDownTrayIcon, ArrowUpTrayIcon, ArrowsRightLeftIcon } from '@heroicons/vue/24/outline';
+import TransactionFormContainer from './TransactionFormContainer.vue';
+import TransferFormContainer from './TransferFormContainer.vue';
+import TButton from './TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  editingItem: { type: Object, default: null },
+  isSubmitting: { type: Boolean, default: false }
+});
+
+const emit = defineEmits(['submit', 'transfer']);
+
+const isIncomeSelected = ref(false);
+const isExpenseSelected = ref(true);
+const isTransferSelected = ref(false);
+
+const selectIncome = () => {
+  isIncomeSelected.value = true;
+  isExpenseSelected.value = false;
+  isTransferSelected.value = false;
+};
+
+const selectExpense = () => {
+  isExpenseSelected.value = true;
+  isIncomeSelected.value = false;
+  isTransferSelected.value = false;
+};
+
+const selectTransfer = () => {
+  isTransferSelected.value = true;
+  isExpenseSelected.value = false;
+  isIncomeSelected.value = false;
+};
+
+const handleTransactionSubmit = (data) => {
+  emit('submit', data);
+};
+
+const handleTransferSubmit = (data) => {
+  emit('transfer', data);
+};
+
+// When editing, reflect the transaction type into the toggle
+watch(
+  () => props.editingItem,
+  (item) => {
+    if (!item) return;
+    if (item.type === 'EXPENSE') {
+      isExpenseSelected.value = true;
+      isIncomeSelected.value = false;
+      isTransferSelected.value = false;
+    } else {
+      isIncomeSelected.value = true;
+      isExpenseSelected.value = false;
+      isTransferSelected.value = false;
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.transaction-tabs {
+  width: 100%;
+  max-width: 800px;
+}
+
+.tab-buttons {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+  border-bottom: 2px solid $border-color;
+
+  @media (max-width: $breakpoint-sm) {
+    gap: 0.25rem;
+    margin-bottom: 1rem;
+  }
+}
+
+.tab-button {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem 1.5rem;
+  background: transparent;
+  border: none;
+  border-bottom: 3px solid transparent;
+  color: $text-secondary;
+  font-weight: 500;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border-radius: $radius-lg $radius-lg 0 0;
+
+  :deep(.button__text) {
+    gap: 0.5rem;
+  }
+
+  @media (max-width: $breakpoint-md) {
+    padding: 0.625rem 1.25rem;
+    font-size: 0.95rem;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 0.5rem 0.875rem;
+    font-size: 0.875rem;
+  }
+
+  &:hover {
+    background: $bg-slate;
+    color: $primary;
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  &.active {
+    color: $primary;
+    background: $primary-light;
+    border-bottom-color: $primary;
+  }
+
+  &--expense:hover {
+    color: $error-color;
+  }
+
+  &--expense.active {
+    color: $error-color;
+    background: rgba(var(--color-error-rgb), 0.1);
+    border-bottom-color: $error-color;
+  }
+
+  &--transfer:hover {
+    color: $info;
+  }
+
+  &--transfer.active {
+    color: $info;
+    background: rgba(var(--color-info-rgb), 0.1);
+    border-bottom-color: $info;
+  }
+}
+
+.tab-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.tab-content {
+  width: 100%;
+}
+</style>
diff --git a/components/HamburgerMenu.stories.js b/components/HamburgerMenu.stories.js
new file mode 100644
index 0000000..47b1691
--- /dev/null
+++ b/components/HamburgerMenu.stories.js
@@ -0,0 +1,23 @@
+import HamburgerMenu from './HamburgerMenu.vue';
+
+export default {
+  title: 'Primitives/HamburgerMenu',
+  component: HamburgerMenu,
+  argTypes: {
+    isOpen: { control: 'boolean' },
+  },
+};
+
+export const Closed = { args: { isOpen: false } };
+export const Open = { args: { isOpen: true } };
+
+export const Interactive = {
+  render: (args) => ({
+    components: { HamburgerMenu },
+    setup() {
+      return { args };
+    },
+    template: `<HamburgerMenu v-bind="args" @toggle="args.isOpen = !args.isOpen" />`,
+  }),
+  args: { isOpen: false },
+};
diff --git a/components/HamburgerMenu.vue b/components/HamburgerMenu.vue
new file mode 100644
index 0000000..a0f481b
--- /dev/null
+++ b/components/HamburgerMenu.vue
@@ -0,0 +1,83 @@
+<template>
+  <button
+    class="hamburger-menu"
+    :class="{ 'is-active': isOpen }"
+    aria-label="Toggle navigation menu"
+    @click="$emit('toggle')"
+  >
+    <span class="hamburger-line" />
+    <span class="hamburger-line" />
+    <span class="hamburger-line" />
+  </button>
+</template>
+
+<script setup>
+defineProps({
+  isOpen: {
+    type: Boolean,
+    default: false
+  }
+});
+
+defineEmits(['toggle']);
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.hamburger-menu {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 24px;
+  height: 24px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  z-index: 10;
+
+  &:focus {
+    outline: none;
+  }
+
+  .hamburger-line {
+    width: 24px;
+    height: 3px;
+    background-color: $text-primary;
+    border-radius: 2px;
+    transition: $transition-base;
+    transform-origin: 1px;
+
+    &:first-child {
+      transform: rotate(0);
+    }
+
+    &:nth-child(2) {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    &:nth-child(3) {
+      transform: rotate(0);
+    }
+  }
+
+  &.is-active {
+    .hamburger-line {
+      &:first-child {
+        transform: rotate(45deg);
+      }
+
+      &:nth-child(2) {
+        opacity: 0;
+        transform: translateX(20px);
+      }
+
+      &:nth-child(3) {
+        transform: rotate(-45deg);
+      }
+    }
+  }
+}
+</style>
diff --git a/components/IconPicker.stories.js b/components/IconPicker.stories.js
new file mode 100644
index 0000000..56ccca5
--- /dev/null
+++ b/components/IconPicker.stories.js
@@ -0,0 +1,43 @@
+import IconPicker from './IconPicker.vue';
+import { ref } from 'vue';
+
+export default {
+  title: 'Components/IconPicker',
+  component: IconPicker,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: { control: 'text' },
+    placeholder: { control: 'text' }
+  }
+};
+
+export const Default = {
+  render: () => ({
+    components: { IconPicker },
+    setup() {
+      const selected = ref('Wallet');
+      return { selected };
+    },
+    template: `
+      <div style="width: 320px;">
+        <IconPicker v-model="selected" />
+        <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--color-text-muted);">Selected icon: {{ selected }}</p>
+      </div>
+    `
+  })
+};
+
+export const Empty = {
+  render: () => ({
+    components: { IconPicker },
+    setup() {
+      const selected = ref('');
+      return { selected };
+    },
+    template: `
+      <div style="width: 320px;">
+        <IconPicker v-model="selected" placeholder="Choose an entity icon..." />
+      </div>
+    `
+  })
+};
diff --git a/components/IconPicker.vue b/components/IconPicker.vue
new file mode 100644
index 0000000..f375de6
--- /dev/null
+++ b/components/IconPicker.vue
@@ -0,0 +1,363 @@
+<template>
+  <div ref="pickerRef" class="icon-picker">
+    <div class="input-container" :class="{ 'is-focused': isFocused || showDropdown }">
+      <component
+        :is="selectedIconComponent"
+        v-if="modelValue && selectedIconComponent"
+        :key="`selected-${modelValue}`"
+        class="selected-icon"
+      />
+      <input
+        id="iconSearch"
+        ref="searchInput"
+        v-model="search"
+        type="text"
+        class="icon-search"
+        :placeholder="modelValue ? '' : (placeholder || t('Search an icon here'))"
+        @focus="handleInputFocus"
+        @blur="isFocused = false"
+      />
+      <TButton
+        v-if="modelValue"
+        type="button"
+        variant="text"
+        size="small"
+        :full-width="false"
+        class="clear-icon-btn"
+        :aria-label="clearLabel || t('Clear icon')"
+        :title="clearLabel || t('Clear icon')"
+        @click="clearSelection"
+      >
+        <X :size="14" class="clear-icon" />
+      </TButton>
+
+      <TButton
+        type="button"
+        variant="text"
+        size="small"
+        :full-width="false"
+        class="dropdown-toggle-btn"
+        :aria-label="toggleLabel || t('Toggle icon list')"
+        :title="toggleLabel || t('Toggle icon list')"
+        @click="toggleDropdown"
+      >
+        <ChevronDown v-if="!showDropdown" :size="14" class="chevron-icon" />
+        <ChevronUp v-else :size="14" class="chevron-icon" />
+      </TButton>
+    </div>
+
+    <Transition name="fade">
+      <div v-if="showDropdown" ref="iconGrid" class="icon-grid">
+        <button
+          v-for="iconName in filteredIcons"
+          :key="iconName"
+          :class="['icon-btn', { selected: modelValue === iconName }]"
+          type="button"
+          tabindex="-1"
+          @click.prevent="selectIcon(iconName)"
+        >
+          <component
+            :is="loadedIconsValue[iconName]"
+            v-if="loadedIconsValue[iconName]"
+            :key="`grid-${iconName}`"
+            class="icon-svg"
+          />
+        </button>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount, shallowRef, toRef, nextTick } from 'vue';
+import * as lucideIcons from 'lucide-vue-next';
+import { X, ChevronDown, ChevronUp } from 'lucide-vue-next';
+import TButton from './TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((key) => key);
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+  clearLabel: { type: String, default: '' },
+  toggleLabel: { type: String, default: '' }
+});
+
+const modelValue = toRef(props, 'modelValue');
+const emit = defineEmits(['update:modelValue', 'change']);
+
+// local state
+const search = ref('');
+const loadedIcons = shallowRef({});
+const selectedIconComponent = shallowRef(null);
+const allIconNames = ref([]);
+const searchInput = ref(null);
+const pickerRef = ref(null);
+const iconGrid = ref(null);
+const isFocused = ref(false);
+const showDropdown = ref(false);
+
+const loadedIconsValue = computed(() => loadedIcons.value || {});
+
+// gather icon names on mount
+onMounted(() => {
+  try {
+    allIconNames.value = Object.keys(lucideIcons).filter(
+      (key) =>
+        typeof lucideIcons[key] === 'function' &&
+        key !== 'default' &&
+        !key.startsWith('create') &&
+        key[0] === key[0].toUpperCase()
+    );
+  } catch (err) {
+    allIconNames.value = [];
+  }
+
+  document.addEventListener('click', handleOutsideClick);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleOutsideClick);
+  selectedIconComponent.value = null;
+  loadedIcons.value = {};
+});
+
+const handleOutsideClick = (e) => {
+  if (pickerRef.value && !pickerRef.value.contains(e.target)) {
+    showDropdown.value = false;
+  }
+};
+
+const handleInputFocus = () => {
+  isFocused.value = true;
+  showDropdown.value = true;
+};
+
+// computed filtered list
+const filteredIcons = computed(() => {
+  if (!allIconNames.value) return [];
+  if (!search.value) return allIconNames.value.slice(0, 100);
+  const q = search.value.toLowerCase();
+  return allIconNames.value.filter((name) => name.toLowerCase().includes(q));
+});
+
+function getIconComponent(iconName) {
+  try {
+    const component = lucideIcons[iconName];
+    return component && typeof component === 'function' ? component : null;
+  } catch {
+    return null;
+  }
+}
+
+function loadIconComponent(iconName) {
+  try {
+    if (!iconName) return null;
+    const currentLoaded = loadedIcons.value || {};
+    if (!currentLoaded[iconName]) {
+      const component = getIconComponent(iconName);
+      if (component) {
+        loadedIcons.value = { ...currentLoaded, [iconName]: component };
+      }
+    }
+    return loadedIcons.value[iconName] || null;
+  } catch {
+    return null;
+  }
+}
+
+watch(
+  modelValue,
+  (newValue) => {
+    selectedIconComponent.value = newValue ? loadIconComponent(newValue) : null;
+  },
+  { immediate: true }
+);
+
+watch(
+  filteredIcons,
+  (newList) => {
+    if (newList && newList.length > 0) {
+      const iconsToLoad = newList.slice(0, 60);
+      iconsToLoad.forEach((iconName) => {
+        if (iconName) loadIconComponent(iconName);
+      });
+    }
+  },
+  { flush: 'post', immediate: true }
+);
+
+function toggleDropdown() {
+  showDropdown.value = !showDropdown.value;
+  if (showDropdown.value) {
+    nextTick(() => {
+      searchInput.value?.focus();
+    });
+  }
+}
+
+function selectIcon(name) {
+  if (!name) return;
+  emit('update:modelValue', name);
+  emit('change', name);
+  search.value = '';
+  showDropdown.value = false;
+}
+
+function clearSelection() {
+  emit('update:modelValue', '');
+  emit('change', '');
+  search.value = '';
+  nextTick(() => {
+    searchInput.value?.focus();
+  });
+}
+</script>
+
+<style scoped lang="scss">
+@use '../assets/scss/_vars.scss' as *;
+
+.icon-picker {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.input-container {
+  display: flex;
+  align-items: center;
+  border: 1.5px solid $border-light;
+  border-radius: $radius-lg;
+  padding: 0.375rem 0.5rem;
+  background: $bg-white;
+  min-height: 42px;
+  gap: 0.375rem;
+  transition: border-color $duration-fast $easing-standard, box-shadow $duration-fast $easing-standard;
+
+  &.is-focused {
+    border-color: $primary;
+    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 0.25rem 0.375rem;
+    min-height: 38px;
+    gap: 0.25rem;
+  }
+}
+
+.selected-icon {
+  width: 20px;
+  height: 20px;
+  color: $primary;
+  flex-shrink: 0;
+}
+
+.icon-search {
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: $font-size-sm;
+  color: $text-primary;
+  background: transparent;
+  min-width: 0;
+  padding: 0;
+
+  &::placeholder {
+    color: $text-muted;
+  }
+}
+
+.clear-icon-btn,
+.dropdown-toggle-btn {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  min-height: auto;
+  border-radius: $radius-sm;
+  color: $text-muted;
+
+  &:hover {
+    color: $text-primary;
+  }
+}
+
+.clear-icon-btn:hover {
+  color: $error-color;
+}
+
+.icon-grid {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: $z-index-dropdown;
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.375rem;
+  background: $bg-white;
+  border: 1px solid $border-light;
+  border-radius: $radius-lg;
+  padding: 0.5rem;
+  box-shadow: $elevation-3;
+  width: 100%;
+  max-height: 220px;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  @media (max-width: $breakpoint-md) {
+    grid-template-columns: repeat(6, 1fr);
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    grid-template-columns: repeat(5, 1fr);
+    max-height: 180px;
+  }
+}
+
+.icon-btn {
+  width: 2.25rem;
+  height: 2.25rem;
+  border: 1px solid $border-color;
+  border-radius: $radius-md;
+  background: $bg-white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all $duration-fast $easing-standard;
+
+  &:hover {
+    background: $bg-light;
+    border-color: $primary;
+  }
+
+  &.selected {
+    background: $primary;
+    border-color: $primary;
+
+    .icon-svg {
+      color: $text-inverse;
+    }
+  }
+}
+
+.icon-svg {
+  width: 1.125rem;
+  height: 1.125rem;
+  color: $text-secondary;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+</style>
diff --git a/components/LanguageSelector.stories.js b/components/LanguageSelector.stories.js
new file mode 100644
index 0000000..35644a5
--- /dev/null
+++ b/components/LanguageSelector.stories.js
@@ -0,0 +1,10 @@
+import LanguageSelector from './LanguageSelector.vue';
+
+export default {
+  title: 'Components/LanguageSelector',
+  component: LanguageSelector,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' }
+};
+
+export const Default = {};
diff --git a/components/LanguageSelector.vue b/components/LanguageSelector.vue
new file mode 100644
index 0000000..9532fd0
--- /dev/null
+++ b/components/LanguageSelector.vue
@@ -0,0 +1,178 @@
+<template>
+  <TDropdown class="language-selector">
+    <template #trigger>
+      <TButton
+        type="button"
+        variant="secondary"
+        :full-width="false"
+        class="language-selector-trigger"
+        :aria-label="currentLanguage.name"
+        :title="currentLanguage.name"
+      >
+        <img :src="currentLanguage.flagUrl" :alt="currentLanguage.name" class="flag-icon" />
+      </TButton>
+    </template>
+
+    <div class="language-dropdown-inner">
+      <div class="dropdown-header">
+        <h3>{{ headerTitle || t('Language') }}</h3>
+      </div>
+      <TDivider orientation="horizontal" />
+      <div class="language-list">
+        <TDropdownItem
+          v-for="lang in availableLanguages"
+          :key="lang.code"
+          class="language-item"
+          :class="{ active: currentLocale === lang.code }"
+          @click="selectLanguage(lang.code)"
+        >
+          <img :src="lang.flagUrl" :alt="lang.name" class="flag-icon" />
+          <span class="language-name">{{ lang.name }}</span>
+          <Check v-if="currentLocale === lang.code" class="check-icon" />
+        </TDropdownItem>
+      </div>
+    </div>
+  </TDropdown>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { Check } from 'lucide-vue-next';
+import TDropdown from './TDropdown.vue';
+import TDropdownItem from './TDropdownItem.vue';
+import TButton from './TButton.vue';
+import TDivider from './TDivider.vue';
+
+// Bundled static flag imports so consumers don't rely on unbundled host paths
+import flagGb from '../assets/flags/gb.svg';
+import flagFr from '../assets/flags/fr.svg';
+import flagDe from '../assets/flags/de.svg';
+import flagEs from '../assets/flags/es.svg';
+import flagPt from '../assets/flags/pt.svg';
+import flagIt from '../assets/flags/it.svg';
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: undefined
+  },
+  headerTitle: {
+    type: String,
+    default: ''
+  },
+  languages: {
+    type: Array,
+    default: null
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'select']);
+
+const defaultLanguages = [
+  { code: 'en', name: 'English', flagUrl: flagGb },
+  { code: 'fr', name: 'Français', flagUrl: flagFr },
+  { code: 'de', name: 'Deutsch', flagUrl: flagDe },
+  { code: 'es', name: 'Español', flagUrl: flagEs },
+  { code: 'pt', name: 'Português', flagUrl: flagPt },
+  { code: 'it', name: 'Italiano', flagUrl: flagIt }
+];
+
+const availableLanguages = computed(() => (props.languages && props.languages.length ? props.languages : defaultLanguages));
+
+// Optional useI18n fallback if available in consumer context
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const currentLocale = computed(() => {
+  if (props.modelValue !== undefined) return props.modelValue;
+  if (i18n?.locale?.value) return i18n.locale.value;
+  return 'en';
+});
+
+const currentLanguage = computed(() => {
+  return availableLanguages.value.find((lang) => lang.code === currentLocale.value) || availableLanguages.value[0];
+});
+
+const selectLanguage = (code) => {
+  if (i18n?.setLocale) {
+    i18n.setLocale(code);
+  }
+  emit('update:modelValue', code);
+  emit('select', code);
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.language-selector {
+  display: inline-block;
+}
+
+.language-selector-trigger {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: auto;
+}
+
+.flag-icon {
+  width: 20px;
+  height: 15px;
+  border-radius: 2px;
+  object-fit: cover;
+}
+
+.language-dropdown-inner {
+  width: 240px;
+
+  @media (max-width: $breakpoint-sm) {
+    width: calc(100vw - 32px);
+  }
+}
+
+.dropdown-header {
+  padding: 1rem;
+
+  h3 {
+    margin: 0;
+    font-size: $font-size-base;
+    font-weight: $font-semibold;
+    color: $text-primary;
+  }
+}
+
+.language-list {
+  max-height: 320px;
+  overflow-y: auto;
+  padding: 0.25rem 0;
+}
+
+.language-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+
+  &.active {
+    background: rgba(var(--color-primary-rgb), 0.08);
+    color: $primary;
+    font-weight: $font-semibold;
+  }
+
+  .language-name {
+    flex: 1;
+    text-align: left;
+    font-size: $font-size-sm;
+  }
+
+  .check-icon {
+    width: 16px;
+    height: 16px;
+    color: $primary;
+  }
+}
+</style>
diff --git a/components/LoadingSkeleton.stories.js b/components/LoadingSkeleton.stories.js
new file mode 100644
index 0000000..f52d7ff
--- /dev/null
+++ b/components/LoadingSkeleton.stories.js
@@ -0,0 +1,16 @@
+import LoadingSkeleton from './LoadingSkeleton.vue';
+
+export default {
+  title: 'Primitives/LoadingSkeleton',
+  component: LoadingSkeleton,
+  argTypes: {
+    variant: { control: 'select', options: ['default', 'list', 'card', 'table'] },
+    count: { control: 'number' },
+    columns: { control: 'number' },
+  },
+};
+
+export const Default = { args: { variant: 'default', count: 3 } };
+export const List = { args: { variant: 'list', count: 3 } };
+export const Card = { args: { variant: 'card' } };
+export const Table = { args: { variant: 'table', count: 3, columns: 4 } };
diff --git a/components/LoadingSkeleton.vue b/components/LoadingSkeleton.vue
new file mode 100644
index 0000000..2b2e155
--- /dev/null
+++ b/components/LoadingSkeleton.vue
@@ -0,0 +1,204 @@
+<template>
+  <div class="loading-skeleton">
+    <div v-if="variant === 'list'" class="skeleton-list">
+      <div v-for="i in count" :key="i" class="skeleton-item">
+        <div class="skeleton-avatar"></div>
+        <div class="skeleton-content">
+          <div class="skeleton-line skeleton-title"></div>
+          <div class="skeleton-line skeleton-subtitle"></div>
+        </div>
+      </div>
+    </div>
+
+    <TCard v-else-if="variant === 'card'" class="skeleton-card">
+      <div class="skeleton-header"></div>
+      <div class="skeleton-body">
+        <div class="skeleton-line"></div>
+        <div class="skeleton-line short"></div>
+      </div>
+    </TCard>
+
+    <div v-else-if="variant === 'table'" class="skeleton-table">
+      <div class="skeleton-table-header">
+        <div v-for="i in columns" :key="i" class="skeleton-th"></div>
+      </div>
+      <div v-for="i in count" :key="i" class="skeleton-table-row">
+        <div v-for="j in columns" :key="j" class="skeleton-td"></div>
+      </div>
+    </div>
+
+    <div v-else class="skeleton-default">
+      <div v-for="i in count" :key="i" class="skeleton-line"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import TCard from './TCard.vue';
+
+defineProps({
+  variant: {
+    type: String,
+    default: 'default',
+    validator: (value) => ['default', 'list', 'card', 'table'].includes(value)
+  },
+  count: {
+    type: Number,
+    default: 3
+  },
+  columns: {
+    type: Number,
+    default: 4
+  }
+});
+</script>
+
+<style scoped lang="scss">
+@use '../assets/scss/_vars.scss' as *;
+
+.loading-skeleton {
+  width: 100%;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+
+.skeleton-base {
+  background: linear-gradient(90deg, $bg-gray 25%, $border-light 50%, $bg-gray 75%);
+  background-size: 200px 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: $radius-md;
+}
+
+.skeleton-line {
+  @extend .skeleton-base;
+  height: 16px;
+  margin-bottom: 8px;
+
+  &.skeleton-title {
+    height: 20px;
+    width: 70%;
+  }
+
+  &.skeleton-subtitle {
+    height: 14px;
+    width: 90%;
+  }
+
+  &.short {
+    width: 60%;
+  }
+}
+
+.skeleton-list {
+  .skeleton-item {
+    display: flex;
+    align-items: center;
+    padding: 16px 0;
+    border-bottom: 1px solid $border-light;
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .skeleton-avatar {
+    @extend .skeleton-base;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    margin-right: 16px;
+    flex-shrink: 0;
+  }
+
+  .skeleton-content {
+    flex: 1;
+  }
+}
+
+.skeleton-card {
+  @extend .skeleton-base;
+  padding: 20px;
+  border-radius: $radius-lg;
+
+  .skeleton-header {
+    @extend .skeleton-base;
+    height: 24px;
+    width: 40%;
+    margin-bottom: 16px;
+  }
+
+  .skeleton-body {
+    .skeleton-line {
+      margin-bottom: 12px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.skeleton-table {
+  width: 100%;
+
+  .skeleton-table-header {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 16px;
+    padding-bottom: 8px;
+    border-bottom: 2px solid $border-light;
+  }
+
+  .skeleton-th {
+    @extend .skeleton-base;
+    height: 20px;
+    flex: 1;
+  }
+
+  .skeleton-table-row {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 12px;
+  }
+
+  .skeleton-td {
+    @extend .skeleton-base;
+    height: 16px;
+    flex: 1;
+  }
+}
+
+.skeleton-default {
+  .skeleton-line {
+    margin-bottom: 12px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+@media (max-width: $breakpoint-md) {
+  .skeleton-list .skeleton-item {
+    padding: 12px 0;
+  }
+
+  .skeleton-card {
+    padding: 16px;
+  }
+
+  .skeleton-table {
+    .skeleton-table-header,
+    .skeleton-table-row {
+      gap: 12px;
+    }
+  }
+}
+</style>
diff --git a/components/LoginCard.stories.js b/components/LoginCard.stories.js
new file mode 100644
index 0000000..812fa7b
--- /dev/null
+++ b/components/LoginCard.stories.js
@@ -0,0 +1,16 @@
+import LoginCard from './LoginCard.vue';
+
+export default {
+  title: 'Domain/Auth/LoginCard',
+  component: LoginCard,
+  args: {
+    loading: false,
+    registerTo: '/register'
+  }
+};
+
+export const Default = {};
+
+export const Loading = {
+  args: { loading: true }
+};
diff --git a/components/LoginCard.vue b/components/LoginCard.vue
new file mode 100644
index 0000000..0894089
--- /dev/null
+++ b/components/LoginCard.vue
@@ -0,0 +1,208 @@
+<template>
+  <div class="login-container">
+    <div class="login-card">
+      <div class="login-content">
+        <div class="login-header">
+          <Logo size="medium" />
+          <h1 class="title">{{ t('Login') }}</h1>
+        </div>
+
+        <div class="login-form-container">
+          <form class="login-form" @submit.prevent="handleSubmit">
+            <div class="form-group">
+              <label for="login-username" class="form-label">{{ t('Username') }}</label>
+              <TInput
+                id="login-username"
+                v-model="username"
+                type="text"
+                :placeholder="t('Enter your username')"
+                :full-width="true"
+                autocomplete="username"
+              />
+            </div>
+
+            <div class="form-group">
+              <label for="login-password" class="form-label">{{ t('Password') }}</label>
+              <TInput
+                id="login-password"
+                v-model="password"
+                :type="showPassword ? 'text' : 'password'"
+                :placeholder="t('Enter your password')"
+                :full-width="true"
+                autocomplete="current-password"
+              >
+                <template #suffix>
+                  <button
+                    type="button"
+                    class="password-toggle"
+                    :aria-label="showPassword ? t('Hide password') : t('Show password')"
+                    @click="showPassword = !showPassword"
+                  >
+                    <EyeOff v-if="showPassword" :size="18" />
+                    <Eye v-else :size="18" />
+                  </button>
+                </template>
+              </TInput>
+            </div>
+
+            <div class="button-container">
+              <TButton
+                type="submit"
+                :text="t('Login')"
+                variant="primary"
+                size="large"
+                :full-width="true"
+                :loading="loading"
+              />
+            </div>
+
+            <AuthFooterLink
+              :text="t('Don\'t have an account?')"
+              :link-text="t('Sign up')"
+              :to="registerTo"
+            />
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { Eye, EyeOff } from 'lucide-vue-next';
+import TButton from './TButton.vue';
+import TInput from './TInput.vue';
+import AuthFooterLink from './AuthFooterLink.vue';
+import Logo from './Logo.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  registerTo: {
+    type: String,
+    default: '/register'
+  }
+});
+
+const emit = defineEmits(['submit']);
+
+const username = ref('');
+const password = ref('');
+const showPassword = ref(false);
+
+const handleSubmit = () => {
+  emit('submit', {
+    username: username.value,
+    password: password.value
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: $spacing-6 0;
+}
+
+.login-card {
+  background-color: $bg-white;
+  width: 100%;
+  max-width: 480px;
+  border-radius: $radius-xl;
+  border: 1px solid $border-medium;
+  margin: $spacing-10 $spacing-4;
+  box-shadow: $shadow-sm;
+}
+
+.login-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: $spacing-12 $spacing-10;
+
+  @media (max-width: $breakpoint-sm) {
+    padding: $spacing-8 $spacing-4;
+  }
+}
+
+.login-header {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: $spacing-8;
+}
+
+.title {
+  color: $text-primary;
+  font-size: $font-size-2xl;
+  font-weight: $font-bold;
+  margin: $spacing-4 0 0;
+}
+
+.login-form-container {
+  width: 100%;
+  max-width: 400px;
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-5;
+  width: 100%;
+}
+
+.form-group {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-2;
+}
+
+.form-label {
+  display: block;
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  color: $text-secondary;
+}
+
+.password-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: $spacing-1;
+  border-radius: $radius-sm;
+  color: $text-muted;
+  transition: color $duration-fast $easing-standard, background-color $duration-fast $easing-standard;
+  line-height: 0;
+
+  &:hover {
+    background-color: rgba(var(--color-primary-rgb), 0.08);
+    color: $primary;
+  }
+
+  &:focus-visible {
+    outline: 2px solid $primary;
+    outline-offset: 1px;
+  }
+}
+
+.button-container {
+  margin-top: $spacing-2;
+  width: 100%;
+}
+</style>
diff --git a/components/Logo.stories.js b/components/Logo.stories.js
new file mode 100644
index 0000000..51ad762
--- /dev/null
+++ b/components/Logo.stories.js
@@ -0,0 +1,26 @@
+import Logo from './Logo.vue';
+
+export default {
+  title: 'Primitives/Logo',
+  component: Logo,
+  argTypes: {
+    size: { control: 'select', options: ['small', 'medium', 'large'] },
+    alt: { control: 'text' },
+  },
+};
+
+export const Small = { args: { size: 'small' } };
+export const Medium = { args: { size: 'medium' } };
+export const Large = { args: { size: 'large' } };
+
+export const AllSizes = {
+  render: () => ({
+    components: { Logo },
+    template: `
+      <div style="display:flex; gap:24px; align-items:flex-end;">
+        <Logo size="small" />
+        <Logo size="medium" />
+        <Logo size="large" />
+      </div>`,
+  }),
+};
diff --git a/components/Logo.vue b/components/Logo.vue
new file mode 100644
index 0000000..318b9b2
--- /dev/null
+++ b/components/Logo.vue
@@ -0,0 +1,50 @@
+<template>
+  <img :src="src || logoUrl" :alt="alt" :class="['logo', `logo-${size}`]" />
+</template>
+
+<script setup>
+import defaultLogoUrl from '../assets/logo.svg';
+
+defineProps({
+  src: {
+    type: String,
+    default: null
+  },
+  alt: {
+    type: String,
+    default: 'Trakli Logo'
+  },
+  size: {
+    type: String,
+    default: 'medium',
+    validator: (value) => ['small', 'medium', 'large'].includes(value)
+  }
+});
+
+const logoUrl = defaultLogoUrl;
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+img.logo {
+  display: block;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+}
+
+img.logo-small {
+  width: 80px !important;
+}
+
+img.logo-medium {
+  width: 120px !important;
+}
+
+img.logo-large {
+  width: 195px !important;
+  margin-bottom: $spacing-8 !important;
+}
+</style>
diff --git a/components/NotificationBell.stories.js b/components/NotificationBell.stories.js
new file mode 100644
index 0000000..3f7cb2c
--- /dev/null
+++ b/components/NotificationBell.stories.js
@@ -0,0 +1,83 @@
+import NotificationBell from './NotificationBell.vue';
+import { ref } from 'vue';
+
+export default {
+  title: 'Components/NotificationBell',
+  component: NotificationBell,
+  tags: ['autodocs']
+};
+
+const sampleNotifications = [
+  {
+    id: '1',
+    title: 'Monthly statement ready',
+    body: 'Your statement for August has been processed.',
+    created_at: new Date().toISOString(),
+    type: 'info',
+    read_at: null
+  },
+  {
+    id: '2',
+    title: 'Budget alert',
+    body: 'You have reached 85% of your dining budget.',
+    created_at: new Date(Date.now() - 3600000).toISOString(),
+    type: 'warning',
+    read_at: null
+  },
+  {
+    id: '3',
+    title: 'Recurring transaction logged',
+    body: 'Spotify subscription $9.99 paid.',
+    created_at: new Date(Date.now() - 86400000).toISOString(),
+    type: 'success',
+    read_at: new Date().toISOString()
+  }
+];
+
+export const Default = {
+  render: () => ({
+    components: { NotificationBell },
+    setup() {
+      const notifications = ref(sampleNotifications);
+      const unreadCount = ref(2);
+
+      const handleMarkRead = (id) => {
+        const item = notifications.value.find((n) => n.id === id);
+        if (item && !item.read_at) {
+          item.read_at = new Date().toISOString();
+          unreadCount.value = Math.max(0, unreadCount.value - 1);
+        }
+      };
+
+      const handleMarkAllRead = () => {
+        notifications.value.forEach((n) => {
+          n.read_at = new Date().toISOString();
+        });
+        unreadCount.value = 0;
+      };
+
+      return { notifications, unreadCount, handleMarkRead, handleMarkAllRead };
+    },
+    template: `
+      <div style="padding: 2rem; display: flex; justify-content: center;">
+        <NotificationBell
+          :notifications="notifications"
+          :unread-count="unreadCount"
+          @mark-read="handleMarkRead"
+          @mark-all-read="handleMarkAllRead"
+        />
+      </div>
+    `
+  })
+};
+
+export const Empty = {
+  render: () => ({
+    components: { NotificationBell },
+    template: `
+      <div style="padding: 2rem; display: flex; justify-content: center;">
+        <NotificationBell :notifications="[]" :unread-count="0" />
+      </div>
+    `
+  })
+};
diff --git a/components/NotificationBell.vue b/components/NotificationBell.vue
new file mode 100644
index 0000000..ba93ccd
--- /dev/null
+++ b/components/NotificationBell.vue
@@ -0,0 +1,323 @@
+<template>
+  <TDropdown class="notification-bell">
+    <template #trigger>
+      <TButton
+        type="button"
+        variant="text"
+        size="small"
+        :full-width="false"
+        class="bell-trigger-btn"
+        :aria-label="t('Notifications')"
+        :title="t('Notifications')"
+      >
+        <Bell :size="18" class="bell-icon" />
+        <span v-if="unreadCount > 0" class="badge">
+          {{ unreadCount > 99 ? '99+' : unreadCount }}
+        </span>
+      </TButton>
+    </template>
+
+    <div class="notification-dropdown">
+      <div class="dropdown-header">
+        <h3>{{ t('Notifications') }}</h3>
+        <TButton
+          v-if="notificationsList.length > 0"
+          type="button"
+          variant="text"
+          size="small"
+          :full-width="false"
+          class="mark-all-btn"
+          @click="$emit('mark-all-read')"
+        >
+          {{ t('Mark all read') }}
+        </TButton>
+      </div>
+
+      <TDivider orientation="horizontal" />
+
+      <div v-if="loading" class="dropdown-loading">
+        <p>{{ t('Loading...') }}</p>
+      </div>
+
+      <div v-else-if="notificationsList.length === 0" class="dropdown-empty">
+        <BellOff :size="28" class="empty-icon" />
+        <p>{{ t('No notifications yet') }}</p>
+      </div>
+
+      <div v-else class="notification-list">
+        <div
+          v-for="notification in notificationsList"
+          :key="notification.id"
+          class="notification-item"
+          :class="{ unread: !notification.read_at }"
+          @click="$emit('select', notification)"
+        >
+          <div class="notification-icon">
+            <component :is="getNotificationIcon(notification.type)" :size="18" />
+          </div>
+          <div class="notification-content">
+            <p class="notification-title">{{ notification.title }}</p>
+            <p class="notification-body">{{ truncateText(notification.body, 60) }}</p>
+            <p class="notification-time">{{ formatTime(notification.created_at) }}</p>
+          </div>
+          <TButton
+            v-if="!notification.read_at"
+            type="button"
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="mark-read-btn"
+            :title="t('Mark as read')"
+            @click.stop="$emit('mark-read', notification.id)"
+          >
+            <Check :size="14" class="check-icon" />
+          </TButton>
+        </div>
+      </div>
+
+      <template v-if="notificationsList.length > 0">
+        <TDivider orientation="horizontal" />
+        <div class="dropdown-footer">
+          <TButton
+            type="button"
+            variant="text"
+            size="small"
+            class="view-all-btn"
+            @click="$emit('view-all')"
+          >
+            {{ t('View all notifications') }}
+          </TButton>
+        </div>
+      </template>
+    </div>
+  </TDropdown>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { Bell, BellOff, Check, Info, AlertTriangle, CheckCircle } from 'lucide-vue-next';
+import TDropdown from './TDropdown.vue';
+import TButton from './TButton.vue';
+import TDivider from './TDivider.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((key) => key);
+
+const props = defineProps({
+  notifications: {
+    type: Array,
+    default: () => []
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  unreadCount: {
+    type: Number,
+    default: 0
+  }
+});
+
+defineEmits(['select', 'mark-read', 'mark-all-read', 'view-all']);
+
+const notificationsList = computed(() => props.notifications || []);
+
+const getNotificationIcon = (type) => {
+  switch (type) {
+    case 'warning':
+      return AlertTriangle;
+    case 'success':
+      return CheckCircle;
+    default:
+      return Info;
+  }
+};
+
+const truncateText = (text, maxLength) => {
+  if (!text) return '';
+  return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
+};
+
+const formatTime = (dateStr) => {
+  if (!dateStr) return '';
+  try {
+    const date = new Date(dateStr);
+    return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+  } catch {
+    return dateStr;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.notification-bell {
+  display: inline-block;
+  position: relative;
+}
+
+.bell-trigger-btn {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border-radius: 50%;
+  color: $text-secondary;
+
+  &:hover {
+    color: $text-primary;
+  }
+}
+
+.badge {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  background-color: $error-color;
+  color: white;
+  border-radius: 9px;
+  font-size: 11px;
+  font-weight: $font-bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.notification-dropdown {
+  width: 340px;
+  max-width: 90vw;
+}
+
+.dropdown-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+
+  h3 {
+    margin: 0;
+    font-size: $font-size-base;
+    font-weight: $font-semibold;
+    color: $text-primary;
+  }
+}
+
+.mark-all-btn {
+  font-size: $font-size-xs;
+  color: $primary;
+  padding: 0;
+  min-height: auto;
+}
+
+.dropdown-loading,
+.dropdown-empty {
+  padding: 2rem 1rem;
+  text-align: center;
+  color: $text-muted;
+  font-size: $font-size-sm;
+
+  .empty-icon {
+    margin: 0 auto 0.5rem;
+    opacity: 0.5;
+  }
+
+  p {
+    margin: 0;
+  }
+}
+
+.notification-list {
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.notification-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  transition: background-color $duration-fast $easing-standard;
+  border-bottom: 1px solid $border-light;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background-color: $bg-light;
+  }
+
+  &.unread {
+    background-color: rgba(var(--color-primary-rgb), 0.05);
+
+    &:hover {
+      background-color: rgba(var(--color-primary-rgb), 0.09);
+    }
+  }
+}
+
+.notification-icon {
+  margin-top: 2px;
+  color: $primary;
+  flex-shrink: 0;
+}
+
+.notification-content {
+  flex: 1;
+  min-width: 0;
+
+  p {
+    margin: 0;
+    line-height: 1.35;
+  }
+}
+
+.notification-title {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  color: $text-primary;
+}
+
+.notification-body {
+  font-size: $font-size-xs;
+  color: $text-secondary;
+  margin-top: 2px !important;
+}
+
+.notification-time {
+  font-size: 11px;
+  color: $text-muted;
+  margin-top: 4px !important;
+}
+
+.mark-read-btn {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  min-height: auto;
+  color: $text-muted;
+  flex-shrink: 0;
+
+  &:hover {
+    color: $primary;
+  }
+}
+
+.dropdown-footer {
+  padding: 0.5rem 1rem;
+  text-align: center;
+}
+
+.view-all-btn {
+  font-size: $font-size-xs;
+  color: $primary;
+  width: 100%;
+  justify-content: center;
+}
+</style>
diff --git a/components/NotificationsContainer.stories.js b/components/NotificationsContainer.stories.js
new file mode 100644
index 0000000..fa67139
--- /dev/null
+++ b/components/NotificationsContainer.stories.js
@@ -0,0 +1,43 @@
+import NotificationsContainer from './NotificationsContainer.vue';
+import TButton from './TButton.vue';
+import { useNotifications } from '../composables/useNotifications';
+
+export default {
+  title: 'Components/NotificationsContainer',
+  component: NotificationsContainer,
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' }
+};
+
+export const Interactive = {
+  render: () => ({
+    components: { NotificationsContainer, TButton },
+    setup() {
+      const { showSuccess, showError, showWarning, showInfo, showConfirm } = useNotifications();
+
+      const triggerSuccess = () => showSuccess('Saved successfully', 'Your settings have been synced.');
+      const triggerError = () => showError('Failed to update', 'An unknown network error occurred.');
+      const triggerWarning = () => showWarning('Unsaved Changes', 'Please save before navigating away.');
+      const triggerInfo = () => showInfo('Update Available', 'A new version of the application is ready.');
+      const triggerConfirm = () => showConfirm({
+        title: 'Delete Item?',
+        message: 'This will permanently remove the record.',
+        type: 'danger'
+      });
+
+      return { triggerSuccess, triggerError, triggerWarning, triggerInfo, triggerConfirm };
+    },
+    template: `
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;">
+        <NotificationsContainer />
+        <div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
+          <TButton variant="primary" text="Trigger Success" @click="triggerSuccess" />
+          <TButton variant="secondary" text="Trigger Error" @click="triggerError" />
+          <TButton variant="outline" text="Trigger Warning" @click="triggerWarning" />
+          <TButton variant="text" text="Trigger Info" @click="triggerInfo" />
+          <TButton variant="secondary" text="Trigger Confirm Modal" @click="triggerConfirm" />
+        </div>
+      </div>
+    `
+  })
+};
diff --git a/components/NotificationsContainer.vue b/components/NotificationsContainer.vue
new file mode 100644
index 0000000..17948e6
--- /dev/null
+++ b/components/NotificationsContainer.vue
@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <div class="notifications-container">
+      <div
+        v-for="notification in notifications"
+        :key="notification.id"
+        class="notification"
+        :class="`notification--${notification.type}`"
+        @click="removeNotification(notification.id)"
+      >
+        <div class="notification-icon">
+          <CheckCircleIcon v-if="notification.type === 'success'" />
+          <XCircleIcon v-else-if="notification.type === 'error'" />
+          <AlertTriangleIcon v-else-if="notification.type === 'warning'" />
+          <InfoIcon v-else />
+        </div>
+        <div class="notification-content">
+          <h4 class="notification-title">{{ notification.title }}</h4>
+          <p v-if="notification.message" class="notification-message">{{ notification.message }}</p>
+        </div>
+        <TButton
+          variant="text"
+          :full-width="false"
+          class="notification-close"
+          @click.stop="removeNotification(notification.id)"
+        >
+          <XIcon />
+        </TButton>
+      </div>
+    </div>
+
+    <ConfirmModal
+      :is-open="isConfirmModalOpen"
+      :title="confirmModalData.title"
+      :message="confirmModalData.message"
+      :confirm-text="confirmModalData.confirmText"
+      :cancel-text="confirmModalData.cancelText"
+      :type="confirmModalData.type"
+      @confirm="handleConfirmResponse(true)"
+      @cancel="handleConfirmResponse(false)"
+    />
+  </div>
+</template>
+
+<script setup>
+import {
+  CheckCircle as CheckCircleIcon,
+  XCircle as XCircleIcon,
+  AlertTriangle as AlertTriangleIcon,
+  Info as InfoIcon,
+  X as XIcon
+} from 'lucide-vue-next';
+import TButton from './TButton.vue';
+import ConfirmModal from './modals/ConfirmModal.vue';
+import { useNotifications } from '../composables/useNotifications';
+
+const {
+  notifications,
+  isConfirmModalOpen,
+  confirmModalData,
+  removeNotification,
+  handleConfirmResponse
+} = useNotifications();
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.notifications-container {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 1050;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-width: 400px;
+
+  @media (max-width: $breakpoint-sm) {
+    top: 0.5rem;
+    right: 0.5rem;
+    left: 0.5rem;
+    max-width: none;
+  }
+}
+
+.notification {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+  background: $bg-white;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-lg;
+  border-left: 4px solid;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  animation: slideIn 0.3s ease-out;
+
+  &:hover {
+    transform: translateX(-2px);
+    box-shadow: $shadow-xl;
+  }
+
+  &--success { border-left-color: $success; .notification-icon { color: $success; } }
+  &--error   { border-left-color: $error-color; .notification-icon { color: $error-color; } }
+  &--warning { border-left-color: $warning; .notification-icon { color: $warning; } }
+  &--info    { border-left-color: $info; .notification-icon { color: $info; } }
+}
+
+@keyframes slideIn {
+  from { opacity: 0; transform: translateX(100%); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+.notification-icon {
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+  svg { width: 20px; height: 20px; }
+}
+
+.notification-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.notification-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: $text-primary;
+  margin: 0 0 0.25rem;
+  line-height: 1.25;
+}
+
+.notification-message {
+  font-size: 0.8rem;
+  color: $text-secondary;
+  margin: 0;
+  line-height: 1.4;
+}
+
+// Strip TButton default sizing for the icon-only close button
+.notification-close {
+  flex-shrink: 0;
+  padding: 0.125rem;
+  min-height: auto;
+  color: $text-secondary;
+
+  &:hover { color: $text-primary; }
+
+  svg { width: 16px; height: 16px; }
+}
+
+@media (max-width: $breakpoint-sm) {
+  .notification { padding: 0.75rem; }
+  .notification-title { font-size: 0.8rem; }
+  .notification-message { font-size: 0.75rem; }
+}
+</style>
diff --git a/components/PartiesForm.stories.js b/components/PartiesForm.stories.js
new file mode 100644
index 0000000..fd390b0
--- /dev/null
+++ b/components/PartiesForm.stories.js
@@ -0,0 +1,25 @@
+import PartiesForm from './PartiesForm.vue';
+
+export default {
+  title: 'Domain/Parties/PartiesForm',
+  component: PartiesForm,
+  args: {
+    editingItem: null,
+    apiError: '',
+    isSubmitting: false
+  }
+};
+
+export const Create = {};
+
+export const Edit = {
+  args: {
+    editingItem: {
+      id: 1,
+      name: 'Grocery Store',
+      type: 'organization',
+      description: 'Weekly groceries',
+      icon: 'Store'
+    }
+  }
+};
diff --git a/components/PartiesForm.vue b/components/PartiesForm.vue
new file mode 100644
index 0000000..682fb76
--- /dev/null
+++ b/components/PartiesForm.vue
@@ -0,0 +1,281 @@
+<template>
+  <form class="card-form" @submit.prevent="handleSubmit">
+    <div class="form-header">
+      <h2>{{ isEditing ? t('Edit Party') : t('Create Party') }}</h2>
+      <TButton
+        variant="text"
+        size="small"
+        :full-width="false"
+        class="close-btn"
+        :aria-label="t('Close')"
+        @click="handleClose"
+      >
+        <X />
+      </TButton>
+    </div>
+
+    <div class="form-group">
+      <label for="party-name" class="form-label">{{ t('Party Name') }}</label>
+      <div class="name-icon-row">
+        <div class="name-col">
+          <input
+            id="party-name"
+            v-model="form.name"
+            type="text"
+            class="form-input"
+            :class="{ error: nameError || props.apiError }"
+            :placeholder="t('Enter party name')"
+          />
+          <div v-if="nameError" class="error-text">{{ t('Party name is required.') }}</div>
+          <div v-if="props.apiError" class="error-text">{{ props.apiError }}</div>
+        </div>
+        <div class="icon-col">
+          <TButton
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="icon-trigger"
+            :aria-expanded="showIconPicker"
+            :aria-label="t('Choose icon')"
+            @click="showIconPicker = !showIconPicker"
+          >
+            <component
+              :is="selectedIconComponent"
+              v-if="selectedIconComponent"
+              class="icon-trigger__icon"
+            />
+            <ImagePlus v-else class="icon-trigger__icon" />
+          </TButton>
+        </div>
+      </div>
+
+      <div v-if="showIconPicker" class="icon-popover">
+        <IconPicker v-model="form.icon" @update:model-value="onIconSelected" />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label for="party-type" class="form-label">{{ t('Party Type') }}</label>
+      <select
+        id="party-type"
+        v-model="form.type"
+        class="form-select"
+        :class="{ error: partyTypeError }"
+        required
+      >
+        <option value="">{{ t('Select party type') }}</option>
+        <option value="individual">{{ t('Individual') }}</option>
+        <option value="organization">{{ t('Organization') }}</option>
+        <option value="business">{{ t('Business') }}</option>
+        <option value="partnership">{{ t('Partnership') }}</option>
+        <option value="non_profit">{{ t('Non-Profit') }}</option>
+        <option value="government_agency">{{ t('Government Agency') }}</option>
+        <option value="educational_institution">{{ t('Educational Institution') }}</option>
+        <option value="healthcare_provider">{{ t('Healthcare Provider') }}</option>
+      </select>
+      <div v-if="partyTypeError" class="error-text">{{ t('Please select a party type.') }}</div>
+    </div>
+
+    <div class="form-group">
+      <label for="party-description" class="form-label">{{ t('Party Description') }}</label>
+      <textarea
+        id="party-description"
+        v-model="form.description"
+        class="form-textarea"
+        :class="{ error: descriptionError }"
+        :placeholder="t('Type party description here...')"
+        rows="5"
+        required
+      />
+      <div v-if="descriptionError" class="error-text">
+        {{ t('Party description is required.') }}
+      </div>
+    </div>
+
+    <div class="form-actions">
+      <TButton variant="secondary" :full-width="false" @click="handleClose">
+        {{ t('Cancel') }}
+      </TButton>
+      <TButton
+        type="submit"
+        variant="primary"
+        :full-width="false"
+        :disabled="props.isSubmitting"
+      >
+        {{ isEditing ? t('Update Party') : t('Create Party') }}
+      </TButton>
+    </div>
+  </form>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import IconPicker from './IconPicker.vue';
+import * as lucideIcons from 'lucide-vue-next';
+import { ImagePlus, X } from 'lucide-vue-next';
+
+import TButton from './TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  editingItem: {
+    type: Object,
+    default: null
+  },
+  apiError: {
+    type: String,
+    default: ''
+  },
+  isSubmitting: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['created', 'updated', 'close']);
+
+const form = ref({
+  name: '',
+  type: '', // Empty default for dropdown
+  icon: '',
+  description: ''
+});
+
+const nameError = ref(false);
+const partyTypeError = ref(false);
+const descriptionError = ref(false);
+const showIconPicker = ref(false);
+
+const selectedIconComponent = computed(() => {
+  const key = form.value.icon;
+  if (key && typeof lucideIcons[key] === 'function') {
+    return lucideIcons[key];
+  }
+  return null;
+});
+
+const isEditing = computed(() => !!props.editingItem);
+
+// Watch for editing item changes and populate form
+watch(
+  () => props.editingItem,
+  (newEditingItem) => {
+    if (newEditingItem) {
+      // Extract icon value - could be from icon.path, icon.content, or direct icon value
+      let iconValue = '';
+      if (newEditingItem.icon) {
+        if (typeof newEditingItem.icon === 'string') {
+          iconValue = newEditingItem.icon;
+        } else if (newEditingItem.icon.path) {
+          iconValue = newEditingItem.icon.path;
+        } else if (newEditingItem.icon.content) {
+          iconValue = newEditingItem.icon.content;
+        }
+      }
+
+      console.log('Editing party:', newEditingItem);
+      console.log('Extracted icon value:', iconValue);
+
+      form.value = {
+        name: newEditingItem.name || '',
+        type: newEditingItem.type || '',
+        icon: iconValue,
+        description: newEditingItem.description || ''
+      };
+    } else {
+      resetForm();
+    }
+  },
+  { immediate: true }
+);
+
+function resetForm() {
+  form.value = {
+    name: '',
+    type: '',
+    icon: '',
+    description: ''
+  };
+  nameError.value = false;
+  partyTypeError.value = false;
+  descriptionError.value = false;
+  showIconPicker.value = false;
+}
+
+function validateForm() {
+  let isValid = true;
+
+  // Reset errors
+  nameError.value = false;
+  partyTypeError.value = false;
+  descriptionError.value = false;
+
+  // Validate name
+  if (!form.value.name || form.value.name.trim() === '') {
+    nameError.value = true;
+    isValid = false;
+  }
+
+  // Validate party type
+  if (!form.value.type) {
+    partyTypeError.value = true;
+    isValid = false;
+  }
+
+  // Validate description
+  if (!form.value.description || form.value.description.trim() === '') {
+    descriptionError.value = true;
+    isValid = false;
+  }
+
+  return isValid;
+}
+
+function handleSubmit() {
+  if (props.isSubmitting) {
+    return;
+  }
+
+  // Validate all fields
+  if (!validateForm()) {
+    return;
+  }
+
+  const formData = {
+    name: form.value.name.trim(),
+    type: form.value.type,
+    description: form.value.description.trim()
+  };
+  if (form.value.icon && form.value.icon.trim() !== '') {
+    formData.icon = form.value.icon;
+    formData.icon_type = 'image';
+  }
+
+  if (isEditing.value) {
+    const updatedItem = {
+      id: props.editingItem.id,
+      ...formData
+    };
+    emit('updated', updatedItem);
+    return;
+  }
+
+  emit('created', formData);
+}
+
+function onIconSelected() {
+  showIconPicker.value = false;
+}
+
+function handleClose() {
+  emit('close');
+  resetForm();
+}
+</script>
+
+<style scoped lang="scss">
+@use '../assets/scss/_vars.scss' as *;
+@use '../assets/scss/_form-styles.scss';
+</style>
diff --git a/components/PartyCard.stories.js b/components/PartyCard.stories.js
new file mode 100644
index 0000000..3d8e39a
--- /dev/null
+++ b/components/PartyCard.stories.js
@@ -0,0 +1,48 @@
+import PartyCard from './PartyCard.vue';
+
+export default {
+  title: 'Domain/Parties/PartyCard',
+  component: PartyCard,
+  args: {
+    party: {
+      id: 1,
+      name: 'Acme Corporation',
+      type: 'business',
+      description: 'Primary supplier for cloud infrastructure and hosting services.',
+      receivedAmount: 0,
+      spentAmount: 3450.0,
+      lastUpdated: new Date(Date.now() - 3600000 * 5).toISOString()
+    },
+    currency: 'USD'
+  }
+};
+
+export const BusinessVendor = {};
+
+export const IndividualClient = {
+  args: {
+    party: {
+      id: 2,
+      name: 'Sarah Jenkins',
+      type: 'client',
+      description: 'Consulting client - monthly retainer.',
+      receivedAmount: 5200.0,
+      spentAmount: 150.0,
+      lastUpdated: new Date(Date.now() - 3600000 * 24 * 2).toISOString()
+    }
+  }
+};
+
+export const InactiveParty = {
+  args: {
+    party: {
+      id: 3,
+      name: 'Legacy Partner',
+      type: 'organization',
+      description: 'No transactions in current period.',
+      receivedAmount: 0,
+      spentAmount: 0,
+      lastUpdated: null
+    }
+  }
+};
diff --git a/components/PartyCard.vue b/components/PartyCard.vue
new file mode 100644
index 0000000..162f29b
--- /dev/null
+++ b/components/PartyCard.vue
@@ -0,0 +1,400 @@
+<template>
+  <div class="party-card" :style="statusStyle">
+    <div class="card-actions">
+      <TDropdown>
+        <template #trigger>
+          <button
+            type="button"
+            class="action-menu"
+            :title="t('More actions')"
+            :aria-label="t('More actions')"
+          >
+            <LucideMoreVertical :size="16" />
+          </button>
+        </template>
+        <div class="dropdown-content">
+          <TDropdownItem class="menu-item--edit" @click="handleEdit">
+            <LucideEdit :size="14" />
+            <span>{{ t('Edit') }}</span>
+          </TDropdownItem>
+          <TDropdownItem class="menu-item--delete" @click="handleDelete">
+            <LucideTrash :size="14" />
+            <span>{{ t('Delete') }}</span>
+          </TDropdownItem>
+        </div>
+      </TDropdown>
+    </div>
+
+    <div class="party-avatar">
+      <component :is="resolvedIcon" />
+    </div>
+
+    <h3 class="party-name">{{ party.name }}</h3>
+
+    <span v-if="isValidPartyType" class="party-type-badge" :class="party.type">
+      {{ displayPartyType }}
+    </span>
+
+    <p v-if="party.description" class="party-description">{{ party.description }}</p>
+
+    <div class="financial-section">
+      <div class="stat-row">
+        <div class="stat received">
+          <LucideArrowDownLeft class="stat-icon" :size="18" />
+          <div class="stat-content">
+            <span class="stat-label">{{ t('Received') }}</span>
+            <span class="stat-value">{{ receivedDisplay }}</span>
+          </div>
+        </div>
+        <div class="stat spent">
+          <LucideArrowUpRight class="stat-icon" :size="18" />
+          <div class="stat-content">
+            <span class="stat-label">{{ t('Spent') }}</span>
+            <span class="stat-value">{{ spentDisplay }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="party.receivedAmount > 0 || party.spentAmount > 0" class="last-activity">
+        <LucideClock class="clock-icon" :size="12" />
+        <span>{{ t('Last activity') }}: {{ formatLastUpdated(party.lastUpdated) }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import {
+  MoreVertical as LucideMoreVertical,
+  ArrowDownLeft as LucideArrowDownLeft,
+  ArrowUpRight as LucideArrowUpRight,
+  Clock as LucideClock,
+  Edit as LucideEdit,
+  Trash as LucideTrash,
+  User as LucideUser,
+  Building2 as LucideBuilding2
+} from 'lucide-vue-next';
+import * as LucideIcons from 'lucide-vue-next';
+import TDropdown from './TDropdown.vue';
+import TDropdownItem from './TDropdownItem.vue';
+import { formatAmount } from '../utils/currency';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k, params) => {
+  if (params?.count !== undefined) {
+    if (k.includes('m ago')) return `${params.count}m ago`;
+    if (k.includes('h ago')) return `${params.count}h ago`;
+    if (k.includes('d ago')) return `${params.count}d ago`;
+    if (k.includes('w ago')) return `${params.count}w ago`;
+  }
+  return k;
+});
+
+const props = defineProps({
+  party: {
+    type: Object,
+    required: true
+  },
+  currency: {
+    type: String,
+    default: 'USD'
+  }
+});
+
+const emit = defineEmits(['menu', 'edit', 'delete', 'view']);
+
+const handleEdit = () => {
+  emit('edit', props.party);
+};
+
+const handleDelete = () => {
+  emit('delete', props.party);
+};
+
+const validPartyTypes = ['individual', 'business', 'organization', 'vendor', 'client'];
+
+const isValidPartyType = computed(() => {
+  return validPartyTypes.includes(props.party.type?.toLowerCase());
+});
+
+const displayPartyType = computed(() => {
+  const type = props.party.type?.toLowerCase();
+  const map = {
+    individual: 'Individual',
+    business: 'Business',
+    organization: 'Organization',
+    vendor: 'Vendor',
+    client: 'Client'
+  };
+
+  const labelKey = map[type];
+  return labelKey ? t(labelKey) : props.party.type;
+});
+
+const receivedDisplay = computed(() => {
+  const amt = props.party.receivedAmount ?? 0;
+  return formatAmount(`${amt} ${props.currency}`);
+});
+
+const spentDisplay = computed(() => {
+  const amt = props.party.spentAmount ?? 0;
+  return formatAmount(`${amt} ${props.currency}`);
+});
+
+const statusStyle = computed(() => {
+  const received = Number(props.party.receivedAmount || 0);
+  const spent = Number(props.party.spentAmount || 0);
+
+  let stripColor = 'var(--color-border-medium)';
+  let accentBg = 'var(--color-border-medium)';
+
+  if (received > spent) {
+    stripColor = 'var(--color-income)';
+    accentBg = 'var(--color-income)';
+  } else if (spent > received) {
+    stripColor = 'var(--color-expense)';
+    accentBg = 'var(--color-expense)';
+  }
+
+  return {
+    '--party-strip-color': stripColor,
+    '--party-accent-bg': accentBg
+  };
+});
+
+const resolvedIcon = computed(() => {
+  let iconValue = '';
+  if (props.party.icon) {
+    if (typeof props.party.icon === 'string') {
+      iconValue = props.party.icon;
+    } else if (props.party.icon.path) {
+      iconValue = props.party.icon.path;
+    } else if (props.party.icon.content) {
+      iconValue = props.party.icon.content;
+    }
+  }
+
+  if (!iconValue) {
+    return props.party.type === 'individual' ? LucideUser : LucideBuilding2;
+  }
+
+  const iconComponent = LucideIcons[iconValue];
+  if (iconComponent) {
+    return iconComponent;
+  }
+
+  return props.party.type === 'individual' ? LucideUser : LucideBuilding2;
+});
+
+const formatLastUpdated = (timestamp) => {
+  if (!timestamp) return t('{count}h ago', { count: 1 });
+
+  const now = new Date();
+  const updated = new Date(timestamp);
+  const diffMs = now - updated;
+  const diffMins = Math.floor(diffMs / (1000 * 60));
+  const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+  const diffWeeks = Math.floor(diffMs / (1000 * 60 * 60 * 24 * 7));
+
+  if (diffMins < 60) return t('{count}m ago', { count: diffMins });
+  if (diffHours < 24) return t('{count}h ago', { count: diffHours });
+  if (diffDays < 7) return t('{count}d ago', { count: diffDays });
+  return t('{count}w ago', { count: diffWeeks });
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.party-card {
+  background: $bg-white;
+  border-radius: 16px;
+  padding: $spacing-4;
+  box-shadow: $elevation-1;
+  transition:
+    box-shadow $duration-base $easing-standard,
+    border-color $duration-base $easing-standard;
+  border: 1px solid $border-light;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  min-height: 280px;
+
+  &:hover {
+    box-shadow: $elevation-2;
+    border-color: $border-medium;
+  }
+}
+
+.card-actions {
+  position: absolute;
+  top: $spacing-2;
+  right: $spacing-2;
+  z-index: 2;
+}
+
+.action-menu {
+  background: transparent;
+  border: none;
+  padding: 0.5rem;
+  border-radius: $radius-lg;
+  cursor: pointer;
+  color: $text-muted;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: $duration-fast $easing-standard;
+
+  &:hover {
+    background: $bg-gray;
+    color: $text-secondary;
+  }
+}
+
+.dropdown-content {
+  min-width: 8rem;
+  padding: $spacing-1 0;
+}
+
+.menu-item--delete {
+  color: $error-color;
+
+  &:hover {
+    background-color: rgba(var(--color-error-rgb), 0.1);
+    color: $error-color;
+  }
+}
+
+.party-avatar {
+  width: 4rem;
+  height: 4rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--party-accent-bg, $border-medium);
+  color: $bg-white;
+  margin-bottom: $spacing-3;
+
+  svg {
+    width: 2rem;
+    height: 2rem;
+  }
+}
+
+.party-name {
+  margin: 0 0 $spacing-1 0;
+  font-size: $font-size-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  line-height: 1.2;
+}
+
+.party-type-badge {
+  display: inline-block;
+  padding: 0.25rem 0.75rem;
+  border-radius: 1rem;
+  font-size: $font-size-xs;
+  font-weight: $font-medium;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  background: var(--party-accent-bg, $border-medium);
+  color: $bg-white;
+  margin-bottom: $spacing-2;
+}
+
+.party-description {
+  margin: 0 0 $spacing-3 0;
+  color: $text-muted;
+  font-size: $font-size-sm;
+  line-height: 1.4;
+  max-width: 100%;
+}
+
+.financial-section {
+  width: 100%;
+  margin-top: auto;
+  padding-top: $spacing-3;
+  border-top: 1px solid $border-light;
+}
+
+.stat-row {
+  display: flex;
+  gap: $spacing-2;
+  margin-bottom: $spacing-2;
+}
+
+.stat {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+  padding: $spacing-2;
+  border-radius: $radius-md;
+  text-align: left;
+
+  &.received {
+    background: rgba(var(--color-success-rgb), 0.08);
+
+    .stat-icon {
+      color: $success;
+    }
+
+    .stat-value {
+      color: $success;
+    }
+  }
+
+  &.spent {
+    background: rgba(var(--color-error-rgb), 0.08);
+
+    .stat-icon {
+      color: $error-color;
+    }
+
+    .stat-value {
+      color: $error-color;
+    }
+  }
+}
+
+.stat-icon {
+  flex-shrink: 0;
+}
+
+.stat-content {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.stat-label {
+  font-size: 0.625rem;
+  color: $text-muted;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.stat-value {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  font-variant-numeric: tabular-nums;
+}
+
+.last-activity {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  font-size: $font-size-xs;
+  color: $text-muted;
+
+  .clock-icon {
+    flex-shrink: 0;
+  }
+}
+</style>
diff --git a/components/PartyCardList.stories.js b/components/PartyCardList.stories.js
new file mode 100644
index 0000000..dc158f4
--- /dev/null
+++ b/components/PartyCardList.stories.js
@@ -0,0 +1,58 @@
+import PartyCardList from './PartyCardList.vue';
+
+const sampleParties = [
+  {
+    id: 1,
+    name: 'Acme Corp',
+    type: 'business',
+    description: 'Cloud services and server infrastructure vendor.',
+    receivedAmount: 0,
+    spentAmount: 4200.0,
+    lastUpdated: new Date(Date.now() - 3600000 * 2).toISOString()
+  },
+  {
+    id: 2,
+    name: 'Alice Johnson',
+    type: 'client',
+    description: 'Design consulting retainer.',
+    receivedAmount: 6800.0,
+    spentAmount: 120.0,
+    lastUpdated: new Date(Date.now() - 3600000 * 24).toISOString()
+  },
+  {
+    id: 3,
+    name: 'Robert Davis',
+    type: 'individual',
+    description: 'Subcontractor - mobile developer.',
+    receivedAmount: 0,
+    spentAmount: 2500.0,
+    lastUpdated: new Date(Date.now() - 3600000 * 48).toISOString()
+  },
+  {
+    id: 4,
+    name: 'SaaS Tooling Inc',
+    type: 'vendor',
+    description: 'Analytics and error monitoring licenses.',
+    receivedAmount: 0,
+    spentAmount: 890.0,
+    lastUpdated: new Date(Date.now() - 3600000 * 72).toISOString()
+  }
+];
+
+export default {
+  title: 'Domain/Parties/PartyCardList',
+  component: PartyCardList,
+  args: {
+    title: 'All Contacts & Parties',
+    parties: sampleParties,
+    currency: 'USD'
+  }
+};
+
+export const Default = {};
+
+export const EmptyState = {
+  args: {
+    parties: []
+  }
+};
diff --git a/components/PartyCardList.vue b/components/PartyCardList.vue
new file mode 100644
index 0000000..e49e12d
--- /dev/null
+++ b/components/PartyCardList.vue
@@ -0,0 +1,189 @@
+<template>
+  <div class="party-card-list">
+    <div class="list-header">
+      <div class="header-row">
+        <h2 class="page-title">{{ title || t('All Parties') }}</h2>
+        <div class="search-filter-section">
+          <SearchInput v-model="searchQuery" :placeholder="t('Search...')" />
+          <div class="filter-container">
+            <select
+              v-model="selectedFilter"
+              class="filter-dropdown"
+              :aria-label="t('Filter by party type')"
+            >
+              <option value="all">{{ t('All') }}</option>
+              <option value="individual">{{ t('Individual') }}</option>
+              <option value="business">{{ t('Business') }}</option>
+              <option value="client">{{ t('Client') }}</option>
+              <option value="vendor">{{ t('Vendor') }}</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="filteredParties.length > 0" class="cards-grid">
+      <PartyCard
+        v-for="party in filteredParties"
+        :key="party.id"
+        :party="party"
+        :currency="currency"
+        @menu="(p) => $emit('menu', p)"
+        @edit="(p) => $emit('edit', p)"
+        @delete="(p) => $emit('delete', p)"
+        @view="(p) => $emit('view', p)"
+      />
+    </div>
+
+    <div v-else class="empty-state">
+      <p v-if="parties.length === 0">
+        {{ t('No parties found. Create your first party to get started.') }}
+      </p>
+      <p v-else>
+        {{ t('No parties match your search criteria. Try adjusting your search or filters.') }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import SearchInput from './SearchInput.vue';
+import PartyCard from './PartyCard.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  parties: {
+    type: Array,
+    default: () => []
+  },
+  currency: {
+    type: String,
+    default: 'USD'
+  }
+});
+
+defineEmits(['edit', 'delete', 'view', 'menu']);
+
+const searchQuery = ref('');
+const selectedFilter = ref('all');
+
+const filteredParties = computed(() => {
+  let filtered = props.parties;
+
+  if (selectedFilter.value !== 'all') {
+    filtered = filtered.filter(
+      (party) => party.type?.toLowerCase() === selectedFilter.value.toLowerCase()
+    );
+  }
+
+  if (searchQuery.value.trim()) {
+    const query = searchQuery.value.toLowerCase().trim();
+    filtered = filtered.filter(
+      (party) =>
+        party.name?.toLowerCase().includes(query) ||
+        party.description?.toLowerCase().includes(query)
+    );
+  }
+
+  return filtered;
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.party-card-list {
+  width: 100%;
+}
+
+.list-header {
+  margin-bottom: $spacing-3;
+}
+
+.header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-3;
+
+  @media (max-width: $breakpoint-sm) {
+    flex-direction: column;
+    align-items: stretch;
+    gap: $spacing-2;
+  }
+}
+
+.page-title {
+  font-size: $font-size-base;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  margin: 0;
+  white-space: nowrap;
+}
+
+.search-filter-section {
+  display: flex;
+  gap: $spacing-2;
+  align-items: center;
+}
+
+.filter-container {
+  display: flex;
+  align-items: center;
+}
+
+.filter-dropdown {
+  padding: 6px 24px 6px 10px;
+  border: 1px solid $border-light;
+  border-radius: $radius-md;
+  font-size: $font-size-xs;
+  background: $bg-white;
+  color: $text-secondary;
+  cursor: pointer;
+  transition: border-color $duration-fast $easing-standard;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 6px center;
+  background-repeat: no-repeat;
+  background-size: 14px;
+
+  &:focus {
+    outline: none;
+    border-color: $primary;
+  }
+}
+
+.cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: $spacing-3;
+  width: 100%;
+}
+
+.empty-state {
+  text-align: center;
+  padding: $spacing-12 $spacing-6;
+  color: $text-muted;
+  font-size: $font-size-base;
+}
+
+@media (max-width: $breakpoint-md) {
+  .cards-grid {
+    grid-template-columns: 1fr;
+    gap: $spacing-2;
+  }
+}
+
+@media (min-width: $breakpoint-xl) {
+  .cards-grid {
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  }
+}
+</style>
diff --git a/components/RegisterCard.stories.js b/components/RegisterCard.stories.js
new file mode 100644
index 0000000..3aaac87
--- /dev/null
+++ b/components/RegisterCard.stories.js
@@ -0,0 +1,16 @@
+import RegisterCard from './RegisterCard.vue';
+
+export default {
+  title: 'Domain/Auth/RegisterCard',
+  component: RegisterCard,
+  args: {
+    loading: false,
+    loginTo: '/login'
+  }
+};
+
+export const Default = {};
+
+export const Loading = {
+  args: { loading: true }
+};
diff --git a/components/RegisterCard.vue b/components/RegisterCard.vue
new file mode 100644
index 0000000..864f4e1
--- /dev/null
+++ b/components/RegisterCard.vue
@@ -0,0 +1,231 @@
+<template>
+  <div class="register-card">
+    <div class="register-header">
+      <Logo size="medium" />
+      <h1 class="title">{{ t('Create an account') }}</h1>
+    </div>
+
+    <form class="form" @submit.prevent="handleSubmit">
+      <div class="form-row">
+        <div class="form-group">
+          <label class="form-label">
+            {{ t('First Name') }}
+            <span class="required">*</span>
+          </label>
+          <TInput
+            v-model="form.firstName"
+            type="text"
+            :placeholder="t('Enter first name')"
+            :full-width="true"
+            autocomplete="given-name"
+          />
+        </div>
+        <div class="form-group">
+          <label class="form-label">
+            {{ t('Last Name') }}
+          </label>
+          <TInput
+            v-model="form.lastName"
+            type="text"
+            :placeholder="t('Enter last name')"
+            :full-width="true"
+            autocomplete="family-name"
+          />
+        </div>
+      </div>
+
+      <div class="form-row">
+        <div class="form-group">
+          <label class="form-label">
+            {{ t('Email') }}
+            <span class="required">*</span>
+          </label>
+          <TInput
+            v-model="form.email"
+            type="email"
+            :placeholder="t('Enter email')"
+            :full-width="true"
+            autocomplete="email"
+          />
+        </div>
+        <div class="form-group">
+          <label class="form-label">{{ t('Phone Number') }}</label>
+          <TInput
+            v-model="form.phone"
+            type="tel"
+            :placeholder="t('Enter phone number')"
+            :full-width="true"
+            autocomplete="tel"
+          />
+        </div>
+      </div>
+
+      <div class="form-row">
+        <div class="form-group">
+          <label class="form-label">{{ t('Username') }}</label>
+          <TInput
+            v-model="form.username"
+            type="text"
+            :placeholder="t('Choose username')"
+            :full-width="true"
+            autocomplete="username"
+          />
+        </div>
+        <div class="form-group">
+          <label class="form-label">
+            {{ t('Password') }}
+            <span class="required">*</span>
+          </label>
+          <TInput
+            v-model="form.password"
+            type="password"
+            :placeholder="t('Create password')"
+            :full-width="true"
+            autocomplete="new-password"
+          />
+        </div>
+      </div>
+
+      <div class="button-container">
+        <TButton
+          type="submit"
+          variant="primary"
+          size="large"
+          :full-width="true"
+          :loading="loading"
+        >
+          {{ t('Register') }}
+        </TButton>
+      </div>
+
+      <AuthFooterLink
+        :text="t('Already have an account?')"
+        :link-text="t('Login')"
+        :to="loginTo"
+      />
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+import TButton from './TButton.vue';
+import TInput from './TInput.vue';
+import AuthFooterLink from './AuthFooterLink.vue';
+import Logo from './Logo.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  loginTo: {
+    type: String,
+    default: '/login'
+  }
+});
+
+const emit = defineEmits(['submit']);
+
+const form = reactive({
+  firstName: '',
+  lastName: '',
+  email: '',
+  phone: '',
+  username: '',
+  password: ''
+});
+
+const handleSubmit = () => {
+  emit('submit', { ...form });
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.register-card {
+  background-color: $bg-white;
+  border-radius: $radius-xl;
+  border: 1px solid $border-medium;
+  box-shadow: $shadow-sm;
+  padding: $spacing-8;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+
+  @media (max-width: $breakpoint-sm) {
+    padding: $spacing-6 $spacing-4;
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+  }
+}
+
+.register-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: $spacing-6;
+}
+
+.title {
+  font-size: $font-size-2xl;
+  font-weight: $font-bold;
+  color: $text-primary;
+  margin: $spacing-4 0 0;
+  text-align: center;
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: $font-size-xl;
+  }
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-5;
+}
+
+.form-row {
+  display: flex;
+  gap: $spacing-4;
+  width: 100%;
+
+  @media (max-width: $breakpoint-md) {
+    flex-direction: column;
+    gap: $spacing-3;
+  }
+}
+
+.form-group {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-2;
+}
+
+.form-label {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  color: $text-secondary;
+  display: flex;
+  align-items: center;
+  gap: $spacing-1;
+}
+
+.required {
+  color: $error-color;
+  font-weight: $font-bold;
+  line-height: 1;
+}
+
+.button-container {
+  margin-top: $spacing-4;
+  width: 100%;
+}
+</style>
diff --git a/components/SearchInput.stories.js b/components/SearchInput.stories.js
new file mode 100644
index 0000000..48f099f
--- /dev/null
+++ b/components/SearchInput.stories.js
@@ -0,0 +1,21 @@
+import SearchInput from './SearchInput.vue';
+
+export default {
+  title: 'Primitives/SearchInput',
+  component: SearchInput,
+  argTypes: {
+    placeholder: { control: 'text' },
+    debounce: { control: 'number' },
+  },
+};
+
+export const Default = { args: { placeholder: 'Search...', debounce: 300 } };
+export const CustomPlaceholder = { args: { placeholder: 'Find wallets...' } };
+export const Interactive = {
+  render: (args) => ({
+    components: { SearchInput },
+    setup() { return { args }; },
+    template: `<SearchInput v-bind="args" v-model="args.modelValue" />`,
+  }),
+  args: { modelValue: '', placeholder: 'Search...' },
+};
diff --git a/components/SearchInput.vue b/components/SearchInput.vue
new file mode 100644
index 0000000..fc56117
--- /dev/null
+++ b/components/SearchInput.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="search-container">
+    <TInput
+      :model-value="internalValue"
+      :placeholder="placeholder"
+      size="small"
+      class="search-input-field"
+      @update:model-value="handleInput"
+    >
+      <template #prefix>
+        <LucideSearch class="search-icon" />
+      </template>
+    </TInput>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { Search as LucideSearch } from 'lucide-vue-next';
+import TInput from './TInput.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  placeholder: {
+    type: String,
+    default: 'Search...'
+  },
+  debounce: {
+    type: Number,
+    default: 300
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const internalValue = ref(props.modelValue);
+let debounceTimeout;
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    internalValue.value = newValue;
+  }
+);
+
+const handleInput = (val) => {
+  internalValue.value = val;
+  clearTimeout(debounceTimeout);
+  debounceTimeout = setTimeout(() => {
+    emit('update:modelValue', val);
+  }, props.debounce);
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.search-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.search-icon {
+  color: $text-muted;
+  width: 14px;
+  height: 14px;
+  pointer-events: none;
+}
+
+.search-input-field {
+  width: 160px;
+  transition: width 0.2s ease, border-color 0.2s ease;
+
+  &:focus-within {
+    width: 200px;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    width: 100%;
+
+    &:focus-within {
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/components/SearchableDropdown.stories.js b/components/SearchableDropdown.stories.js
new file mode 100644
index 0000000..74913d3
--- /dev/null
+++ b/components/SearchableDropdown.stories.js
@@ -0,0 +1,78 @@
+import SearchableDropdown from './SearchableDropdown.vue';
+import { ref } from 'vue';
+
+export default {
+  title: 'Components/SearchableDropdown',
+  component: SearchableDropdown,
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    placeholder: { control: 'text' },
+    multiple: { control: 'boolean' }
+  }
+};
+
+const sampleOptions = [
+  { id: '1', name: 'Groceries' },
+  { id: '2', name: 'Rent & Mortgage' },
+  { id: '3', name: 'Dining Out' },
+  { id: '4', name: 'Entertainment' },
+  { id: '5', name: 'Investments' },
+  { id: '6', name: 'Utilities' },
+  { id: '7', name: 'Healthcare' }
+];
+
+export const SingleSelect = {
+  render: (args) => ({
+    components: { SearchableDropdown },
+    setup() {
+      const selected = ref('');
+      return { args, sampleOptions, selected };
+    },
+    template: `
+      <div style="max-width: 360px; padding: 20px;">
+        <SearchableDropdown
+          v-bind="args"
+          :options="sampleOptions"
+          v-model="selected"
+          label="Category"
+          placeholder="Select category..."
+        />
+        <div style="margin-top: 12px; font-size: 13px; color: #666;">Selected: {{ selected }}</div>
+      </div>
+    `
+  })
+};
+
+export const MultiSelect = {
+  render: (args) => ({
+    components: { SearchableDropdown },
+    setup() {
+      const selectedIds = ref(['1', '3']);
+      return { args, sampleOptions, selectedIds };
+    },
+    template: `
+      <div style="max-width: 420px; padding: 20px;">
+        <SearchableDropdown
+          v-bind="args"
+          :options="sampleOptions"
+          :multiple="true"
+          :selected="selectedIds"
+          v-model="selectedIds"
+          label="Multiple Categories"
+          placeholder="Filter categories..."
+        />
+        <div style="margin-top: 12px; font-size: 13px; color: #666;">Selected IDs: {{ selectedIds }}</div>
+      </div>
+    `
+  })
+};
+
+export const WithError = {
+  args: {
+    label: 'Account',
+    placeholder: 'Choose account...',
+    options: sampleOptions,
+    error: 'This field is required'
+  }
+};
diff --git a/components/SearchableDropdown.vue b/components/SearchableDropdown.vue
new file mode 100644
index 0000000..c85b48b
--- /dev/null
+++ b/components/SearchableDropdown.vue
@@ -0,0 +1,461 @@
+<template>
+  <div ref="dropdownRef" class="searchable-dropdown">
+    <span v-if="label" class="dropdown-label">{{ label }}</span>
+    <div class="dropdown-search">
+      <div class="input-container" :class="{ 'is-focused': showDropdown, 'has-error': !!error }">
+        <Search class="search-icon" />
+
+        <!-- Multi-select chips inside input container -->
+        <div v-if="multiple && selectedItems.length" class="input-chips">
+          <span v-for="item in selectedItems" :key="getOptionKey(item)" class="input-chip">
+            <span class="chip-text">{{ getOptionLabel(item) }}</span>
+            <TButton
+              type="button"
+              variant="text"
+              size="small"
+              :full-width="false"
+              class="input-chip-remove"
+              aria-label="Remove item"
+              @click.stop="removeSelectedItem(item)"
+            >
+              <X :size="12" />
+            </TButton>
+          </span>
+        </div>
+
+        <input
+          type="text"
+          :value="searchQuery"
+          :placeholder="multiple && selectedItems.length ? '' : placeholder"
+          :class="{ 'has-chips': multiple && selectedItems.length }"
+          class="dropdown-input"
+          @input="handleInput"
+          @focus="showDropdown = true"
+        />
+
+        <TButton
+          type="button"
+          variant="text"
+          size="small"
+          :full-width="false"
+          class="dropdown-toggle-btn"
+          aria-label="Toggle options"
+          @mousedown.prevent="toggleDropdown"
+        >
+          <ChevronDown :size="16" class="dropdown-icon" :class="{ 'is-open': showDropdown }" />
+        </TButton>
+      </div>
+    </div>
+
+    <!-- Dropdown List Overlay -->
+    <ul v-if="showDropdown && filteredOptions.length" class="dropdown-list" role="listbox">
+      <li
+        v-for="option in filteredOptions"
+        :key="getOptionKey(option)"
+        class="dropdown-option"
+        :class="{
+          'selected-option': isSelected(option),
+          disabled: isDisabled(option)
+        }"
+        role="option"
+        :aria-selected="isSelected(option)"
+        @mousedown.prevent="selectOption(option)"
+      >
+        <span class="option-content">
+          <template
+            v-for="(part, index) in getHighlightedParts(getOptionLabel(option))"
+            :key="index"
+          >
+            <span :class="part.isMatch ? 'text-highlight' : 'text-secondary'">
+              {{ part.text }}
+            </span>
+          </template>
+        </span>
+        <Check v-if="isSelected(option)" :size="16" class="selected-check" />
+      </li>
+    </ul>
+    <div v-if="error" class="error-text">{{ error }}</div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
+import { Search, ChevronDown, Check, X } from 'lucide-vue-next';
+import TButton from './TButton.vue';
+
+const props = defineProps({
+  label: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+  options: { type: Array, default: () => [] },
+  modelValue: { type: [String, Array], default: '' },
+  multiple: { type: Boolean, default: false },
+  selected: { type: Array, default: () => [] },
+  error: { type: String, default: '' },
+  optionLabel: { type: String, default: 'name' },
+  optionKey: { type: String, default: 'id' },
+  disabled: { type: Function, default: () => false }
+});
+
+const emit = defineEmits(['update:modelValue', 'select', 'clear']);
+
+const searchQuery = ref('');
+const showDropdown = ref(false);
+const selectedItems = ref([]);
+
+const filteredOptions = computed(() => {
+  if (!searchQuery.value) return props.options;
+  const query = searchQuery.value.toLowerCase();
+  return props.options.filter((option) => getOptionLabel(option).toLowerCase().includes(query));
+});
+
+function getOptionLabel(option) {
+  return typeof option === 'string' ? option : option[props.optionLabel];
+}
+
+function getOptionKey(option) {
+  return typeof option === 'string' ? option : option[props.optionKey];
+}
+
+function isSelected(option) {
+  if (!props.multiple) return false;
+  return selectedItems.value.some((item) => getOptionKey(item) === getOptionKey(option));
+}
+
+function isDisabled(option) {
+  return props.disabled(option);
+}
+
+function handleInput(event) {
+  searchQuery.value = event.target.value;
+  emit('update:modelValue', searchQuery.value);
+}
+
+function toggleDropdown() {
+  if (showDropdown.value && !searchQuery.value) {
+    showDropdown.value = false;
+  } else {
+    searchQuery.value = '';
+    emit('update:modelValue', '');
+    emit('clear');
+    showDropdown.value = true;
+  }
+}
+
+function selectOption(option) {
+  const label = getOptionLabel(option);
+
+  if (props.multiple) {
+    const key = getOptionKey(option);
+    const index = selectedItems.value.findIndex((item) => getOptionKey(item) === key);
+
+    if (index === -1) {
+      selectedItems.value.push(option);
+    } else {
+      selectedItems.value.splice(index, 1);
+    }
+
+    const selectedIds = selectedItems.value.map((item) => getOptionKey(item));
+    emit('update:modelValue', selectedIds);
+    emit('select', selectedIds);
+  } else {
+    searchQuery.value = label;
+    showDropdown.value = false;
+    emit('update:modelValue', label);
+    emit('select', option);
+  }
+}
+
+function removeSelectedItem(item) {
+  const index = selectedItems.value.findIndex(
+    (selected) => getOptionKey(selected) === getOptionKey(item)
+  );
+  if (index !== -1) {
+    selectedItems.value.splice(index, 1);
+    const selectedIds = selectedItems.value.map((i) => getOptionKey(i));
+    emit('update:modelValue', selectedIds);
+    emit('select', selectedIds);
+  }
+}
+
+function getHighlightedParts(text) {
+  const query = searchQuery.value.trim();
+  if (!query) return [{ text, isMatch: false }];
+
+  const regex = new RegExp(query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi');
+  const matches = [...text.matchAll(regex)];
+
+  if (matches.length === 0) return [{ text, isMatch: false }];
+
+  const result = [];
+  let lastIndex = 0;
+
+  for (const match of matches) {
+    const start = match.index ?? 0;
+    const end = start + match[0].length;
+
+    if (start > lastIndex) {
+      result.push({ text: text.slice(lastIndex, start), isMatch: false });
+    }
+
+    result.push({ text: text.slice(start, end), isMatch: true });
+    lastIndex = end;
+  }
+
+  if (lastIndex < text.length) {
+    result.push({ text: text.slice(lastIndex), isMatch: false });
+  }
+
+  return result;
+}
+
+// Outside click handling
+const dropdownRef = ref(null);
+
+function handleOutsideClick(event) {
+  if (dropdownRef.value && !dropdownRef.value.contains(event.target)) {
+    showDropdown.value = false;
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleOutsideClick);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleOutsideClick);
+});
+
+// Watch for external changes to modelValue
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (!props.multiple && typeof newValue === 'string') {
+      searchQuery.value = newValue;
+    }
+  }
+);
+
+// Watch for external changes to selected (for multi-select initialization)
+watch(
+  () => props.selected,
+  (newSelected) => {
+    if (props.multiple && Array.isArray(newSelected) && props.options.length > 0) {
+      selectedItems.value = props.options.filter((opt) => newSelected.includes(getOptionKey(opt)));
+    }
+  },
+  { immediate: true }
+);
+
+// Re-initialize when options load
+watch(
+  () => props.options,
+  () => {
+    if (props.multiple && props.selected.length > 0 && props.options.length > 0) {
+      selectedItems.value = props.options.filter((opt) =>
+        props.selected.includes(getOptionKey(opt))
+      );
+    }
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.searchable-dropdown {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-1;
+  position: relative;
+  width: 100%;
+}
+
+.dropdown-label {
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  color: $text-primary;
+}
+
+.dropdown-search {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+}
+
+.input-container {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  min-height: 44px;
+  border: 1px solid $border-color;
+  border-radius: $radius-lg;
+  background-color: $bg-white;
+  padding: 6px 12px;
+  transition: border-color $duration-fast $easing-standard, box-shadow $duration-fast $easing-standard;
+
+  &.is-focused {
+    border-color: $primary;
+    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.15);
+  }
+
+  &.has-error {
+    border-color: $error-color;
+  }
+}
+
+.search-icon {
+  width: 18px;
+  height: 18px;
+  color: $text-muted;
+  margin-right: $spacing-2;
+  flex-shrink: 0;
+}
+
+.input-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-right: $spacing-2;
+}
+
+.input-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  background: $primary;
+  color: $text-inverse;
+  border-radius: 999px;
+  font-size: $font-size-xs;
+  font-weight: $font-medium;
+  white-space: nowrap;
+
+  .chip-text {
+    line-height: 1.2;
+  }
+
+  .input-chip-remove {
+    padding: 0;
+    min-height: auto;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    color: $text-inverse;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.25);
+    }
+  }
+}
+
+.dropdown-input {
+  flex: 1;
+  min-width: 120px;
+  border: none;
+  outline: none;
+  padding: 4px 0;
+  font-size: $font-size-sm;
+  color: $text-primary;
+  background: transparent;
+
+  &.has-chips {
+    min-width: 80px;
+  }
+
+  &::placeholder {
+    color: $text-muted;
+  }
+}
+
+.dropdown-toggle-btn {
+  padding: 0;
+  min-height: auto;
+  width: 24px;
+  height: 24px;
+  margin-left: $spacing-1;
+  color: $text-muted;
+
+  &:hover {
+    color: $primary;
+  }
+}
+
+.dropdown-icon {
+  transition: transform $duration-fast $easing-standard;
+
+  &.is-open {
+    transform: rotate(180deg);
+  }
+}
+
+.dropdown-list {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  width: 100%;
+  background-color: $bg-white;
+  border: 1px solid $border-light;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-lg;
+  list-style: none;
+  padding: $spacing-1 0;
+  margin: 0;
+  z-index: $z-index-dropdown;
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.dropdown-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  cursor: pointer;
+  transition: background-color $duration-fast $easing-standard;
+  font-size: $font-size-sm;
+
+  .text-highlight {
+    color: $primary;
+    font-weight: $font-semibold;
+  }
+
+  .text-secondary {
+    color: $text-primary;
+  }
+
+  &:hover {
+    background-color: $bg-light;
+  }
+
+  &.selected-option {
+    background-color: rgba(var(--color-primary-rgb), 0.08);
+    font-weight: $font-semibold;
+  }
+
+  &.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .option-content {
+    flex: 1;
+  }
+
+  .selected-check {
+    color: $primary;
+    margin-left: $spacing-2;
+    flex-shrink: 0;
+  }
+}
+
+.error-text {
+  margin-top: 2px;
+  color: $error-color;
+  font-size: $font-size-xs;
+}
+</style>
diff --git a/components/StatsFilterModal.stories.js b/components/StatsFilterModal.stories.js
new file mode 100644
index 0000000..166cbdc
--- /dev/null
+++ b/components/StatsFilterModal.stories.js
@@ -0,0 +1,47 @@
+import StatsFilterModal from './StatsFilterModal.vue';
+import TButton from './TButton.vue';
+import { ref } from 'vue';
+
+export default {
+  title: 'Components/StatsFilterModal',
+  component: StatsFilterModal,
+  tags: ['autodocs']
+};
+
+const sampleWallets = [
+  { id: '1', name: 'Main Account', currency: 'GBP' },
+  { id: '2', name: 'Savings Pot', currency: 'GBP' },
+  { id: '3', name: 'Euro Travel Wallet', currency: 'EUR' }
+];
+
+export const Interactive = {
+  render: () => ({
+    components: { StatsFilterModal, TButton },
+    setup() {
+      const isOpen = ref(true);
+      const appliedFilters = ref(null);
+
+      const handleApply = (filters) => {
+        appliedFilters.value = filters;
+        isOpen.value = false;
+      };
+
+      return { isOpen, sampleWallets, appliedFilters, handleApply };
+    },
+    template: `
+      <div>
+        <TButton variant="primary" text="Open Filter Modal" @click="isOpen = true" />
+        <StatsFilterModal
+          v-if="isOpen"
+          :wallets="sampleWallets"
+          current-period="current_month"
+          @close="isOpen = false"
+          @apply="handleApply"
+        />
+        <div v-if="appliedFilters" style="margin-top: 1rem; font-size: 0.875rem;">
+          <strong>Applied:</strong> {{ appliedFilters }}
+        </div>
+      </div>
+    `
+  })
+};
diff --git a/components/StatsFilterModal.vue b/components/StatsFilterModal.vue
new file mode 100644
index 0000000..2bbf35d
--- /dev/null
+++ b/components/StatsFilterModal.vue
@@ -0,0 +1,416 @@
+<template>
+  <div class="filter-modal-overlay" @click.self="$emit('close')">
+    <TCard class="filter-modal">
+      <template #header>
+        <div class="filter-modal__header">
+          <h3 class="filter-modal__title">{{ t('Filter Statistics') }}</h3>
+          <TButton
+            type="button"
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="filter-modal__close"
+            :aria-label="t('Close')"
+            @click="$emit('close')"
+          >
+            <X :size="18" class="filter-modal__close-icon" />
+          </TButton>
+        </div>
+      </template>
+
+      <div class="filter-modal__body">
+        <div class="filter-modal__section">
+          <h4 class="filter-modal__section-title">{{ t('Date Range') }}</h4>
+          <div class="filter-modal__date-inputs">
+            <div class="filter-modal__field">
+              <label class="filter-modal__label">{{ t('Start date') }}</label>
+              <input
+                v-model="filters.startDate"
+                type="date"
+                class="filter-modal__input"
+                :max="filters.endDate || today"
+              />
+            </div>
+            <div class="filter-modal__field">
+              <label class="filter-modal__label">{{ t('End date') }}</label>
+              <input
+                v-model="filters.endDate"
+                type="date"
+                class="filter-modal__input"
+                :min="filters.startDate || undefined"
+                :max="today"
+              />
+            </div>
+          </div>
+          <div class="filter-modal__presets">
+            <TButton
+              v-for="preset in datePresets"
+              :key="preset.value"
+              type="button"
+              :variant="isPresetActive(preset.value) ? 'primary' : 'secondary'"
+              size="small"
+              :full-width="false"
+              class="filter-modal__preset-btn"
+              @click="applyPreset(preset.value)"
+            >
+              {{ t(preset.label) }}
+            </TButton>
+          </div>
+        </div>
+
+        <div v-if="walletsList && walletsList.length > 0" class="filter-modal__section">
+          <h4 class="filter-modal__section-title">{{ t('Wallets') }}</h4>
+          <div class="filter-modal__wallets">
+            <label
+              v-for="wallet in walletsList"
+              :key="wallet.id ?? 'all'"
+              class="filter-modal__wallet-option"
+            >
+              <input
+                type="checkbox"
+                :value="wallet.id"
+                :checked="isWalletSelected(wallet.id)"
+                class="filter-modal__checkbox"
+                @change="toggleWallet(wallet.id)"
+              />
+              <span class="filter-modal__wallet-name">{{ wallet.name }}</span>
+              <span v-if="wallet.currency" class="filter-modal__wallet-currency">
+                {{ wallet.currency }}
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="filter-modal__footer">
+          <TButton
+            type="button"
+            variant="secondary"
+            size="medium"
+            :full-width="false"
+            @click="resetFilters"
+          >
+            {{ t('Reset') }}
+          </TButton>
+          <TButton
+            type="button"
+            variant="primary"
+            size="medium"
+            :full-width="false"
+            @click="applyFilters"
+          >
+            {{ t('Apply Filters') }}
+          </TButton>
+        </div>
+      </template>
+    </TCard>
+  </div>
+</template>
+
+<script setup>
+import { reactive, computed, onMounted } from 'vue';
+import { X } from 'lucide-vue-next';
+import TCard from './TCard.vue';
+import TButton from './TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((key) => key);
+
+const props = defineProps({
+  initialFilters: {
+    type: Object,
+    default: () => ({})
+  },
+  wallets: {
+    type: Array,
+    default: () => []
+  },
+  currentPeriod: {
+    type: String,
+    default: ''
+  }
+});
+
+const emit = defineEmits(['close', 'apply']);
+
+const today = new Date().toISOString().split('T')[0];
+
+const filters = reactive({
+  startDate: props.initialFilters.startDate || '',
+  endDate: props.initialFilters.endDate || today,
+  walletIds: props.initialFilters.walletIds ? [...props.initialFilters.walletIds] : []
+});
+
+const datePresets = [
+  { label: 'This Week', value: 'current_week' },
+  { label: 'This Month', value: 'current_month' },
+  { label: 'Last 3 months', value: 'last_3_months' },
+  { label: 'This Year', value: 'current_year' },
+  { label: 'All time', value: 'all_time' }
+];
+
+const walletsList = computed(() => props.wallets || []);
+
+const isWalletSelected = (walletId) => {
+  if (filters.walletIds.length === 0) return true;
+  return filters.walletIds.includes(walletId);
+};
+
+const toggleWallet = (walletId) => {
+  const index = filters.walletIds.indexOf(walletId);
+  if (index === -1) {
+    if (filters.walletIds.length === 0) {
+      filters.walletIds = walletsList.value.filter((w) => w.id !== walletId).map((w) => w.id);
+    } else {
+      filters.walletIds.push(walletId);
+    }
+  } else {
+    filters.walletIds.splice(index, 1);
+    if (filters.walletIds.length === walletsList.value.length - 1) {
+      filters.walletIds = [];
+    }
+  }
+};
+
+const isPresetActive = (presetValue) => {
+  return props.currentPeriod === presetValue && !filters.startDate;
+};
+
+const applyPreset = (preset) => {
+  const now = new Date();
+  let start, end;
+
+  switch (preset) {
+    case 'current_week': {
+      const dayOfWeek = now.getDay();
+      const daysToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+      start = new Date(now);
+      start.setDate(start.getDate() - daysToMonday);
+      end = now;
+      break;
+    }
+    case 'current_month':
+      start = new Date(now.getFullYear(), now.getMonth(), 1);
+      end = now;
+      break;
+    case 'last_3_months':
+      start = new Date(now);
+      start.setMonth(start.getMonth() - 3);
+      end = now;
+      break;
+    case 'current_year':
+      start = new Date(now.getFullYear(), 0, 1);
+      end = now;
+      break;
+    case 'all_time':
+      start = new Date(2000, 0, 1);
+      end = now;
+      break;
+    default:
+      return;
+  }
+
+  filters.startDate = start.toISOString().split('T')[0];
+  filters.endDate = end.toISOString().split('T')[0];
+};
+
+const resetFilters = () => {
+  filters.startDate = '';
+  filters.endDate = today;
+  filters.walletIds = [];
+};
+
+const applyFilters = () => {
+  emit('apply', {
+    startDate: filters.startDate,
+    endDate: filters.endDate,
+    walletIds: filters.walletIds
+  });
+};
+
+onMounted(() => {
+  if (!filters.startDate && props.currentPeriod) {
+    applyPreset(props.currentPeriod);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.filter-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: $z-index-modal;
+  padding: $spacing-4;
+}
+
+.filter-modal {
+  width: 100%;
+  max-width: 480px;
+  max-height: 90vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.filter-modal__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: $spacing-4 $spacing-5;
+  border-bottom: 1px solid $border-light;
+}
+
+.filter-modal__title {
+  font-size: $font-size-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  margin: 0;
+}
+
+.filter-modal__close {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  min-height: auto;
+  color: $text-muted;
+
+  &:hover {
+    color: $text-primary;
+  }
+}
+
+.filter-modal__close-icon {
+  width: 18px;
+  height: 18px;
+}
+
+.filter-modal__body {
+  padding: $spacing-5;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.filter-modal__section {
+  margin-bottom: $spacing-5;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.filter-modal__section-title {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  color: $text-secondary;
+  margin: 0 0 $spacing-3;
+}
+
+.filter-modal__date-inputs {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: $spacing-3;
+  margin-bottom: $spacing-3;
+
+  @media (max-width: $breakpoint-sm) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.filter-modal__field {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-1;
+}
+
+.filter-modal__label {
+  font-size: $font-size-xs;
+  font-weight: $font-medium;
+  color: $text-muted;
+}
+
+.filter-modal__input {
+  padding: $spacing-2 $spacing-3;
+  border: 1px solid $border-light;
+  border-radius: $radius-lg;
+  font-size: $font-size-sm;
+  background: $bg-light;
+  color: $text-primary;
+  transition: border-color 0.2s ease;
+
+  &:focus {
+    outline: none;
+    border-color: $primary;
+    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.12);
+  }
+}
+
+.filter-modal__presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-2;
+}
+
+.filter-modal__preset-btn {
+  border-radius: 999px;
+  height: 28px;
+  font-size: $font-size-xs;
+}
+
+.filter-modal__wallets {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-2;
+  max-height: 180px;
+  overflow-y: auto;
+}
+
+.filter-modal__wallet-option {
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+  padding: $spacing-2 $spacing-3;
+  border-radius: $radius-md;
+  cursor: pointer;
+  transition: background 0.2s ease;
+
+  &:hover {
+    background: $bg-light;
+  }
+}
+
+.filter-modal__checkbox {
+  width: 16px;
+  height: 16px;
+  accent-color: $primary;
+  cursor: pointer;
+}
+
+.filter-modal__wallet-name {
+  flex: 1;
+  font-size: $font-size-sm;
+  color: $text-primary;
+}
+
+.filter-modal__wallet-currency {
+  font-size: $font-size-xs;
+  color: $text-muted;
+  padding: 2px 6px;
+  background: $bg-light;
+  border-radius: $radius-sm;
+}
+
+.filter-modal__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: $spacing-3;
+  padding: $spacing-4 $spacing-5;
+  border-top: 1px solid $border-light;
+}
+</style>
diff --git a/components/TAvatar.stories.js b/components/TAvatar.stories.js
new file mode 100644
index 0000000..951cf68
--- /dev/null
+++ b/components/TAvatar.stories.js
@@ -0,0 +1,44 @@
+import TAvatar from './TAvatar.vue';
+import { User, Bell, LifeBuoy } from 'lucide-vue-next';
+
+export default {
+  title: 'Primitives/TAvatar',
+  component: TAvatar,
+  argTypes: {
+    imageUrl: { control: 'text' },
+    userName: { control: 'text' },
+    showName: { control: 'boolean' },
+    showDropdown: { control: 'boolean' },
+  },
+};
+
+export const Default = {
+  args: {
+    imageUrl: 'https://i.pravatar.cc/100?img=1',
+    user: { first_name: 'John', last_name: 'Doe', email: 'john@example.com', is_admin: true },
+    userName: 'John Doe',
+    showName: true,
+  },
+};
+
+export const CustomItems = {
+  args: {
+    imageUrl: 'https://i.pravatar.cc/100?img=3',
+    user: { first_name: 'Alice', last_name: 'Smith', email: 'alice@plugin.org' },
+    userName: 'Alice Smith',
+    showName: true,
+    items: [
+      { id: 'profile', label: 'My Profile', icon: User },
+      { id: 'notifications', label: 'Notification Preferences', icon: Bell },
+      { id: 'support', label: 'Get Support', icon: LifeBuoy },
+      { id: 'exit', label: 'Switch Tenant', danger: true }
+    ]
+  }
+};
+
+export const WithoutDropdown = {
+  args: {
+    imageUrl: 'https://i.pravatar.cc/100?img=2',
+    showDropdown: false
+  }
+};
diff --git a/components/TAvatar.vue b/components/TAvatar.vue
new file mode 100644
index 0000000..98428f6
--- /dev/null
+++ b/components/TAvatar.vue
@@ -0,0 +1,275 @@
+<template>
+  <div ref="rootRef" class="t-avatar">
+    <button class="t-avatar-button" :aria-label="accountMenuLabel" @click="toggle">
+      <img :src="imageUrl" alt="User Avatar" class="avatar-image" />
+      <div v-if="showName && userName" class="user-info">
+        <span class="user-name-text">{{ userName }}</span>
+      </div>
+    </button>
+
+    <Transition v-if="showDropdown" name="dropdown">
+      <div v-if="isOpen" class="avatar-dropdown">
+        <slot name="header" :user="user" :close="close">
+          <div v-if="user" class="dropdown-header">
+            <img :src="imageUrl" alt="User Avatar" class="header-avatar" />
+            <div class="header-info">
+              <p class="header-name">{{ user.first_name }} {{ user.last_name }}</p>
+              <p class="header-email">{{ user.email }}</p>
+            </div>
+          </div>
+        </slot>
+        <TDivider v-if="user || $slots.header" orientation="horizontal" />
+        <div class="menu-list">
+          <slot name="menu" :user="user" :close="close">
+            <template v-if="items && items.length">
+              <TDropdownItem
+                v-for="item in items"
+                :key="item.id || item.label"
+                class="avatar-menu-item"
+                :class="{ 'avatar-menu-item--danger': item.danger }"
+                @click="onCustomItemClick(item)"
+              >
+                <component :is="item.icon" v-if="item.icon" class="menu-icon" />
+                <span>{{ item.label }}</span>
+              </TDropdownItem>
+            </template>
+            <template v-else>
+              <TDropdownItem class="avatar-menu-item" @click="onSettings">
+                <Settings class="menu-icon" />
+                <span>{{ settingsLabel }}</span>
+              </TDropdownItem>
+              <TDropdownItem v-if="user?.is_admin" class="avatar-menu-item" @click="onAdmin">
+                <ShieldCheck class="menu-icon" />
+                <span>{{ adminLabel }}</span>
+              </TDropdownItem>
+              <TDropdownItem class="avatar-menu-item avatar-menu-item--danger" @click="onLogout">
+                <LogOut class="menu-icon" />
+                <span>{{ logoutLabel }}</span>
+              </TDropdownItem>
+            </template>
+          </slot>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+import { Settings, LogOut, ShieldCheck } from 'lucide-vue-next';
+import { useDropdown } from '../composables/useDropdown';
+import TDropdownItem from './TDropdownItem.vue';
+import TDivider from './TDivider.vue';
+
+const props = defineProps({
+  imageUrl: {
+    type: String,
+    required: true
+  },
+  user: {
+    type: Object,
+    default: null
+  },
+  userName: {
+    type: String,
+    default: ''
+  },
+  showName: {
+    type: Boolean,
+    default: false
+  },
+  showDropdown: {
+    type: Boolean,
+    default: true
+  },
+  accountMenuLabel: {
+    type: String,
+    default: 'Account menu'
+  },
+  settingsLabel: {
+    type: String,
+    default: 'Settings'
+  },
+  adminLabel: {
+    type: String,
+    default: 'Admin'
+  },
+  logoutLabel: {
+    type: String,
+    default: 'Logout'
+  },
+  items: {
+    type: Array,
+    default: null
+  }
+});
+
+const emit = defineEmits(['settings', 'admin', 'logout', 'select']);
+
+const { isOpen, rootRef, toggle, close } = useDropdown();
+
+const onSettings = () => {
+  close();
+  emit('settings');
+};
+
+const onAdmin = () => {
+  close();
+  emit('admin');
+};
+
+const onLogout = () => {
+  close();
+  emit('logout');
+};
+
+const onCustomItemClick = (item) => {
+  close();
+  if (item.action) {
+    item.action();
+  }
+  emit('select', item);
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.t-avatar {
+  position: relative;
+  display: inline-block;
+}
+
+.t-avatar-button {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  background-color: transparent;
+  border: none;
+  border-radius: $radius-md;
+  padding: 0.25rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: $bg-light;
+  }
+
+  .avatar-image {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 1px solid $border-medium;
+    box-shadow: 0 0 0 2px $bg-white;
+    background-color: $bg-white;
+  }
+
+  .user-info {
+    display: flex;
+    align-items: center;
+  }
+
+  .user-name-text {
+    color: $text-primary;
+    font-weight: $font-semibold;
+    font-size: 1rem;
+  }
+}
+
+.avatar-dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  width: 260px;
+  background: $bg-white;
+  border: 1px solid $border-color;
+  border-radius: $radius-xl;
+  box-shadow: $shadow-md;
+  overflow: hidden;
+  z-index: $z-index-dropdown;
+
+  @media (max-width: $breakpoint-sm) {
+    width: calc(100vw - 32px);
+    right: -8px;
+  }
+}
+
+.dropdown-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem;
+
+  .header-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    object-fit: cover;
+    flex-shrink: 0;
+  }
+
+  .header-info {
+    min-width: 0;
+    flex: 1;
+  }
+
+  .header-name {
+    margin: 0;
+    font-size: $font-size-sm;
+    font-weight: $font-semibold;
+    color: $text-primary;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .header-email {
+    margin: 0;
+    font-size: $font-size-xs;
+    color: $text-muted;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.menu-list {
+  padding: 0.25rem 0;
+}
+
+.avatar-menu-item {
+  border-radius: 0;
+
+  .menu-icon {
+    width: 18px;
+    height: 18px;
+    color: $text-secondary;
+  }
+
+  &--danger {
+    color: $error-color;
+
+    .menu-icon {
+      color: $error-color;
+    }
+
+    &:hover {
+      background: rgba(var(--color-error-rgb), 0.08);
+      color: $error-color;
+    }
+  }
+}
+
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease;
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+</style>
diff --git a/components/TDashboardTopCard.stories.js b/components/TDashboardTopCard.stories.js
new file mode 100644
index 0000000..2bffd00
--- /dev/null
+++ b/components/TDashboardTopCard.stories.js
@@ -0,0 +1,36 @@
+import TDashboardTopCard from './TDashboardTopCard.vue';
+import { ref } from 'vue';
+
+export default {
+  title: 'Components/TDashboardTopCard',
+  component: TDashboardTopCard,
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text' },
+    subtitle: { control: 'text' },
+    showFilters: { control: 'boolean' }
+  }
+};
+
+const sampleWallets = [
+  { id: '1', name: 'Main Checking', currency: 'USD' },
+  { id: '2', name: 'Savings Pot', currency: 'USD' }
+];
+
+export const Default = {
+  render: () => ({
+    components: { TDashboardTopCard },
+    setup() {
+      const period = ref('current_month');
+      return { period, sampleWallets };
+    },
+    template: `
+      <div style="width: 100%; max-width: 900px;">
+        <TDashboardTopCard
+          v-model="period"
+          :wallets="sampleWallets"
+        />
+      </div>
+    `
+  })
+};
diff --git a/components/TDashboardTopCard.vue b/components/TDashboardTopCard.vue
new file mode 100644
index 0000000..dec024f
--- /dev/null
+++ b/components/TDashboardTopCard.vue
@@ -0,0 +1,310 @@
+<template>
+  <section class="hero surface surface--brand">
+    <div class="hero-ambient" aria-hidden="true">
+      <BarChart3 class="amb a1" :size="72" :stroke-width="1" />
+      <Wallet class="amb a2" :size="64" :stroke-width="1" />
+      <Coins class="amb a3" :size="56" :stroke-width="1" />
+      <TrendingUp class="amb a4" :size="60" :stroke-width="1" />
+      <PieChart class="amb a5" :size="52" :stroke-width="1" />
+    </div>
+
+    <div class="hero-body">
+      <div class="hero-greeting">
+        <h2 class="hero-title">{{ title || t('Overview') }}</h2>
+        <p class="hero-sub">
+          {{ subtitle || t('Showing {period}.', { period: currentPeriodLabel }) }}
+        </p>
+      </div>
+
+      <div v-if="showFilters" class="hero-controls">
+        <slot name="wallet-selector" />
+
+        <div class="hero-chips">
+          <TButton
+            v-for="period in periodsList.slice(0, 3)"
+            :key="period.value"
+            type="button"
+            :variant="currentPeriodValue === period.value && !isCustomActive ? 'primary' : 'secondary'"
+            size="small"
+            :full-width="false"
+            class="hero-chip"
+            @click="handlePresetClick(period.value)"
+          >
+            {{ t(period.label) }}
+          </TButton>
+
+          <TButton
+            type="button"
+            :variant="isCustomActive ? 'primary' : 'secondary'"
+            size="small"
+            :full-width="false"
+            class="hero-chip hero-chip--custom"
+            @click="toggleCustomPeriod"
+          >
+            <span>{{ t('Custom') }}</span>
+            <template #right-icon>
+              <ChevronDown
+                :size="14"
+                class="chip-icon"
+                :class="{ 'chip-icon--rotated': showFilterModal }"
+              />
+            </template>
+          </TButton>
+        </div>
+      </div>
+    </div>
+
+    <StatsFilterModal
+      v-if="showFilterModal"
+      :initial-filters="customFilters"
+      :wallets="wallets"
+      :current-period="currentPeriodValue"
+      @close="showFilterModal = false"
+      @apply="handleFiltersApply"
+    />
+  </section>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { ChevronDown, BarChart3, Wallet, Coins, TrendingUp, PieChart } from 'lucide-vue-next';
+import StatsFilterModal from './StatsFilterModal.vue';
+import TButton from './TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((key, params) => {
+  if (params?.period) return `Showing ${params.period}.`;
+  return key;
+});
+const locale = i18n?.locale || ref('en');
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  subtitle: {
+    type: String,
+    default: ''
+  },
+  showFilters: {
+    type: Boolean,
+    default: true
+  },
+  modelValue: {
+    type: String,
+    default: 'current_month'
+  },
+  periods: {
+    type: Array,
+    default: () => [
+      { label: 'This Week', value: 'current_week' },
+      { label: 'This Month', value: 'current_month' },
+      { label: 'Last 3 months', value: 'last_3_months' },
+      { label: 'This Year', value: 'current_year' }
+    ]
+  },
+  wallets: {
+    type: Array,
+    default: () => []
+  },
+  customRange: {
+    type: Object,
+    default: null
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'apply-filters', 'change']);
+
+const showFilterModal = ref(false);
+const customFilters = ref(props.customRange);
+const internalPeriod = ref(props.modelValue);
+
+const currentPeriodValue = computed(() => props.modelValue || internalPeriod.value);
+const periodsList = computed(() => props.periods || []);
+
+const isCustomActive = computed(() => {
+  return currentPeriodValue.value === 'custom' && customFilters.value !== null;
+});
+
+const currentPeriodLabel = computed(() => {
+  if (isCustomActive.value && customFilters.value) {
+    const start = customFilters.value.startDate;
+    const end = customFilters.value.endDate;
+    if (start && end) {
+      return `${formatDate(start)} - ${formatDate(end)}`;
+    }
+  }
+  const period = periodsList.value.find((p) => p.value === currentPeriodValue.value);
+  return period ? t(period.label).toLowerCase() : t('this period');
+});
+
+const formatDate = (dateStr) => {
+  try {
+    const date = new Date(dateStr);
+    return new Intl.DateTimeFormat(locale.value || 'en', { month: 'short', day: 'numeric' }).format(date);
+  } catch {
+    return dateStr;
+  }
+};
+
+const toggleCustomPeriod = () => {
+  showFilterModal.value = !showFilterModal.value;
+};
+
+const handlePresetClick = (periodValue) => {
+  customFilters.value = null;
+  internalPeriod.value = periodValue;
+  emit('update:modelValue', periodValue);
+  emit('change', periodValue);
+};
+
+const handleFiltersApply = (filters) => {
+  customFilters.value = filters;
+  internalPeriod.value = 'custom';
+  emit('update:modelValue', 'custom');
+  emit('apply-filters', filters);
+  showFilterModal.value = false;
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.hero {
+  position: relative;
+  width: 100%;
+  border-radius: 18px;
+  padding: 1rem 1.25rem;
+  overflow: hidden;
+  background: var(--surface-brand, $bg-white);
+  border: 1px solid $border-light;
+  box-shadow: $elevation-1;
+}
+
+.hero-ambient {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+
+  .amb {
+    position: absolute;
+    color: var(--surface-deep, $primary);
+    opacity: 0.07;
+  }
+  .a1 {
+    top: -10px;
+    right: 6%;
+    transform: rotate(-10deg);
+  }
+  .a2 {
+    bottom: -14px;
+    right: 22%;
+    transform: rotate(8deg);
+  }
+  .a3 {
+    top: 20%;
+    right: 38%;
+    transform: rotate(10deg);
+  }
+  .a4 {
+    bottom: -8px;
+    left: 6%;
+    transform: rotate(-8deg);
+  }
+  .a5 {
+    top: -8px;
+    left: 30%;
+    transform: rotate(12deg);
+  }
+}
+
+.hero-body {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-3;
+
+  @media (min-width: $breakpoint-sm) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: $spacing-3;
+  }
+}
+
+.hero-greeting {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.hero-title {
+  margin: 0;
+  color: var(--surface-ink, $text-primary);
+  font-size: $font-size-lg;
+  font-weight: $font-bold;
+  letter-spacing: -0.015em;
+  line-height: 1.2;
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: $font-size-base;
+  }
+}
+
+.hero-sub {
+  margin: 0;
+  color: var(--surface-ink, $text-secondary);
+  opacity: 0.7;
+  font-size: $font-size-sm;
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: $font-size-xs;
+  }
+}
+
+.hero-controls {
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+  flex-wrap: wrap;
+
+  @media (min-width: $breakpoint-sm) {
+    justify-content: flex-end;
+  }
+}
+
+.hero-chips {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  padding: 4px;
+  background: var(--glass-bg, $bg-light);
+  border: 1px solid $border-light;
+  border-radius: 999px;
+  backdrop-filter: blur(10px);
+  box-shadow: $elevation-1;
+  width: fit-content;
+}
+
+.hero-chip {
+  border-radius: 999px;
+  height: 30px;
+  padding: 0 12px;
+  font-size: $font-size-xs;
+}
+
+.chip-icon {
+  margin-left: 2px;
+  transition: transform $duration-fast $easing-standard;
+
+  &--rotated {
+    transform: rotate(180deg);
+  }
+}
+</style>
diff --git a/components/TInput.stories.js b/components/TInput.stories.js
new file mode 100644
index 0000000..8242b47
--- /dev/null
+++ b/components/TInput.stories.js
@@ -0,0 +1,65 @@
+import TInput from './TInput.vue';
+import { Mail, Eye } from 'lucide-vue-next';
+
+export default {
+  title: 'Primitives/TInput',
+  component: TInput,
+  argTypes: {
+    size: { control: 'select', options: ['small', 'medium', 'large'] },
+    disabled: { control: 'boolean' },
+    error: { control: 'boolean' },
+    fullWidth: { control: 'boolean' },
+    placeholder: { control: 'text' },
+    type: { control: 'text' }
+  }
+};
+
+export const Default = {
+  args: {
+    placeholder: 'Enter text...'
+  }
+};
+
+export const WithPrefix = {
+  render: (args) => ({
+    components: { TInput, Mail },
+    setup() { return { args }; },
+    template: `
+      <TInput v-bind="args" placeholder="you@example.com">
+        <template #prefix>
+          <Mail :size="16" />
+        </template>
+      </TInput>
+    `
+  })
+};
+
+export const WithSuffix = {
+  render: (args) => ({
+    components: { TInput, Eye },
+    setup() { return { args }; },
+    template: `
+      <TInput v-bind="args" placeholder="Password" type="password">
+        <template #suffix>
+          <Eye :size="16" style="cursor: pointer;" />
+        </template>
+      </TInput>
+    `
+  })
+};
+
+export const ErrorState = {
+  args: {
+    placeholder: 'Invalid entry',
+    error: true,
+    modelValue: 'invalid-email'
+  }
+};
+
+export const Disabled = {
+  args: {
+    placeholder: 'Disabled input',
+    disabled: true,
+    modelValue: 'Cannot edit'
+  }
+};
diff --git a/components/TInput.vue b/components/TInput.vue
new file mode 100644
index 0000000..fe0bb65
--- /dev/null
+++ b/components/TInput.vue
@@ -0,0 +1,228 @@
+<template>
+  <div
+    class="t-input-wrapper"
+    :class="[
+      `t-input--${size}`,
+      {
+        't-input--disabled': disabled,
+        't-input--error': !!error,
+        't-input--focused': isFocused,
+        't-input--full-width': fullWidth
+      }
+    ]"
+  >
+    <span v-if="$slots.prefix" class="t-input-prefix">
+      <slot name="prefix" />
+    </span>
+
+    <input
+      :id="id"
+      ref="inputRef"
+      :type="type"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :name="name"
+      :autocomplete="autocomplete"
+      class="t-input-element"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @keydown="$emit('keydown', $event)"
+    />
+
+    <span v-if="$slots.suffix" class="t-input-suffix">
+      <slot name="suffix" />
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: ''
+  },
+  type: {
+    type: String,
+    default: 'text'
+  },
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  size: {
+    type: String,
+    default: 'medium',
+    validator: (v) => ['small', 'medium', 'large'].includes(v)
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  error: {
+    type: [Boolean, String],
+    default: false
+  },
+  fullWidth: {
+    type: Boolean,
+    default: false
+  },
+  id: {
+    type: String,
+    default: undefined
+  },
+  name: {
+    type: String,
+    default: undefined
+  },
+  autocomplete: {
+    type: String,
+    default: undefined
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'keydown']);
+
+const inputRef = ref(null);
+const isFocused = ref(false);
+
+const handleInput = (event) => {
+  emit('update:modelValue', event.target.value);
+};
+
+const handleFocus = (event) => {
+  isFocused.value = true;
+  emit('focus', event);
+};
+
+const handleBlur = (event) => {
+  isFocused.value = false;
+  emit('blur', event);
+};
+
+defineExpose({
+  focus: () => inputRef.value?.focus(),
+  blur: () => inputRef.value?.blur(),
+  inputRef
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.t-input-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  background: $bg-white;
+  border: 1px solid $border-light;
+  border-radius: $radius-md;
+  color: $text-primary;
+  transition: border-color $duration-fast $easing-standard, box-shadow $duration-fast $easing-standard, width $duration-base $easing-standard;
+  box-sizing: border-box;
+
+  &--focused {
+    border-color: $primary;
+    box-shadow: 0 0 0 2px rgba(4, 120, 68, 0.15);
+  }
+
+  &--error {
+    border-color: $error-color;
+
+    &.t-input--focused {
+      box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
+    }
+  }
+
+  &--disabled {
+    background: $bg-light;
+    cursor: not-allowed;
+    opacity: 0.7;
+
+    .t-input-element {
+      cursor: not-allowed;
+    }
+  }
+
+  &--full-width {
+    width: 100%;
+  }
+
+  // Sizes
+  &--small {
+    padding: 0 $spacing-2;
+    min-height: 28px;
+    font-size: $font-size-xs;
+
+    .t-input-element {
+      padding: 4px $spacing-1;
+      font-size: $font-size-xs;
+    }
+  }
+
+  &--medium {
+    padding: 0 $spacing-3;
+    min-height: 38px;
+    font-size: $font-size-sm;
+
+    .t-input-element {
+      padding: 8px $spacing-1;
+      font-size: $font-size-sm;
+    }
+  }
+
+  &--large {
+    padding: 0 $spacing-4;
+    min-height: 46px;
+    font-size: $font-size-base;
+
+    .t-input-element {
+      padding: 10px $spacing-2;
+      font-size: $font-size-base;
+    }
+  }
+}
+
+.t-input-element {
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  line-height: 1.5;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::placeholder {
+    color: $text-muted;
+  }
+}
+
+.t-input-prefix,
+.t-input-suffix {
+  display: inline-flex;
+  align-items: center;
+  color: $text-muted;
+  flex-shrink: 0;
+}
+
+.t-input-prefix {
+  margin-right: $spacing-1;
+}
+
+.t-input-suffix {
+  margin-left: $spacing-1;
+}
+</style>
diff --git a/components/TTableComponent.stories.js b/components/TTableComponent.stories.js
new file mode 100644
index 0000000..8a3e4e5
--- /dev/null
+++ b/components/TTableComponent.stories.js
@@ -0,0 +1,97 @@
+import TTableComponent from './TTableComponent.vue';
+import { ref } from 'vue';
+
+export default {
+  title: 'Components/TTableComponent',
+  component: TTableComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text' },
+    showHeader: { control: 'boolean' },
+    showSearch: { control: 'boolean' },
+    showTotals: { control: 'boolean' },
+    showPagination: { control: 'boolean' }
+  }
+};
+
+const sampleTransactions = [
+  {
+    id: 1,
+    date: '2026-09-01',
+    time: '14:30',
+    type: 'EXPENSE',
+    party: 'Whole Foods Market',
+    amount: '84.50 USD',
+    category: 'Groceries'
+  },
+  {
+    id: 2,
+    date: '2026-09-02',
+    time: '09:15',
+    type: 'INCOME',
+    party: 'Acme Corp',
+    amount: '3200.00 USD',
+    category: 'Salary'
+  },
+  {
+    id: 3,
+    date: '2026-09-03',
+    time: '19:45',
+    type: 'EXPENSE',
+    party: 'Starbucks',
+    amount: '6.75 USD',
+    category: 'Coffee',
+    isRecurring: true
+  },
+  {
+    id: 4,
+    date: '2026-09-04',
+    time: '11:00',
+    type: 'EXPENSE',
+    party: 'Apex Gym',
+    amount: '65.00 USD',
+    category: 'Fitness',
+    isRecurring: true
+  },
+  {
+    id: 5,
+    date: '2026-09-05',
+    time: '16:20',
+    type: 'INCOME',
+    party: 'Refund Service',
+    amount: '45.00 USD',
+    category: 'Shopping',
+    isRefund: true
+  }
+];
+
+export const Default = {
+  render: (args) => ({
+    components: { TTableComponent },
+    setup() {
+      const search = ref('');
+      const page = ref(1);
+      return { args, sampleTransactions, search, page };
+    },
+    template: `
+      <div style="padding: 24px; max-width: 960px;">
+        <TTableComponent
+          v-bind="args"
+          :transactions="sampleTransactions"
+          :total-entries="sampleTransactions.length"
+          :current-page="page"
+          v-model:search-query="search"
+          @page-change="page = $event"
+        />
+      </div>
+    `
+  })
+};
+
+export const Empty = {
+  args: {
+    transactions: [],
+    totalEntries: 0,
+    emptyText: 'No transactions recorded for this period'
+  }
+};
diff --git a/components/TTableComponent.vue b/components/TTableComponent.vue
new file mode 100644
index 0000000..eb9230b
--- /dev/null
+++ b/components/TTableComponent.vue
@@ -0,0 +1,661 @@
+<template>
+  <div class="table-container">
+    <div v-if="showHeader" class="table-heading">
+      <slot name="header-title">
+        <h2 class="table-heading-text">{{ title || t('All Transactions') }}</h2>
+      </slot>
+      <div class="input-controls">
+        <SearchInput
+          v-if="showSearch"
+          :model-value="searchQuery"
+          :placeholder="searchPlaceholder || t('Search...')"
+          :debounce="0"
+          @update:model-value="$emit('update:searchQuery', $event)"
+        />
+        <TButton
+          v-if="showFilterButton"
+          variant="secondary"
+          size="small"
+          :full-width="false"
+          class="filter-toggle-btn"
+          aria-label="Toggle filters"
+          @click="$emit('toggle-filters')"
+        >
+          <Filter :size="16" class="filter-toggle-icon" />
+          <span v-if="activeFilterCount" class="filter-count-badge">{{ activeFilterCount }}</span>
+        </TButton>
+      </div>
+    </div>
+
+    <div class="table-wrapper">
+      <div class="table-scroll">
+        <table class="custom-table" :class="{ 'expense-table': headerType === 'expense' }">
+          <thead>
+            <tr>
+              <slot name="header-columns">
+                <th>{{ t('Date Time') }}</th>
+                <th>{{ t('Type') }}</th>
+                <th>{{ t('Party') }}</th>
+                <th>{{ t('Amount') }}</th>
+                <th>{{ t('Category') }}</th>
+                <th>{{ t('Action') }}</th>
+              </slot>
+            </tr>
+          </thead>
+          <tbody class="table-body">
+            <template v-if="displayedTransactions.length">
+              <tr v-for="(txn, index) in displayedTransactions" :key="txn.id || index">
+                <slot name="row" :item="txn" :index="index">
+                  <td>
+                    <div class="date-main">{{ formatDate(txn) }}</div>
+                    <div class="date-sub">{{ formatTimeAgo(txn) }}</div>
+                  </td>
+                  <td>
+                    <span :class="['type-badge', txn.type === 'INCOME' ? 'income' : 'outcome']">
+                      {{ txn.type }}
+                    </span>
+                    <span v-if="txn.isTransfer" class="transfer-badge">
+                      {{ t('Transfer') }}
+                    </span>
+                    <span v-if="txn.isRefund" class="refund-badge">
+                      {{ t('Refund') }}
+                    </span>
+                    <span v-if="txn.isRecurring" class="recurring-badge">
+                      {{ t('Recurring') }}
+                    </span>
+                  </td>
+                  <td>
+                    <span class="party">{{ txn.party || '—' }}</span>
+                  </td>
+                  <td>
+                    <span :class="txn.type === 'INCOME' ? 'amount-income' : 'amount-outcome'">
+                      {{ txn.amount }}
+                    </span>
+                  </td>
+                  <td>{{ txn.category }}</td>
+                  <td>
+                    <div class="actions">
+                      <TButton
+                        variant="text"
+                        size="small"
+                        :full-width="false"
+                        class="action-btn"
+                        aria-label="Edit item"
+                        @click="$emit('edit', txn)"
+                      >
+                        <Edit2 :size="15" class="action-icon" />
+                      </TButton>
+                      <TButton
+                        variant="text"
+                        size="small"
+                        :full-width="false"
+                        class="action-btn action-btn--recurring"
+                        aria-label="Make recurrent"
+                        @click="$emit('recurrent', txn)"
+                      >
+                        <Repeat :size="15" class="action-icon" />
+                      </TButton>
+                      <TButton
+                        variant="text"
+                        size="small"
+                        :full-width="false"
+                        class="action-btn action-btn--danger"
+                        aria-label="Delete item"
+                        @click="$emit('delete', txn)"
+                      >
+                        <Trash2 :size="15" class="action-icon" />
+                      </TButton>
+                    </div>
+                  </td>
+                </slot>
+              </tr>
+            </template>
+            <tr v-else>
+              <td colspan="6" class="empty-row">
+                <slot name="empty">
+                  <div class="empty-placeholder">{{ emptyText || t('No transactions found') }}</div>
+                </slot>
+              </td>
+            </tr>
+          </tbody>
+          <tfoot>
+            <tr v-if="showTotals" class="totals-row">
+              <td colspan="6" class="totals-cell">
+                <div class="totals-grid">
+                  <div class="total-section totals-label">
+                    <span class="total-label">{{ t('Totals') }}</span>
+                  </div>
+                  <div class="total-section income">
+                    <span class="total-label">{{ t('Income') }}</span>
+                    <span class="total-value">{{ formatDisplayCurrency(computedTotals.income) }}</span>
+                  </div>
+                  <div class="total-section expense">
+                    <span class="total-label">{{ t('Expenses') }}</span>
+                    <span class="total-value">{{ formatDisplayCurrency(computedTotals.expenses) }}</span>
+                  </div>
+                  <div
+                    class="total-section net"
+                    :class="{ positive: computedTotals.net >= 0, negative: computedTotals.net < 0 }"
+                  >
+                    <span class="total-label">{{ t('Net') }}</span>
+                    <span class="total-value">{{ formatDisplayCurrency(computedTotals.net) }}</span>
+                  </div>
+                </div>
+              </td>
+            </tr>
+            <tr v-if="showPagination" class="pagination-row">
+              <td colspan="6">
+                <div class="pagination-container">
+                  <div class="pagination-controls">
+                    <TButton
+                      variant="secondary"
+                      size="small"
+                      :full-width="false"
+                      class="pagination-btn"
+                      :disabled="currentPage <= 1"
+                      @click="$emit('page-change', currentPage - 1)"
+                    >
+                      {{ t('Previous') }}
+                    </TButton>
+                    <TButton
+                      v-for="page in visiblePages"
+                      :key="page"
+                      :variant="page === currentPage ? 'primary' : 'secondary'"
+                      size="small"
+                      :full-width="false"
+                      class="pagination-btn"
+                      @click="$emit('page-change', page)"
+                    >
+                      {{ page }}
+                    </TButton>
+                    <TButton
+                      variant="secondary"
+                      size="small"
+                      :full-width="false"
+                      class="pagination-btn"
+                      :disabled="currentPage >= pagesTotal"
+                      @click="$emit('page-change', currentPage + 1)"
+                    >
+                      {{ t('Next') }}
+                    </TButton>
+                  </div>
+                  <div class="pagination-info">
+                    <span class="entries-text">
+                      {{ paginationInfoText }}
+                    </span>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { Edit2, Trash2, Repeat, Filter } from 'lucide-vue-next';
+import { parseAmount, getCurrencySymbol } from '../utils/currency';
+import SearchInput from './SearchInput.vue';
+import TButton from './TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const CURRENCY_RATES = {
+  USD: 1.0,
+  EUR: 0.85,
+  XAF: 600.0,
+  GBP: 0.75,
+  CAD: 1.35
+};
+
+const props = defineProps({
+  title: { type: String, default: '' },
+  showHeader: { type: Boolean, default: true },
+  showSearch: { type: Boolean, default: true },
+  showFilterButton: { type: Boolean, default: true },
+  showTotals: { type: Boolean, default: true },
+  showPagination: { type: Boolean, default: true },
+  searchPlaceholder: { type: String, default: '' },
+  emptyText: { type: String, default: '' },
+  transactions: { type: Array, default: () => [] },
+  searchQuery: { type: String, default: '' },
+  currentPage: { type: Number, default: 1 },
+  itemsPerPage: { type: Number, default: 10 },
+  totalPages: { type: Number, default: 1 },
+  totalEntries: { type: Number, default: 0 },
+  headerType: { type: String, default: 'default' },
+  allTransactions: { type: Array, default: () => [] },
+  activeFilterCount: { type: Number, default: 0 },
+  filteredTotals: { type: Object, default: null },
+  defaultCurrency: { type: String, default: 'USD' }
+});
+
+defineEmits(['edit', 'delete', 'recurrent', 'page-change', 'update:searchQuery', 'toggle-filters']);
+
+const displayedTransactions = computed(() => props.transactions);
+
+const convertCurrency = (amount, fromCurrency, toCurrency) => {
+  if (fromCurrency === toCurrency) return amount;
+  const fromRate = CURRENCY_RATES[fromCurrency] || 1;
+  const toRate = CURRENCY_RATES[toCurrency] || 1;
+  const usdAmount = amount / fromRate;
+  return usdAmount * toRate;
+};
+
+const computedTotals = computed(() => {
+  if (props.filteredTotals) {
+    return props.filteredTotals;
+  }
+
+  const txns = props.allTransactions.length > 0 ? props.allTransactions : props.transactions;
+  const targetCurrency = props.defaultCurrency;
+  let income = 0;
+  let expenses = 0;
+
+  txns.forEach((txn) => {
+    const { value, currency } = parseAmount(txn.amount);
+    const convertedAmount = convertCurrency(value, currency || targetCurrency, targetCurrency);
+    if (txn.type === 'INCOME') {
+      income += convertedAmount;
+    } else {
+      expenses += convertedAmount;
+    }
+  });
+
+  return {
+    income,
+    expenses,
+    net: income - expenses
+  };
+});
+
+const formatDisplayCurrency = (value) => {
+  const currency = props.defaultCurrency;
+  const symbol = getCurrencySymbol(currency);
+  const formatted = new Intl.NumberFormat('en-US', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(value || 0);
+  return `${formatted} ${symbol}`;
+};
+
+const computedTotalEntries = computed(() => {
+  if (props.totalEntries && props.totalEntries > 0) return props.totalEntries;
+  return displayedTransactions.value.length;
+});
+
+const pagesTotal = computed(() => {
+  if (props.totalPages && props.totalPages > 1) return props.totalPages;
+  return Math.max(1, Math.ceil(computedTotalEntries.value / props.itemsPerPage));
+});
+
+const startEntry = computed(() => {
+  if (computedTotalEntries.value === 0) return 0;
+  return (props.currentPage - 1) * props.itemsPerPage + 1;
+});
+
+const endEntry = computed(() => {
+  const end = props.currentPage * props.itemsPerPage;
+  return Math.min(end, computedTotalEntries.value);
+});
+
+const paginationInfoText = computed(() => {
+  return `Showing ${startEntry.value}-${endEntry.value} of ${computedTotalEntries.value} entries`;
+});
+
+const visiblePages = computed(() => {
+  const pages = [];
+  const maxVisible = 5;
+  const total = pagesTotal.value;
+  let start = Math.max(1, props.currentPage - Math.floor(maxVisible / 2));
+  const end = Math.min(total, start + maxVisible - 1);
+
+  if (end - start + 1 < maxVisible) {
+    start = Math.max(1, end - maxVisible + 1);
+  }
+
+  for (let i = start; i <= end; i++) {
+    pages.push(i);
+  }
+
+  return pages;
+});
+
+const formatDate = (txn) => {
+  const iso = txn?.date || '';
+  const dateObj = new Date(`${iso}T${txn?.time || '00:00'}:00`);
+  if (isNaN(dateObj.getTime())) return iso;
+  const options = { year: 'numeric', month: 'short', day: '2-digit' };
+  return dateObj.toLocaleDateString(undefined, options);
+};
+
+const formatTimeAgo = (txn) => {
+  const dateObj = new Date(`${txn?.date || ''}T${txn?.time || '00:00'}:00`);
+  if (isNaN(dateObj.getTime())) return '';
+  const diffMs = Date.now() - dateObj.getTime();
+  const minutes = Math.floor(diffMs / 60000);
+  if (minutes < 1) return 'just now';
+  if (minutes < 60) return `${minutes} min ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours} hr ago`;
+  const days = Math.floor(hours / 24);
+  return `${days} day ago`;
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.table-container {
+  width: 100%;
+  max-width: 100%;
+  gap: $spacing-2;
+  overflow: hidden;
+}
+
+.table-heading {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-4;
+  margin-bottom: $spacing-2;
+
+  @media (min-width: $breakpoint-md) {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &-text {
+    font-weight: $font-semibold;
+    font-size: $font-size-lg;
+    color: $text-primary;
+    margin: 0;
+  }
+}
+
+.input-controls {
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+}
+
+.filter-toggle-btn {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border-radius: $radius-md;
+}
+
+.filter-count-badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  background: $primary;
+  color: $text-inverse;
+  font-size: 10px;
+  font-weight: $font-bold;
+  padding: 2px 6px;
+  border-radius: 999px;
+  line-height: 1;
+}
+
+.table-wrapper {
+  background: $bg-white;
+  border: 1px solid $border-light;
+  border-radius: $radius-lg;
+  overflow: hidden;
+  box-shadow: $shadow-sm;
+}
+
+.table-scroll {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.custom-table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+  font-size: $font-size-sm;
+
+  thead {
+    background: $bg-light;
+    border-bottom: 1px solid $border-light;
+
+    th {
+      padding: 12px 16px;
+      font-weight: $font-semibold;
+      color: $text-secondary;
+      white-space: nowrap;
+    }
+  }
+
+  &.expense-table thead {
+    background: rgba(var(--color-error-rgb), 0.05);
+  }
+
+  tbody {
+    tr {
+      border-bottom: 1px solid $border-light;
+      transition: background-color $duration-fast $easing-standard;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.015);
+      }
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+
+    td {
+      padding: 12px 16px;
+      color: $text-primary;
+      vertical-align: middle;
+    }
+  }
+}
+
+.date-main {
+  font-weight: $font-medium;
+  color: $text-primary;
+}
+
+.date-sub {
+  font-size: $font-size-xs;
+  color: $text-muted;
+}
+
+.type-badge {
+  display: inline-flex;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: $font-size-xs;
+  font-weight: $font-semibold;
+  margin-right: 4px;
+
+  &.income {
+    background: rgba(var(--color-primary-rgb), 0.1);
+    color: $primary;
+  }
+
+  &.outcome {
+    background: rgba(var(--color-error-rgb), 0.1);
+    color: $error-color;
+  }
+}
+
+.transfer-badge,
+.refund-badge,
+.recurring-badge {
+  display: inline-flex;
+  padding: 2px 6px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: $font-medium;
+  margin-right: 4px;
+}
+
+.transfer-badge {
+  background: rgba(var(--color-info-rgb), 0.1);
+  color: $info;
+}
+
+.refund-badge {
+  background: rgba(var(--color-warning-rgb), 0.1);
+  color: $warning;
+}
+
+.recurring-badge {
+  background: $bg-gray;
+  color: $text-muted;
+}
+
+.party {
+  font-weight: $font-medium;
+}
+
+.amount-income {
+  color: $primary;
+  font-weight: $font-semibold;
+}
+
+.amount-outcome {
+  color: $text-primary;
+  font-weight: $font-semibold;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.action-btn {
+  padding: 4px;
+  min-height: auto;
+  border-radius: $radius-sm;
+  color: $text-muted;
+
+  &:hover {
+    color: $primary;
+    background: $bg-light;
+  }
+
+  &--recurring:hover {
+    color: $info;
+  }
+
+  &--danger:hover {
+    color: $error-color;
+  }
+}
+
+.empty-row {
+  text-align: center;
+  padding: 3rem 1rem !important;
+}
+
+.empty-placeholder {
+  color: $text-muted;
+  font-size: $font-size-sm;
+}
+
+.totals-row {
+  background: $bg-light;
+  border-top: 2px solid $border-medium;
+}
+
+.totals-cell {
+  padding: 0 !important;
+}
+
+.totals-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+  padding: 12px 16px;
+  gap: $spacing-4;
+
+  .total-section {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+
+    .total-label {
+      font-size: $font-size-xs;
+      font-weight: $font-medium;
+      color: $text-muted;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+
+    .total-value {
+      font-size: $font-size-base;
+      font-weight: $font-bold;
+      color: $text-primary;
+    }
+
+    &.income .total-value {
+      color: $primary;
+    }
+
+    &.expense .total-value {
+      color: $error-color;
+    }
+
+    &.net.positive .total-value {
+      color: $primary;
+    }
+
+    &.net.negative .total-value {
+      color: $error-color;
+    }
+  }
+}
+
+.pagination-row {
+  background: $bg-white;
+  border-top: 1px solid $border-light;
+
+  td {
+    padding: 12px 16px;
+  }
+}
+
+.pagination-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: $spacing-3;
+
+  @media (min-width: $breakpoint-md) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+.pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.pagination-btn {
+  min-width: 32px;
+  height: 32px;
+  padding: 0 10px;
+}
+
+.pagination-info {
+  font-size: $font-size-xs;
+  color: $text-muted;
+}
+</style>
diff --git a/components/TTopCard.stories.js b/components/TTopCard.stories.js
new file mode 100644
index 0000000..682aef3
--- /dev/null
+++ b/components/TTopCard.stories.js
@@ -0,0 +1,53 @@
+import TTopCard from './TTopCard.vue';
+import TButton from './TButton.vue';
+
+export default {
+  title: 'Components/TTopCard',
+  component: TTopCard,
+  tags: ['autodocs'],
+  argTypes: {
+    pageName: { control: 'text' },
+    pageNamePlural: { control: 'text' },
+    showAddButton: { control: 'boolean' },
+    showInfoButton: { control: 'boolean' },
+    buttonText: { control: 'text' }
+  }
+};
+
+export const Wallets = {
+  args: {
+    pageName: 'Wallet',
+    pageNamePlural: 'Wallets',
+    showAddButton: true,
+    showInfoButton: true
+  }
+};
+
+export const Transactions = {
+  args: {
+    pageName: 'Transaction',
+    pageNamePlural: 'Transactions',
+    buttonText: 'New Transaction',
+    showAddButton: true,
+    showInfoButton: true
+  }
+};
+
+export const WithCustomActions = {
+  args: {
+    pageName: 'Category',
+    pageNamePlural: 'Categories',
+    showAddButton: true
+  },
+  render: (args) => ({
+    components: { TTopCard, TButton },
+    setup: () => ({ args }),
+    template: `
+      <TTopCard v-bind="args">
+        <template #actions>
+          <TButton variant="secondary" text="Export CSV" />
+        </template>
+      </TTopCard>
+    `
+  })
+};
diff --git a/components/TTopCard.vue b/components/TTopCard.vue
new file mode 100644
index 0000000..8eb256a
--- /dev/null
+++ b/components/TTopCard.vue
@@ -0,0 +1,334 @@
+<template>
+  <div class="entity-header surface surface--brand">
+    <svg
+      class="header-decor"
+      viewBox="0 0 1200 120"
+      preserveAspectRatio="xMaxYMid slice"
+      aria-hidden="true"
+    >
+      <defs>
+        <radialGradient id="topcard-bloom" cx="92%" cy="50%" r="50%">
+          <stop offset="0%" stop-color="var(--surface-accent, var(--color-primary-light))" stop-opacity="0.45" />
+          <stop offset="100%" stop-color="var(--surface-accent, var(--color-primary-light))" stop-opacity="0" />
+        </radialGradient>
+      </defs>
+      <circle cx="1080" cy="60" r="170" fill="url(#topcard-bloom)" />
+      <circle cx="1040" cy="18" r="22" fill="var(--surface-deep, var(--color-primary-dark))" opacity="0.18" />
+      <circle cx="1150" cy="100" r="10" fill="var(--surface-deep, var(--color-primary-dark))" opacity="0.28" />
+      <circle cx="980" cy="98" r="6" fill="var(--surface-accent, var(--color-primary))" opacity="0.8" />
+    </svg>
+    <div class="header-content">
+      <div class="content-main">
+        <div class="title-row">
+          <div v-if="resolvedIcon" class="page-icon">
+            <component :is="resolvedIcon" :size="16" />
+          </div>
+          <div class="title-text">
+            <span class="breadcrumb-current">
+              <span class="breadcrumb-home" @click="handleHomeClick">{{ homeLabel || t('Home') }}</span>
+              <ChevronRight :size="11" class="breadcrumb-arrow" />
+              <span>{{ t(pageNamePlural) }}</span>
+            </span>
+            <h1 class="title">{{ t(displayTitle) }}</h1>
+          </div>
+        </div>
+        <slot name="summary" />
+      </div>
+      <div class="action-buttons">
+        <slot name="info">
+          <TInfoButton v-if="showInfoButton" />
+        </slot>
+        <slot name="actions" />
+        <TButton
+          v-if="showAddButton"
+          variant="primary"
+          :full-width="false"
+          :text="buttonText || t('Add {item}', { item: t(pageName).toLowerCase() })"
+          class="add-entity-button"
+          @click="handleAddClick"
+        >
+          <template #left-icon>
+            <PlusIcon />
+          </template>
+        </TButton>
+      </div>
+    </div>
+    <div v-if="$slots.bottom" class="header-bottom">
+      <slot name="bottom" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import TInfoButton from './TInfoButton.vue';
+import TButton from './TButton.vue';
+import { PlusIcon } from '@heroicons/vue/24/outline';
+import {
+  ChevronRight,
+  Wallet,
+  Users,
+  Tag,
+  Folder,
+  ArrowsUpFromLine,
+  ChartPie,
+  ArrowLeftRight,
+  Bell,
+  FileText,
+  Sparkles
+} from 'lucide-vue-next';
+
+const props = defineProps({
+  pageName: {
+    type: String,
+    required: true
+  },
+  pageNamePlural: {
+    type: String,
+    required: true
+  },
+  showAddButton: {
+    type: Boolean,
+    default: true
+  },
+  showInfoButton: {
+    type: Boolean,
+    default: true
+  },
+  buttonText: {
+    type: String,
+    default: null
+  },
+  buttonAction: {
+    type: String,
+    default: 'add'
+  },
+  homeLabel: {
+    type: String,
+    default: ''
+  },
+  homeTo: {
+    type: String,
+    default: '/home'
+  }
+});
+
+const emit = defineEmits(['add', 'home-click']);
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((key, params) => {
+  if (params?.item) return `Add ${params.item}`;
+  return key;
+});
+
+const displayTitle = computed(() => props.pageNamePlural);
+
+const iconMap = {
+  Wallet,
+  Wallets: Wallet,
+  Party: Users,
+  Parties: Users,
+  Category: Tag,
+  Categories: Tag,
+  Group: Folder,
+  Groups: Folder,
+  Transaction: ArrowLeftRight,
+  Transactions: ArrowLeftRight,
+  Transfer: ArrowsUpFromLine,
+  Transfers: ArrowsUpFromLine,
+  Budget: ChartPie,
+  Budgets: ChartPie,
+  Reminder: Bell,
+  Reminders: Bell,
+  Import: FileText,
+  Imports: FileText,
+  Insight: Sparkles,
+  Insights: Sparkles
+};
+
+const resolvedIcon = computed(
+  () => iconMap[props.pageNamePlural] || iconMap[props.pageName] || null
+);
+
+const handleAddClick = () => {
+  emit(buttonAction);
+};
+
+const handleHomeClick = () => {
+  emit('home-click', props.homeTo);
+  if (typeof useRouter === 'function') {
+    try {
+      const router = useRouter();
+      router?.push?.(props.homeTo);
+    } catch {
+      // safe fallback if useRouter not available
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.entity-header {
+  position: relative;
+  width: 100%;
+  border-radius: 16px;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  background: var(--surface-brand, $bg-white);
+  border: 1px solid $border-light;
+  box-shadow: $elevation-1;
+  overflow: hidden;
+
+  @media (max-width: $breakpoint-md) {
+    border-radius: 14px;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    border-radius: 12px;
+  }
+}
+
+.header-decor {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.header-content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+
+  @media (max-width: $breakpoint-md) {
+    padding: 0.625rem 0.875rem;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+  }
+}
+
+.header-bottom {
+  position: relative;
+  z-index: 1;
+  border-top: 1px solid $border-light;
+}
+
+.content-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.title-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.page-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
+  background: var(--glass-bg, $bg-light);
+  border: 1px solid $border-light;
+  color: var(--surface-deep, $primary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.title-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  line-height: 1.2;
+  min-width: 0;
+}
+
+.title {
+  color: var(--surface-ink, $text-primary);
+  font-size: $font-size-base;
+  font-weight: $font-bold;
+  letter-spacing: -0.015em;
+  margin: 0;
+  line-height: 1.2;
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: $font-size-sm;
+  }
+}
+
+.breadcrumb-current {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--surface-deep, $text-muted);
+  opacity: 0.75;
+  font-size: 10px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.breadcrumb-home {
+  cursor: pointer;
+  transition: color $duration-fast $easing-standard;
+
+  &:hover {
+    color: var(--surface-deep, $primary);
+    opacity: 1;
+  }
+}
+
+.breadcrumb-arrow {
+  opacity: 0.6;
+}
+
+.action-buttons {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+
+  @media (max-width: $breakpoint-sm) {
+    width: 100%;
+    justify-content: flex-end;
+    gap: 6px;
+  }
+}
+
+.add-entity-button {
+  min-width: 140px;
+  height: 34px;
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+
+  @media (max-width: $breakpoint-md) {
+    min-width: 120px;
+    height: 32px;
+    font-size: $font-size-xs;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    min-width: 100px;
+    height: 30px;
+    font-size: $font-size-xs;
+    padding: 0.25rem 0.5rem;
+  }
+}
+</style>
diff --git a/components/TTransactionCard.stories.js b/components/TTransactionCard.stories.js
new file mode 100644
index 0000000..86ad4e0
--- /dev/null
+++ b/components/TTransactionCard.stories.js
@@ -0,0 +1,33 @@
+import TTransactionCard from './TTransactionCard.vue';
+
+export default {
+  title: 'Components/TTransactionCard',
+  component: TTransactionCard,
+  tags: ['autodocs']
+};
+
+const sampleStats = {
+  transaction_count: 124,
+  total_income: 8450.0,
+  total_expenses: 3210.5,
+  total_balance: 5239.5,
+  income_insights: {
+    biggest_source: {
+      party: 'Acme Corp Payroll',
+      amount: 4500.0
+    }
+  },
+  expense_insights: {
+    biggest_expense: {
+      party: 'Apartment Rent',
+      amount: 1400.0
+    }
+  }
+};
+
+export const Default = {
+  args: {
+    statistics: sampleStats,
+    currency: 'USD'
+  }
+};
diff --git a/components/TTransactionCard.vue b/components/TTransactionCard.vue
new file mode 100644
index 0000000..83516ef
--- /dev/null
+++ b/components/TTransactionCard.vue
@@ -0,0 +1,221 @@
+<template>
+  <div class="stats-section">
+    <div class="kpis">
+      <slot name="kpis">
+        <KpiCard
+          :label="t('Total Transactions')"
+          :value="statistics?.transaction_count ?? 0"
+        />
+        <KpiCard
+          :label="t('Total Income')"
+          :value="formatAmount(statistics?.total_income ?? 0)"
+          value-class="is-positive"
+        />
+        <KpiCard
+          :label="t('Total Expenses')"
+          :value="formatAmount(statistics?.total_expenses ?? 0)"
+          value-class="is-negative"
+        />
+        <KpiCard
+          :label="t('Net Balance')"
+          :value="formatAmount(statistics?.total_balance ?? 0)"
+          :value-class="(statistics?.total_balance ?? 0) >= 0 ? 'is-positive' : 'is-negative'"
+        />
+      </slot>
+    </div>
+
+    <div v-if="hasInsights" class="quick-insights">
+      <div v-if="statistics?.income_insights?.biggest_source" class="insight-item income-insight">
+        <div class="insight-left">
+          <div class="insight-icon income-icon">
+            <ArrowDownLeft :size="16" />
+          </div>
+          <span class="insight-label">{{ t('Top Income Source') }}</span>
+        </div>
+        <div class="insight-chips">
+          <div class="insight-chip name-chip income-chip">
+            {{ statistics.income_insights.biggest_source.party }}
+          </div>
+          <div class="insight-chip amount-chip income-amount-chip">
+            {{ formatAmount(statistics.income_insights.biggest_source.amount) }}
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-if="statistics?.expense_insights?.biggest_expense"
+        class="insight-item expense-insight"
+      >
+        <div class="insight-left">
+          <div class="insight-icon expense-icon">
+            <ArrowUpRight :size="16" />
+          </div>
+          <span class="insight-label">{{ t('Biggest Expense') }}</span>
+        </div>
+        <div class="insight-chips">
+          <div class="insight-chip name-chip expense-chip">
+            {{ statistics.expense_insights.biggest_expense.party }}
+          </div>
+          <div class="insight-chip amount-chip expense-amount-chip">
+            {{ formatAmount(statistics.expense_insights.biggest_expense.amount) }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { ArrowDownLeft, ArrowUpRight } from 'lucide-vue-next';
+import KpiCard from './reports/KpiCard.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  statistics: {
+    type: Object,
+    default: () => ({})
+  },
+  currency: {
+    type: String,
+    default: 'USD'
+  },
+  formatCurrency: {
+    type: Function,
+    default: null
+  }
+});
+
+const formatAmount = (val) => {
+  if (props.formatCurrency) {
+    return props.formatCurrency(val, props.currency);
+  }
+  try {
+    return new Intl.NumberFormat(undefined, {
+      style: 'currency',
+      currency: props.currency,
+      notation: 'compact'
+    }).format(val);
+  } catch {
+    return `${val} ${props.currency}`;
+  }
+};
+
+const hasInsights = computed(() => {
+  return (
+    !!props.statistics?.income_insights?.biggest_source ||
+    !!props.statistics?.expense_insights?.biggest_expense
+  );
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.stats-section {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 140px;
+}
+
+.kpis {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: $spacing-2;
+  margin-bottom: $spacing-2;
+  flex: 1;
+
+  @media (min-width: $breakpoint-sm) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (min-width: $breakpoint-md) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.quick-insights {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: $spacing-2;
+
+  @media (min-width: $breakpoint-md) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.insight-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0.75rem;
+  background: $bg-white;
+  border: 1px solid $border-light;
+  border-radius: $radius-lg;
+  box-shadow: $elevation-1;
+  gap: $spacing-2;
+}
+
+.insight-left {
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+}
+
+.insight-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.income-icon {
+    background: $primary-light;
+    color: $primary;
+  }
+
+  &.expense-icon {
+    background: rgba(var(--color-error-rgb), 0.12);
+    color: $error-color;
+  }
+}
+
+.insight-label {
+  font-size: $font-size-xs;
+  font-weight: $font-medium;
+  color: $text-secondary;
+}
+
+.insight-chips {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.insight-chip {
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: $font-semibold;
+
+  &.name-chip {
+    background: $bg-light;
+    color: $text-primary;
+  }
+
+  &.income-amount-chip {
+    background: $primary-light;
+    color: $primary;
+  }
+
+  &.expense-amount-chip {
+    background: rgba(var(--color-error-rgb), 0.12);
+    color: $error-color;
+  }
+}
+</style>
diff --git a/components/TTransactionSubCard.stories.js b/components/TTransactionSubCard.stories.js
new file mode 100644
index 0000000..f6c860f
--- /dev/null
+++ b/components/TTransactionSubCard.stories.js
@@ -0,0 +1,30 @@
+import TTransactionSubCard from './TTransactionSubCard.vue';
+
+export default {
+  title: 'Components/TTransactionSubCard',
+  component: TTransactionSubCard,
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text' },
+    text: { control: 'text' },
+    currency: { control: 'text' },
+    titleColor: { control: 'color' },
+    textColor: { control: 'color' }
+  }
+};
+
+export const Default = {
+  args: {
+    title: '142',
+    text: 'Total Transactions'
+  }
+};
+
+export const WithCurrency = {
+  args: {
+    title: '3,450',
+    currency: 'USD',
+    text: 'Total Volume',
+    titleColor: 'var(--color-primary)'
+  }
+};
diff --git a/components/TTransactionSubCard.vue b/components/TTransactionSubCard.vue
new file mode 100644
index 0000000..7bab552
--- /dev/null
+++ b/components/TTransactionSubCard.vue
@@ -0,0 +1,100 @@
+<template>
+  <TCard class="transaction-sub-card">
+    <div class="transaction-sub-card-content">
+      <h1 class="transaction-sub-card-title" :style="{ color: titleColor }">
+        {{ title }}<sup v-if="currency" class="currency-superscript" :style="{ color: titleColor }">{{ currency }}</sup>
+      </h1>
+      <span class="transaction-sub-card-text" :style="{ color: textColor }">{{ text }}</span>
+    </div>
+  </TCard>
+</template>
+
+<script setup>
+import TCard from './TCard.vue';
+
+defineProps({
+  title: {
+    type: [String, Number],
+    default: '0'
+  },
+  text: {
+    type: String,
+    default: ''
+  },
+  titleColor: {
+    type: String,
+    default: ''
+  },
+  textColor: {
+    type: String,
+    default: ''
+  },
+  currency: {
+    type: String,
+    default: ''
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.transaction-sub-card {
+  flex: 1;
+  min-width: 0;
+  padding: 0.75rem 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  transition: all 0.2s ease;
+
+  @media (max-width: $breakpoint-md) {
+    padding: 0.625rem 0.875rem;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 0.5rem 0.75rem;
+  }
+}
+
+.transaction-sub-card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.transaction-sub-card-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: $font-bold;
+  line-height: 1.2;
+  color: $text-primary;
+  display: flex;
+  align-items: baseline;
+  gap: 2px;
+
+  @media (max-width: $breakpoint-md) {
+    font-size: 1.25rem;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 1.125rem;
+  }
+}
+
+.currency-superscript {
+  font-size: 0.75rem;
+  font-weight: $font-semibold;
+  top: -0.5em;
+}
+
+.transaction-sub-card-text {
+  font-size: $font-size-sm;
+  color: $text-muted;
+  font-weight: $font-medium;
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: $font-size-xs;
+  }
+}
+</style>
diff --git a/components/ThemeSelector.stories.js b/components/ThemeSelector.stories.js
new file mode 100644
index 0000000..b2053a8
--- /dev/null
+++ b/components/ThemeSelector.stories.js
@@ -0,0 +1,10 @@
+import ThemeSelector from './ThemeSelector.vue';
+
+export default {
+  title: 'Components/ThemeSelector',
+  component: ThemeSelector,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' }
+};
+
+export const Default = {};
diff --git a/components/ThemeSelector.vue b/components/ThemeSelector.vue
new file mode 100644
index 0000000..bcb41a6
--- /dev/null
+++ b/components/ThemeSelector.vue
@@ -0,0 +1,145 @@
+<template>
+  <TDropdown class="theme-selector">
+    <template #trigger>
+      <TButton
+        type="button"
+        variant="secondary"
+        :full-width="false"
+        class="theme-selector-trigger"
+        :aria-label="t('Theme')"
+        :title="t('Theme')"
+      >
+        <component :is="triggerIcon" class="icon" />
+      </TButton>
+    </template>
+
+    <div class="theme-dropdown-inner">
+      <div class="dropdown-header">
+        <h3>{{ t('Theme') }}</h3>
+      </div>
+      <TDivider orientation="horizontal" />
+      <div class="theme-list">
+        <TDropdownItem
+          v-for="option in options"
+          :key="option.value"
+          class="theme-item"
+          :class="{ active: theme === option.value }"
+          @click="selectTheme(option.value)"
+        >
+          <component :is="option.icon" class="theme-icon" />
+          <span class="theme-name">{{ t(option.label) }}</span>
+          <Check v-if="theme === option.value" class="check-icon" />
+        </TDropdownItem>
+      </div>
+    </div>
+  </TDropdown>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Sun, Moon, Monitor, Check } from 'lucide-vue-next';
+import TDropdown from './TDropdown.vue';
+import TDropdownItem from './TDropdownItem.vue';
+import TButton from './TButton.vue';
+import TDivider from './TDivider.vue';
+import { useTheme, type ThemeMode } from '../composables/useTheme';
+
+const { t } = useI18n();
+const { theme, isDark, setTheme } = useTheme();
+
+const options: Array<{ value: ThemeMode; label: string; icon: typeof Sun }> = [
+  { value: 'light', label: 'Light', icon: Sun },
+  { value: 'dark', label: 'Dark', icon: Moon },
+  { value: 'system', label: 'System', icon: Monitor }
+];
+
+const triggerIcon = computed(() => {
+  if (theme.value === 'system') return Monitor;
+  return isDark.value ? Moon : Sun;
+});
+
+const selectTheme = (value: ThemeMode) => {
+  setTheme(value);
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.theme-selector {
+  display: inline-block;
+}
+
+.theme-selector-trigger {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: auto;
+}
+
+.icon {
+  width: 18px;
+  height: 18px;
+  color: currentColor;
+}
+
+.theme-dropdown-inner {
+  width: 220px;
+
+  @media (max-width: $breakpoint-sm) {
+    width: calc(100vw - 32px);
+  }
+}
+
+.dropdown-header {
+  padding: 1rem;
+
+  h3 {
+    margin: 0;
+    font-size: $font-size-base;
+    font-weight: $font-semibold;
+    color: $text-primary;
+  }
+}
+
+.theme-list {
+  padding: 0.25rem 0;
+}
+
+.theme-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+
+  &.active {
+    background: rgba(var(--color-primary-rgb), 0.08);
+    color: $primary;
+    font-weight: $font-semibold;
+
+    .theme-icon {
+      color: $primary;
+    }
+  }
+
+  .theme-icon {
+    width: 18px;
+    height: 18px;
+    color: $text-secondary;
+  }
+
+  .theme-name {
+    flex: 1;
+    font-size: $font-size-sm;
+  }
+
+  .check-icon {
+    width: 16px;
+    height: 16px;
+    color: $primary;
+  }
+}
+</style>
diff --git a/components/ThemeToggleButton.stories.js b/components/ThemeToggleButton.stories.js
new file mode 100644
index 0000000..052d6b2
--- /dev/null
+++ b/components/ThemeToggleButton.stories.js
@@ -0,0 +1,26 @@
+import ThemeToggleButton from './ThemeToggleButton.vue';
+
+export default {
+  title: 'Primitives/ThemeToggleButton',
+  component: ThemeToggleButton,
+  argTypes: {
+    titleLight: { control: 'text' },
+    titleDark: { control: 'text' },
+  },
+};
+
+export const Default = {};
+export const CustomLabels = {
+  args: { titleLight: 'Switch to light', titleDark: 'Switch to dark' },
+};
+export const Interactive = {
+  render: (args) => ({
+    components: { ThemeToggleButton },
+    setup() { return { args }; },
+    template: `
+      <div style="display:flex; gap:16px; align-items:center;">
+        <ThemeToggleButton v-bind="args" />
+        <span style="font-size:14px; color:var(--color-text-muted);">Click to toggle — check :root.dark on html</span>
+      </div>`,
+  }),
+};
diff --git a/components/ThemeToggleButton.vue b/components/ThemeToggleButton.vue
new file mode 100644
index 0000000..0cfb62d
--- /dev/null
+++ b/components/ThemeToggleButton.vue
@@ -0,0 +1,58 @@
+<template>
+  <TButton
+    type="button"
+    variant="secondary"
+    :full-width="false"
+    class="theme-toggle-btn"
+    :title="isDark ? titleLight : titleDark"
+    @click="toggleTheme"
+  >
+    <Sun v-if="isDark" class="theme-icon" />
+    <Moon v-else class="theme-icon" />
+  </TButton>
+</template>
+
+<script setup>
+import { Sun, Moon } from 'lucide-vue-next';
+import { useTheme } from '../composables/useTheme';
+import TButton from './TButton.vue';
+
+defineProps({
+  titleLight: {
+    type: String,
+    default: 'Switch to light mode'
+  },
+  titleDark: {
+    type: String,
+    default: 'Switch to dark mode'
+  }
+});
+
+const { isDark, toggleTheme } = useTheme();
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.theme-toggle-btn {
+  padding: 0;
+  width: 40px;
+  height: 40px;
+  min-height: 40px;
+  border-radius: 50%;
+  border: 1px solid $border-light;
+  background: $bg-white;
+  color: $text-secondary;
+
+  &:hover {
+    background: $bg-light;
+    color: $primary;
+    border-color: $primary;
+  }
+}
+
+.theme-icon {
+  width: 20px;
+  height: 20px;
+}
+</style>
diff --git a/components/TipsSection.stories.js b/components/TipsSection.stories.js
new file mode 100644
index 0000000..8947b1a
--- /dev/null
+++ b/components/TipsSection.stories.js
@@ -0,0 +1,27 @@
+import TipsSection from './TipsSection.vue';
+
+export default {
+  title: 'Domain/Shared/TipsSection',
+  component: TipsSection,
+  args: {
+    pageName: 'Transaction'
+  }
+};
+
+export const Default = {};
+
+export const WalletTips = {
+  args: {
+    pageName: 'Wallet',
+    title: 'Tips for setting up a wallet',
+    text: 'Choose a descriptive name and pick the correct primary currency. You can designate this as your default wallet for everyday transactions.'
+  }
+};
+
+export const CategoryTips = {
+  args: {
+    pageName: 'Category',
+    title: 'Organizing your categories',
+    text: 'Group similar expenses together to make reporting and budgeting easier to manage.'
+  }
+};
diff --git a/components/TipsSection.vue b/components/TipsSection.vue
new file mode 100644
index 0000000..6d9f870
--- /dev/null
+++ b/components/TipsSection.vue
@@ -0,0 +1,168 @@
+<template>
+  <aside class="tips-container" :aria-label="titleText">
+    <div class="tips-content">
+      <div class="tips-header">
+        <slot name="title">
+          <h2 class="tips-title">
+            {{ titleText }}
+          </h2>
+        </slot>
+      </div>
+      <div class="tips-text-content">
+        <slot>
+          <p class="tips-text">
+            {{ descriptionText }}
+          </p>
+        </slot>
+      </div>
+    </div>
+    <div class="tips-footer">
+      <slot name="illustration">
+        <img :src="bulbIcon" alt="Bulb Icon" class="bulb-image" />
+      </slot>
+    </div>
+  </aside>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import bulbIcon from '../assets/bulbIcon.svg';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k, params) => {
+  if (params?.item) {
+    if (k.includes('Tips for')) return `Tips for adding ${params.item}`;
+    if (k.includes('Always check')) return `Always check everything before submitting a new ${params.item}.`;
+  }
+  return k;
+});
+
+const props = defineProps({
+  pageName: {
+    type: String,
+    default: 'item'
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  text: {
+    type: String,
+    default: ''
+  }
+});
+
+const titleText = computed(() => {
+  if (props.title) return props.title;
+  return t('Tips for adding {item}', { item: t(props.pageName).toLowerCase() });
+});
+
+const descriptionText = computed(() => {
+  if (props.text) return props.text;
+  return t('Always check everything before submitting a new {item}.', {
+    item: t(props.pageName).toLowerCase()
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.tips-container {
+  width: 380px;
+  min-height: 480px;
+  background-color: rgba(var(--color-warning-rgb), 0.12);
+  border: 1px solid rgba(var(--color-warning-rgb), 0.25);
+  padding: 2rem;
+  border-radius: $radius-xl;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: sticky;
+  top: 2rem;
+  margin: 0;
+  align-self: flex-start;
+
+  @media (max-width: 1200px) {
+    width: 340px;
+  }
+
+  @media (max-width: $breakpoint-lg) {
+    display: none;
+  }
+
+  @media (max-width: $breakpoint-md) {
+    display: flex;
+    width: 100%;
+    min-height: auto;
+    position: static;
+    padding: 1.25rem;
+  }
+}
+
+.tips-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.tips-title {
+  color: var(--color-warning-text, $warning);
+  font-weight: $font-bold;
+  font-size: 1.75rem;
+  line-height: 120%;
+  margin: 0;
+
+  @media (max-width: $breakpoint-lg) {
+    font-size: 1.5rem;
+  }
+
+  @media (max-width: $breakpoint-md) {
+    font-size: 1.25rem;
+  }
+}
+
+.tips-text-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.tips-text {
+  color: $text-secondary;
+  line-height: 1.5;
+  font-size: $font-size-base;
+  font-weight: $font-normal;
+  margin: 0;
+
+  @media (max-width: $breakpoint-lg) {
+    font-size: $font-size-sm;
+  }
+}
+
+.tips-footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+  margin-top: 2rem;
+
+  @media (max-width: $breakpoint-md) {
+    margin-top: 1.5rem;
+  }
+}
+
+.bulb-image {
+  width: 150px;
+  height: auto;
+  object-fit: contain;
+
+  @media (max-width: $breakpoint-lg) {
+    width: 130px;
+  }
+
+  @media (max-width: $breakpoint-md) {
+    width: 110px;
+  }
+}
+</style>
diff --git a/components/TransactionForm.stories.js b/components/TransactionForm.stories.js
new file mode 100644
index 0000000..e6862b9
--- /dev/null
+++ b/components/TransactionForm.stories.js
@@ -0,0 +1,50 @@
+import TransactionForm from './TransactionForm.vue';
+
+const wallets = [
+  { id: 1, name: 'Main Bank Account', currency: 'USD' },
+  { id: 2, name: 'Cash Wallet', currency: 'USD' }
+];
+const parties = [
+  { id: 1, name: 'Grocery Store' },
+  { id: 2, name: 'Employer' }
+];
+const groups = [{ id: 1, name: 'General' }];
+const incomeCategories = [
+  { id: 2, name: 'Salary', type: 'income' },
+  { id: 4, name: 'Freelance', type: 'income' }
+];
+const expenseCategories = [
+  { id: 1, name: 'Food & Dining', type: 'expense' },
+  { id: 3, name: 'Housing', type: 'expense' }
+];
+
+export default {
+  title: 'Domain/Transactions/TransactionForm',
+  component: TransactionForm,
+  args: {
+    isOutcomeSelected: false,
+    editingItem: null,
+    isSubmitting: false,
+    wallets,
+    parties,
+    groups,
+    incomeCategories,
+    expenseCategories,
+    defaultCurrency: 'USD',
+    defaultGroup: groups[0],
+    defaultWallet: wallets[0],
+    fetchFileBlob: async () => null,
+    deleteFile: async () => {},
+    fetchRecentExpenses: async () => []
+  }
+};
+
+export const NewIncome = {};
+
+export const NewExpense = {
+  args: { isOutcomeSelected: true }
+};
+
+export const Submitting = {
+  args: { isSubmitting: true }
+};
diff --git a/components/TransactionForm.vue b/components/TransactionForm.vue
new file mode 100644
index 0000000..11b6d8f
--- /dev/null
+++ b/components/TransactionForm.vue
@@ -0,0 +1,811 @@
+<template>
+  <div class="transaction-form">
+    <div class="form">
+      <div class="transaction-date">
+        <span>{{ t('Amount') }}</span>
+        <div class="transaction-amount">
+          <input
+            v-model="formAmount"
+            type="number"
+            :placeholder="t('Ex: 250 000')"
+            min="1"
+            step="any"
+            required
+          />
+          <select
+            v-model="selectedCurrency"
+            class="amount-currency-select"
+            @change="handleCurrencyChange"
+          >
+            <option v-for="currency in availableCurrencies" :key="currency" :value="currency">
+              {{ currency }}
+            </option>
+          </select>
+        </div>
+        <div v-if="amountError" class="error-text">
+          {{ t('Enter a valid amount greater than 0.') }}
+        </div>
+      </div>
+
+      <div class="transaction-description">
+        <span
+          >{{ t('Description') }} <span class="optional-label">({{ t('optional') }})</span></span
+        >
+        <textarea v-model="formDescription" :placeholder="t('Type here...')" />
+      </div>
+
+      <div class="transaction-date">
+        <span
+          >{{ t('Intent') }} <span class="optional-label">({{ t('optional') }})</span></span
+        >
+        <div class="intent-pills" role="radiogroup" :aria-label="t('Intent')">
+          <TButton
+            v-for="opt in intentOptions"
+            :key="opt.value"
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="intent-pill"
+            :class="{ 'intent-pill--active': formIntent === opt.value }"
+            role="radio"
+            :aria-checked="formIntent === opt.value"
+            @click="formIntent = opt.value"
+          >
+            <component :is="intentIcons[opt.value]" class="intent-pill-icon" />
+            <span>{{ t(opt.label) }}</span>
+          </TButton>
+        </div>
+      </div>
+
+      <div class="form-transaction">
+        <div class="transaction-date">
+          <span>{{ t('Transaction date') }}</span>
+          <input v-model="formDate" type="date" required />
+          <div v-if="dateError" class="error-text">{{ t('Date is required.') }}</div>
+        </div>
+
+        <div class="transaction-date">
+          <span>{{ t('Transaction time') }}</span>
+          <input v-model="formTime" type="time" required />
+          <div v-if="timeError" class="error-text">{{ t('Time is required.') }}</div>
+        </div>
+      </div>
+
+      <div class="form-transaction">
+        <SearchableDropdown
+          v-model="searchQuery"
+          :label="isOutcomeSelected ? t('Party (sent to)') : t('Party (received from)')"
+          :placeholder="t('Search party...')"
+          :options="parties"
+          @select="handlePartySelect"
+        />
+
+        <div class="wallet-field-wrapper">
+          <SearchableDropdown
+            v-model="walletSearchQuery"
+            :label="isOutcomeSelected ? t('Wallet (sent from)') : t('Wallet (received to)')"
+            :placeholder="t('Search wallet...')"
+            :options="wallets"
+            :error="walletError ? t('Wallet is required.') : ''"
+            @select="handleWalletSelect"
+            @clear="selectedWalletId = null"
+          />
+          <span
+            v-if="isWalletDefault"
+            class="wallet-default-indicator"
+            :title="t('This is your default wallet')"
+          >
+            {{ t('Default') }}
+          </span>
+        </div>
+      </div>
+
+      <div class="form-transaction">
+        <div class="group-field-wrapper">
+          <SearchableDropdown
+            v-model="groupSearchQuery"
+            :label="t('Group')"
+            :placeholder="t('Search group...')"
+            :options="groups"
+            :error="categoryError ? t('Group is required.') : ''"
+            @select="handleGroupSelect"
+            @clear="selectedGroupId = null"
+          />
+          <span
+            v-if="isGroupDefault"
+            class="group-default-indicator"
+            :title="t('This is your default group')"
+          >
+            {{ t('Default') }}
+          </span>
+        </div>
+
+        <SearchableDropdown
+          v-model="categorySearchQuery"
+          :label="t('Categories')"
+          :placeholder="t('Search categories...')"
+          :options="categories"
+          :multiple="true"
+          :selected="selectedAdditionalCategoryIds"
+          @select="handleCategorySelect"
+        />
+      </div>
+
+      <div class="transaction-files">
+        <span>{{ t('Attachments') }}</span>
+
+        <div v-if="existingAttachments.length" class="attachment-grid">
+          <div
+            v-for="file in existingAttachments"
+            :key="`existing-${file.id}`"
+            class="attachment-card"
+            :class="{ removing: removingFileIds.has(file.id) }"
+          >
+            <div v-if="isImageAttachment(file)" class="thumb">
+              <img
+                v-if="existingPreviews[file.id]"
+                :src="existingPreviews[file.id]"
+                :alt="t('Attachment')"
+              />
+              <div v-else class="thumb-placeholder">…</div>
+            </div>
+            <div v-else class="thumb thumb-doc">
+              <span>{{ extensionLabel(file.path) }}</span>
+            </div>
+            <TButton
+              variant="text"
+              size="small"
+              :full-width="false"
+              class="remove"
+              :disabled="removingFileIds.has(file.id)"
+              :title="t('Remove')"
+              @click="removeExistingAttachment(file)"
+            >
+              ×
+            </TButton>
+          </div>
+        </div>
+
+        <div class="upload-box">
+          <input id="file-input" type="file" multiple @change="onFilesSelected" />
+          <label for="file-input" class="upload-button">{{ t('Browse files') }}</label>
+          <span class="hint">{{ t('Images, PDFs or docs. Max 5 files.') }}</span>
+        </div>
+
+        <div v-if="newAttachments.length" class="attachment-grid">
+          <div
+            v-for="(att, i) in newAttachments"
+            :key="`new-${att.name}-${i}`"
+            class="attachment-card"
+          >
+            <div v-if="att.isImage && att.previewUrl" class="thumb">
+              <img :src="att.previewUrl" :alt="att.name" />
+            </div>
+            <div v-else class="thumb thumb-doc">
+              <span>{{ extensionLabel(att.name) }}</span>
+            </div>
+            <span class="filename">{{ att.name }}</span>
+            <TButton
+              variant="text"
+              size="small"
+              :full-width="false"
+              class="remove"
+              :title="t('Remove')"
+              @click="removeNewAttachment(i)"
+            >
+              ×
+            </TButton>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="!isOutcomeSelected" class="refund-section">
+        <label class="refund-toggle">
+          <input v-model="formIsRefund" type="checkbox" />
+          <span>{{ t('This is a refund') }}</span>
+        </label>
+        <p class="refund-hint">
+          {{
+            t('Mark this income as refunding a past expense. Budgets subtract it from their spend.')
+          }}
+        </p>
+        <div v-if="formIsRefund" class="refund-link">
+          <SearchableDropdown
+            v-model="refundPickerQuery"
+            :label="t('Refund of')"
+            :placeholder="
+              recentExpenses.length ? t('Search expenses...') : t('Loading expenses...')
+            "
+            :options="refundOptions"
+            @select="handleRefundSelect"
+            @clear="formRefundOfTransactionId = null"
+          />
+          <p class="refund-link-hint">
+            {{ t('Leave blank to mark the refund without linking to a specific expense.') }}
+          </p>
+        </div>
+      </div>
+
+      <div class="recurring-section">
+        <label class="recurring-toggle">
+          <input v-model="formIsRecurring" type="checkbox" />
+          <span>{{ t('Make recurring') }}</span>
+        </label>
+        <div v-if="formIsRecurring" class="recurring-fields">
+          <div class="form-transaction">
+            <div class="transaction-date">
+              <span>{{ t('Recurrence period') }}</span>
+              <select v-model="formRecurrencePeriod" class="recurring-select">
+                <option value="daily">{{ t('Daily') }}</option>
+                <option value="weekly">{{ t('Weekly') }}</option>
+                <option value="monthly">{{ t('Monthly') }}</option>
+                <option value="yearly">{{ t('Yearly') }}</option>
+              </select>
+            </div>
+            <div class="transaction-date">
+              <span>{{ t('Repeat every') }}</span>
+              <input v-model="formRecurrenceInterval" type="number" min="1" />
+            </div>
+          </div>
+          <div class="transaction-date">
+            <span
+              >{{ t('End date') }} <span class="optional-label">({{ t('optional') }})</span></span
+            >
+            <input v-model="formRecurrenceEndsAt" type="date" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <TButton
+      :text="
+        props.editingItem
+          ? isOutcomeSelected
+            ? t('Update expense')
+            : t('Update income')
+          : isOutcomeSelected
+            ? t('Record expense')
+            : t('Record income')
+      "
+      class="submit-button"
+      :class="{ 'submit-button--expense': isOutcomeSelected }"
+      :disabled="props.isSubmitting"
+      :loading="props.isSubmitting"
+      @click="onSubmit"
+    >
+      <template #left-icon>
+        <CheckIcon v-if="!props.editingItem" />
+        <PencilIcon v-else />
+      </template>
+    </TButton>
+  </div>
+</template>
+
+<script setup>
+import { toRefs, ref, computed, watch, onMounted, onUnmounted } from 'vue';
+import TButton from './TButton.vue';
+import SearchableDropdown from './SearchableDropdown.vue';
+import { CheckIcon, PencilIcon } from '@heroicons/vue/24/outline';
+import {
+  Circle,
+  HandCoins,
+  Banknote,
+  Scale,
+  Handshake,
+  TrendingUp,
+  PiggyBank,
+  Gift
+} from 'lucide-vue-next';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const TRANSACTION_INTENT_OPTIONS = [
+  { value: 'regular', label: 'Regular', side: 'both' },
+  { value: 'loan_received', label: 'Loan received', side: 'income' },
+  { value: 'loan_repayment', label: 'Loan repayment', side: 'expense' },
+  { value: 'debt_owed', label: 'Debt owed', side: 'income' },
+  { value: 'debt_settled', label: 'Debt settled', side: 'expense' },
+  { value: 'investment_buy', label: 'Investment purchase', side: 'expense' },
+  { value: 'investment_return', label: 'Investment return', side: 'income' },
+  { value: 'gift', label: 'Gift', side: 'income' }
+];
+
+const emit = defineEmits(['submit', 'error']);
+
+const props = defineProps({
+  isOutcomeSelected: {
+    type: Boolean,
+    default: false
+  },
+  editingItem: {
+    type: Object,
+    default: null
+  },
+  isSubmitting: {
+    type: Boolean,
+    default: false
+  },
+  parties: { type: Array, default: () => [] },
+  wallets: { type: Array, default: () => [] },
+  groups: { type: Array, default: () => [] },
+  incomeCategories: { type: Array, default: () => [] },
+  expenseCategories: { type: Array, default: () => [] },
+  defaultCurrency: { type: String, default: 'USD' },
+  defaultGroup: { type: Object, default: null },
+  defaultWallet: { type: Object, default: null },
+  fetchFileBlob: { type: Function, default: null },
+  deleteFile: { type: Function, default: null },
+  fetchRecentExpenses: { type: Function, default: null }
+});
+
+const { isOutcomeSelected } = toRefs(props);
+
+const formatWalletName = (wallet) =>
+  wallet.currency ? `${wallet.name} (${wallet.currency})` : wallet.name;
+
+const now = new Date();
+const formDate = ref(now.toISOString().slice(0, 10));
+const formTime = ref(now.toTimeString().slice(0, 5));
+const formAmount = ref('');
+const formParty = ref('');
+const formCategory = ref('');
+const formDescription = ref('');
+const formIntent = ref('regular');
+
+const intentIcons = {
+  regular: Circle,
+  loan_received: HandCoins,
+  loan_repayment: Banknote,
+  debt_owed: Scale,
+  debt_settled: Handshake,
+  investment_buy: TrendingUp,
+  investment_return: PiggyBank,
+  gift: Gift
+};
+
+const intentOptions = computed(() => {
+  const side = isOutcomeSelected.value ? 'expense' : 'income';
+  return TRANSACTION_INTENT_OPTIONS.filter((o) => o.side === 'both' || o.side === side);
+});
+
+const selectedPartyId = ref(null);
+const selectedWalletId = ref(null);
+const selectedGroupId = ref(null);
+const selectedAdditionalCategoryIds = ref([]);
+
+const MAX_ATTACHMENTS = 5;
+
+const newAttachments = ref([]);
+const existingAttachments = ref([]);
+const existingPreviews = ref({});
+const loadingPreviewIds = ref(new Set());
+const removingFileIds = ref(new Set());
+const formIsRecurring = ref(false);
+const formRecurrencePeriod = ref('monthly');
+const formRecurrenceInterval = ref(1);
+const formRecurrenceEndsAt = ref('');
+const formIsRefund = ref(false);
+const formRefundOfTransactionId = ref(null);
+const recentExpenses = ref([]);
+const refundPickerQuery = ref('');
+let recentExpensesLoaded = false;
+const selectedCurrency = ref(props.defaultCurrency || 'USD');
+
+const dateError = ref(false);
+const timeError = ref(false);
+const amountError = ref(false);
+const partyError = ref(false);
+const categoryError = ref(false);
+const walletError = ref(false);
+
+function validateRequiredFields() {
+  let valid = true;
+
+  const amountNum = Number(formAmount.value);
+  amountError.value = !Number.isFinite(amountNum) || amountNum <= 0;
+  if (amountError.value) valid = false;
+
+  dateError.value = !formDate.value || formDate.value.trim() === '';
+  timeError.value = !formTime.value || formTime.value.trim() === '';
+  if (dateError.value || timeError.value) valid = false;
+
+  partyError.value = false;
+  categoryError.value = false;
+  walletError.value = false;
+
+  const partyValue = (formParty.value || searchQuery.value || '').trim();
+  if (partyValue) formParty.value = partyValue;
+
+  return valid;
+}
+
+function onSubmit() {
+  if (props.isSubmitting) {
+    return;
+  }
+
+  const isValid = validateRequiredFields();
+  if (!isValid) {
+    return;
+  }
+
+  const date = formDate.value || now.toISOString().slice(0, 10);
+  const time = formTime.value || now.toTimeString().slice(0, 5);
+
+  const amountNum = Number(formAmount.value);
+
+  const payload = {
+    date,
+    time,
+    type: isOutcomeSelected.value ? 'EXPENSE' : 'INCOME',
+    intent: formIntent.value,
+    party: formParty.value,
+    partyId: selectedPartyId.value,
+    amount: `${amountNum} ${selectedCurrency.value}`,
+    category: formCategory.value,
+    categoryIds: selectedAdditionalCategoryIds.value,
+    groupId: selectedGroupId.value ?? undefined,
+    walletId: selectedWalletId.value,
+    description: formDescription.value.trim(),
+    filesToUpload: newAttachments.value.map((att) => att.file),
+    isRecurring: formIsRecurring.value,
+    recurrencePeriod: formIsRecurring.value ? formRecurrencePeriod.value : undefined,
+    recurrenceInterval: formIsRecurring.value ? formRecurrenceInterval.value : undefined,
+    recurrenceEndsAt:
+      formIsRecurring.value && formRecurrenceEndsAt.value ? formRecurrenceEndsAt.value : undefined,
+    isRefund: !isOutcomeSelected.value && formIsRefund.value,
+    refundOfTransactionId:
+      !isOutcomeSelected.value && formIsRefund.value ? formRefundOfTransactionId.value : null
+  };
+
+  if (props.editingItem?.id) {
+    payload.id = props.editingItem.id;
+  }
+
+  emit('submit', payload);
+}
+
+const parties = computed(() => props.parties);
+const groups = computed(() => props.groups);
+const categories = computed(() =>
+  isOutcomeSelected.value ? props.expenseCategories : props.incomeCategories
+);
+
+const availableCurrencies = computed(() => {
+  const currencies = new Set(['XAF', 'USD', 'EUR', 'GBP', 'NGN']);
+  props.wallets.forEach((wallet) => {
+    if (wallet.currency) {
+      currencies.add(wallet.currency);
+    }
+  });
+  return Array.from(currencies).sort();
+});
+
+const wallets = computed(() =>
+  props.wallets
+    .filter((wallet) => !wallet.currency || wallet.currency === selectedCurrency.value)
+    .map((w) => ({ ...w, name: formatWalletName(w), originalName: w.name }))
+);
+
+const isWalletDefault = computed(() => {
+  if (!selectedWalletId.value) return false;
+  const dw = props.defaultWallet;
+  if (!dw) return false;
+  return selectedWalletId.value === dw.id;
+});
+
+const isGroupDefault = computed(() => {
+  if (!selectedGroupId.value) return false;
+  const dg = props.defaultGroup;
+  if (!dg) return false;
+  return selectedGroupId.value === dg.id;
+});
+
+function handlePartySelect(party) {
+  formParty.value = party.name;
+  selectedPartyId.value = party.id;
+  partyError.value = false;
+}
+
+function handleWalletSelect(wallet) {
+  selectedWalletId.value = wallet.id;
+  walletError.value = false;
+
+  if (wallet.currency && wallet.currency !== selectedCurrency.value) {
+    selectedCurrency.value = wallet.currency;
+  }
+}
+
+function handleCurrencyChange() {
+  if (selectedWalletId.value) {
+    const currentWallet = props.wallets.find((w) => w.id === selectedWalletId.value);
+
+    if (
+      currentWallet &&
+      currentWallet.currency &&
+      currentWallet.currency !== selectedCurrency.value
+    ) {
+      selectedWalletId.value = null;
+      walletSearchQuery.value = '';
+
+      const dw = props.defaultWallet;
+      if (dw) {
+        selectedWalletId.value = dw.id;
+        walletSearchQuery.value = dw.name;
+      }
+    }
+  }
+}
+
+function handleGroupSelect(group) {
+  selectedGroupId.value = group.id;
+  formCategory.value = group.name;
+  categoryError.value = false;
+}
+
+const searchQuery = ref('');
+const groupSearchQuery = ref('');
+const categorySearchQuery = ref('');
+const walletSearchQuery = ref('');
+
+function handleCategorySelect(categoryIds) {
+  selectedAdditionalCategoryIds.value = categoryIds;
+}
+
+async function loadRecentExpenses() {
+  if (recentExpensesLoaded) return;
+  try {
+    const data = props.fetchRecentExpenses ? await props.fetchRecentExpenses() : [];
+    recentExpenses.value = data || [];
+    recentExpensesLoaded = true;
+  } catch (e) {
+    console.error('[TransactionForm] Failed to load recent expenses', e);
+  }
+}
+
+function formatExpenseOption(exp) {
+  const dt = exp.datetime ? new Date(exp.datetime) : null;
+  const date = dt && !isNaN(dt.getTime()) ? dt.toLocaleDateString() : '';
+  const amount = Number(exp.amount || 0).toFixed(2);
+  const currency = exp.wallet?.currency ?? '';
+  const desc = exp.description || exp.party?.name || t('Untitled transaction');
+  return `${date} · ${amount} ${currency} · ${desc}`.trim();
+}
+
+const refundOptions = computed(() =>
+  recentExpenses.value.map((exp) => ({
+    id: Number(exp.id),
+    name: formatExpenseOption(exp)
+  }))
+);
+
+function handleRefundSelect(option) {
+  formRefundOfTransactionId.value = option?.id ?? null;
+  refundPickerQuery.value = option?.name ?? '';
+}
+
+watch(formIsRefund, (flag) => {
+  if (flag) {
+    loadRecentExpenses();
+  } else {
+    formRefundOfTransactionId.value = null;
+    refundPickerQuery.value = '';
+  }
+});
+
+watch(isOutcomeSelected, (isExpense) => {
+  if (isExpense) {
+    formIsRefund.value = false;
+    formRefundOfTransactionId.value = null;
+  }
+  if (!intentOptions.value.some((o) => o.value === formIntent.value)) {
+    formIntent.value = 'regular';
+  }
+});
+
+onMounted(() => {
+  if (!props.editingItem) {
+    const dg = props.defaultGroup;
+    if (dg && !selectedGroupId.value) {
+      selectedGroupId.value = dg.id;
+      formCategory.value = dg.name;
+      groupSearchQuery.value = dg.name;
+    }
+
+    const dw = props.defaultWallet;
+    if (dw && !selectedWalletId.value) {
+      selectedWalletId.value = dw.id;
+      walletSearchQuery.value = dw.name;
+      if (dw.currency) {
+        selectedCurrency.value = dw.currency;
+      }
+    }
+  }
+});
+
+function isImageMime(file) {
+  return typeof file.type === 'string' && file.type.startsWith('image/');
+}
+
+function isImageAttachment(file) {
+  return file.type === 'image';
+}
+
+function extensionLabel(name) {
+  const cleaned = (name || '').split('?')[0].split('#')[0];
+  const ext = cleaned.split('.').pop();
+  return (ext && ext !== cleaned ? ext : 'FILE').toUpperCase().slice(0, 4);
+}
+
+function revokeNewPreviews() {
+  for (const att of newAttachments.value) {
+    if (att.previewUrl) URL.revokeObjectURL(att.previewUrl);
+  }
+}
+
+function revokeExistingPreviews() {
+  for (const url of Object.values(existingPreviews.value)) {
+    URL.revokeObjectURL(url);
+  }
+  existingPreviews.value = {};
+}
+
+function onFilesSelected(event) {
+  const input = event.target;
+  const files = input.files;
+  if (!files) return;
+  const remaining =
+    MAX_ATTACHMENTS - (newAttachments.value.length + existingAttachments.value.length);
+  for (const file of Array.from(files).slice(0, Math.max(0, remaining))) {
+    newAttachments.value.push({
+      file,
+      name: file.name,
+      size: file.size,
+      isImage: isImageMime(file),
+      previewUrl: isImageMime(file) ? URL.createObjectURL(file) : null
+    });
+  }
+  // Reset the input so picking the same file again still emits a change event.
+  input.value = '';
+}
+
+function removeNewAttachment(index) {
+  const att = newAttachments.value[index];
+  if (att?.previewUrl) URL.revokeObjectURL(att.previewUrl);
+  newAttachments.value.splice(index, 1);
+}
+
+async function loadExistingPreview(file) {
+  if (file.type !== 'image') return;
+  if (existingPreviews.value[file.id]) return;
+  if (loadingPreviewIds.value.has(file.id)) return;
+  loadingPreviewIds.value.add(file.id);
+  try {
+    const blob = props.fetchFileBlob ? await props.fetchFileBlob(file.id) : null;
+    if (blob) existingPreviews.value[file.id] = URL.createObjectURL(blob);
+  } catch (err) {
+    console.error('[TransactionForm] Failed to load attachment preview', err);
+  } finally {
+    loadingPreviewIds.value.delete(file.id);
+  }
+}
+
+async function removeExistingAttachment(file) {
+  const transactionId = props.editingItem?.id;
+  if (!transactionId) return;
+  if (removingFileIds.value.has(file.id)) return;
+  removingFileIds.value.add(file.id);
+  try {
+    if (props.deleteFile) await props.deleteFile(Number(transactionId), file.id);
+    existingAttachments.value = existingAttachments.value.filter((f) => f.id !== file.id);
+    const url = existingPreviews.value[file.id];
+    if (url) {
+      URL.revokeObjectURL(url);
+      const { [file.id]: _removed, ...rest } = existingPreviews.value;
+      existingPreviews.value = rest;
+    }
+  } catch (err) {
+    console.error('[TransactionForm] Failed to remove attachment', err);
+    emit('error', err);
+  } finally {
+    removingFileIds.value.delete(file.id);
+  }
+}
+
+onUnmounted(() => {
+  revokeNewPreviews();
+  revokeExistingPreviews();
+});
+
+watch(
+  () => props.editingItem,
+  async (item) => {
+    if (!item) return;
+
+    dateError.value = false;
+    timeError.value = false;
+    amountError.value = false;
+    partyError.value = false;
+    categoryError.value = false;
+
+    if (item.date) formDate.value = item.date;
+    if (item.time) formTime.value = item.time;
+
+    if (item.party) {
+      formParty.value = item.party;
+      searchQuery.value = item.party;
+    }
+    if (item.partyId) {
+      selectedPartyId.value = item.partyId;
+    }
+
+    if (item.groupId) {
+      selectedGroupId.value = item.groupId;
+      const group = props.groups.find((g) => g.id === item.groupId);
+      if (group) {
+        formCategory.value = group.name;
+        groupSearchQuery.value = group.name;
+      }
+    }
+
+    if (item.categoryIds && item.categoryIds.length > 0) {
+      selectedAdditionalCategoryIds.value = item.categoryIds;
+    }
+
+    if (item.walletId) {
+      selectedWalletId.value = item.walletId;
+      const wallet = props.wallets.find((w) => w.id === item.walletId);
+      if (wallet) {
+        walletSearchQuery.value = wallet.name;
+        if (wallet.currency) {
+          selectedCurrency.value = wallet.currency;
+        }
+      }
+    }
+
+    if (item.description) {
+      formDescription.value = item.description;
+    }
+
+    formIntent.value = item.intent || 'regular';
+
+    if (item.amount) {
+      const num = parseFloat(String(item.amount).replace(/[^\d.]/g, ''));
+      formAmount.value = Number.isFinite(num) ? String(num) : '';
+    }
+
+    if (item.isRecurring) {
+      formIsRecurring.value = true;
+      formRecurrencePeriod.value = item.recurrencePeriod || 'monthly';
+      formRecurrenceInterval.value = item.recurrenceInterval || 1;
+      formRecurrenceEndsAt.value = item.recurrenceEndsAt ? item.recurrenceEndsAt.split('T')[0] : '';
+    }
+
+    if (item.isRefund) {
+      formIsRefund.value = true;
+      formRefundOfTransactionId.value = item.refundOfTransactionId ?? null;
+      await loadRecentExpenses();
+      if (formRefundOfTransactionId.value) {
+        const match = recentExpenses.value.find(
+          (exp) => Number(exp.id) === formRefundOfTransactionId.value
+        );
+        if (match) refundPickerQuery.value = formatExpenseOption(match);
+      }
+    }
+
+    revokeExistingPreviews();
+    existingAttachments.value = Array.isArray(item.files) ? [...item.files] : [];
+    for (const file of existingAttachments.value) {
+      loadExistingPreview(file);
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+@use '../assets/scss/_transaction-form.scss' as *;
+</style>
+
+
diff --git a/components/TransactionFormContainer.stories.js b/components/TransactionFormContainer.stories.js
new file mode 100644
index 0000000..68314e7
--- /dev/null
+++ b/components/TransactionFormContainer.stories.js
@@ -0,0 +1,38 @@
+import TransactionFormContainer from './TransactionFormContainer.vue';
+
+const wallets = [
+  { id: 1, name: 'Main Bank Account', currency: 'USD' },
+  { id: 2, name: 'Cash Wallet', currency: 'USD' }
+];
+const parties = [
+  { id: 1, name: 'Grocery Store' },
+  { id: 2, name: 'Employer' }
+];
+const categories = [
+  { id: 1, name: 'Food & Dining', type: 'expense' },
+  { id: 2, name: 'Salary', type: 'income' }
+];
+const groups = [{ id: 1, name: 'General' }];
+
+export default {
+  title: 'Domain/Transactions/TransactionFormContainer',
+  component: TransactionFormContainer,
+  args: {
+    isOutcomeSelected: false,
+    isSubmitting: false,
+    wallets,
+    parties,
+    groups,
+    incomeCategories: categories.filter((c) => c.type === 'income'),
+    expenseCategories: categories.filter((c) => c.type === 'expense'),
+    defaultCurrency: 'USD',
+    defaultGroup: groups[0],
+    defaultWallet: wallets[0]
+  }
+};
+
+export const NewExpense = {};
+
+export const NewIncome = {
+  args: { isOutcomeSelected: false }
+};
diff --git a/components/TransactionFormContainer.vue b/components/TransactionFormContainer.vue
new file mode 100644
index 0000000..f9419fb
--- /dev/null
+++ b/components/TransactionFormContainer.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="form-container">
+    <TransactionForm
+      v-bind="$attrs"
+      :is-outcome-selected="isOutcomeSelected"
+      :editing-item="editingItem"
+      :is-submitting="isSubmitting"
+      @submit="handleSubmit"
+    />
+  </div>
+</template>
+
+<script setup>
+import TransactionForm from './TransactionForm.vue';
+
+defineProps({
+  editingItem: { type: Object, default: null },
+  isOutcomeSelected: { type: Boolean, default: false },
+  isSubmitting: { type: Boolean, default: false }
+});
+
+const emit = defineEmits(['submit']);
+
+const handleSubmit = (data) => {
+  emit('submit', data);
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.form-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  background: $bg-white;
+  border-radius: $radius-xl;
+  border: 1px solid $border-color;
+  box-shadow: $shadow-md;
+  padding: 1.5rem;
+
+  @media (max-width: $breakpoint-md) {
+    padding: 1.25rem;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 1rem;
+    border-radius: $radius-lg;
+  }
+}
+</style>
diff --git a/components/TransactionFormSection.stories.js b/components/TransactionFormSection.stories.js
new file mode 100644
index 0000000..a7d01ee
--- /dev/null
+++ b/components/TransactionFormSection.stories.js
@@ -0,0 +1,30 @@
+import TransactionFormSection from './TransactionFormSection.vue';
+
+const wallets = [
+  { id: 1, name: 'Main Bank Account', currency: 'USD' },
+  { id: 2, name: 'Cash Wallet', currency: 'USD' }
+];
+const parties = [{ id: 1, name: 'Grocery Store' }];
+const categories = [
+  { id: 1, name: 'Food & Dining', type: 'expense' },
+  { id: 2, name: 'Salary', type: 'income' }
+];
+const groups = [{ id: 1, name: 'General' }];
+
+export default {
+  title: 'Domain/Transactions/TransactionFormSection',
+  component: TransactionFormSection,
+  args: {
+    isSubmitting: false,
+    wallets,
+    parties,
+    groups,
+    incomeCategories: categories.filter((c) => c.type === 'income'),
+    expenseCategories: categories.filter((c) => c.type === 'expense'),
+    defaultCurrency: 'USD',
+    defaultGroup: groups[0],
+    defaultWallet: wallets[0]
+  }
+};
+
+export const Default = {};
diff --git a/components/TransactionFormSection.vue b/components/TransactionFormSection.vue
new file mode 100644
index 0000000..9f20f0a
--- /dev/null
+++ b/components/TransactionFormSection.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="form-section">
+    <FormSection
+      v-bind="$attrs"
+      :editing-item="editingItem"
+      :is-submitting="isSubmitting"
+      @submit="handleSubmit"
+      @transfer="handleTransfer"
+    />
+    <TipsSection page-name="Transaction" />
+  </div>
+</template>
+
+<script setup>
+import FormSection from './FormSection.vue';
+import TipsSection from './TipsSection.vue';
+
+defineProps({
+  editingItem: {
+    type: Object,
+    default: null
+  },
+  isSubmitting: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['submit', 'transfer']);
+
+const handleSubmit = (data) => {
+  emit('submit', data);
+};
+
+const handleTransfer = (data) => {
+  emit('transfer', data);
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.form-section {
+  display: flex;
+  margin-top: 20px;
+  gap: 60px;
+  width: 100%;
+  padding: 0;
+
+  @media (max-width: $breakpoint-lg) {
+    gap: 40px;
+  }
+
+  @media (max-width: $breakpoint-md) {
+    flex-direction: column;
+    gap: 30px;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    gap: 20px;
+  }
+}
+</style>
diff --git a/components/TransferForm.stories.js b/components/TransferForm.stories.js
new file mode 100644
index 0000000..37571d1
--- /dev/null
+++ b/components/TransferForm.stories.js
@@ -0,0 +1,23 @@
+import TransferForm from './TransferForm.vue';
+
+const wallets = [
+  { id: 1, name: 'Main Bank Account', currency: 'USD' },
+  { id: 2, name: 'Cash Wallet', currency: 'USD' },
+  { id: 3, name: 'Mobile Money', currency: 'XAF' }
+];
+
+export default {
+  title: 'Domain/Transactions/TransferForm',
+  component: TransferForm,
+  args: {
+    isSubmitting: false,
+    wallets,
+    defaultCurrency: 'USD'
+  }
+};
+
+export const Default = {};
+
+export const Submitting = {
+  args: { isSubmitting: true }
+};
diff --git a/components/TransferForm.vue b/components/TransferForm.vue
new file mode 100644
index 0000000..1d7496a
--- /dev/null
+++ b/components/TransferForm.vue
@@ -0,0 +1,433 @@
+<template>
+  <div class="transfer-form">
+    <div class="form">
+      <div class="transfer-amount">
+        <span>{{ t('Amount') }}</span>
+        <div class="amount-input-group">
+          <input
+            v-model="formAmount"
+            type="number"
+            :placeholder="t('Ex: 250 000')"
+            min="1"
+            step="any"
+            required
+          />
+          <select v-model="selectedCurrency" class="amount-currency-select">
+            <option v-for="currency in availableCurrencies" :key="currency" :value="currency">
+              {{ currency }}
+            </option>
+          </select>
+        </div>
+        <div v-if="amountError" class="error-text">
+          {{ t('Enter a valid amount greater than 0.') }}
+        </div>
+      </div>
+
+      <div class="form-transaction">
+        <div class="transfer-field">
+          <SearchableDropdown
+            v-model="fromWalletSearchQuery"
+            :label="t('From Wallet')"
+            :placeholder="t('Select source wallet...')"
+            :options="fromWalletOptions"
+            :error="fromWalletError ? t('Source wallet is required.') : ''"
+            @select="handleFromWalletSelect"
+            @clear="fromWalletId = null"
+          />
+        </div>
+
+        <div class="transfer-field">
+          <SearchableDropdown
+            v-model="toWalletSearchQuery"
+            :label="t('To Wallet')"
+            :placeholder="t('Select destination wallet...')"
+            :options="toWalletOptions"
+            :error="toWalletError ? t('Destination wallet is required.') : ''"
+            @select="handleToWalletSelect"
+            @clear="toWalletId = null"
+          />
+        </div>
+      </div>
+
+      <div v-if="showExchangeRate" class="exchange-rate-section">
+        <span>{{ t('Exchange Rate') }}</span>
+        <div class="exchange-rate-input">
+          <span class="rate-label">1 {{ fromWalletCurrency }} =</span>
+          <input
+            v-model="exchangeRate"
+            type="number"
+            step="any"
+            min="0.0001"
+            :placeholder="t('Enter rate')"
+          />
+          <span class="rate-label">{{ toWalletCurrency }}</span>
+        </div>
+        <div v-if="exchangeRateError" class="error-text">
+          {{ t('Exchange rate is required for different currencies.') }}
+        </div>
+        <div v-if="convertedAmount" class="converted-amount">
+          {{ t('Recipient will receive:') }} {{ convertedAmount }} {{ toWalletCurrency }}
+        </div>
+      </div>
+
+      <div class="form-transaction">
+        <div class="transfer-field">
+          <span>{{ t('Transfer date') }}</span>
+          <input v-model="formDate" type="date" required />
+          <div v-if="dateError" class="error-text">{{ t('Date is required.') }}</div>
+        </div>
+
+        <div class="transfer-field">
+          <span>{{ t('Transfer time') }}</span>
+          <input v-model="formTime" type="time" required />
+          <div v-if="timeError" class="error-text">{{ t('Time is required.') }}</div>
+        </div>
+      </div>
+    </div>
+
+    <TButton
+      :text="t('Make Transfer')"
+      class="submit-button"
+      :disabled="props.isSubmitting"
+      :loading="props.isSubmitting"
+      @click="onSubmit"
+    >
+      <template #left-icon>
+        <ArrowsRightLeftIcon />
+      </template>
+    </TButton>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import TButton from './TButton.vue';
+import SearchableDropdown from './SearchableDropdown.vue';
+import { ArrowsRightLeftIcon } from '@heroicons/vue/24/outline';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const emit = defineEmits(['submit']);
+const props = defineProps({
+  isSubmitting: {
+    type: Boolean,
+    default: false
+  },
+  wallets: {
+    type: Array,
+    default: () => []
+  },
+  defaultCurrency: {
+    type: String,
+    default: 'USD'
+  }
+});
+
+const formatWalletName = (wallet) =>
+  wallet.currency ? `${wallet.name} (${wallet.currency})` : wallet.name;
+
+const now = new Date();
+const formDate = ref(now.toISOString().slice(0, 10));
+const formTime = ref(now.toTimeString().slice(0, 5));
+const formAmount = ref('');
+const exchangeRate = ref('');
+
+const fromWalletId = ref(null);
+const toWalletId = ref(null);
+const fromWalletSearchQuery = ref('');
+const toWalletSearchQuery = ref('');
+
+const selectedCurrency = ref(props.defaultCurrency || 'USD');
+
+const dateError = ref(false);
+const timeError = ref(false);
+const amountError = ref(false);
+const fromWalletError = ref(false);
+const toWalletError = ref(false);
+const exchangeRateError = ref(false);
+
+const availableCurrencies = computed(() => {
+  const currencies = new Set(['XAF', 'USD', 'EUR', 'GBP', 'NGN']);
+  props.wallets.forEach((wallet) => {
+    if (wallet.currency) {
+      currencies.add(wallet.currency);
+    }
+  });
+  return Array.from(currencies).sort();
+});
+
+const fromWalletOptions = computed(() => {
+  return props.wallets
+    .filter((w) => w.id !== toWalletId.value)
+    .map((w) => ({
+      ...w,
+      name: formatWalletName(w),
+      originalName: w.name
+    }));
+});
+
+const toWalletOptions = computed(() => {
+  return props.wallets
+    .filter((w) => w.id !== fromWalletId.value)
+    .map((w) => ({
+      ...w,
+      name: formatWalletName(w),
+      originalName: w.name
+    }));
+});
+
+const fromWalletCurrency = computed(() => {
+  const wallet = props.wallets.find((w) => w.id === fromWalletId.value);
+  return wallet?.currency || selectedCurrency.value;
+});
+
+const toWalletCurrency = computed(() => {
+  const wallet = props.wallets.find((w) => w.id === toWalletId.value);
+  return wallet?.currency || selectedCurrency.value;
+});
+
+const showExchangeRate = computed(() => {
+  return (
+    fromWalletId.value && toWalletId.value && fromWalletCurrency.value !== toWalletCurrency.value
+  );
+});
+
+const convertedAmount = computed(() => {
+  if (!showExchangeRate.value) return null;
+  const amount = Number(formAmount.value);
+  const rate = Number(exchangeRate.value);
+  if (!Number.isFinite(amount) || !Number.isFinite(rate) || rate <= 0) return null;
+  return (amount * rate).toFixed(2);
+});
+
+function handleFromWalletSelect(wallet) {
+  fromWalletId.value = wallet.id;
+  fromWalletSearchQuery.value = wallet.name;
+  fromWalletError.value = false;
+
+  if (wallet.currency) {
+    selectedCurrency.value = wallet.currency;
+  }
+}
+
+function handleToWalletSelect(wallet) {
+  toWalletId.value = wallet.id;
+  toWalletSearchQuery.value = wallet.name;
+  toWalletError.value = false;
+}
+
+function validateRequiredFields() {
+  let valid = true;
+
+  const amountNum = Number(formAmount.value);
+  amountError.value = !Number.isFinite(amountNum) || amountNum <= 0;
+  if (amountError.value) valid = false;
+
+  dateError.value = !formDate.value || formDate.value.trim() === '';
+  timeError.value = !formTime.value || formTime.value.trim() === '';
+  if (dateError.value || timeError.value) valid = false;
+
+  fromWalletError.value = !fromWalletId.value;
+  toWalletError.value = !toWalletId.value;
+  if (fromWalletError.value || toWalletError.value) valid = false;
+
+  if (showExchangeRate.value) {
+    const rate = Number(exchangeRate.value);
+    exchangeRateError.value = !Number.isFinite(rate) || rate <= 0;
+    if (exchangeRateError.value) valid = false;
+  }
+
+  return valid;
+}
+
+function onSubmit() {
+  if (props.isSubmitting) {
+    return;
+  }
+
+  if (!validateRequiredFields()) {
+    return;
+  }
+
+  const amountNum = Number(formAmount.value);
+  const dateTime = `${formDate.value}T${formTime.value}:00`;
+
+  const payload = {
+    amount: amountNum,
+    from_wallet_id: fromWalletId.value,
+    to_wallet_id: toWalletId.value,
+    created_at: new Date(dateTime).toISOString()
+  };
+
+  if (showExchangeRate.value) {
+    payload.exchange_rate = Number(exchangeRate.value);
+  }
+
+  emit('submit', payload);
+}
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+@use '../assets/scss/_transaction-form.scss' as *;
+
+.transfer-form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.transfer-amount {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  > span {
+    font-weight: $font-medium;
+  }
+}
+
+.transfer-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  > span {
+    font-weight: $font-medium;
+  }
+
+  input[type='date'],
+  input[type='time'] {
+    padding: 12px;
+    border: 1px solid $border-color;
+    border-radius: $radius-lg;
+    font-size: 16px;
+    width: 100%;
+    height: 50px;
+    background: $bg-white;
+    color: $text-primary;
+
+    &:focus {
+      border-color: $primary;
+      outline: none;
+    }
+  }
+}
+
+.amount-input-group {
+  display: flex;
+  gap: 0.5rem;
+
+  input {
+    flex: 1;
+    width: 100%;
+    height: 50px;
+    border-radius: $radius-lg;
+    padding: 12px;
+    border: 1px solid $border-color;
+    background: $bg-white;
+    color: $text-primary;
+
+    &:focus {
+      border-color: $primary;
+      outline: none;
+    }
+  }
+
+  .amount-currency-select {
+    width: 80px;
+    height: 50px;
+    background-color: $bg-light;
+    border-radius: $radius-lg;
+    font-weight: $font-normal;
+    font-size: $font-size-sm;
+    line-height: 100%;
+    border: 1px solid $border-color;
+    cursor: pointer;
+    padding: 0 8px;
+    appearance: none;
+    color: $text-primary;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+    background-position: right 8px center;
+    background-repeat: no-repeat;
+    background-size: 16px;
+
+    &:focus {
+      border-color: $primary;
+      outline: none;
+    }
+  }
+}
+
+.exchange-rate-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 1rem;
+  background: $bg-slate;
+  border-radius: $radius-lg;
+  border: 1px solid $border-color;
+
+  > span {
+    font-weight: $font-medium;
+    color: $text-primary;
+  }
+}
+
+.exchange-rate-input {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  input {
+    flex: 1;
+    max-width: 150px;
+    padding: 10px 12px;
+    height: 44px;
+    border: 1px solid $border-color;
+    border-radius: $radius-lg;
+    font-size: 16px;
+    color: $text-primary;
+    background: $bg-white;
+
+    &:focus {
+      border-color: $primary;
+      outline: none;
+    }
+  }
+
+  .rate-label {
+    color: $text-secondary;
+    font-size: 14px;
+  }
+}
+
+.converted-amount {
+  font-size: 14px;
+  color: $primary;
+  font-weight: $font-medium;
+}
+
+.submit-button {
+  align-self: flex-start;
+  margin-top: 16px;
+
+  @media (max-width: $breakpoint-sm) {
+    width: 100%;
+  }
+}
+
+.optional-label {
+  font-weight: $font-normal;
+  color: $text-muted;
+  font-size: $font-size-sm;
+}
+</style>
diff --git a/components/TransferFormContainer.stories.js b/components/TransferFormContainer.stories.js
new file mode 100644
index 0000000..b1731f3
--- /dev/null
+++ b/components/TransferFormContainer.stories.js
@@ -0,0 +1,23 @@
+import TransferFormContainer from './TransferFormContainer.vue';
+
+const wallets = [
+  { id: 1, name: 'Main Bank Account', currency: 'USD' },
+  { id: 2, name: 'Cash Wallet', currency: 'USD' },
+  { id: 3, name: 'Mobile Money', currency: 'XAF' }
+];
+
+export default {
+  title: 'Domain/Transactions/TransferFormContainer',
+  component: TransferFormContainer,
+  args: {
+    isSubmitting: false,
+    wallets,
+    defaultCurrency: 'USD'
+  }
+};
+
+export const Default = {};
+
+export const Submitting = {
+  args: { isSubmitting: true }
+};
diff --git a/components/TransferFormContainer.vue b/components/TransferFormContainer.vue
new file mode 100644
index 0000000..c35735b
--- /dev/null
+++ b/components/TransferFormContainer.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="form-container">
+    <TransferForm v-bind="$attrs" :is-submitting="isSubmitting" @submit="handleSubmit" />
+  </div>
+</template>
+
+<script setup>
+import TransferForm from './TransferForm.vue';
+
+defineProps({
+  isSubmitting: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['submit']);
+
+const handleSubmit = (data) => {
+  emit('submit', data);
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.form-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  background: $bg-white;
+  border-radius: $radius-xl;
+  border: 1px solid $border-color;
+  box-shadow: $shadow-md;
+  padding: 1.5rem;
+
+  @media (max-width: $breakpoint-md) {
+    padding: 1.25rem;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 1rem;
+    border-radius: $radius-lg;
+  }
+}
+</style>
diff --git a/components/ViewToggle.stories.js b/components/ViewToggle.stories.js
new file mode 100644
index 0000000..e98d3fb
--- /dev/null
+++ b/components/ViewToggle.stories.js
@@ -0,0 +1,22 @@
+import ViewToggle from './ViewToggle.vue';
+
+export default {
+  title: 'Primitives/ViewToggle',
+  component: ViewToggle,
+  argTypes: {
+    modelValue: { control: 'select', options: ['table', 'cards'] },
+    tableTitle: { control: 'text' },
+    cardsTitle: { control: 'text' },
+  },
+};
+
+export const TableActive = { args: { modelValue: 'table' } };
+export const CardsActive = { args: { modelValue: 'cards' } };
+export const Interactive = {
+  render: (args) => ({
+    components: { ViewToggle },
+    setup() { return { args }; },
+    template: `<ViewToggle v-bind="args" @update:modelValue="args.modelValue = $event" />`,
+  }),
+  args: { modelValue: 'table' },
+};
diff --git a/components/ViewToggle.vue b/components/ViewToggle.vue
new file mode 100644
index 0000000..ecc2b85
--- /dev/null
+++ b/components/ViewToggle.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="view-toggle">
+    <TButton
+      type="button"
+      :variant="modelValue === 'table' ? 'primary' : 'secondary'"
+      :full-width="false"
+      class="toggle-btn"
+      :class="{ active: modelValue === 'table' }"
+      :title="tableTitle"
+      @click="$emit('update:modelValue', 'table')"
+    >
+      <LayoutList :size="18" />
+    </TButton>
+    <TButton
+      type="button"
+      :variant="modelValue === 'cards' ? 'primary' : 'secondary'"
+      :full-width="false"
+      class="toggle-btn"
+      :class="{ active: modelValue === 'cards' }"
+      :title="cardsTitle"
+      @click="$emit('update:modelValue', 'cards')"
+    >
+      <LayoutGrid :size="18" />
+    </TButton>
+  </div>
+</template>
+
+<script setup>
+import { LayoutList, LayoutGrid } from 'lucide-vue-next';
+import TButton from './TButton.vue';
+
+defineProps({
+  modelValue: {
+    type: String,
+    default: 'table',
+    validator: (value) => ['table', 'cards'].includes(value)
+  },
+  tableTitle: {
+    type: String,
+    default: 'Table view'
+  },
+  cardsTitle: {
+    type: String,
+    default: 'Card view'
+  }
+});
+
+defineEmits(['update:modelValue']);
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.view-toggle {
+  display: inline-flex;
+  border: 1px solid $border-light;
+  border-radius: $radius-md;
+  overflow: hidden;
+}
+
+.toggle-btn {
+  border-radius: 0;
+  padding: 6px 10px;
+  min-height: auto;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:not(:last-child) {
+    border-right: 1px solid $border-light;
+  }
+}
+</style>
diff --git a/components/WalletCard.stories.js b/components/WalletCard.stories.js
new file mode 100644
index 0000000..d0f3092
--- /dev/null
+++ b/components/WalletCard.stories.js
@@ -0,0 +1,50 @@
+import WalletCard from './WalletCard.vue';
+
+const sampleWallets = [
+  { id: 1, name: 'Main Checking', currency: 'USD' },
+  { id: 2, name: 'High Yield Savings', currency: 'USD' },
+  { id: 3, name: 'Euro Travel Card', currency: 'EUR' }
+];
+
+export default {
+  title: 'Domain/Wallets/WalletCard',
+  component: WalletCard,
+  args: {
+    wallets: sampleWallets,
+    currency: 'USD',
+    statistics: {
+      total_balance: 14850.75,
+      total_income: 6200.0,
+      total_expenses: 3180.5
+    },
+    isLoading: false
+  }
+};
+
+export const AllWallets = {
+  args: {
+    modelValue: null
+  }
+};
+
+export const SelectedWallet = {
+  args: {
+    modelValue: 1
+  }
+};
+
+export const Loading = {
+  args: {
+    isLoading: true
+  }
+};
+
+export const NegativeBalance = {
+  args: {
+    statistics: {
+      total_balance: -450.25,
+      total_income: 1200.0,
+      total_expenses: 1650.25
+    }
+  }
+};
diff --git a/components/WalletCard.vue b/components/WalletCard.vue
new file mode 100644
index 0000000..2106eab
--- /dev/null
+++ b/components/WalletCard.vue
@@ -0,0 +1,433 @@
+<template>
+  <div class="wallet-card-wrapper">
+    <ComponentLoader
+      :is-loading="isLoading"
+      :has-data="!!computedStats"
+      :show-empty="false"
+      skeleton-variant="card"
+      :on-retry="() => $emit('retry')"
+    >
+      <div class="card-container">
+        <div class="background-ellipse" />
+        <div class="card-content">
+          <div class="card-header-content">
+            <div class="card-header">
+              <span class="total-balance-text">
+                {{ selectedWalletName }}
+              </span>
+              <TDropdown v-if="wallets && wallets.length > 0">
+                <template #trigger="{ isOpen }">
+                  <button
+                    type="button"
+                    class="chevron-trigger"
+                    :aria-expanded="isOpen"
+                    :title="t('Select wallet')"
+                  >
+                    <ChevronDown
+                      class="chevron-icon"
+                      :class="{ rotated: isOpen }"
+                      :size="16"
+                    />
+                  </button>
+                </template>
+                <div class="wallet-dropdown-menu">
+                  <TDropdownItem
+                    v-for="w in allWalletsOption"
+                    :key="w.id ?? 'all'"
+                    class="wallet-dropdown-item"
+                    :class="{ 'is-selected': selectedId === w.id }"
+                    @click="onSelectWallet(w.id)"
+                  >
+                    <span class="wallet-option__name">{{ w.name }}</span>
+                    <span v-if="w.currency" class="wallet-option__currency">{{ w.currency }}</span>
+                  </TDropdownItem>
+                </div>
+              </TDropdown>
+            </div>
+            <span class="balance-amount-text">
+              {{ formattedBalance }}
+            </span>
+          </div>
+
+          <slot name="actions">
+            <TDropdown>
+              <template #trigger>
+                <button
+                  type="button"
+                  class="three-dots-button"
+                  :aria-label="t('Wallet actions')"
+                >
+                  <MoreHorizontal class="three-dots" :size="20" />
+                </button>
+              </template>
+              <div class="action-dropdown-menu">
+                <TDropdownItem @click="$emit('edit', selectedWallet)">
+                  {{ t('Edit wallet') }}
+                </TDropdownItem>
+                <TDropdownItem @click="$emit('transfer')">
+                  {{ t('Transfer funds') }}
+                </TDropdownItem>
+              </div>
+            </TDropdown>
+          </slot>
+        </div>
+
+        <div class="card-footer">
+          <button
+            type="button"
+            class="income-button"
+            @click="$emit('income-click')"
+          >
+            <div class="income-button-content">
+              <ArrowDownLeft class="income-arrow-icon" :size="16" />
+              <span class="income-button-text">{{ t('Income') }}</span>
+            </div>
+            <span class="income-card-amount-text">
+              {{ formattedIncome }}
+            </span>
+          </button>
+
+          <button
+            type="button"
+            class="expense-button"
+            @click="$emit('expense-click')"
+          >
+            <div class="expense-button-content">
+              <ArrowUpRight class="expense-arrow-icon" :size="16" />
+              <span class="expense-button-text">{{ t('Expense') }}</span>
+            </div>
+            <span class="expense-card-amount-text">
+              {{ formattedExpense }}
+            </span>
+          </button>
+        </div>
+      </div>
+    </ComponentLoader>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { ChevronDown, MoreHorizontal, ArrowDownLeft, ArrowUpRight } from 'lucide-vue-next';
+import ComponentLoader from './ComponentLoader.vue';
+import TDropdown from './TDropdown.vue';
+import TDropdownItem from './TDropdownItem.vue';
+import { formatAmount, formatShortAmount } from '../utils/currency';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number, null],
+    default: null
+  },
+  wallets: {
+    type: Array,
+    default: () => []
+  },
+  statistics: {
+    type: Object,
+    default: () => ({
+      total_balance: 0,
+      total_income: 0,
+      total_expenses: 0
+    })
+  },
+  currency: {
+    type: String,
+    default: 'USD'
+  },
+  isLoading: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits([
+  'update:modelValue',
+  'select-wallet',
+  'income-click',
+  'expense-click',
+  'edit',
+  'transfer',
+  'retry'
+]);
+
+const selectedId = computed(() => props.modelValue);
+
+const allWalletsOption = computed(() => [
+  { id: null, name: t('All Wallets'), currency: '' },
+  ...props.wallets
+]);
+
+const selectedWallet = computed(() => {
+  if (selectedId.value === null || selectedId.value === undefined) return null;
+  return props.wallets.find((w) => w.id === selectedId.value) || null;
+});
+
+const selectedWalletName = computed(() => {
+  if (!selectedWallet.value) return t('All Wallets');
+  return selectedWallet.value.name;
+});
+
+const activeCurrency = computed(() => {
+  if (selectedWallet.value?.currency) return selectedWallet.value.currency;
+  return props.currency;
+});
+
+const computedStats = computed(() => props.statistics);
+
+const formattedBalance = computed(() => {
+  const val = computedStats.value?.total_balance ?? 0;
+  return formatAmount(`${val} ${activeCurrency.value}`);
+});
+
+const formattedIncome = computed(() => {
+  const val = computedStats.value?.total_income ?? 0;
+  return formatShortAmount(`${val} ${activeCurrency.value}`);
+});
+
+const formattedExpense = computed(() => {
+  const val = computedStats.value?.total_expenses ?? 0;
+  return formatShortAmount(`${val} ${activeCurrency.value}`);
+});
+
+const onSelectWallet = (walletId) => {
+  emit('update:modelValue', walletId);
+  emit('select-wallet', walletId);
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.wallet-card-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.card-container {
+  width: 100%;
+  min-height: 158px;
+  background-color: $bg-light;
+  border: 0.5px solid $border-medium;
+  border-radius: $radius-xl;
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding: $spacing-4;
+  display: flex;
+  flex-direction: column;
+  z-index: 10;
+}
+
+.background-ellipse {
+  position: absolute;
+  width: 461px;
+  height: 461px;
+  left: -141px;
+  top: -130px;
+  background: $primary-light;
+  border-radius: 50%;
+  z-index: -1;
+  pointer-events: none;
+}
+
+.card-content {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex: 1;
+  position: relative;
+  z-index: 1;
+}
+
+.card-header-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  position: relative;
+}
+
+.card-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: $spacing-2;
+  margin-bottom: $spacing-2;
+}
+
+.total-balance-text {
+  color: $text-primary;
+  font-weight: $font-normal;
+  font-size: $font-size-xs;
+}
+
+.chevron-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: $text-secondary;
+}
+
+.chevron-icon {
+  cursor: pointer;
+  transition: transform $duration-fast $easing-standard;
+
+  &.rotated {
+    transform: rotate(180deg);
+  }
+}
+
+.balance-amount-text {
+  font-weight: $font-bold;
+  font-size: $font-size-xl;
+  color: $text-primary;
+  font-variant-numeric: tabular-nums;
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: $font-size-lg;
+  }
+}
+
+.three-dots-button {
+  width: 36px;
+  height: 36px;
+  background-color: $primary-muted;
+  border-radius: $radius-lg;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color $duration-fast $easing-standard;
+
+  &:hover {
+    background-color: rgba(var(--color-primary-rgb), 0.2);
+  }
+}
+
+.three-dots {
+  color: $primary-dark;
+}
+
+.wallet-dropdown-menu,
+.action-dropdown-menu {
+  min-width: 180px;
+  padding: $spacing-1 0;
+}
+
+.wallet-dropdown-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: $spacing-2;
+
+  &.is-selected {
+    font-weight: $font-bold;
+    color: var(--color-primary);
+  }
+}
+
+.wallet-option__name {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wallet-option__currency {
+  flex: 0 0 auto;
+  font-size: $font-size-xs;
+  opacity: 0.75;
+}
+
+.card-footer {
+  width: 100%;
+  height: 55px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: $spacing-4;
+  position: relative;
+  z-index: 1;
+}
+
+.income-button,
+.expense-button {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 120px;
+  height: 48px;
+  border-radius: $radius-lg;
+  padding: $spacing-1 $spacing-2;
+  border: none;
+  cursor: pointer;
+  overflow: hidden;
+  text-align: left;
+  transition: opacity $duration-fast $easing-standard;
+
+  &:hover {
+    opacity: 0.88;
+  }
+}
+
+.income-button {
+  background-color: rgba(var(--color-success-rgb), 0.15);
+}
+
+.expense-button {
+  background-color: rgba(var(--color-error-rgb), 0.15);
+}
+
+.income-button-content,
+.expense-button-content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+}
+
+.income-arrow-icon {
+  color: $success;
+}
+
+.expense-arrow-icon {
+  color: $error-color;
+}
+
+.income-button-text {
+  font-weight: $font-medium;
+  font-size: $font-size-xs;
+  color: $success;
+}
+
+.expense-button-text {
+  font-weight: $font-medium;
+  font-size: $font-size-xs;
+  color: $error-color;
+}
+
+.income-card-amount-text,
+.expense-card-amount-text {
+  font-weight: $font-bold;
+  font-size: $font-size-sm;
+  margin-bottom: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.2;
+  font-variant-numeric: tabular-nums;
+  color: $text-primary;
+}
+</style>
diff --git a/components/WalletForm.stories.js b/components/WalletForm.stories.js
new file mode 100644
index 0000000..8a71f85
--- /dev/null
+++ b/components/WalletForm.stories.js
@@ -0,0 +1,28 @@
+import WalletForm from './WalletForm.vue';
+
+export default {
+  title: 'Domain/Wallets/WalletForm',
+  component: WalletForm,
+  args: {
+    editingItem: null,
+    apiError: '',
+    isSubmitting: false,
+    defaultCurrency: 'USD'
+  }
+};
+
+export const Create = {};
+
+export const Edit = {
+  args: {
+    editingItem: {
+      id: 1,
+      name: 'Main Bank Account',
+      type: 'bank',
+      currency: 'USD',
+      balance: 1000,
+      description: 'Primary checking account',
+      icon: 'Landmark'
+    }
+  }
+};
diff --git a/components/WalletForm.vue b/components/WalletForm.vue
new file mode 100644
index 0000000..eb91ea0
--- /dev/null
+++ b/components/WalletForm.vue
@@ -0,0 +1,348 @@
+<template>
+  <form class="card-form" @submit.prevent="handleSubmit">
+    <div class="form-header">
+      <h2>{{ isEditing ? t('Edit Wallet') : t('Create Wallet') }}</h2>
+      <TButton
+        variant="text"
+        size="small"
+        :full-width="false"
+        class="close-btn"
+        :aria-label="t('Close')"
+        @click="handleFormClose"
+      >
+        <X />
+      </TButton>
+    </div>
+
+    <div class="form-group">
+      <label for="wallet-name" class="form-label">{{ t('Wallet Name') }}</label>
+      <div class="name-icon-row">
+        <div class="name-col">
+          <input
+            id="wallet-name"
+            v-model="form.name"
+            type="text"
+            class="form-input"
+            :class="{ error: nameError || props.apiError }"
+            :placeholder="t('Enter wallet name')"
+            required
+          />
+          <div v-if="nameError" class="error-text">{{ t('Wallet name is required.') }}</div>
+          <div v-if="props.apiError" class="error-text">{{ props.apiError }}</div>
+        </div>
+        <div class="icon-col">
+          <TButton
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="icon-trigger"
+            :aria-expanded="showIconPicker"
+            :aria-label="t('Choose icon')"
+            @click="showIconPicker = !showIconPicker"
+          >
+            <component
+              :is="selectedIconComponent"
+              v-if="selectedIconComponent"
+              class="icon-trigger__icon"
+            />
+            <ImagePlus v-else class="icon-trigger__icon" />
+          </TButton>
+        </div>
+      </div>
+
+      <div v-if="showIconPicker" class="icon-popover">
+        <IconPicker v-model="form.icon" @update:model-value="onIconSelected" />
+      </div>
+    </div>
+
+    <div class="two-col-row">
+      <div class="form-group">
+        <label for="wallet-type" class="form-label">{{ t('Wallet Type') }}</label>
+        <select
+          id="wallet-type"
+          v-model="form.type"
+          class="form-select"
+          :class="{ error: typeError }"
+          required
+        >
+          <option value="">{{ t('Select wallet type') }}</option>
+          <option value="bank">{{ t('Bank Account') }}</option>
+          <option value="cash">{{ t('Cash') }}</option>
+          <option value="credit_card">{{ t('Credit Card') }}</option>
+          <option value="mobile">{{ t('Mobile Money') }}</option>
+        </select>
+        <div v-if="typeError" class="error-text">{{ t('Please select a wallet type.') }}</div>
+      </div>
+
+      <div class="form-group">
+        <label for="wallet-currency" class="form-label">{{ t('Currency') }}</label>
+        <select
+          id="wallet-currency"
+          v-model="form.currency"
+          class="form-select"
+          :class="{ error: currencyError }"
+          required
+        >
+          <option value="">{{ t('Select currency') }}</option>
+          <option value="XAF">XAF - {{ t('Central African Franc') }}</option>
+          <option value="USD">USD - {{ t('US Dollar') }}</option>
+          <option value="EUR">EUR - {{ t('Euro') }}</option>
+          <option value="GBP">GBP - {{ t('British Pound') }}</option>
+          <option value="JPY">JPY - {{ t('Japanese Yen') }}</option>
+          <option value="CAD">CAD - {{ t('Canadian Dollar') }}</option>
+          <option value="AUD">AUD - {{ t('Australian Dollar') }}</option>
+          <option value="CHF">CHF - {{ t('Swiss Franc') }}</option>
+          <option value="CNY">CNY - {{ t('Chinese Yuan') }}</option>
+        </select>
+        <div v-if="currencyError" class="error-text">{{ t('Please select a currency.') }}</div>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label for="wallet-balance" class="form-label">{{ t('Initial Balance') }}</label>
+      <input
+        id="wallet-balance"
+        v-model.number="form.balance"
+        type="number"
+        step="0.01"
+        class="form-input"
+        placeholder="0.00"
+      />
+    </div>
+
+    <div class="form-group">
+      <label for="wallet-description" class="form-label">{{ t('Wallet Description') }}</label>
+      <textarea
+        id="wallet-description"
+        v-model="form.description"
+        class="form-textarea"
+        :class="{ error: descriptionError }"
+        :placeholder="t('Type wallet description here...')"
+        rows="5"
+        required
+      />
+      <div v-if="descriptionError" class="error-text">
+        {{ t('Wallet description is required.') }}
+      </div>
+    </div>
+
+    <div class="form-actions">
+      <TButton variant="secondary" :full-width="false" @click="handleFormClose">
+        {{ t('Cancel') }}
+      </TButton>
+      <TButton
+        type="submit"
+        variant="primary"
+        :full-width="false"
+        :disabled="props.isSubmitting"
+      >
+        {{ isEditing ? t('Update Wallet') : t('Create Wallet') }}
+      </TButton>
+    </div>
+  </form>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue';
+import IconPicker from './IconPicker.vue';
+import * as lucideIcons from 'lucide-vue-next';
+import { ImagePlus, X } from 'lucide-vue-next';
+
+import TButton from './TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  editingItem: {
+    type: Object,
+    default: null
+  },
+  apiError: {
+    type: String,
+    default: ''
+  },
+  isSubmitting: {
+    type: Boolean,
+    default: false
+  },
+  defaultCurrency: {
+    type: String,
+    default: 'USD'
+  }
+});
+
+const emit = defineEmits(['created', 'updated', 'close']);
+
+const defaultCurrency = computed(() => props.defaultCurrency || 'USD');
+
+const form = ref({
+  name: '',
+  icon: '',
+  type: '',
+  currency: '',
+  balance: 0,
+  description: ''
+});
+
+const nameError = ref(false);
+const typeError = ref(false);
+const currencyError = ref(false);
+const descriptionError = ref(false);
+const showIconPicker = ref(false);
+
+const selectedIconComponent = computed(() => {
+  const key = form.value.icon;
+  if (key && typeof lucideIcons[key] === 'function') {
+    return lucideIcons[key];
+  }
+  return null;
+});
+
+const isEditing = computed(() => !!props.editingItem);
+
+onMounted(() => {
+  if (!isEditing.value && (!form.value.currency || form.value.currency.trim() === '')) {
+    form.value.currency = defaultCurrency.value;
+  }
+});
+
+// Populate form when editing
+watch(
+  () => props.editingItem,
+  (newItem) => {
+    if (newItem) {
+      // Extract icon value - could be from icon.path, icon.content, or direct icon value
+      let iconValue = '';
+      if (newItem.icon) {
+        if (typeof newItem.icon === 'string') {
+          iconValue = newItem.icon;
+        } else if (newItem.icon.path) {
+          iconValue = newItem.icon.path;
+        } else if (newItem.icon.content) {
+          iconValue = newItem.icon.content;
+        }
+      }
+
+      console.log('Editing wallet:', newItem);
+      console.log('Extracted icon value:', iconValue);
+
+      form.value = {
+        name: newItem.name || '',
+        icon: iconValue,
+        type: newItem.type || '',
+        currency: newItem.currency || '',
+        balance: newItem.balance || 0,
+        description: newItem.description || ''
+      };
+    } else {
+      resetForm();
+    }
+  },
+  { immediate: true }
+);
+
+function resetForm() {
+  form.value = {
+    name: '',
+    icon: '',
+    type: '',
+    currency: defaultCurrency.value,
+    balance: 0,
+    description: ''
+  };
+  nameError.value = false;
+  typeError.value = false;
+  currencyError.value = false;
+  descriptionError.value = false;
+  showIconPicker.value = false;
+}
+
+function validateForm() {
+  let isValid = true;
+
+  // Reset errors
+  nameError.value = false;
+  typeError.value = false;
+  currencyError.value = false;
+  descriptionError.value = false;
+
+  // Validate name
+  if (!form.value.name || form.value.name.trim() === '') {
+    nameError.value = true;
+    isValid = false;
+  }
+
+  // Validate type
+  if (!form.value.type || form.value.type.trim() === '') {
+    typeError.value = true;
+    isValid = false;
+  }
+
+  // Validate currency
+  if (!form.value.currency || form.value.currency.trim() === '') {
+    currencyError.value = true;
+    isValid = false;
+  }
+
+  // Validate description
+  if (!form.value.description || form.value.description.trim() === '') {
+    descriptionError.value = true;
+    isValid = false;
+  }
+
+  return isValid;
+}
+
+function handleSubmit() {
+  if (props.isSubmitting) {
+    return;
+  }
+
+  if (!form.value.currency || form.value.currency.trim() === '') {
+    form.value.currency = defaultCurrency.value;
+  }
+
+  // Validate all fields
+  if (!validateForm()) {
+    return;
+  }
+
+  const formData = {
+    name: form.value.name.trim(),
+    description: form.value.description.trim(),
+    type: form.value.type.trim(),
+    currency: form.value.currency,
+    balance: form.value.balance || 0
+  };
+  if (form.value.icon && form.value.icon.trim() !== '') {
+    formData.icon = form.value.icon;
+    formData.icon_type = 'image';
+  }
+
+  if (isEditing.value) {
+    const updatedItem = {
+      id: props.editingItem.id,
+      ...formData
+    };
+    emit('updated', updatedItem);
+    return;
+  }
+
+  emit('created', formData);
+}
+
+function handleFormClose() {
+  emit('close');
+  resetForm();
+}
+
+function onIconSelected() {
+  showIconPicker.value = false;
+}
+</script>
+
+<style scoped lang="scss">
+@use '../assets/scss/_vars.scss' as *;
+@use '../assets/scss/_form-styles.scss';
+</style>
diff --git a/components/WalletListCard.stories.js b/components/WalletListCard.stories.js
new file mode 100644
index 0000000..24e3c79
--- /dev/null
+++ b/components/WalletListCard.stories.js
@@ -0,0 +1,42 @@
+import WalletListCard from './WalletListCard.vue';
+
+export default {
+  title: 'Domain/Wallets/WalletListCard',
+  component: WalletListCard,
+  args: {
+    wallet: {
+      id: 1,
+      name: 'Primary Checking',
+      currency: 'USD',
+      balance: 5420.5,
+      stats: {
+        total_income: 3500.0,
+        total_expense: 1200.0
+      }
+    },
+    isDefault: false
+  }
+};
+
+export const Default = {};
+
+export const DefaultWalletBadge = {
+  args: {
+    isDefault: true
+  }
+};
+
+export const NegativeBalance = {
+  args: {
+    wallet: {
+      id: 2,
+      name: 'Credit Card',
+      currency: 'USD',
+      balance: -1280.4,
+      stats: {
+        total_income: 500.0,
+        total_expense: 1780.4
+      }
+    }
+  }
+};
diff --git a/components/WalletListCard.vue b/components/WalletListCard.vue
new file mode 100644
index 0000000..0269da1
--- /dev/null
+++ b/components/WalletListCard.vue
@@ -0,0 +1,339 @@
+<template>
+  <div class="wallet-list-card" :class="{ 'is-default': isDefault }">
+    <div class="card-actions">
+      <TDropdown>
+        <template #trigger>
+          <button
+            type="button"
+            class="action-menu"
+            :title="t('More actions')"
+            :aria-label="t('More actions')"
+          >
+            <MoreVertical :size="16" />
+          </button>
+        </template>
+        <div class="dropdown-content">
+          <TDropdownItem class="menu-item--edit" @click="handleEdit">
+            <Edit :size="14" />
+            <span>{{ t('Edit') }}</span>
+          </TDropdownItem>
+          <TDropdownItem class="menu-item--delete" @click="handleDelete">
+            <Trash :size="14" />
+            <span>{{ t('Delete') }}</span>
+          </TDropdownItem>
+        </div>
+      </TDropdown>
+    </div>
+
+    <div class="wallet-icon">
+      <component :is="resolvedIcon" v-if="resolvedIcon" />
+      <Wallet v-else />
+    </div>
+
+    <div class="wallet-header">
+      <h3 class="wallet-name">{{ wallet.name }}</h3>
+      <span v-if="isDefault" class="default-badge">{{ t('Default') }}</span>
+    </div>
+    <span class="wallet-currency">{{ wallet.currency }}</span>
+
+    <div class="balance-section">
+      <span class="balance-label">{{ t('Balance') }}</span>
+      <span class="balance-amount" :class="balanceClass">{{ formattedBalance }}</span>
+    </div>
+
+    <div class="stats-section">
+      <div class="stat income">
+        <ArrowDownLeft class="stat-icon" />
+        <div class="stat-content">
+          <span class="stat-label">{{ t('Income') }}</span>
+          <span class="stat-value">{{ formattedIncome }}</span>
+        </div>
+      </div>
+      <div class="stat expense">
+        <ArrowUpRight class="stat-icon" />
+        <div class="stat-content">
+          <span class="stat-label">{{ t('Expense') }}</span>
+          <span class="stat-value">{{ formattedExpense }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { MoreVertical, Edit, Trash, Wallet, ArrowDownLeft, ArrowUpRight } from 'lucide-vue-next';
+import * as LucideIcons from 'lucide-vue-next';
+import TDropdown from './TDropdown.vue';
+import TDropdownItem from './TDropdownItem.vue';
+import { getCurrencySymbol } from '../utils/currency';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  wallet: {
+    type: Object,
+    required: true
+  },
+  isDefault: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['edit', 'delete']);
+
+const handleEdit = () => {
+  emit('edit', props.wallet);
+};
+
+const handleDelete = () => {
+  emit('delete', props.wallet);
+};
+
+const resolvedIcon = computed(() => {
+  const iconValue = props.wallet.icon?.path || props.wallet.icon?.content || props.wallet.icon;
+  if (!iconValue) return null;
+  return LucideIcons[iconValue] || null;
+});
+
+const formatCurrency = (value) => {
+  if (value == null) return '—';
+  const symbol = getCurrencySymbol(props.wallet.currency);
+  const formatted = new Intl.NumberFormat('en-US', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(Math.abs(value));
+  return `${value < 0 ? '-' : ''}${formatted} ${symbol}`;
+};
+
+const formattedBalance = computed(() => formatCurrency(props.wallet.balance));
+const formattedIncome = computed(() => formatCurrency(props.wallet.stats?.total_income || 0));
+const formattedExpense = computed(() => formatCurrency(props.wallet.stats?.total_expense || 0));
+
+const balanceClass = computed(() => {
+  const balance = props.wallet.balance || 0;
+  if (balance > 0) return 'positive';
+  if (balance < 0) return 'negative';
+  return '';
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../assets/scss/_vars.scss' as *;
+
+.wallet-list-card {
+  background: $bg-white;
+  border-radius: $radius-xl;
+  padding: $spacing-4;
+  box-shadow: $shadow-sm;
+  transition: $duration-base $easing-standard;
+  border: 1px solid $border-light;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  position: relative;
+  min-height: 220px;
+
+  &:hover {
+    box-shadow: $shadow-md;
+    transform: translateY(-2px);
+    border-color: $primary-lighter;
+  }
+
+  &.is-default {
+    border-color: $primary;
+    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.03) 0%, $bg-white 100%);
+  }
+}
+
+.card-actions {
+  position: absolute;
+  top: $spacing-2;
+  right: $spacing-2;
+  z-index: 2;
+}
+
+.action-menu {
+  background: transparent;
+  border: none;
+  padding: 0.5rem;
+  border-radius: $radius-lg;
+  cursor: pointer;
+  color: $text-muted;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: $duration-fast $easing-standard;
+
+  &:hover {
+    background: $bg-gray;
+    color: $text-secondary;
+  }
+}
+
+.dropdown-content {
+  min-width: 7.5rem;
+  padding: $spacing-1 0;
+}
+
+.menu-item--delete {
+  color: $error-color;
+
+  &:hover {
+    background-color: rgba(var(--color-error-rgb), 0.1);
+    color: $error-color;
+  }
+}
+
+.wallet-icon {
+  width: 3rem;
+  height: 3rem;
+  border-radius: $radius-lg;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: $primary;
+  color: white;
+  margin-bottom: $spacing-2;
+
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+}
+
+.wallet-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $spacing-2;
+  margin-bottom: 0.125rem;
+}
+
+.wallet-name {
+  margin: 0;
+  font-size: $font-size-base;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  line-height: 1.2;
+}
+
+.wallet-currency {
+  font-size: $font-size-xs;
+  color: $text-muted;
+  margin-bottom: $spacing-2;
+}
+
+.default-badge {
+  display: inline-flex;
+  align-items: center;
+  background: $primary;
+  color: white;
+  font-size: 0.55rem;
+  font-weight: 700;
+  padding: 2px 5px;
+  border-radius: 3px;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.balance-section {
+  margin-bottom: $spacing-3;
+}
+
+.balance-label {
+  display: block;
+  font-size: 0.625rem;
+  color: $text-muted;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 0.125rem;
+}
+
+.balance-amount {
+  display: block;
+  font-size: 1.25rem;
+  font-weight: $font-bold;
+  color: $text-primary;
+  font-variant-numeric: tabular-nums;
+
+  &.positive {
+    color: $success;
+  }
+
+  &.negative {
+    color: $error-color;
+  }
+}
+
+.stats-section {
+  display: flex;
+  gap: $spacing-2;
+  width: 100%;
+  margin-top: auto;
+  padding-top: $spacing-3;
+  border-top: 1px solid $border-light;
+}
+
+.stat {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+  padding: $spacing-2;
+  border-radius: $radius-md;
+  text-align: left;
+
+  &.income {
+    background: rgba(var(--color-success-rgb), 0.08);
+
+    .stat-icon {
+      color: $success;
+    }
+
+    .stat-value {
+      color: $success;
+    }
+  }
+
+  &.expense {
+    background: rgba(var(--color-error-rgb), 0.08);
+
+    .stat-icon {
+      color: $error-color;
+    }
+
+    .stat-value {
+      color: $error-color;
+    }
+  }
+}
+
+.stat-icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.stat-content {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.stat-label {
+  font-size: 0.5625rem;
+  color: $text-muted;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.stat-value {
+  font-size: $font-size-xs;
+  font-weight: $font-semibold;
+  font-variant-numeric: tabular-nums;
+}
+</style>
diff --git a/components/admin/OutreachComposer.stories.js b/components/admin/OutreachComposer.stories.js
new file mode 100644
index 0000000..e392b9f
--- /dev/null
+++ b/components/admin/OutreachComposer.stories.js
@@ -0,0 +1,17 @@
+import OutreachComposer from './OutreachComposer.vue';
+
+export default {
+  title: 'Domain/Admin/OutreachComposer',
+  component: OutreachComposer,
+  args: {
+    fetchUsers: async () => [
+      { id: 1, first_name: 'Jane', last_name: 'Doe', email: 'jane@example.com' },
+      { id: 2, first_name: 'John', last_name: 'Smith', email: 'john@example.com' }
+    ],
+    uploadMedia: async () => ({ url: 'https://example.com/image.png' }),
+    preview: async () => '<p>Preview</p>',
+    sendOutreach: async () => ({ sent: 2 })
+  }
+};
+
+export const Default = {};
diff --git a/components/admin/OutreachComposer.vue b/components/admin/OutreachComposer.vue
new file mode 100644
index 0000000..5aee927
--- /dev/null
+++ b/components/admin/OutreachComposer.vue
@@ -0,0 +1,712 @@
+<template>
+  <div class="composer">
+    <form class="composer__form" @submit.prevent="onSend">
+      <label class="field">
+        <span class="field__label">{{ t('Subject') }}</span>
+        <input v-model="form.subject" class="field__input" :placeholder="t('Subject')" required />
+      </label>
+
+      <div class="field">
+        <span class="field__label">{{ t('Message') }}</span>
+        <div class="md-toolbar">
+          <TButton
+            v-for="f in formats"
+            :key="f.label"
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="md-btn"
+            :title="t(f.label)"
+            @click="f.action()"
+          >
+            <component :is="f.icon" class="md-btn__icon" />
+          </TButton>
+        </div>
+        <textarea
+          ref="bodyRef"
+          v-model="form.body"
+          class="field__textarea"
+          rows="8"
+          :placeholder="t('Write your message. Markdown is supported.')"
+          required
+        />
+      </div>
+
+      <div class="field">
+        <span class="field__label">{{ t('Header image') }}</span>
+        <div v-if="form.image_url" class="media">
+          <img :src="form.image_url" class="media__thumb" alt="" />
+          <TButton variant="text" :full-width="false" class="media__remove" @click="form.image_url = ''">
+            {{ t('Remove') }}
+          </TButton>
+        </div>
+        <label v-else class="upload">
+          <ImageIcon class="upload__icon" />
+          <span>{{ imageUploading ? t('Uploading...') : t('Add a campaign image') }}</span>
+          <input type="file" accept="image/*" class="upload__input" @change="onImage" />
+        </label>
+      </div>
+
+      <div class="tokens">
+        <span class="tokens__hint">{{ t('Personalize with:') }}</span>
+        <TButton
+          v-for="token in tokens"
+          :key="token"
+          variant="text"
+          size="small"
+          :full-width="false"
+          class="token"
+          @click="insertToken(token)"
+        >
+          {{ token }}
+        </TButton>
+      </div>
+
+      <div class="cta-row">
+        <label class="field">
+          <span class="field__label">{{ t('Button label') }}</span>
+          <input
+            v-model="form.cta_label"
+            class="field__input"
+            :placeholder="t('e.g. Open Trakli')"
+          />
+        </label>
+        <label class="field">
+          <span class="field__label">{{ t('Button link') }}</span>
+          <input v-model="form.cta_url" class="field__input" placeholder="https://" />
+        </label>
+      </div>
+
+      <label class="field">
+        <span class="field__label">{{ t('Audience') }}</span>
+        <select v-model="form.audience" class="field__input">
+          <option v-for="opt in audiences" :key="opt.value" :value="opt.value">
+            {{ opt.label }}
+          </option>
+        </select>
+      </label>
+
+      <div v-if="form.audience === 'specific'" class="field">
+        <span class="field__label">{{ t('Choose recipients') }}</span>
+        <input v-model="userQuery" class="field__input" :placeholder="t('Search users')" />
+        <div class="recipients">
+          <label v-for="u in filteredUsers" :key="u.id" class="recipient">
+            <input v-model="form.user_ids" type="checkbox" :value="u.id" />
+            <span class="recipient__text"
+              >{{ u.first_name }} {{ u.last_name }} · {{ u.email }}</span
+            >
+          </label>
+          <p v-if="!filteredUsers.length" class="recipients__empty">{{ t('No matches') }}</p>
+        </div>
+      </div>
+
+      <div class="field">
+        <span class="field__label">{{ t('Attachments') }}</span>
+        <label class="upload upload--slim">
+          <PaperclipIcon class="upload__icon" />
+          <span>{{ t('Attach files') }}</span>
+          <input type="file" multiple class="upload__input" @change="onFiles" />
+        </label>
+        <ul v-if="form.files.length" class="attach-list">
+          <li v-for="(file, i) in form.files" :key="i" class="attach-item">
+            <span class="attach-item__name">{{ file.name }}</span>
+            <TButton
+              variant="text"
+              size="small"
+              :full-width="false"
+              class="attach-item__remove"
+              @click="removeFile(i)"
+            >×</TButton>
+          </li>
+        </ul>
+      </div>
+
+      <div v-if="confirming" class="confirm">
+        <p class="confirm__text">{{ confirmText }}</p>
+        <div class="confirm__actions">
+          <TButton
+            :text="t('Cancel')"
+            variant="outline"
+            size="small"
+            :full-width="false"
+            @click="confirming = false"
+          />
+          <TButton
+            :text="t('Send now')"
+            size="small"
+            :full-width="false"
+            :loading="sending"
+            @click="send"
+          />
+        </div>
+      </div>
+      <div v-else class="composer__actions">
+        <TButton
+          type="submit"
+          :text="form.audience === 'test' ? t('Send test to me') : t('Send')"
+          :full-width="false"
+          :loading="sending"
+        />
+      </div>
+    </form>
+
+    <aside class="preview">
+      <span class="preview__tag">{{ t('Live preview') }}</span>
+      <div class="preview__frame">
+        <iframe
+          v-if="previewHtml"
+          :srcdoc="previewHtml"
+          class="preview__iframe"
+          sandbox=""
+          :title="t('Live preview')"
+        />
+        <p v-else class="preview__empty">{{ t('Start typing to preview the email.') }}</p>
+      </div>
+    </aside>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import {
+  Image as ImageIcon,
+  Paperclip as PaperclipIcon,
+  Bold as BoldIcon,
+  Italic as ItalicIcon,
+  Heading2 as HeadingIcon,
+  List as ListIcon,
+  ListOrdered as ListOrderedIcon,
+  Link2 as LinkIcon
+} from 'lucide-vue-next';
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+const props = defineProps({
+  fetchUsers: { type: Function, default: null },
+  uploadMedia: { type: Function, default: null },
+  preview: { type: Function, default: null },
+  sendOutreach: { type: Function, default: null }
+});
+
+const emit = defineEmits(['sent', 'success', 'error']);
+
+const showSuccess = (msg) => emit('success', msg);
+const showError = (msg) => emit('error', msg);
+
+const tokens = ['{{first_name}}', '{{last_name}}', '{{name}}', '{{email}}'];
+
+const form = reactive({
+  subject: '',
+  body: '',
+  cta_label: '',
+  cta_url: '',
+  image_url: '',
+  audience: 'all' as OutreachAudience,
+  user_ids: [] as number[],
+  files: [] as File[]
+});
+
+const audiences = [
+  { value: 'all', label: t('All users') },
+  { value: 'active', label: t('Active users') },
+  { value: 'inactive', label: t('Inactive users') },
+  { value: 'specific', label: t('Specific users') },
+  { value: 'test', label: t('Send test to me') }
+];
+
+const sending = ref(false);
+const confirming = ref(false);
+const imageUploading = ref(false);
+
+const users = ref<AdminUser[]>([]);
+const userQuery = ref('');
+const filteredUsers = computed(() => {
+  const q = userQuery.value.trim().toLowerCase();
+  const list = users.value;
+  if (!q) return list.slice(0, 50);
+  return list
+    .filter((u) => `${u.first_name} ${u.last_name} ${u.email}`.toLowerCase().includes(q))
+    .slice(0, 50);
+});
+
+onMounted(async () => {
+  try {
+    users.value = props.fetchUsers ? await props.fetchUsers() : [];
+  } catch {
+    users.value = [];
+  }
+});
+
+const onImage = async (event: Event) => {
+  const file = (event.target as HTMLInputElement).files?.[0];
+  if (!file) return;
+  imageUploading.value = true;
+  try {
+    const { url } = props.uploadMedia ? await props.uploadMedia(file) : {};
+    form.image_url = url;
+  } catch {
+    showError(t('Could not upload the image.'));
+  } finally {
+    imageUploading.value = false;
+  }
+};
+
+const onFiles = (event: Event) => {
+  const picked = Array.from((event.target as HTMLInputElement).files ?? []);
+  form.files = [...form.files, ...picked];
+};
+
+const removeFile = (index: number) => {
+  form.files.splice(index, 1);
+};
+
+const previewHtml = ref('');
+let previewTimer: ReturnType<typeof setTimeout> | null = null;
+
+const fetchPreview = async () => {
+  if (!form.subject && !form.body && !form.image_url) {
+    previewHtml.value = '';
+    return;
+  }
+  try {
+    previewHtml.value = props.preview
+      ? await props.preview({
+          subject: form.subject,
+          body: form.body,
+          cta_label: form.cta_label || undefined,
+          cta_url: form.cta_url || undefined,
+          image_url: form.image_url || undefined
+        })
+      : '';
+  } catch {
+    // Keep the last good preview rather than blanking on a transient error.
+  }
+};
+
+watch(
+  () => [form.subject, form.body, form.cta_label, form.cta_url, form.image_url],
+  () => {
+    if (previewTimer) clearTimeout(previewTimer);
+    previewTimer = setTimeout(fetchPreview, 500);
+  }
+);
+
+onBeforeUnmount(() => {
+  if (previewTimer) clearTimeout(previewTimer);
+});
+
+const confirmText = computed(() => {
+  const label = audiences.find((a) => a.value === form.audience)?.label ?? '';
+  return t('This will email {audience}. Personalized per recipient.', { audience: label });
+});
+
+const insertToken = (token: string) => {
+  form.body = `${form.body}${form.body.endsWith(' ') || !form.body ? '' : ' '}${token} `;
+};
+
+const bodyRef = ref<HTMLTextAreaElement | null>(null);
+
+const surround = (before: string, after: string) => {
+  const el = bodyRef.value;
+  if (!el) return;
+  const start = el.selectionStart;
+  const end = el.selectionEnd;
+  const selected = form.body.slice(start, end);
+  form.body = form.body.slice(0, start) + before + selected + after + form.body.slice(end);
+  nextTick(() => {
+    el.focus();
+    el.selectionStart = start + before.length;
+    el.selectionEnd = end + before.length;
+  });
+};
+
+const prefixLines = (prefix: string) => {
+  const el = bodyRef.value;
+  if (!el) return;
+  const lineStart = form.body.lastIndexOf('\n', el.selectionStart - 1) + 1;
+  const block = form.body.slice(lineStart, el.selectionEnd);
+  const replaced = block
+    .split('\n')
+    .map((line, i) => (prefix === '1. ' ? `${i + 1}. ${line}` : `${prefix}${line}`))
+    .join('\n');
+  form.body = form.body.slice(0, lineStart) + replaced + form.body.slice(el.selectionEnd);
+  nextTick(() => el.focus());
+};
+
+const formats = [
+  { label: 'Bold', icon: BoldIcon, action: () => surround('**', '**') },
+  { label: 'Italic', icon: ItalicIcon, action: () => surround('*', '*') },
+  { label: 'Heading', icon: HeadingIcon, action: () => prefixLines('## ') },
+  { label: 'Bullet list', icon: ListIcon, action: () => prefixLines('- ') },
+  { label: 'Numbered list', icon: ListOrderedIcon, action: () => prefixLines('1. ') },
+  { label: 'Link', icon: LinkIcon, action: () => surround('[', '](https://)') }
+];
+
+const onSend = () => {
+  if (form.audience === 'specific' && !form.user_ids.length) {
+    showError(t('Pick at least one recipient.'));
+    return;
+  }
+  if (form.audience === 'test') {
+    send();
+  } else {
+    confirming.value = true;
+  }
+};
+
+const normalizeUrl = (url: string): string => (/^https?:\/\//i.test(url) ? url : `https://${url}`);
+
+const send = async () => {
+  sending.value = true;
+  try {
+    const { sent } = props.sendOutreach
+      ? await props.sendOutreach({
+          subject: form.subject,
+          body: form.body,
+          cta_label: form.cta_label || undefined,
+          cta_url: form.cta_url ? normalizeUrl(form.cta_url) : undefined,
+          image_url: form.image_url || undefined,
+          audience: form.audience,
+          user_ids: form.user_ids,
+          files: form.files
+        })
+      : { sent: 0 };
+    showSuccess(t('Sent to {count} recipients', { count: sent }));
+    confirming.value = false;
+    emit('sent');
+  } catch (e: unknown) {
+    const message = (e as { data?: { message?: string } })?.data?.message;
+    showError(message || t('Could not send the outreach.'));
+    confirming.value = false;
+  } finally {
+    sending.value = false;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.composer {
+  display: grid;
+  grid-template-columns: 1.4fr 1fr;
+  gap: 1.5rem;
+  align-items: start;
+
+  @media (max-width: $breakpoint-md) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.composer__form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.field__label {
+  font-size: $font-size-xs;
+  font-weight: $font-semibold;
+  color: $text-secondary;
+}
+
+.field__input,
+.field__textarea {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid $border-color;
+  border-radius: $radius-lg;
+  padding: 0.6rem 0.75rem;
+  font-size: $font-size-sm;
+  font-family: inherit;
+  color: $text-primary;
+  background: $bg-white;
+
+  &:focus {
+    outline: none;
+    border-color: $primary;
+  }
+}
+
+.field__textarea {
+  resize: vertical;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.md-toolbar {
+  display: flex;
+  gap: 0.15rem;
+  padding: 0.3rem 0.4rem;
+  border: 1px solid $border-color;
+  border-bottom: none;
+  border-radius: $radius-lg $radius-lg 0 0;
+  background: $bg-light;
+}
+
+.md-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: $radius-md;
+  background: transparent;
+  color: $text-secondary;
+  cursor: pointer;
+
+  &:hover {
+    background: $bg-white;
+    color: $primary;
+  }
+}
+
+.md-btn__icon {
+  width: 15px;
+  height: 15px;
+}
+
+.tokens {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+.tokens__hint {
+  font-size: $font-size-xs;
+  color: $text-muted;
+}
+
+.token {
+  border: 1px solid $border-color;
+  background: $bg-light;
+  border-radius: $radius-md;
+  padding: 0.2rem 0.5rem;
+  font-size: $font-size-xs;
+  font-family: monospace;
+  color: $primary-dark;
+  cursor: pointer;
+
+  &:hover {
+    border-color: $primary;
+  }
+}
+
+.cta-row {
+  display: grid;
+  grid-template-columns: 1fr 1.3fr;
+  gap: 0.75rem;
+
+  @media (max-width: $breakpoint-sm) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.composer__actions {
+  display: flex;
+}
+
+.confirm {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  padding: 0.9rem 1rem;
+  background: $warning-bg;
+  border-radius: $radius-lg;
+}
+
+.confirm__text {
+  margin: 0;
+  font-size: $font-size-sm;
+  color: $warning-text;
+}
+
+.confirm__actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.preview {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  position: sticky;
+  top: 1rem;
+}
+
+.preview__tag {
+  font-size: $font-size-xs;
+  font-weight: $font-semibold;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: $text-muted;
+}
+
+.preview__frame {
+  border: 1px solid $border-color;
+  border-radius: $radius-xl;
+  background: $bg-white;
+  overflow: hidden;
+  box-shadow: $elevation-1;
+  min-height: 320px;
+}
+
+.preview__iframe {
+  display: block;
+  width: 100%;
+  height: 520px;
+  border: none;
+}
+
+.preview__empty {
+  margin: 0;
+  padding: 2.5rem 1.5rem;
+  text-align: center;
+  color: $text-muted;
+  font-size: $font-size-sm;
+}
+
+.upload {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.85rem 1rem;
+  border: 1px dashed $border-color;
+  border-radius: $radius-lg;
+  color: $text-secondary;
+  font-size: $font-size-sm;
+  cursor: pointer;
+
+  &:hover {
+    border-color: $primary;
+    color: $primary;
+  }
+
+  &--slim {
+    padding: 0.6rem 0.85rem;
+  }
+}
+
+.upload__icon {
+  width: 17px;
+  height: 17px;
+}
+
+.upload__input {
+  display: none;
+}
+
+.media {
+  position: relative;
+  border-radius: $radius-lg;
+  overflow: hidden;
+  border: 1px solid $border-color;
+}
+
+.media__thumb {
+  display: block;
+  width: 100%;
+  max-height: 180px;
+  object-fit: cover;
+}
+
+.media__remove {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  border: none;
+  border-radius: $radius-md;
+  padding: 0.3rem 0.6rem;
+  font-size: $font-size-xs;
+  font-weight: $font-semibold;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  cursor: pointer;
+}
+
+.recipients {
+  margin-top: 0.4rem;
+  max-height: 180px;
+  overflow-y: auto;
+  border: 1px solid $border-color;
+  border-radius: $radius-lg;
+  padding: 0.4rem;
+}
+
+.recipient {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.35rem 0.4rem;
+  font-size: $font-size-sm;
+  color: $text-primary;
+  cursor: pointer;
+  border-radius: $radius-md;
+
+  &:hover {
+    background: $bg-light;
+  }
+}
+
+.recipient__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.recipients__empty {
+  margin: 0;
+  padding: 0.6rem;
+  color: $text-muted;
+  font-size: $font-size-sm;
+}
+
+.attach-list {
+  list-style: none;
+  margin: 0.5rem 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.attach-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.35rem 0.6rem;
+  background: $bg-light;
+  border-radius: $radius-md;
+  font-size: $font-size-sm;
+}
+
+.attach-item__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.attach-item__remove {
+  border: none;
+  background: transparent;
+  color: $text-muted;
+  font-size: 1.1rem;
+  line-height: 1;
+  cursor: pointer;
+
+  &:hover {
+    color: $error-color;
+  }
+}
+</style>
diff --git a/components/admin/UserDetail.stories.js b/components/admin/UserDetail.stories.js
new file mode 100644
index 0000000..ae00b62
--- /dev/null
+++ b/components/admin/UserDetail.stories.js
@@ -0,0 +1,31 @@
+import UserDetail from './UserDetail.vue';
+
+export default {
+  title: 'Domain/Admin/UserDetail',
+  component: UserDetail,
+  args: {
+    userId: 1,
+    fetchDetail: async () => ({
+      user: {
+        id: 1,
+        first_name: 'Jane',
+        last_name: 'Doe',
+        email: 'jane@example.com',
+        is_admin: true,
+        created_at: '2024-01-15T00:00:00Z'
+      },
+      preferences: { country: 'US', language: 'en', currency: 'USD' },
+      last_transaction_at: '2024-03-24T10:30:00Z',
+      counts: {
+        transactions: 42,
+        wallets: 3,
+        categories: 12,
+        parties: 8,
+        groups: 2,
+        budgets: 4
+      }
+    })
+  }
+};
+
+export const Default = {};
diff --git a/components/admin/UserDetail.vue b/components/admin/UserDetail.vue
new file mode 100644
index 0000000..777e710
--- /dev/null
+++ b/components/admin/UserDetail.vue
@@ -0,0 +1,253 @@
+<template>
+  <div class="detail">
+    <TButton
+      variant="text"
+      size="small"
+      :full-width="false"
+      class="link-back"
+      @click="$emit('back')"
+    >
+      <ArrowLeft class="link-back__icon" />{{ t('Back to users') }}
+    </TButton>
+
+    <div v-if="loading" class="state">{{ t('Loading...') }}</div>
+    <p v-else-if="error" class="state">{{ error }}</p>
+
+    <template v-else-if="detail">
+      <header class="detail__head">
+        <span class="avatar">{{ initials }}</span>
+        <div class="detail__id">
+          <h1 class="detail__name">{{ detail.user.first_name }} {{ detail.user.last_name }}</h1>
+          <p class="detail__email">{{ detail.user.email }}</p>
+        </div>
+        <span v-if="detail.user.is_admin" class="admin-tag">{{ t('Admin') }}</span>
+      </header>
+
+      <TCard>
+        <template #header>{{ t('Profile') }}</template>
+        <dl class="facts">
+          <div class="fact">
+            <dt>{{ t('Joined') }}</dt>
+            <dd>{{ fmtDate(detail.user.created_at) }}</dd>
+          </div>
+          <div class="fact">
+            <dt>{{ t('Country') }}</dt>
+            <dd>{{ detail.preferences.country || '-' }}</dd>
+          </div>
+          <div class="fact">
+            <dt>{{ t('Language') }}</dt>
+            <dd>{{ detail.preferences.language || '-' }}</dd>
+          </div>
+          <div class="fact">
+            <dt>{{ t('Currency') }}</dt>
+            <dd>{{ detail.preferences.currency || '-' }}</dd>
+          </div>
+          <div class="fact">
+            <dt>{{ t('Last transaction') }}</dt>
+            <dd>{{ detail.last_transaction_at ? fmtDate(detail.last_transaction_at) : '-' }}</dd>
+          </div>
+        </dl>
+      </TCard>
+
+      <div class="counts">
+        <div v-for="item in countItems" :key="item.key" class="count">
+          <span class="count__value">{{ item.value }}</span>
+          <span class="count__label">{{ t(item.label) }}</span>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue';
+import { ArrowLeft } from 'lucide-vue-next';
+import TCard from '../TCard.vue';
+
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  userId: { type: Number, required: true },
+  fetchDetail: { type: Function, default: null }
+});
+defineEmits(['back']);
+
+const detail = ref(null);
+const loading = ref(true);
+const error = ref('');
+
+const labels = {
+  transactions: 'Transactions',
+  wallets: 'Wallets',
+  categories: 'Categories',
+  parties: 'Parties',
+  groups: 'Groups',
+  budgets: 'Budgets'
+};
+
+const countItems = computed(() =>
+  Object.entries(detail.value?.counts ?? {}).map(([key, value]) => ({
+    key,
+    value,
+    label: labels[key] ?? key
+  }))
+);
+
+const initials = computed(() => {
+  const u = detail.value?.user;
+  return `${u?.first_name?.[0] ?? ''}${u?.last_name?.[0] ?? ''}`.toUpperCase() || '?';
+});
+
+const fmtDate = (iso) => (iso ? new Date(iso).toLocaleDateString() : '');
+
+const load = async () => {
+  loading.value = true;
+  error.value = '';
+  try {
+    detail.value = props.fetchDetail ? await props.fetchDetail(props.userId) : null;
+  } catch {
+    error.value = t('Could not load this user.');
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(load);
+watch(() => props.userId, load);
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.detail {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.link-back {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  border: none;
+  background: transparent;
+  color: $text-secondary;
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  cursor: pointer;
+
+  &:hover {
+    color: $primary;
+  }
+}
+
+.link-back__icon {
+  width: 16px;
+  height: 16px;
+}
+
+.detail__head {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: $primary-light;
+  color: $primary-dark;
+  font-weight: $font-bold;
+  font-size: 1.2rem;
+}
+
+.detail__name {
+  margin: 0;
+  font-size: 1.4rem;
+  font-weight: $font-bold;
+  color: $text-primary;
+}
+
+.detail__email {
+  margin: 0.1rem 0 0;
+  color: $text-muted;
+  font-size: $font-size-sm;
+}
+
+.admin-tag {
+  margin-left: auto;
+  padding: 0.2rem 0.6rem;
+  border-radius: $radius-md;
+  background: $primary-light;
+  color: $primary-dark;
+  font-size: $font-size-xs;
+  font-weight: $font-semibold;
+}
+
+.facts {
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 1rem;
+}
+
+.fact {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+
+  dt {
+    font-size: $font-size-xs;
+    color: $text-muted;
+  }
+
+  dd {
+    margin: 0;
+    font-size: $font-size-sm;
+    font-weight: $font-semibold;
+    color: $text-primary;
+  }
+}
+
+.counts {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 1rem;
+}
+
+.count {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 1rem;
+  background: $bg-white;
+  border: 1px solid $border-color;
+  border-radius: $radius-xl;
+  box-shadow: $elevation-1;
+}
+
+.count__value {
+  font-size: 1.5rem;
+  font-weight: $font-bold;
+  color: $text-primary;
+}
+
+.count__label {
+  font-size: $font-size-xs;
+  color: $text-muted;
+}
+
+.state {
+  padding: 2rem;
+  text-align: center;
+  color: $text-muted;
+}
+</style>
diff --git a/components/ai/TypingDots.stories.js b/components/ai/TypingDots.stories.js
new file mode 100644
index 0000000..8e9f5c7
--- /dev/null
+++ b/components/ai/TypingDots.stories.js
@@ -0,0 +1,8 @@
+import TypingDots from './TypingDots.vue';
+
+export default {
+  title: 'Primitives/TypingDots',
+  component: TypingDots,
+};
+
+export const Default = {};
diff --git a/components/ai/TypingDots.vue b/components/ai/TypingDots.vue
new file mode 100644
index 0000000..4e12d4f
--- /dev/null
+++ b/components/ai/TypingDots.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="typing-dots" aria-label="AI is thinking">
+    <span />
+    <span />
+    <span />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.typing-dots {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 0;
+
+  span {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: $primary;
+    animation: typing-bounce 1.2s infinite ease-in-out both;
+    opacity: 0.4;
+
+    &:nth-child(2) {
+      animation-delay: 0.15s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: 0.3s;
+    }
+  }
+}
+
+@keyframes typing-bounce {
+  0%,
+  80%,
+  100% {
+    transform: translateY(0);
+    opacity: 0.4;
+  }
+  40% {
+    transform: translateY(-4px);
+    opacity: 1;
+  }
+}
+</style>
diff --git a/components/auth/AuthCarousel.stories.js b/components/auth/AuthCarousel.stories.js
new file mode 100644
index 0000000..4e9c69b
--- /dev/null
+++ b/components/auth/AuthCarousel.stories.js
@@ -0,0 +1,13 @@
+import AuthCarousel from './AuthCarousel.vue';
+
+export default {
+  title: 'Auth/AuthCarousel',
+  component: AuthCarousel,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: { default: 'dark', values: [{ name: 'dark', value: '#1a1a2e' }] }
+  }
+};
+
+export const Default = {};
diff --git a/components/auth/AuthCarousel.vue b/components/auth/AuthCarousel.vue
new file mode 100644
index 0000000..dd902ff
--- /dev/null
+++ b/components/auth/AuthCarousel.vue
@@ -0,0 +1,226 @@
+<template>
+  <div class="login-sidebar">
+    <div class="sidebar-content">
+      <div v-if="activeSlides.length" class="carousel-slide">
+        <slot name="slide" :slide="activeSlides[currentSlide]" :index="currentSlide">
+          <div
+            class="slide-image-wrapper"
+            :class="{ 'slide-image-wrapper--art': activeSlides[currentSlide]?.image }"
+          >
+            <transition name="fade" mode="out-in">
+              <img
+                v-if="activeSlides[currentSlide]?.image"
+                :key="`art-${currentSlide}`"
+                :src="activeSlides[currentSlide].image"
+                class="slide-art"
+                alt=""
+              />
+              <component
+                v-else-if="activeSlides[currentSlide]?.icon"
+                :is="activeSlides[currentSlide].icon"
+                :key="currentSlide"
+                class="slide-icon"
+              />
+            </transition>
+          </div>
+          <div class="sidebar-text">
+            <transition name="fade" mode="out-in">
+              <div v-if="activeSlides[currentSlide]" :key="currentSlide" class="text-content">
+                <h2>{{ activeSlides[currentSlide].title }}</h2>
+                <p>{{ activeSlides[currentSlide].text }}</p>
+              </div>
+            </transition>
+          </div>
+        </slot>
+        <div class="carousel-dots">
+          <span
+            v-for="(_, index) in activeSlides"
+            :key="index"
+            :class="['dot', { active: currentSlide === index }]"
+            @click="currentSlide = index"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import { Wand2 as IconAI, ArrowLeftRight as IconIntegrations, Download as IconImport } from 'lucide-vue-next';
+import defaultFloatingMan from '../../assets/floating-docs-man.svg';
+
+const props = defineProps({
+  slides: {
+    type: Array,
+    default: null
+  },
+  interval: {
+    type: Number,
+    default: 5000
+  }
+});
+
+// Optional useI18n fallback if available in consumer context
+const t = typeof useI18n === 'function' ? useI18n().t : (k) => k;
+const currentSlide = ref(0);
+
+const defaultSlides = computed(() => [
+  {
+    title: t('carousel.ai.title') !== 'carousel.ai.title' ? t('carousel.ai.title') : 'Just ask',
+    text: t('carousel.ai.text') !== 'carousel.ai.text' ? t('carousel.ai.text') : 'Log expenses, build reports and get answers by chatting with your assistant in plain language.',
+    icon: IconAI
+  },
+  {
+    title: t('carousel.integrations.title') !== 'carousel.integrations.title' ? t('carousel.integrations.title') : 'Connect your bank',
+    text: t('carousel.integrations.text') !== 'carousel.integrations.text' ? t('carousel.integrations.text') : 'Link accounts with Plaid and import statements, so your transactions flow in on their own.',
+    icon: IconIntegrations
+  },
+  {
+    title: t('carousel.import.title') !== 'carousel.import.title' ? t('carousel.import.title') : 'Import anything',
+    text: t('carousel.import.text') !== 'carousel.import.text' ? t('carousel.import.text') : 'Drop in a statement in any format and the assistant reads it, structured or not, into clean transactions.',
+    icon: IconImport
+  },
+  {
+    title: t('carousel.welcome.title') !== 'carousel.welcome.title' ? t('carousel.welcome.title') : "Sit back, we've got this",
+    text: t('carousel.welcome.text') !== 'carousel.welcome.text' ? t('carousel.welcome.text') : 'You handle life. Trakli wrangles the receipts, the math and the mess. Welcome aboard!',
+    image: defaultFloatingMan
+  }
+]);
+
+const activeSlides = computed(() => (props.slides && props.slides.length ? props.slides : defaultSlides.value));
+
+let slideInterval;
+
+const startSlideShow = () => {
+  if (props.interval <= 0) return;
+  slideInterval = setInterval(() => {
+    if (activeSlides.value.length) {
+      currentSlide.value = (currentSlide.value + 1) % activeSlides.value.length;
+    }
+  }, props.interval);
+};
+
+onMounted(startSlideShow);
+onBeforeUnmount(() => clearInterval(slideInterval));
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.login-sidebar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  padding: 40px;
+}
+
+.sidebar-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  max-width: 440px;
+  width: 100%;
+  text-align: center;
+}
+
+.carousel-slide {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.slide-image-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 240px;
+  margin-bottom: 32px;
+
+  &--art {
+    height: 260px;
+  }
+}
+
+.slide-icon {
+  width: 140px;
+  height: 140px;
+  color: $primary;
+}
+
+.slide-art {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+}
+
+.sidebar-text {
+  min-height: 110px;
+  margin-bottom: 24px;
+  width: 100%;
+
+  .text-content {
+    h2 {
+      font-size: 22px;
+      font-weight: 700;
+      color: $text-primary;
+      margin-bottom: 10px;
+      letter-spacing: -0.01em;
+    }
+
+    p {
+      font-size: 14px;
+      line-height: 1.55;
+      color: $text-muted;
+      margin: 0;
+    }
+  }
+}
+
+.carousel-dots {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  align-items: center;
+
+  .dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 4px;
+    background-color: rgba(var(--color-primary-rgb), 0.2);
+    cursor: pointer;
+    transition: all 0.25s ease;
+
+    &.active {
+      width: 24px;
+      background-color: $primary;
+    }
+
+    &:hover:not(.active) {
+      background-color: rgba(var(--color-primary-rgb), 0.4);
+    }
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.fade-enter-from {
+  opacity: 0;
+  transform: translateY(8px);
+}
+
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+</style>
diff --git a/components/auth/AuthDivider.stories.js b/components/auth/AuthDivider.stories.js
new file mode 100644
index 0000000..2b579d7
--- /dev/null
+++ b/components/auth/AuthDivider.stories.js
@@ -0,0 +1,17 @@
+import AuthDivider from './AuthDivider.vue';
+
+export default {
+  title: 'Primitives/AuthDivider',
+  component: AuthDivider,
+};
+
+export const Default = {};
+export const InCard = {
+  render: () => ({
+    components: { AuthDivider },
+    template: `
+      <div style="max-width:400px; border:1px solid var(--color-border); padding:24px; border-radius:12px;">
+        <AuthDivider />
+      </div>`,
+  }),
+};
diff --git a/components/auth/AuthDivider.vue b/components/auth/AuthDivider.vue
new file mode 100644
index 0000000..62a4b82
--- /dev/null
+++ b/components/auth/AuthDivider.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="separator">
+    <TDivider orientation="horizontal" class="divider-line" />
+    <span class="text">OR</span>
+    <TDivider orientation="horizontal" class="divider-line" />
+  </div>
+</template>
+
+<script setup>
+import TDivider from '../TDivider.vue';
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.separator {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  margin: 1.5rem 0;
+  color: $text-muted;
+
+  .divider-line {
+    flex-grow: 1;
+    background-color: $border-light;
+  }
+
+  .text {
+    padding: 0 1rem;
+    font-size: $font-size-sm;
+    font-weight: $font-medium;
+  }
+}
+</style>
diff --git a/components/auth/AuthSocialLogin.stories.js b/components/auth/AuthSocialLogin.stories.js
new file mode 100644
index 0000000..151638e
--- /dev/null
+++ b/components/auth/AuthSocialLogin.stories.js
@@ -0,0 +1,13 @@
+import AuthSocialLogin from './AuthSocialLogin.vue';
+
+export default {
+  title: 'Auth/AuthSocialLogin',
+  component: AuthSocialLogin,
+  tags: ['autodocs'],
+  argTypes: {
+    mode: { control: 'select', options: ['login', 'signup'] }
+  }
+};
+
+export const Login  = { args: { mode: 'login' } };
+export const Signup = { args: { mode: 'signup' } };
diff --git a/components/auth/AuthSocialLogin.vue b/components/auth/AuthSocialLogin.vue
new file mode 100644
index 0000000..6d3805d
--- /dev/null
+++ b/components/auth/AuthSocialLogin.vue
@@ -0,0 +1,47 @@
+<script setup>
+import TButton from '../TButton.vue';
+import GoogleIcon from '../icons/GoogleIcon.vue';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    default: 'login',
+    validator: (value) => ['login', 'signup'].includes(value)
+  }
+});
+
+const api = useApi();
+const state = useCookie('state');
+
+const { t } = useI18n();
+
+const handleGoogleLogin = async () => {
+  try {
+    const newState = Math.random().toString(36).substring(2);
+    state.value = newState;
+
+    const response = await api('oauth/google/login', {
+      method: 'GET',
+      query: { state: newState }
+    });
+    if (response.data.url) {
+      window.location.href = response.data.url;
+    }
+  } catch (error) {
+    console.error('Failed to get Google redirect URL', error);
+  }
+};
+</script>
+
+<template>
+  <TButton type="button" variant="secondary" class="w-full btn-google" @click="handleGoogleLogin">
+    <template #left-icon>
+      <GoogleIcon />
+    </template>
+    {{ props.mode === 'login' ? t('Sign in with Google') : t('Sign up with Google') }}
+  </TButton>
+</template>
+
+<style lang="scss" scoped>
+// .btn-google accent styles are provided by the host app's auth.scss
+</style>
diff --git a/components/budgets/BudgetCard.stories.js b/components/budgets/BudgetCard.stories.js
new file mode 100644
index 0000000..984d744
--- /dev/null
+++ b/components/budgets/BudgetCard.stories.js
@@ -0,0 +1,80 @@
+import BudgetCard from './BudgetCard.vue';
+
+export default {
+  title: 'Domain/Budgets/BudgetCard',
+  component: BudgetCard,
+  args: {
+    budget: {
+      id: 1,
+      name: 'Groceries & Household',
+      amount: 600,
+      currency: 'USD',
+      period_type: 'monthly',
+      start_date: '2024-01-01',
+      targets: [
+        { type: 'category', id: 10, name: 'Groceries' },
+        { type: 'category', id: 11, name: 'Cleaning Supplies' }
+      ],
+      progress: {
+        period_start: 'Jan 1',
+        period_end: 'Jan 31',
+        limit: 600,
+        gross_spent: 340,
+        refunds: 20,
+        net_spent: 320,
+        effective_limit: 600,
+        remaining: 280,
+        percent_used: 53.3,
+        status: 'on_track'
+      }
+    }
+  }
+};
+
+export const OnTrack = {};
+
+export const NearLimit = {
+  args: {
+    budget: {
+      id: 2,
+      name: 'Dining & Entertainment',
+      amount: 400,
+      currency: 'USD',
+      period_type: 'monthly',
+      start_date: '2024-01-01',
+      targets: [{ type: 'category', id: 12, name: 'Restaurants' }],
+      progress: {
+        period_start: 'Jan 1',
+        limit: 400,
+        net_spent: 350,
+        effective_limit: 400,
+        remaining: 50,
+        percent_used: 87.5,
+        status: 'near_limit'
+      }
+    }
+  }
+};
+
+export const OverBudget = {
+  args: {
+    budget: {
+      id: 3,
+      name: 'Shopping & Gear',
+      amount: 300,
+      currency: 'USD',
+      period_type: 'monthly',
+      start_date: '2024-01-01',
+      targets: [{ type: 'category', id: 14, name: 'Electronics' }],
+      progress: {
+        period_start: 'Jan 1',
+        limit: 300,
+        net_spent: 380,
+        effective_limit: 300,
+        remaining: -80,
+        percent_used: 126.7,
+        status: 'over_budget'
+      }
+    }
+  }
+};
diff --git a/components/budgets/BudgetCard.vue b/components/budgets/BudgetCard.vue
new file mode 100644
index 0000000..78fc2e8
--- /dev/null
+++ b/components/budgets/BudgetCard.vue
@@ -0,0 +1,462 @@
+<template>
+  <component
+    :is="to ? 'NuxtLink' : 'div'"
+    :to="to || (budget.id ? `/budgets/${budget.id}` : undefined)"
+    class="budget-card"
+    :class="`budget-card--${statusClass}`"
+    @click="$emit('click', budget)"
+  >
+    <header class="budget-card__head">
+      <div class="budget-card__title">
+        <h3 class="budget-card__name">{{ budget.name }}</h3>
+        <p class="budget-card__period">{{ formattedPeriod }}</p>
+      </div>
+      <div class="budget-card__head-actions">
+        <span class="status-chip" :class="`status-chip--${statusClass}`">
+          {{ t(statusLabel) }}
+        </span>
+        <div class="icon-actions" @click.stop>
+          <button
+            type="button"
+            class="icon-btn"
+            :aria-label="t('Edit')"
+            :title="t('Edit')"
+            @click.prevent="$emit('edit', budget)"
+          >
+            <Pencil class="icon" :size="15" />
+          </button>
+          <button
+            type="button"
+            class="icon-btn icon-btn--danger"
+            :aria-label="t('Delete')"
+            :title="t('Delete')"
+            @click.prevent="$emit('delete', budget)"
+          >
+            <Trash2 class="icon" :size="15" />
+          </button>
+        </div>
+      </div>
+    </header>
+
+    <div class="scope-line">
+      <span v-if="!hasAnyTargets" class="scope-pill scope-pill--all">
+        <Globe class="icon" :size="13" />
+        {{ t('All transactions in period') }}
+      </span>
+      <template v-else>
+        <span v-if="categories.length" class="scope-pill scope-pill--category">
+          <Tag class="icon" :size="13" />
+          {{ summaryFor('category', categories) }}
+        </span>
+        <span v-if="groups.length" class="scope-pill scope-pill--group">
+          <Folder class="icon" :size="13" />
+          {{ summaryFor('group', groups) }}
+        </span>
+        <span v-if="wallets.length" class="scope-pill scope-pill--wallet">
+          <Wallet class="icon" :size="13" />
+          {{ summaryFor('wallet', wallets) }}
+        </span>
+      </template>
+    </div>
+
+    <div class="progress">
+      <div class="progress-bar">
+        <div
+          class="progress-fill"
+          :class="`progress-fill--${statusClass}`"
+          :style="{ width: Math.min(100, percentUsed) + '%' }"
+        />
+      </div>
+      <div class="progress-meta">
+        <span>
+          <strong>{{ formatMoney(netSpent) }}</strong>
+          {{ t('of') }} {{ formatMoney(effectiveLimit) }}
+        </span>
+        <span class="percent">{{ Math.round(percentUsed) }}%</span>
+      </div>
+    </div>
+
+    <footer class="budget-card__footer">
+      <div class="footer-left">
+        <span class="remaining-label">{{ t('Remaining') }}</span>
+        <strong class="remaining-value" :class="{ negative: remaining < 0 }">
+          {{ formatMoney(remaining) }}
+        </strong>
+      </div>
+      <div v-if="refunds > 0" class="footer-right" :title="t('Refunds applied this period')">
+        <Undo2 class="icon" :size="13" />
+        <span>{{ formatMoney(refunds) }}</span>
+      </div>
+    </footer>
+  </component>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import {
+  Undo2,
+  Folder,
+  Globe,
+  Pencil,
+  Tag,
+  Trash2,
+  Wallet
+} from 'lucide-vue-next';
+import { formatAmount } from '../../utils/currency';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  budget: {
+    type: Object,
+    required: true
+  },
+  to: {
+    type: String,
+    default: ''
+  }
+});
+
+defineEmits(['edit', 'delete', 'click']);
+
+const targets = computed(() => props.budget?.targets ?? []);
+const categories = computed(() => targets.value.filter((tr) => tr.type === 'category'));
+const groups = computed(() => targets.value.filter((tr) => tr.type === 'group'));
+const wallets = computed(() => targets.value.filter((tr) => tr.type === 'wallet'));
+const hasAnyTargets = computed(() => targets.value.length > 0);
+
+const summaryFor = (type, items) => {
+  const first = items[0]?.name ?? '';
+  if (items.length === 1) return first;
+  if (items.length === 2) return `${first}, ${items[1].name}`;
+  return `${first} +${items.length - 1}`;
+};
+
+const progress = computed(() => props.budget?.progress);
+const percentUsed = computed(() => progress.value?.percent_used ?? 0);
+const netSpent = computed(() => Number(progress.value?.net_spent ?? 0));
+const effectiveLimit = computed(() =>
+  Number(progress.value?.effective_limit ?? Number(props.budget?.amount ?? 0))
+);
+const remaining = computed(() => Number(progress.value?.remaining ?? (effectiveLimit.value - netSpent.value)));
+const refunds = computed(() => Number(progress.value?.refunds ?? 0));
+
+const statusClass = computed(() => {
+  const s = progress.value?.status;
+  if (s === 'over_budget') return 'over';
+  if (s === 'forecast_breach') return 'forecast';
+  if (s === 'near_limit') return 'near';
+  return 'ok';
+});
+
+const statusLabel = computed(() => {
+  switch (statusClass.value) {
+    case 'over':
+      return 'Over Budget';
+    case 'forecast':
+      return 'Forecast: Will Breach';
+    case 'near':
+      return 'Near Limit';
+    default:
+      return 'On Track';
+  }
+});
+
+const formatMoney = (value) => {
+  return formatAmount(`${value} ${props.budget?.currency || 'USD'}`);
+};
+
+const formattedPeriod = computed(() => {
+  const b = props.budget;
+  if (!b) return '';
+  if (b.period_type === 'custom') {
+    return `${b.start_date} → ${b.end_date ?? ''}`;
+  }
+  const type = b.period_type || 'monthly';
+  const label = type.charAt(0).toUpperCase() + type.slice(1);
+  return `${t(label)} · ${progress.value?.period_start ?? b.start_date}`;
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.budget-card {
+  background: $bg-white;
+  color: $text-primary;
+  text-decoration: none;
+  border: 1px solid $border-light;
+  border-radius: 14px;
+  padding: 1rem 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  cursor: pointer;
+  box-shadow: $elevation-1;
+  transition:
+    border-color $duration-fast $easing-standard,
+    box-shadow $duration-base $easing-standard;
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 0.875rem 1rem;
+  }
+
+  &:hover {
+    border-color: $border-medium;
+    box-shadow: $elevation-2;
+  }
+
+  &:focus-visible {
+    outline: 2px solid $primary;
+    outline-offset: 2px;
+  }
+
+  &__head {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 0.75rem;
+
+    @media (max-width: $breakpoint-sm) {
+      flex-wrap: wrap;
+    }
+  }
+
+  &__title {
+    min-width: 0;
+    flex: 1 1 160px;
+  }
+
+  &__name {
+    margin: 0;
+    font-size: $font-size-lg;
+    color: $text-primary;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    @media (max-width: $breakpoint-sm) {
+      font-size: $font-size-base;
+    }
+  }
+
+  &__period {
+    margin: 2px 0 0;
+    font-size: $font-size-xs;
+    color: $text-muted;
+  }
+
+  &__head-actions {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 6px;
+    flex-shrink: 0;
+
+    @media (max-width: $breakpoint-sm) {
+      flex-direction: row;
+      align-items: center;
+      flex-wrap: wrap;
+      width: 100%;
+      justify-content: space-between;
+    }
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.75rem;
+    padding-top: 0.5rem;
+    border-top: 1px solid $border-color;
+  }
+}
+
+.footer-left {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+}
+
+.footer-right {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: $font-size-xs;
+  font-weight: $font-medium;
+  color: var(--color-info);
+  background: rgba(var(--color-info-rgb), 0.1);
+  border: 1px solid rgba(var(--color-info-rgb), 0.2);
+  padding: 2px 8px;
+  border-radius: 999px;
+
+  .icon {
+    flex-shrink: 0;
+  }
+}
+
+.icon-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.icon-btn {
+  background: transparent;
+  border: 1px solid transparent;
+  color: $text-muted;
+  border-radius: $radius-md;
+  padding: 4px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: all $duration-fast $easing-standard;
+
+  .icon {
+    flex-shrink: 0;
+  }
+
+  &:hover {
+    background: rgba(var(--color-primary-rgb), 0.1);
+    color: $primary;
+    border-color: $primary-muted;
+  }
+
+  &--danger:hover {
+    background: rgba(var(--color-error-rgb), 0.1);
+    color: var(--color-error);
+    border-color: var(--color-error);
+  }
+}
+
+.status-chip {
+  font-size: $font-size-xs;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-weight: $font-medium;
+  white-space: nowrap;
+
+  &--ok {
+    background: rgba(var(--color-success-rgb), 0.15);
+    color: var(--color-success);
+  }
+  &--near {
+    background: rgba(var(--color-warning-rgb), 0.2);
+    color: var(--color-warning-text);
+  }
+  &--forecast {
+    background: rgba(var(--color-warning-rgb), 0.25);
+    color: var(--color-warning-text);
+  }
+  &--over {
+    background: rgba(var(--color-error-rgb), 0.15);
+    color: var(--color-error);
+  }
+}
+
+.scope-line {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-height: 26px;
+}
+
+.scope-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: $font-size-xs;
+  font-weight: $font-medium;
+  padding: 3px 10px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  .icon {
+    flex-shrink: 0;
+  }
+
+  &--all {
+    background: rgba(var(--color-primary-rgb), 0.06);
+    color: $text-secondary;
+    border-color: $border-color;
+  }
+
+  &--category {
+    background: rgba(var(--color-info-rgb), 0.1);
+    color: var(--color-info);
+    border-color: rgba(var(--color-info-rgb), 0.2);
+  }
+  &--group {
+    background: rgba(var(--color-warning-rgb), 0.15);
+    color: var(--color-warning-text);
+    border-color: rgba(var(--color-warning-rgb), 0.3);
+  }
+  &--wallet {
+    background: rgba(var(--color-primary-rgb), 0.1);
+    color: $primary;
+    border-color: rgba(var(--color-primary-rgb), 0.2);
+  }
+}
+
+.progress {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.progress-bar {
+  background: $bg-slate;
+  height: 8px;
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  transition: width 0.3s ease;
+
+  &--ok {
+    background: var(--color-success);
+  }
+  &--near {
+    background: var(--color-warning);
+  }
+  &--forecast {
+    background: var(--color-warning);
+  }
+  &--over {
+    background: var(--color-error);
+  }
+}
+
+.progress-meta {
+  display: flex;
+  justify-content: space-between;
+  font-size: $font-size-sm;
+  color: $text-secondary;
+
+  .percent {
+    font-weight: $font-semibold;
+  }
+}
+
+.remaining-label {
+  font-size: $font-size-xs;
+  color: $text-muted;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.remaining-value {
+  font-size: $font-size-base;
+  font-weight: $font-semibold;
+
+  &.negative {
+    color: var(--color-error);
+  }
+}
+</style>
diff --git a/components/budgets/BudgetForm.stories.js b/components/budgets/BudgetForm.stories.js
new file mode 100644
index 0000000..5415742
--- /dev/null
+++ b/components/budgets/BudgetForm.stories.js
@@ -0,0 +1,39 @@
+import BudgetForm from './BudgetForm.vue';
+
+export default {
+  title: 'Domain/Budgets/BudgetForm',
+  component: BudgetForm,
+  args: {
+    editingItem: null,
+    apiError: '',
+    isSubmitting: false,
+    wallets: [{ id: 1, name: 'Main Bank Account', currency: 'USD' }],
+    categories: [
+      { id: 1, name: 'Food & Dining' },
+      { id: 2, name: 'Housing' }
+    ],
+    groups: [{ id: 1, name: 'General' }],
+    defaults: { currency: 'USD', period: 'monthly', threshold: 80 }
+  }
+};
+
+export const Create = {};
+
+export const Edit = {
+  args: {
+    editingItem: {
+      id: 1,
+      name: 'Groceries',
+      amount: 500,
+      currency: 'USD',
+      period_type: 'monthly',
+      start_date: '2024-03-01',
+      end_date: null,
+      rollover_enabled: false,
+      threshold_percent: 80,
+      forecast_alerts_enabled: true,
+      is_active: true,
+      targets: [{ type: 'category', id: 1 }]
+    }
+  }
+};
diff --git a/components/budgets/BudgetForm.vue b/components/budgets/BudgetForm.vue
new file mode 100644
index 0000000..dfc9d7e
--- /dev/null
+++ b/components/budgets/BudgetForm.vue
@@ -0,0 +1,611 @@
+<template>
+  <form class="budget-form" @submit.prevent="handleSubmit">
+    <div class="form-header">
+      <h2>{{ editingItem ? t('Edit Budget') : t('Create Budget') }}</h2>
+      <TButton
+        variant="text"
+        size="small"
+        :full-width="false"
+        class="close-btn"
+        :aria-label="t('Close')"
+        @click="$emit('close')"
+      >&times;</TButton>
+    </div>
+
+    <div class="form-grid">
+      <div class="field">
+        <label>{{ t('Budget Name') }}</label>
+        <input v-model="form.name" type="text" required maxlength="255" />
+      </div>
+
+      <div class="field">
+        <label>{{ t('Spending Limit') }}</label>
+        <div class="amount-row">
+          <input v-model.number="form.amount" type="number" min="0" step="0.01" required />
+          <select v-model="form.currency" class="currency">
+            <option v-for="code in currencyOptions" :key="code" :value="code">{{ code }}</option>
+          </select>
+        </div>
+        <p v-if="currencyOptions.length === 0" class="field-hint">
+          {{ t('Add a wallet first to pick a currency.') }}
+        </p>
+      </div>
+
+      <div class="field">
+        <label>{{ t('Budget Period') }}</label>
+        <select v-model="form.period_type">
+          <option value="weekly">{{ t('Weekly') }}</option>
+          <option value="monthly">{{ t('Monthly') }}</option>
+          <option value="yearly">{{ t('Yearly') }}</option>
+          <option value="custom">{{ t('Custom range') }}</option>
+        </select>
+      </div>
+
+      <div class="field">
+        <label>{{ t('Start date') }}</label>
+        <input v-model="form.start_date" type="date" required />
+      </div>
+
+      <div v-if="form.period_type === 'custom'" class="field">
+        <label>{{ t('End date') }}</label>
+        <input v-model="form.end_date" type="date" required />
+      </div>
+
+      <div class="field field--full">
+        <label>{{ t('Budget Description') }}</label>
+        <textarea v-model="form.description" rows="2" maxlength="500" />
+      </div>
+
+      <div class="field field--full">
+        <label>{{ t('Budget Targets') }}</label>
+        <p class="field-hint">
+          {{
+            t(
+              'Leave empty to cover every transaction in this period. Pick categories, groups, or wallets to narrow the scope.'
+            )
+          }}
+        </p>
+        <div class="target-tabs">
+          <TButton
+            v-for="tab in targetTabs"
+            :key="tab.key"
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="tab"
+            :class="{ active: activeTargetTab === tab.key }"
+            @click="activeTargetTab = tab.key"
+          >
+            {{ t(tab.label) }}
+            <span class="count">{{ selectedCount(tab.key) }}</span>
+          </TButton>
+        </div>
+        <div class="target-list">
+          <label
+            v-for="item in targetItems"
+            :key="`${activeTargetTab}-${item.id}`"
+            class="target-row"
+          >
+            <input
+              type="checkbox"
+              :checked="isSelected(activeTargetTab, item.id)"
+              @change="toggleTarget(activeTargetTab, item.id)"
+            />
+            <span>{{ item.name }}</span>
+          </label>
+          <p v-if="targetItems.length === 0" class="empty-hint">
+            {{ t('No items to choose from') }}
+          </p>
+        </div>
+      </div>
+
+      <div class="field">
+        <label class="inline-toggle">
+          <input v-model="form.rollover_enabled" type="checkbox" />
+          <span>{{ t('Rollover unused amount') }}</span>
+        </label>
+        <p class="field-hint">
+          {{ t('Leftover or overage carries forward to the next period.') }}
+        </p>
+      </div>
+
+      <div class="field">
+        <label>
+          {{ t('Alert threshold') }}
+          <template v-if="form.threshold_percent > 0">({{ form.threshold_percent }}%)</template>
+          <template v-else>— {{ t('off') }}</template>
+        </label>
+        <input v-model.number="form.threshold_percent" type="range" min="0" max="100" step="5" />
+        <p class="field-hint">
+          {{ t('Sends a reminder when spending crosses this percent. Set to 0 to disable.') }}
+        </p>
+      </div>
+
+      <div class="field">
+        <label class="inline-toggle">
+          <input v-model="form.forecast_alerts_enabled" type="checkbox" />
+          <span>{{ t('Forecast alerts') }}</span>
+        </label>
+        <p class="field-hint">
+          {{
+            t('Sends a reminder when your spending pace projects to exceed the limit this period.')
+          }}
+        </p>
+      </div>
+
+      <div class="field">
+        <label class="inline-toggle">
+          <input v-model="form.is_active" type="checkbox" />
+          <span>{{ t('Active') }}</span>
+        </label>
+      </div>
+    </div>
+
+    <p v-if="apiError" class="error-message">{{ apiError }}</p>
+
+    <div class="actions">
+      <TButton variant="secondary" :full-width="false" @click="$emit('close')">
+        {{ t('Cancel') }}
+      </TButton>
+      <TButton
+        type="submit"
+        variant="primary"
+        :full-width="false"
+        :disabled="isSubmitting || !canSubmit"
+      >
+        {{ editingItem ? t('Update Budget') : t('Create Budget') }}
+      </TButton>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue';
+
+const CURRENCIES = [
+  { code: 'USD' },
+  { code: 'EUR' },
+  { code: 'GBP' },
+  { code: 'JPY' },
+  { code: 'CAD' },
+  { code: 'AUD' },
+  { code: 'XAF' },
+  { code: 'XOF' },
+  { code: 'NGN' },
+  { code: 'GHS' },
+  { code: 'KES' },
+  { code: 'ZAR' },
+  { code: 'INR' },
+  { code: 'CNY' },
+  { code: 'BRL' },
+  { code: 'MXN' },
+  { code: 'CHF' }
+];
+
+const props = defineProps<{
+  editingItem?: Budget | null;
+  apiError?: string;
+  isSubmitting?: boolean;
+  defaults?: {
+    threshold?: number;
+    rollover?: boolean;
+    period?: BudgetPeriodType;
+    forecast?: boolean;
+    currency?: string;
+  };
+  wallets?: any[];
+  categories?: any[];
+  groups?: any[];
+}>();
+
+const emit = defineEmits<{
+  (e: 'created' | 'updated', payload: any): void;
+  (e: 'close'): void;
+}>();
+
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+const defaultCurrency = computed(() => props.defaults?.currency ?? 'USD');
+
+// Backend serializes dates as ISO datetime (`2026-04-18T00:00:00Z`), but
+// <input type="date"> needs a bare `YYYY-MM-DD` or it renders empty.
+const toDateInput = (value: string): string => (value ? value.slice(0, 10) : '');
+
+// Budgets aren't limited to wallet currencies: offer every supported currency,
+// with the user's own wallet currencies (and configured default) surfaced first
+// so the most relevant options sit at the top of the list.
+const currencyOptions = computed<string[]>(() => {
+  const ordered: string[] = [];
+  const seen = new Set<string>();
+  const add = (code?: string) => {
+    if (!code) return;
+    const upper = code.toUpperCase();
+    if (!seen.has(upper)) {
+      seen.add(upper);
+      ordered.push(upper);
+    }
+  };
+
+  for (const w of (props.wallets ?? []) as Array<{ currency?: string }>) {
+    add(w.currency);
+  }
+  add(defaultCurrency.value);
+  for (const c of CURRENCIES) {
+    add(c.code);
+  }
+
+  return ordered;
+});
+
+const buildInitial = () => ({
+  name: '',
+  description: '',
+  amount: 0,
+  currency: defaultCurrency.value,
+  period_type: (props.defaults?.period ?? 'monthly') as BudgetPeriodType,
+  start_date: new Date().toISOString().slice(0, 10),
+  end_date: null as string | null,
+  rollover_enabled: props.defaults?.rollover ?? false,
+  threshold_percent: props.defaults?.threshold ?? 80,
+  forecast_alerts_enabled: props.defaults?.forecast ?? true,
+  is_active: true,
+  targets: [] as Array<{ type: BudgetTargetType; id: number }>
+});
+
+const form = reactive(buildInitial());
+
+// Keep form.currency within the dropdown's options. When the default isn't
+// available (e.g. user's configured default-currency has no wallet yet),
+// fall back to the first option so the select always shows a real value.
+watch(
+  currencyOptions,
+  (options) => {
+    if (!props.editingItem && options.length > 0 && !options.includes(form.currency)) {
+      form.currency = options[0];
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  () => props.editingItem,
+  (item) => {
+    if (!item) {
+      Object.assign(form, buildInitial());
+      if (currencyOptions.value.length > 0 && !currencyOptions.value.includes(form.currency)) {
+        form.currency = currencyOptions.value[0];
+      }
+      return;
+    }
+    form.name = item.name;
+    form.description = item.description ?? '';
+    form.amount = Number(item.amount);
+    form.currency = item.currency;
+    form.period_type = item.period_type;
+    form.start_date = toDateInput(item.start_date);
+    form.end_date = item.end_date ? toDateInput(item.end_date) : null;
+    form.rollover_enabled = item.rollover_enabled;
+    form.threshold_percent = item.threshold_percent;
+    form.forecast_alerts_enabled = item.forecast_alerts_enabled;
+    form.is_active = item.is_active;
+    form.targets = (item.targets ?? []).map((tgt) => ({ type: tgt.type, id: tgt.id }));
+  },
+  { immediate: true }
+);
+
+const targetTabs: Array<{ key: BudgetTargetType; label: string }> = [
+  { key: 'category', label: 'Categories' },
+  { key: 'group', label: 'Groups' },
+  { key: 'wallet', label: 'Wallets' }
+];
+
+const activeTargetTab = ref<BudgetTargetType>('category');
+
+const targetItems = computed(() => {
+  switch (activeTargetTab.value) {
+    case 'category':
+      return (props.categories ?? []).map((c: any) => ({ id: c.id, name: c.name }));
+    case 'group':
+      return (props.groups ?? []).map((g: any) => ({ id: g.id, name: g.name }));
+    case 'wallet':
+      return (props.wallets ?? []).map((w: any) => ({ id: w.id, name: w.name }));
+    default:
+      return [];
+  }
+});
+
+const isSelected = (type: BudgetTargetType, id: number) =>
+  form.targets.some((t) => t.type === type && t.id === id);
+
+const toggleTarget = (type: BudgetTargetType, id: number) => {
+  const idx = form.targets.findIndex((t) => t.type === type && t.id === id);
+  if (idx >= 0) {
+    form.targets.splice(idx, 1);
+  } else {
+    form.targets.push({ type, id });
+  }
+};
+
+const selectedCount = (type: BudgetTargetType) =>
+  form.targets.filter((t) => t.type === type).length;
+
+const canSubmit = computed(
+  () =>
+    form.name.trim() !== '' &&
+    form.amount > 0 &&
+    form.currency.length === 3 &&
+    form.start_date !== '' &&
+    (form.period_type !== 'custom' || !!form.end_date)
+);
+
+const handleSubmit = () => {
+  const payload: Record<string, unknown> = {
+    name: form.name.trim(),
+    description: form.description || undefined,
+    amount: form.amount,
+    currency: form.currency.toUpperCase(),
+    period_type: form.period_type,
+    start_date: form.start_date,
+    end_date: form.period_type === 'custom' ? form.end_date : null,
+    rollover_enabled: form.rollover_enabled,
+    threshold_percent: form.threshold_percent,
+    forecast_alerts_enabled: form.forecast_alerts_enabled,
+    is_active: form.is_active,
+    targets: form.targets
+  };
+
+  if (props.editingItem?.id) {
+    emit('updated', { ...payload, id: props.editingItem.id });
+  } else {
+    emit('created', payload);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.budget-form {
+  background: $bg-white;
+  color: $text-primary;
+  border: 1px solid $border-color;
+  border-radius: $radius-xl;
+  padding: 1.5rem;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.form-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.25rem;
+
+  h2 {
+    font-size: $font-size-xl;
+    color: $text-primary;
+    margin: 0;
+  }
+  .close-btn {
+    background: transparent;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: $text-muted;
+
+    &:hover {
+      color: $text-primary;
+    }
+  }
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem 1.25rem;
+
+  @media (max-width: $breakpoint-md) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  &--full {
+    grid-column: 1 / -1;
+  }
+
+  label {
+    font-size: $font-size-sm;
+    font-weight: $font-medium;
+    color: $text-secondary;
+  }
+
+  input[type='text'],
+  input[type='number'],
+  input[type='date'],
+  select,
+  textarea {
+    padding: 0.5rem 0.75rem;
+    border: 1px solid $border-color;
+    border-radius: $radius-lg;
+    background-color: $input-bg;
+    color: $text-primary;
+    font-size: $font-size-sm;
+    font-family: inherit;
+
+    &::placeholder {
+      color: $text-muted;
+    }
+
+    &:focus {
+      outline: none;
+      border-color: $primary;
+      box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.15);
+    }
+  }
+
+  // Native date picker icon loses contrast on dark mode; invert it.
+  input[type='date'] {
+    color-scheme: light dark;
+  }
+
+  input[type='range'] {
+    width: 100%;
+    accent-color: $primary;
+  }
+}
+
+.amount-row {
+  display: flex;
+  gap: 8px;
+
+  input[type='number'] {
+    flex-grow: 1;
+  }
+  .currency {
+    width: 100px;
+    text-transform: uppercase;
+  }
+}
+
+.field-hint {
+  margin: 4px 0 0;
+  font-size: $font-size-xs;
+  color: $text-muted;
+}
+
+.inline-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: $font-size-sm;
+  font-weight: $font-normal;
+  color: $text-primary;
+
+  input[type='checkbox'] {
+    accent-color: $primary;
+  }
+}
+
+.target-tabs {
+  display: flex;
+  gap: 4px;
+  border-bottom: 1px solid $border-color;
+  margin-bottom: 8px;
+
+  .tab {
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid transparent;
+    padding: 8px 12px;
+    font-size: $font-size-sm;
+    color: $text-secondary;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    &.active {
+      color: $primary;
+      border-bottom-color: $primary;
+    }
+
+    .count {
+      background: $border-color;
+      border-radius: 10px;
+      font-size: 10px;
+      padding: 1px 6px;
+    }
+  }
+}
+
+.target-list {
+  max-height: 180px;
+  overflow-y: auto;
+  border: 1px solid $border-color;
+  border-radius: $radius-lg;
+  padding: 8px;
+  background-color: $input-bg;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.target-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: $font-size-sm;
+  color: $text-primary;
+  padding: 4px 6px;
+  border-radius: $radius-md;
+  cursor: pointer;
+
+  input[type='checkbox'] {
+    accent-color: $primary;
+  }
+
+  &:hover {
+    background-color: rgba(var(--color-primary-rgb), 0.1);
+  }
+}
+
+.empty-hint {
+  color: $text-muted;
+  font-size: $font-size-xs;
+  margin: 0;
+  padding: 8px;
+}
+
+.error-message {
+  color: $error-color;
+  margin: 12px 0 0;
+  font-size: $font-size-sm;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 1.25rem;
+}
+
+.btn {
+  padding: 0.5rem 1rem;
+  border-radius: $radius-lg;
+  border: 1px solid transparent;
+  font-size: $font-size-sm;
+  cursor: pointer;
+  font-weight: $font-medium;
+
+  &--ghost {
+    background: transparent;
+    border-color: $border-color;
+    color: $text-secondary;
+
+    &:hover {
+      background-color: rgba(var(--color-primary-rgb), 0.08);
+      color: $primary;
+      border-color: $primary-muted;
+    }
+  }
+
+  &--primary {
+    background: $primary;
+    color: white;
+    &:hover:not(:disabled) {
+      background: $primary-hover;
+    }
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+}
+</style>
diff --git a/components/categories/CategoryForm.stories.js b/components/categories/CategoryForm.stories.js
new file mode 100644
index 0000000..0426d9f
--- /dev/null
+++ b/components/categories/CategoryForm.stories.js
@@ -0,0 +1,25 @@
+import CategoryForm from './CategoryForm.vue';
+
+export default {
+  title: 'Domain/Categories/CategoryForm',
+  component: CategoryForm,
+  args: {
+    editingItem: null,
+    apiError: '',
+    isSubmitting: false
+  }
+};
+
+export const Create = {};
+
+export const Edit = {
+  args: {
+    editingItem: {
+      id: 1,
+      name: 'Food & Dining',
+      type: 'expense',
+      description: 'Restaurants and groceries',
+      icon: 'Utensils'
+    }
+  }
+};
diff --git a/components/categories/CategoryForm.vue b/components/categories/CategoryForm.vue
new file mode 100644
index 0000000..17ef33a
--- /dev/null
+++ b/components/categories/CategoryForm.vue
@@ -0,0 +1,271 @@
+<template>
+  <form class="card-form" @submit.prevent="handleSubmit">
+    <div class="form-header">
+      <h2>{{ isEditing ? t('Edit Category') : t('Create Category') }}</h2>
+      <TButton
+        variant="text"
+        size="small"
+        :full-width="false"
+        class="close-btn"
+        :aria-label="t('Close')"
+        @click="handleClose"
+      >
+        <X />
+      </TButton>
+    </div>
+
+    <div class="form-group">
+      <label for="category-name" class="form-label">{{ t('Category Name') }}</label>
+      <div class="name-icon-row">
+        <div class="name-col">
+          <input
+            id="category-name"
+            v-model="form.name"
+            type="text"
+            class="form-input"
+            :class="{ error: nameError || props.apiError }"
+            :placeholder="t('Enter category name')"
+            required
+          />
+          <div v-if="nameError" class="error-text">{{ t('Category name is required.') }}</div>
+          <div v-if="props.apiError" class="error-text">{{ props.apiError }}</div>
+        </div>
+        <div class="icon-col">
+          <TButton
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="icon-trigger"
+            :aria-expanded="showIconPicker"
+            :aria-label="t('Choose icon')"
+            @click="showIconPicker = !showIconPicker"
+          >
+            <component
+              :is="selectedIconComponent"
+              v-if="selectedIconComponent"
+              class="icon-trigger__icon"
+            />
+            <ImagePlus v-else class="icon-trigger__icon" />
+          </TButton>
+        </div>
+      </div>
+
+      <div v-if="showIconPicker" class="icon-popover">
+        <IconPicker v-model="form.icon" @update:model-value="onIconSelected" />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label for="category-type" class="form-label">{{ t('Category Type') }}</label>
+      <select
+        id="category-type"
+        v-model="form.type"
+        class="form-select"
+        :class="{ error: typeError }"
+        required
+      >
+        <option value="">{{ t('Select type') }}</option>
+        <option value="income">{{ t('Income') }}</option>
+        <option value="expense">{{ t('Expense') }}</option>
+      </select>
+      <div v-if="typeError" class="error-text">{{ t('Please select a category type.') }}</div>
+    </div>
+
+    <div class="form-group">
+      <label for="category-description" class="form-label">{{ t('Category Description') }}</label>
+      <textarea
+        id="category-description"
+        v-model="form.description"
+        class="form-textarea"
+        :class="{ error: descriptionError }"
+        :placeholder="t('Type category description here...')"
+        rows="5"
+        required
+      />
+      <div v-if="descriptionError" class="error-text">
+        {{ t('Category description is required.') }}
+      </div>
+    </div>
+
+    <div class="form-actions">
+      <TButton variant="secondary" :full-width="false" @click="handleClose">
+        {{ t('Cancel') }}
+      </TButton>
+      <TButton
+        type="submit"
+        variant="primary"
+        :full-width="false"
+        :disabled="props.isSubmitting"
+      >
+        {{ isEditing ? t('Update Category') : t('Create Category') }}
+      </TButton>
+    </div>
+  </form>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import IconPicker from '../IconPicker.vue';
+import * as lucideIcons from 'lucide-vue-next';
+import { ImagePlus, X } from 'lucide-vue-next';
+
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  pageName: {
+    type: String,
+    required: true
+  },
+  editingItem: {
+    type: Object,
+    default: null
+  },
+  apiError: {
+    type: String,
+    default: ''
+  },
+  isSubmitting: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['created', 'updated', 'close']);
+
+const form = ref({
+  name: '',
+  icon: '',
+  type: '',
+  description: ''
+});
+
+const nameError = ref(false);
+const typeError = ref(false);
+const descriptionError = ref(false);
+const showIconPicker = ref(false);
+
+const selectedIconComponent = computed(() => {
+  const key = form.value.icon;
+  if (key && typeof lucideIcons[key] === 'function') {
+    return lucideIcons[key];
+  }
+  return null;
+});
+
+const isEditing = computed(() => !!props.editingItem);
+
+// Watch for editing item changes and populate form
+watch(
+  () => props.editingItem,
+  (newEditingItem) => {
+    if (newEditingItem) {
+      // Extract icon value - could be from icon.path, icon.content, or direct icon value
+      let iconValue = '';
+      if (newEditingItem.icon) {
+        if (typeof newEditingItem.icon === 'string') {
+          iconValue = newEditingItem.icon;
+        } else if (newEditingItem.icon.path) {
+          iconValue = newEditingItem.icon.path;
+        } else if (newEditingItem.icon.content) {
+          iconValue = newEditingItem.icon.content;
+        }
+      }
+
+      form.value = {
+        name: newEditingItem.name || '',
+        icon: iconValue,
+        type: newEditingItem.type || '',
+        description: newEditingItem.description || ''
+      };
+    } else {
+      resetForm();
+    }
+  },
+  { immediate: true }
+);
+
+function resetForm() {
+  form.value = { name: '', icon: '', type: '', description: '' };
+  nameError.value = false;
+  typeError.value = false;
+  descriptionError.value = false;
+  showIconPicker.value = false;
+}
+
+function validateForm() {
+  let isValid = true;
+
+  // Reset errors
+  nameError.value = false;
+  typeError.value = false;
+  descriptionError.value = false;
+
+  // Validate name
+  if (!form.value.name || form.value.name.trim() === '') {
+    nameError.value = true;
+    isValid = false;
+  }
+
+  // Validate type
+  if (!form.value.type || form.value.type.trim() === '') {
+    typeError.value = true;
+    isValid = false;
+  }
+
+  // Validate description
+  if (!form.value.description || form.value.description.trim() === '') {
+    descriptionError.value = true;
+    isValid = false;
+  }
+
+  return isValid;
+}
+
+function handleSubmit() {
+  if (props.isSubmitting) {
+    return;
+  }
+
+  // Validate all fields
+  if (!validateForm()) {
+    return;
+  }
+
+  const formData = {
+    name: form.value.name.trim(),
+    description: form.value.description.trim(),
+    type: form.value.type
+  };
+  if (form.value.icon && form.value.icon.trim() !== '') {
+    formData.icon = form.value.icon;
+    formData.icon_type = 'image';
+  }
+
+  if (isEditing.value) {
+    const updatedItem = {
+      id: props.editingItem.id,
+      ...formData
+    };
+    emit('updated', updatedItem);
+    return;
+  }
+
+  emit('created', formData);
+}
+
+function onIconSelected() {
+  showIconPicker.value = false;
+}
+
+function handleClose() {
+  emit('close');
+  resetForm();
+}
+</script>
+
+<style scoped lang="scss">
+@use '../../assets/scss/_form-styles.scss';
+</style>
diff --git a/components/dashboard/CategoryBreakdown.stories.js b/components/dashboard/CategoryBreakdown.stories.js
new file mode 100644
index 0000000..6541fa7
--- /dev/null
+++ b/components/dashboard/CategoryBreakdown.stories.js
@@ -0,0 +1,39 @@
+import CategoryBreakdown from './CategoryBreakdown.vue';
+
+const sampleCategories = [
+  { name: 'Housing & Rent', amount: 1400.0, color: '#3b82f6' },
+  { name: 'Groceries', amount: 650.0, color: '#10b981' },
+  { name: 'Utilities', amount: 320.0, color: '#f59e0b' },
+  { name: 'Entertainment', amount: 220.0, color: '#8b5cf6' },
+  { name: 'Transport', amount: 160.0, color: '#ec4899' }
+];
+
+export default {
+  title: 'Domain/Dashboard/CategoryBreakdown',
+  component: CategoryBreakdown,
+  args: {
+    categories: sampleCategories,
+    currency: 'USD',
+    initialChart: 'pie'
+  }
+};
+
+export const DonutView = {};
+
+export const BarView = {
+  args: {
+    initialChart: 'bar'
+  }
+};
+
+export const LineView = {
+  args: {
+    initialChart: 'line'
+  }
+};
+
+export const Empty = {
+  args: {
+    categories: []
+  }
+};
diff --git a/components/dashboard/CategoryBreakdown.vue b/components/dashboard/CategoryBreakdown.vue
new file mode 100644
index 0000000..c6ca5f2
--- /dev/null
+++ b/components/dashboard/CategoryBreakdown.vue
@@ -0,0 +1,560 @@
+<template>
+  <div class="category-breakdown">
+    <PieChart class="card-glyph" :size="128" :stroke-width="1" aria-hidden="true" />
+    <div class="header">
+      <h3 class="title">{{ t('Spending Overview') }}</h3>
+      <div class="chart-tabs">
+        <button
+          v-for="tab in chartTabs"
+          :key="tab.id"
+          type="button"
+          class="tab-btn"
+          :class="{ active: activeChart === tab.id }"
+          :aria-label="tab.label"
+          @click="activeChart = tab.id"
+        >
+          <component :is="tab.icon" :size="16" />
+        </button>
+      </div>
+    </div>
+
+    <div v-if="!hasData" class="empty-state">
+      <p>{{ t('No expense data available') }}</p>
+    </div>
+
+    <div v-else class="chart-section">
+      <!-- Pie/Donut Chart -->
+      <div v-if="activeChart === 'pie'" class="chart-container">
+        <div class="donut-wrapper">
+          <div class="donut" :style="{ background: gradient }" />
+          <div class="donut-center">
+            <span class="center-label">{{ t('Total') }}</span>
+            <span class="center-value">{{ formattedTotal }}</span>
+          </div>
+        </div>
+        <div class="chart-legend">
+          <div
+            v-for="(item, index) in topCategories"
+            :key="index"
+            class="legend-item"
+            @click="$emit('select-category', item)"
+          >
+            <span class="legend-dot" :style="{ background: item.color }" />
+            <span class="legend-name">{{ item.name }}</span>
+            <span class="legend-percent">{{ formatPercent(item.value) }}%</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Vertical Bar Chart -->
+      <div v-else-if="activeChart === 'bar'" class="chart-container bar-container">
+        <div class="bar-chart">
+          <div
+            v-for="(item, index) in topCategories"
+            :key="index"
+            class="bar-column"
+            @click="$emit('select-category', item)"
+          >
+            <div class="bar-value">{{ formatPercent(item.value) }}%</div>
+            <div class="bar-track">
+              <div
+                class="bar-fill"
+                :style="{ height: getBarHeight(item.value), background: item.color }"
+              />
+            </div>
+            <div class="bar-label">{{ truncateName(item.name) }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Line Chart -->
+      <div v-else-if="activeChart === 'line'" class="chart-container line-container">
+        <svg class="line-chart" viewBox="0 0 280 160" preserveAspectRatio="xMidYMid meet">
+          <defs>
+            <linearGradient
+              v-for="(cat, idx) in topCategories"
+              :id="'cb-gradient-' + idx"
+              :key="'grad-' + idx"
+              x1="0%"
+              y1="0%"
+              x2="0%"
+              y2="100%"
+            >
+              <stop offset="0%" :style="`stop-color: ${cat.color}; stop-opacity: 0.3`" />
+              <stop offset="100%" :style="`stop-color: ${cat.color}; stop-opacity: 0.05`" />
+            </linearGradient>
+          </defs>
+          <!-- Grid lines -->
+          <line x1="30" y1="20" x2="30" y2="130" class="grid-line" stroke-width="1" />
+          <line x1="30" y1="130" x2="270" y2="130" class="grid-line" stroke-width="1" />
+          <line
+            x1="30"
+            y1="75"
+            x2="270"
+            y2="75"
+            class="grid-line"
+            stroke-width="1"
+            stroke-dasharray="4"
+          />
+          <!-- Lines for each category -->
+          <path
+            v-for="(cat, idx) in topCategories"
+            :key="'line-' + idx"
+            :d="getCategoryLinePath(idx)"
+            fill="none"
+            :stroke="cat.color"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <!-- Data points -->
+          <circle
+            v-for="(point, idx) in allDataPoints"
+            :key="'point-' + idx"
+            :cx="point.x"
+            :cy="point.y"
+            r="3"
+            :fill="point.color"
+          />
+        </svg>
+        <div class="line-legend">
+          <div
+            v-for="(cat, idx) in topCategories"
+            :key="idx"
+            class="line-legend-item"
+            @click="$emit('select-category', cat)"
+          >
+            <span class="legend-dot" :style="{ background: cat.color }" />
+            <span class="legend-text">{{ truncateName(cat.name, 10) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, markRaw } from 'vue';
+import { PieChart, BarChart3, TrendingUp } from 'lucide-vue-next';
+import { formatShortAmount } from '../../utils/currency';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const COLORS = [
+  '#3b82f6', // Blue
+  '#f59e0b', // Amber
+  '#10b981', // Green
+  '#ef4444', // Red
+  '#8b5cf6', // Purple
+  '#ec4899', // Pink
+  '#06b6d4', // Cyan
+  '#f97316' // Orange
+];
+
+const props = defineProps({
+  categories: {
+    type: Array,
+    default: () => []
+  },
+  currency: {
+    type: String,
+    default: 'USD'
+  },
+  initialChart: {
+    type: String,
+    default: 'pie'
+  }
+});
+
+defineEmits(['select-category']);
+
+const activeChart = ref(props.initialChart);
+
+const chartTabs = [
+  { id: 'pie', label: 'Pie chart', icon: markRaw(PieChart) },
+  { id: 'bar', label: 'Bar chart', icon: markRaw(BarChart3) },
+  { id: 'line', label: 'Line chart', icon: markRaw(TrendingUp) }
+];
+
+const topCategories = computed(() => {
+  const list = props.categories || [];
+  return list.slice(0, 5).map((cat, index) => ({
+    name: cat.category || cat.name || 'Unknown',
+    value: Number(cat.amount ?? cat.value ?? 0),
+    color: cat.color || COLORS[index % COLORS.length]
+  }));
+});
+
+const hasData = computed(() => topCategories.value.length > 0 && totalExpenses.value > 0);
+
+const totalExpenses = computed(() => {
+  return topCategories.value.reduce((sum, cat) => sum + cat.value, 0);
+});
+
+const formattedTotal = computed(() => {
+  return formatShortAmount(`${totalExpenses.value} ${props.currency}`);
+});
+
+const gradient = computed(() => {
+  if (!hasData.value) return 'var(--color-border)';
+
+  const total = totalExpenses.value || 1;
+  let current = 0;
+  const stops = topCategories.value.map((cat) => {
+    const start = (current / total) * 360;
+    current += cat.value;
+    const end = (current / total) * 360;
+    return `${cat.color} ${start}deg ${end}deg`;
+  });
+
+  if (current < total) {
+    stops.push(`var(--color-border) ${(current / total) * 360}deg 360deg`);
+  }
+
+  return `conic-gradient(${stops.join(', ')})`;
+});
+
+const formatPercent = (value) => {
+  const total = totalExpenses.value || 1;
+  return ((value / total) * 100).toFixed(0);
+};
+
+const getBarHeight = (value) => {
+  const maxValue = topCategories.value[0]?.value || 1;
+  return `${(value / maxValue) * 100}%`;
+};
+
+const truncateName = (name, max = 8) => {
+  if (!name) return '';
+  return name.length > max ? name.slice(0, max) + '…' : name;
+};
+
+const generateCategoryPoints = (categoryIndex) => {
+  const cat = topCategories.value[categoryIndex];
+  if (!cat) return [];
+
+  const baseValue = cat.value;
+  const numPoints = 5;
+  const width = 240;
+  const height = 110;
+  const startX = 30;
+  const startY = 20;
+
+  const maxVal = topCategories.value[0]?.value || 1;
+  const points = [];
+
+  for (let i = 0; i < numPoints; i++) {
+    const variation = 0.7 + Math.sin(categoryIndex + i * 1.5) * 0.3;
+    const value = baseValue * variation;
+    const x = startX + (i * width) / (numPoints - 1);
+    const y = startY + height - (value / maxVal) * height;
+    points.push({ x, y, color: cat.color });
+  }
+
+  return points;
+};
+
+const getCategoryLinePath = (categoryIndex) => {
+  const points = generateCategoryPoints(categoryIndex);
+  if (points.length === 0) return '';
+  return points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');
+};
+
+const allDataPoints = computed(() => {
+  const points = [];
+  topCategories.value.forEach((_, idx) => {
+    points.push(...generateCategoryPoints(idx));
+  });
+  return points;
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.category-breakdown {
+  position: relative;
+  overflow: hidden;
+  background:
+    radial-gradient(120% 100% at 100% 0%, rgba(var(--color-primary-rgb), 0.05), transparent 58%),
+    $bg-white;
+  border-radius: 16px;
+  box-shadow: $elevation-1;
+  border: 1px solid $border-light;
+  padding: $spacing-4;
+  min-height: 320px;
+  display: flex;
+  flex-direction: column;
+
+  > *:not(.card-glyph) {
+    position: relative;
+  }
+}
+
+.card-glyph {
+  position: absolute;
+  right: -18px;
+  bottom: -18px;
+  color: $primary;
+  opacity: 0.05;
+  pointer-events: none;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: $spacing-3;
+  flex-shrink: 0;
+}
+
+.title {
+  font-size: $font-size-base;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  margin: 0;
+}
+
+.chart-tabs {
+  display: flex;
+  gap: $spacing-1;
+  background: $bg-light;
+  padding: 3px;
+  border-radius: $radius-md;
+}
+
+.tab-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  border-radius: $radius-sm;
+  cursor: pointer;
+  color: $text-muted;
+  transition: all $duration-fast $easing-standard;
+
+  &:hover {
+    color: $text-primary;
+  }
+
+  &.active {
+    background: $bg-white;
+    color: $primary;
+    box-shadow: $shadow-sm;
+  }
+}
+
+.empty-state {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $text-muted;
+  font-size: $font-size-sm;
+}
+
+.chart-section {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.chart-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $spacing-4;
+}
+
+.donut-wrapper {
+  position: relative;
+  width: 160px;
+  height: 160px;
+  flex-shrink: 0;
+}
+
+.donut {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 28%;
+    background: $bg-white;
+    border-radius: 50%;
+  }
+}
+
+.donut-center {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+
+.center-label {
+  font-size: $font-size-xs;
+  color: $text-muted;
+}
+
+.center-value {
+  font-size: $font-size-base;
+  font-weight: $font-bold;
+  color: $text-primary;
+  font-variant-numeric: tabular-nums;
+}
+
+.chart-legend {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-2;
+  min-width: 120px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+  cursor: pointer;
+  border-radius: $radius-sm;
+  padding: 2px 4px;
+  transition: background-color $duration-fast $easing-standard;
+
+  &:hover {
+    background-color: $bg-light;
+  }
+}
+
+.legend-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: $radius-sm;
+  flex-shrink: 0;
+}
+
+.legend-name {
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  color: $text-primary;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100px;
+}
+
+.legend-percent {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  font-variant-numeric: tabular-nums;
+}
+
+.bar-container {
+  flex-direction: column;
+  padding: $spacing-2 0;
+}
+
+.bar-chart {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  gap: $spacing-4;
+  height: 180px;
+  width: 100%;
+}
+
+.bar-column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: $spacing-1;
+  flex: 1;
+  max-width: 50px;
+  cursor: pointer;
+}
+
+.bar-value {
+  font-size: $font-size-xs;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  font-variant-numeric: tabular-nums;
+}
+
+.bar-track {
+  width: 100%;
+  height: 120px;
+  background: $bg-light;
+  border-radius: $radius-md;
+  display: flex;
+  align-items: flex-end;
+  overflow: hidden;
+}
+
+.bar-fill {
+  width: 100%;
+  border-radius: $radius-md;
+  transition: height 0.3s ease;
+}
+
+.bar-label {
+  font-size: $font-size-xs;
+  font-weight: $font-medium;
+  color: $text-primary;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.line-container {
+  flex-direction: column;
+  gap: $spacing-2;
+}
+
+.line-chart {
+  width: 100%;
+  max-width: 280px;
+  height: auto;
+}
+
+.line-legend {
+  display: flex;
+  justify-content: center;
+  gap: $spacing-3;
+  flex-wrap: wrap;
+  margin-top: $spacing-2;
+}
+
+.line-legend-item {
+  display: flex;
+  align-items: center;
+  gap: $spacing-1;
+  cursor: pointer;
+}
+
+.legend-text {
+  font-size: $font-size-xs;
+  font-weight: $font-medium;
+  color: $text-primary;
+}
+
+.grid-line {
+  stroke: $border-color;
+}
+</style>
diff --git a/components/dashboard/DashboardAgentHero.stories.js b/components/dashboard/DashboardAgentHero.stories.js
new file mode 100644
index 0000000..73fc4bb
--- /dev/null
+++ b/components/dashboard/DashboardAgentHero.stories.js
@@ -0,0 +1,17 @@
+import DashboardAgentHero from './DashboardAgentHero.vue';
+
+export default {
+  title: 'Domain/Dashboard/DashboardAgentHero',
+  component: DashboardAgentHero,
+  args: {
+    userName: 'Alex'
+  }
+};
+
+export const WithName = {};
+
+export const Anonymous = {
+  args: {
+    userName: ''
+  }
+};
diff --git a/components/dashboard/DashboardAgentHero.vue b/components/dashboard/DashboardAgentHero.vue
new file mode 100644
index 0000000..5484473
--- /dev/null
+++ b/components/dashboard/DashboardAgentHero.vue
@@ -0,0 +1,392 @@
+<template>
+  <section v-if="!dismissed" class="agent-hero surface surface--brand">
+    <!-- Scattered finance icon vectors as the backdrop. -->
+    <div class="hero-ambient" aria-hidden="true">
+      <Wallet class="amb a1" :size="108" :stroke-width="1" />
+      <PieChart class="amb a2" :size="88" :stroke-width="1" />
+      <Coins class="amb a3" :size="76" :stroke-width="1" />
+      <Receipt class="amb a4" :size="96" :stroke-width="1" />
+      <PiggyBank class="amb a5" :size="84" :stroke-width="1" />
+      <TrendingUp class="amb a6" :size="80" :stroke-width="1" />
+      <CreditCard class="amb a7" :size="72" :stroke-width="1" />
+    </div>
+
+    <TButton
+      variant="text"
+      size="small"
+      :full-width="false"
+      class="hero-dismiss"
+      :aria-label="t('Dismiss')"
+      @click="dismiss"
+    >
+      <X :size="16" />
+    </TButton>
+
+    <div class="hero-grid">
+      <!-- Left: greeting with the copilot mark -->
+      <div class="hero-greet">
+        <span class="greet-icon"><Bot :size="28" /></span>
+        <div class="greet-text">
+          <h1 class="hero-title">{{ t('Hey {name}', { name: firstName }) }}</h1>
+          <p class="hero-sub">{{ t("Tell me what you want and I'll do it.") }}</p>
+        </div>
+      </div>
+
+      <!-- Right: ask box + quick actions -->
+      <div class="hero-main">
+        <form class="hero-ask" @submit.prevent="askFreeform">
+          <TInput
+            v-model="askText"
+            class="hero-input"
+            :placeholder="t('e.g. log 12 for lunch, or build me a report')"
+          />
+          <TButton
+            type="submit"
+            variant="primary"
+            :full-width="false"
+            class="hero-send"
+            :disabled="!askText.trim()"
+            :aria-label="t('Send')"
+          >
+            <ArrowUp :size="18" />
+          </TButton>
+        </form>
+
+        <div class="hero-actions">
+          <TButton
+            v-for="a in actions"
+            :key="a.key"
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="agent-chip"
+            @click="openAction(a.key)"
+          >
+            <component :is="a.icon" :size="15" />
+            <span>{{ a.label }}</span>
+          </TButton>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Quick action modal rendered outside the hero so blur/overflow can't clip it. -->
+  <DashboardQuickActionModal
+    v-if="activeAction"
+    :action="activeAction"
+    @close="activeAction = null"
+    @done="activeAction = null"
+    @submit="onActionSubmit"
+  />
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import {
+  Bot,
+  ArrowUp,
+  X,
+  PlusCircle,
+  FileBarChart,
+  ArrowLeftRight,
+  FileUp,
+  Wallet,
+  PieChart,
+  Coins,
+  Receipt,
+  PiggyBank,
+  TrendingUp,
+  CreditCard
+} from 'lucide-vue-next';
+import DashboardQuickActionModal from './DashboardQuickActionModal.vue';
+import TButton from '../TButton.vue';
+import TInput from '../TInput.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  /** User's first name shown in the greeting */
+  userName: { type: String, default: '' }
+});
+
+const emit = defineEmits([
+  /** Emitted when user submits a freeform ask: payload = { text: String } */
+  'ask',
+  /** Emitted when a quick-action chip submits: payload = action submission object */
+  'action-submit'
+]);
+
+const askText = ref('');
+const activeAction = ref(null);
+const dismissed = ref(false);
+
+const firstName = computed(() => props.userName || t('there'));
+
+const actions = computed(() => [
+  { key: 'log', icon: PlusCircle, label: t('Log a transaction') },
+  { key: 'transfer', icon: ArrowLeftRight, label: t('Transfer money') },
+  { key: 'report', icon: FileBarChart, label: t('Build a report') },
+  { key: 'import', icon: FileUp, label: t('Import a document') }
+]);
+
+const askFreeform = () => {
+  const text = askText.value.trim();
+  if (!text) return;
+  emit('ask', { text });
+  askText.value = '';
+};
+
+const openAction = (key) => {
+  activeAction.value = key;
+};
+
+const onActionSubmit = (payload) => {
+  activeAction.value = null;
+  emit('action-submit', payload);
+};
+
+// Dismiss is view-scoped: hides the hero until the component is re-mounted.
+const dismiss = () => {
+  dismissed.value = true;
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.agent-hero {
+  position: relative;
+  width: 100%;
+  border-radius: 18px;
+  padding: $spacing-3 $spacing-4;
+  overflow: hidden;
+  border: 1px solid $border-light;
+  box-shadow: $elevation-1;
+}
+
+/* Scattered icon backdrop */
+.hero-ambient {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+
+  .amb {
+    position: absolute;
+    color: var(--surface-deep);
+    opacity: 0.07;
+  }
+  .a1 {
+    top: 8%;
+    left: 2%;
+    transform: rotate(-12deg);
+  }
+  .a2 {
+    top: 12%;
+    right: 8%;
+    transform: rotate(10deg);
+  }
+  .a3 {
+    bottom: 10%;
+    left: 26%;
+    transform: rotate(8deg);
+  }
+  .a4 {
+    bottom: 6%;
+    right: 4%;
+    transform: rotate(-8deg);
+  }
+  .a5 {
+    top: 40%;
+    left: 40%;
+    transform: rotate(6deg);
+  }
+  .a6 {
+    top: 48%;
+    right: 30%;
+    transform: rotate(-6deg);
+  }
+  .a7 {
+    top: 4%;
+    left: 48%;
+    transform: rotate(12deg);
+  }
+}
+
+.hero-dismiss {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--surface-deep);
+  cursor: pointer;
+  opacity: 0.7;
+  transition: $duration-base $easing-standard;
+
+  &:hover {
+    opacity: 1;
+    background: var(--hover-overlay);
+  }
+}
+
+.hero-grid {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 3fr 7fr;
+  gap: $spacing-4;
+  align-items: center;
+  padding-right: $spacing-6;
+
+  @media (max-width: $breakpoint-md) {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Left: greeting with the copilot mark */
+.hero-greet {
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+  min-width: 0;
+}
+
+.greet-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 14px;
+  background: var(--glass-bg);
+  border: 1px solid $border-light;
+  color: var(--surface-deep);
+  flex-shrink: 0;
+  backdrop-filter: blur(8px);
+}
+
+.greet-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.hero-title {
+  margin: 0;
+  color: var(--surface-ink);
+  font-size: $font-size-2xl;
+  font-weight: $font-bold;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: $font-size-xl;
+  }
+}
+
+.hero-sub {
+  margin: 0;
+  color: var(--surface-ink);
+  opacity: 0.8;
+  font-size: $font-size-base;
+}
+
+/* Right column */
+.hero-main {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-2;
+  min-width: 0;
+}
+
+.hero-ask {
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+  padding: 5px 5px 5px $spacing-3;
+  background: $bg-white;
+  border: 1px solid $border-light;
+  border-radius: 12px;
+  box-shadow: $elevation-1;
+
+  &:focus-within {
+    border-color: $primary;
+    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
+  }
+}
+
+.hero-input {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  min-height: 0;
+  border: none;
+  background: transparent;
+
+  :deep(.t-input-element) {
+    padding: 0;
+    font-size: $font-size-base;
+  }
+
+  &.t-input--focused {
+    border-color: transparent;
+    box-shadow: none;
+  }
+}
+
+.hero-send {
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  border: none;
+  border-radius: 9px;
+  flex-shrink: 0;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-2;
+}
+
+.agent-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px $spacing-3;
+  border: 1px solid $border-light;
+  background: var(--glass-bg);
+  color: var(--surface-ink);
+  border-radius: 999px;
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  cursor: pointer;
+  backdrop-filter: blur(8px);
+  transition: $duration-base $easing-standard;
+
+  :deep(.button__text) {
+    gap: 6px;
+  }
+
+  &:hover {
+    background: var(--hover-overlay);
+    transform: translateY(-1px);
+  }
+}
+</style>
diff --git a/components/dashboard/DashboardKPIs.stories.js b/components/dashboard/DashboardKPIs.stories.js
new file mode 100644
index 0000000..02376ef
--- /dev/null
+++ b/components/dashboard/DashboardKPIs.stories.js
@@ -0,0 +1,36 @@
+import DashboardKPIs from './DashboardKPIs.vue';
+
+export default {
+  title: 'Domain/Dashboard/DashboardKPIs',
+  component: DashboardKPIs,
+  args: {
+    statistics: {
+      total_balance: 24850.5,
+      total_income: 7600.0,
+      total_expenses: 3250.25
+    },
+    currency: 'USD',
+    activeFilterChips: []
+  }
+};
+
+export const Default = {};
+
+export const WithActiveFilters = {
+  args: {
+    activeFilterChips: [
+      { key: 'dateRange', label: 'Jan 1 - Jan 31' },
+      { key: 'wallets', label: 'Main Checking' }
+    ]
+  }
+};
+
+export const DeficitPeriod = {
+  args: {
+    statistics: {
+      total_balance: 1520.0,
+      total_income: 1800.0,
+      total_expenses: 3950.0
+    }
+  }
+};
diff --git a/components/dashboard/DashboardKPIs.vue b/components/dashboard/DashboardKPIs.vue
new file mode 100644
index 0000000..c650072
--- /dev/null
+++ b/components/dashboard/DashboardKPIs.vue
@@ -0,0 +1,303 @@
+<template>
+  <div class="kpi-section">
+    <div v-if="activeFilterChips && activeFilterChips.length > 0" class="kpi-header">
+      <div class="active-filters">
+        <span v-for="chip in activeFilterChips" :key="chip.key" class="filter-chip">
+          <span class="filter-chip__label">{{ chip.label }}</span>
+          <button
+            type="button"
+            class="filter-chip__remove"
+            :aria-label="t('Remove filter')"
+            @click="$emit('remove-filter', chip.key)"
+          >
+            <X class="filter-chip__remove-icon" :size="12" />
+          </button>
+        </span>
+        <button
+          type="button"
+          class="filter-chip filter-chip--clear"
+          @click="$emit('clear-filters')"
+        >
+          {{ t('Clear all') }}
+        </button>
+      </div>
+    </div>
+
+    <div class="kpi-grid">
+      <article
+        v-for="card in kpiCards"
+        :key="card.key"
+        class="kpi-card tone-card surface"
+        :class="`surface--${card.tone}`"
+      >
+        <svg
+          class="kpi-decor"
+          viewBox="0 0 280 160"
+          preserveAspectRatio="xMaxYMid slice"
+          aria-hidden="true"
+        >
+          <circle cx="240" cy="40" r="60" fill="var(--surface-accent)" opacity="0.35" />
+          <circle cx="270" cy="120" r="36" fill="var(--surface-deep)" opacity="0.35" />
+          <circle cx="200" cy="130" r="10" fill="var(--surface-deep)" opacity="0.5" />
+        </svg>
+        <div class="kpi-icon">
+          <component :is="card.icon" :size="18" />
+        </div>
+        <div class="kpi-meta">
+          <span class="eyebrow">{{ card.label }}</span>
+          <p class="kpi-value">{{ formatCurrency(card.value) }}</p>
+        </div>
+      </article>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { X, Wallet, ArrowDownLeft, ArrowUpRight, PiggyBank } from 'lucide-vue-next';
+import { formatShortAmount } from '../../utils/currency';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  statistics: {
+    type: Object,
+    default: () => ({
+      total_balance: 0,
+      total_income: 0,
+      total_expenses: 0
+    })
+  },
+  currency: {
+    type: String,
+    default: 'USD'
+  },
+  activeFilterChips: {
+    type: Array,
+    default: () => []
+  },
+  formatter: {
+    type: Function,
+    default: null
+  }
+});
+
+defineEmits(['remove-filter', 'clear-filters']);
+
+const netValue = computed(() => {
+  const income = props.statistics?.total_income || 0;
+  const expenses = props.statistics?.total_expenses || 0;
+  return income - expenses;
+});
+
+const kpiCards = computed(() => [
+  {
+    key: 'balance',
+    label: t('Balance'),
+    value: props.statistics?.total_balance || 0,
+    icon: Wallet,
+    tone: 'brand'
+  },
+  {
+    key: 'income',
+    label: t('Income'),
+    value: props.statistics?.total_income || 0,
+    icon: ArrowDownLeft,
+    tone: 'income'
+  },
+  {
+    key: 'expenses',
+    label: t('Expenses'),
+    value: props.statistics?.total_expenses || 0,
+    icon: ArrowUpRight,
+    tone: 'expense'
+  },
+  {
+    key: 'net',
+    label: t('Net'),
+    value: netValue.value,
+    icon: PiggyBank,
+    tone: netValue.value >= 0 ? 'brand-soft' : 'expense'
+  }
+]);
+
+const formatCurrency = (value) => {
+  if (props.formatter) {
+    return props.formatter(value, props.currency);
+  }
+  return formatShortAmount(`${value} ${props.currency}`);
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.kpi-section {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-3;
+  width: 100%;
+}
+
+.kpi-header {
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+  flex-wrap: wrap;
+}
+
+.kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: $spacing-3;
+
+  @media (max-width: $breakpoint-lg) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    grid-template-columns: repeat(2, 1fr);
+    gap: $spacing-2;
+  }
+}
+
+.kpi-card {
+  position: relative;
+  padding: $spacing-4;
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+  overflow: hidden;
+  border-radius: 14px;
+
+  @media (max-width: $breakpoint-sm) {
+    padding: $spacing-3;
+    gap: $spacing-2;
+  }
+}
+
+.kpi-decor {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.kpi-icon {
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
+  background: var(--glass-bg);
+  border: 1px solid $border-light;
+  color: var(--surface-deep);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(6px);
+
+  @media (max-width: $breakpoint-sm) {
+    width: 28px;
+    height: 28px;
+    border-radius: 8px;
+  }
+}
+
+.kpi-meta {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+.eyebrow {
+  font-size: 10px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--surface-deep);
+  opacity: 0.85;
+}
+
+.kpi-value {
+  color: var(--surface-ink);
+  font-variant-numeric: tabular-nums;
+  margin: 0;
+  font-size: $font-size-lg;
+  font-weight: $font-bold;
+  letter-spacing: -0.015em;
+  line-height: 1.15;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: $font-size-base;
+  }
+}
+
+.active-filters {
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+  flex-wrap: wrap;
+}
+
+.filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-1;
+  padding: 4px 8px;
+  border-radius: $radius-lg;
+  background: rgba(var(--color-primary-rgb), 0.1);
+  border: 1px solid rgba(var(--color-primary-rgb), 0.2);
+  font-size: $font-size-xs;
+  color: $primary;
+
+  &--clear {
+    background: transparent;
+    border: 1px solid $border-light;
+    color: $text-muted;
+    cursor: pointer;
+    transition: all $duration-fast $easing-standard;
+
+    &:hover {
+      background: $bg-gray;
+      color: $text-secondary;
+    }
+  }
+}
+
+.filter-chip__label {
+  font-weight: $font-medium;
+}
+
+.filter-chip__remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: $primary;
+  opacity: 0.7;
+  transition: opacity $duration-fast $easing-standard;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.filter-chip__remove-icon {
+  stroke-width: 2.5;
+}
+</style>
diff --git a/components/dashboard/DashboardQuickActionModal.stories.js b/components/dashboard/DashboardQuickActionModal.stories.js
new file mode 100644
index 0000000..67f2a7f
--- /dev/null
+++ b/components/dashboard/DashboardQuickActionModal.stories.js
@@ -0,0 +1,44 @@
+import DashboardQuickActionModal from './DashboardQuickActionModal.vue';
+
+const sampleWallets = [
+  { id: 1, name: 'Main Checking', currency: 'USD' },
+  { id: 2, name: 'Savings Account', currency: 'USD' },
+  { id: 3, name: 'Euro Travel', currency: 'EUR' }
+];
+
+const sampleParties = [
+  { id: 1, name: 'Acme Supermarket' },
+  { id: 2, name: 'Electric Utility' },
+  { id: 3, name: 'Freelance Client' }
+];
+
+export default {
+  title: 'Domain/Dashboard/DashboardQuickActionModal',
+  component: DashboardQuickActionModal,
+  args: {
+    action: 'log',
+    wallets: sampleWallets,
+    parties: sampleParties,
+    busy: false
+  }
+};
+
+export const LogTransaction = {};
+
+export const TransferMoney = {
+  args: {
+    action: 'transfer'
+  }
+};
+
+export const BuildReport = {
+  args: {
+    action: 'report'
+  }
+};
+
+export const ImportDocument = {
+  args: {
+    action: 'import'
+  }
+};
diff --git a/components/dashboard/DashboardQuickActionModal.vue b/components/dashboard/DashboardQuickActionModal.vue
new file mode 100644
index 0000000..798ba06
--- /dev/null
+++ b/components/dashboard/DashboardQuickActionModal.vue
@@ -0,0 +1,482 @@
+<template>
+  <Teleport to="body">
+    <div class="qa-overlay" @click.self="$emit('close')">
+      <div class="qa-modal" role="dialog" :aria-label="config.title">
+        <header class="qa-head">
+          <span class="qa-icon"><component :is="config.icon" :size="18" /></span>
+          <div class="qa-heading">
+            <h3 class="qa-title">{{ config.title }}</h3>
+            <p class="qa-sub">{{ config.sub }}</p>
+          </div>
+          <button
+            type="button"
+            class="qa-close"
+            :aria-label="t('Close')"
+            @click="$emit('close')"
+          >
+            <X :size="18" />
+          </button>
+        </header>
+
+        <div class="qa-body">
+          <!-- Log a transaction -->
+          <template v-if="action === 'log'">
+            <div class="qa-row">
+              <button
+                type="button"
+                class="qa-toggle"
+                :class="{ active: form.type === 'expense' }"
+                @click="form.type = 'expense'"
+              >
+                {{ t('Expense') }}
+              </button>
+              <button
+                type="button"
+                class="qa-toggle"
+                :class="{ active: form.type === 'income' }"
+                @click="form.type = 'income'"
+              >
+                {{ t('Income') }}
+              </button>
+            </div>
+            <label class="qa-field">
+              <span class="qa-label">{{ t('Amount') }}</span>
+              <input
+                v-model.number="form.amount"
+                type="number"
+                step="0.01"
+                min="0"
+                class="qa-input"
+                :placeholder="t('0.00')"
+              />
+            </label>
+            <label class="qa-field">
+              <span class="qa-label">{{ t('What for?') }}</span>
+              <input
+                v-model="form.description"
+                type="text"
+                class="qa-input"
+                :placeholder="t('e.g. coffee')"
+              />
+            </label>
+            <label class="qa-field">
+              <span class="qa-label">{{ t('Wallet') }} ({{ t('optional') }})</span>
+              <select v-model="form.walletId" class="qa-input">
+                <option :value="null">{{ t('Default') }}</option>
+                <option v-for="w in wallets" :key="w.id" :value="w.id">{{ w.name }}</option>
+              </select>
+            </label>
+            <label class="qa-field">
+              <span class="qa-label">{{ t('Party') }} ({{ t('optional') }})</span>
+              <select v-model="form.partyId" class="qa-input">
+                <option :value="null">{{ t('None') }}</option>
+                <option v-for="p in parties" :key="p.id" :value="p.id">{{ p.name }}</option>
+              </select>
+            </label>
+            <label class="qa-field">
+              <span class="qa-label">{{ t('When') }} ({{ t('optional') }})</span>
+              <input v-model="form.date" type="date" class="qa-input" />
+            </label>
+          </template>
+
+          <!-- Transfer money -->
+          <template v-else-if="action === 'transfer'">
+            <label class="qa-field">
+              <span class="qa-label">{{ t('Amount') }}</span>
+              <input
+                v-model.number="form.amount"
+                type="number"
+                step="0.01"
+                min="0"
+                class="qa-input"
+                :placeholder="t('0.00')"
+              />
+            </label>
+            <label class="qa-field">
+              <span class="qa-label">{{ t('From wallet') }}</span>
+              <select v-model="form.fromWalletId" class="qa-input">
+                <option :value="null" disabled>{{ t('Select a wallet') }}</option>
+                <option v-for="w in wallets" :key="w.id" :value="w.id">
+                  {{ w.name }} ({{ w.currency }})
+                </option>
+              </select>
+            </label>
+            <label class="qa-field">
+              <span class="qa-label">{{ t('To wallet') }}</span>
+              <select v-model="form.toWalletId" class="qa-input">
+                <option :value="null" disabled>{{ t('Select a wallet') }}</option>
+                <option v-for="w in wallets" :key="w.id" :value="w.id">
+                  {{ w.name }} ({{ w.currency }})
+                </option>
+              </select>
+            </label>
+            <label v-if="needsRate" class="qa-field">
+              <span class="qa-label">{{ t('Exchange rate') }}</span>
+              <input
+                v-model.number="form.exchangeRate"
+                type="number"
+                step="0.0001"
+                min="0"
+                class="qa-input"
+              />
+            </label>
+          </template>
+
+          <!-- Build a report -->
+          <template v-else-if="action === 'report'">
+            <label class="qa-field">
+              <span class="qa-label">{{ t('Period') }}</span>
+              <select v-model="form.period" class="qa-input">
+                <option value="this month">{{ t('This month') }}</option>
+                <option value="last month">{{ t('Last month') }}</option>
+                <option value="this year">{{ t('This year') }}</option>
+              </select>
+            </label>
+            <label class="qa-field">
+              <span class="qa-label">{{ t('Focus') }} ({{ t('optional') }})</span>
+              <input
+                v-model="form.focus"
+                type="text"
+                class="qa-input"
+                :placeholder="t('e.g. dining, subscriptions')"
+              />
+            </label>
+          </template>
+
+          <!-- Import a document -->
+          <template v-else-if="action === 'import'">
+            <div class="qa-field">
+              <span class="qa-label">{{ t('Document') }}</span>
+              <button type="button" class="qa-file" @click="fileInput?.click()">
+                <Upload :size="16" />
+                <span>{{ fileName || t('Choose a file') }}</span>
+              </button>
+              <input
+                ref="fileInput"
+                type="file"
+                accept="image/*,.pdf,.csv"
+                class="qa-file-input"
+                @change="onFile"
+              />
+            </div>
+            <label class="qa-field">
+              <span class="qa-label">{{ t('Anything to add?') }} ({{ t('optional') }})</span>
+              <input
+                v-model="form.prompt"
+                type="text"
+                class="qa-input"
+                :placeholder="t('e.g. this is a bank statement for June')"
+              />
+            </label>
+          </template>
+        </div>
+
+        <div class="qa-actions">
+          <TButton
+            type="button"
+            variant="secondary"
+            size="medium"
+            @click="$emit('close')"
+          >
+            {{ t('Cancel') }}
+          </TButton>
+          <TButton
+            type="button"
+            variant="primary"
+            size="medium"
+            :disabled="!canSubmit || busy"
+            :loading="busy"
+            @click="handleSubmit"
+          >
+            {{ submitLabel }}
+          </TButton>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from 'vue';
+import { X, PlusCircle, ArrowLeftRight, FileBarChart, FileUp, Upload } from 'lucide-vue-next';
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  action: {
+    type: String,
+    default: 'log',
+    validator: (val) => ['log', 'transfer', 'report', 'import'].includes(val)
+  },
+  wallets: {
+    type: Array,
+    default: () => []
+  },
+  parties: {
+    type: Array,
+    default: () => []
+  },
+  busy: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['close', 'submit']);
+
+const fileInput = ref(null);
+const fileName = ref('');
+const selectedFile = ref(null);
+
+const form = reactive({
+  type: 'expense',
+  amount: null,
+  description: '',
+  walletId: null,
+  partyId: null,
+  date: '',
+  fromWalletId: null,
+  toWalletId: null,
+  exchangeRate: null,
+  period: 'this month',
+  focus: '',
+  prompt: ''
+});
+
+const CONFIG = {
+  log: {
+    icon: PlusCircle,
+    title: t('Log a transaction'),
+    sub: t("Fill in the details and I'll record it")
+  },
+  transfer: {
+    icon: ArrowLeftRight,
+    title: t('Transfer money'),
+    sub: t('Move money between your wallets')
+  },
+  report: {
+    icon: FileBarChart,
+    title: t('Build a report'),
+    sub: t('Pick what to summarise')
+  },
+  import: {
+    icon: FileUp,
+    title: t('Import a document'),
+    sub: t('Upload a statement, invoice or receipt to extract')
+  }
+};
+
+const config = computed(() => CONFIG[props.action] || CONFIG.log);
+const isDirect = computed(() => props.action === 'log' || props.action === 'transfer');
+const submitLabel = computed(() => (isDirect.value ? t('Save') : t('Ask Trakli')));
+
+const walletById = (id) => props.wallets.find((w) => w.id === id);
+
+const needsRate = computed(() => {
+  const from = walletById(form.fromWalletId);
+  const to = walletById(form.toWalletId);
+  return !!from && !!to && from.currency !== to.currency;
+});
+
+const onFile = (e) => {
+  const f = e.target.files?.[0] ?? null;
+  selectedFile.value = f;
+  fileName.value = f?.name ?? '';
+};
+
+const canSubmit = computed(() => {
+  if (props.action === 'log') return typeof form.amount === 'number' && form.amount > 0;
+  if (props.action === 'transfer') {
+    return (
+      typeof form.amount === 'number' &&
+      form.amount > 0 &&
+      !!form.fromWalletId &&
+      !!form.toWalletId &&
+      form.fromWalletId !== form.toWalletId &&
+      (!needsRate.value || (typeof form.exchangeRate === 'number' && form.exchangeRate > 0))
+    );
+  }
+  if (props.action === 'import') return !!selectedFile.value;
+  return true;
+});
+
+const handleSubmit = () => {
+  if (!canSubmit.value || props.busy) return;
+  emit('submit', {
+    action: props.action,
+    data: { ...form },
+    file: selectedFile.value
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.qa-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1300;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  overflow-y: auto;
+  padding: $spacing-4;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(2px);
+}
+
+.qa-modal {
+  width: 100%;
+  max-width: 440px;
+  margin: auto;
+  background: $bg-white;
+  border-radius: $radius-xl;
+  box-shadow: $shadow-lg;
+  overflow: hidden;
+}
+
+.qa-head {
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+  padding: $spacing-4;
+  border-bottom: 1px solid $border-light;
+}
+
+.qa-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  background: $primary-light;
+  color: $primary;
+  flex-shrink: 0;
+}
+
+.qa-heading {
+  flex: 1;
+  min-width: 0;
+}
+
+.qa-title {
+  margin: 0;
+  font-size: $font-size-base;
+  font-weight: $font-bold;
+  color: $text-primary;
+}
+
+.qa-sub {
+  margin: 0;
+  font-size: $font-size-xs;
+  color: $text-muted;
+}
+
+.qa-close {
+  border: none;
+  background: transparent;
+  color: $text-muted;
+  cursor: pointer;
+  display: inline-flex;
+  padding: 4px;
+  border-radius: 8px;
+  transition: background-color $duration-fast $easing-standard;
+
+  &:hover {
+    background: $bg-gray;
+    color: $text-secondary;
+  }
+}
+
+.qa-body {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-3;
+  padding: $spacing-4;
+}
+
+.qa-row {
+  display: flex;
+  gap: $spacing-2;
+}
+
+.qa-toggle {
+  flex: 1;
+  padding: $spacing-2;
+  border: 1px solid $border-light;
+  border-radius: $radius-md;
+  background: $bg-white;
+  color: $text-secondary;
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  cursor: pointer;
+  transition: all $duration-fast $easing-standard;
+
+  &.active {
+    background: $primary-light;
+    border-color: $primary;
+    color: $primary;
+  }
+}
+
+.qa-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.qa-label {
+  font-size: $font-size-xs;
+  color: $text-muted;
+}
+
+.qa-input {
+  padding: 8px 10px;
+  border: 1px solid $border-light;
+  border-radius: $radius-md;
+  background: $bg-white;
+  color: $text-primary;
+  font-size: $font-size-sm;
+  font-family: inherit;
+
+  &:focus {
+    outline: none;
+    border-color: $primary;
+  }
+}
+
+.qa-file {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-2;
+  padding: 8px 10px;
+  border: 1px dashed $primary-muted;
+  border-radius: $radius-md;
+  background: $bg-light;
+  color: $text-secondary;
+  font-size: $font-size-sm;
+  cursor: pointer;
+  width: 100%;
+
+  &:hover {
+    border-color: $primary;
+    color: $primary;
+  }
+}
+
+.qa-file-input {
+  display: none;
+}
+
+.qa-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: $spacing-2;
+  padding: $spacing-3 $spacing-4;
+  border-top: 1px solid $border-light;
+}
+</style>
diff --git a/components/dashboard/DashboardWalletSelector.stories.js b/components/dashboard/DashboardWalletSelector.stories.js
new file mode 100644
index 0000000..2eace59
--- /dev/null
+++ b/components/dashboard/DashboardWalletSelector.stories.js
@@ -0,0 +1,24 @@
+import DashboardWalletSelector from './DashboardWalletSelector.vue';
+
+const sampleWallets = [
+  { id: 1, name: 'Main Checking', currency: 'USD' },
+  { id: 2, name: 'Savings Account', currency: 'USD' },
+  { id: 3, name: 'Euro Travel', currency: 'EUR' }
+];
+
+export default {
+  title: 'Domain/Dashboard/DashboardWalletSelector',
+  component: DashboardWalletSelector,
+  args: {
+    wallets: sampleWallets,
+    modelValue: null
+  }
+};
+
+export const AllWalletsSelected = {};
+
+export const SpecificWalletSelected = {
+  args: {
+    modelValue: 1
+  }
+};
diff --git a/components/dashboard/DashboardWalletSelector.vue b/components/dashboard/DashboardWalletSelector.vue
new file mode 100644
index 0000000..d86f73a
--- /dev/null
+++ b/components/dashboard/DashboardWalletSelector.vue
@@ -0,0 +1,148 @@
+<template>
+  <TDropdown>
+    <template #trigger="{ isOpen }">
+      <button
+        type="button"
+        class="wallet-selector"
+        :aria-expanded="isOpen"
+        :title="t('Select wallet')"
+      >
+        <Wallet class="wallet-icon" :size="15" />
+        <span class="wallet-name">{{ selectedWalletName }}</span>
+        <ChevronDown class="chevron" :class="{ rotated: isOpen }" :size="16" />
+      </button>
+    </template>
+    <div class="wallet-dropdown-menu">
+      <TDropdownItem
+        v-for="wallet in allWallets"
+        :key="wallet.id ?? 'all'"
+        class="wallet-dropdown-item"
+        :class="{ 'is-selected': modelValue === wallet.id }"
+        @click="selectWallet(wallet.id)"
+      >
+        <span class="wallet-option__name">{{ wallet.name }}</span>
+        <span v-if="wallet.currency" class="wallet-option__currency">{{ wallet.currency }}</span>
+      </TDropdownItem>
+    </div>
+  </TDropdown>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { ChevronDown, Wallet } from 'lucide-vue-next';
+import TDropdown from '../TDropdown.vue';
+import TDropdownItem from '../TDropdownItem.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number, null],
+    default: null
+  },
+  wallets: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'select-wallet']);
+
+const allWallets = computed(() => [
+  { id: null, name: t('All Wallets'), currency: '' },
+  ...props.wallets
+]);
+
+const selectedWallet = computed(() => {
+  if (props.modelValue === null || props.modelValue === undefined) return null;
+  return props.wallets.find((w) => w.id === props.modelValue) || null;
+});
+
+const selectedWalletName = computed(() => {
+  if (!selectedWallet.value) return t('All Wallets');
+  return selectedWallet.value.name;
+});
+
+const selectWallet = (id) => {
+  emit('update:modelValue', id);
+  emit('select-wallet', id);
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.wallet-selector {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-2;
+  padding: $spacing-2 $spacing-3;
+  background: var(--glass-bg, rgba(255, 255, 255, 0.7));
+  border-radius: 999px;
+  border: 1px solid $border-light;
+  backdrop-filter: blur(10px);
+  box-shadow: $elevation-1;
+  cursor: pointer;
+  user-select: none;
+  width: fit-content;
+  transition: background-color $duration-fast $easing-standard;
+
+  &:hover {
+    background: var(--hover-overlay, rgba(0, 0, 0, 0.04));
+  }
+}
+
+.wallet-icon {
+  color: var(--surface-deep, $text-secondary);
+  flex-shrink: 0;
+}
+
+.wallet-name {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  color: var(--surface-ink, $text-primary);
+  white-space: nowrap;
+}
+
+.chevron {
+  color: var(--surface-deep, $text-secondary);
+  transition: transform $duration-fast $easing-standard;
+
+  &.rotated {
+    transform: rotate(180deg);
+  }
+}
+
+.wallet-dropdown-menu {
+  min-width: 180px;
+  padding: $spacing-1 0;
+}
+
+.wallet-dropdown-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: $spacing-2;
+
+  &.is-selected {
+    font-weight: $font-bold;
+    color: var(--color-primary);
+  }
+}
+
+.wallet-option__name {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wallet-option__currency {
+  flex: 0 0 auto;
+  font-size: $font-size-xs;
+  opacity: 0.75;
+}
+</style>
diff --git a/components/dashboard/QuickInsights.stories.js b/components/dashboard/QuickInsights.stories.js
new file mode 100644
index 0000000..bfda3ce
--- /dev/null
+++ b/components/dashboard/QuickInsights.stories.js
@@ -0,0 +1,49 @@
+import QuickInsights from './QuickInsights.vue';
+
+export default {
+  title: 'Domain/Dashboard/QuickInsights',
+  component: QuickInsights,
+  args: {
+    topIncome: {
+      party: 'TechCorp Solutions',
+      amount: 4800.0
+    },
+    topExpense: {
+      party: 'Downtown Apartment',
+      amount: 1650.0
+    },
+    savingsRate: 32,
+    riskLevel: 'low',
+    periodLabel: 'March 2024',
+    currency: 'USD'
+  }
+};
+
+export const HealthyFinances = {};
+
+export const ModerateRisk = {
+  args: {
+    topIncome: {
+      party: 'Freelance Design',
+      amount: 2200.0
+    },
+    topExpense: {
+      party: 'Medical Expenses',
+      amount: 1850.0
+    },
+    savingsRate: 12,
+    riskLevel: 'medium'
+  }
+};
+
+export const HighRisk = {
+  args: {
+    topIncome: null,
+    topExpense: {
+      party: 'Emergency Car Repair',
+      amount: 2400.0
+    },
+    savingsRate: 0,
+    riskLevel: 'high'
+  }
+};
diff --git a/components/dashboard/QuickInsights.vue b/components/dashboard/QuickInsights.vue
new file mode 100644
index 0000000..7ade305
--- /dev/null
+++ b/components/dashboard/QuickInsights.vue
@@ -0,0 +1,307 @@
+<template>
+  <div class="quick-insights">
+    <Lightbulb class="card-glyph" :size="128" :stroke-width="1" aria-hidden="true" />
+    <div class="insights-header">
+      <h3 class="title">{{ t('Insights') }}</h3>
+      <span class="period">{{ periodLabel || t('This Period') }}</span>
+    </div>
+
+    <div class="insights-content">
+      <div class="insight-stat">
+        <div class="stat-icon income">
+          <TrendingUp :size="18" />
+        </div>
+        <div class="stat-info">
+          <span class="stat-label">{{ t('Top Income') }}</span>
+          <span class="stat-value">{{ topIncome?.party || t('N/A') }}</span>
+          <span v-if="topIncome" class="stat-amount income">
+            {{ formatAmount(topIncome.amount) }}
+          </span>
+        </div>
+      </div>
+
+      <div class="divider" />
+
+      <div class="insight-stat">
+        <div class="stat-icon expense">
+          <TrendingDown :size="18" />
+        </div>
+        <div class="stat-info">
+          <span class="stat-label">{{ t('Top Expense') }}</span>
+          <span class="stat-value">{{ topExpense?.party || t('N/A') }}</span>
+          <span v-if="topExpense" class="stat-amount expense">
+            {{ formatAmount(topExpense.amount) }}
+          </span>
+        </div>
+      </div>
+
+      <div class="divider" />
+
+      <div class="insight-stat">
+        <div class="stat-icon" :class="savingsClass">
+          <Percent :size="18" />
+        </div>
+        <div class="stat-info">
+          <span class="stat-label">{{ t('Savings Rate') }}</span>
+          <span class="stat-value large" :class="savingsClass">{{ resolvedSavingsRate }}%</span>
+        </div>
+      </div>
+
+      <div class="divider" />
+
+      <div class="insight-stat">
+        <div class="stat-icon" :class="riskClass">
+          <Shield :size="18" />
+        </div>
+        <div class="stat-info">
+          <span class="stat-label">{{ t('Risk Level') }}</span>
+          <span class="stat-value" :class="riskClass">{{ displayRiskLevel }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { TrendingUp, TrendingDown, Percent, Shield, Lightbulb } from 'lucide-vue-next';
+import { formatShortAmount } from '../../utils/currency';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  topIncome: {
+    type: Object,
+    default: null
+  },
+  topExpense: {
+    type: Object,
+    default: null
+  },
+  savingsRate: {
+    type: Number,
+    default: 0
+  },
+  riskLevel: {
+    type: String,
+    default: 'low'
+  },
+  periodLabel: {
+    type: String,
+    default: ''
+  },
+  currency: {
+    type: String,
+    default: 'USD'
+  }
+});
+
+const resolvedSavingsRate = computed(() => {
+  return Math.round(Number(props.savingsRate ?? 0));
+});
+
+const savingsClass = computed(() => {
+  const rate = resolvedSavingsRate.value;
+  if (rate >= 20) return 'good';
+  if (rate >= 10) return 'moderate';
+  return 'low';
+});
+
+const displayRiskLevel = computed(() => {
+  const level = String(props.riskLevel || '').toLowerCase();
+  if (level === 'low') return t('Low');
+  if (level === 'medium') return t('Medium');
+  if (level === 'high') return t('High');
+  return t('Unknown');
+});
+
+const riskClass = computed(() => {
+  const level = String(props.riskLevel || '').toLowerCase();
+  if (level === 'low') return 'good';
+  if (level === 'medium') return 'moderate';
+  return 'low';
+});
+
+const formatAmount = (value) => {
+  return formatShortAmount(`${value || 0} ${props.currency}`);
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.quick-insights {
+  position: relative;
+  overflow: hidden;
+  background:
+    radial-gradient(120% 120% at 100% 0%, rgba(var(--color-warning-rgb), 0.06), transparent 58%),
+    $bg-white;
+  border-radius: 16px;
+  box-shadow: $elevation-1;
+  border: 1px solid $border-light;
+  padding: $spacing-4;
+
+  > *:not(.card-glyph) {
+    position: relative;
+  }
+}
+
+.card-glyph {
+  position: absolute;
+  right: -18px;
+  bottom: -18px;
+  color: $warning;
+  opacity: 0.06;
+  pointer-events: none;
+}
+
+.insights-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: $spacing-3;
+}
+
+.title {
+  font-size: $font-size-base;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  margin: 0;
+}
+
+.period {
+  font-size: $font-size-xs;
+  color: $text-muted;
+}
+
+.insights-content {
+  display: flex;
+  align-items: stretch;
+  gap: $spacing-4;
+
+  @media (max-width: $breakpoint-md) {
+    flex-wrap: wrap;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    flex-direction: column;
+    gap: $spacing-3;
+  }
+}
+
+.insight-stat {
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  gap: $spacing-3;
+  min-width: 0;
+
+  @media (max-width: $breakpoint-md) {
+    flex: 1 1 calc(50% - $spacing-4);
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    flex: 1 1 100%;
+  }
+}
+
+.divider {
+  width: 1px;
+  background: $border-color;
+  align-self: stretch;
+
+  @media (max-width: $breakpoint-sm) {
+    width: 100%;
+    height: 1px;
+  }
+}
+
+.stat-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: $radius-lg;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  &.income {
+    background: rgba(var(--color-success-rgb), 0.12);
+    color: $success;
+  }
+
+  &.expense {
+    background: rgba(var(--color-error-rgb), 0.12);
+    color: $error-color;
+  }
+
+  &.good {
+    background: rgba(var(--color-primary-rgb), 0.12);
+    color: $primary;
+  }
+
+  &.moderate {
+    background: rgba(var(--color-warning-rgb), 0.15);
+    color: var(--color-warning-text, $warning);
+  }
+
+  &.low {
+    background: rgba(var(--color-error-rgb), 0.12);
+    color: $error-color;
+  }
+}
+
+.stat-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.stat-label {
+  font-size: $font-size-xs;
+  color: $text-muted;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.stat-value {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &.large {
+    font-size: $font-size-lg;
+  }
+
+  &.good {
+    color: $primary;
+  }
+
+  &.moderate {
+    color: var(--color-warning-text, $warning);
+  }
+
+  &.low {
+    color: $error-color;
+  }
+}
+
+.stat-amount {
+  font-size: $font-size-xs;
+  font-weight: $font-medium;
+  font-variant-numeric: tabular-nums;
+
+  &.income {
+    color: $success;
+  }
+
+  &.expense {
+    color: $error-color;
+  }
+}
+</style>
diff --git a/components/dashboard/RecentTransactions.stories.js b/components/dashboard/RecentTransactions.stories.js
new file mode 100644
index 0000000..0791f5b
--- /dev/null
+++ b/components/dashboard/RecentTransactions.stories.js
@@ -0,0 +1,63 @@
+import RecentTransactions from './RecentTransactions.vue';
+
+const sampleTransactions = [
+  {
+    id: 1,
+    party: 'Acme Supermarket',
+    category: 'Groceries',
+    type: 'EXPENSE',
+    amount: 84.5,
+    date: new Date().toISOString()
+  },
+  {
+    id: 2,
+    party: 'Client Retainer',
+    category: 'Salary & Income',
+    type: 'INCOME',
+    amount: 3200.0,
+    date: new Date(Date.now() - 86400000).toISOString()
+  },
+  {
+    id: 3,
+    party: 'Metro Transit',
+    category: 'Transport',
+    type: 'EXPENSE',
+    amount: 14.0,
+    date: new Date(Date.now() - 86400000 * 3).toISOString()
+  },
+  {
+    id: 4,
+    party: 'Electric & Gas Utility',
+    category: 'Utilities',
+    type: 'EXPENSE',
+    amount: 145.2,
+    date: new Date(Date.now() - 86400000 * 6).toISOString()
+  },
+  {
+    id: 5,
+    party: 'Coffee Corner',
+    category: 'Food & Dining',
+    type: 'EXPENSE',
+    amount: 5.75,
+    date: new Date(Date.now() - 86400000 * 12).toISOString()
+  }
+];
+
+export default {
+  title: 'Domain/Dashboard/RecentTransactions',
+  component: RecentTransactions,
+  args: {
+    transactions: sampleTransactions,
+    limit: 5,
+    viewAllTo: '/transactions',
+    currency: 'USD'
+  }
+};
+
+export const Default = {};
+
+export const Empty = {
+  args: {
+    transactions: []
+  }
+};
diff --git a/components/dashboard/RecentTransactions.vue b/components/dashboard/RecentTransactions.vue
new file mode 100644
index 0000000..8163cf0
--- /dev/null
+++ b/components/dashboard/RecentTransactions.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="recent-transactions">
+    <Receipt class="card-glyph" :size="128" :stroke-width="1" aria-hidden="true" />
+    <div class="header">
+      <h3 class="title">{{ t('Recent Transactions') }}</h3>
+      <NuxtLink v-if="viewAllTo" :to="viewAllTo" class="view-all">
+        {{ t('View All') }}
+      </NuxtLink>
+    </div>
+
+    <div v-if="displayedTransactions.length === 0" class="empty-state">
+      <p>{{ t('No transactions yet') }}</p>
+    </div>
+
+    <div v-else class="transaction-list">
+      <div
+        v-for="txn in displayedTransactions"
+        :key="txn.id"
+        class="transaction-row"
+        @click="$emit('click-transaction', txn)"
+      >
+        <div class="txn-icon" :class="isIncome(txn) ? 'income' : 'expense'">
+          <ArrowDownLeft v-if="isIncome(txn)" :size="16" />
+          <ArrowUpRight v-else :size="16" />
+        </div>
+        <div class="txn-details">
+          <span class="txn-party">{{ txn.party || txn.description || t('Unknown') }}</span>
+          <span class="txn-category">{{ txn.category || t('Uncategorized') }}</span>
+        </div>
+        <div class="txn-right">
+          <span class="txn-amount" :class="isIncome(txn) ? 'income' : 'expense'">
+            {{ isIncome(txn) ? '+' : '-' }}{{ formatAmountValue(txn.amount) }}
+          </span>
+          <span class="txn-time">{{ formatRelativeTime(txn.date) }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { ArrowDownLeft, ArrowUpRight, Receipt } from 'lucide-vue-next';
+import { formatAmount } from '../../utils/currency';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  transactions: {
+    type: Array,
+    default: () => []
+  },
+  limit: {
+    type: Number,
+    default: 5
+  },
+  viewAllTo: {
+    type: String,
+    default: '/transactions'
+  },
+  currency: {
+    type: String,
+    default: 'USD'
+  }
+});
+
+defineEmits(['click-transaction']);
+
+const displayedTransactions = computed(() => {
+  return (props.transactions || []).slice(0, props.limit);
+});
+
+const isIncome = (txn) => {
+  const type = String(txn?.type || '').toUpperCase();
+  return type === 'INCOME' || type === 'CREDIT';
+};
+
+const formatAmountValue = (amt) => {
+  if (amt === undefined || amt === null) return '0.00';
+  return formatAmount(`${Math.abs(amt)} ${props.currency}`);
+};
+
+const formatRelativeTime = (dateStr) => {
+  if (!dateStr) return '';
+
+  const date = new Date(String(dateStr).includes('T') ? dateStr : `${dateStr}T00:00:00`);
+  const now = new Date();
+  now.setHours(0, 0, 0, 0);
+  const diffMs = now.getTime() - date.getTime();
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+  if (diffDays <= 0) return t('Today');
+  if (diffDays === 1) return t('Yesterday');
+  if (diffDays < 7) return `${diffDays}d ago`;
+  if (diffDays < 30) return `${Math.floor(diffDays / 7)}w ago`;
+  return `${Math.floor(diffDays / 30)}mo ago`;
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.recent-transactions {
+  position: relative;
+  overflow: hidden;
+  background:
+    radial-gradient(120% 100% at 100% 0%, rgba(var(--color-info-rgb), 0.05), transparent 58%),
+    $bg-white;
+  border-radius: $radius-xl;
+  box-shadow: $shadow-sm;
+  border: 1px solid $border-color;
+  padding: $spacing-4;
+  min-height: 320px;
+  display: flex;
+  flex-direction: column;
+
+  > *:not(.card-glyph) {
+    position: relative;
+  }
+}
+
+.card-glyph {
+  position: absolute;
+  right: -18px;
+  bottom: -18px;
+  color: var(--color-info, $info);
+  opacity: 0.05;
+  pointer-events: none;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: $spacing-3;
+}
+
+.title {
+  font-size: $font-size-base;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  margin: 0;
+}
+
+.view-all {
+  font-size: $font-size-xs;
+  color: $primary;
+  text-decoration: none;
+  font-weight: $font-medium;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.empty-state {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $text-muted;
+  font-size: $font-size-sm;
+}
+
+.transaction-list {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-2;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.transaction-row {
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+  padding: $spacing-2;
+  border-radius: $radius-lg;
+  cursor: pointer;
+  transition: background-color $duration-fast $easing-standard;
+
+  &:hover {
+    background: $bg-light;
+  }
+}
+
+.txn-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  &.income {
+    background: rgba(var(--color-success-rgb), 0.12);
+    color: $success;
+  }
+
+  &.expense {
+    background: rgba(var(--color-error-rgb), 0.12);
+    color: $error-color;
+  }
+}
+
+.txn-details {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.txn-party {
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  color: $text-primary;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.txn-category {
+  font-size: $font-size-xs;
+  color: $text-muted;
+}
+
+.txn-right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+}
+
+.txn-amount {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  font-variant-numeric: tabular-nums;
+
+  &.income {
+    color: $success;
+  }
+
+  &.expense {
+    color: $error-color;
+  }
+}
+
+.txn-time {
+  font-size: $font-size-xs;
+  color: $text-muted;
+}
+</style>
diff --git a/components/extensions/DescriptorRenderer.stories.js b/components/extensions/DescriptorRenderer.stories.js
new file mode 100644
index 0000000..7c831d5
--- /dev/null
+++ b/components/extensions/DescriptorRenderer.stories.js
@@ -0,0 +1,96 @@
+import { h } from 'vue';
+import DescriptorRenderer from './DescriptorRenderer.vue';
+import { useExtensionSlots } from '../../composables/useExtensionSlots';
+
+export default {
+  title: 'Primitives/DescriptorRenderer',
+  component: DescriptorRenderer,
+};
+
+const baseContribution = {
+  key: 'plaid',
+  slot: 'settings.integrations',
+  integration: {
+    key: 'plaid',
+    name: 'Plaid Bank Sync',
+    description: 'Automatically import bank balances and transactions.',
+    icon: 'Building2',
+    configured: true,
+    entitled: true,
+    ui: {
+      slots: ['settings.integrations'],
+      card: { title: 'Plaid Bank Sync', description: 'Connect external bank accounts.', cta: 'Manage Accounts' }
+    }
+  },
+  ui: {
+    slots: ['settings.integrations'],
+    card: { title: 'Plaid Bank Sync', description: 'Connect external bank accounts.', cta: 'Manage Accounts' }
+  },
+  order: 10,
+  configured: true
+};
+
+export const CardIntegration = {
+  args: { contribution: baseContribution }
+};
+
+export const SidebarNav = {
+  args: {
+    contribution: {
+      ...baseContribution,
+      slot: 'sidebar.nav',
+      ui: {
+        ...baseContribution.ui,
+        card: { title: 'Bank Feeds', href: '/banks' }
+      }
+    }
+  }
+};
+
+export const OnboardingStep = {
+  args: {
+    contribution: {
+      ...baseContribution,
+      slot: 'onboarding.steps',
+      ui: {
+        ...baseContribution.ui,
+        onboarding: {
+          title: 'Connect your accounts',
+          description: 'Link your checking, savings, or credit card accounts.',
+          href: '/connect'
+        }
+      }
+    }
+  }
+};
+
+export const CustomPluginEscapeHatch = {
+  render: () => ({
+    components: { DescriptorRenderer },
+    setup() {
+      const { registerComponent } = useExtensionSlots();
+      // Register custom component via plugin escape hatch
+      registerComponent('custom-widget', {
+        props: ['contribution'],
+        render() {
+          return h(
+            'div',
+            { style: 'padding: 1rem; background: #e0f2fe; border: 1px solid #0284c7; border-radius: 8px;' },
+            'Custom Plugin Registered Component: ' + this.contribution.integration.name
+          );
+        }
+      });
+
+      const contribution = {
+        ...baseContribution,
+        ui: {
+          ...baseContribution.ui,
+          component: 'custom-widget'
+        }
+      };
+
+      return { contribution };
+    },
+    template: '<DescriptorRenderer :contribution="contribution" />'
+  })
+};
diff --git a/components/extensions/DescriptorRenderer.vue b/components/extensions/DescriptorRenderer.vue
new file mode 100644
index 0000000..3c941c1
--- /dev/null
+++ b/components/extensions/DescriptorRenderer.vue
@@ -0,0 +1,198 @@
+<template>
+  <!-- Escape hatch: a plugin Nuxt layer registered a real component. -->
+  <component :is="resolved" v-if="resolved" :contribution="contribution" @next="$emit('next')" />
+
+  <!-- Sidebar nav entry -->
+  <NuxtLink v-else-if="variant === 'sidebar.nav'" :to="href || '#'" class="ext-nav-item">
+    <component :is="icon" class="ext-nav-icon" />
+    <span class="ext-nav-label">{{ card?.title || integration.name }}</span>
+  </NuxtLink>
+
+  <!-- Onboarding step -->
+  <div v-else-if="variant === 'onboarding.steps'" class="ext-onboarding">
+    <div class="ext-onboarding-icon">
+      <component :is="icon" />
+    </div>
+    <h2 class="ext-onboarding-title">{{ onboarding?.title || card?.title || integration.name }}</h2>
+    <p v-if="onboarding?.description || card?.description" class="ext-onboarding-desc">
+      {{ onboarding?.description || card?.description }}
+    </p>
+    <div class="ext-onboarding-actions">
+      <TButton
+        v-if="href"
+        :to="href"
+        :text="card?.cta || 'Open'"
+        variant="outline"
+        :full-width="false"
+      />
+      <TButton :text="'Continue'" :full-width="false" @click="$emit('next')" />
+    </div>
+  </div>
+
+  <!-- Default: an integration card (settings.integrations, dashboard.widgets) -->
+  <TCard v-else class="ext-card">
+    <div class="ext-card-head">
+      <span class="ext-card-icon"><component :is="icon" /></span>
+      <h3 class="ext-card-title">{{ card?.title || integration.name }}</h3>
+      <span v-if="!contribution.configured" class="ext-card-badge">Needs setup</span>
+    </div>
+    <p v-if="card?.description || integration.description" class="ext-card-desc">
+      {{ card?.description || integration.description }}
+    </p>
+    <TButton
+      v-if="card?.cta"
+      :to="href || undefined"
+      :text="card.cta"
+      variant="outline"
+      size="small"
+      :full-width="false"
+      @click="$emit('action', contribution)"
+    />
+  </TCard>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Component } from 'vue';
+import * as LucideIcons from 'lucide-vue-next';
+import TCard from '../TCard.vue';
+import TButton from '../TButton.vue';
+import type { SlotContribution } from '../../types/integration';
+import { useExtensionSlots } from '../../composables/useExtensionSlots';
+
+const props = defineProps<{ contribution: SlotContribution }>();
+defineEmits<{ next: []; action: [SlotContribution] }>();
+
+const { resolveComponent } = useExtensionSlots();
+
+const integration = computed(() => props.contribution.integration);
+const ui = computed(() => props.contribution.ui);
+const card = computed(() => ui.value.card);
+const onboarding = computed(() => ui.value.onboarding);
+const variant = computed(() => props.contribution.slot);
+const href = computed(() => onboarding.value?.href || card.value?.href || null);
+const resolved = computed(() => resolveComponent(ui.value.component));
+
+// Resolve icon name from integration, falling back to Puzzle
+const lucide = LucideIcons as unknown as Record<string, Component>;
+const icon = computed<Component>(() => {
+  const name = integration.value?.icon;
+  if (name) {
+    const pascal = name.replace(/(^\w|[-_ ]\w)/g, (m) => m.replace(/[-_ ]/, '').toUpperCase());
+    return lucide[name] || lucide[pascal] || lucide.Puzzle;
+  }
+  return lucide.Puzzle;
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.ext-card-head {
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+  margin-bottom: $spacing-2;
+}
+
+.ext-card-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: $radius-lg;
+  background: $primary-light;
+  color: $primary;
+  flex-shrink: 0;
+
+  :deep(svg) {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.ext-card-title {
+  font-size: $font-size-base;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  margin: 0;
+}
+
+.ext-card-badge {
+  margin-left: auto;
+  font-size: $font-size-xs;
+  font-weight: $font-medium;
+  color: $text-muted;
+  background: $bg-gray;
+  border-radius: 999px;
+  padding: 2px 8px;
+  flex-shrink: 0;
+}
+
+.ext-card-desc {
+  font-size: $font-size-sm;
+  color: $text-secondary;
+  margin: 0 0 $spacing-4;
+}
+
+.ext-onboarding {
+  text-align: center;
+}
+
+.ext-onboarding-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  margin: 0 auto $spacing-4;
+  border-radius: 50%;
+  background: $primary-light;
+  color: $primary;
+
+  :deep(svg) {
+    width: 28px;
+    height: 28px;
+  }
+}
+
+.ext-onboarding-title {
+  font-size: $font-size-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
+}
+
+.ext-onboarding-desc {
+  font-size: $font-size-base;
+  color: $text-secondary;
+  margin: $spacing-2 0 $spacing-6;
+}
+
+.ext-onboarding-actions {
+  display: flex;
+  gap: $spacing-3;
+  justify-content: center;
+}
+
+.ext-nav-item {
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+  padding: $spacing-2 $spacing-3;
+  border-radius: $radius-md;
+  color: $text-secondary;
+  text-decoration: none;
+
+  &:hover {
+    background: $primary-light;
+    color: $primary;
+  }
+}
+
+.ext-nav-icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+</style>
diff --git a/components/extensions/ExtensionSlot.stories.js b/components/extensions/ExtensionSlot.stories.js
new file mode 100644
index 0000000..974361c
--- /dev/null
+++ b/components/extensions/ExtensionSlot.stories.js
@@ -0,0 +1,20 @@
+import ExtensionSlot from './ExtensionSlot.vue';
+
+export default {
+  title: 'Primitives/ExtensionSlot',
+  component: ExtensionSlot,
+};
+
+const sample = [
+  {
+    key: 'test',
+    slot: 'settings.integrations',
+    integration: { key: 'test', name: 'Test Integration', description: 'Example plugin', icon: null, configured: true, entitled: true, ui: { slots: ['settings.integrations'], card: { title: 'Test Card', description: 'Card description', cta: 'Open' } } },
+    ui: { slots: ['settings.integrations'], card: { title: 'Test Card', description: 'Card description', cta: 'Open' } },
+    order: 100,
+    configured: true,
+  },
+];
+
+export const WithContributions = { args: { contributions: sample } };
+export const Empty = { args: { contributions: [] } };
diff --git a/components/extensions/ExtensionSlot.vue b/components/extensions/ExtensionSlot.vue
new file mode 100644
index 0000000..dae10f4
--- /dev/null
+++ b/components/extensions/ExtensionSlot.vue
@@ -0,0 +1,20 @@
+<template>
+  <DescriptorRenderer
+    v-for="contribution in contributions"
+    :key="contribution.key"
+    :contribution="contribution"
+    @action="$emit('action', $event)"
+  />
+  <slot v-if="!contributions.length" />
+</template>
+
+<script setup lang="ts">
+import DescriptorRenderer from './DescriptorRenderer.vue';
+import type { SlotContribution, ExtensionSlot } from '../../types/integration';
+
+withDefaults(defineProps<{ name?: ExtensionSlot; contributions?: SlotContribution[] }>(), {
+  name: undefined,
+  contributions: () => []
+});
+defineEmits<{ action: [SlotContribution] }>();
+</script>
diff --git a/components/financial-position/FinancialPositionDrill.stories.js b/components/financial-position/FinancialPositionDrill.stories.js
new file mode 100644
index 0000000..e0fe4a6
--- /dev/null
+++ b/components/financial-position/FinancialPositionDrill.stories.js
@@ -0,0 +1,36 @@
+import FinancialPositionDrill from './FinancialPositionDrill.vue';
+
+const group = {
+  key: 'earned',
+  label: 'Earned income',
+  intents: ['regular'],
+  type: 'income',
+  tone: 'income',
+  metric: '5,200 USD'
+};
+
+export default {
+  title: 'Domain/FinancialPosition/FinancialPositionDrill',
+  component: FinancialPositionDrill,
+  args: {
+    open: true,
+    group,
+    range: { date_from: '2024-01-01', date_to: '2024-03-31' },
+    fetchTransactions: async () => ({
+      data: [
+        {
+          id: 1,
+          description: 'Monthly salary',
+          datetime: '2024-03-20T08:15:00',
+          amount: 2800,
+          intent: 'regular',
+          type: 'income',
+          wallet: { currency: 'USD' },
+          party: { name: 'Employer' }
+        }
+      ]
+    })
+  }
+};
+
+export const Default = {};
diff --git a/components/financial-position/FinancialPositionDrill.vue b/components/financial-position/FinancialPositionDrill.vue
new file mode 100644
index 0000000..265afe7
--- /dev/null
+++ b/components/financial-position/FinancialPositionDrill.vue
@@ -0,0 +1,528 @@
+<template>
+  <Transition name="drawer">
+    <div v-if="open" class="drawer-root" @click.self="$emit('close')">
+      <aside
+        class="drawer-panel surface"
+        :class="`surface--${group?.tone || 'neutral'}`"
+        role="dialog"
+        aria-modal="true"
+      >
+        <header class="drawer-head">
+          <TButton
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="icon-btn"
+            :aria-label="t('Close')"
+            @click="$emit('close')"
+          >
+            <ArrowLeft :size="18" />
+          </TButton>
+          <span class="head-chip">
+            <component :is="group?.icon" :size="22" />
+          </span>
+          <div class="head-id">
+            <span class="head-eyebrow">{{ group?.eyebrow }}</span>
+            <h2 class="head-title">{{ group?.label }}</h2>
+          </div>
+          <TButton
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="icon-btn icon-btn--close"
+            :aria-label="t('Close')"
+            @click="$emit('close')"
+          >
+            <X :size="18" />
+          </TButton>
+        </header>
+
+        <section class="detail-hero">
+          <span class="detail-metric" :class="group?.metricClass">{{ group?.metric }}</span>
+          <p v-if="group?.hint" class="detail-hint">{{ group.hint }}</p>
+        </section>
+
+        <div v-if="isLoading" class="drawer-body">
+          <LoadingSkeleton variant="list" :count="6" />
+        </div>
+
+        <div v-else-if="rows.length === 0" class="drawer-empty">
+          <span class="empty-ico"><Inbox :size="34" /></span>
+          <p>{{ t('No transactions for this in the selected period.') }}</p>
+        </div>
+
+        <div v-else class="drawer-body">
+          <section v-for="bucket in buckets" :key="bucket.intent" class="bucket">
+            <header v-if="buckets.length > 1" class="bucket-head">
+              <span class="bucket-dir" :class="bucket.type === 'income' ? 'is-in' : 'is-out'">
+                <component
+                  :is="bucket.type === 'income' ? ArrowDownLeft : ArrowUpRight"
+                  :size="13"
+                />
+              </span>
+              <span class="bucket-label">{{ bucket.label }}</span>
+              <span class="bucket-sub">{{ t('{n} transactions', { n: bucket.rows.length }) }}</span>
+              <span class="bucket-total" :class="bucket.type === 'income' ? 'is-in' : 'is-out'">
+                {{ bucket.total }}
+              </span>
+            </header>
+
+            <ul class="row-list">
+              <li v-for="row in bucket.rows" :key="row.id" class="row">
+                <span class="row-dir" :class="row.type === 'income' ? 'is-in' : 'is-out'">
+                  <component
+                    :is="row.type === 'income' ? ArrowDownLeft : ArrowUpRight"
+                    :size="14"
+                  />
+                </span>
+                <div class="row-main">
+                  <span class="row-title">{{ row.title }}</span>
+                  <span class="row-meta">{{ row.meta }}</span>
+                </div>
+                <span class="row-amount" :class="row.type === 'income' ? 'is-in' : 'is-out'">
+                  {{ row.type === 'income' ? '+' : '−' }}{{ row.amount }}
+                </span>
+              </li>
+            </ul>
+          </section>
+        </div>
+      </aside>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { X, ArrowLeft, Inbox, ArrowDownLeft, ArrowUpRight } from 'lucide-vue-next';
+import LoadingSkeleton from '../LoadingSkeleton.vue';
+import { formatFullAmount } from '../../utils/currency';
+
+const TRANSACTION_INTENT_OPTIONS = [
+  { value: 'regular', label: 'Regular' },
+  { value: 'loan_received', label: 'Loan received' },
+  { value: 'loan_repayment', label: 'Loan repayment' },
+  { value: 'debt_owed', label: 'Debt owed' },
+  { value: 'debt_settled', label: 'Debt settled' },
+  { value: 'investment_buy', label: 'Investment purchase' },
+  { value: 'investment_return', label: 'Investment return' },
+  { value: 'gift', label: 'Gift' }
+];
+
+export interface DrillGroup {
+  key: string;
+  label: string;
+  intents: string[];
+  type?: 'income' | 'expense';
+  tone: string;
+  hint?: string;
+  metric?: string;
+  metricClass?: string;
+  eyebrow?: string;
+  icon: unknown;
+}
+
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps<{
+  open: boolean;
+  group: any | null;
+  range: { date_from?: string; date_to?: string };
+  fetchTransactions?: (params: any) => Promise<any>;
+}>();
+
+defineEmits<{ close: [] }>();
+
+interface Row {
+  id: number;
+  title: string;
+  meta: string;
+  amount: string;
+  amountNum: number;
+  currency: string;
+  intent: string;
+  type: 'income' | 'expense';
+}
+
+const rows = ref<Row[]>([]);
+const isLoading = ref(false);
+
+const intentLabel = (value: string) =>
+  TRANSACTION_INTENT_OPTIONS.find((o) => o.value === value)?.label ?? value;
+
+const dateLabel = (iso: string) => {
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime())
+    ? ''
+    : d.toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' });
+};
+
+const toRow = (txn: ApiTransaction): Row => {
+  const currency = txn.wallet?.currency || 'XAF';
+  const party = txn.party?.name;
+  const title = txn.description || party || t('Transaction');
+  const metaBits = [dateLabel(txn.datetime), party && party !== title ? party : null].filter(
+    Boolean
+  );
+  return {
+    id: txn.id,
+    title,
+    meta: metaBits.join(' · '),
+    amount: formatFullAmount(`${txn.amount} ${currency}`),
+    amountNum: Number(txn.amount) || 0,
+    currency,
+    intent: txn.intent || 'regular',
+    type: txn.type
+  };
+};
+
+const buckets = computed(() => {
+  const order = props.group?.intents ?? [];
+  return order
+    .map((intent) => {
+      const bucketRows = rows.value.filter((r) => r.intent === intent);
+      if (bucketRows.length === 0) return null;
+      const currency = bucketRows[0].currency;
+      const sum = bucketRows.reduce((acc, r) => acc + r.amountNum, 0);
+      return {
+        intent,
+        label: t(intentLabel(intent)),
+        type: bucketRows[0].type,
+        rows: bucketRows,
+        total: formatFullAmount(`${sum} ${currency}`)
+      };
+    })
+    .filter((b): b is NonNullable<typeof b> => b !== null);
+});
+
+async function load() {
+  if (!props.open || !props.group) return;
+  isLoading.value = true;
+  rows.value = [];
+  try {
+    const res = props.fetchTransactions
+      ? await props.fetchTransactions({
+          intent: props.group.intents.join(','),
+          type: props.group.type,
+          exclude_transfers: true,
+          date_from: props.range.date_from,
+          date_to: props.range.date_to,
+          limit: 100
+        })
+      : { data: [] };
+    rows.value = (res.data || []).map(toRow);
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+watch(() => [props.open, props.group?.key], load, { immediate: true });
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+@use '../../assets/scss/_surfaces.scss' as *;
+
+.drawer-root {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.5);
+  backdrop-filter: blur(4px);
+  display: flex;
+  justify-content: flex-end;
+  z-index: $z-index-modal;
+}
+
+.drawer-panel {
+  display: flex;
+  flex-direction: column;
+  width: min(480px, 100%);
+  height: 100%;
+  background: $bg-white;
+  box-shadow: $elevation-5;
+  overflow: hidden;
+}
+
+.drawer-head {
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+  padding: $spacing-4 $spacing-5;
+  background: var(--surface-bg);
+  border-bottom: 1px solid var(--surface-accent);
+}
+
+.icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  flex-shrink: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: $text-secondary;
+  cursor: pointer;
+  transition: background $duration-base $easing-standard;
+
+  &:hover {
+    background: var(--glass-bg-strong);
+  }
+}
+
+// The back arrow is the primary affordance on mobile; the X sits on the right
+// for desktop muscle memory. Both close.
+.icon-btn--close {
+  margin-left: auto;
+
+  @media (max-width: $breakpoint-sm) {
+    display: none;
+  }
+}
+
+.head-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  flex-shrink: 0;
+  border-radius: 13px;
+  background: var(--glass-bg-strong);
+  color: var(--surface-deep);
+}
+
+.head-id {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.head-eyebrow {
+  font-size: 10px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--surface-deep);
+}
+
+.head-title {
+  margin: 0;
+  font-size: $font-size-lg;
+  font-weight: $font-bold;
+  color: $text-primary;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.detail-hero {
+  padding: $spacing-5;
+  background: var(--surface-bg);
+  border-bottom: 1px solid var(--surface-accent);
+}
+
+.detail-metric {
+  font-size: 2rem;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+  line-height: 1.05;
+  color: $text-primary;
+}
+
+.detail-hint {
+  margin: 6px 0 0;
+  font-size: $font-size-sm;
+  color: $text-secondary;
+}
+
+.drawer-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: $spacing-4 $spacing-5 $spacing-6;
+}
+
+.drawer-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: $spacing-3;
+  padding: $spacing-6;
+  text-align: center;
+  color: $text-muted;
+}
+
+.empty-ico {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: $bg-light;
+  color: var(--color-border-medium, #cbd5e1);
+}
+
+.bucket {
+  margin-bottom: $spacing-5;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.bucket-head {
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+  padding-bottom: $spacing-2;
+  margin-bottom: 4px;
+  border-bottom: 1px solid $border-light;
+}
+
+.bucket-dir {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 8px;
+
+  &.is-in {
+    background: var(--color-income-soft);
+    color: var(--color-income);
+  }
+  &.is-out {
+    background: var(--color-expense-soft);
+    color: var(--color-expense);
+  }
+}
+
+.bucket-label {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  color: $text-primary;
+}
+
+.bucket-sub {
+  font-size: 11px;
+  color: $text-muted;
+}
+
+.bucket-total {
+  margin-left: auto;
+  font-size: $font-size-sm;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+
+  &.is-in {
+    color: var(--color-income);
+  }
+  &.is-out {
+    color: var(--color-expense);
+  }
+}
+
+.row-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+  padding: $spacing-3 0;
+  border-bottom: 1px solid $border-light;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.row-dir {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  flex-shrink: 0;
+  border-radius: 9px;
+
+  &.is-in {
+    background: var(--color-income-soft);
+    color: var(--color-income);
+  }
+  &.is-out {
+    background: var(--color-expense-soft);
+    color: var(--color-expense);
+  }
+}
+
+.row-main {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+  flex: 1;
+}
+
+.row-title {
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  color: $text-primary;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.row-meta {
+  font-size: 11px;
+  color: $text-muted;
+}
+
+.row-amount {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+
+  &.is-in {
+    color: var(--color-income);
+  }
+  &.is-out {
+    color: var(--color-expense);
+  }
+}
+
+.drawer-enter-active,
+.drawer-leave-active {
+  transition: opacity $duration-base $easing-standard;
+}
+.drawer-enter-active .drawer-panel,
+.drawer-leave-active .drawer-panel {
+  transition: transform $duration-base $easing-standard;
+}
+.drawer-enter-from,
+.drawer-leave-to {
+  opacity: 0;
+}
+.drawer-enter-from .drawer-panel,
+.drawer-leave-to .drawer-panel {
+  transform: translateX(100%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .drawer-enter-active .drawer-panel,
+  .drawer-leave-active .drawer-panel {
+    transition: none;
+  }
+}
+</style>
diff --git a/components/financial-position/FinancialPositionView.stories.js b/components/financial-position/FinancialPositionView.stories.js
new file mode 100644
index 0000000..8bdac3a
--- /dev/null
+++ b/components/financial-position/FinancialPositionView.stories.js
@@ -0,0 +1,26 @@
+import FinancialPositionView from './FinancialPositionView.vue';
+
+const position = {
+  net_worth_delta: 2589.5,
+  earned_income: 5200,
+  investment_returns: 180,
+  gifts_received: 50,
+  loan_received: 0,
+  discretionary_spend: 2100,
+  investment_principal: 500,
+  loan_repayment: 0,
+  debt_settled: 240.5
+};
+
+export default {
+  title: 'Domain/FinancialPosition/FinancialPositionView',
+  component: FinancialPositionView,
+  args: {
+    params: null,
+    fetchPosition: async () => ({
+      data: { position, currency: 'USD', partial: false, unconverted_currencies: [] }
+    })
+  }
+};
+
+export const Default = {};
diff --git a/components/financial-position/FinancialPositionView.vue b/components/financial-position/FinancialPositionView.vue
new file mode 100644
index 0000000..9b35b24
--- /dev/null
+++ b/components/financial-position/FinancialPositionView.vue
@@ -0,0 +1,861 @@
+<template>
+  <div class="fp">
+    <header class="fp-head">
+      <div class="fp-head-text">
+        <h2 class="fp-title">{{ t('Financial position') }}</h2>
+        <p class="fp-subtitle">
+          {{ t('Where your money came from and where it went, grouped by what it really was.') }}
+        </p>
+      </div>
+
+      <div v-if="!props.params" class="fp-presets">
+        <TButton
+          v-for="p in presets"
+          :key="p.value"
+          variant="text"
+          size="small"
+          :full-width="false"
+          class="fp-preset"
+          :class="{ 'fp-preset--active': preset === p.value }"
+          @click="preset = p.value"
+        >
+          {{ t(p.label) }}
+        </TButton>
+      </div>
+    </header>
+
+    <p v-if="partial" class="fp-note" role="status">
+      {{
+        t(
+          'Some amounts could not be converted to your default currency and were left out, so figures may be understated. Affected: {currencies}.',
+          { currencies: unconvertedCurrencies.join(', ') }
+        )
+      }}
+    </p>
+
+    <LoadingSkeleton v-if="isLoading && !position" variant="card" :count="3" />
+
+    <template v-else-if="position && hasAny">
+      <section class="fp-hero surface" :class="netSurface">
+        <div class="fp-hero-headline">
+          <span class="eyebrow">{{ t('Net worth change') }}</span>
+          <div class="fp-hero-value-row">
+            <p class="fp-hero-value">{{ signedMoney(position.net_worth_delta) }}</p>
+            <span class="fp-hero-pill">
+              <component
+                :is="position.net_worth_delta >= 0 ? TrendingUp : TrendingDown"
+                :size="14"
+              />
+              {{ position.net_worth_delta >= 0 ? t('Building') : t('Shrinking') }}
+            </span>
+          </div>
+          <p class="fp-hero-sub">
+            {{
+              t(
+                'Real earnings, returns and gifts, minus real spend. Borrowed money and money parked in investments do not count.'
+              )
+            }}
+          </p>
+        </div>
+
+        <div class="fp-hero-scales">
+          <div class="fp-scale">
+            <span class="fp-scale-label">{{ t('Money in') }}</span>
+            <span class="fp-scale-value fp-up">{{ money(totalIn) }}</span>
+          </div>
+          <span class="fp-scale-arrow"><ArrowRight :size="18" /></span>
+          <div class="fp-scale">
+            <span class="fp-scale-label">{{ t('Money out') }}</span>
+            <span class="fp-scale-value fp-down">{{ money(totalOut) }}</span>
+          </div>
+        </div>
+      </section>
+
+      <NuxtLink to="/holdings" class="fp-worth surface tone-card">
+        <div class="fp-worth-main">
+          <span class="eyebrow">{{ t('Total net worth now') }}</span>
+          <p class="fp-worth-value">{{ money(position.total_net_worth) }}</p>
+        </div>
+        <div class="fp-worth-split">
+          <div class="fp-worth-part">
+            <Wallet :size="15" />
+            <span class="fp-worth-part-label">{{ t('Cash') }}</span>
+            <span class="fp-worth-part-value">{{ money(position.cash_balance) }}</span>
+          </div>
+          <div class="fp-worth-part">
+            <Coins :size="15" />
+            <span class="fp-worth-part-label">{{ t('Holdings') }}</span>
+            <span class="fp-worth-part-value">{{ money(position.holdings_value) }}</span>
+          </div>
+          <ChevronRight :size="16" class="fp-worth-go" />
+        </div>
+      </NuxtLink>
+
+      <div class="fp-ledger">
+        <section class="fp-col surface tone-card">
+          <header class="fp-col-head">
+            <span class="fp-col-ico fp-col-ico--in"><ArrowDownLeft :size="16" /></span>
+            <h3 class="fp-col-title">{{ t('Money in') }}</h3>
+            <span class="fp-col-total fp-up">{{ money(totalIn) }}</span>
+          </header>
+          <ul class="fp-rows">
+            <li v-for="row in moneyIn" :key="row.key">
+              <button
+                type="button"
+                class="fp-row"
+                :class="{ 'fp-row--neutral': !row.counts }"
+                @click="openDrill(row)"
+              >
+                <span class="fp-row-marker" :style="{ background: row.color }" />
+                <span class="fp-row-ico"><component :is="row.icon" :size="16" /></span>
+                <span class="fp-row-text">
+                  <span class="fp-row-label">{{ row.label }}</span>
+                  <span v-if="!row.counts" class="fp-row-tag">{{ t('cash, not net worth') }}</span>
+                </span>
+                <span class="fp-row-figure">
+                  <span class="fp-row-amount">{{ money(row.value) }}</span>
+                  <span class="fp-row-bar"
+                    ><span
+                      class="fp-row-fill"
+                      :style="{ width: barPct(row, maxIn), background: row.color }"
+                  /></span>
+                </span>
+                <ChevronRight :size="15" class="fp-row-chevron" />
+              </button>
+            </li>
+          </ul>
+        </section>
+
+        <section class="fp-col surface tone-card">
+          <header class="fp-col-head">
+            <span class="fp-col-ico fp-col-ico--out"><ArrowUpRight :size="16" /></span>
+            <h3 class="fp-col-title">{{ t('Money out') }}</h3>
+            <span class="fp-col-total fp-down">{{ money(totalOut) }}</span>
+          </header>
+          <ul class="fp-rows">
+            <li v-for="row in moneyOut" :key="row.key">
+              <button
+                type="button"
+                class="fp-row"
+                :class="{ 'fp-row--neutral': !row.counts }"
+                @click="openDrill(row)"
+              >
+                <span class="fp-row-marker" :style="{ background: row.color }" />
+                <span class="fp-row-ico"><component :is="row.icon" :size="16" /></span>
+                <span class="fp-row-text">
+                  <span class="fp-row-label">{{ row.label }}</span>
+                  <span v-if="!row.counts" class="fp-row-tag">{{ t('cash, not net worth') }}</span>
+                </span>
+                <span class="fp-row-figure">
+                  <span class="fp-row-amount">{{ money(row.value) }}</span>
+                  <span class="fp-row-bar"
+                    ><span
+                      class="fp-row-fill"
+                      :style="{ width: barPct(row, maxOut), background: row.color }"
+                  /></span>
+                </span>
+                <ChevronRight :size="15" class="fp-row-chevron" />
+              </button>
+            </li>
+          </ul>
+        </section>
+      </div>
+
+      <p class="fp-foot">
+        <Info :size="14" />
+        {{
+          t(
+            'Greyed rows move cash but not net worth: borrowed money, debt, and money parked in investments.'
+          )
+        }}
+      </p>
+    </template>
+
+    <div v-else class="fp-empty">
+      <PiggyBank :size="44" class="fp-empty-ico" />
+      <p>{{ t('No data for this period yet.') }}</p>
+    </div>
+
+    <FinancialPositionDrill
+      :open="drillOpen"
+      :group="activeGroup"
+      :range="drillRange"
+      @close="drillOpen = false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import {
+  Wallet,
+  ShoppingBag,
+  PiggyBank,
+  Landmark,
+  HandCoins,
+  TrendingUp,
+  TrendingDown,
+  Gift,
+  Coins,
+  ChevronRight,
+  ArrowDownLeft,
+  ArrowUpRight,
+  ArrowRight,
+  Info
+} from 'lucide-vue-next';
+import LoadingSkeleton from '../LoadingSkeleton.vue';
+import FinancialPositionDrill from './FinancialPositionDrill.vue';
+import { formatShortAmount } from '../../utils/currency';
+
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps<{
+  params?: any | null;
+  fetchPosition?: (params: any) => Promise<any>;
+}>();
+
+const presets = [
+  { value: 'current_month', label: 'This month' },
+  { value: 'last_3_months', label: 'Last 3 months' },
+  { value: 'all_time', label: 'All time' }
+] as const;
+
+const preset = ref<StatsParams['preset']>('current_month');
+const position = ref<PositionData | null>(null);
+const currency = ref('');
+const partial = ref(false);
+const unconvertedCurrencies = ref<string[]>([]);
+const isLoading = ref(false);
+
+const drillOpen = ref(false);
+const activeGroup = ref<DrillGroup | null>(null);
+
+const COLOR = {
+  income: 'var(--color-income, #16a34a)',
+  expense: 'var(--color-expense, #dc2626)',
+  returns: '#0ea5e9',
+  gifts: '#7c3aed',
+  loan: '#d97706',
+  principal: '#6366f1'
+};
+
+const effectiveParams = computed<StatsParams>(() =>
+  props.params ? { ...props.params } : { preset: preset.value }
+);
+
+const money = (n: number) =>
+  formatShortAmount(`${Math.round((n || 0) * 100) / 100} ${currency.value}`);
+const signedMoney = (n: number) => (n > 0 ? '+' : '') + money(n);
+
+const netSurface = computed(() =>
+  (position.value?.net_worth_delta ?? 0) >= 0 ? 'surface--income' : 'surface--expense'
+);
+
+interface LedgerRow {
+  key: string;
+  label: string;
+  value: number;
+  color: string;
+  tone: string;
+  icon: unknown;
+  counts: boolean;
+  intents: string[];
+  type?: 'income' | 'expense';
+}
+
+const moneyIn = computed<LedgerRow[]>(() => {
+  const p = position.value;
+  if (!p) return [];
+  return (
+    [
+      {
+        key: 'earned',
+        label: t('Earned income'),
+        value: p.earned_income,
+        color: COLOR.income,
+        tone: 'income',
+        icon: Wallet,
+        counts: true,
+        intents: ['regular'],
+        type: 'income'
+      },
+      {
+        key: 'returns',
+        label: t('Investment returns'),
+        value: p.investment_returns,
+        color: COLOR.returns,
+        tone: 'investment',
+        icon: TrendingUp,
+        counts: true,
+        intents: ['investment_return'],
+        type: 'income'
+      },
+      {
+        key: 'gift',
+        label: t('Gifts received'),
+        value: p.gifts_received,
+        color: COLOR.gifts,
+        tone: 'gift',
+        icon: Gift,
+        counts: true,
+        intents: ['gift'],
+        type: 'income'
+      },
+      {
+        key: 'loan_in',
+        label: t('Loan received'),
+        value: p.loan_received,
+        color: COLOR.loan,
+        tone: 'loan',
+        icon: Landmark,
+        counts: false,
+        intents: ['loan_received'],
+        type: 'income'
+      },
+      {
+        key: 'debt_in',
+        label: t('Debt repaid to you'),
+        value: p.debt_owed,
+        color: COLOR.loan,
+        tone: 'loan',
+        icon: HandCoins,
+        counts: false,
+        intents: ['debt_owed'],
+        type: 'income'
+      }
+    ] as LedgerRow[]
+  ).filter((r) => r.value > 0);
+});
+
+const moneyOut = computed<LedgerRow[]>(() => {
+  const p = position.value;
+  if (!p) return [];
+  return (
+    [
+      {
+        key: 'spend',
+        label: t('Discretionary spend'),
+        value: p.discretionary_spend,
+        color: COLOR.expense,
+        tone: 'expense',
+        icon: ShoppingBag,
+        counts: true,
+        intents: ['regular'],
+        type: 'expense'
+      },
+      {
+        key: 'invested',
+        label: t('Invested'),
+        value: p.investment_principal,
+        color: COLOR.principal,
+        tone: 'investment',
+        icon: TrendingUp,
+        counts: false,
+        intents: ['investment_buy'],
+        type: 'expense'
+      },
+      {
+        key: 'loan_out',
+        label: t('Loan repayment'),
+        value: p.loan_repayment,
+        color: COLOR.loan,
+        tone: 'loan',
+        icon: Landmark,
+        counts: false,
+        intents: ['loan_repayment'],
+        type: 'expense'
+      },
+      {
+        key: 'debt_out',
+        label: t('Debt settled'),
+        value: p.debt_settled,
+        color: COLOR.loan,
+        tone: 'loan',
+        icon: HandCoins,
+        counts: false,
+        intents: ['debt_settled'],
+        type: 'expense'
+      }
+    ] as LedgerRow[]
+  ).filter((r) => r.value > 0);
+});
+
+const totalIn = computed(() => moneyIn.value.reduce((sum, r) => sum + r.value, 0));
+const totalOut = computed(() => moneyOut.value.reduce((sum, r) => sum + r.value, 0));
+const maxIn = computed(() => Math.max(1, ...moneyIn.value.map((r) => r.value)));
+const maxOut = computed(() => Math.max(1, ...moneyOut.value.map((r) => r.value)));
+const barPct = (row: LedgerRow, max: number) => `${Math.max(6, (row.value / max) * 100)}%`;
+
+const drillRange = computed<{ date_from?: string; date_to?: string }>(() => {
+  if (props.params?.start_date) {
+    return { date_from: props.params.start_date, date_to: props.params.end_date };
+  }
+  const iso = (d: Date) => d.toISOString().slice(0, 10);
+  const now = new Date();
+  if (preset.value === 'current_month') {
+    return { date_from: iso(new Date(now.getFullYear(), now.getMonth(), 1)), date_to: iso(now) };
+  }
+  if (preset.value === 'last_3_months') {
+    return {
+      date_from: iso(new Date(now.getFullYear(), now.getMonth() - 3, now.getDate())),
+      date_to: iso(now)
+    };
+  }
+  return {};
+});
+
+function openDrill(row: LedgerRow) {
+  activeGroup.value = {
+    key: row.key,
+    label: row.label,
+    eyebrow: row.type === 'income' ? t('Money in') : t('Money out'),
+    intents: row.intents,
+    type: row.type,
+    tone: row.tone,
+    hint: row.counts ? undefined : t('Moves cash, but not your net worth.'),
+    metric: money(row.value),
+    icon: row.icon
+  };
+  drillOpen.value = true;
+}
+
+const hasAny = computed(() => totalIn.value > 0 || totalOut.value > 0);
+
+async function load() {
+  isLoading.value = true;
+  try {
+    const res = props.fetchPosition
+      ? await props.fetchPosition({ ...effectiveParams.value, section: 'position' })
+      : {};
+    position.value = res.data?.position ?? null;
+    currency.value = res.data?.currency || currency.value;
+    partial.value = !!res.data?.partial;
+    unconvertedCurrencies.value = res.data?.unconverted_currencies || [];
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+watch(effectiveParams, load, { deep: true, immediate: true });
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+@use '../../assets/scss/_surfaces.scss' as *;
+
+.fp {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-5;
+}
+
+.fp-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: $spacing-4;
+  flex-wrap: wrap;
+}
+
+.fp-title {
+  margin: 0;
+  font-size: $font-size-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
+}
+
+.fp-subtitle {
+  margin: 4px 0 0;
+  color: $text-muted;
+  font-size: $font-size-sm;
+  max-width: 54ch;
+}
+
+.fp-presets {
+  display: inline-flex;
+  padding: 3px;
+  gap: 2px;
+  background: $bg-light;
+  border-radius: 999px;
+}
+
+.fp-preset {
+  padding: 6px 14px;
+  border: none;
+  border-radius: 999px;
+  background: transparent;
+  color: $text-muted;
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  cursor: pointer;
+  transition: all $duration-base $easing-standard;
+
+  &--active {
+    background: $bg-white;
+    color: $text-primary;
+    box-shadow: $elevation-1;
+  }
+}
+
+.fp-note {
+  margin: 0;
+  padding: $spacing-3 $spacing-4;
+  border-radius: $radius-lg;
+  background: rgba(245, 158, 11, 0.12);
+  color: #92400e;
+  font-size: $font-size-sm;
+}
+
+.fp-hero {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: $spacing-5;
+  padding: $spacing-5 $spacing-6;
+  background: var(--surface-bg);
+  border: 1px solid var(--color-border-light);
+  border-radius: 20px;
+  box-shadow: $elevation-1;
+}
+
+.fp-hero-headline {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 240px;
+  flex: 1;
+}
+
+.fp-hero-value-row {
+  display: flex;
+  align-items: baseline;
+  gap: $spacing-2;
+  flex-wrap: wrap;
+}
+
+.fp-hero-value {
+  margin: 0;
+  font-size: 2.4rem;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+  line-height: 1.02;
+  color: var(--surface-deep);
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 1.8rem;
+  }
+}
+
+.fp-hero-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 10px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: var(--glass-bg-strong);
+  color: var(--surface-deep);
+}
+
+.fp-hero-sub {
+  margin: 2px 0 0;
+  font-size: $font-size-sm;
+  color: $text-secondary;
+  max-width: 46ch;
+}
+
+.fp-hero-scales {
+  display: flex;
+  align-items: center;
+  gap: $spacing-4;
+  padding: $spacing-3 $spacing-4;
+  border-radius: 16px;
+  background: var(--glass-bg-strong);
+}
+
+.fp-scale {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.fp-scale-label {
+  font-size: 10px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: $text-muted;
+}
+
+.fp-scale-value {
+  font-size: $font-size-lg;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+}
+
+.fp-scale-arrow {
+  color: $text-muted;
+}
+
+.fp-worth {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: $spacing-4;
+  padding: $spacing-4 $spacing-5;
+  text-decoration: none;
+  color: inherit;
+}
+
+.fp-worth-main {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.fp-worth-value {
+  margin: 0;
+  font-size: 1.6rem;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+  color: $text-primary;
+}
+
+.fp-worth-split {
+  display: flex;
+  align-items: center;
+  gap: $spacing-4;
+  color: $text-secondary;
+}
+
+.fp-worth-part {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: $font-size-sm;
+}
+
+.fp-worth-part-label {
+  color: $text-muted;
+}
+
+.fp-worth-part-value {
+  font-weight: $font-semibold;
+  font-variant-numeric: tabular-nums;
+  color: $text-primary;
+}
+
+.fp-worth-go {
+  color: $text-muted;
+}
+
+.fp-ledger {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: $spacing-4;
+
+  @media (min-width: $breakpoint-md) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.fp-col {
+  padding: $spacing-4 $spacing-5 $spacing-5;
+}
+
+.fp-col-head {
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+  padding-bottom: $spacing-3;
+  margin-bottom: $spacing-2;
+  border-bottom: 1px solid $border-light;
+}
+
+.fp-col-ico {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 9px;
+
+  &--in {
+    background: var(--color-income-soft);
+    color: var(--color-income);
+  }
+  &--out {
+    background: var(--color-expense-soft);
+    color: var(--color-expense);
+  }
+}
+
+.fp-col-title {
+  margin: 0;
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: $text-secondary;
+}
+
+.fp-col-total {
+  margin-left: auto;
+  font-size: $font-size-lg;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+}
+
+.fp-rows {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.fp-row {
+  display: grid;
+  grid-template-columns: 4px 28px 1fr auto 16px;
+  align-items: center;
+  gap: $spacing-3;
+  width: 100%;
+  padding: $spacing-3 0;
+  border: none;
+  border-bottom: 1px solid $border-light;
+  background: transparent;
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+  transition: background $duration-base $easing-standard;
+
+  &:last-child {
+    border-bottom: none;
+  }
+  &:hover {
+    background: var(--color-bg-light, #f8fafc);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+    border-radius: 8px;
+  }
+}
+
+.fp-row--neutral {
+  opacity: 0.72;
+}
+
+.fp-row-marker {
+  width: 4px;
+  height: 28px;
+  border-radius: 999px;
+}
+
+.fp-row-ico {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background: $bg-light;
+  color: $text-secondary;
+}
+
+.fp-row-text {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.fp-row-label {
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  color: $text-primary;
+}
+
+.fp-row-tag {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: $text-muted;
+}
+
+.fp-row-figure {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  min-width: 96px;
+}
+
+.fp-row-amount {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  font-variant-numeric: tabular-nums;
+  color: $text-primary;
+}
+
+.fp-row-bar {
+  display: block;
+  width: 88px;
+  height: 5px;
+  border-radius: 999px;
+  background: $bg-light;
+  overflow: hidden;
+}
+
+.fp-row-fill {
+  display: block;
+  height: 100%;
+  border-radius: 999px;
+}
+
+.fp-row-chevron {
+  color: $text-muted;
+}
+
+.fp-foot {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  font-size: 11px;
+  color: $text-muted;
+}
+
+.fp-up {
+  color: var(--color-income, #16a34a);
+}
+
+.fp-down {
+  color: var(--color-expense, #dc2626);
+}
+
+.fp-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: $spacing-3;
+  padding: $spacing-6;
+  text-align: center;
+  color: $text-muted;
+  font-size: $font-size-sm;
+  background: $bg-white;
+  border: 1px dashed $border-color;
+  border-radius: 18px;
+}
+
+.fp-empty-ico {
+  color: var(--color-border-medium, #cbd5e1);
+}
+</style>
diff --git a/components/groups/GroupForm.stories.js b/components/groups/GroupForm.stories.js
new file mode 100644
index 0000000..3f13d1d
--- /dev/null
+++ b/components/groups/GroupForm.stories.js
@@ -0,0 +1,24 @@
+import GroupForm from './GroupForm.vue';
+
+export default {
+  title: 'Domain/Groups/GroupForm',
+  component: GroupForm,
+  args: {
+    editingItem: null,
+    apiError: '',
+    isSubmitting: false
+  }
+};
+
+export const Create = {};
+
+export const Edit = {
+  args: {
+    editingItem: {
+      id: 1,
+      name: 'Vacation',
+      description: 'Holiday spending',
+      icon: 'Plane'
+    }
+  }
+};
diff --git a/components/groups/GroupForm.vue b/components/groups/GroupForm.vue
new file mode 100644
index 0000000..e71a397
--- /dev/null
+++ b/components/groups/GroupForm.vue
@@ -0,0 +1,238 @@
+<template>
+  <form class="card-form" @submit.prevent="handleSubmit">
+    <div class="form-header">
+      <h2>{{ isEditing ? t('Edit Group') : t('Create Group') }}</h2>
+      <TButton
+        variant="text"
+        size="small"
+        :full-width="false"
+        class="close-btn"
+        :aria-label="t('Close')"
+        @click="handleClose"
+      >
+        <X />
+      </TButton>
+    </div>
+
+    <div class="form-group">
+      <label for="group-name" class="form-label">{{ t('Group Name') }}</label>
+      <div class="name-icon-row">
+        <div class="name-col">
+          <input
+            id="group-name"
+            v-model="form.name"
+            type="text"
+            class="form-input"
+            :class="{ error: nameError || props.apiError }"
+            :placeholder="t('Enter group name')"
+            required
+          />
+          <div v-if="nameError" class="error-text">{{ t('Group name is required.') }}</div>
+          <div v-if="props.apiError" class="error-text">{{ props.apiError }}</div>
+        </div>
+        <div class="icon-col">
+          <TButton
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="icon-trigger"
+            :aria-expanded="showIconPicker"
+            :aria-label="t('Choose icon')"
+            @click="showIconPicker = !showIconPicker"
+          >
+            <component
+              :is="selectedIconComponent"
+              v-if="selectedIconComponent"
+              class="icon-trigger__icon"
+            />
+            <ImagePlus v-else class="icon-trigger__icon" />
+          </TButton>
+        </div>
+      </div>
+
+      <div v-if="showIconPicker" class="icon-popover">
+        <IconPicker v-model="form.icon" @update:model-value="onIconSelected" />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label for="group-description" class="form-label">{{ t('Group Description') }}</label>
+      <textarea
+        id="group-description"
+        v-model="form.description"
+        class="form-textarea"
+        :class="{ error: descriptionError }"
+        :placeholder="t('Type group description here...')"
+        rows="5"
+        required
+      />
+      <div v-if="descriptionError" class="error-text">
+        {{ t('Group description is required.') }}
+      </div>
+    </div>
+
+    <div class="form-actions">
+      <TButton variant="secondary" :full-width="false" @click="handleClose">
+        {{ t('Cancel') }}
+      </TButton>
+      <TButton
+        type="submit"
+        variant="primary"
+        :full-width="false"
+        :disabled="props.isSubmitting"
+      >
+        <span v-if="props.isSubmitting">{{ isEditing ? t('Updating...') : t('Creating...') }}</span>
+        <span v-else>{{ isEditing ? t('Update Group') : t('Create Group') }}</span>
+      </TButton>
+    </div>
+  </form>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import IconPicker from '../IconPicker.vue';
+import * as lucideIcons from 'lucide-vue-next';
+import { ImagePlus, X } from 'lucide-vue-next';
+
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  editingItem: {
+    type: Object,
+    default: null
+  },
+  apiError: {
+    type: String,
+    default: ''
+  },
+  isSubmitting: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['created', 'updated', 'close']);
+
+const form = ref({
+  name: '',
+  description: '',
+  icon: ''
+});
+
+const nameError = ref(false);
+const descriptionError = ref(false);
+const showIconPicker = ref(false);
+
+const selectedIconComponent = computed(() => {
+  const key = form.value.icon;
+  if (key && typeof lucideIcons[key] === 'function') {
+    return lucideIcons[key];
+  }
+  return null;
+});
+
+const isEditing = computed(() => !!props.editingItem);
+
+// Populate form when editing
+watch(
+  () => props.editingItem,
+  (newItem) => {
+    if (newItem) {
+      // Extract icon value - could be from icon.content or direct icon value
+      const iconValue = newItem.icon?.content || newItem.icon || '';
+
+      form.value = {
+        name: newItem.name || '',
+        description: newItem.description || '',
+        icon: iconValue
+      };
+    } else {
+      resetForm();
+    }
+  },
+  { immediate: true }
+);
+
+function resetForm() {
+  form.value = { name: '', description: '', icon: '' };
+  nameError.value = false;
+  descriptionError.value = false;
+  showIconPicker.value = false;
+}
+
+function validateForm() {
+  let isValid = true;
+
+  // Reset errors
+  nameError.value = false;
+  descriptionError.value = false;
+
+  // Validate name
+  if (!form.value.name || form.value.name.trim() === '') {
+    nameError.value = true;
+    isValid = false;
+  }
+
+  // Validate description
+  if (!form.value.description || form.value.description.trim() === '') {
+    descriptionError.value = true;
+    isValid = false;
+  }
+
+  return isValid;
+}
+
+function handleSubmit() {
+  if (props.isSubmitting) {
+    return;
+  }
+
+  if (!validateForm()) return;
+
+  const formData = {
+    name: form.value.name.trim(),
+    description: form.value.description.trim()
+  };
+  if (form.value.icon && form.value.icon.trim() !== '') {
+    formData.icon = form.value.icon;
+    formData.icon_type = 'image';
+  }
+
+  if (isEditing.value && props.editingItem) {
+    emit('updated', { id: props.editingItem.id, ...formData });
+    return;
+  }
+
+  emit('created', formData);
+}
+
+function onIconSelected() {
+  showIconPicker.value = false;
+}
+
+function handleClose() {
+  emit('close');
+  resetForm();
+}
+</script>
+
+<style scoped lang="scss">
+@use '../../assets/scss/_vars.scss' as *;
+@use '../../assets/scss/_form-styles.scss';
+
+.submit-btn {
+  &:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+}
+
+.error-text {
+  color: #dc2626;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}
+</style>
diff --git a/components/holdings/HoldingForm.stories.js b/components/holdings/HoldingForm.stories.js
new file mode 100644
index 0000000..b111f36
--- /dev/null
+++ b/components/holdings/HoldingForm.stories.js
@@ -0,0 +1,34 @@
+import HoldingForm from './HoldingForm.vue';
+
+export default {
+  title: 'Domain/Holdings/HoldingForm',
+  component: HoldingForm,
+  args: {
+    open: true,
+    editing: null,
+    submitting: false,
+    defaultCurrency: 'USD',
+    searchCoins: async (q) => [
+      { id: 'bitcoin', name: 'Bitcoin', symbol: 'BTC' },
+      { id: 'ethereum', name: 'Ethereum', symbol: 'ETH' }
+    ]
+  }
+};
+
+export const Add = {};
+
+export const Edit = {
+  args: {
+    editing: {
+      id: 1,
+      name: 'Bitcoin',
+      symbol: 'BTC',
+      quantity: 0.5,
+      currency: 'USD',
+      unit_price: 64000,
+      price_source: 'auto',
+      provider: 'coingecko',
+      external_ref: 'bitcoin'
+    }
+  }
+};
diff --git a/components/holdings/HoldingForm.vue b/components/holdings/HoldingForm.vue
new file mode 100644
index 0000000..d9b0c19
--- /dev/null
+++ b/components/holdings/HoldingForm.vue
@@ -0,0 +1,438 @@
+<template>
+  <Transition name="modal">
+    <div v-if="open" class="modal-root" @click.self="$emit('close')">
+      <div class="modal-panel" role="dialog" aria-modal="true">
+        <header class="modal-head">
+          <h2 class="modal-title">{{ editing ? t('Edit holding') : t('Add holding') }}</h2>
+          <TButton
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="icon-btn"
+            :aria-label="t('Close')"
+            @click="$emit('close')"
+          >
+            <X :size="18" />
+          </TButton>
+        </header>
+
+        <div class="field">
+          <label>{{ t('Price source') }}</label>
+          <div class="seg">
+            <TButton
+              variant="text"
+              size="small"
+              :full-width="false"
+              class="seg-btn"
+              :class="{ 'seg-btn--active': form.price_source === 'auto' }"
+              @click="form.price_source = 'auto'"
+            >
+              <Zap :size="14" /> {{ t('Live') }}
+            </TButton>
+            <TButton
+              variant="text"
+              size="small"
+              :full-width="false"
+              class="seg-btn"
+              :class="{ 'seg-btn--active': form.price_source === 'manual' }"
+              @click="form.price_source = 'manual'"
+            >
+              <Pencil :size="14" /> {{ t('Manual') }}
+            </TButton>
+          </div>
+        </div>
+
+        <div v-if="form.price_source === 'auto'" class="field">
+          <label>{{ t('Coin') }}</label>
+          <input
+            v-model="coinQuery"
+            type="text"
+            :placeholder="t('Search Bitcoin, Ethereum...')"
+            @input="onSearch"
+          />
+          <ul v-if="results.length" class="coin-results">
+            <li v-for="c in results" :key="c.id">
+              <TButton
+                variant="text"
+                size="small"
+                :full-width="false"
+                class="coin-option"
+                @click="pickCoin(c)"
+              >
+                <span class="coin-symbol">{{ c.symbol }}</span> {{ c.name }}
+              </TButton>
+            </li>
+          </ul>
+          <p v-if="form.external_ref" class="coin-picked">
+            {{ t('Priced automatically from CoinGecko') }} ({{ form.external_ref }})
+          </p>
+        </div>
+
+        <div class="field">
+          <label>{{ t('Name') }}</label>
+          <input
+            v-model="form.name"
+            type="text"
+            :placeholder="t('Bitcoin, Apple, Rental flat...')"
+          />
+        </div>
+
+        <div class="field-row">
+          <div class="field">
+            <label
+              >{{ t('Symbol') }} <span class="opt">({{ t('optional') }})</span></label
+            >
+            <input v-model="form.symbol" type="text" placeholder="BTC" />
+          </div>
+          <div class="field">
+            <label>{{ t('Quantity') }}</label>
+            <input v-model.number="form.quantity" type="number" step="any" min="0" />
+          </div>
+        </div>
+
+        <div class="field-row">
+          <div class="field">
+            <label>{{ t('Currency') }}</label>
+            <select v-model="form.currency">
+              <option v-for="c in currencies" :key="c.code" :value="c.code">{{ c.code }}</option>
+            </select>
+          </div>
+          <div v-if="form.price_source === 'manual'" class="field">
+            <label>{{ t('Price per unit') }}</label>
+            <input v-model.number="form.unit_price" type="number" step="any" min="0" />
+          </div>
+        </div>
+
+        <p v-if="error" class="form-error">{{ error }}</p>
+
+        <TButton
+          variant="primary"
+          :full-width="false"
+          class="submit"
+          :disabled="submitting"
+          @click="submit"
+        >
+          {{ editing ? t('Save changes') : t('Add holding') }}
+        </TButton>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue';
+import { X, Pencil, Zap } from 'lucide-vue-next';
+
+const CURRENCIES = [
+  { code: 'USD' },
+  { code: 'EUR' },
+  { code: 'GBP' },
+  { code: 'JPY' },
+  { code: 'CAD' },
+  { code: 'AUD' },
+  { code: 'XAF' },
+  { code: 'XOF' },
+  { code: 'NGN' },
+  { code: 'GHS' },
+  { code: 'KES' },
+  { code: 'ZAR' },
+  { code: 'INR' },
+  { code: 'CNY' },
+  { code: 'BRL' },
+  { code: 'MXN' },
+  { code: 'CHF' }
+];
+
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+const currencies = CURRENCIES;
+
+const props = defineProps<{
+  open: boolean;
+  editing: Holding | null;
+  submitting?: boolean;
+  searchCoins?: (q: string) => Promise<CoinSearchResult[]>;
+  defaultCurrency?: string;
+}>();
+const emit = defineEmits<{ submit: [HoldingPayload]; close: [] }>();
+
+const blank = (): HoldingPayload => ({
+  name: '',
+  symbol: '',
+  quantity: 0,
+  currency: props.defaultCurrency || 'USD',
+  unit_price: 0,
+  price_source: 'manual',
+  provider: null,
+  external_ref: null
+});
+
+const form = reactive<HoldingPayload>(blank());
+const coinQuery = ref('');
+const results = ref<CoinSearchResult[]>([]);
+const error = ref('');
+let searchTimer: ReturnType<typeof setTimeout> | null = null;
+
+watch(
+  () => props.open,
+  (open) => {
+    if (!open) return;
+    error.value = '';
+    results.value = [];
+    if (props.editing) {
+      Object.assign(form, {
+        name: props.editing.name,
+        symbol: props.editing.symbol ?? '',
+        quantity: props.editing.quantity,
+        currency: props.editing.currency,
+        unit_price: props.editing.unit_price,
+        price_source: props.editing.price_source,
+        provider: props.editing.provider ?? null,
+        external_ref: props.editing.external_ref ?? null
+      });
+      coinQuery.value = props.editing.external_ref ?? '';
+    } else {
+      Object.assign(form, blank());
+      coinQuery.value = '';
+    }
+  }
+);
+
+function onSearch() {
+  form.provider = null;
+  form.external_ref = null;
+  if (searchTimer) clearTimeout(searchTimer);
+  const q = coinQuery.value.trim();
+  if (q.length < 2) {
+    results.value = [];
+    return;
+  }
+  searchTimer = setTimeout(async () => {
+    results.value = props.searchCoins ? await props.searchCoins(q) : [];
+  }, 300);
+}
+
+function pickCoin(c: CoinSearchResult) {
+  form.provider = 'coingecko';
+  form.external_ref = c.id;
+  form.symbol = c.symbol;
+  if (!form.name) form.name = c.name;
+  coinQuery.value = c.name;
+  results.value = [];
+}
+
+function submit() {
+  error.value = '';
+  if (!form.name.trim()) {
+    error.value = t('Name is required.');
+    return;
+  }
+  if (!form.quantity || form.quantity <= 0) {
+    error.value = t('Enter a quantity greater than 0.');
+    return;
+  }
+  if (form.price_source === 'auto' && !form.external_ref) {
+    error.value = t('Pick a coin to price it automatically.');
+    return;
+  }
+  emit('submit', { ...form });
+}
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.modal-root {
+  position: fixed;
+  inset: 0;
+  z-index: $z-index-modal;
+  background: rgba(15, 23, 42, 0.55);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+
+  @media (min-width: $breakpoint-md) {
+    align-items: center;
+    padding: $spacing-6;
+  }
+}
+
+.modal-panel {
+  width: 100%;
+  max-width: 460px;
+  max-height: 90vh;
+  overflow-y: auto;
+  background: $bg-white;
+  border-radius: 20px 20px 0 0;
+  padding: $spacing-5;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-4;
+  box-shadow: $elevation-5;
+
+  @media (min-width: $breakpoint-md) {
+    border-radius: 20px;
+  }
+}
+
+.modal-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.modal-title {
+  margin: 0;
+  font-size: $font-size-lg;
+  font-weight: $font-bold;
+  color: $text-primary;
+}
+
+.icon-btn {
+  width: 34px;
+  height: 34px;
+  border: none;
+  border-radius: 50%;
+  background: $bg-light;
+  color: $text-secondary;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+
+  label {
+    font-size: $font-size-sm;
+    font-weight: $font-medium;
+    color: $text-primary;
+  }
+
+  .opt {
+    color: $text-muted;
+    font-weight: $font-normal;
+  }
+
+  input,
+  select {
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+    height: 46px;
+    padding: 0 12px;
+    border: 1px solid $border-color;
+    border-radius: $radius-lg;
+    background: $bg-white;
+    color: $text-primary;
+    font-size: 15px;
+
+    &:focus {
+      outline: none;
+      border-color: $primary;
+    }
+  }
+}
+
+.field-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: $spacing-3;
+}
+
+.seg {
+  display: flex;
+  gap: 6px;
+  padding: 4px;
+  background: $bg-light;
+  border-radius: 12px;
+}
+
+.seg-btn {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px;
+  border: none;
+  border-radius: 9px;
+  background: transparent;
+  color: $text-secondary;
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  cursor: pointer;
+}
+
+.seg-btn--active {
+  background: $bg-white;
+  color: $text-primary;
+  box-shadow: $elevation-1;
+}
+
+.coin-results {
+  list-style: none;
+  margin: 0;
+  padding: 4px;
+  border: 1px solid $border-color;
+  border-radius: $radius-lg;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.coin-option {
+  width: 100%;
+  text-align: left;
+  padding: 8px 10px;
+  border: none;
+  background: transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: $font-size-sm;
+  color: $text-primary;
+
+  &:hover {
+    background: $bg-light;
+  }
+}
+
+.coin-symbol {
+  font-weight: $font-bold;
+  margin-right: 6px;
+}
+
+.coin-picked {
+  margin: 0;
+  font-size: 11px;
+  color: $text-muted;
+}
+
+.form-error {
+  margin: 0;
+  color: var(--color-expense, #dc2626);
+  font-size: $font-size-sm;
+}
+
+.submit {
+  height: 48px;
+  border: none;
+  border-radius: $radius-lg;
+  background: $primary;
+  color: #fff;
+  font-weight: $font-semibold;
+  font-size: 15px;
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+</style>
diff --git a/components/icons/GoogleIcon.stories.js b/components/icons/GoogleIcon.stories.js
new file mode 100644
index 0000000..db49a8a
--- /dev/null
+++ b/components/icons/GoogleIcon.stories.js
@@ -0,0 +1,14 @@
+import GoogleIcon from './GoogleIcon.vue';
+
+export default {
+  title: 'Primitives/GoogleIcon',
+  component: GoogleIcon,
+};
+
+export const Default = {};
+export const Large = {
+  render: () => ({
+    components: { GoogleIcon },
+    template: `<div style="transform:scale(2); transform-origin:left;"><GoogleIcon /></div>`,
+  }),
+};
diff --git a/components/icons/GoogleIcon.vue b/components/icons/GoogleIcon.vue
new file mode 100644
index 0000000..0d272e5
--- /dev/null
+++ b/components/icons/GoogleIcon.vue
@@ -0,0 +1,20 @@
+<template>
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M17.64 9.20455C17.64 8.56636 17.5827 7.95273 17.4764 7.36364H9V10.845H13.8436C13.635 11.97 13.0009 12.9232 12.0477 13.5614V15.8195H14.9564C16.6582 14.2527 17.64 11.9455 17.64 9.20455Z"
+      fill="#4285F4"
+    />
+    <path
+      d="M9 18C11.43 18 13.4673 17.1941 14.9564 15.8195L12.0477 13.5614C11.2418 14.1268 10.2109 14.4545 9 14.4545C6.96273 14.4545 5.22273 13.0814 4.56545 11.2364H1.55727V13.5877C3.03818 16.2955 5.79273 18 9 18Z"
+      fill="#34A853"
+    />
+    <path
+      d="M4.56545 11.2364C4.38455 10.7159 4.27636 10.1618 4.27636 9.59091C4.27636 9.02045 4.38455 8.46591 4.56545 7.94545V5.59409H1.55727C0.947727 6.77227 0.6 8.13636 0.6 9.59091C0.6 11.0455 0.947727 12.4091 1.55727 13.5873L4.56545 11.2364Z"
+      fill="#FBBC05"
+    />
+    <path
+      d="M9 4.72727C10.3218 4.72727 11.5077 5.18182 12.4582 6.08182L15.0218 3.51818C13.4618 2.09545 11.4255 1.18182 9 1.18182C5.79273 1.18182 3.03818 2.88636 1.55727 5.59409L4.56545 7.94545C5.22273 6.09091 6.96273 4.72727 9 4.72727Z"
+      fill="#EA4335"
+    />
+  </svg>
+</template>
diff --git a/components/imports/ImportAnalyzing.stories.js b/components/imports/ImportAnalyzing.stories.js
new file mode 100644
index 0000000..c826a34
--- /dev/null
+++ b/components/imports/ImportAnalyzing.stories.js
@@ -0,0 +1,16 @@
+import ImportAnalyzing from './ImportAnalyzing.vue';
+
+export default {
+  title: 'Domain/Imports/ImportAnalyzing',
+  component: ImportAnalyzing,
+  args: {
+    fileName: 'march-statement.pdf',
+    status: 'extracting'
+  }
+};
+
+export const Extracting = {};
+
+export const Checking = {
+  args: { status: 'checking' }
+};
diff --git a/components/imports/ImportAnalyzing.vue b/components/imports/ImportAnalyzing.vue
new file mode 100644
index 0000000..0501f74
--- /dev/null
+++ b/components/imports/ImportAnalyzing.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="analyzing">
+    <div class="analyzing__visual">
+      <div class="analyzing__rings">
+        <div class="ring ring--outer" />
+        <div class="ring ring--middle" />
+        <div class="ring ring--inner" />
+      </div>
+      <div class="analyzing__icon">
+        <DocumentMagnifyingGlassIcon class="icon" />
+      </div>
+    </div>
+
+    <p class="analyzing__status">{{ currentMessage }}</p>
+    <p class="analyzing__file">{{ fileName }}</p>
+
+    <div class="analyzing__progress">
+      <div class="analyzing__progress-bar">
+        <div class="analyzing__progress-fill" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { DocumentMagnifyingGlassIcon } from '@heroicons/vue/24/outline';
+
+
+const props = defineProps<{
+  fileName: string;
+  status: ImportSession['status'];
+}>();
+
+const stageMessages: Record<string, string[]> = {
+  analyzing: [
+    'Uploading and preparing your document...',
+    'Validating file format...',
+    'Queuing document for processing...',
+    'Starting analysis...',
+    'Initializing document processor...',
+    'Preparing extraction pipeline...'
+  ],
+  extracting: [
+    'Reading document contents...',
+    'Scanning pages for text...',
+    'Running text recognition...',
+    'Detecting document layout...',
+    'Identifying table structures...',
+    'Extracting rows and columns...',
+    'Parsing transaction entries...',
+    'Reading amounts and dates...',
+    'Interpreting currency formats...',
+    'Processing multi-line entries...',
+    'Handling page breaks...',
+    'Assembling raw transaction data...',
+    'This can take a moment for larger documents...',
+    'Still extracting, almost there...'
+  ],
+  enriching: [
+    'Analyzing extracted transactions...',
+    'Identifying transaction types...',
+    'Classifying income and expenses...',
+    'Recognizing merchant names...',
+    'Matching parties to your contacts...',
+    'Mapping to your existing wallets...',
+    'Suggesting appropriate categories...',
+    'Cleaning up transaction descriptions...',
+    'Resolving abbreviated names...',
+    'Normalizing amounts and currencies...',
+    'Applying smart categorization...',
+    'Fine-tuning suggestions...'
+  ],
+  checking: [
+    'Scanning for duplicate transactions...',
+    'Comparing dates and amounts...',
+    'Cross-referencing with recent records...',
+    'Checking for similar entries...',
+    'Flagging potential matches...',
+    'Calculating confidence scores...',
+    'Building your review dashboard...',
+    'Finalizing suggestions...'
+  ]
+};
+
+const fallbackMessages = ['Processing your document...'];
+
+const messageIndex = ref(0);
+
+const currentMessages = computed(() => stageMessages[props.status] || fallbackMessages);
+
+const currentMessage = computed(() => {
+  const msgs = currentMessages.value;
+  return msgs[Math.min(messageIndex.value, msgs.length - 1)];
+});
+
+let interval: ReturnType<typeof setInterval> | null = null;
+
+// Reset message index when stage changes
+watch(
+  () => props.status,
+  () => {
+    messageIndex.value = 0;
+  }
+);
+
+onMounted(() => {
+  interval = setInterval(() => {
+    const msgs = currentMessages.value;
+    if (messageIndex.value < msgs.length - 1) {
+      messageIndex.value++;
+    }
+  }, 3500);
+});
+
+onUnmounted(() => {
+  if (interval) clearInterval(interval);
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.analyzing {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 60px 20px;
+  text-align: center;
+
+  &__visual {
+    position: relative;
+    width: 120px;
+    height: 120px;
+    margin-bottom: 28px;
+  }
+
+  &__rings {
+    position: absolute;
+    inset: 0;
+  }
+
+  &__icon {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .icon {
+      width: 36px;
+      height: 36px;
+      color: $primary;
+    }
+  }
+
+  &__status {
+    font-size: $font-size-base;
+    color: $text-primary;
+    margin: 0 0 6px;
+    min-height: 1.5em;
+    transition: opacity 0.3s ease;
+    animation: fadeSwap 2.8s ease-in-out infinite;
+  }
+
+  &__file {
+    font-size: $font-size-sm;
+    color: $text-muted;
+    margin: 0 0 24px;
+    max-width: 300px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__progress {
+    width: 100%;
+    max-width: 320px;
+  }
+
+  &__progress-bar {
+    height: 3px;
+    background-color: $border-light;
+    border-radius: 2px;
+    overflow: hidden;
+  }
+
+  &__progress-fill {
+    height: 100%;
+    background-color: $primary;
+    border-radius: 2px;
+    animation: indeterminate 2s ease-in-out infinite;
+  }
+}
+
+.ring {
+  position: absolute;
+  border-radius: 50%;
+  border: 2px solid transparent;
+
+  &--outer {
+    inset: 0;
+    border-top-color: $primary;
+    border-right-color: rgba(var(--color-primary-rgb), 0.2);
+    animation: spin 3s linear infinite;
+  }
+
+  &--middle {
+    inset: 14px;
+    border-bottom-color: $primary-lighter;
+    border-left-color: rgba(var(--color-primary-rgb), 0.15);
+    animation: spin 2s linear infinite reverse;
+  }
+
+  &--inner {
+    inset: 28px;
+    border-top-color: $primary-muted;
+    animation: spin 1.5s linear infinite;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes fadeSwap {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  45% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  55% {
+    opacity: 1;
+  }
+}
+
+@keyframes indeterminate {
+  0% {
+    width: 0%;
+    margin-left: 0;
+  }
+  50% {
+    width: 60%;
+    margin-left: 20%;
+  }
+  100% {
+    width: 0%;
+    margin-left: 100%;
+  }
+}
+</style>
diff --git a/components/imports/ImportConfirmDialog.stories.js b/components/imports/ImportConfirmDialog.stories.js
new file mode 100644
index 0000000..3ebec30
--- /dev/null
+++ b/components/imports/ImportConfirmDialog.stories.js
@@ -0,0 +1,19 @@
+import ImportConfirmDialog from './ImportConfirmDialog.vue';
+
+export default {
+  title: 'Domain/Imports/ImportConfirmDialog',
+  component: ImportConfirmDialog,
+  args: {
+    show: true,
+    acceptedCount: 25,
+    rejectedCount: 3,
+    duplicatesInAccepted: 2,
+    isConfirming: false,
+    newWalletCount: 1,
+    newPartyCount: 2,
+    newCategoryCount: 0,
+    missingWalletCount: 0
+  }
+};
+
+export const Default = {};
diff --git a/components/imports/ImportConfirmDialog.vue b/components/imports/ImportConfirmDialog.vue
new file mode 100644
index 0000000..47470e2
--- /dev/null
+++ b/components/imports/ImportConfirmDialog.vue
@@ -0,0 +1,267 @@
+<template>
+  <div v-if="show" class="dialog-overlay" @click.self="$emit('cancel')">
+    <div class="dialog">
+      <h3 class="dialog__title">{{ t('Confirm import') }}</h3>
+
+      <div class="dialog__body">
+        <p>{{ t('You are about to import {count} transactions.', { count: acceptedCount }) }}</p>
+
+        <div v-if="duplicatesInAccepted > 0" class="dialog__warning">
+          {{
+            t('{count} of these may be duplicates of existing transactions.', {
+              count: duplicatesInAccepted
+            })
+          }}
+        </div>
+
+        <div v-if="rejectedCount > 0" class="dialog__info">
+          {{ t('{count} suggestions will be skipped.', { count: rejectedCount }) }}
+        </div>
+
+        <div v-if="hasNewEntities" class="dialog__auto-create">
+          <p class="dialog__auto-create-label">
+            {{ t("Some transactions reference items that don't exist yet:") }}
+          </p>
+
+          <label v-if="newWalletCount > 0" class="dialog__toggle">
+            <input v-model="autoCreateWallets" type="checkbox" />
+            <span>{{ t('Create {count} new wallets', { count: newWalletCount }) }}</span>
+          </label>
+
+          <label v-if="newPartyCount > 0" class="dialog__toggle">
+            <input v-model="autoCreateParties" type="checkbox" />
+            <span>{{ t('Create {count} new parties', { count: newPartyCount }) }}</span>
+          </label>
+
+          <label v-if="newCategoryCount > 0" class="dialog__toggle">
+            <input v-model="autoCreateCategories" type="checkbox" />
+            <span>{{ t('Create {count} new categories', { count: newCategoryCount }) }}</span>
+          </label>
+
+          <p class="dialog__auto-create-hint">
+            {{ t('Unchecked items will be skipped and not linked to the transaction.') }}
+          </p>
+
+          <p v-if="walletGapUncovered" class="dialog__auto-create-warning">
+            {{
+              t(
+                'Some accepted rows have no wallet selected. Either choose one or enable "Create new wallets".'
+              )
+            }}
+          </p>
+        </div>
+      </div>
+
+      <div class="dialog__actions">
+        <TButton variant="secondary" :full-width="false" class="btn btn--secondary" @click="$emit('cancel')">
+          {{ t('Cancel') }}
+        </TButton>
+        <TButton
+          variant="primary"
+          :full-width="false"
+          class="btn btn--primary"
+          :disabled="isConfirming || walletGapUncovered"
+          @click="handleConfirm"
+        >
+          {{ isConfirming ? t('Importing...') : t('Confirm import') }}
+        </TButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k, params) => {
+  if (!params) return k;
+  return Object.entries(params).reduce(
+    (str, [key, val]) => str.replace(new RegExp('\\{' + key + '\\}', 'g'), val),
+    k
+  );
+});
+
+const props = defineProps<{
+  show: boolean;
+  acceptedCount: number;
+  rejectedCount: number;
+  duplicatesInAccepted: number;
+  isConfirming: boolean;
+  newWalletCount: number;
+  newPartyCount: number;
+  newCategoryCount: number;
+  missingWalletCount: number;
+}>();
+
+const emit = defineEmits<{
+  confirm: [autoCreate: AutoCreateOptions];
+  cancel: [];
+}>();
+
+const autoCreateWallets = ref(false);
+const autoCreateParties = ref(false);
+const autoCreateCategories = ref(false);
+
+const hasNewEntities = computed(
+  () => props.newWalletCount > 0 || props.newPartyCount > 0 || props.newCategoryCount > 0
+);
+
+// A row with no wallet_id is fine iff its suggestion wallet will be auto-created.
+// If the count of rows missing a wallet_id exceeds the count that auto-create
+// would cover, the user has to intervene before we can submit.
+const walletGapUncovered = computed(() => {
+  if (props.missingWalletCount === 0) return false;
+  if (props.newWalletCount > 0 && autoCreateWallets.value) return false;
+  return true;
+});
+
+const handleConfirm = () => {
+  emit('confirm', {
+    wallets: autoCreateWallets.value,
+    parties: autoCreateParties.value,
+    categories: autoCreateCategories.value
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: $z-index-modal;
+}
+
+.dialog {
+  background-color: $bg-white;
+  border-radius: $radius-xl;
+  padding: 24px;
+  max-width: 440px;
+  width: 100%;
+  box-shadow: $shadow-xl;
+
+  &__title {
+    margin: 0 0 16px;
+    font-size: $font-size-lg;
+    color: $text-primary;
+  }
+
+  &__body {
+    margin-bottom: 20px;
+
+    p {
+      margin: 0 0 8px;
+      color: $text-secondary;
+      font-size: $font-size-sm;
+    }
+  }
+
+  &__warning {
+    padding: 8px 12px;
+    background-color: $warning-bg;
+    color: $warning-text;
+    border-radius: $radius-lg;
+    font-size: $font-size-sm;
+    margin-top: 8px;
+  }
+
+  &__info {
+    padding: 8px 12px;
+    background-color: $bg-slate;
+    color: $text-muted;
+    border-radius: $radius-lg;
+    font-size: $font-size-sm;
+    margin-top: 8px;
+  }
+
+  &__auto-create {
+    margin-top: 12px;
+    padding: 12px;
+    background-color: $bg-slate;
+    border-radius: $radius-lg;
+    border: 1px solid $border-light;
+  }
+
+  &__auto-create-label {
+    font-weight: 600;
+    margin: 0 0 8px;
+    color: $text-primary;
+    font-size: $font-size-sm;
+  }
+
+  &__auto-create-hint {
+    margin: 8px 0 0;
+    font-size: $font-size-xs;
+    color: $text-muted;
+  }
+
+  &__auto-create-warning {
+    margin: 8px 0 0;
+    font-size: $font-size-xs;
+    font-weight: 600;
+    color: $error-color;
+  }
+
+  &__toggle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 0;
+    cursor: pointer;
+    font-size: $font-size-sm;
+    color: $text-secondary;
+
+    input[type='checkbox'] {
+      cursor: pointer;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    gap: 12px;
+    justify-content: flex-end;
+  }
+}
+
+.btn {
+  padding: 8px 20px;
+  border-radius: $radius-lg;
+  font-size: $font-size-sm;
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s;
+
+  &--secondary {
+    background-color: $bg-gray;
+    color: $text-secondary;
+
+    &:hover {
+      background-color: $border-color;
+    }
+  }
+
+  &--primary {
+    background-color: $primary;
+    color: $text-inverse;
+
+    &:hover:not(:disabled) {
+      background-color: $primary-hover;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+}
+</style>
diff --git a/components/imports/ImportSessionsList.stories.js b/components/imports/ImportSessionsList.stories.js
new file mode 100644
index 0000000..8a976ba
--- /dev/null
+++ b/components/imports/ImportSessionsList.stories.js
@@ -0,0 +1,28 @@
+import ImportSessionsList from './ImportSessionsList.vue';
+
+const sessions = [
+  {
+    id: 1,
+    file_name: 'march-statement.pdf',
+    status: 'ready',
+    created_at: '2024-03-24T10:00:00Z',
+    metadata: { total_suggestions: 28, duplicates_found: 3 }
+  },
+  {
+    id: 2,
+    file_name: 'receipts.jpg',
+    status: 'confirmed',
+    created_at: '2024-03-18T09:00:00Z',
+    metadata: { total_suggestions: 12, duplicates_found: 0 }
+  }
+];
+
+export default {
+  title: 'Domain/Imports/ImportSessionsList',
+  component: ImportSessionsList,
+  args: {
+    sessions
+  }
+};
+
+export const Default = {};
diff --git a/components/imports/ImportSessionsList.vue b/components/imports/ImportSessionsList.vue
new file mode 100644
index 0000000..d8e11d2
--- /dev/null
+++ b/components/imports/ImportSessionsList.vue
@@ -0,0 +1,235 @@
+<template>
+  <div class="sessions-list">
+    <h3 class="sessions-list__title">{{ t('Recent imports') }}</h3>
+    <ul class="sessions-list__items">
+      <li
+        v-for="session in sessions"
+        :key="session.id"
+        class="session-row"
+        role="button"
+        tabindex="0"
+        @click="$emit('open', session.id)"
+        @keydown.enter="$emit('open', session.id)"
+        @keydown.space.prevent="$emit('open', session.id)"
+      >
+        <FileText :size="18" class="session-row__icon" />
+        <div class="session-row__main">
+          <span class="session-row__name">{{ session.file_name }}</span>
+          <span class="session-row__meta">
+            {{ formatDate(session.created_at) }}
+            <template v-if="suggestionCount(session) !== null">
+              &middot; {{ suggestionCount(session) }} {{ t('suggestions') }}
+            </template>
+            <template v-if="duplicateCount(session) > 0">
+              &middot; {{ duplicateCount(session) }} {{ t('duplicates') }}
+            </template>
+          </span>
+        </div>
+        <span class="session-row__badge" :class="`is-${badge(session.status).tone}`">
+          <Loader2 v-if="badge(session.status).spin" :size="13" class="spin" />
+          {{ badge(session.status).label }}
+        </span>
+        <TButton
+          variant="text"
+          size="small"
+          :full-width="false"
+          class="session-delete"
+          :title="t('Delete import')"
+          :aria-label="t('Delete import')"
+          @click.stop="$emit('delete', session.id)"
+        >
+          <Trash2 :size="16" />
+        </TButton>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FileText, Loader2, Trash2 } from 'lucide-vue-next';
+
+defineProps<{ sessions: ImportSession[] }>();
+defineEmits<{ (e: 'open' | 'delete', id: number): void }>();
+
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const IN_PROGRESS = ['analyzing', 'extracting', 'enriching', 'checking'];
+
+const badge = (status: ImportSession['status']) => {
+  if (status === 'ready') return { label: t('Needs review'), tone: 'review', spin: false };
+  if (IN_PROGRESS.includes(status)) return { label: t('Analyzing'), tone: 'progress', spin: true };
+  if (status === 'confirmed') return { label: t('Imported'), tone: 'done', spin: false };
+  if (status === 'failed') return { label: t('Failed'), tone: 'failed', spin: false };
+  return { label: t('Expired'), tone: 'muted', spin: false };
+};
+
+const suggestionCount = (session: ImportSession): number | null => {
+  const total = session.metadata?.total_suggestions;
+  if (typeof total === 'number') return total;
+  return Array.isArray(session.suggestions) ? session.suggestions.length : null;
+};
+
+const duplicateCount = (session: ImportSession): number => {
+  const found = session.metadata?.duplicates_found;
+  return typeof found === 'number' ? found : 0;
+};
+
+const formatDate = (value: string): string => {
+  const d = new Date(value);
+  return Number.isNaN(d.getTime()) ? value : d.toLocaleDateString();
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.sessions-list {
+  margin-top: $spacing-5;
+
+  &__title {
+    font-size: $font-size-sm;
+    font-weight: $font-semibold;
+    color: $text-secondary;
+    margin: 0 0 $spacing-3;
+  }
+
+  &__items {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-2;
+  }
+}
+
+.session-row {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+  padding: $spacing-3;
+  border: 1px solid $border-light;
+  border-radius: $radius-lg;
+  background: $bg-white;
+  cursor: pointer;
+  text-align: left;
+  transition: $transition-base;
+
+  &:hover {
+    border-color: $primary;
+    background: $primary-light;
+  }
+
+  &:hover .session-delete,
+  &:focus-within .session-delete {
+    opacity: 1;
+  }
+
+  &:focus-visible {
+    outline: 2px solid $primary;
+    outline-offset: 2px;
+  }
+
+  &__icon {
+    color: $primary;
+    flex-shrink: 0;
+  }
+
+  &__main {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+    flex: 1;
+  }
+
+  &__name {
+    font-weight: $font-semibold;
+    font-size: $font-size-sm;
+    color: $text-primary;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__meta {
+    font-size: $font-size-xs;
+    color: $text-muted;
+  }
+
+  &__badge {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: $spacing-1;
+    padding: 2px 10px;
+    border-radius: 9999px;
+    font-size: $font-size-xs;
+    font-weight: $font-semibold;
+
+    &.is-review {
+      background: $primary-light;
+      color: $primary;
+    }
+
+    &.is-progress {
+      background: $bg-gray;
+      color: $text-secondary;
+    }
+
+    &.is-done {
+      background: rgba(var(--color-success-rgb), 0.12);
+      color: $success;
+    }
+
+    &.is-failed {
+      background: rgba(var(--color-error-rgb), 0.1);
+      color: $error-color;
+    }
+
+    &.is-muted {
+      background: $bg-gray;
+      color: $text-muted;
+    }
+
+    .spin {
+      animation: spin 1s linear infinite;
+    }
+  }
+}
+
+.session-delete {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: $text-muted;
+  cursor: pointer;
+  opacity: 0;
+  transition: $transition-base;
+
+  &:hover {
+    color: $error-color;
+    background: rgba(var(--color-error-rgb), 0.08);
+  }
+
+  @media (hover: none) {
+    opacity: 1;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/components/imports/ImportUpload.stories.js b/components/imports/ImportUpload.stories.js
new file mode 100644
index 0000000..5c4bbdf
--- /dev/null
+++ b/components/imports/ImportUpload.stories.js
@@ -0,0 +1,15 @@
+import ImportUpload from './ImportUpload.vue';
+
+export default {
+  title: 'Domain/Imports/ImportUpload',
+  component: ImportUpload,
+  args: {
+    isAnalyzing: false
+  }
+};
+
+export const Default = {};
+
+export const Analyzing = {
+  args: { isAnalyzing: true }
+};
diff --git a/components/imports/ImportUpload.vue b/components/imports/ImportUpload.vue
new file mode 100644
index 0000000..4023785
--- /dev/null
+++ b/components/imports/ImportUpload.vue
@@ -0,0 +1,685 @@
+<template>
+  <section class="import-upload surface surface--brand-soft">
+    <svg
+      class="upload-backdrop"
+      viewBox="0 0 1200 600"
+      preserveAspectRatio="xMaxYMid slice"
+      aria-hidden="true"
+    >
+      <defs>
+        <radialGradient id="upload-bloom" cx="100%" cy="30%" r="60%">
+          <stop offset="0%" stop-color="var(--surface-accent)" stop-opacity="0.4" />
+          <stop offset="100%" stop-color="var(--surface-accent)" stop-opacity="0" />
+        </radialGradient>
+      </defs>
+      <circle cx="1100" cy="100" r="280" fill="url(#upload-bloom)" />
+    </svg>
+
+    <div class="upload-grid">
+      <div class="upload-art">
+        <div class="doc-rotator">
+          <svg class="doc-orbit" viewBox="0 0 240 240" aria-hidden="true">
+            <defs>
+              <radialGradient id="doc-glow" cx="50%" cy="50%" r="55%">
+                <stop offset="0%" stop-color="var(--surface-accent)" stop-opacity="0.45" />
+                <stop offset="100%" stop-color="var(--surface-accent)" stop-opacity="0" />
+              </radialGradient>
+            </defs>
+            <circle cx="120" cy="120" r="110" fill="url(#doc-glow)" />
+            <circle
+              cx="120"
+              cy="120"
+              r="92"
+              fill="none"
+              stroke="var(--surface-accent)"
+              stroke-opacity="0.45"
+              stroke-width="1"
+              stroke-dasharray="3 4"
+            />
+            <circle
+              cx="120"
+              cy="120"
+              r="68"
+              fill="none"
+              stroke="var(--surface-accent)"
+              stroke-opacity="0.6"
+              stroke-width="1"
+            />
+          </svg>
+
+          <Transition name="doc-swap">
+            <div :key="activeDoc.key" class="doc-card" :class="`doc-card--${activeDoc.key}`">
+              <div class="doc-icon">
+                <img
+                  :src="`/icons/imports/${activeDoc.key}.svg`"
+                  :alt="activeDoc.name"
+                  width="22"
+                  height="22"
+                  class="doc-glyph-img"
+                />
+              </div>
+              <div class="doc-meta">
+                <span class="doc-name">{{ activeDoc.name }}</span>
+                <span class="doc-format">{{ activeDoc.format }}</span>
+              </div>
+              <span class="doc-badge">{{ activeDoc.badge }}</span>
+            </div>
+          </Transition>
+
+          <div class="doc-dots">
+            <TButton
+              v-for="(d, i) in docTypes"
+              :key="d.key"
+              variant="text"
+              size="small"
+              :full-width="false"
+              class="doc-dot"
+              :class="{ 'doc-dot--active': i === activeIndex }"
+              :aria-label="t('Show {name}', { name: d.name })"
+              @click="goTo(i)"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="upload-content">
+        <span class="upload-eyebrow">{{ t('Smart import') }}</span>
+        <h2 class="upload-title">{{ t('Bring your statements and receipts to life') }}</h2>
+        <p class="upload-subtitle">
+          {{
+            t(
+              'Drop a CSV, PDF, or photo. We extract the transactions, match wallets and categories, and let you review before saving.'
+            )
+          }}
+        </p>
+
+        <div
+          class="drop-zone"
+          :class="{ 'drop-zone--active': isDragging }"
+          @dragover.prevent="isDragging = true"
+          @dragleave.prevent="isDragging = false"
+          @drop.prevent="handleDrop"
+          @click="fileInputRef?.click()"
+        >
+          <ArrowUpTrayIcon class="drop-zone__icon" />
+          <div class="drop-zone__text">
+            <p class="drop-zone__title">{{ t('Drop your file here or click to browse') }}</p>
+            <p class="drop-zone__subtitle">{{ t('Supports CSV, PDF, PNG, JPG, TIFF, BMP') }}</p>
+          </div>
+        </div>
+
+        <input
+          ref="fileInputRef"
+          type="file"
+          accept=".csv,.pdf,.png,.jpg,.jpeg,.tiff,.tif,.bmp"
+          class="hidden-input"
+          @change="handleFileSelect"
+        />
+
+        <div v-if="selectedFile" class="selected-file">
+          <DocumentIcon class="selected-file__icon" />
+          <span class="selected-file__name">{{ selectedFile.name }}</span>
+          <TButton
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="selected-file__remove"
+            :aria-label="t('Remove')"
+            @click="clearFile"
+          >
+            <XMarkIcon class="selected-file__remove-icon" />
+          </TButton>
+        </div>
+
+        <div class="upload-row">
+          <div class="upload-options">
+            <label class="upload-options__label">{{ t('Document type') }}</label>
+            <select v-model="documentType" class="upload-options__select">
+              <option value="">{{ t('Auto-detect') }}</option>
+              <option value="bank_statement">{{ t('Bank statement') }}</option>
+              <option value="receipt">{{ t('Receipt') }}</option>
+              <option value="invoice">{{ t('Invoice') }}</option>
+              <option value="pay_stub">{{ t('Pay stub') }}</option>
+              <option value="utility_bill">{{ t('Utility bill') }}</option>
+            </select>
+          </div>
+
+          <TButton
+            variant="primary"
+            :full-width="false"
+            class="upload-button"
+            :disabled="!selectedFile || isAnalyzing"
+            @click="handleUpload"
+          >
+            {{ isAnalyzing ? t('Analyzing...') : t('Analyze document') }}
+          </TButton>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import {
+  Upload as ArrowUpTrayIcon,
+  FileText as DocumentIcon,
+  X as XMarkIcon
+} from 'lucide-vue-next';
+
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k, params) => {
+  if (!params) return k;
+  return Object.entries(params).reduce(
+    (str, [key, val]) => str.replace(new RegExp('\\{' + key + '\\}', 'g'), val),
+    k
+  );
+});
+
+const emit = defineEmits<{
+  upload: [file: File, documentType?: string];
+}>();
+
+defineProps<{
+  isAnalyzing: boolean;
+}>();
+
+const fileInputRef = ref<HTMLInputElement | null>(null);
+const selectedFile = ref<File | null>(null);
+const documentType = ref('');
+const isDragging = ref(false);
+
+const docTypes = [
+  { key: 'csv', name: t('Spreadsheet'), format: t('CSV / XLSX'), badge: 'CSV' },
+  { key: 'pdf', name: t('Bank statement'), format: t('PDF document'), badge: 'PDF' },
+  { key: 'image', name: t('Receipt photo'), format: t('PNG · JPG · TIFF'), badge: 'IMG' },
+  { key: 'receipt', name: t('Paper receipt'), format: t('Scanned image'), badge: 'OCR' }
+];
+const activeIndex = ref(0);
+const activeDoc = computed(() => docTypes[activeIndex.value]);
+let rotateTimer: ReturnType<typeof setInterval> | null = null;
+
+const goTo = (i: number) => {
+  activeIndex.value = i;
+  if (rotateTimer) {
+    clearInterval(rotateTimer);
+    startRotate();
+  }
+};
+
+const startRotate = () => {
+  rotateTimer = setInterval(() => {
+    activeIndex.value = (activeIndex.value + 1) % docTypes.length;
+  }, 2800);
+};
+
+onMounted(() => startRotate());
+onBeforeUnmount(() => {
+  if (rotateTimer) clearInterval(rotateTimer);
+});
+
+const handleDrop = (event: DragEvent) => {
+  isDragging.value = false;
+  const file = event.dataTransfer?.files[0];
+  if (file) selectedFile.value = file;
+};
+
+const handleFileSelect = (event: Event) => {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  if (file) selectedFile.value = file;
+};
+
+const clearFile = () => {
+  selectedFile.value = null;
+  if (fileInputRef.value) fileInputRef.value.value = '';
+};
+
+const handleUpload = () => {
+  if (!selectedFile.value) return;
+  emit('upload', selectedFile.value, documentType.value || undefined);
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.import-upload {
+  position: relative;
+  width: 100%;
+  border: 1px solid $border-light;
+  border-radius: 18px;
+  box-shadow: $elevation-1;
+  overflow: hidden;
+  padding: 2rem 2.25rem;
+
+  @media (max-width: $breakpoint-md) {
+    padding: 1.5rem;
+  }
+  @media (max-width: $breakpoint-sm) {
+    padding: 1.25rem 1rem;
+    border-radius: 14px;
+  }
+}
+
+.upload-backdrop {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.upload-grid {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: $spacing-5;
+  align-items: center;
+
+  @media (min-width: $breakpoint-md) {
+    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
+    gap: $spacing-8;
+  }
+}
+
+.upload-art {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 24px;
+}
+
+.doc-rotator {
+  position: relative;
+  width: 320px;
+  height: 320px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  @media (max-width: $breakpoint-md) {
+    width: 240px;
+    height: 240px;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    width: 200px;
+    height: 200px;
+  }
+}
+
+.doc-orbit {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  animation: doc-orbit-spin 24s linear infinite;
+}
+
+@keyframes doc-orbit-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.doc-card {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 48px 1fr auto;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  width: min(86%, 260px);
+  background: $bg-white;
+  border: 1px solid $border-light;
+  border-radius: 14px;
+  box-shadow: $elevation-2;
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 10px 12px;
+    grid-template-columns: 36px 1fr auto;
+    gap: 8px;
+  }
+}
+
+.doc-icon {
+  position: relative;
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background: var(--surface-bg);
+  border: 1px solid $border-light;
+  color: var(--surface-deep);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  @media (max-width: $breakpoint-sm) {
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+  }
+}
+
+.doc-glyph-img {
+  display: block;
+  width: 22px;
+  height: 22px;
+}
+
+.doc-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+  line-height: 1.2;
+}
+
+.doc-name {
+  font-size: $font-size-sm;
+  font-weight: $font-bold;
+  color: $text-primary;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  letter-spacing: -0.005em;
+}
+
+.doc-format {
+  font-size: 10px;
+  color: $text-muted;
+  font-weight: $font-medium;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.doc-badge {
+  font-size: 9px;
+  font-weight: $font-bold;
+  letter-spacing: 0.08em;
+  padding: 3px 7px;
+  border-radius: 6px;
+  background: var(--surface-deep);
+  color: var(--color-text-inverse);
+  font-variant-numeric: tabular-nums;
+}
+
+.doc-dots {
+  position: absolute;
+  bottom: -18px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.doc-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  border: none;
+  background: var(--surface-accent);
+  opacity: 0.35;
+  cursor: pointer;
+  padding: 0;
+  transition:
+    opacity $duration-fast $easing-standard,
+    width $duration-base $easing-emphasized;
+
+  &:hover {
+    opacity: 0.6;
+  }
+
+  &--active {
+    opacity: 1;
+    width: 18px;
+    border-radius: 999px;
+  }
+}
+
+// Opacity-only crossfade so the transition doesn't clobber the card's
+// translate(-50%, -50%) centering transform.
+.doc-swap-enter-active,
+.doc-swap-leave-active {
+  transition: opacity $duration-base $easing-standard;
+}
+.doc-swap-enter-from,
+.doc-swap-leave-to {
+  opacity: 0;
+}
+
+.upload-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.upload-eyebrow {
+  font-size: 11px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--surface-deep);
+  opacity: 0.85;
+}
+
+.upload-title {
+  font-size: 1.5rem;
+  font-weight: $font-bold;
+  letter-spacing: -0.025em;
+  color: var(--surface-ink);
+  margin: 0 0 4px;
+  line-height: 1.15;
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 1.25rem;
+  }
+}
+
+.upload-subtitle {
+  font-size: $font-size-base;
+  color: var(--surface-ink);
+  opacity: 0.75;
+  line-height: 1.5;
+  margin: 0 0 12px;
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: $font-size-sm;
+  }
+}
+
+.drop-zone {
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+  padding: 16px 18px;
+  border: 1.5px dashed var(--surface-accent);
+  border-radius: 12px;
+  background: var(--glass-bg);
+  cursor: pointer;
+  transition:
+    background-color $duration-fast $easing-standard,
+    border-color $duration-fast $easing-standard;
+  backdrop-filter: blur(6px);
+
+  &:hover,
+  &--active {
+    border-color: var(--surface-deep);
+    background: var(--glass-bg-strong);
+  }
+
+  &__icon {
+    width: 24px;
+    height: 24px;
+    color: var(--surface-deep);
+    flex-shrink: 0;
+  }
+
+  &__text {
+    min-width: 0;
+  }
+
+  &__title {
+    font-size: $font-size-sm;
+    font-weight: $font-semibold;
+    color: var(--surface-ink);
+    margin: 0;
+  }
+
+  &__subtitle {
+    font-size: 11px;
+    color: var(--surface-ink);
+    opacity: 0.65;
+    margin: 0;
+  }
+}
+
+.hidden-input {
+  display: none;
+}
+
+.selected-file {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 10px;
+  padding: 8px 10px;
+  background: var(--glass-bg);
+  border: 1px solid $border-light;
+  border-radius: 999px;
+  backdrop-filter: blur(6px);
+
+  &__icon {
+    width: 16px;
+    height: 16px;
+    color: var(--surface-deep);
+    flex-shrink: 0;
+  }
+
+  &__name {
+    font-size: $font-size-sm;
+    font-weight: $font-medium;
+    color: var(--surface-ink);
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__remove {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 6px;
+    display: inline-flex;
+    transition: background-color $duration-fast $easing-standard;
+
+    &:hover {
+      background-color: rgba(var(--color-expense-rgb), 0.12);
+    }
+  }
+
+  &__remove-icon {
+    width: 14px;
+    height: 14px;
+    color: var(--surface-deep);
+  }
+}
+
+.upload-row {
+  display: flex;
+  align-items: flex-end;
+  gap: $spacing-3;
+  margin-top: 12px;
+  flex-wrap: wrap;
+}
+
+.upload-options {
+  flex: 1;
+  min-width: 180px;
+
+  &__label {
+    display: block;
+    font-size: 11px;
+    font-weight: $font-bold;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--surface-deep);
+    opacity: 0.85;
+    margin-bottom: 6px;
+  }
+
+  &__select {
+    width: 100%;
+    height: 40px;
+    padding: 0 12px;
+    border: 1px solid $border-medium;
+    border-radius: 10px;
+    font-size: $font-size-sm;
+    background-color: $bg-white;
+    color: $text-primary;
+    transition:
+      border-color $duration-fast $easing-standard,
+      box-shadow $duration-fast $easing-standard;
+
+    &:hover {
+      border-color: $text-muted;
+    }
+
+    &:focus {
+      outline: none;
+      border-color: $primary;
+      box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.18);
+    }
+  }
+}
+
+.upload-button {
+  height: 40px;
+  padding: 0 1.25rem;
+  background-color: $primary;
+  color: $text-inverse;
+  border: none;
+  border-radius: 10px;
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  letter-spacing: -0.005em;
+  cursor: pointer;
+  box-shadow: $elevation-1;
+  transition:
+    background-color $duration-fast $easing-standard,
+    box-shadow $duration-fast $easing-standard,
+    transform $duration-fast $easing-standard;
+  white-space: nowrap;
+
+  &:hover:not(:disabled) {
+    background-color: $primary-hover;
+    box-shadow: $elevation-2;
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(0.98);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+}
+</style>
diff --git a/components/imports/SuggestionReviewTable.stories.js b/components/imports/SuggestionReviewTable.stories.js
new file mode 100644
index 0000000..e507887
--- /dev/null
+++ b/components/imports/SuggestionReviewTable.stories.js
@@ -0,0 +1,50 @@
+import SuggestionReviewTable from './SuggestionReviewTable.vue';
+
+const suggestions = [
+  {
+    index: 0,
+    status: 'accepted',
+    description: 'Weekly groceries',
+    amount: 142.5,
+    date: '2024-03-24',
+    type: 'expense',
+    wallet_id: 1,
+    category_id: 1,
+    party_id: 1,
+    duplicate: null
+  },
+  {
+    index: 1,
+    status: 'pending',
+    description: 'Monthly salary',
+    amount: 2800,
+    date: '2024-03-20',
+    type: 'income',
+    wallet_id: 1,
+    category_id: 2,
+    party_id: 2,
+    duplicate: null
+  }
+];
+
+export default {
+  title: 'Domain/Imports/SuggestionReviewTable',
+  component: SuggestionReviewTable,
+  args: {
+    suggestions,
+    wallets: [{ id: 1, name: 'Main Bank Account' }],
+    categories: [
+      { id: 1, name: 'Food & Dining' },
+      { id: 2, name: 'Salary' }
+    ],
+    parties: [
+      { id: 1, name: 'Grocery Store' },
+      { id: 2, name: 'Employer' }
+    ],
+    acceptedCount: 1,
+    rejectedCount: 0,
+    pendingCount: 1
+  }
+};
+
+export const Default = {};
diff --git a/components/imports/SuggestionReviewTable.vue b/components/imports/SuggestionReviewTable.vue
new file mode 100644
index 0000000..23fb95d
--- /dev/null
+++ b/components/imports/SuggestionReviewTable.vue
@@ -0,0 +1,584 @@
+<template>
+  <div class="review-table">
+    <div class="review-table__actions">
+      <TButton variant="secondary" :full-width="false" class="action-btn action-btn--accept" @click="$emit('acceptAll')">
+        {{ t('Accept all') }}
+      </TButton>
+      <TButton variant="secondary" :full-width="false" class="action-btn action-btn--reject" @click="$emit('rejectAll')">
+        {{ t('Reject all') }}
+      </TButton>
+      <span class="review-table__summary">
+        {{
+          t('{accepted} accepted, {rejected} rejected, {pending} pending', {
+            accepted: acceptedCount,
+            rejected: rejectedCount,
+            pending: pendingCount
+          })
+        }}
+      </span>
+    </div>
+
+    <div class="table-wrapper">
+      <table>
+        <thead>
+          <tr>
+            <th class="col-status"></th>
+            <th>{{ t('Date') }}</th>
+            <th>{{ t('Description') }}</th>
+            <th>{{ t('Amount') }}</th>
+            <th>{{ t('Type') }}</th>
+            <th>{{ t('Party') }}</th>
+            <th>{{ t('Category') }}</th>
+            <th>{{ t('Wallet') }}</th>
+            <th>{{ t('Confidence') }}</th>
+            <th>{{ t('Duplicate') }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <template v-for="suggestion in suggestions" :key="suggestion.index">
+            <tr :class="rowClass(suggestion)">
+              <td class="col-status">
+                <input
+                  type="checkbox"
+                  :checked="suggestion.status === 'accepted'"
+                  @change="$emit('toggle', suggestion.index)"
+                />
+              </td>
+              <td>
+                <input
+                  type="text"
+                  class="inline-edit"
+                  :value="suggestion.date"
+                  @change="
+                    handleEdit(suggestion.index, 'date', ($event.target as HTMLInputElement).value)
+                  "
+                />
+              </td>
+              <td>
+                <input
+                  type="text"
+                  class="inline-edit inline-edit--wide"
+                  :value="suggestion.description"
+                  @change="
+                    handleEdit(
+                      suggestion.index,
+                      'description',
+                      ($event.target as HTMLInputElement).value
+                    )
+                  "
+                />
+              </td>
+              <td class="col-amount">
+                <input
+                  type="number"
+                  class="inline-edit inline-edit--number"
+                  step="0.01"
+                  :value="suggestion.amount"
+                  @change="
+                    handleEdit(
+                      suggestion.index,
+                      'amount',
+                      parseFloat(($event.target as HTMLInputElement).value)
+                    )
+                  "
+                />
+              </td>
+              <td>
+                <select
+                  class="inline-edit"
+                  :value="suggestion.type"
+                  @change="
+                    handleEdit(suggestion.index, 'type', ($event.target as HTMLSelectElement).value)
+                  "
+                >
+                  <option value="expense">{{ t('Expense') }}</option>
+                  <option value="income">{{ t('Income') }}</option>
+                </select>
+              </td>
+              <td>
+                <select
+                  class="inline-edit"
+                  :value="suggestion.party_id ?? ''"
+                  @change="
+                    handleIdEdit(
+                      suggestion.index,
+                      'party_id',
+                      ($event.target as HTMLSelectElement).value
+                    )
+                  "
+                >
+                  <option value="">--</option>
+                  <option v-for="p in parties" :key="p.id" :value="p.id">{{ p.name }}</option>
+                </select>
+                <span v-if="suggestion.party && !suggestion.party_id" class="inline-hint">
+                  {{ t('Suggested') }}: {{ suggestion.party }}
+                </span>
+              </td>
+              <td>
+                <select
+                  class="inline-edit"
+                  :value="suggestion.category_id ?? ''"
+                  @change="
+                    handleIdEdit(
+                      suggestion.index,
+                      'category_id',
+                      ($event.target as HTMLSelectElement).value
+                    )
+                  "
+                >
+                  <option value="">--</option>
+                  <option v-for="c in categories" :key="c.id" :value="c.id">{{ c.name }}</option>
+                </select>
+                <span v-if="suggestion.category && !suggestion.category_id" class="inline-hint">
+                  {{ t('Suggested') }}: {{ suggestion.category }}
+                </span>
+              </td>
+              <td>
+                <select
+                  class="inline-edit"
+                  :class="{ 'inline-edit--missing': !suggestion.wallet_id }"
+                  :value="suggestion.wallet_id ?? ''"
+                  @change="
+                    handleIdEdit(
+                      suggestion.index,
+                      'wallet_id',
+                      ($event.target as HTMLSelectElement).value
+                    )
+                  "
+                >
+                  <option value="">{{ t('Select wallet') }}</option>
+                  <option v-for="w in wallets" :key="w.id" :value="w.id">
+                    {{ w.name }} ({{ w.currency }})
+                  </option>
+                </select>
+                <span v-if="suggestion.wallet && !suggestion.wallet_id" class="inline-hint">
+                  {{ t('Suggested') }}: {{ suggestion.wallet }}
+                </span>
+              </td>
+              <td class="col-confidence">
+                <span class="confidence-badge" :class="confidenceClass(suggestion.confidence)">
+                  {{ Math.round(suggestion.confidence * 100) }}%
+                </span>
+              </td>
+              <td class="col-duplicate">
+                <TButton
+                  v-if="suggestion.duplicate"
+                  variant="text"
+                  size="small"
+                  :full-width="false"
+                  class="duplicate-badge"
+                  :class="`duplicate-badge--${suggestion.duplicate.match_type}`"
+                  @click="toggleExpanded(suggestion.index)"
+                >
+                  {{ t(duplicateLabel(suggestion.duplicate.match_type)) }}
+                  <ChevronDownIcon
+                    class="duplicate-badge__chevron"
+                    :class="{
+                      'duplicate-badge__chevron--open': expandedRows.has(suggestion.index)
+                    }"
+                  />
+                </TButton>
+              </td>
+            </tr>
+            <!-- Expanded duplicate detail row -->
+            <tr
+              v-if="suggestion.duplicate && expandedRows.has(suggestion.index)"
+              :key="`dup-${suggestion.index}`"
+              class="row--duplicate-detail"
+            >
+              <td colspan="10">
+                <div class="duplicate-detail">
+                  <span class="duplicate-detail__label">{{ t('Existing transaction') }}:</span>
+                  <span class="duplicate-detail__date">{{
+                    suggestion.duplicate.transaction_date
+                  }}</span>
+                  <span class="duplicate-detail__desc">{{
+                    suggestion.duplicate.transaction_description
+                  }}</span>
+                  <span class="duplicate-detail__amount">
+                    {{ suggestion.duplicate.transaction_amount }}
+                  </span>
+                  <span class="duplicate-detail__type">{{
+                    suggestion.duplicate.transaction_type
+                  }}</span>
+                  <div class="duplicate-detail__actions">
+                    <TButton
+                      variant="text"
+                      size="small"
+                      :full-width="false"
+                      class="duplicate-detail__btn"
+                      @click="$emit('toggle', suggestion.index)"
+                    >
+                      {{
+                        suggestion.status === 'accepted'
+                          ? t('Skip this import')
+                          : t('Import anyway')
+                      }}
+                    </TButton>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ChevronDownIcon } from '@heroicons/vue/24/outline';
+
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k, params) => {
+  if (!params) return k;
+  return Object.entries(params).reduce(
+    (str, [key, val]) => str.replace(new RegExp('\\{' + key + '\\}', 'g'), val),
+    k
+  );
+});
+
+defineProps<{
+  suggestions: SuggestionWithDuplicate[];
+  wallets: readonly Wallet[];
+  categories: readonly Category[];
+  parties: readonly Party[];
+  acceptedCount: number;
+  rejectedCount: number;
+  pendingCount: number;
+}>();
+
+const emit = defineEmits<{
+  toggle: [index: number];
+  edit: [index: number, edits: Partial<SuggestionWithDuplicate>];
+  acceptAll: [];
+  rejectAll: [];
+}>();
+
+const expandedRows = ref(new Set<number>());
+
+const toggleExpanded = (index: number) => {
+  if (expandedRows.value.has(index)) {
+    expandedRows.value.delete(index);
+  } else {
+    expandedRows.value.add(index);
+  }
+};
+
+const handleEdit = (index: number, field: string, value: any) => {
+  emit('edit', index, { [field]: value });
+};
+
+// ID selects emit a string from the <select> element; coerce to number or null.
+const handleIdEdit = (
+  index: number,
+  field: 'wallet_id' | 'party_id' | 'category_id',
+  value: string
+) => {
+  const id = value === '' ? null : Number(value);
+  emit('edit', index, { [field]: id });
+};
+
+const isRowInvalid = (s: SuggestionWithDuplicate) => !s.wallet_id;
+
+const rowClass = (s: SuggestionWithDuplicate) => ({
+  'row--accepted': s.status === 'accepted' && !isRowInvalid(s),
+  'row--rejected': s.status === 'rejected',
+  'row--invalid': s.status === 'accepted' && isRowInvalid(s)
+});
+
+const confidenceClass = (confidence: number) => ({
+  'confidence-badge--high': confidence >= 0.8,
+  'confidence-badge--medium': confidence >= 0.5 && confidence < 0.8,
+  'confidence-badge--low': confidence < 0.5
+});
+
+const duplicateLabel = (type: string) => {
+  switch (type) {
+    case 'exact':
+      return 'Exact match';
+    case 'near':
+      return 'Near match';
+    case 'similar':
+      return 'Similar';
+    default:
+      return type;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.review-table {
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 16px;
+    flex-wrap: wrap;
+  }
+
+  &__summary {
+    font-size: $font-size-sm;
+    color: $text-muted;
+    margin-left: auto;
+  }
+}
+
+.action-btn {
+  padding: 6px 16px;
+  border-radius: $radius-lg;
+  font-size: $font-size-sm;
+  border: 1px solid $border-color;
+  cursor: pointer;
+  transition: all 0.2s;
+  background-color: $bg-white;
+
+  &--accept:hover {
+    background-color: rgba(var(--color-success-rgb), 0.1);
+    border-color: $success;
+    color: $success;
+  }
+
+  &--reject:hover {
+    background-color: rgba(var(--color-error-rgb), 0.1);
+    border-color: $error-color;
+    color: $error-color;
+  }
+}
+
+.table-wrapper {
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: $font-size-sm;
+}
+
+thead {
+  background-color: $bg-gray;
+
+  th {
+    padding: $table-header-padding;
+    text-align: left;
+    font-weight: 600;
+    color: $text-secondary;
+    white-space: nowrap;
+    border-bottom: 2px solid $border-color;
+  }
+}
+
+tbody tr {
+  border-bottom: 1px solid $border-light;
+  transition: background-color 0.15s;
+
+  &:hover {
+    background-color: $bg-slate;
+  }
+}
+
+td {
+  padding: $table-cell-padding;
+  vertical-align: middle;
+}
+
+.col-status {
+  width: 36px;
+  text-align: center;
+}
+
+.col-amount {
+  white-space: nowrap;
+}
+
+.col-confidence,
+.col-duplicate {
+  white-space: nowrap;
+}
+
+.row--accepted {
+  background-color: rgba(var(--color-success-rgb), 0.04);
+}
+
+.row--rejected {
+  background-color: rgba(var(--color-error-rgb), 0.04);
+  opacity: 0.6;
+}
+
+.row--invalid {
+  background-color: rgba(var(--color-error-rgb), 0.08);
+  border-left: 3px solid $error-color;
+}
+
+.inline-edit {
+  width: 100%;
+  min-width: 80px;
+  padding: 4px 6px;
+  border: 1px solid transparent;
+  border-radius: $radius-sm;
+  font-size: $font-size-sm;
+  background: transparent;
+  color: $text-primary;
+
+  &:hover,
+  &:focus {
+    border-color: $border-color;
+    background-color: $bg-white;
+    outline: none;
+  }
+
+  &--wide {
+    min-width: 160px;
+  }
+
+  &--number {
+    min-width: 90px;
+    text-align: right;
+  }
+
+  &--missing {
+    border-color: $error-color;
+    background-color: rgba(var(--color-error-rgb), 0.06);
+  }
+}
+
+.inline-hint {
+  display: block;
+  margin-top: 2px;
+  font-size: $font-size-xs;
+  color: $text-muted;
+}
+
+select.inline-edit {
+  min-width: 90px;
+  cursor: pointer;
+}
+
+.confidence-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: $radius-sm;
+  font-size: $font-size-xs;
+  font-weight: 500;
+
+  &--high {
+    background-color: rgba(var(--color-success-rgb), 0.15);
+    color: $success;
+  }
+
+  &--medium {
+    background-color: rgba(var(--color-warning-rgb), 0.15);
+    color: $warning-text;
+  }
+
+  &--low {
+    background-color: rgba(var(--color-error-rgb), 0.15);
+    color: $error-color;
+  }
+}
+
+.duplicate-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: $radius-sm;
+  font-size: $font-size-xs;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  background: none;
+
+  &--exact {
+    background-color: rgba(var(--color-error-rgb), 0.15);
+    color: $error-color;
+  }
+
+  &--near {
+    background-color: rgba(var(--color-warning-rgb), 0.15);
+    color: $warning-text;
+  }
+
+  &--similar {
+    background-color: rgba(var(--color-info-rgb), 0.15);
+    color: $info;
+  }
+
+  &__chevron {
+    width: 12px;
+    height: 12px;
+    transition: transform 0.2s;
+
+    &--open {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+.row--duplicate-detail {
+  background-color: $bg-slate;
+
+  td {
+    padding: 0;
+  }
+}
+
+.duplicate-detail {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px 8px 44px;
+  font-size: $font-size-xs;
+  color: $text-secondary;
+  flex-wrap: wrap;
+
+  &__label {
+    font-weight: 600;
+    color: $text-muted;
+  }
+
+  &__date {
+    color: $text-secondary;
+  }
+
+  &__desc {
+    flex: 1;
+    min-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__amount {
+    font-weight: 500;
+  }
+
+  &__type {
+    text-transform: capitalize;
+    color: $text-muted;
+  }
+
+  &__actions {
+    margin-left: auto;
+  }
+
+  &__btn {
+    padding: 3px 10px;
+    border-radius: $radius-sm;
+    font-size: $font-size-xs;
+    border: 1px solid $border-color;
+    background: $bg-white;
+    cursor: pointer;
+    color: $text-secondary;
+
+    &:hover {
+      background-color: $bg-gray;
+    }
+  }
+}
+</style>
diff --git a/components/modals/ConfirmModal.stories.js b/components/modals/ConfirmModal.stories.js
new file mode 100644
index 0000000..275a550
--- /dev/null
+++ b/components/modals/ConfirmModal.stories.js
@@ -0,0 +1,22 @@
+import ConfirmModal from './ConfirmModal.vue';
+
+export default {
+  title: 'Modals/ConfirmModal',
+  component: ConfirmModal,
+  tags: ['autodocs'],
+  argTypes: {
+    type: { control: 'select', options: ['warning', 'danger', 'info'] }
+  }
+};
+
+const base = {
+  isOpen: true,
+  title: 'Are you sure?',
+  message: 'This action cannot be undone.',
+  confirmText: 'Confirm',
+  cancelText: 'Cancel'
+};
+
+export const Warning = { args: { ...base, type: 'warning' } };
+export const Danger  = { args: { ...base, type: 'danger',  title: 'Delete item?', message: 'This will permanently delete the item.' } };
+export const Info    = { args: { ...base, type: 'info',    title: 'Heads up', message: 'This will affect all linked records.' } };
diff --git a/components/modals/ConfirmModal.vue b/components/modals/ConfirmModal.vue
new file mode 100644
index 0000000..d1720a6
--- /dev/null
+++ b/components/modals/ConfirmModal.vue
@@ -0,0 +1,205 @@
+<template>
+  <div v-if="isOpen" class="modal-overlay" @click="handleCancel">
+    <TCard class="modal-content" @click.stop>
+      <template #header>
+        <div class="modal-header">
+          <h3 class="modal-title">{{ title }}</h3>
+          <TButton
+            variant="text"
+            :full-width="false"
+            class="close-button"
+            @click="handleCancel"
+          >
+            <XIcon />
+          </TButton>
+        </div>
+      </template>
+
+      <div class="modal-body">
+        <div class="icon-container" :class="`type-${type}`">
+          <AlertTriangleIcon v-if="type === 'warning'" />
+          <TrashIcon v-else-if="type === 'danger'" />
+          <InfoIcon v-else />
+        </div>
+        <p class="message">{{ message }}</p>
+      </div>
+
+      <template #footer>
+        <div class="modal-actions">
+          <TButton variant="secondary" :full-width="false" @click="handleCancel">
+            {{ cancelText || t('Cancel') }}
+          </TButton>
+          <TButton
+            variant="primary"
+            :full-width="false"
+            class="confirm-button"
+            :class="`type-${type}`"
+            @click="handleConfirm"
+          >
+            {{ confirmText || t('Confirm') }}
+          </TButton>
+        </div>
+      </template>
+    </TCard>
+  </div>
+</template>
+
+<script setup>
+import {
+  X as XIcon,
+  AlertTriangle as AlertTriangleIcon,
+  Trash as TrashIcon,
+  Info as InfoIcon
+} from 'lucide-vue-next';
+import TCard from '../TCard.vue';
+import TButton from '../TButton.vue';
+
+const { t } = useI18n();
+
+defineProps({
+  isOpen: { type: Boolean, default: false },
+  title: { type: String, required: true },
+  message: { type: String, required: true },
+  confirmText: { type: String, default: '' },
+  cancelText: { type: String, default: '' },
+  type: {
+    type: String,
+    default: 'warning',
+    validator: (value) => ['warning', 'danger', 'info'].includes(value)
+  }
+});
+
+const emit = defineEmits(['confirm', 'cancel']);
+
+const handleConfirm = () => emit('confirm');
+const handleCancel = () => emit('cancel');
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+}
+
+// TCard provides bg, border-radius and shadow — we only set sizing & animation
+.modal-content {
+  max-width: 400px;
+  width: 100%;
+  animation: modalEnter 0.2s ease-out;
+
+  @media (max-width: $breakpoint-sm) {
+    margin: 1rem;
+    max-width: calc(100vw - 2rem);
+  }
+}
+
+@keyframes modalEnter {
+  from { opacity: 0; transform: scale(0.95) translateY(-10px); }
+  to   { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem 1.5rem 0;
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 1rem 1rem 0;
+  }
+}
+
+.modal-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: $text-primary;
+  margin: 0;
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 1.125rem;
+  }
+}
+
+// Icon-only close button — strip TButton padding
+.close-button {
+  padding: 0.25rem;
+  min-height: auto;
+  color: $text-secondary;
+}
+
+.modal-body {
+  padding: 1.5rem;
+  text-align: center;
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 1rem;
+  }
+}
+
+.icon-container {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 1rem;
+
+  svg { width: 24px; height: 24px; }
+
+  &.type-warning { background: $warning-bg; color: $warning; }
+  &.type-danger  { background: rgba(var(--color-error-rgb), 0.15); color: $error-color; }
+  &.type-info    { background: rgba(var(--color-primary-rgb), 0.15); color: $primary; }
+}
+
+.message {
+  color: $text-secondary;
+  font-size: 1rem;
+  line-height: 1.5;
+  margin: 0;
+}
+
+.modal-actions {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0 1.5rem 1.5rem;
+  justify-content: flex-end;
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 0 1rem 1rem;
+    flex-direction: column-reverse;
+
+    // Both buttons go full-width on mobile
+    > * { width: 100%; }
+  }
+}
+
+// Contextual colour overrides for the confirm button
+.confirm-button {
+  &.type-warning {
+    --btn-bg: #{$warning};
+    --btn-border: #{$warning};
+    --btn-color: #{$text-primary};
+    --btn-bg-hover: #{$warning-text};
+    --btn-border-hover: #{$warning-text};
+    --btn-color-hover: #{$bg-white};
+  }
+  &.type-danger {
+    --btn-bg: #{$error-color};
+    --btn-border: #{$error-color};
+    --btn-bg-hover: #{$error-dark};
+    --btn-border-hover: #{$error-dark};
+  }
+}
+</style>
diff --git a/components/modals/LearningModal.stories.js b/components/modals/LearningModal.stories.js
new file mode 100644
index 0000000..845774b
--- /dev/null
+++ b/components/modals/LearningModal.stories.js
@@ -0,0 +1,11 @@
+import LearningModal from './LearningModal.vue';
+
+export default {
+  title: 'Domain/Modals/LearningModal',
+  component: LearningModal,
+  args: {
+    isOpen: true
+  }
+};
+
+export const Open = {};
diff --git a/components/modals/LearningModal.vue b/components/modals/LearningModal.vue
new file mode 100644
index 0000000..45191be
--- /dev/null
+++ b/components/modals/LearningModal.vue
@@ -0,0 +1,701 @@
+<template>
+  <div v-if="isOpen" class="modal-overlay" @click="closeModal" @keydown.esc="closeModal">
+    <div
+      class="modal-content"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="modal-title"
+      @click.stop
+    >
+      <div class="modal-header">
+        <div class="modal-title-wrap">
+          <span class="modal-title-badge"><BookOpen class="modal-title-icon" /></span>
+          <h2 id="modal-title" class="modal-title">{{ t('Learn Trakli') }}</h2>
+        </div>
+        <TButton
+          variant="text"
+          size="small"
+          :full-width="false"
+          class="close-btn"
+          :aria-label="t('Close modal')"
+          @click="closeModal"
+        >
+          <XMarkIcon class="close-icon" />
+        </TButton>
+      </div>
+
+      <div class="modal-body">
+        <div class="learning-tabs">
+          <TButton
+            v-for="tab in tabs"
+            :key="tab.id"
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="tab-button"
+            :class="{ active: activeTab === tab.id }"
+            @click="activeTab = tab.id"
+          >
+            <component :is="tab.icon" class="tab-icon" />
+            {{ tab.label }}
+          </TButton>
+        </div>
+
+        <div class="tab-content">
+          <div v-if="activeTab === 'concepts'" class="concepts-section">
+            <h3 class="section-title">{{ t('Core Concepts') }}</h3>
+            <div class="concept-cards">
+              <div v-for="concept in concepts" :key="concept.title" class="concept-card">
+                <div class="concept-header">
+                  <component :is="concept.icon" class="concept-icon" />
+                  <h4 class="concept-title">{{ concept.title }}</h4>
+                </div>
+                <p class="concept-description">{{ concept.description }}</p>
+                <div class="concept-tips">
+                  <span class="tips-label"
+                    ><LightBulbIcon class="tips-label-icon" />{{ t('Tips') }}:</span
+                  >
+                  <ul class="tips-list">
+                    <li v-for="tip in concept.tips" :key="tip">{{ tip }}</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="activeTab === 'tips'" class="tips-section">
+            <h3 class="section-title">{{ t('Quick Tips') }}</h3>
+            <div class="tips-grid">
+              <div v-for="tip in quickTips" :key="tip.title" class="tip-card">
+                <div class="tip-emoji"><component :is="tip.icon" class="tip-icon" /></div>
+                <h4 class="tip-title">{{ tip.title }}</h4>
+                <p class="tip-text">{{ tip.text }}</p>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="activeTab === 'shortcuts'" class="shortcuts-section">
+            <h3 class="section-title">{{ t('Keyboard Shortcuts') }}</h3>
+            <div class="shortcuts-list">
+              <div v-for="shortcut in shortcuts" :key="shortcut.action" class="shortcut-item">
+                <div class="shortcut-keys">
+                  <kbd v-for="key in shortcut.keys" :key="key" class="key">{{ key }}</kbd>
+                </div>
+                <span class="shortcut-action">{{ shortcut.action }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="activeTab === 'faq'" class="faq-section">
+            <h3 class="section-title">{{ t('Frequently Asked Questions') }}</h3>
+            <div class="faq-list">
+              <div v-for="(faq, index) in faqs" :key="index" class="faq-item">
+                <TButton
+                  variant="text"
+                  size="small"
+                  :full-width="false"
+                  class="faq-question"
+                  :class="{ open: openFaq === index }"
+                  @click="toggleFaq(index)"
+                >
+                  {{ faq.question }}
+                  <ChevronDownIcon class="faq-chevron" />
+                </TButton>
+                <div v-if="openFaq === index" class="faq-answer">
+                  {{ faq.answer }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="modal-footer">
+        <p class="modal-footer__hint">
+          {{ t('Still stuck? Ask the assistant anything about Trakli.') }}
+        </p>
+        <TButton variant="primary" :full-width="false" class="ask-assistant-btn" @click="askAssistant">
+          <Sparkles class="ask-icon" />
+          {{ t('Ask the assistant') }}
+        </TButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import {
+  XMarkIcon,
+  ChevronDownIcon,
+  CreditCardIcon,
+  TagIcon,
+  ArrowsRightLeftIcon,
+  UsersIcon,
+  AcademicCapIcon,
+  LightBulbIcon,
+  CommandLineIcon,
+  QuestionMarkCircleIcon,
+  BoltIcon,
+  ChartBarIcon,
+  MagnifyingGlassIcon,
+  DevicePhoneMobileIcon,
+  CheckCircleIcon
+} from '@heroicons/vue/24/outline';
+import { BookOpen, Sparkles } from 'lucide-vue-next';
+
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const _props = defineProps({
+  isOpen: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['close', 'ask']);
+
+const activeTab = ref('concepts');
+const openFaq = ref(null);
+
+const tabs = computed(() => [
+  { id: 'concepts', label: t('Concepts'), icon: AcademicCapIcon },
+  { id: 'tips', label: t('Tips'), icon: LightBulbIcon },
+  { id: 'shortcuts', label: t('Shortcuts'), icon: CommandLineIcon },
+  { id: 'faq', label: t('FAQ'), icon: QuestionMarkCircleIcon }
+]);
+
+const concepts = computed(() => [
+  {
+    title: t('Transactions'),
+    icon: ArrowsRightLeftIcon,
+    description: t('learn.transactions.description'),
+    tips: [t('learn.transactions.tip1'), t('learn.transactions.tip2'), t('learn.transactions.tip3')]
+  },
+  {
+    title: t('Wallets'),
+    icon: CreditCardIcon,
+    description: t('learn.wallets.description'),
+    tips: [t('learn.wallets.tip1'), t('learn.wallets.tip2'), t('learn.wallets.tip3')]
+  },
+  {
+    title: t('Categories'),
+    icon: TagIcon,
+    description: t('learn.categories.description'),
+    tips: [t('learn.categories.tip1'), t('learn.categories.tip2'), t('learn.categories.tip3')]
+  },
+  {
+    title: t('Parties'),
+    icon: UsersIcon,
+    description: t('learn.parties.description'),
+    tips: [t('learn.parties.tip1'), t('learn.parties.tip2'), t('learn.parties.tip3')]
+  }
+]);
+
+const quickTips = computed(() => [
+  {
+    icon: BoltIcon,
+    title: t('Quick Entry'),
+    text: t('learn.quicktips.quickentry')
+  },
+  {
+    icon: ChartBarIcon,
+    title: t('Dashboard Overview'),
+    text: t('learn.quicktips.dashboard')
+  },
+  {
+    icon: MagnifyingGlassIcon,
+    title: t('Search & Filter'),
+    text: t('learn.quicktips.search')
+  },
+  {
+    icon: DevicePhoneMobileIcon,
+    title: t('Mobile Friendly'),
+    text: t('learn.quicktips.mobile')
+  },
+  {
+    icon: CheckCircleIcon,
+    title: t('Be Consistent'),
+    text: t('learn.quicktips.consistent')
+  },
+  {
+    icon: LightBulbIcon,
+    title: t('Start Simple'),
+    text: t('learn.quicktips.simple')
+  }
+]);
+
+const shortcuts = computed(() => [
+  { keys: ['Ctrl', '+'], action: t('Add new transaction') },
+  { keys: ['Ctrl', '/'], action: t('Open search') },
+  { keys: ['Ctrl', 'D'], action: t('Go to dashboard') },
+  { keys: ['Esc'], action: t('Close modals/dropdowns') },
+  { keys: ['?'], action: t('Open this help modal') }
+]);
+
+const faqs = computed(() => [
+  {
+    question: t('learn.faq.q1'),
+    answer: t('learn.faq.a1')
+  },
+  {
+    question: t('learn.faq.q2'),
+    answer: t('learn.faq.a2')
+  },
+  {
+    question: t('learn.faq.q3'),
+    answer: t('learn.faq.a3')
+  },
+  {
+    question: t('learn.faq.q4'),
+    answer: t('learn.faq.a4')
+  },
+  {
+    question: t('learn.faq.q5'),
+    answer: t('learn.faq.a5')
+  },
+  {
+    question: t('learn.faq.q6'),
+    answer: t('learn.faq.a6')
+  }
+]);
+
+const closeModal = () => {
+  emit('close');
+};
+
+const askAssistant = () => {
+  emit('close');
+  emit('ask');
+};
+
+const toggleFaq = (index) => {
+  openFaq.value = openFaq.value === index ? null : index;
+};
+</script>
+
+<style scoped lang="scss">
+@use '../../assets/scss/_vars.scss' as *;
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: $z-index-modal;
+  padding: 1rem;
+}
+
+.modal-content {
+  background: $bg-white;
+  border-radius: $radius-xl;
+  width: 100%;
+  max-width: 900px;
+  max-height: 90vh;
+  overflow: hidden;
+  box-shadow: $shadow-xl;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem 2rem;
+  border-bottom: 1px solid $border-gray;
+  background: $primary-light;
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 1rem 1.5rem;
+  }
+}
+
+.modal-title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+}
+
+.modal-title-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border-radius: $radius-lg;
+  background: $primary-light;
+}
+
+.modal-title-icon {
+  width: 22px;
+  height: 22px;
+  color: $primary;
+}
+
+.modal-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: $text-primary;
+  margin: 0;
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 1.25rem;
+  }
+}
+
+.modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+  padding: 1rem 1.5rem;
+  border-top: 1px solid $border-color;
+  background: $bg-light;
+}
+
+.modal-footer__hint {
+  margin: 0;
+  font-size: $font-size-sm;
+  color: $text-muted;
+}
+
+.ask-assistant-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.6rem 1.1rem;
+  border: none;
+  border-radius: $radius-lg;
+  background: $primary;
+  color: $text-inverse;
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  cursor: pointer;
+  transition: background $duration-fast $easing-standard;
+
+  &:hover {
+    background: $primary-hover;
+  }
+
+  .ask-icon {
+    width: 17px;
+    height: 17px;
+  }
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: $radius-lg;
+  transition: background 0.2s ease;
+
+  &:hover {
+    background: rgba(var(--color-primary-rgb), 0.15);
+  }
+}
+
+.close-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  color: $text-secondary;
+}
+
+.modal-body {
+  overflow-y: auto;
+  max-height: calc(90vh - 100px);
+}
+
+.learning-tabs {
+  display: flex;
+  border-bottom: 1px solid $border-gray;
+  background: $bg-slate;
+  padding: 0 2rem;
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 0 1rem;
+    overflow-x: auto;
+  }
+}
+
+.tab-button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem 1.5rem;
+  background: none;
+  border: none;
+  border-bottom: 3px solid transparent;
+  color: $text-secondary;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+
+  .tab-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  &:hover {
+    color: $primary;
+    background: rgba(var(--color-primary-rgb), 0.05);
+  }
+
+  &.active {
+    color: $primary;
+    border-bottom-color: $primary;
+    background: $bg-white;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 0.75rem 1rem;
+    font-size: 0.875rem;
+  }
+}
+
+.tab-content {
+  padding: 2rem;
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 1.5rem;
+  }
+}
+
+.section-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: $text-primary;
+  margin: 0 0 1.5rem 0;
+}
+
+.concept-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.concept-card {
+  background: $bg-slate;
+  border: 1px solid $border-gray;
+  border-radius: $radius-xl;
+  padding: 1.5rem;
+}
+
+.concept-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.concept-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  color: $primary;
+}
+
+.concept-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: $text-primary;
+  margin: 0;
+}
+
+.concept-description {
+  color: $text-secondary;
+  line-height: 1.6;
+  margin: 0 0 1rem 0;
+}
+
+.concept-tips {
+  .tips-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    font-weight: 600;
+    color: $primary;
+    font-size: 0.875rem;
+  }
+
+  .tips-label-icon {
+    width: 15px;
+    height: 15px;
+  }
+}
+
+.tips-list {
+  list-style: none;
+  padding: 0;
+  margin: 0.5rem 0 0 0;
+
+  li {
+    color: $text-secondary;
+    font-size: 0.875rem;
+    padding: 0.25rem 0;
+    position: relative;
+    padding-left: 1rem;
+
+    &::before {
+      content: '•';
+      color: $primary;
+      font-weight: bold;
+      position: absolute;
+      left: 0;
+    }
+  }
+}
+
+.tips-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1rem;
+}
+
+.tip-card {
+  background: $bg-white;
+  border: 1px solid $border-gray;
+  border-radius: $radius-xl;
+  padding: 1.5rem;
+  text-align: center;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: $shadow-md;
+  }
+}
+
+.tip-emoji {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background: $primary-light;
+  margin-bottom: 1rem;
+}
+
+.tip-icon {
+  width: 22px;
+  height: 22px;
+  color: $primary;
+}
+
+.tip-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: $text-primary;
+  margin: 0 0 0.5rem 0;
+}
+
+.tip-text {
+  color: $text-secondary;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  margin: 0;
+}
+
+.shortcuts-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.shortcut-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  background: $bg-slate;
+  border-radius: $radius-lg;
+  border: 1px solid $border-gray;
+}
+
+.shortcut-keys {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.key {
+  background: $bg-white;
+  border: 1px solid $border-light;
+  border-radius: $radius-sm;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: $text-primary;
+  box-shadow: $shadow-sm;
+}
+
+.shortcut-action {
+  color: $text-secondary;
+  font-size: 0.875rem;
+}
+
+.faq-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.faq-item {
+  border: 1px solid $border-gray;
+  border-radius: $radius-lg;
+  overflow: hidden;
+}
+
+.faq-question {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  background: $bg-slate;
+  border: none;
+  text-align: left;
+  font-weight: 500;
+  color: $text-primary;
+  cursor: pointer;
+  transition: background 0.2s ease;
+
+  &:hover {
+    background: $bg-card;
+  }
+
+  &.open {
+    background: $bg-white;
+  }
+}
+
+.faq-chevron {
+  width: 1rem;
+  height: 1rem;
+  color: $text-secondary;
+  transition: transform 0.2s ease;
+
+  .faq-question.open & {
+    transform: rotate(180deg);
+  }
+}
+
+.faq-answer {
+  padding: 1rem;
+  background: $bg-white;
+  color: $text-secondary;
+  line-height: 1.6;
+  border-top: 1px solid $border-gray;
+}
+</style>
diff --git a/components/modals/RecurringModal.stories.js b/components/modals/RecurringModal.stories.js
new file mode 100644
index 0000000..771475d
--- /dev/null
+++ b/components/modals/RecurringModal.stories.js
@@ -0,0 +1,24 @@
+import RecurringModal from './RecurringModal.vue';
+
+export default {
+  title: 'Domain/Modals/RecurringModal',
+  component: RecurringModal,
+  args: {
+    isOpen: true,
+    transaction: {
+      id: 12,
+      isRecurring: true,
+      recurrencePeriod: 'monthly',
+      recurrenceInterval: 1,
+      recurrenceEndsAt: null
+    }
+  }
+};
+
+export const EditingRecurring = {};
+
+export const NewRecurring = {
+  args: {
+    transaction: null
+  }
+};
diff --git a/components/modals/RecurringModal.vue b/components/modals/RecurringModal.vue
new file mode 100644
index 0000000..cdae6b4
--- /dev/null
+++ b/components/modals/RecurringModal.vue
@@ -0,0 +1,424 @@
+<template>
+  <div v-if="isOpen" class="modal-overlay" @click="handleCancel">
+    <div class="modal-content" @click.stop>
+      <div class="modal-header">
+        <h3 class="modal-title">
+          {{ isCurrentlyRecurring ? t('Update recurrence') : t('Make recurring') }}
+        </h3>
+        <TButton
+          variant="text"
+          size="small"
+          :full-width="false"
+          class="close-button"
+          :aria-label="t('Close')"
+          @click="handleCancel"
+        >
+          <XIcon />
+        </TButton>
+      </div>
+
+      <div class="modal-body">
+        <div v-if="isCurrentlyRecurring" class="current-status">
+          <RefreshCwIcon class="status-icon" />
+          <span class="status-text">
+            {{ t('Repeat every') }} {{ transaction?.recurrenceInterval || 1 }}
+            {{ periodLabel(transaction?.recurrencePeriod) }}
+          </span>
+        </div>
+
+        <form @submit.prevent="handleSave">
+          <div class="form-group">
+            <label class="form-label">{{ t('Recurrence period') }}</label>
+            <select v-model="form.period" class="form-input">
+              <option value="daily">{{ t('Daily') }}</option>
+              <option value="weekly">{{ t('Weekly') }}</option>
+              <option value="monthly">{{ t('Monthly') }}</option>
+              <option value="yearly">{{ t('Yearly') }}</option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label class="form-label">{{ t('Repeat every') }}</label>
+            <div class="interval-row">
+              <TInput v-model="form.interval" type="number" class="form-input interval-input" />
+              <span class="interval-unit">{{ unitLabel }}</span>
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label class="form-label">{{ t('End date') }}</label>
+            <div class="end-date-row">
+              <label class="checkbox-label">
+                <input v-model="hasEndDate" type="checkbox" />
+                <span>{{ t('No end date') }}</span>
+              </label>
+              <TInput v-if="!hasEndDate" v-model="form.endsAt" type="date" class="form-input" />
+            </div>
+          </div>
+
+          <div class="form-actions">
+            <TButton
+              v-if="isCurrentlyRecurring"
+              type="button"
+              variant="outline"
+              :full-width="false"
+              class="btn btn-danger"
+              @click="handleRemove"
+            >
+              {{ t('Remove recurrence') }}
+            </TButton>
+            <div class="actions-right">
+              <TButton
+                type="button"
+                variant="secondary"
+                :full-width="false"
+                class="btn btn-secondary"
+                @click="handleCancel"
+              >
+                {{ t('Cancel') }}
+              </TButton>
+              <TButton type="submit" variant="primary" :full-width="false" class="btn btn-primary">
+                {{ isCurrentlyRecurring ? t('Update recurrence') : t('Make recurring') }}
+              </TButton>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { X as XIcon, RefreshCw as RefreshCwIcon } from 'lucide-vue-next';
+import TButton from '../TButton.vue';
+import TInput from '../TInput.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  isOpen: {
+    type: Boolean,
+    default: false
+  },
+  transaction: {
+    type: Object,
+    default: null
+  }
+});
+
+const emit = defineEmits(['save', 'remove', 'cancel']);
+
+const form = ref({
+  period: 'monthly',
+  interval: 1,
+  endsAt: ''
+});
+
+const hasEndDate = ref(true); // true = no end date (checkbox checked)
+
+const isCurrentlyRecurring = computed(() => {
+  return props.transaction?.isRecurring && props.transaction?.recurrencePeriod;
+});
+
+const unitLabel = computed(() => {
+  return periodLabel(form.value.period);
+});
+
+function periodLabel(period) {
+  const labels = {
+    daily: t('day(s)'),
+    weekly: t('week(s)'),
+    monthly: t('month(s)'),
+    yearly: t('year(s)')
+  };
+  return labels[period] || period || '';
+}
+
+watch(
+  () => props.isOpen,
+  (open) => {
+    if (open && props.transaction) {
+      if (isCurrentlyRecurring.value) {
+        form.value.period = props.transaction.recurrencePeriod || 'monthly';
+        form.value.interval = props.transaction.recurrenceInterval || 1;
+        if (props.transaction.recurrenceEndsAt) {
+          hasEndDate.value = false;
+          form.value.endsAt = props.transaction.recurrenceEndsAt.split('T')[0];
+        } else {
+          hasEndDate.value = true;
+          form.value.endsAt = '';
+        }
+      } else {
+        form.value.period = 'monthly';
+        form.value.interval = 1;
+        hasEndDate.value = true;
+        form.value.endsAt = '';
+      }
+    }
+  }
+);
+
+function handleSave() {
+  const config = {
+    is_recurring: true,
+    recurrence_period: form.value.period,
+    recurrence_interval: Number(form.value.interval) || 1,
+    recurrence_ends_at: hasEndDate.value ? null : form.value.endsAt || null
+  };
+  emit('save', config);
+}
+
+function handleRemove() {
+  emit('remove');
+}
+
+function handleCancel() {
+  emit('cancel');
+}
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+}
+
+.modal-content {
+  background: $bg-white;
+  border-radius: $radius-xl;
+  max-width: 480px;
+  width: 100%;
+  box-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  animation: modalEnter 0.2s ease-out;
+}
+
+@keyframes modalEnter {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem 1.5rem 0 1.5rem;
+}
+
+.modal-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: $text-primary;
+  margin: 0;
+}
+
+.close-button {
+  padding: 0.25rem;
+  border: none;
+  border-radius: $radius-sm;
+  color: $text-secondary;
+
+  &:hover {
+    background: $bg-light;
+    color: $text-primary;
+  }
+
+  :deep(svg) {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.modal-body {
+  padding: 1.5rem;
+}
+
+.current-status {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: rgba(var(--color-primary-rgb), 0.1);
+  border-radius: $radius-md;
+  margin-bottom: 1.25rem;
+
+  .status-icon {
+    width: 16px;
+    height: 16px;
+    color: $primary;
+    flex-shrink: 0;
+  }
+
+  .status-text {
+    font-size: $font-size-sm;
+    color: $primary;
+  }
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-label {
+  display: block;
+  font-size: $font-size-sm;
+  font-weight: 500;
+  color: $text-primary;
+  margin-bottom: 0.5rem;
+}
+
+.form-input {
+  width: 100%;
+  font-size: $font-size-sm;
+  background: $bg-white;
+
+  &.interval-input {
+    width: 100px;
+    flex-shrink: 0;
+  }
+}
+
+.interval-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+
+  .interval-unit {
+    font-size: $font-size-sm;
+    color: $text-secondary;
+  }
+}
+
+.end-date-row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-size: $font-size-sm;
+  color: $text-secondary;
+
+  input[type='checkbox'] {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+  }
+}
+
+.form-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 1.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid $border-light;
+}
+
+.actions-right {
+  display: flex;
+  gap: 0.75rem;
+  margin-left: auto;
+}
+
+.btn {
+  padding: 0.5rem 1rem;
+  border-radius: $radius-md;
+  font-weight: 500;
+  font-size: 0.875rem;
+  min-width: 80px;
+
+  &-secondary {
+    background: $bg-white;
+    color: $text-secondary;
+    border-color: $border-light;
+
+    &:hover {
+      background: $bg-light;
+      border-color: $border-medium;
+    }
+  }
+
+  &-primary {
+    background: $primary;
+    color: white;
+    border-color: $primary;
+
+    &:hover {
+      background: $primary-dark;
+      border-color: $primary-dark;
+    }
+  }
+
+  &-danger {
+    background: transparent;
+    color: $error-color;
+    border-color: $error-color;
+
+    &:hover {
+      background: rgba(var(--color-error-rgb), 0.1);
+    }
+  }
+}
+
+@media (max-width: $breakpoint-sm) {
+  .modal-content {
+    margin: 1rem;
+    max-width: calc(100vw - 2rem);
+  }
+
+  .modal-header {
+    padding: 1rem 1rem 0 1rem;
+  }
+
+  .modal-title {
+    font-size: 1.125rem;
+  }
+
+  .modal-body {
+    padding: 1rem;
+  }
+
+  .form-actions {
+    flex-direction: column;
+    gap: 0.75rem;
+
+    .actions-right {
+      width: 100%;
+    }
+
+    .btn {
+      flex: 1;
+    }
+
+    .btn-danger {
+      width: 100%;
+    }
+  }
+}
+</style>
+
diff --git a/components/onboarding/DashboardOnboarding.stories.js b/components/onboarding/DashboardOnboarding.stories.js
new file mode 100644
index 0000000..b7cda9b
--- /dev/null
+++ b/components/onboarding/DashboardOnboarding.stories.js
@@ -0,0 +1,23 @@
+import DashboardOnboarding from './DashboardOnboarding.vue';
+
+export default {
+  title: 'Domain/Onboarding/DashboardOnboarding',
+  component: DashboardOnboarding,
+  args: {
+    hasWallets: true,
+    hasCategories: false,
+    hasTransactions: false,
+    hasParties: false
+  }
+};
+
+export const Default = {};
+
+export const AllComplete = {
+  args: {
+    hasWallets: true,
+    hasCategories: true,
+    hasTransactions: true,
+    hasParties: true
+  }
+};
diff --git a/components/onboarding/DashboardOnboarding.vue b/components/onboarding/DashboardOnboarding.vue
new file mode 100644
index 0000000..fd55447
--- /dev/null
+++ b/components/onboarding/DashboardOnboarding.vue
@@ -0,0 +1,479 @@
+<template>
+  <div class="dashboard-onboarding">
+    <div class="onboarding-hero">
+      <div class="hero-content">
+        <div class="hero-icon">
+          <ArrowsRightLeftIcon class="main-icon" />
+        </div>
+        <h2 class="hero-title">Welcome to Your Financial Dashboard!</h2>
+        <p class="hero-subtitle">
+          We've created some starter items for you, but let's personalize them and add your real
+          financial data to get the most out of Trakli.
+        </p>
+      </div>
+    </div>
+
+    <div class="onboarding-cards">
+      <div
+        v-for="(step, index) in onboardingSteps"
+        :key="step.key"
+        class="onboarding-card"
+        :class="{
+          'card-completed': step.completed,
+          'card-current': !step.completed && index === currentStep
+        }"
+      >
+        <div class="card-header">
+          <div class="step-indicator">
+            <CheckIcon v-if="step.completed" class="check-icon" />
+            <span v-else class="step-number">{{ index + 1 }}</span>
+          </div>
+          <div class="card-title-area">
+            <h3 class="card-title">{{ step.title }}</h3>
+            <p class="card-description">{{ step.description }}</p>
+          </div>
+        </div>
+
+        <div class="card-actions">
+          <TButton
+            v-if="!step.completed"
+            :full-width="false"
+            class="action-btn"
+            :class="{
+              'btn-primary': index === currentStep,
+              'btn-secondary': index !== currentStep
+            }"
+            @click="$emit('navigate', step.route)"
+          >
+            <component :is="step.icon" class="btn-icon" />
+            {{ step.action }}
+          </TButton>
+          <div v-else class="completion-indicator">
+            <CheckCircleIcon class="completion-icon" />
+            <span class="completion-text">Completed</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="quick-tips">
+      <div class="tips-header">
+        <LightBulbIcon class="tips-icon" />
+        <span class="tips-title">Quick Tips</span>
+      </div>
+      <ul class="tips-list">
+        <li>Customize your default wallet with your real bank account name and balance</li>
+        <li>
+          We've added basic categories - add personal ones like "Coffee", "Gym", "Netflix", "Uber"
+        </li>
+        <li>Start with your most recent transactions to see your money flow instantly</li>
+        <li>Add parties (employer, grocery store, etc.) for detailed spending patterns</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import {
+  ArrowsRightLeftIcon,
+  CreditCardIcon,
+  TagIcon,
+  UsersIcon,
+  CheckIcon,
+  CheckCircleIcon,
+  LightBulbIcon,
+  PlusIcon
+} from '@heroicons/vue/24/outline';
+import TButton from '../TButton.vue';
+
+const props = defineProps({
+  hasWallets: {
+    type: Boolean,
+    default: false
+  },
+  hasCategories: {
+    type: Boolean,
+    default: false
+  },
+  hasTransactions: {
+    type: Boolean,
+    default: false
+  },
+  hasParties: {
+    type: Boolean,
+    default: false
+  }
+});
+
+defineEmits(['navigate']);
+
+const onboardingSteps = computed(() => [
+  {
+    key: 'wallets',
+    title: 'Personalize Your Wallet',
+    description:
+      'We created a default wallet for you. Update it with your real bank account or cash details',
+    action: 'Setup Wallets',
+    route: '/wallets',
+    icon: CreditCardIcon,
+    completed: false // Always encourage customization
+  },
+  {
+    key: 'categories',
+    title: 'Review & Expand Categories',
+    description:
+      'Basic categories are ready! Add specific ones for your lifestyle (gym, coffee, etc.)',
+    action: 'Manage Categories',
+    route: '/categories',
+    icon: TagIcon,
+    completed: false // Always encourage review and expansion
+  },
+  {
+    key: 'transactions',
+    title: 'Add Your First Real Transaction',
+    description: 'This is where the magic happens! Add actual income or expenses to start tracking',
+    action: 'Add Transaction',
+    route: '/transactions/new',
+    icon: PlusIcon,
+    completed: props.hasTransactions
+  },
+  {
+    key: 'parties',
+    title: 'Track Who You Deal With',
+    description: 'Add your employer, favorite stores, or anyone you exchange money with regularly',
+    action: 'Add Parties',
+    route: '/parties',
+    icon: UsersIcon,
+    completed: false // Encourage adding real parties
+  }
+]);
+
+const currentStep = computed(() => {
+  const incompleteIndex = onboardingSteps.value.findIndex((step) => !step.completed);
+  return incompleteIndex === -1 ? onboardingSteps.value.length - 1 : incompleteIndex;
+});
+</script>
+
+<style scoped lang="scss">
+@use '../../assets/scss/_vars.scss' as *;
+
+.dashboard-onboarding {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2rem;
+
+  @media (max-width: $breakpoint-md) {
+    padding: 1.5rem;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 1rem;
+  }
+}
+
+.onboarding-hero {
+  text-align: center;
+  margin-bottom: 3rem;
+
+  @media (max-width: $breakpoint-md) {
+    margin-bottom: 2rem;
+  }
+}
+
+.hero-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.hero-icon {
+  width: 80px;
+  height: 80px;
+  background: linear-gradient(135deg, $primary-light 0%, rgba(var(--color-primary-rgb), 0.1) 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0.5rem;
+
+  .main-icon {
+    width: 36px;
+    height: 36px;
+    color: $primary;
+    stroke-width: 1.5;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    width: 64px;
+    height: 64px;
+
+    .main-icon {
+      width: 28px;
+      height: 28px;
+    }
+  }
+}
+
+.hero-title {
+  font-size: 1.875rem;
+  font-weight: 700;
+  color: $text-primary;
+  margin: 0;
+  line-height: 1.2;
+
+  @media (max-width: $breakpoint-md) {
+    font-size: 1.5rem;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 1.25rem;
+  }
+}
+
+.hero-subtitle {
+  font-size: 1.1rem;
+  color: $text-secondary;
+  margin: 0;
+  line-height: 1.5;
+  max-width: 500px;
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 1rem;
+  }
+}
+
+.onboarding-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 3rem;
+
+  @media (max-width: $breakpoint-md) {
+    margin-bottom: 2rem;
+  }
+}
+
+.onboarding-card {
+  background: $bg-white;
+  border: 2px solid $border-color;
+  border-radius: $radius-xl;
+  padding: 1.5rem;
+  transition: all 0.3s ease;
+  position: relative;
+
+  &.card-completed {
+    background: rgba(var(--color-success-rgb), 0.1);
+    border-color: $primary;
+
+    .step-indicator {
+      background: $primary;
+      color: $bg-white;
+    }
+  }
+
+  &.card-current {
+    border-color: $primary;
+    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.15);
+    transform: scale(1.02);
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 1.25rem;
+  }
+}
+
+.card-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+
+  @media (max-width: $breakpoint-sm) {
+    margin-bottom: 1rem;
+  }
+}
+
+.step-indicator {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: $bg-light;
+  color: $text-secondary;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 0.875rem;
+  flex-shrink: 0;
+  transition: all 0.3s ease;
+
+  .check-icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    width: 36px;
+    height: 36px;
+    font-size: 0.8rem;
+  }
+}
+
+.card-title-area {
+  flex: 1;
+  min-width: 0;
+}
+
+.card-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: $text-primary;
+  margin: 0 0 0.25rem 0;
+  line-height: 1.3;
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 1rem;
+  }
+}
+
+.card-description {
+  font-size: 0.9rem;
+  color: $text-secondary;
+  margin: 0;
+  line-height: 1.4;
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 0.85rem;
+  }
+}
+
+.card-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1.25rem;
+  border-radius: $radius-lg;
+  font-weight: 500;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: none;
+
+  .btn-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  &.btn-primary {
+    background: $primary;
+    color: white;
+
+    &:hover {
+      background: $primary-hover;
+      transform: translateY(-1px);
+    }
+  }
+
+  &.btn-secondary {
+    background: $bg-light;
+    color: $text-secondary;
+    border: 1px solid $border-light;
+
+    &:hover {
+      background: $bg-white;
+      color: $primary;
+      border-color: $primary;
+    }
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 0.85rem;
+    padding: 0.5rem 1rem;
+  }
+}
+
+.completion-indicator {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: $primary;
+  font-weight: 500;
+  font-size: 0.9rem;
+
+  .completion-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 0.85rem;
+  }
+}
+
+.quick-tips {
+  background: rgba(var(--color-warning-rgb), 0.15);
+  border: 1px solid $warning;
+  border-radius: $radius-xl;
+  padding: 1.5rem;
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 1.25rem;
+  }
+}
+
+.tips-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+
+  .tips-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    color: $warning;
+  }
+
+  .tips-title {
+    font-weight: 600;
+    color: $warning;
+    font-size: 0.95rem;
+  }
+}
+
+.tips-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  li {
+    color: $warning;
+    font-size: 0.875rem;
+    line-height: 1.4;
+    position: relative;
+    padding-left: 1.25rem;
+
+    &::before {
+      content: '•';
+      position: absolute;
+      left: 0;
+      color: $warning;
+      font-weight: bold;
+    }
+
+    @media (max-width: $breakpoint-sm) {
+      font-size: 0.8rem;
+    }
+  }
+}
+</style>
diff --git a/components/onboarding/OnboardingEmptyState.stories.js b/components/onboarding/OnboardingEmptyState.stories.js
new file mode 100644
index 0000000..582bee0
--- /dev/null
+++ b/components/onboarding/OnboardingEmptyState.stories.js
@@ -0,0 +1,19 @@
+import OnboardingEmptyState from './OnboardingEmptyState.vue';
+
+export default {
+  title: 'Domain/Onboarding/OnboardingEmptyState',
+  component: OnboardingEmptyState,
+  args: {
+    pageType: 'transactions'
+  }
+};
+
+export const Transactions = {};
+
+export const Wallets = {
+  args: { pageType: 'wallets' }
+};
+
+export const Categories = {
+  args: { pageType: 'categories' }
+};
diff --git a/components/onboarding/OnboardingEmptyState.vue b/components/onboarding/OnboardingEmptyState.vue
new file mode 100644
index 0000000..90ca02d
--- /dev/null
+++ b/components/onboarding/OnboardingEmptyState.vue
@@ -0,0 +1,523 @@
+<template>
+  <section class="onboarding-empty-state surface surface--brand-soft">
+    <svg
+      class="oe-backdrop"
+      viewBox="0 0 1200 600"
+      preserveAspectRatio="xMaxYMid slice"
+      aria-hidden="true"
+    >
+      <defs>
+        <radialGradient id="oe-backdrop-bloom" cx="100%" cy="30%" r="60%">
+          <stop offset="0%" stop-color="var(--surface-accent)" stop-opacity="0.4" />
+          <stop offset="100%" stop-color="var(--surface-accent)" stop-opacity="0" />
+        </radialGradient>
+      </defs>
+      <circle cx="1100" cy="100" r="280" fill="url(#oe-backdrop-bloom)" />
+    </svg>
+
+    <div class="oe-grid">
+      <div class="oe-art">
+        <div class="illustration-wrap">
+          <svg class="illustration" viewBox="0 0 220 220" aria-hidden="true">
+            <defs>
+              <radialGradient id="oe-glow" cx="50%" cy="50%" r="55%">
+                <stop offset="0%" stop-color="var(--surface-accent)" stop-opacity="0.4" />
+                <stop offset="100%" stop-color="var(--surface-accent)" stop-opacity="0" />
+              </radialGradient>
+            </defs>
+            <circle cx="110" cy="110" r="100" fill="url(#oe-glow)" />
+            <circle
+              cx="110"
+              cy="110"
+              r="82"
+              fill="none"
+              stroke="var(--surface-accent)"
+              stroke-opacity="0.5"
+              stroke-width="1"
+              stroke-dasharray="3 4"
+            />
+            <circle
+              cx="110"
+              cy="110"
+              r="58"
+              fill="none"
+              stroke="var(--surface-accent)"
+              stroke-opacity="0.65"
+              stroke-width="1"
+            />
+            <circle cx="110" cy="110" r="42" fill="var(--surface-accent)" />
+            <circle cx="195" cy="58" r="6" fill="var(--surface-accent)" opacity="0.9" />
+            <circle cx="36" cy="170" r="4" fill="var(--surface-accent)" opacity="0.75" />
+            <circle cx="172" cy="180" r="5" fill="var(--surface-accent)" opacity="0.65" />
+          </svg>
+          <div class="illustration-icon">
+            <component :is="iconComponent" class="main-icon" />
+          </div>
+        </div>
+      </div>
+
+      <div class="oe-content">
+        <span class="oe-eyebrow">{{ t('Getting started') }}</span>
+        <h2 class="onboarding-title">{{ t(config.title) }}</h2>
+        <p class="onboarding-subtitle">{{ t(config.subtitle) }}</p>
+
+        <div v-if="config.steps" class="onboarding-steps">
+          <ol class="steps-list">
+            <li v-for="(step, index) in config.steps" :key="index" class="step-item">
+              <span class="step-number">{{ index + 1 }}</span>
+              <span class="step-text">{{ t(step) }}</span>
+            </li>
+          </ol>
+        </div>
+
+        <div class="onboarding-actions">
+          <TButton
+            variant="primary"
+            :full-width="false"
+            class="primary-action-btn"
+            @click="$emit('create')"
+          >
+            <PlusIcon class="button-icon" />
+            {{ t(config.primaryAction) }}
+          </TButton>
+          <div v-if="config.tip" class="onboarding-tip">
+            <div class="tip-icon">
+              <LightBulbIcon />
+            </div>
+            <span class="tip-text">{{ t(config.tip) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import {
+  PlusIcon,
+  LightBulbIcon,
+  CreditCardIcon,
+  TagIcon,
+  ArrowsRightLeftIcon,
+  UsersIcon,
+  FolderIcon,
+  ChartPieIcon,
+  BellAlertIcon
+} from '@heroicons/vue/24/outline';
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  pageType: {
+    type: String,
+    required: true,
+    validator: (value) =>
+      ['wallets', 'categories', 'transactions', 'parties', 'groups', 'budgets', 'reminders'].includes(
+        value
+      )
+  }
+});
+
+defineEmits(['create', 'secondary-action']);
+
+const iconComponents = {
+  wallets: CreditCardIcon,
+  categories: TagIcon,
+  transactions: ArrowsRightLeftIcon,
+  parties: UsersIcon,
+  groups: FolderIcon,
+  budgets: ChartPieIcon,
+  reminders: BellAlertIcon
+};
+
+const onboardingConfigs = {
+  wallets: {
+    title: "Let's Set Up Your First Wallet",
+    subtitle:
+      'Wallets help you organize your money across different accounts like bank accounts, cash, or digital wallets.',
+    steps: [
+      "Create your first wallet (e.g., 'Main Bank Account')",
+      'Add your current balance',
+      'Start tracking transactions'
+    ],
+    primaryAction: 'Add First Wallet',
+    tip: 'Start with your main bank account - you can add more wallets later!'
+  },
+  categories: {
+    title: 'Organize Your Money with Categories',
+    subtitle:
+      "Categories help you understand where your money comes from and where it goes. We'll start with some basics!",
+    steps: [
+      "Create income categories (e.g., 'Salary', 'Freelance')",
+      "Add expense categories (e.g., 'Food', 'Transport')",
+      'Use them when adding transactions'
+    ],
+    primaryAction: 'Add First Category',
+    tip: "Don't worry about getting it perfect - you can always add more categories later!"
+  },
+  transactions: {
+    title: 'Ready to Track Your First Transaction?',
+    subtitle:
+      "Transactions are the heart of expense tracking. Each transaction tells the story of your money's journey.",
+    steps: [
+      "Click 'Add Transaction' above",
+      'Choose income or expense',
+      'Select wallet and category',
+      'Add amount and description'
+    ],
+    primaryAction: 'Add First Transaction',
+    tip: 'Pro tip: Start by adding your most recent transactions to get into the habit!'
+  },
+  parties: {
+    title: 'Track Who You Deal With',
+    subtitle:
+      'Parties are people or businesses you exchange money with. This helps you see spending patterns with specific vendors.',
+    steps: [
+      "Add common payees (e.g., 'Grocery Store', 'Landlord')",
+      "Include income sources (e.g., 'Employer', 'Client Name')",
+      'Use them in transactions for better insights'
+    ],
+    primaryAction: 'Add First Party',
+    tip: 'Start with your most frequent payees - your employer, grocery store, or landlord!'
+  },
+  groups: {
+    title: 'Organize with Smart Groups',
+    subtitle:
+      'Groups help you organize transactions by purpose, project, or any custom criteria that matters to you.',
+    steps: [
+      "Create groups for specific purposes (e.g., 'Vacation', 'Home Improvement')",
+      'Add relevant transactions to groups',
+      'Track group budgets and spending'
+    ],
+    primaryAction: 'Add First Group',
+    tip: 'Think of groups as project folders for your money - perfect for tracking specific goals!'
+  },
+  budgets: {
+    title: 'Take Control of Your Spending',
+    subtitle:
+      "Budgets put a cap on what you spend in a category, group, or wallet — and tell you when you're drifting off track before the month is over.",
+    steps: [
+      'Pick what to budget — a category, group, or even a specific wallet',
+      'Set an amount and period (weekly, monthly, yearly, or a custom range)',
+      'Choose whether unused amounts roll over to the next period',
+      "Get alerts as you approach the limit, and forecast warnings when you're on pace to breach"
+    ],
+    primaryAction: 'Create First Budget'
+  },
+  reminders: {
+    title: 'Never miss a money moment',
+    subtitle:
+      'Reminders nudge you when bills are due, paydays land, or recurring transactions need attention. Nothing slips through the cracks.',
+    steps: [
+      'Pick a title and date (or set up a repeating rule)',
+      'Choose how you want to be notified',
+      'Mark reminders done or pause them as life changes'
+    ],
+    primaryAction: 'Create your first reminder'
+  }
+};
+
+const iconComponent = computed(() => iconComponents[props.pageType]);
+const config = computed(() => onboardingConfigs[props.pageType]);
+</script>
+
+<style scoped lang="scss">
+@use '../../assets/scss/_vars.scss' as *;
+
+.onboarding-empty-state {
+  position: relative;
+  width: 100%;
+  border: 1px solid $border-light;
+  border-radius: 18px;
+  box-shadow: $elevation-1;
+  overflow: hidden;
+  padding: 2rem 2.25rem;
+
+  @media (max-width: $breakpoint-md) {
+    padding: 1.5rem 1.5rem;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 1.25rem 1rem;
+    border-radius: 14px;
+  }
+}
+
+.oe-backdrop {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.oe-grid {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: $spacing-5;
+  align-items: center;
+
+  @media (min-width: $breakpoint-md) {
+    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
+    gap: $spacing-8;
+  }
+}
+
+.oe-art {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.oe-content {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  text-align: left;
+  gap: 8px;
+
+  @media (max-width: $breakpoint-md) {
+    align-items: center;
+    text-align: center;
+  }
+}
+
+.oe-eyebrow {
+  font-size: 11px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--surface-deep);
+  opacity: 0.85;
+  margin-bottom: 2px;
+}
+
+.illustration-wrap {
+  position: relative;
+  width: 240px;
+  height: 240px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  @media (max-width: $breakpoint-md) {
+    width: 180px;
+    height: 180px;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    width: 150px;
+    height: 150px;
+  }
+}
+
+.illustration {
+  width: 100%;
+  height: 100%;
+  animation: oe-float 6s $easing-standard infinite;
+}
+
+@keyframes oe-float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-4px);
+  }
+}
+
+.illustration-icon {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .main-icon {
+    width: 36px;
+    height: 36px;
+    color: var(--color-text-inverse);
+    stroke-width: 1.8;
+
+    @media (max-width: $breakpoint-md) {
+      width: 30px;
+      height: 30px;
+    }
+  }
+}
+
+.onboarding-title {
+  font-size: 1.75rem;
+  font-weight: $font-bold;
+  letter-spacing: -0.025em;
+  margin: 0 0 0.375rem 0;
+  line-height: 1.1;
+  color: var(--surface-ink);
+
+  @media (max-width: $breakpoint-md) {
+    font-size: 1.4rem;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 1.25rem;
+  }
+}
+
+.onboarding-subtitle {
+  color: var(--surface-ink);
+  opacity: 0.75;
+  font-size: $font-size-base;
+  margin: 0 0 1rem 0;
+  line-height: 1.5;
+  max-width: 48ch;
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: $font-size-sm;
+  }
+}
+
+.onboarding-steps {
+  background: var(--glass-bg);
+  border: 1px solid $border-light;
+  border-radius: 12px;
+  padding: 0.875rem 1rem;
+  margin: 0.25rem 0 1rem;
+  text-align: left;
+  width: 100%;
+  max-width: 520px;
+  backdrop-filter: blur(6px);
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 0.75rem 0.875rem;
+  }
+}
+
+.steps-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.step-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  font-size: $font-size-sm;
+  color: $text-primary;
+  line-height: 1.4;
+}
+
+.step-number {
+  background: var(--surface-deep);
+  color: var(--surface-bg);
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: $font-bold;
+  flex-shrink: 0;
+  margin-top: 1px;
+  font-variant-numeric: tabular-nums;
+}
+
+.step-text {
+  flex: 1;
+}
+
+.onboarding-actions {
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+  flex-wrap: wrap;
+
+  @media (max-width: $breakpoint-md) {
+    justify-content: center;
+  }
+}
+
+.primary-action-btn {
+  border: none;
+  border-radius: 10px;
+  padding: 10px 18px;
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  letter-spacing: -0.005em;
+  min-height: 40px;
+  box-shadow: $elevation-1;
+  transition:
+    background-color $duration-fast $easing-standard,
+    box-shadow $duration-fast $easing-standard,
+    transform $duration-fast $easing-standard;
+
+  :deep(.button__text) {
+    gap: 0.5rem;
+  }
+
+  .button-icon {
+    width: 16px;
+    height: 16px;
+    stroke-width: 2;
+  }
+
+  &:hover {
+    background: $primary-hover;
+    box-shadow: $elevation-2;
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+
+  &:focus-visible {
+    outline: 2px solid $primary;
+    outline-offset: 2px;
+  }
+}
+
+.onboarding-tip {
+  background: var(--glass-bg);
+  border: 1px solid $border-light;
+  border-radius: 999px;
+  padding: 6px 12px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  backdrop-filter: blur(6px);
+}
+
+.tip-icon {
+  color: var(--surface-deep);
+  flex-shrink: 0;
+  display: inline-flex;
+
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+.tip-text {
+  color: var(--surface-ink);
+  opacity: 0.8;
+  font-size: 11px;
+  font-weight: $font-medium;
+  line-height: 1.4;
+  margin: 0;
+  text-align: left;
+}
+</style>
+
diff --git a/components/onboarding/OnboardingWizard.stories.js b/components/onboarding/OnboardingWizard.stories.js
new file mode 100644
index 0000000..4e82142
--- /dev/null
+++ b/components/onboarding/OnboardingWizard.stories.js
@@ -0,0 +1,8 @@
+import OnboardingWizard from './OnboardingWizard.vue';
+
+export default {
+  title: 'Domain/Onboarding/OnboardingWizard',
+  component: OnboardingWizard
+};
+
+export const Default = {};
diff --git a/components/onboarding/OnboardingWizard.vue b/components/onboarding/OnboardingWizard.vue
new file mode 100644
index 0000000..b269b8b
--- /dev/null
+++ b/components/onboarding/OnboardingWizard.vue
@@ -0,0 +1,501 @@
+<template>
+  <div class="onboarding-wizard">
+    <div class="wizard-header">
+      <h2 class="wizard-title">{{ currentStep.title }}</h2>
+      <div class="step-indicators">
+        <div
+          v-for="(step, index) in steps"
+          :key="index"
+          class="step-indicator"
+          :class="{ active: index === currentStepIndex, completed: index < currentStepIndex }"
+        />
+      </div>
+    </div>
+
+    <div class="steps-container">
+      <div class="steps-track" :style="{ transform: `translateX(-${currentStepIndex * 100}%)` }">
+        <div v-for="(step, index) in steps" :key="index" class="step-slide">
+          <div class="step-content">
+            <div class="step-icon">
+              <component :is="step.icon" class="icon" />
+            </div>
+
+            <div class="step-text">
+              <h3 class="step-title">{{ step.title }}</h3>
+              <p class="step-description">{{ step.description }}</p>
+
+              <div class="step-benefits">
+                <h4 class="benefits-title">Why this matters:</h4>
+                <div class="benefits-grid">
+                  <div v-for="benefit in step.benefits" :key="benefit.text" class="benefit-item">
+                    <CheckCircleIcon class="benefit-icon" />
+                    <span class="benefit-text">{{ benefit.text }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="step-actions">
+            <TButton
+              v-if="index === 0"
+              variant="primary"
+              :full-width="false"
+              class="primary-btn"
+              @click="$emit('start-action', step.action)"
+            >
+              {{ step.buttonText }}
+            </TButton>
+            <TButton
+              v-else-if="index === steps.length - 1"
+              variant="primary"
+              :full-width="false"
+              class="primary-btn"
+              @click="$emit('complete-onboarding')"
+            >
+              Start Using Trakli
+            </TButton>
+            <TButton
+              v-else
+              variant="primary"
+              :full-width="false"
+              class="primary-btn"
+              @click="$emit('step-action', step.action)"
+            >
+              {{ step.buttonText }}
+            </TButton>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="navigation-controls">
+      <TButton
+        variant="secondary"
+        :full-width="false"
+        class="nav-btn prev-btn"
+        :disabled="currentStepIndex === 0"
+        @click="previousStep"
+      >
+        <ChevronLeftIcon class="nav-icon" />
+        Previous
+      </TButton>
+
+      <div class="step-counter">{{ currentStepIndex + 1 }} of {{ steps.length }}</div>
+
+      <TButton
+        variant="secondary"
+        :full-width="false"
+        class="nav-btn next-btn"
+        :disabled="currentStepIndex === steps.length - 1"
+        @click="nextStep"
+      >
+        Next
+        <ChevronRightIcon class="nav-icon" />
+      </TButton>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import {
+  ArrowsRightLeftIcon,
+  CreditCardIcon,
+  TagIcon,
+  UsersIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  CheckCircleIcon,
+  PlusIcon
+} from '@heroicons/vue/24/outline';
+import TButton from '../TButton.vue';
+
+defineEmits(['start-action', 'step-action', 'complete-onboarding']);
+
+const currentStepIndex = ref(0);
+
+const steps = [
+  {
+    title: 'Add your first transaction',
+    description:
+      'Start your financial journey by recording a transaction. This is the heart of expense tracking!',
+    icon: PlusIcon,
+    buttonText: 'Add transaction',
+    action: 'add-transaction',
+    benefits: [
+      { text: 'See your balance change in real-time' },
+      { text: 'Get instant insights into your spending' },
+      { text: 'Start building healthy money habits' }
+    ]
+  },
+  {
+    title: 'Understand wallets',
+    description:
+      'Wallets represent your money sources - bank accounts, cash, credit cards, or digital wallets.',
+    icon: CreditCardIcon,
+    buttonText: 'Setup wallets',
+    action: 'setup-wallets',
+    benefits: [
+      { text: 'Track all your accounts in one place' },
+      { text: 'See which payment method you use most' },
+      { text: 'Monitor your total net worth' }
+    ]
+  },
+  {
+    title: 'Organize with categories',
+    description:
+      'Categories help you understand spending patterns by grouping similar transactions together.',
+    icon: TagIcon,
+    buttonText: 'Manage categories',
+    action: 'manage-categories',
+    benefits: [
+      { text: 'Identify your biggest spending areas' },
+      { text: 'Create budgets for specific categories' },
+      { text: 'Find transactions quickly with organized labels' }
+    ]
+  },
+  {
+    title: 'Track your parties',
+    description:
+      "Parties are people or businesses you exchange money with. Track who you're dealing with!",
+    icon: UsersIcon,
+    buttonText: 'Add parties',
+    action: 'add-parties',
+    benefits: [
+      { text: 'See how much you spend at each store' },
+      { text: 'Track money lent to friends and family' },
+      { text: 'Analyze your vendor relationships' }
+    ]
+  },
+  {
+    title: "You're all set!",
+    description:
+      'You now understand the core concepts of Trakli. Start tracking and watch your financial awareness grow!',
+    icon: ArrowsRightLeftIcon,
+    buttonText: 'Get started',
+    action: 'complete',
+    benefits: [
+      { text: 'Access your personalized dashboard' },
+      { text: 'Start tracking on the go' },
+      { text: 'Discover new insights about your money' }
+    ]
+  }
+];
+
+const currentStep = computed(() => steps[currentStepIndex.value]);
+
+const nextStep = () => {
+  if (currentStepIndex.value < steps.length - 1) {
+    currentStepIndex.value++;
+  }
+};
+
+const previousStep = () => {
+  if (currentStepIndex.value > 0) {
+    currentStepIndex.value--;
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@use '../../assets/scss/_vars.scss' as *;
+
+.onboarding-wizard {
+  width: 100%;
+  background: $bg-card;
+  border-radius: $radius-xl;
+  box-shadow: $shadow-xl;
+  overflow: hidden;
+}
+
+.wizard-header {
+  padding: 1rem 1.5rem 0.75rem 1.5rem;
+  text-align: center;
+  background: $primary-light;
+  border-bottom: 1px solid $border-gray;
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 0.75rem 1rem 0.5rem 1rem;
+  }
+}
+
+.wizard-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: $text-primary;
+  margin: 0 0 0.75rem 0;
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 1.125rem;
+    margin: 0 0 0.5rem 0;
+  }
+}
+
+.step-indicators {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.step-indicator {
+  width: 40px;
+  height: 4px;
+  border-radius: 2px;
+  background: $border-gray;
+  transition: all 0.3s ease;
+
+  &.active {
+    background: $primary;
+    transform: scaleY(1.5);
+  }
+
+  &.completed {
+    background: $primary;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    width: 30px;
+    height: 3px;
+  }
+}
+
+.steps-container {
+  height: 380px;
+  overflow: hidden;
+  position: relative;
+  background: $bg-light;
+
+  @media (max-width: $breakpoint-sm) {
+    height: 420px;
+  }
+}
+
+.steps-track {
+  display: flex;
+  height: 100%;
+  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.step-slide {
+  flex: 0 0 100%;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 100%;
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 1rem;
+  }
+}
+
+.step-content {
+  display: flex;
+  align-items: flex-start;
+  gap: 2rem;
+  flex: 1;
+
+  @media (max-width: $breakpoint-sm) {
+    flex-direction: column;
+    gap: 1rem;
+    text-align: center;
+  }
+}
+
+.step-icon {
+  width: 80px;
+  height: 80px;
+  background: linear-gradient(135deg, $primary-light 0%, rgba(var(--color-primary-rgb), 0.1) 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  .icon {
+    width: 36px;
+    height: 36px;
+    color: $primary;
+    stroke-width: 1.5;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    width: 60px;
+    height: 60px;
+    margin: 0 auto;
+
+    .icon {
+      width: 28px;
+      height: 28px;
+    }
+  }
+}
+
+.step-text {
+  flex: 1;
+}
+
+.step-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: $text-primary;
+  margin: 0 0 0.75rem 0;
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 1.125rem;
+  }
+}
+
+.step-description {
+  font-size: 1rem;
+  color: $text-secondary;
+  line-height: 1.6;
+  margin: 0 0 1.5rem 0;
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 0.9rem;
+  }
+}
+
+.step-benefits {
+  background: $bg-slate;
+  border: 1px solid $border-gray;
+  border-radius: $radius-xl;
+  padding: 1rem;
+}
+
+.benefits-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: $primary;
+  margin: 0 0 0.75rem 0;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.benefits-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.benefit-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+
+  .benefit-icon {
+    width: 18px;
+    height: 18px;
+    color: $primary;
+    flex-shrink: 0;
+  }
+
+  .benefit-text {
+    font-size: 0.875rem;
+    color: $text-secondary;
+    line-height: 1.4;
+
+    @media (max-width: $breakpoint-sm) {
+      font-size: 0.8rem;
+    }
+  }
+}
+
+.step-actions {
+  margin-top: 1.5rem;
+  text-align: center;
+  padding-bottom: 0.5rem;
+  flex-shrink: 0;
+}
+
+.primary-btn {
+  background: $primary;
+  color: $text-inverse;
+  font-size: 1rem;
+  font-weight: 600;
+  border: none;
+  border-radius: $radius-lg;
+  padding: 0.875rem 2rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3);
+
+  &:hover {
+    background: $primary-hover;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.4);
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 0.9rem;
+    padding: 0.75rem 1.5rem;
+  }
+}
+
+.navigation-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 2rem;
+  background: $bg-slate;
+  border-top: 1px solid $border-gray;
+
+  @media (max-width: $breakpoint-sm) {
+    padding: 0.75rem 1.5rem;
+  }
+}
+
+.nav-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: $bg-white;
+  color: $text-secondary;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border: 1px solid $border-gray;
+  border-radius: 6px;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  .nav-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  &:hover:not(:disabled) {
+    background: $bg-slate;
+    color: $primary;
+    border-color: $primary;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 0.8rem;
+    padding: 0.4rem 0.75rem;
+  }
+}
+
+.step-counter {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: $text-secondary;
+  background: $bg-white;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  border: 1px solid $border-gray;
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 0.8rem;
+    padding: 0.4rem 0.75rem;
+  }
+}
+</style>
diff --git a/components/parties/PartiesStatsStrip.stories.js b/components/parties/PartiesStatsStrip.stories.js
new file mode 100644
index 0000000..fc68953
--- /dev/null
+++ b/components/parties/PartiesStatsStrip.stories.js
@@ -0,0 +1,32 @@
+import PartiesStatsStrip from './PartiesStatsStrip.vue';
+
+const parties = [
+  { id: 1, name: 'Acme Corp', receivedAmount: 0, spentAmount: 4200 },
+  { id: 2, name: 'Alice Johnson', receivedAmount: 6800, spentAmount: 120 },
+  { id: 3, name: 'SaaS Tooling Inc', receivedAmount: 0, spentAmount: 890 },
+  { id: 4, name: 'Robert Davis', receivedAmount: 2500, spentAmount: 0 }
+];
+
+export default {
+  title: 'Domain/Parties/PartiesStatsStrip',
+  component: PartiesStatsStrip,
+  args: {
+    parties,
+    currency: 'USD'
+  }
+};
+
+export const Default = {};
+
+export const NetNegative = {
+  args: {
+    parties: [
+      { id: 1, name: 'Big Vendor', receivedAmount: 0, spentAmount: 9500 },
+      { id: 2, name: 'Small Client', receivedAmount: 1200, spentAmount: 0 }
+    ]
+  }
+};
+
+export const Empty = {
+  args: { parties: [] }
+};
diff --git a/components/parties/PartiesStatsStrip.vue b/components/parties/PartiesStatsStrip.vue
new file mode 100644
index 0000000..93836ee
--- /dev/null
+++ b/components/parties/PartiesStatsStrip.vue
@@ -0,0 +1,197 @@
+<template>
+  <section class="stats-strip">
+    <article
+      v-for="stat in stats"
+      :key="stat.key"
+      class="stat surface"
+      :class="`surface--${stat.tone}`"
+    >
+      <div class="stat-icon">
+        <component :is="stat.icon" :size="14" />
+      </div>
+      <div class="stat-body">
+        <span class="stat-label">{{ stat.label }}</span>
+        <p class="stat-value">{{ stat.value }}</p>
+        <span v-if="stat.sub" class="stat-sub">{{ stat.sub }}</span>
+      </div>
+    </article>
+  </section>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { Users, TrendingUp, ArrowDownLeft, ArrowUpRight } from 'lucide-vue-next';
+import { formatShortAmount } from '../../utils/currency';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k, params) => {
+  if (!params) return k;
+  return k.replace(/\{(\w+)\}/g, (_, key) => params[key] ?? key);
+});
+
+const props = defineProps({
+  parties: { type: Array, required: true },
+  currency: { type: String, default: 'USD' },
+  formatter: {
+    type: Function,
+    default: (n, cur) => formatShortAmount(`${n} ${cur}`)
+  }
+});
+
+const totals = computed(() => {
+  let received = 0;
+  let spent = 0;
+  let topEarner = null;
+  let topSpender = null;
+
+  props.parties.forEach((p) => {
+    const r = Number(p.receivedAmount || 0);
+    const s = Number(p.spentAmount || 0);
+    received += r;
+    spent += s;
+    if (!topEarner || r > Number(topEarner.receivedAmount || 0)) topEarner = p;
+    if (!topSpender || s > Number(topSpender.spentAmount || 0)) topSpender = p;
+  });
+
+  return {
+    received,
+    spent,
+    net: received - spent,
+    topEarner: topEarner && Number(topEarner.receivedAmount || 0) > 0 ? topEarner : null,
+    topSpender: topSpender && Number(topSpender.spentAmount || 0) > 0 ? topSpender : null
+  };
+});
+
+const stats = computed(() => [
+  {
+    key: 'count',
+    label: t('Parties'),
+    value: props.parties.length,
+    icon: Users,
+    tone: 'brand'
+  },
+  {
+    key: 'net',
+    label: t('Net trade'),
+    value: props.formatter(totals.value.net, props.currency),
+    sub: t('Last 3 months'),
+    icon: TrendingUp,
+    tone: totals.value.net >= 0 ? 'income' : 'expense'
+  },
+  {
+    key: 'topEarner',
+    label: t('Top earner'),
+    value: totals.value.topEarner?.name || '—',
+    sub: totals.value.topEarner
+      ? props.formatter(totals.value.topEarner.receivedAmount, props.currency)
+      : t('No income yet'),
+    icon: ArrowDownLeft,
+    tone: 'income'
+  },
+  {
+    key: 'topSpender',
+    label: t('Top spend'),
+    value: totals.value.topSpender?.name || '—',
+    sub: totals.value.topSpender
+      ? props.formatter(totals.value.topSpender.spentAmount, props.currency)
+      : t('No spend yet'),
+    icon: ArrowUpRight,
+    tone: 'expense'
+  }
+]);
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.stats-strip {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  width: 100%;
+
+  @media (max-width: $breakpoint-md) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.stat {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-right: 1px solid $border-light;
+  overflow: hidden;
+  min-width: 0;
+
+  &:last-child {
+    border-right: none;
+  }
+
+  @media (max-width: $breakpoint-md) {
+    &:nth-child(2n) {
+      border-right: none;
+    }
+    &:nth-child(-n + 2) {
+      border-bottom: 1px solid $border-light;
+    }
+  }
+}
+
+.stat-icon {
+  flex-shrink: 0;
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  background: var(--glass-bg);
+  border: 1px solid $border-light;
+  color: var(--surface-deep);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  :deep(svg) {
+    width: 14px;
+    height: 14px;
+  }
+}
+
+.stat-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-width: 0;
+  flex: 1;
+  line-height: 1.2;
+}
+
+.stat-label {
+  font-size: 10px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--surface-deep);
+  opacity: 0.85;
+}
+
+.stat-value {
+  margin: 0;
+  font-size: $font-size-sm;
+  font-weight: $font-bold;
+  color: var(--surface-ink);
+  letter-spacing: -0.005em;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.stat-sub {
+  font-size: 10px;
+  color: var(--surface-ink);
+  opacity: 0.6;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/components/parties/PartyDetailPanel.stories.js b/components/parties/PartyDetailPanel.stories.js
new file mode 100644
index 0000000..27f0bd0
--- /dev/null
+++ b/components/parties/PartyDetailPanel.stories.js
@@ -0,0 +1,35 @@
+import PartyDetailPanel from './PartyDetailPanel.vue';
+
+const party = {
+  id: 1,
+  name: 'Grocery Store',
+  type: 'organization',
+  description: 'Weekly groceries',
+  icon: 'Store'
+};
+
+const transactions = [
+  { date: '2024-03-24', type: 'EXPENSE', amount: '142.50 USD', party: 'Grocery Store', category: 'Food & Dining' },
+  { date: '2024-03-20', type: 'EXPENSE', amount: '68.00 USD', party: 'Grocery Store', category: 'Food & Dining' },
+  { date: '2024-03-15', type: 'EXPENSE', amount: '210.00 USD', party: 'Grocery Store', category: 'Food & Dining' }
+];
+
+export default {
+  title: 'Domain/Parties/PartyDetailPanel',
+  component: PartyDetailPanel,
+  args: {
+    party,
+    transactions,
+    currency: 'USD',
+    showBack: false
+  }
+};
+
+export const WithParty = {};
+
+export const Empty = {
+  args: {
+    party: null,
+    transactions: []
+  }
+};
diff --git a/components/parties/PartyDetailPanel.vue b/components/parties/PartyDetailPanel.vue
new file mode 100644
index 0000000..3fcbda4
--- /dev/null
+++ b/components/parties/PartyDetailPanel.vue
@@ -0,0 +1,880 @@
+<template>
+  <div class="detail" :class="{ 'detail--empty': !party }">
+    <div v-if="!party" class="empty">
+      <svg class="empty-illustration" viewBox="0 0 220 220" aria-hidden="true">
+        <defs>
+          <radialGradient id="empty-glow" cx="50%" cy="50%" r="55%">
+            <stop offset="0%" stop-color="var(--color-primary)" stop-opacity="0.22" />
+            <stop offset="100%" stop-color="var(--color-primary)" stop-opacity="0" />
+          </radialGradient>
+        </defs>
+        <circle cx="110" cy="110" r="100" fill="url(#empty-glow)" />
+        <circle
+          cx="110"
+          cy="110"
+          r="80"
+          fill="none"
+          stroke="var(--color-primary)"
+          stroke-opacity="0.18"
+          stroke-width="1"
+          stroke-dasharray="3 4"
+        />
+        <circle
+          cx="110"
+          cy="110"
+          r="56"
+          fill="none"
+          stroke="var(--color-primary)"
+          stroke-opacity="0.28"
+          stroke-width="1"
+        />
+        <circle cx="110" cy="110" r="36" fill="var(--color-primary-light)" />
+        <g transform="translate(110 110)" fill="var(--color-primary)">
+          <circle cx="0" cy="-4" r="7" />
+          <path d="M -10 12 C -10 5 10 5 10 12 L 10 16 L -10 16 Z" />
+        </g>
+        <circle cx="190" cy="60" r="6" fill="var(--color-primary)" opacity="0.7" />
+        <circle cx="35" cy="170" r="4" fill="var(--color-primary)" opacity="0.55" />
+        <circle cx="170" cy="180" r="5" fill="var(--color-primary)" opacity="0.45" />
+      </svg>
+      <p class="empty-title">{{ t('Select a party') }}</p>
+      <p class="empty-sub">
+        {{
+          t('Pick someone on the left to see their activity, balances, and recent transactions.')
+        }}
+      </p>
+    </div>
+
+    <Transition v-else name="party-swap" mode="out-in">
+      <div :key="party.id" class="detail-body">
+        <header class="hero surface" :class="netTone">
+          <svg
+            class="hero-decor"
+            viewBox="0 0 800 80"
+            preserveAspectRatio="xMaxYMid slice"
+            aria-hidden="true"
+          >
+            <defs>
+              <pattern id="hero-dots" width="18" height="18" patternUnits="userSpaceOnUse">
+                <circle cx="2" cy="2" r="1" fill="var(--surface-deep)" opacity="0.12" />
+              </pattern>
+              <radialGradient id="hero-bloom" cx="100%" cy="50%" r="60%">
+                <stop offset="0%" stop-color="var(--surface-accent)" stop-opacity="0.45" />
+                <stop offset="100%" stop-color="var(--surface-accent)" stop-opacity="0" />
+              </radialGradient>
+            </defs>
+            <rect x="0" y="0" width="800" height="80" fill="url(#hero-dots)" />
+            <circle cx="780" cy="40" r="120" fill="url(#hero-bloom)" />
+          </svg>
+
+          <TButton
+            v-if="showBack"
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="back-btn"
+            :aria-label="t('Back to list')"
+            @click="$emit('back')"
+          >
+            <ChevronLeft :size="18" />
+          </TButton>
+
+          <div class="hero-avatar">
+            <component :is="resolvedIcon" :size="18" />
+          </div>
+          <div class="hero-meta">
+            <h2 class="hero-name">{{ party.name }}</h2>
+            <span class="hero-sub">
+              <span class="hero-type">{{ displayType }}</span>
+              <template v-if="party.description">
+                <span class="hero-dot">·</span>
+                <span class="hero-desc">{{ party.description }}</span>
+              </template>
+            </span>
+          </div>
+
+          <div class="hero-actions">
+            <TButton
+              variant="text"
+              size="small"
+              :full-width="false"
+              class="hero-action"
+              :aria-label="t('Edit')"
+              @click="$emit('edit', party)"
+            >
+              <Edit3 :size="14" />
+            </TButton>
+            <TButton
+              variant="text"
+              size="small"
+              :full-width="false"
+              class="hero-action hero-action--danger"
+              :aria-label="t('Delete')"
+              @click="$emit('delete', party)"
+            >
+              <Trash2 :size="14" />
+            </TButton>
+          </div>
+        </header>
+
+        <section class="totals">
+          <div class="total total--income">
+            <span class="total-label">{{ t('Received') }}</span>
+            <p class="total-value">{{ formatter(party.receivedAmount || 0, currency) }}</p>
+          </div>
+          <div class="total-divider" />
+          <div class="total total--expense">
+            <span class="total-label">{{ t('Spent') }}</span>
+            <p class="total-value">{{ formatter(party.spentAmount || 0, currency) }}</p>
+          </div>
+          <div class="total-divider" />
+          <div class="total total--net">
+            <span class="total-label">{{ t('Net') }}</span>
+            <p class="total-value" :class="netValue >= 0 ? 'tone-income' : 'tone-expense'">
+              {{ formatter(netValue, currency) }}
+            </p>
+          </div>
+        </section>
+
+        <section class="chart-card">
+          <header class="chart-head">
+            <div>
+              <span class="chart-eyebrow">{{ t('Last 6 months') }}</span>
+              <h3 class="chart-title">{{ t('Activity') }}</h3>
+            </div>
+            <span class="chart-legend">
+              <span class="legend-dot legend-dot--income" />{{ t('Received') }}
+              <span class="legend-dot legend-dot--expense" />{{ t('Spent') }}
+            </span>
+          </header>
+          <svg
+            v-if="hasActivity"
+            class="chart-svg"
+            :viewBox="`0 0 ${chartW} ${chartH}`"
+            preserveAspectRatio="none"
+          >
+            <line
+              v-for="i in 4"
+              :key="`grid-${i}`"
+              :x1="0"
+              :x2="chartW"
+              :y1="(chartH - 24) * (i / 4) + 4"
+              :y2="(chartH - 24) * (i / 4) + 4"
+              class="chart-grid"
+              vector-effect="non-scaling-stroke"
+            />
+            <polyline
+              :points="linePoints('receivedAmount')"
+              fill="none"
+              stroke="var(--color-income)"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              vector-effect="non-scaling-stroke"
+            />
+            <polyline
+              :points="linePoints('spentAmount')"
+              fill="none"
+              stroke="var(--color-expense)"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              vector-effect="non-scaling-stroke"
+            />
+            <g v-for="(m, i) in monthly" :key="`pt-${i}`">
+              <circle
+                v-if="m.receivedAmount > 0"
+                :cx="xAt(i)"
+                :cy="yAt(m.receivedAmount)"
+                r="3"
+                fill="var(--color-income)"
+                vector-effect="non-scaling-stroke"
+              />
+              <circle
+                v-if="m.spentAmount > 0"
+                :cx="xAt(i)"
+                :cy="yAt(m.spentAmount)"
+                r="3"
+                fill="var(--color-expense)"
+                vector-effect="non-scaling-stroke"
+              />
+            </g>
+            <text
+              v-for="(m, i) in monthly"
+              :key="`label-${i}`"
+              :x="xAt(i)"
+              :y="chartH - 4"
+              text-anchor="middle"
+              class="chart-axis"
+            >
+              {{ m.label }}
+            </text>
+          </svg>
+          <div v-else class="chart-empty">
+            <Activity :size="22" />
+            <span>{{ t('No activity in the last 6 months yet.') }}</span>
+          </div>
+        </section>
+
+        <section class="recent">
+          <header class="recent-head">
+            <div>
+              <span class="recent-eyebrow">{{ t('Recent transactions') }}</span>
+              <h3 class="recent-title">{{ recentTransactions.length }} {{ t('shown') }}</h3>
+            </div>
+            <NuxtLink :to="`/transactions?partyId=${party.id}`" class="recent-link">
+              {{ t('View all') }}
+              <ChevronRight :size="14" />
+            </NuxtLink>
+          </header>
+          <ul v-if="recentTransactions.length" class="recent-list">
+            <li v-for="tx in recentTransactions" :key="tx.id" class="recent-row">
+              <div class="recent-row-left">
+                <span
+                  class="recent-type"
+                  :class="
+                    tx.type === 'INCOME' || tx.type === 'income' ? 'tone-income' : 'tone-expense'
+                  "
+                >
+                  <component
+                    :is="
+                      tx.type === 'INCOME' || tx.type === 'income' ? ArrowDownLeft : ArrowUpRight
+                    "
+                    :size="14"
+                  />
+                </span>
+                <div class="recent-text">
+                  <span class="recent-name">{{
+                    tx.category || tx.description || t('Transaction')
+                  }}</span>
+                  <span class="recent-date">{{ formatDate(tx.date || tx.datetime) }}</span>
+                </div>
+              </div>
+              <span
+                class="recent-amount"
+                :class="
+                  tx.type === 'INCOME' || tx.type === 'income' ? 'tone-income' : 'tone-expense'
+                "
+              >
+                {{ formatter(parseAmount(tx.amount).value, currency) }}
+              </span>
+            </li>
+          </ul>
+          <div v-else class="recent-empty">
+            {{ t('No transactions yet with this party.') }}
+          </div>
+        </section>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import * as LucideIcons from 'lucide-vue-next';
+import {
+  Edit3,
+  Trash2,
+  ChevronLeft,
+  ChevronRight,
+  ArrowDownLeft,
+  ArrowUpRight,
+  Activity
+} from 'lucide-vue-next';
+import { parseAmount } from '../../utils/currency';
+
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+const locale = i18n?.locale || { value: 'en' };
+
+const props = defineProps({
+  party: { type: Object, default: null },
+  transactions: { type: Array, default: () => [] },
+  currency: { type: String, default: 'USD' },
+  formatter: { type: Function, default: (n) => `${Math.round(n)}` },
+  showBack: { type: Boolean, default: false }
+});
+
+defineEmits(['edit', 'delete', 'back']);
+
+const chartW = 720;
+const chartH = 200;
+
+const displayType = computed(() => {
+  const type = props.party?.type?.toLowerCase();
+  const map = {
+    individual: t('Individual'),
+    business: t('Business'),
+    organization: t('Organization'),
+    vendor: t('Vendor'),
+    client: t('Client')
+  };
+  return map[type] || (props.party?.type ? props.party.type : t('Party'));
+});
+
+const netValue = computed(() => {
+  if (!props.party) return 0;
+  return Number(props.party.receivedAmount || 0) - Number(props.party.spentAmount || 0);
+});
+
+const netTone = computed(() => {
+  if (!props.party) return 'surface--brand';
+  if (netValue.value > 0) return 'surface--income';
+  if (netValue.value < 0) return 'surface--expense';
+  return 'surface--brand';
+});
+
+const resolvedIcon = computed(() => {
+  const icon = props.party?.icon;
+  let iconValue = '';
+  if (icon) {
+    if (typeof icon === 'string') iconValue = icon;
+    else if (icon.path) iconValue = icon.path;
+    else if (icon.content) iconValue = icon.content;
+  }
+  if (!iconValue) {
+    return props.party?.type === 'individual' ? LucideIcons.User : LucideIcons.Building2;
+  }
+  return (
+    LucideIcons[iconValue] ||
+    (props.party?.type === 'individual' ? LucideIcons.User : LucideIcons.Building2)
+  );
+});
+
+const partyTransactions = computed(() => {
+  if (!props.party) return [];
+  return props.transactions
+    .filter((tx) => tx.partyId === props.party.id)
+    .sort(
+      (a, b) => new Date(b.date || b.datetime).getTime() - new Date(a.date || a.datetime).getTime()
+    );
+});
+
+const recentTransactions = computed(() => partyTransactions.value.slice(0, 6));
+
+const monthly = computed(() => {
+  const out = [];
+  const now = new Date();
+  for (let i = 5; i >= 0; i -= 1) {
+    const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
+    out.push({
+      key: `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`,
+      date: d,
+      label: new Intl.DateTimeFormat(locale.value, { month: 'short' }).format(d),
+      receivedAmount: 0,
+      spentAmount: 0
+    });
+  }
+  partyTransactions.value.forEach((tx) => {
+    const txDate = new Date(tx.date || tx.datetime);
+    const key = `${txDate.getFullYear()}-${String(txDate.getMonth() + 1).padStart(2, '0')}`;
+    const bucket = out.find((m) => m.key === key);
+    if (!bucket) return;
+    const v = parseAmount(tx.amount).value;
+    if (tx.type === 'INCOME' || tx.type === 'income') bucket.receivedAmount += v;
+    else bucket.spentAmount += v;
+  });
+  return out;
+});
+
+const maxMonthValue = computed(() => {
+  let max = 0;
+  monthly.value.forEach((m) => {
+    max = Math.max(max, m.receivedAmount, m.spentAmount);
+  });
+  return max || 1;
+});
+
+const hasActivity = computed(() => maxMonthValue.value > 0);
+
+const xAt = (i) => {
+  const padding = 8;
+  const span = chartW - padding * 2;
+  return padding + (span * i) / Math.max(monthly.value.length - 1, 1);
+};
+
+const yAt = (v) => {
+  const padding = 12;
+  const span = chartH - padding * 2 - 14;
+  return padding + span * (1 - v / maxMonthValue.value);
+};
+
+const linePoints = (key) => monthly.value.map((m, i) => `${xAt(i)},${yAt(m[key])}`).join(' ');
+
+const formatDate = (val) => {
+  if (!val) return '';
+  const d = new Date(val);
+  return new Intl.DateTimeFormat(locale.value, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric'
+  }).format(d);
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.detail {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-height: 100%;
+
+  &--empty {
+    align-items: center;
+    justify-content: center;
+    padding: $spacing-8 $spacing-6;
+    min-height: 320px;
+  }
+}
+
+.empty {
+  text-align: center;
+  max-width: 340px;
+  color: $text-muted;
+}
+
+.empty-illustration {
+  width: 160px;
+  height: 160px;
+  margin-bottom: $spacing-3;
+  animation: empty-float 6s $easing-standard infinite;
+}
+
+@keyframes empty-float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-4px);
+  }
+}
+
+.detail-body {
+  display: flex;
+  flex-direction: column;
+}
+
+.party-swap-enter-active,
+.party-swap-leave-active {
+  transition:
+    opacity $duration-base $easing-standard,
+    transform $duration-base $easing-emphasized;
+}
+.party-swap-enter-from {
+  opacity: 0;
+  transform: translateY(6px);
+}
+.party-swap-leave-to {
+  opacity: 0;
+  transform: translateY(-6px);
+}
+
+.empty-title {
+  font-size: $font-size-base;
+  font-weight: $font-bold;
+  color: $text-primary;
+  margin: 0 0 $spacing-1;
+  letter-spacing: -0.01em;
+}
+
+.empty-sub {
+  font-size: $font-size-sm;
+  margin: 0;
+  line-height: 1.5;
+}
+
+.hero {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  min-height: 52px;
+  border-bottom: 1px solid $border-light;
+  overflow: hidden;
+}
+
+.hero-decor {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.hero > *:not(.hero-decor) {
+  position: relative;
+  z-index: 1;
+}
+
+.back-btn {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background: var(--glass-bg);
+  border: 1px solid $border-light;
+  color: var(--surface-deep);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color $duration-fast $easing-standard;
+  flex-shrink: 0;
+
+  &:hover {
+    background: var(--glass-bg-strong);
+  }
+
+  @media (max-width: $breakpoint-md) {
+    display: inline-flex;
+  }
+}
+
+.hero-avatar {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
+  background: var(--glass-bg);
+  border: 1px solid $border-light;
+  color: var(--surface-deep);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hero-meta {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  line-height: 1.2;
+}
+
+.hero-name {
+  margin: 0;
+  font-size: $font-size-base;
+  font-weight: $font-bold;
+  color: var(--surface-ink);
+  letter-spacing: -0.015em;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.hero-sub {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  font-size: 11px;
+  color: var(--surface-ink);
+  opacity: 0.7;
+  font-weight: $font-medium;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.hero-type {
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: $font-bold;
+  color: var(--surface-deep);
+  opacity: 0.85;
+}
+
+.hero-dot {
+  opacity: 0.6;
+}
+
+.hero-desc {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.hero-actions {
+  display: inline-flex;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.hero-action {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background: transparent;
+  border: none;
+  color: var(--surface-deep);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition:
+    background-color $duration-fast $easing-standard,
+    color $duration-fast $easing-standard;
+
+  &:hover {
+    background: var(--glass-bg);
+  }
+
+  &--danger:hover {
+    color: var(--color-expense);
+    background: rgba(var(--color-expense-rgb), 0.1);
+  }
+}
+
+.totals {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr auto 1fr;
+  align-items: center;
+  padding: 10px 14px;
+  border-bottom: 1px solid $border-light;
+}
+
+.total {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-width: 0;
+  line-height: 1.2;
+}
+
+.total-label {
+  font-size: 10px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: $text-muted;
+}
+
+.total-value {
+  margin: 0;
+  font-size: $font-size-sm;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.005em;
+  color: $text-primary;
+}
+
+.total-divider {
+  width: 1px;
+  height: 22px;
+  background: $border-light;
+}
+
+.tone-income {
+  color: var(--color-income);
+}
+.tone-expense {
+  color: var(--color-expense);
+}
+
+.chart-card,
+.recent {
+  padding: 12px 14px;
+  border-bottom: 1px solid $border-light;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.chart-head,
+.recent-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  gap: $spacing-3;
+}
+
+.chart-eyebrow,
+.recent-eyebrow {
+  font-size: 11px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: $text-muted;
+}
+
+.chart-title,
+.recent-title {
+  margin: 2px 0 0;
+  font-size: $font-size-base;
+  font-weight: $font-bold;
+  color: $text-primary;
+  letter-spacing: -0.01em;
+}
+
+.chart-legend {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: $font-semibold;
+  color: $text-muted;
+  white-space: nowrap;
+}
+
+.legend-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-left: 4px;
+  margin-right: 2px;
+
+  &--income {
+    background: var(--color-income);
+  }
+  &--expense {
+    background: var(--color-expense);
+  }
+}
+
+.chart-svg {
+  width: 100%;
+  height: 180px;
+  display: block;
+
+  @media (max-width: $breakpoint-md) {
+    height: 140px;
+  }
+}
+
+.chart-grid {
+  stroke: $border-light;
+}
+
+.chart-axis {
+  font-size: 10px;
+  fill: $text-muted;
+  font-family: $font-family-sans;
+  font-variant-numeric: tabular-nums;
+}
+
+.chart-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: $spacing-4;
+  font-size: $font-size-sm;
+  color: $text-muted;
+
+  svg {
+    opacity: 0.5;
+  }
+}
+
+.recent-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  color: $primary;
+  text-decoration: none;
+  padding: 4px 8px;
+  border-radius: 8px;
+  transition: background-color $duration-fast $easing-standard;
+
+  &:hover {
+    background: $primary-light;
+  }
+}
+
+.recent-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.recent-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-3;
+  padding: $spacing-2 0;
+  border-bottom: 1px solid $border-light;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.recent-row-left {
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+  min-width: 0;
+  flex: 1;
+}
+
+.recent-type {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &.tone-income {
+    background: rgba(var(--color-income-rgb), 0.12);
+  }
+  &.tone-expense {
+    background: rgba(var(--color-expense-rgb), 0.12);
+  }
+}
+
+.recent-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-width: 0;
+  flex: 1;
+}
+
+.recent-name {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.recent-date {
+  font-size: 11px;
+  color: $text-muted;
+  font-variant-numeric: tabular-nums;
+}
+
+.recent-amount {
+  font-size: $font-size-sm;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+}
+
+.recent-empty {
+  padding: $spacing-3 0;
+  text-align: center;
+  font-size: $font-size-sm;
+  color: $text-muted;
+}
+</style>
diff --git a/components/reminders/ReminderForm.stories.js b/components/reminders/ReminderForm.stories.js
new file mode 100644
index 0000000..a6b05e5
--- /dev/null
+++ b/components/reminders/ReminderForm.stories.js
@@ -0,0 +1,27 @@
+import ReminderForm from './ReminderForm.vue';
+
+export default {
+  title: 'Domain/Reminders/ReminderForm',
+  component: ReminderForm,
+  args: {
+    editingItem: null,
+    apiError: '',
+    isSubmitting: false
+  }
+};
+
+export const Create = {};
+
+export const Edit = {
+  args: {
+    editingItem: {
+      id: 1,
+      title: 'Review weekly expenses',
+      description: 'Check last week spend',
+      type: 'weekly_review',
+      priority: 0,
+      trigger_at: '2024-03-25T09:00',
+      timezone: 'UTC'
+    }
+  }
+};
diff --git a/components/reminders/ReminderForm.vue b/components/reminders/ReminderForm.vue
new file mode 100644
index 0000000..bf3a351
--- /dev/null
+++ b/components/reminders/ReminderForm.vue
@@ -0,0 +1,388 @@
+<template>
+  <div class="reminder-form">
+    <div class="form-header">
+      <h2>{{ isEditing ? t('Edit Reminder') : t('Create Reminder') }}</h2>
+      <TButton
+        variant="text"
+        size="small"
+        :full-width="false"
+        class="close-btn"
+        :aria-label="t('Close')"
+        @click="$emit('close')"
+      >
+        <X />
+      </TButton>
+    </div>
+
+    <form @submit.prevent="handleSubmit">
+      <div class="form-group">
+        <label class="form-label">{{ t('Title') }} *</label>
+        <input
+          v-model="form.title"
+          type="text"
+          class="form-input"
+          :placeholder="t('e.g., Review weekly expenses')"
+          required
+        />
+        <div v-if="props.apiError" class="error-text">{{ props.apiError }}</div>
+      </div>
+
+      <div class="form-group">
+        <label class="form-label">{{ t('Description') }}</label>
+        <textarea
+          v-model="form.description"
+          class="form-input form-textarea"
+          :placeholder="t('Optional details about this reminder')"
+          rows="3"
+        />
+      </div>
+
+      <div class="form-row">
+        <div class="form-group">
+          <label class="form-label">{{ t('Type') }} *</label>
+          <select v-model="form.type" class="form-input" required>
+            <option value="daily_tracking">{{ t('Daily Tracking') }}</option>
+            <option value="weekly_review">{{ t('Weekly Review') }}</option>
+            <option value="monthly_summary">{{ t('Monthly Summary') }}</option>
+            <option value="bill_due">{{ t('Bill Due') }}</option>
+            <option value="budget_alert">{{ t('Budget Alert') }}</option>
+            <option value="custom">{{ t('Custom') }}</option>
+          </select>
+        </div>
+
+        <div class="form-group">
+          <label class="form-label">{{ t('Priority') }}</label>
+          <select v-model="form.priority" class="form-input">
+            <option :value="0">{{ t('Normal') }}</option>
+            <option :value="1">{{ t('High') }}</option>
+            <option :value="2">{{ t('Urgent') }}</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="form-row">
+        <div class="form-group">
+          <label class="form-label">{{ t('Date & Time') }} *</label>
+          <input v-model="form.trigger_at" type="datetime-local" class="form-input" required />
+        </div>
+
+        <div class="form-group">
+          <label class="form-label">{{ t('Timezone') }}</label>
+          <select v-model="form.timezone" class="form-input">
+            <option value="UTC">UTC</option>
+            <option value="America/New_York">Eastern Time</option>
+            <option value="America/Chicago">Central Time</option>
+            <option value="America/Denver">Mountain Time</option>
+            <option value="America/Los_Angeles">Pacific Time</option>
+            <option value="Europe/London">London</option>
+            <option value="Europe/Paris">Paris</option>
+            <option value="Asia/Tokyo">Tokyo</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label class="form-label">{{ t('Repeat') }}</label>
+        <select v-model="repeatOption" class="form-input">
+          <option value="none">{{ t('Does not repeat') }}</option>
+          <option value="daily">{{ t('Daily') }}</option>
+          <option value="weekly">{{ t('Weekly') }}</option>
+          <option value="monthly">{{ t('Monthly') }}</option>
+        </select>
+      </div>
+
+      <div class="form-actions">
+        <TButton variant="secondary" :full-width="false" @click="$emit('close')">
+          {{ t('Cancel') }}
+        </TButton>
+        <TButton
+          type="submit"
+          variant="primary"
+          :full-width="false"
+          :disabled="props.isSubmitting"
+        >
+          <Loader2 v-if="props.isSubmitting" class="spinner" />
+          {{ isEditing ? t('Update Reminder') : t('Create Reminder') }}
+        </TButton>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, watch, onMounted } from 'vue';
+import { X, Loader2 } from 'lucide-vue-next';
+
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  editingItem: {
+    type: Object,
+    default: null
+  },
+  apiError: {
+    type: String,
+    default: ''
+  },
+  isSubmitting: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['created', 'updated', 'close']);
+
+const isEditing = computed(() => !!props.editingItem);
+const repeatOption = ref('none');
+
+const form = reactive({
+  title: '',
+  description: '',
+  type: 'custom',
+  trigger_at: '',
+  timezone: 'UTC',
+  priority: 0,
+  repeat_rule: null
+});
+
+const repeatRules = {
+  none: null,
+  daily: 'FREQ=DAILY',
+  weekly: 'FREQ=WEEKLY',
+  monthly: 'FREQ=MONTHLY'
+};
+
+watch(repeatOption, (val) => {
+  form.repeat_rule = repeatRules[val] || null;
+});
+
+watch(
+  () => props.editingItem,
+  (item) => {
+    if (item) {
+      form.title = item.title || '';
+      form.description = item.description || '';
+      form.type = item.type || 'custom';
+      form.timezone = item.timezone || 'UTC';
+      form.priority = item.priority || 0;
+      form.repeat_rule = item.repeat_rule || null;
+
+      if (item.trigger_at) {
+        const date = new Date(item.trigger_at);
+        form.trigger_at = date.toISOString().slice(0, 16);
+      }
+
+      if (item.repeat_rule) {
+        if (item.repeat_rule.includes('DAILY')) repeatOption.value = 'daily';
+        else if (item.repeat_rule.includes('WEEKLY')) repeatOption.value = 'weekly';
+        else if (item.repeat_rule.includes('MONTHLY')) repeatOption.value = 'monthly';
+        else repeatOption.value = 'none';
+      } else {
+        repeatOption.value = 'none';
+      }
+    } else {
+      resetForm();
+    }
+  },
+  { immediate: true }
+);
+
+function resetForm() {
+  form.title = '';
+  form.description = '';
+  form.type = 'custom';
+  form.trigger_at = getDefaultDateTime();
+  form.timezone = 'UTC';
+  form.priority = 0;
+  form.repeat_rule = null;
+  repeatOption.value = 'none';
+}
+
+function getDefaultDateTime() {
+  const now = new Date();
+  now.setHours(now.getHours() + 1);
+  now.setMinutes(0);
+  return now.toISOString().slice(0, 16);
+}
+
+function handleSubmit() {
+  if (props.isSubmitting) {
+    return;
+  }
+
+  const data = {
+    title: form.title,
+    description: form.description || undefined,
+    type: form.type,
+    trigger_at: new Date(form.trigger_at).toISOString(),
+    timezone: form.timezone,
+    priority: form.priority,
+    repeat_rule: form.repeat_rule || undefined
+  };
+
+  if (isEditing.value) {
+    emit('updated', { id: props.editingItem.id, ...data });
+    return;
+  }
+
+  emit('created', data);
+}
+
+onMounted(() => {
+  if (!props.editingItem) {
+    form.trigger_at = getDefaultDateTime();
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.reminder-form {
+  background: $bg-white;
+  border-radius: $radius-xl;
+  border: 1px solid $border-color;
+  box-shadow: $shadow-md;
+  padding: 1.5rem;
+}
+
+.form-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+
+  h2 {
+    font-size: $font-size-lg;
+    font-weight: $font-semibold;
+    margin: 0;
+  }
+}
+
+.close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: $bg-gray;
+  border: none;
+  cursor: pointer;
+  transition: background 0.2s;
+
+  &:hover {
+    background: $border-color;
+  }
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+
+  @media (max-width: $breakpoint-sm) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.form-label {
+  display: block;
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  color: $text-primary;
+  margin-bottom: 0.5rem;
+}
+
+.form-input {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: 1px solid $border-color;
+  border-radius: $radius-lg;
+  font-size: $font-size-base;
+  transition: border-color 0.2s;
+
+  &:focus {
+    outline: none;
+    border-color: $primary;
+  }
+}
+
+.form-textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid $border-color;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  border-radius: $radius-lg;
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-secondary {
+  background: $bg-gray;
+  color: $text-primary;
+  border: 1px solid $border-color;
+
+  &:hover {
+    background: $border-color;
+  }
+}
+
+.btn-primary {
+  background: $primary;
+  color: white;
+  border: none;
+
+  &:hover:not(:disabled) {
+    opacity: 0.9;
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.spinner {
+  width: 16px;
+  height: 16px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/components/reports/CalendarHeatmap.stories.js b/components/reports/CalendarHeatmap.stories.js
new file mode 100644
index 0000000..768327c
--- /dev/null
+++ b/components/reports/CalendarHeatmap.stories.js
@@ -0,0 +1,41 @@
+import CalendarHeatmap from './CalendarHeatmap.vue';
+
+const generateMonthBuckets = () => {
+  const buckets = [];
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = now.getMonth();
+  const days = new Date(year, month + 1, 0).getDate();
+
+  for (let d = 1; d <= days; d++) {
+    const dayStr = String(d).padStart(2, '0');
+    const mStr = String(month + 1).padStart(2, '0');
+    const date = `${year}-${mStr}-${dayStr}`;
+    const expense = d % 4 === 0 ? 0 : Math.round((d * 23.5) % 180);
+    const income = d === 1 || d === 15 ? 2400 : 0;
+    buckets.push({
+      date,
+      expense,
+      income,
+      net: income - expense
+    });
+  }
+  return buckets;
+};
+
+export default {
+  title: 'Domain/Reports/CalendarHeatmap',
+  component: CalendarHeatmap,
+  args: {
+    buckets: generateMonthBuckets(),
+    currency: 'USD'
+  }
+};
+
+export const CurrentMonth = {};
+
+export const Empty = {
+  args: {
+    buckets: []
+  }
+};
diff --git a/components/reports/CalendarHeatmap.vue b/components/reports/CalendarHeatmap.vue
new file mode 100644
index 0000000..ab103ff
--- /dev/null
+++ b/components/reports/CalendarHeatmap.vue
@@ -0,0 +1,325 @@
+<template>
+  <TPanel :padding="4" class="heatmap-card">
+    <header class="card-head">
+      <div>
+        <h2 class="card-title">{{ t('Spending calendar') }}</h2>
+        <p class="card-sub">
+          {{ t('Each tile is a day. Darker = more spent.') }}
+        </p>
+      </div>
+      <div class="legend">
+        <span class="legend-label">{{ t('Less') }}</span>
+        <span v-for="step in 5" :key="step" class="legend-cell" :style="legendStyle(step - 1)" />
+        <span class="legend-label">{{ t('More') }}</span>
+      </div>
+    </header>
+
+    <div class="months">
+      <article v-for="month in monthGroups" :key="month.label" class="month">
+        <h3 class="month-label">{{ month.label }}</h3>
+        <div class="grid">
+          <span v-for="dow in dayHeaders" :key="dow" class="dow">{{ dow }}</span>
+          <span
+            v-for="(slot, i) in month.slots"
+            :key="`${month.label}-${i}`"
+            class="cell"
+            :class="{
+              'cell--empty': slot.empty,
+              'cell--zero': !slot.empty && slot.expense === 0,
+              'cell--today': slot.isToday,
+              'cell--hover': hoveredKey === slot.date
+            }"
+            :style="!slot.empty ? cellStyle(slot.expense) : null"
+            :title="cellTitle(slot)"
+            @mouseenter="hoveredKey = slot.date"
+            @mouseleave="hoveredKey = null"
+            @click="!slot.empty && slot.expense > 0 && $emit('select-day', slot)"
+          >
+            <span v-if="!slot.empty" class="cell-num">{{ slot.dayNum }}</span>
+          </span>
+        </div>
+      </article>
+    </div>
+
+    <footer v-if="hoveredSlot && !hoveredSlot.empty" class="hover-meta">
+      <span class="hover-date">{{ formatDate(hoveredSlot.date) }}</span>
+      <span class="hover-amt">
+        <ArrowDownLeft :size="12" class="ico-in" />
+        {{ formatAmount(hoveredSlot.income) }}
+      </span>
+      <span class="hover-amt">
+        <ArrowUpRight :size="12" class="ico-out" />
+        {{ formatAmount(hoveredSlot.expense) }}
+      </span>
+      <span class="hover-amt hover-amt--net">
+        {{ t('Net') }} {{ formatAmount(hoveredSlot.net) }}
+      </span>
+    </footer>
+  </TPanel>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+import { ArrowDownLeft, ArrowUpRight } from 'lucide-vue-next';
+import { formatShortAmount } from '../../utils/currency';
+import TPanel from '../TPanel.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+const locale = i18n?.locale || ref('en');
+
+const props = defineProps({
+  buckets: { type: Array, default: () => [] }, // DailyBucket[]: { date: 'YYYY-MM-DD', income, expense, net }
+  currency: { type: String, default: 'USD' },
+  formatter: { type: Function, default: null }
+});
+
+defineEmits(['select-day']);
+
+const hoveredKey = ref(null);
+const todayISO = new Date().toISOString().slice(0, 10);
+
+const dayHeaders = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
+
+const monthGroups = computed(() => {
+  if (!props.buckets || !props.buckets.length) return [];
+  const groups = new Map();
+  props.buckets.forEach((b) => {
+    const monthKey = b.date ? b.date.slice(0, 7) : '';
+    if (!monthKey) return;
+    if (!groups.has(monthKey)) groups.set(monthKey, []);
+    groups.get(monthKey).push(b);
+  });
+
+  return Array.from(groups.entries()).map(([key, days]) => {
+    const first = new Date(key + '-01T00:00:00');
+    const startDow = (first.getDay() + 6) % 7; // Monday=0
+    const slots = [];
+    for (let i = 0; i < startDow; i += 1) {
+      slots.push({ empty: true });
+    }
+    days.forEach((d) => {
+      const dt = new Date(String(d.date).includes('T') ? d.date : `${d.date}T00:00:00`);
+      slots.push({
+        ...d,
+        empty: false,
+        dayNum: dt.getDate(),
+        isToday: d.date === todayISO
+      });
+    });
+    return {
+      label: new Intl.DateTimeFormat(locale.value || 'en', { month: 'long', year: 'numeric' }).format(first),
+      slots
+    };
+  });
+});
+
+const max = computed(() => {
+  const list = (props.buckets || []).map((b) => Number(b.expense || 0));
+  return Math.max(1, ...list);
+});
+
+const intensity = (amount) => {
+  if (!amount) return 0;
+  const pct = amount / max.value;
+  return Math.min(1, Math.log10(1 + pct * 9));
+};
+
+const cellStyle = (amount) => {
+  const i = intensity(amount);
+  return {
+    background:
+      i === 0
+        ? 'var(--color-bg-light, #f8fafc)'
+        : `color-mix(in oklab, var(--color-expense, #ef4444) ${Math.round(i * 65)}%, var(--color-bg-light, #f8fafc))`,
+    color: i > 0.55 ? 'rgba(255,255,255,0.9)' : 'var(--color-text-muted, #94a3b8)'
+  };
+};
+
+const legendStyle = (step) => {
+  const i = step / 4;
+  return {
+    background:
+      i === 0
+        ? 'var(--color-bg-light, #f8fafc)'
+        : `color-mix(in oklab, var(--color-expense, #ef4444) ${Math.round(i * 65)}%, var(--color-bg-light, #f8fafc))`
+  };
+};
+
+const hoveredSlot = computed(() => {
+  if (!hoveredKey.value) return null;
+  return props.buckets.find((b) => b.date === hoveredKey.value) || null;
+});
+
+const formatAmount = (n) => {
+  if (props.formatter) return props.formatter(n, props.currency);
+  return formatShortAmount(`${n ?? 0} ${props.currency}`);
+};
+
+const formatDate = (iso) => {
+  if (!iso) return '';
+  const d = new Date(String(iso).includes('T') ? iso : `${iso}T00:00:00`);
+  try {
+    return new Intl.DateTimeFormat(locale.value || 'en', {
+      weekday: 'short',
+      month: 'short',
+      day: 'numeric'
+    }).format(d);
+  } catch {
+    return iso;
+  }
+};
+
+const cellTitle = (slot) => {
+  if (slot.empty) return '';
+  return `${slot.date} · ${formatAmount(slot.expense)}`;
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.heatmap-card {
+  border-radius: 14px;
+  box-shadow: $elevation-1;
+  gap: $spacing-3;
+}
+
+.card-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: $spacing-3;
+}
+
+.card-title {
+  font-size: $font-size-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  margin: 0;
+}
+
+.card-sub {
+  font-size: $font-size-xs;
+  color: $text-muted;
+  margin: 2px 0 0;
+}
+
+.legend {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+
+  &-label {
+    font-size: 10px;
+    color: $text-muted;
+  }
+
+  &-cell {
+    width: 12px;
+    height: 12px;
+    border-radius: 3px;
+    border: 1px solid rgba(0, 0, 0, 0.04);
+  }
+}
+
+.months {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: $spacing-3;
+}
+
+.month {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-2;
+}
+
+.month-label {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  color: $text-secondary;
+  margin: 0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 3px;
+}
+
+.dow {
+  font-size: 10px;
+  color: $text-muted;
+  text-align: center;
+  font-weight: $font-medium;
+}
+
+.cell {
+  aspect-ratio: 1;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: $font-medium;
+  cursor: pointer;
+  transition: transform $duration-fast $easing-standard;
+  user-select: none;
+
+  &--empty {
+    background: transparent !important;
+    cursor: default;
+  }
+
+  &--today {
+    outline: 2px solid var(--color-primary, #047844);
+    outline-offset: -1px;
+  }
+
+  &--hover {
+    transform: scale(1.15);
+    z-index: 2;
+    box-shadow: $elevation-2;
+  }
+}
+
+.hover-meta {
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+  padding: $spacing-2 $spacing-3;
+  background: $bg-light;
+  border-radius: 8px;
+  font-size: $font-size-xs;
+  margin-top: $spacing-1;
+}
+
+.hover-date {
+  font-weight: $font-semibold;
+  color: $text-primary;
+}
+
+.hover-amt {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  font-variant-numeric: tabular-nums;
+  font-weight: $font-medium;
+
+  &--net {
+    margin-left: auto;
+    font-weight: $font-semibold;
+    color: $text-primary;
+  }
+}
+
+.ico-in {
+  color: var(--color-income, #10b981);
+}
+
+.ico-out {
+  color: var(--color-expense, #ef4444);
+}
+</style>
diff --git a/components/reports/CalendarTab.stories.js b/components/reports/CalendarTab.stories.js
new file mode 100644
index 0000000..7640623
--- /dev/null
+++ b/components/reports/CalendarTab.stories.js
@@ -0,0 +1,41 @@
+import CalendarTab from './CalendarTab.vue';
+
+const generateMonthBuckets = () => {
+  const buckets = [];
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = now.getMonth();
+  const days = new Date(year, month + 1, 0).getDate();
+
+  for (let d = 1; d <= days; d++) {
+    const dayStr = String(d).padStart(2, '0');
+    const mStr = String(month + 1).padStart(2, '0');
+    const date = `${year}-${mStr}-${dayStr}`;
+    const expense = d % 4 === 0 ? 0 : Math.round((d * 23.5) % 180);
+    const income = d === 1 || d === 15 ? 2400 : 0;
+    buckets.push({
+      date,
+      expense,
+      income,
+      net: income - expense
+    });
+  }
+  return buckets;
+};
+
+export default {
+  title: 'Domain/Reports/CalendarTab',
+  component: CalendarTab,
+  args: {
+    buckets: generateMonthBuckets(),
+    currency: 'USD'
+  }
+};
+
+export const CurrentMonth = {};
+
+export const Empty = {
+  args: {
+    buckets: []
+  }
+};
diff --git a/components/reports/CalendarTab.vue b/components/reports/CalendarTab.vue
new file mode 100644
index 0000000..e4c9fa9
--- /dev/null
+++ b/components/reports/CalendarTab.vue
@@ -0,0 +1,366 @@
+<template>
+  <section class="calendar-tab">
+    <header class="tab-header">
+      <div>
+        <p class="eyebrow">{{ t('Calendar') }}</p>
+        <h2 class="title">{{ t('Spending day by day') }}</h2>
+        <p class="sub">{{ t('Spot the busy days, the quiet ones, and your streaks.') }}</p>
+      </div>
+    </header>
+
+    <div class="cal-stage">
+      <div class="cal-main">
+        <CalendarHeatmap
+          :buckets="buckets"
+          :currency="currency"
+          :formatter="formatter"
+          @select-day="$emit('select-day', $event)"
+        />
+      </div>
+
+      <aside class="cal-side">
+        <article class="stat-card">
+          <header>
+            <Flame :size="12" />
+            <h3>{{ t('Top spend days') }}</h3>
+          </header>
+          <ol v-if="topDays.length" class="rank">
+            <li v-for="d in topDays" :key="d.date" class="rank-item">
+              <span class="rank-date">{{ formatLong(d.date) }}</span>
+              <span class="rank-amt">{{ formatter(d.expense, currency) }}</span>
+            </li>
+          </ol>
+          <p v-else class="empty">{{ t('No spending recorded.') }}</p>
+        </article>
+
+        <article class="stat-card">
+          <header>
+            <BarChart3 :size="12" />
+            <h3>{{ t('At a glance') }}</h3>
+          </header>
+          <dl class="stat-list">
+            <div class="stat-row">
+              <dt>{{ t('Days with spend') }}</dt>
+              <dd>{{ daysWithSpend }} / {{ buckets.length }}</dd>
+            </div>
+            <div class="stat-row">
+              <dt>{{ t('No-spend days') }}</dt>
+              <dd>{{ noSpendDays }}</dd>
+            </div>
+            <div class="stat-row">
+              <dt>{{ t('Avg daily spend') }}</dt>
+              <dd>{{ formatter(avgDaily, currency) }}</dd>
+            </div>
+            <div class="stat-row">
+              <dt>{{ t('Busiest weekday') }}</dt>
+              <dd>{{ busiestWeekday }}</dd>
+            </div>
+          </dl>
+        </article>
+
+        <article class="stat-card">
+          <header>
+            <Calendar :size="12" />
+            <h3>{{ t('By weekday') }}</h3>
+          </header>
+          <div class="weekday-grid">
+            <div v-for="(d, i) in weekBuckets" :key="i" class="weekday-cell">
+              <div class="weekday-bar-vert">
+                <span class="weekday-bar-fill" :style="{ height: `${(d / weekMax) * 100}%` }" />
+              </div>
+              <span class="weekday-name">{{ dayShortNames[i] }}</span>
+            </div>
+          </div>
+        </article>
+      </aside>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { Calendar, Flame, BarChart3 } from 'lucide-vue-next';
+import CalendarHeatmap from './CalendarHeatmap.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+const locale = i18n?.locale || { value: 'en' };
+
+const props = defineProps({
+  buckets: { type: Array, required: true },
+  currency: { type: String, default: 'USD' },
+  formatter: { type: Function, default: (n) => `${Math.round(n)}` }
+});
+
+defineEmits(['select-day']);
+
+const topDays = computed(() =>
+  [...props.buckets]
+    .filter((b) => b.expense > 0)
+    .sort((a, b) => b.expense - a.expense)
+    .slice(0, 5)
+);
+
+const daysWithSpend = computed(() => props.buckets.filter((b) => b.expense > 0).length);
+const noSpendDays = computed(() => props.buckets.filter((b) => b.expense === 0).length);
+const avgDaily = computed(() => {
+  const totalSpend = props.buckets.reduce((s, b) => s + b.expense, 0);
+  const n = props.buckets.length || 1;
+  return totalSpend / n;
+});
+
+const dayShortNames = computed(() => {
+  // Monday-first
+  const base = new Date(2024, 0, 1); // Monday
+  return Array.from({ length: 7 }, (_, i) => {
+    const d = new Date(base);
+    d.setDate(base.getDate() + i);
+    return new Intl.DateTimeFormat(locale.value, { weekday: 'short' }).format(d);
+  });
+});
+
+const weekBuckets = computed(() => {
+  const arr = [0, 0, 0, 0, 0, 0, 0];
+  props.buckets.forEach((b) => {
+    const d = new Date(b.date + 'T00:00:00');
+    const idx = (d.getDay() + 6) % 7; // shift Mon=0
+    arr[idx] += b.expense;
+  });
+  return arr;
+});
+
+const weekMax = computed(() => Math.max(1, ...weekBuckets.value));
+
+const busiestWeekday = computed(() => {
+  const idx = weekBuckets.value.indexOf(Math.max(...weekBuckets.value));
+  return dayShortNames.value[idx];
+});
+
+const formatLong = (iso) =>
+  new Intl.DateTimeFormat(locale.value, {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric'
+  }).format(new Date(iso + 'T00:00:00'));
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.calendar-tab {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-3;
+}
+
+.tab-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: $spacing-3;
+  flex-wrap: wrap;
+}
+
+.eyebrow {
+  display: none;
+}
+
+.title {
+  font-size: 1.25rem;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  margin: 0;
+  letter-spacing: -0.01em;
+}
+
+.sub {
+  font-size: $font-size-sm;
+  color: $text-muted;
+  margin: 4px 0 0;
+}
+
+.cal-stage {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: $spacing-3;
+  align-items: start;
+
+  @media (min-width: $breakpoint-lg) {
+    grid-template-columns: minmax(0, 2.4fr) minmax(280px, 1fr);
+  }
+}
+
+.cal-main {
+  min-width: 0;
+  max-height: 82vh;
+  overflow-y: auto;
+
+  @media (min-width: $breakpoint-lg) {
+    max-height: calc(100vh - 200px);
+  }
+}
+
+.cal-side {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-3;
+  max-height: 82vh;
+  overflow-y: auto;
+  padding-right: 4px;
+
+  @media (min-width: $breakpoint-lg) {
+    position: sticky;
+    top: $spacing-3;
+    max-height: calc(100vh - 200px);
+  }
+
+  scrollbar-width: thin;
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: $border-color;
+    border-radius: 3px;
+  }
+}
+
+.stat-card {
+  background: $bg-white;
+  border: 1px solid $border-color;
+  border-radius: 14px;
+  padding: $spacing-3 $spacing-4;
+  box-shadow: $elevation-1;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-2;
+
+  header {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: $text-muted;
+
+    h3 {
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      font-weight: $font-semibold;
+      color: $text-muted;
+      margin: 0;
+    }
+  }
+}
+
+.rank {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.rank-item {
+  display: flex;
+  justify-content: space-between;
+  gap: $spacing-2;
+  align-items: baseline;
+  padding: 4px 0;
+  font-size: $font-size-sm;
+  border-bottom: 1px dashed $border-color;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.rank-date {
+  color: $text-primary;
+  font-weight: $font-medium;
+}
+
+.rank-amt {
+  color: var(--color-expense);
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+}
+
+.empty {
+  font-size: $font-size-sm;
+  color: $text-muted;
+  margin: 0;
+}
+
+.stat-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin: 0;
+}
+
+.stat-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: 4px 0;
+  font-size: $font-size-sm;
+  border-bottom: 1px dashed $border-color;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  dt {
+    color: $text-muted;
+    margin: 0;
+  }
+  dd {
+    color: $text-primary;
+    font-weight: $font-semibold;
+    font-variant-numeric: tabular-nums;
+    margin: 0;
+  }
+}
+
+.weekday-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 4px;
+  align-items: end;
+  min-height: 80px;
+}
+
+.weekday-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.weekday-bar-vert {
+  position: relative;
+  width: 100%;
+  height: 56px;
+  background: rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+  overflow: hidden;
+  display: flex;
+  align-items: flex-end;
+}
+
+.weekday-bar-fill {
+  display: block;
+  width: 100%;
+  background: $text-secondary;
+  border-radius: 4px;
+  transition: height $duration-slow $easing-standard;
+  min-height: 2px;
+}
+
+.weekday-name {
+  font-size: 10px;
+  color: $text-muted;
+  font-weight: $font-semibold;
+  text-transform: uppercase;
+}
+</style>
diff --git a/components/reports/CashflowHero.stories.js b/components/reports/CashflowHero.stories.js
new file mode 100644
index 0000000..3239ec2
--- /dev/null
+++ b/components/reports/CashflowHero.stories.js
@@ -0,0 +1,60 @@
+import CashflowHero from './CashflowHero.vue';
+
+const sampleTrailing = [
+  { income: 4200, expense: 3100, net: 1100 },
+  { income: 4500, expense: 3400, net: 1100 },
+  { income: 4100, expense: 2900, net: 1200 },
+  { income: 5200, expense: 3200, net: 2000 },
+  { income: 4800, expense: 3300, net: 1500 },
+  { income: 5600, expense: 3100, net: 2500 }
+];
+
+export default {
+  title: 'Domain/Reports/CashflowHero',
+  component: CashflowHero,
+  args: {
+    totals: {
+      net: 2500,
+      prevNet: 1500,
+      netDelta: 66.7,
+      income: 5600,
+      prevIncome: 4800,
+      incomeDelta: 16.7,
+      expense: 3100,
+      prevExpense: 3300,
+      expenseDelta: -6.1,
+      savingsRate: 0.446,
+      prevSavingsRate: 0.3125,
+      savingsRateDelta: 13.4
+    },
+    trailing: sampleTrailing,
+    compareEnabled: true,
+    currency: 'USD'
+  }
+};
+
+export const SurplusPeriod = {};
+
+export const DeficitPeriod = {
+  args: {
+    totals: {
+      net: -850,
+      prevNet: 320,
+      netDelta: -365.6,
+      income: 2400,
+      prevIncome: 2900,
+      incomeDelta: -17.2,
+      expense: 3250,
+      prevExpense: 2580,
+      expenseDelta: 26.0,
+      savingsRate: 0,
+      prevSavingsRate: 0.11,
+      savingsRateDelta: -11.0
+    },
+    trailing: [
+      { income: 3100, expense: 2800, net: 300 },
+      { income: 2900, expense: 2580, net: 320 },
+      { income: 2400, expense: 3250, net: -850 }
+    ]
+  }
+};
diff --git a/components/reports/CashflowHero.vue b/components/reports/CashflowHero.vue
new file mode 100644
index 0000000..3b2ff0c
--- /dev/null
+++ b/components/reports/CashflowHero.vue
@@ -0,0 +1,404 @@
+<template>
+  <section class="hero">
+    <article class="hero-net" :class="netToneClass">
+      <header class="net-head">
+        <span class="net-label">{{ t('Net for the period') }}</span>
+        <span class="net-pill" :class="netToneClass">
+          {{ totals.net >= 0 ? t('Surplus') : t('Deficit') }}
+        </span>
+      </header>
+      <div class="net-value-row">
+        <p class="net-value">{{ format(totals.net) }}</p>
+        <span
+          v-if="compareEnabled"
+          class="delta delta--lg"
+          :class="deltaClass(totals.netDelta, false)"
+        >
+          <component :is="deltaIcon(totals.netDelta)" :size="14" />
+          {{ totals.netDelta > 0 ? '+' : '' }}{{ totals.netDelta }}%
+        </span>
+      </div>
+      <p v-if="compareEnabled" class="whisper-line">
+        {{ t('vs') }} {{ format(totals.prevNet) }}
+        <span class="whisper-meta">{{ t('previous period') }}</span>
+      </p>
+      <div class="net-spark">
+        <SparkLine :values="netTrend" color="var(--color-primary)" :height="32" />
+      </div>
+    </article>
+
+    <div class="sats">
+      <article class="sat">
+        <header class="sat-head">
+          <ArrowDownLeft :size="12" class="sat-ico sat-ico--in" />
+          <span class="sat-label">{{ t('Income') }}</span>
+        </header>
+        <div class="sat-value-row">
+          <p class="sat-value sat-value--in">{{ format(totals.income) }}</p>
+          <span v-if="compareEnabled" class="delta" :class="deltaClass(totals.incomeDelta, false)">
+            {{ totals.incomeDelta > 0 ? '+' : '' }}{{ totals.incomeDelta }}%
+          </span>
+        </div>
+        <p v-if="compareEnabled" class="whisper-line">
+          {{ t('vs') }} {{ format(totals.prevIncome) }}
+        </p>
+        <div class="sat-spark">
+          <SparkLine :values="incomeTrend" color="var(--color-income, #10b981)" :height="22" />
+        </div>
+      </article>
+      <article class="sat">
+        <header class="sat-head">
+          <ArrowUpRight :size="12" class="sat-ico sat-ico--out" />
+          <span class="sat-label">{{ t('Expense') }}</span>
+        </header>
+        <div class="sat-value-row">
+          <p class="sat-value sat-value--out">{{ format(totals.expense) }}</p>
+          <span v-if="compareEnabled" class="delta" :class="deltaClass(totals.expenseDelta, true)">
+            {{ totals.expenseDelta > 0 ? '+' : '' }}{{ totals.expenseDelta }}%
+          </span>
+        </div>
+        <p v-if="compareEnabled" class="whisper-line">
+          {{ t('vs') }} {{ format(totals.prevExpense) }}
+        </p>
+        <div class="sat-spark">
+          <SparkLine :values="expenseTrend" color="var(--color-expense, #ef4444)" :height="22" />
+        </div>
+      </article>
+      <article class="sat">
+        <header class="sat-head">
+          <PiggyBank :size="12" class="sat-ico" />
+          <span class="sat-label">{{ t('Savings rate') }}</span>
+        </header>
+        <div class="sat-value-row">
+          <p class="sat-value">{{ ((totals.savingsRate || 0) * 100).toFixed(0) }}%</p>
+          <span
+            v-if="compareEnabled"
+            class="delta"
+            :class="deltaClass(totals.savingsRateDelta, false)"
+          >
+            {{ totals.savingsRateDelta > 0 ? '+' : '' }}{{ totals.savingsRateDelta }} pts
+          </span>
+        </div>
+        <p v-if="compareEnabled" class="whisper-line">
+          {{ t('vs') }} {{ ((totals.prevSavingsRate || 0) * 100).toFixed(0) }}%
+        </p>
+        <div class="sat-spark">
+          <SparkLine :values="rateTrend" color="var(--color-text-secondary, #6b7280)" :height="22" />
+        </div>
+      </article>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import {
+  PiggyBank,
+  ArrowUpRight,
+  ArrowDownLeft,
+  ArrowDownRight,
+  Minus
+} from 'lucide-vue-next';
+import SparkLine from './SparkLine.vue';
+import { formatShortAmount } from '../../utils/currency';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  totals: {
+    type: Object,
+    required: true
+  },
+  trailing: {
+    type: Array,
+    default: () => []
+  },
+  compareEnabled: {
+    type: Boolean,
+    default: true
+  },
+  currency: {
+    type: String,
+    default: 'USD'
+  },
+  formatter: {
+    type: Function,
+    default: null
+  }
+});
+
+const format = (n) => {
+  if (props.formatter) return props.formatter(n, props.currency);
+  return formatShortAmount(`${n ?? 0} ${props.currency}`);
+};
+
+const incomeTrend = computed(() => props.trailing.map((m) => m.income ?? 0));
+const expenseTrend = computed(() => props.trailing.map((m) => m.expense ?? 0));
+const netTrend = computed(() => props.trailing.map((m) => m.net ?? 0));
+const rateTrend = computed(() =>
+  props.trailing.map((m) => {
+    const inc = m.income ?? 0;
+    const exp = m.expense ?? 0;
+    return inc > 0 ? ((inc - exp) / inc) * 100 : 0;
+  })
+);
+
+const netToneClass = computed(() => (props.totals?.net >= 0 ? 'is-positive' : 'is-negative'));
+
+const deltaClass = (delta, inverted) => {
+  if (!delta) return 'delta--flat';
+  const goodWhenUp = !inverted;
+  const isGood = goodWhenUp ? delta > 0 : delta < 0;
+  return isGood ? 'delta--good' : 'delta--bad';
+};
+
+const deltaIcon = (delta) => {
+  if (!delta) return Minus;
+  return delta > 0 ? ArrowUpRight : ArrowDownRight;
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.hero {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: $spacing-3;
+  background: $bg-white;
+  border: 1px solid $border-color;
+  border-radius: 14px;
+  box-shadow: $elevation-1;
+  padding: $spacing-4;
+  width: 100%;
+
+  @media (min-width: $breakpoint-md) {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
+    gap: $spacing-5;
+    align-items: stretch;
+  }
+}
+
+.hero-net {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-right: 0;
+  position: relative;
+
+  @media (min-width: $breakpoint-md) {
+    padding-right: $spacing-5;
+    border-right: 1px solid $border-color;
+  }
+}
+
+.net-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-2;
+}
+
+.net-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: $font-semibold;
+  color: $text-muted;
+}
+
+.net-pill {
+  font-size: 10px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 2px 8px;
+  border-radius: 999px;
+
+  &.is-positive {
+    background: var(--color-income-soft, rgba(16, 185, 129, 0.15));
+    color: var(--color-income, #10b981);
+  }
+  &.is-negative {
+    background: var(--color-expense-soft, rgba(239, 68, 68, 0.15));
+    color: var(--color-expense, #ef4444);
+  }
+}
+
+.net-value-row {
+  display: flex;
+  align-items: baseline;
+  gap: $spacing-2;
+  flex-wrap: wrap;
+  margin: 4px 0 0;
+}
+
+.net-value {
+  font-size: 2rem;
+  font-weight: $font-semibold;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+  margin: 0;
+  line-height: 1.1;
+  color: $text-primary;
+
+  .hero-net.is-positive & {
+    color: var(--color-income, #10b981);
+  }
+  .hero-net.is-negative & {
+    color: var(--color-expense, #ef4444);
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 1.6rem;
+  }
+}
+
+.sat-value-row {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin: 2px 0 0;
+}
+
+.whisper-line {
+  font-size: 11px;
+  color: $text-muted;
+  margin: 2px 0 0;
+  font-variant-numeric: tabular-nums;
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+}
+
+.whisper-meta {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.delta {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+  font-size: 12px;
+  line-height: 1;
+  white-space: nowrap;
+
+  &--lg {
+    font-size: 13px;
+    padding: 4px 10px;
+  }
+
+  &--good {
+    background: var(--color-income-soft, rgba(16, 185, 129, 0.15));
+    color: var(--color-income, #10b981);
+  }
+  &--bad {
+    background: var(--color-expense-soft, rgba(239, 68, 68, 0.15));
+    color: var(--color-expense, #ef4444);
+  }
+  &--flat {
+    background: $bg-light;
+    color: $text-muted;
+  }
+}
+
+.net-spark {
+  margin-top: auto;
+  padding-top: $spacing-3;
+  height: 32px;
+}
+
+.sats {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: $spacing-3;
+  align-items: stretch;
+
+  @media (max-width: $breakpoint-sm) {
+    grid-template-columns: 1fr;
+    gap: $spacing-2;
+  }
+}
+
+.sat {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 0;
+  border-left: 1px solid $border-color;
+  padding-left: $spacing-3;
+
+  &:first-child {
+    border-left: none;
+    padding-left: 0;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    border-left: none;
+    border-top: 1px solid $border-color;
+    padding-left: 0;
+    padding-top: $spacing-2;
+
+    &:first-child {
+      border-top: none;
+      padding-top: 0;
+    }
+  }
+}
+
+.sat-head {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: $text-muted;
+}
+
+.sat-ico {
+  color: $text-muted;
+
+  &--in {
+    color: var(--color-income, #10b981);
+  }
+  &--out {
+    color: var(--color-expense, #ef4444);
+  }
+}
+
+.sat-label {
+  font-size: 11px;
+  font-weight: $font-semibold;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.sat-value {
+  font-size: 1.25rem;
+  font-weight: $font-semibold;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.01em;
+  margin: 2px 0 0;
+  line-height: 1.1;
+  color: $text-primary;
+
+  &--in {
+    color: var(--color-income, #10b981);
+  }
+  &--out {
+    color: var(--color-expense, #ef4444);
+  }
+}
+
+.sat-spark {
+  margin-top: auto;
+  padding-top: 4px;
+  height: 22px;
+}
+</style>
diff --git a/components/reports/CategoriesTab.stories.js b/components/reports/CategoriesTab.stories.js
new file mode 100644
index 0000000..632a774
--- /dev/null
+++ b/components/reports/CategoriesTab.stories.js
@@ -0,0 +1,103 @@
+import CategoriesTab from './CategoriesTab.vue';
+
+const expenseCategories = [
+  {
+    name: 'Housing & Rent',
+    amount: 1450,
+    color: '#8b5cf6',
+    count: 2,
+    percentage: 34.5,
+    prevAmount: 1500,
+    delta: -3.3,
+    trend: [1500, 1480, 1460, 1450, 1460, 1450]
+  },
+  {
+    name: 'Food & Dining',
+    amount: 820,
+    color: '#10b981',
+    count: 24,
+    percentage: 19.5,
+    prevAmount: 900,
+    delta: -8.9,
+    trend: [950, 890, 820, 840, 790, 820]
+  },
+  {
+    name: 'Transport',
+    amount: 460,
+    color: '#f59e0b',
+    count: 11,
+    percentage: 10.9,
+    prevAmount: 430,
+    delta: 7.0,
+    trend: [400, 410, 430, 450, 440, 460]
+  },
+  {
+    name: 'Utilities',
+    amount: 380,
+    color: '#3b82f6',
+    count: 4,
+    percentage: 9.0,
+    prevAmount: 390,
+    delta: -2.6,
+    trend: [400, 390, 385, 380, 375, 380]
+  }
+];
+
+const incomeCategories = [
+  {
+    name: 'Salary',
+    amount: 4800,
+    color: '#10b981',
+    count: 2,
+    percentage: 78.0,
+    prevAmount: 4700,
+    delta: 2.1,
+    trend: [4600, 4700, 4700, 4800, 4800, 4800]
+  },
+  {
+    name: 'Freelance',
+    amount: 1200,
+    color: '#3b82f6',
+    count: 5,
+    percentage: 19.5,
+    prevAmount: 900,
+    delta: 33.3,
+    trend: [700, 800, 900, 1000, 1100, 1200]
+  },
+  {
+    name: 'Interest',
+    amount: 150,
+    color: '#f59e0b',
+    count: 1,
+    percentage: 2.4,
+    prevAmount: 140,
+    delta: 7.1,
+    trend: [120, 130, 135, 140, 145, 150]
+  }
+];
+
+export default {
+  title: 'Domain/Reports/CategoriesTab',
+  component: CategoriesTab,
+  args: {
+    incomeCategories,
+    expenseCategories,
+    compareEnabled: true,
+    currency: 'USD'
+  }
+};
+
+export const WithComparison = {};
+
+export const WithoutComparison = {
+  args: {
+    compareEnabled: false
+  }
+};
+
+export const Empty = {
+  args: {
+    incomeCategories: [],
+    expenseCategories: []
+  }
+};
diff --git a/components/reports/CategoriesTab.vue b/components/reports/CategoriesTab.vue
new file mode 100644
index 0000000..1c3f04b
--- /dev/null
+++ b/components/reports/CategoriesTab.vue
@@ -0,0 +1,129 @@
+<template>
+  <section class="categories-tab">
+    <header class="tab-header">
+      <div>
+        <p class="eyebrow">{{ t('Categories') }}</p>
+        <h2 class="title">{{ t('Where things come from and go to') }}</h2>
+        <p class="sub">
+          {{ t('Income on one side, expense on the other. Click any row to drill in.') }}
+        </p>
+      </div>
+      <TInput v-model="query" class="search-input" :placeholder="t('Filter by name')">
+        <template #prefix>
+          <Search :size="14" />
+        </template>
+      </TInput>
+    </header>
+
+    <div class="grid">
+      <div class="col col--income">
+        <CategoryRanking
+          :title="t('Income categories')"
+          :subtitle="t('{n} categories with income in this period', { n: filteredIncome.length })"
+          :buckets="filteredIncome"
+          :show-delta="compareEnabled"
+          :currency="currency"
+          :formatter="formatter"
+          @drill="(b) => $emit('drill', { ...b, kind: 'income' })"
+        />
+      </div>
+      <div class="col col--expense">
+        <CategoryRanking
+          :title="t('Expense categories')"
+          :subtitle="
+            t('{n} categories with spending in this period', { n: filteredExpense.length })
+          "
+          :buckets="filteredExpense"
+          :show-delta="compareEnabled"
+          :currency="currency"
+          :formatter="formatter"
+          @drill="(b) => $emit('drill', { ...b, kind: 'expense' })"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { Search } from 'lucide-vue-next';
+import CategoryRanking from './CategoryRanking.vue';
+import TInput from '../TInput.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  incomeCategories: { type: Array, required: true },
+  expenseCategories: { type: Array, required: true },
+  compareEnabled: { type: Boolean, default: true },
+  currency: { type: String, default: 'USD' },
+  formatter: { type: Function, default: (n) => `${Math.round(n)}` }
+});
+
+defineEmits(['drill']);
+
+const query = ref('');
+
+const matches = (name) =>
+  !query.value.trim() || name.toLowerCase().includes(query.value.trim().toLowerCase());
+
+const filteredIncome = computed(() => props.incomeCategories.filter((b) => matches(b.name)));
+const filteredExpense = computed(() => props.expenseCategories.filter((b) => matches(b.name)));
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.categories-tab {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-4;
+}
+
+.tab-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: $spacing-3;
+  flex-wrap: wrap;
+}
+
+.eyebrow {
+  display: none;
+}
+
+.title {
+  font-size: 1.25rem;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  margin: 0;
+  letter-spacing: -0.01em;
+}
+
+.sub {
+  font-size: $font-size-sm;
+  color: $text-muted;
+  margin: 4px 0 0;
+}
+
+.search-input {
+  width: 220px;
+  height: 36px;
+  min-height: 36px;
+  border-radius: 999px;
+  border-color: $border-color;
+  background: $bg-white;
+  font-size: $font-size-sm;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: $spacing-4;
+
+  @media (min-width: $breakpoint-xl) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+</style>
diff --git a/components/reports/CategoryDrillModal.stories.js b/components/reports/CategoryDrillModal.stories.js
new file mode 100644
index 0000000..0d7d61d
--- /dev/null
+++ b/components/reports/CategoryDrillModal.stories.js
@@ -0,0 +1,75 @@
+import CategoryDrillModal from './CategoryDrillModal.vue';
+
+const sampleBucket = {
+  name: 'Food & Dining',
+  color: '#10b981',
+  count: 24,
+  amount: 820.0,
+  delta: -12.4,
+  kind: 'expense',
+  trend: [950, 890, 820, 840, 790, 820]
+};
+
+const sampleTransactions = [
+  {
+    id: 't1',
+    party: 'Whole Foods Market',
+    category: 'Food & Dining',
+    type: 'EXPENSE',
+    amount: 142.5,
+    date: '2024-03-24'
+  },
+  {
+    id: 't2',
+    party: 'City Bistro',
+    category: 'Food & Dining',
+    type: 'EXPENSE',
+    amount: 68.0,
+    date: '2024-03-20'
+  },
+  {
+    id: 't3',
+    party: 'Corner Cafe',
+    category: 'Food & Dining',
+    type: 'EXPENSE',
+    amount: 12.5,
+    date: '2024-03-18'
+  }
+];
+
+export default {
+  title: 'Domain/Reports/CategoryDrillModal',
+  component: CategoryDrillModal,
+  args: {
+    open: true,
+    bucket: sampleBucket,
+    transactions: sampleTransactions,
+    trailingMonths: [
+      { month: '2023-10' },
+      { month: '2023-11' },
+      { month: '2023-12' },
+      { month: '2024-01' },
+      { month: '2024-02' },
+      { month: '2024-03' }
+    ],
+    currency: 'USD'
+  }
+};
+
+export const OpenModal = {};
+
+export const EmptyCategory = {
+  args: {
+    open: true,
+    bucket: {
+      name: 'Uncategorized',
+      color: '#6b7280',
+      count: 0,
+      amount: 0,
+      delta: 0,
+      kind: 'expense',
+      trend: [0, 0, 0, 0, 0, 0]
+    },
+    transactions: []
+  }
+};
diff --git a/components/reports/CategoryDrillModal.vue b/components/reports/CategoryDrillModal.vue
new file mode 100644
index 0000000..11091d6
--- /dev/null
+++ b/components/reports/CategoryDrillModal.vue
@@ -0,0 +1,511 @@
+<template>
+  <Transition name="modal">
+    <div v-if="open" class="modal-root" @click.self="$emit('close')">
+      <div class="modal-panel" role="dialog" aria-modal="true">
+        <header class="modal-head">
+          <div class="head-id">
+            <span class="head-swatch" :style="{ background: bucket?.color || '#3b82f6' }" />
+            <div>
+              <h2 class="head-title">{{ bucket?.name || t('Category') }}</h2>
+              <p class="head-sub">
+                {{ t('Period overview · {n} transactions', { n: bucket?.count ?? 0 }) }}
+              </p>
+            </div>
+          </div>
+          <TButton
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="close-btn"
+            :aria-label="t('Close')"
+            @click="$emit('close')"
+          >
+            <X :size="18" />
+          </TButton>
+        </header>
+
+        <section class="kpi-row">
+          <div class="kpi">
+            <span class="kpi-label">{{ t('Total') }}</span>
+            <span class="kpi-value">{{ formatAmount(bucket?.amount) }}</span>
+          </div>
+          <div class="kpi">
+            <span class="kpi-label">{{ t('Avg / month') }}</span>
+            <span class="kpi-value">{{ formatAmount(avgPerMonth) }}</span>
+          </div>
+          <div class="kpi">
+            <span class="kpi-label">{{ t('Peak month') }}</span>
+            <span class="kpi-value">{{ peakMonthLabel || '—' }}</span>
+          </div>
+          <div class="kpi">
+            <span class="kpi-label">{{ t('vs prior period') }}</span>
+            <span
+              class="kpi-value"
+              :class="bucket?.delta < 0 ? 'is-good' : bucket?.delta > 0 ? 'is-bad' : ''"
+            >
+              {{ bucket?.delta > 0 ? '+' : '' }}{{ bucket?.delta ?? 0 }}%
+            </span>
+          </div>
+        </section>
+
+        <section v-if="bucket?.trend && bucket.trend.length" class="trend-block">
+          <h3 class="block-title">{{ t('Trend (last 6 months)') }}</h3>
+          <div class="trend-bars">
+            <div v-for="(v, i) in bucket.trend" :key="i" class="trend-bar-wrap">
+              <span
+                class="trend-bar"
+                :style="{
+                  height: `${Math.max(2, (v / trendMax) * 100)}%`,
+                  background: bucket?.color || '#3b82f6'
+                }"
+              />
+              <span class="trend-bar-label">{{ monthLabels[i] || '' }}</span>
+            </div>
+          </div>
+        </section>
+
+        <section class="block">
+          <h3 class="block-title">
+            {{ t('Top {kind}', { kind: bucket?.kind === 'income' ? t('sources') : t('payees') }) }}
+          </h3>
+          <ul v-if="topParties.length" class="party-list">
+            <li v-for="p in topParties" :key="p.name" class="party-row">
+              <span class="party-name">{{ p.name }}</span>
+              <span class="party-bar-wrap">
+                <span
+                  class="party-bar"
+                  :style="{
+                    width: `${(p.amount / topParties[0].amount) * 100}%`,
+                    background: bucket?.color || '#3b82f6'
+                  }"
+                />
+              </span>
+              <span class="party-amt">{{ formatAmount(p.amount) }}</span>
+            </li>
+          </ul>
+          <p v-else class="empty">{{ t('No transactions match.') }}</p>
+        </section>
+
+        <section class="block">
+          <h3 class="block-title">{{ t('Transactions') }}</h3>
+          <div v-if="visibleTxs.length" class="tx-list">
+            <article v-for="tx in visibleTxs" :key="tx.id" class="tx">
+              <div class="tx-main">
+                <span class="tx-party">{{ tx.party || tx.description || t('Unknown') }}</span>
+                <span class="tx-date">{{ formatDate(tx.date) }}</span>
+              </div>
+              <span class="tx-amount" :class="isIncome(tx) ? 'is-in' : 'is-out'">
+                {{ isIncome(tx) ? '+' : '-' }}{{ formatAmount(tx.amount) }}
+              </span>
+            </article>
+          </div>
+          <p v-else class="empty">{{ t('No transactions match.') }}</p>
+          <TButton
+            v-if="filteredTxs.length > visibleCount"
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="more-btn"
+            @click="visibleCount += 10"
+          >
+            {{ t('Show {n} more', { n: Math.min(10, filteredTxs.length - visibleCount) }) }}
+          </TButton>
+        </section>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue';
+import { X } from 'lucide-vue-next';
+import { formatShortAmount } from '../../utils/currency';
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k, params) => {
+  if (params) {
+    return Object.entries(params).reduce(
+      (str, [key, val]) => str.replace(new RegExp('\\{' + key + '\\}', 'g'), val),
+      k
+    );
+  }
+  return k;
+});
+const locale = i18n?.locale || ref('en');
+
+const props = defineProps({
+  open: { type: Boolean, default: false },
+  bucket: { type: Object, default: null },
+  transactions: { type: Array, default: () => [] },
+  range: { type: Object, default: null }, // { start: Date, end: Date }
+  trailingMonths: { type: Array, default: () => [] }, // [{ month: 'YYYY-MM' }]
+  currency: { type: String, default: 'USD' },
+  formatter: { type: Function, default: null }
+});
+
+defineEmits(['close']);
+
+const visibleCount = ref(10);
+
+watch(
+  () => props.open,
+  (o) => {
+    if (o) visibleCount.value = 10;
+  }
+);
+
+const isIncome = (tx) => {
+  const type = String(tx?.type || '').toUpperCase();
+  return type === 'INCOME' || type === 'CREDIT';
+};
+
+const formatAmount = (val) => {
+  if (props.formatter) return props.formatter(val, props.currency);
+  return formatShortAmount(`${val ?? 0} ${props.currency}`);
+};
+
+const formatDate = (iso) => {
+  if (!iso) return '';
+  const d = new Date(String(iso).includes('T') ? iso : `${iso}T00:00:00`);
+  try {
+    return new Intl.DateTimeFormat(locale.value || 'en', {
+      month: 'short',
+      day: 'numeric'
+    }).format(d);
+  } catch {
+    return iso;
+  }
+};
+
+const filteredTxs = computed(() => {
+  if (!props.bucket) return [];
+  const wantedType = props.bucket.kind === 'income' ? 'INCOME' : 'EXPENSE';
+  return (props.transactions || [])
+    .filter((tx) => {
+      if (tx.isTransfer) return false;
+      const type = String(tx.type || '').toUpperCase();
+      if (type !== wantedType) return false;
+      if (props.bucket.name && (tx.category || 'Uncategorized') !== props.bucket.name) return false;
+      if (props.range?.start && props.range?.end) {
+        const d = new Date(String(tx.date).includes('T') ? tx.date : `${tx.date}T00:00:00`);
+        return d >= props.range.start && d <= props.range.end;
+      }
+      return true;
+    })
+    .sort((a, b) => (a.date < b.date ? 1 : -1));
+});
+
+const visibleTxs = computed(() => filteredTxs.value.slice(0, visibleCount.value));
+
+const trendMax = computed(() => {
+  const trend = props.bucket?.trend || [];
+  return Math.max(1, ...trend);
+});
+
+const avgPerMonth = computed(() => {
+  const trend = props.bucket?.trend || [];
+  if (!trend.length) return props.bucket?.amount || 0;
+  const sum = trend.reduce((acc, v) => acc + Number(v || 0), 0);
+  return sum / trend.length;
+});
+
+const monthLabels = computed(() => {
+  return (props.trailingMonths || []).map((m) => {
+    if (!m?.month) return '';
+    const parts = m.month.split('-');
+    return parts[1] || m.month;
+  });
+});
+
+const peakMonthLabel = computed(() => {
+  const trend = props.bucket?.trend || [];
+  if (!trend.length) return '';
+  let maxIdx = 0;
+  let maxVal = -Infinity;
+  trend.forEach((v, i) => {
+    if (v > maxVal) {
+      maxVal = v;
+      maxIdx = i;
+    }
+  });
+  return monthLabels.value[maxIdx] || '';
+});
+
+const topParties = computed(() => {
+  const map = new Map();
+  filteredTxs.value.forEach((tx) => {
+    const name = tx.party || tx.description || 'Unknown';
+    map.set(name, (map.get(name) || 0) + Number(tx.amount || 0));
+  });
+  return Array.from(map.entries())
+    .map(([name, amount]) => ({ name, amount }))
+    .sort((a, b) => b.amount - a.amount)
+    .slice(0, 5);
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.modal-root {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.6);
+  backdrop-filter: blur(4px);
+  display: grid;
+  place-items: center;
+  z-index: $z-index-modal;
+  padding: $spacing-4;
+}
+
+.modal-panel {
+  background: $bg-white;
+  border-radius: 16px;
+  width: 100%;
+  max-width: 580px;
+  max-height: 85vh;
+  overflow-y: auto;
+  box-shadow: $elevation-3;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-4;
+  padding: $spacing-5;
+}
+
+.modal-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.head-id {
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+}
+
+.head-swatch {
+  width: 12px;
+  height: 38px;
+  border-radius: 6px;
+}
+
+.head-title {
+  margin: 0;
+  font-size: $font-size-xl;
+  font-weight: $font-bold;
+  color: $text-primary;
+}
+
+.head-sub {
+  margin: 2px 0 0;
+  font-size: $font-size-xs;
+  color: $text-muted;
+}
+
+.close-btn {
+  border: none;
+  background: transparent;
+  color: $text-muted;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 8px;
+  display: inline-flex;
+  transition: all $duration-fast $easing-standard;
+
+  &:hover {
+    background: $bg-light;
+    color: $text-primary;
+  }
+}
+
+.kpi-row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: $spacing-2;
+  background: $bg-light;
+  padding: $spacing-3;
+  border-radius: 12px;
+
+  @media (max-width: $breakpoint-sm) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.kpi {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.kpi-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: $text-muted;
+  font-weight: $font-semibold;
+}
+
+.kpi-value {
+  font-size: $font-size-sm;
+  font-weight: $font-bold;
+  color: $text-primary;
+  font-variant-numeric: tabular-nums;
+
+  &.is-good {
+    color: var(--color-income, #10b981);
+  }
+  &.is-bad {
+    color: var(--color-expense, #ef4444);
+  }
+}
+
+.block-title {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-weight: $font-semibold;
+  color: $text-muted;
+  margin: 0 0 $spacing-2;
+}
+
+.trend-bars {
+  display: flex;
+  align-items: flex-end;
+  gap: $spacing-3;
+  height: 80px;
+  padding-top: $spacing-2;
+}
+
+.trend-bar-wrap {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  height: 100%;
+  justify-content: flex-end;
+}
+
+.trend-bar {
+  width: 100%;
+  border-radius: 4px 4px 0 0;
+  transition: height $duration-base $easing-standard;
+}
+
+.trend-bar-label {
+  font-size: 10px;
+  color: $text-muted;
+}
+
+.party-list,
+.tx-list {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-2;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.party-row {
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+  font-size: $font-size-xs;
+}
+
+.party-name {
+  width: 110px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: $text-secondary;
+}
+
+.party-bar-wrap {
+  flex: 1;
+  height: 6px;
+  background: $bg-light;
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.party-bar {
+  display: block;
+  height: 100%;
+  border-radius: 3px;
+}
+
+.party-amt {
+  font-weight: $font-semibold;
+  color: $text-primary;
+  font-variant-numeric: tabular-nums;
+  width: 70px;
+  text-align: right;
+}
+
+.tx {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: $spacing-2;
+  border-radius: 8px;
+  background: $bg-light;
+}
+
+.tx-main {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.tx-party {
+  font-size: $font-size-xs;
+  font-weight: $font-semibold;
+  color: $text-primary;
+}
+
+.tx-date {
+  font-size: 10px;
+  color: $text-muted;
+}
+
+.tx-amount {
+  font-size: $font-size-xs;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+
+  &.is-in {
+    color: var(--color-income, #10b981);
+  }
+  &.is-out {
+    color: var(--color-expense, #ef4444);
+  }
+}
+
+.more-btn {
+  margin-top: $spacing-2;
+  width: 100%;
+  padding: 6px;
+  border: 1px dashed $border-color;
+  border-radius: 8px;
+  background: transparent;
+  color: $text-secondary;
+  font-size: $font-size-xs;
+  font-weight: $font-medium;
+  cursor: pointer;
+
+  &:hover {
+    background: $bg-light;
+    border-color: $text-secondary;
+  }
+}
+
+.empty {
+  font-size: $font-size-xs;
+  color: $text-muted;
+  margin: $spacing-2 0;
+}
+</style>
diff --git a/components/reports/CategoryRanking.stories.js b/components/reports/CategoryRanking.stories.js
new file mode 100644
index 0000000..60aba39
--- /dev/null
+++ b/components/reports/CategoryRanking.stories.js
@@ -0,0 +1,64 @@
+import CategoryRanking from './CategoryRanking.vue';
+
+const sampleBuckets = [
+  {
+    name: 'Housing & Rent',
+    amount: 1450.0,
+    prevAmount: 1450.0,
+    delta: 0,
+    percentage: 42.6,
+    count: 2,
+    color: '#3b82f6',
+    trend: [1450, 1450, 1450, 1450, 1450]
+  },
+  {
+    name: 'Food & Groceries',
+    amount: 720.0,
+    prevAmount: 850.0,
+    delta: -15.3,
+    percentage: 21.2,
+    count: 18,
+    color: '#10b981',
+    trend: [900, 850, 800, 780, 720]
+  },
+  {
+    name: 'Utilities & Bills',
+    amount: 380.0,
+    prevAmount: 310.0,
+    delta: 22.6,
+    percentage: 11.2,
+    count: 5,
+    color: '#f59e0b',
+    trend: [280, 300, 310, 340, 380]
+  },
+  {
+    name: 'Entertainment',
+    amount: 240.0,
+    prevAmount: 320.0,
+    delta: -25.0,
+    percentage: 7.1,
+    count: 8,
+    color: '#8b5cf6',
+    trend: [350, 320, 290, 260, 240]
+  }
+];
+
+export default {
+  title: 'Domain/Reports/CategoryRanking',
+  component: CategoryRanking,
+  args: {
+    title: 'Top Spending Categories',
+    subtitle: 'Ranked by total net outflow this period',
+    buckets: sampleBuckets,
+    currency: 'USD',
+    showDelta: true
+  }
+};
+
+export const Default = {};
+
+export const EmptyState = {
+  args: {
+    buckets: []
+  }
+};
diff --git a/components/reports/CategoryRanking.vue b/components/reports/CategoryRanking.vue
new file mode 100644
index 0000000..4a5f73c
--- /dev/null
+++ b/components/reports/CategoryRanking.vue
@@ -0,0 +1,333 @@
+<template>
+  <section class="card">
+    <header class="card-head">
+      <div>
+        <h2 class="card-title">{{ title }}</h2>
+        <p v-if="subtitle" class="card-sub">{{ subtitle }}</p>
+      </div>
+      <div v-if="$slots.actions" class="card-actions">
+        <slot name="actions" />
+      </div>
+    </header>
+
+    <div v-if="!buckets || buckets.length === 0" class="empty">
+      <Inbox :size="32" />
+      <p>{{ t('No spending in this period') }}</p>
+    </div>
+
+    <ol v-else class="rank-list">
+      <li
+        v-for="(b, i) in buckets"
+        :key="b.name"
+        class="row"
+        :class="{ 'row--top': i === 0 }"
+        @click="$emit('drill', b)"
+      >
+        <span class="rank-no">{{ i + 1 }}</span>
+        <span class="swatch" :style="{ background: b.color || '#3b82f6' }" />
+        <div class="row-main">
+          <div class="row-head">
+            <span class="row-name">{{ b.name }}</span>
+            <span class="row-amount">{{ format(b.amount) }}</span>
+          </div>
+          <div class="row-bar">
+            <span
+              class="row-fill"
+              :style="{
+                width: `${Math.min(100, (b.amount / maxAmount) * 100)}%`,
+                background: b.color || '#3b82f6'
+              }"
+            />
+          </div>
+          <div class="row-meta">
+            <span class="meta-chip">{{ (b.percentage ?? 0).toFixed(1) }}%</span>
+            <span v-if="b.count !== undefined" class="meta-chip meta-chip--ghost">
+              {{ t('{n} tx', { n: b.count }) }}
+            </span>
+            <span
+              v-if="showDelta && b.prevAmount > 0"
+              class="meta-delta"
+              :class="b.delta < 0 ? 'is-good' : b.delta > 0 ? 'is-bad' : 'is-flat'"
+            >
+              <component
+                :is="b.delta > 0 ? ArrowUpRight : b.delta < 0 ? ArrowDownRight : Minus"
+                :size="12"
+              />
+              <span>{{ b.delta > 0 ? '+' : '' }}{{ b.delta }}%</span>
+            </span>
+          </div>
+        </div>
+        <div class="row-spark">
+          <SparkLine
+            v-if="b.trend && b.trend.length"
+            :values="b.trend"
+            :color="b.color || '#3b82f6'"
+            :height="32"
+          />
+        </div>
+        <ChevronRight class="row-chevron" :size="16" />
+      </li>
+    </ol>
+  </section>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { ArrowUpRight, ArrowDownRight, Minus, ChevronRight, Inbox } from 'lucide-vue-next';
+import SparkLine from './SparkLine.vue';
+import { formatShortAmount } from '../../utils/currency';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k, params) => {
+  if (params?.n !== undefined) return `${params.n} tx`;
+  return k;
+});
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  subtitle: {
+    type: String,
+    default: ''
+  },
+  buckets: {
+    type: Array,
+    default: () => []
+  },
+  showDelta: {
+    type: Boolean,
+    default: true
+  },
+  currency: {
+    type: String,
+    default: 'USD'
+  },
+  formatter: {
+    type: Function,
+    default: null
+  }
+});
+
+defineEmits(['drill']);
+
+const maxAmount = computed(() => {
+  const amounts = (props.buckets || []).map((b) => Number(b.amount || 0));
+  return Math.max(1, ...amounts);
+});
+
+const format = (amt) => {
+  if (props.formatter) return props.formatter(amt, props.currency);
+  return formatShortAmount(`${amt ?? 0} ${props.currency}`);
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.card {
+  background: $bg-white;
+  border: 1px solid $border-color;
+  border-radius: 14px;
+  box-shadow: $elevation-1;
+  padding: $spacing-4;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-3;
+  width: 100%;
+}
+
+.card-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: $spacing-3;
+  flex-wrap: wrap;
+}
+
+.card-title {
+  font-size: $font-size-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  margin: 0;
+}
+
+.card-sub {
+  font-size: $font-size-xs;
+  color: $text-muted;
+  margin: 2px 0 0;
+}
+
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: $spacing-2;
+  padding: $spacing-8 $spacing-4;
+  color: $text-muted;
+
+  p {
+    margin: 0;
+    font-size: $font-size-sm;
+  }
+}
+
+.rank-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.row {
+  display: grid;
+  grid-template-columns: 24px 12px 1fr 90px 16px;
+  align-items: center;
+  gap: $spacing-3;
+  padding: $spacing-3;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all $duration-fast $easing-standard;
+  border: 1px solid transparent;
+
+  &:hover {
+    background: $bg-light;
+    border-color: $border-color;
+
+    .row-chevron {
+      transform: translateX(2px);
+      color: $primary;
+    }
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    grid-template-columns: 20px 12px 1fr 16px;
+
+    .row-spark {
+      display: none;
+    }
+  }
+}
+
+.rank-no {
+  font-size: $font-size-xs;
+  color: $text-muted;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.row--top .rank-no {
+  color: $primary;
+  font-weight: $font-bold;
+}
+
+.swatch {
+  width: 8px;
+  height: 36px;
+  border-radius: 4px;
+}
+
+.row-main {
+  min-width: 0;
+}
+
+.row-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-2;
+}
+
+.row-name {
+  font-weight: $font-semibold;
+  color: $text-primary;
+  font-size: $font-size-sm;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.row-amount {
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+  color: $text-primary;
+  font-size: $font-size-sm;
+}
+
+.row-bar {
+  height: 6px;
+  background: $bg-light;
+  border-radius: 4px;
+  margin-top: 6px;
+  overflow: hidden;
+}
+
+.row-fill {
+  display: block;
+  height: 100%;
+  border-radius: 4px;
+  transition: width $duration-slow $easing-standard;
+}
+
+.row-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 4px;
+  flex-wrap: wrap;
+}
+
+.meta-chip {
+  font-size: 11px;
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: $bg-light;
+  color: $text-secondary;
+  font-variant-numeric: tabular-nums;
+
+  &--ghost {
+    background: transparent;
+    color: $text-muted;
+    padding: 1px 0;
+  }
+}
+
+.meta-delta {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  font-size: 11px;
+  padding: 1px 6px;
+  border-radius: 999px;
+  font-variant-numeric: tabular-nums;
+  font-weight: $font-semibold;
+
+  &.is-good {
+    background: var(--color-income-soft, rgba(16, 185, 129, 0.15));
+    color: var(--color-income, #10b981);
+  }
+
+  &.is-bad {
+    background: var(--color-expense-soft, rgba(239, 68, 68, 0.15));
+    color: var(--color-expense, #ef4444);
+  }
+
+  &.is-flat {
+    background: $bg-light;
+    color: $text-muted;
+  }
+}
+
+.row-spark {
+  height: 32px;
+  width: 90px;
+}
+
+.row-chevron {
+  color: $text-muted;
+  transition: transform $duration-fast $easing-standard;
+}
+</style>
diff --git a/components/reports/ChartsTab.stories.js b/components/reports/ChartsTab.stories.js
new file mode 100644
index 0000000..f6a107d
--- /dev/null
+++ b/components/reports/ChartsTab.stories.js
@@ -0,0 +1,58 @@
+import ChartsTab from './ChartsTab.vue';
+
+const monthlyBuckets = [
+  { month: '2023-10', income: 5200, expense: 4100, net: 1100 },
+  { month: '2023-11', income: 5400, expense: 3900, net: 1500 },
+  { month: '2023-12', income: 6100, expense: 4800, net: 1300 },
+  { month: '2024-01', income: 5400, expense: 4200, net: 1200 },
+  { month: '2024-02', income: 5600, expense: 4100, net: 1500 },
+  { month: '2024-03', income: 6400, expense: 4400, net: 2000 }
+];
+
+const dailyBuckets = [
+  { date: '2024-03-01', expense: 120, txCount: 4 },
+  { date: '2024-03-02', expense: 0, txCount: 0 },
+  { date: '2024-03-03', expense: 210, txCount: 5 },
+  { date: '2024-03-04', expense: 65, txCount: 2 },
+  { date: '2024-03-05', expense: 0, txCount: 0 },
+  { date: '2024-03-06', expense: 340, txCount: 7 },
+  { date: '2024-03-07', expense: 90, txCount: 3 }
+];
+
+const expenseCategories = [
+  { name: 'Housing', amount: 1450, color: '#8b5cf6' },
+  { name: 'Food & Dining', amount: 820, color: '#10b981' },
+  { name: 'Transport', amount: 460, color: '#f59e0b' },
+  { name: 'Utilities', amount: 380, color: '#3b82f6' },
+  { name: 'Leisure', amount: 340, color: '#ec4899' },
+  { name: 'Health', amount: 250, color: '#14b8a6' }
+];
+
+const incomeCategories = [
+  { name: 'Salary', amount: 4800, color: '#10b981' },
+  { name: 'Freelance', amount: 1200, color: '#3b82f6' },
+  { name: 'Interest', amount: 150, color: '#f59e0b' }
+];
+
+export default {
+  title: 'Domain/Reports/ChartsTab',
+  component: ChartsTab,
+  args: {
+    monthlyBuckets,
+    dailyBuckets,
+    expenseCategories,
+    incomeCategories,
+    currency: 'USD'
+  }
+};
+
+export const Cashflow = {};
+
+export const Empty = {
+  args: {
+    monthlyBuckets: [],
+    dailyBuckets: [],
+    expenseCategories: [],
+    incomeCategories: []
+  }
+};
diff --git a/components/reports/ChartsTab.vue b/components/reports/ChartsTab.vue
new file mode 100644
index 0000000..235b520
--- /dev/null
+++ b/components/reports/ChartsTab.vue
@@ -0,0 +1,561 @@
+<template>
+  <section class="charts-tab" tabindex="0" @keydown="onKey">
+    <header class="charts-head">
+      <div class="chart-switch" role="tablist">
+        <TButton
+          v-for="(c, i) in charts"
+          :key="c.key"
+          variant="text"
+          size="small"
+          :full-width="false"
+          class="switch-btn"
+          :class="{ 'switch-btn--active': i === currentIdx }"
+          role="tab"
+          :aria-selected="i === currentIdx"
+          @click="select(i)"
+        >
+          <component :is="c.icon" :size="14" />
+          <span>{{ c.label }}</span>
+        </TButton>
+      </div>
+      <div class="nav">
+        <TButton
+          variant="text"
+          size="small"
+          :full-width="false"
+          class="nav-btn"
+          :aria-label="t('Previous chart')"
+          @click="prev"
+        >
+          <ChevronLeft :size="16" />
+        </TButton>
+        <span class="nav-count">{{ currentIdx + 1 }} / {{ charts.length }}</span>
+        <TButton
+          variant="text"
+          size="small"
+          :full-width="false"
+          class="nav-btn"
+          :aria-label="t('Next chart')"
+          @click="next"
+        >
+          <ChevronRight :size="16" />
+        </TButton>
+      </div>
+    </header>
+
+    <div class="chart-canvas">
+      <Transition name="chart-swap" mode="out-in">
+        <div :key="current.key" class="canvas-inner">
+          <header class="canvas-head">
+            <div>
+              <h2 class="canvas-title">{{ current.label }}</h2>
+              <p class="canvas-sub">{{ current.sub }}</p>
+            </div>
+          </header>
+
+          <component
+            :is="current.component"
+            v-bind="current.props"
+            :currency="currency"
+            :formatter="formatter"
+          />
+        </div>
+      </Transition>
+    </div>
+
+    <Transition name="chart-swap" mode="out-in">
+      <div :key="`stats-${current.key}`" class="summary-strip">
+        <article v-for="s in current.summaries" :key="s.label" class="summary">
+          <span class="summary-label">{{ s.label }}</span>
+          <span class="summary-value" :class="s.tone ? `tone--${s.tone}` : ''">
+            {{ s.value }}
+          </span>
+          <span v-if="s.detail" class="summary-detail">{{ s.detail }}</span>
+        </article>
+      </div>
+    </Transition>
+
+    <footer class="kbd-hint">
+      <Keyboard :size="12" />
+      <span>{{ t('Use ← → to switch charts') }}</span>
+    </footer>
+  </section>
+</template>
+
+<script setup>
+import { computed, ref, onMounted, onUnmounted } from 'vue';
+import {
+  ChevronLeft,
+  ChevronRight,
+  LineChart,
+  AreaChart,
+  PieChart,
+  BarChart3,
+  Keyboard
+} from 'lucide-vue-next';
+import CashflowLineChart from './charts/CashflowLineChart.vue';
+import CumulativeNetArea from './charts/CumulativeNetArea.vue';
+import DailyBarChart from './charts/DailyBarChart.vue';
+import CategoryDonut from './charts/CategoryDonut.vue';
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+const locale = i18n?.locale || { value: 'en' };
+
+const props = defineProps({
+  monthlyBuckets: { type: Array, required: true },
+  dailyBuckets: { type: Array, required: true },
+  expenseCategories: { type: Array, required: true },
+  incomeCategories: { type: Array, required: true },
+  currency: { type: String, default: 'USD' },
+  formatter: { type: Function, default: (n) => `${Math.round(n)}` }
+});
+
+const currentIdx = ref(0);
+
+const monthShort = (yyyyMm) => {
+  if (!yyyyMm || typeof yyyyMm !== 'string') return '';
+  const [y, m] = yyyyMm.split('-').map(Number);
+  if (!Number.isFinite(y) || !Number.isFinite(m)) return yyyyMm;
+  return new Intl.DateTimeFormat(locale.value, { month: 'short', year: '2-digit' }).format(
+    new Date(y, m - 1, 1)
+  );
+};
+
+const monthlyData = computed(() =>
+  props.monthlyBuckets.map((m) => ({
+    label: monthShort(m.month),
+    income: m.income,
+    expense: m.expense,
+    net: m.net
+  }))
+);
+
+const cumulativeData = computed(() => {
+  let acc = 0;
+  return props.monthlyBuckets.map((m) => {
+    acc += m.net;
+    return { month: m.month, label: monthShort(m.month), cumulative: acc };
+  });
+});
+
+const donutData = computed(() =>
+  props.expenseCategories
+    .slice(0, 6)
+    .map((c) => ({ name: c.name, value: c.amount, color: c.color }))
+);
+
+const expenseTotal = computed(() => props.expenseCategories.reduce((s, c) => s + c.amount, 0));
+
+// ---------- summaries per chart ----------
+
+const cashflowSummaries = computed(() => {
+  if (!props.monthlyBuckets.length) return [];
+  const totalIncome = props.monthlyBuckets.reduce((s, m) => s + m.income, 0);
+  const totalExpense = props.monthlyBuckets.reduce((s, m) => s + m.expense, 0);
+  const bestNet = [...props.monthlyBuckets].sort((a, b) => b.net - a.net)[0];
+  const worstNet = [...props.monthlyBuckets].sort((a, b) => a.net - b.net)[0];
+  return [
+    {
+      label: t('Total income'),
+      value: props.formatter(totalIncome, props.currency),
+      tone: 'income'
+    },
+    {
+      label: t('Total expense'),
+      value: props.formatter(totalExpense, props.currency),
+      tone: 'expense'
+    },
+    {
+      label: t('Best month'),
+      value: bestNet ? monthShort(bestNet.month) : '—',
+      detail: bestNet ? props.formatter(bestNet.net, props.currency) : ''
+    },
+    {
+      label: t('Worst month'),
+      value: worstNet ? monthShort(worstNet.month) : '—',
+      detail: worstNet ? props.formatter(worstNet.net, props.currency) : ''
+    }
+  ];
+});
+
+const cumulativeSummaries = computed(() => {
+  const arr = cumulativeData.value;
+  if (!arr.length) return [];
+  const last = arr[arr.length - 1];
+  const peak = [...arr].sort((a, b) => b.cumulative - a.cumulative)[0];
+  const trough = [...arr].sort((a, b) => a.cumulative - b.cumulative)[0];
+  const positiveMonths = arr.filter((d) => d.cumulative > 0).length;
+  return [
+    {
+      label: t('Ending balance'),
+      value: props.formatter(last.cumulative, props.currency),
+      tone: last.cumulative >= 0 ? 'income' : 'expense'
+    },
+    {
+      label: t('Peak'),
+      value: peak ? peak.label : '—',
+      detail: peak ? props.formatter(peak.cumulative, props.currency) : ''
+    },
+    {
+      label: t('Lowest'),
+      value: trough ? trough.label : '—',
+      detail: trough ? props.formatter(trough.cumulative, props.currency) : ''
+    },
+    { label: t('Months above zero'), value: `${positiveMonths} / ${arr.length}` }
+  ];
+});
+
+const spendingSummaries = computed(() => {
+  if (!props.expenseCategories.length) return [];
+  const top = props.expenseCategories[0];
+  const top3 = props.expenseCategories.slice(0, 3);
+  const top3Sum = top3.reduce((s, c) => s + c.amount, 0);
+  const total = expenseTotal.value || 1;
+  return [
+    {
+      label: t('Top category'),
+      value: top.name,
+      detail: props.formatter(top.amount, props.currency)
+    },
+    { label: t('Top 3 share'), value: `${((top3Sum / total) * 100).toFixed(0)}%` },
+    { label: t('Distinct categories'), value: props.expenseCategories.length },
+    {
+      label: t('Concentration'),
+      value: `${((top.amount / total) * 100).toFixed(0)}%`,
+      detail: t('in {name}', { name: top.name })
+    }
+  ];
+});
+
+const formatLongDate = (iso) =>
+  new Intl.DateTimeFormat(locale.value, {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric'
+  }).format(new Date(iso + 'T00:00:00'));
+
+const dailySummaries = computed(() => {
+  if (!props.dailyBuckets.length) return [];
+  const withSpend = props.dailyBuckets.filter((d) => d.expense > 0);
+  const noSpend = props.dailyBuckets.length - withSpend.length;
+  const totalSpend = props.dailyBuckets.reduce((s, d) => s + d.expense, 0);
+  const avg = totalSpend / Math.max(1, props.dailyBuckets.length);
+  const highest = [...withSpend].sort((a, b) => b.expense - a.expense)[0];
+  return [
+    {
+      label: t('Avg daily spend'),
+      value: props.formatter(avg, props.currency)
+    },
+    {
+      label: t('Highest day'),
+      value: highest ? props.formatter(highest.expense, props.currency) : '—',
+      detail: highest ? formatLongDate(highest.date) : '',
+      tone: 'expense'
+    },
+    { label: t('Days with spend'), value: `${withSpend.length} / ${props.dailyBuckets.length}` },
+    { label: t('No-spend days'), value: noSpend, tone: 'income' }
+  ];
+});
+
+// ---------- chart registry ----------
+
+const charts = computed(() => [
+  {
+    key: 'cashflow',
+    label: t('Cashflow'),
+    sub: t('Income, expense, and net by month.'),
+    icon: LineChart,
+    component: CashflowLineChart,
+    props: { data: monthlyData.value },
+    summaries: cashflowSummaries.value
+  },
+  {
+    key: 'cumulative',
+    label: t('Cumulative net'),
+    sub: t('Running net across the period.'),
+    icon: AreaChart,
+    component: CumulativeNetArea,
+    props: { data: cumulativeData.value },
+    summaries: cumulativeSummaries.value
+  },
+  {
+    key: 'spending',
+    label: t('Spending mix'),
+    sub: t('Top expense categories share.'),
+    icon: PieChart,
+    component: CategoryDonut,
+    props: { data: donutData.value, total: expenseTotal.value, centerLabel: t('Spent') },
+    summaries: spendingSummaries.value
+  },
+  {
+    key: 'daily',
+    label: t('Daily spending'),
+    sub: t('Each bar is a day in the period.'),
+    icon: BarChart3,
+    component: DailyBarChart,
+    props: { data: props.dailyBuckets },
+    summaries: dailySummaries.value
+  }
+]);
+
+const current = computed(() => charts.value[currentIdx.value]);
+
+const select = (i) => {
+  currentIdx.value = i;
+};
+const next = () => {
+  currentIdx.value = (currentIdx.value + 1) % charts.value.length;
+};
+const prev = () => {
+  currentIdx.value = (currentIdx.value - 1 + charts.value.length) % charts.value.length;
+};
+
+const onKey = (e) => {
+  if (e.key === 'ArrowLeft') {
+    e.preventDefault();
+    prev();
+  } else if (e.key === 'ArrowRight') {
+    e.preventDefault();
+    next();
+  }
+};
+
+const onGlobalKey = (e) => {
+  const tag = (e.target?.tagName || '').toLowerCase();
+  if (tag === 'input' || tag === 'textarea' || tag === 'select') return;
+  onKey(e);
+};
+
+onMounted(() => window.addEventListener('keydown', onGlobalKey));
+onUnmounted(() => window.removeEventListener('keydown', onGlobalKey));
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.charts-tab {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-3;
+  outline: none;
+}
+
+.charts-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-3;
+  flex-wrap: wrap;
+}
+
+.chart-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  background: $bg-white;
+  border: 1px solid $border-color;
+  border-radius: 999px;
+  flex-wrap: wrap;
+  max-width: 100%;
+  overflow-x: auto;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.switch-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 14px;
+  border-radius: 999px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: $text-muted;
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  white-space: nowrap;
+  transition: $duration-fast $easing-standard;
+
+  :deep(.button__text) {
+    gap: 6px;
+  }
+
+  &:hover {
+    color: $text-primary;
+  }
+
+  &--active {
+    background: $primary-light;
+    color: $primary;
+  }
+}
+
+.nav {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-2;
+}
+
+.nav-btn {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: 50%;
+  border: 1px solid $border-color;
+  background: $bg-white;
+  color: $text-secondary;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: $duration-fast $easing-standard;
+
+  &:hover {
+    background: $bg-light;
+    color: $text-primary;
+  }
+}
+
+.nav-count {
+  font-size: $font-size-xs;
+  color: $text-muted;
+  font-variant-numeric: tabular-nums;
+}
+
+.chart-canvas {
+  background: $bg-white;
+  border: 1px solid $border-color;
+  border-radius: 14px;
+  padding: $spacing-4;
+  box-shadow: $elevation-1;
+  min-height: 340px;
+}
+
+.canvas-inner {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-3;
+}
+
+.canvas-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: $spacing-3;
+}
+
+.canvas-title {
+  font-size: $font-size-base;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  margin: 0;
+  letter-spacing: -0.01em;
+}
+
+.canvas-sub {
+  font-size: $font-size-xs;
+  color: $text-muted;
+  margin: 2px 0 0;
+}
+
+.summary-strip {
+  display: grid;
+  grid-template-columns: 1fr;
+  background: $bg-white;
+  border: 1px solid $border-color;
+  border-radius: 14px;
+  box-shadow: $elevation-1;
+  overflow: hidden;
+
+  @media (min-width: $breakpoint-sm) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  @media (min-width: $breakpoint-md) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.summary {
+  padding: $spacing-3 $spacing-4;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  border-right: 1px solid $border-color;
+
+  &:last-child {
+    border-right: none;
+  }
+
+  @media (max-width: $breakpoint-md) {
+    border-right: none;
+    border-bottom: 1px solid $border-color;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+}
+
+.summary-label {
+  font-size: 11px;
+  font-weight: $font-semibold;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: $text-muted;
+}
+
+.summary-value {
+  font-size: 1.1rem;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.2;
+  margin-top: 2px;
+  letter-spacing: -0.01em;
+
+  &.tone--income {
+    color: var(--color-income);
+  }
+  &.tone--expense {
+    color: var(--color-expense);
+  }
+}
+
+.summary-detail {
+  font-size: 11px;
+  color: $text-muted;
+  font-variant-numeric: tabular-nums;
+}
+
+.kbd-hint {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  align-self: center;
+  font-size: 11px;
+  color: $text-muted;
+  padding: $spacing-1 0;
+}
+
+.chart-swap-enter-active,
+.chart-swap-leave-active {
+  transition:
+    opacity $duration-base $easing-standard,
+    transform $duration-base $easing-standard;
+}
+.chart-swap-enter-from {
+  opacity: 0;
+  transform: translateY(6px);
+}
+.chart-swap-leave-to {
+  opacity: 0;
+  transform: translateY(-6px);
+}
+</style>
diff --git a/components/reports/FinancialRatios.stories.js b/components/reports/FinancialRatios.stories.js
new file mode 100644
index 0000000..d29caed
--- /dev/null
+++ b/components/reports/FinancialRatios.stories.js
@@ -0,0 +1,36 @@
+import FinancialRatios from './FinancialRatios.vue';
+
+export default {
+  title: 'Domain/Reports/FinancialRatios',
+  component: FinancialRatios,
+  args: {
+    totals: {
+      savingsRate: 0.35,
+      expenseRatio: 0.65,
+      runwayMonths: 8.4
+    },
+    currency: 'USD'
+  }
+};
+
+export const Healthy = {};
+
+export const Moderate = {
+  args: {
+    totals: {
+      savingsRate: 0.12,
+      expenseRatio: 0.88,
+      runwayMonths: 3.2
+    }
+  }
+};
+
+export const Deficit = {
+  args: {
+    totals: {
+      savingsRate: -0.15,
+      expenseRatio: 1.15,
+      runwayMonths: 0.8
+    }
+  }
+};
diff --git a/components/reports/FinancialRatios.vue b/components/reports/FinancialRatios.vue
new file mode 100644
index 0000000..7aa6c0a
--- /dev/null
+++ b/components/reports/FinancialRatios.vue
@@ -0,0 +1,206 @@
+<template>
+  <TPanel :padding="0" class="ratios-panel">
+    <div class="ratios">
+      <article v-for="ratio in ratios" :key="ratio.key" class="ratio">
+        <header class="ratio-head">
+          <span class="ratio-label">{{ ratio.label }}</span>
+          <span class="ratio-pill" :class="`pill--${ratio.tone}`">{{ ratio.toneLabel }}</span>
+        </header>
+        <p class="ratio-value" :class="`value--${ratio.tone}`">{{ ratio.formatted }}</p>
+      </article>
+    </div>
+  </TPanel>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import TPanel from '../TPanel.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k, params) => {
+  if (params?.n !== undefined) return `${params.n} months`;
+  return k;
+});
+
+const props = defineProps({
+  totals: {
+    type: Object,
+    required: true
+  },
+  currency: {
+    type: String,
+    default: 'USD'
+  },
+  formatter: {
+    type: Function,
+    default: (n) => `${Math.round(n)}`
+  }
+});
+
+const savingsRate = computed(() => (props.totals?.savingsRate ?? 0) * 100);
+const expenseRatio = computed(() => (props.totals?.expenseRatio ?? 0) * 100);
+const runway = computed(() => props.totals?.runwayMonths ?? 0);
+
+const ratios = computed(() => [
+  {
+    key: 'savings',
+    label: t('Savings rate'),
+    formatted: `${savingsRate.value.toFixed(0)}%`,
+    tone:
+      savingsRate.value >= 20
+        ? 'good'
+        : savingsRate.value >= 10
+          ? 'ok'
+          : savingsRate.value >= 0
+            ? 'warn'
+            : 'bad',
+    toneLabel:
+      savingsRate.value >= 20
+        ? t('Healthy')
+        : savingsRate.value >= 10
+          ? t('Building')
+          : savingsRate.value >= 0
+            ? t('Watch')
+            : t('Deficit')
+  },
+  {
+    key: 'expense',
+    label: t('Expense ratio'),
+    formatted: `${expenseRatio.value.toFixed(0)}%`,
+    tone:
+      expenseRatio.value <= 70
+        ? 'good'
+        : expenseRatio.value <= 90
+          ? 'ok'
+          : expenseRatio.value <= 100
+            ? 'warn'
+            : 'bad',
+    toneLabel:
+      expenseRatio.value <= 70
+        ? t('Lean')
+        : expenseRatio.value <= 90
+          ? t('Steady')
+          : expenseRatio.value <= 100
+            ? t('Tight')
+            : t('Over')
+  },
+  {
+    key: 'runway',
+    label: t('Runway'),
+    formatted: runway.value > 0 ? t('{n} months', { n: runway.value.toFixed(1) }) : t('—'),
+    tone:
+      runway.value >= 6 ? 'good' : runway.value >= 3 ? 'ok' : runway.value >= 1 ? 'warn' : 'bad',
+    toneLabel:
+      runway.value >= 6
+        ? t('Strong')
+        : runway.value >= 3
+          ? t('OK')
+          : runway.value >= 1
+            ? t('Short')
+            : t('None')
+  }
+]);
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.ratios-panel {
+  border-radius: 14px;
+  box-shadow: $elevation-1;
+}
+
+.ratios {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+
+  @media (max-width: $breakpoint-sm) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.ratio {
+  padding: $spacing-3 $spacing-4;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  border-right: 1px solid $border-color;
+
+  &:last-child {
+    border-right: none;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    border-right: none;
+    border-bottom: 1px solid $border-color;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+}
+
+.ratio-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-2;
+}
+
+.ratio-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-weight: $font-semibold;
+  color: $text-muted;
+}
+
+.ratio-pill {
+  font-size: 10px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 2px 8px;
+  border-radius: 999px;
+  white-space: nowrap;
+
+  &.pill--good {
+    background: var(--color-income-soft, rgba(16, 185, 129, 0.15));
+    color: var(--color-income, #10b981);
+  }
+  &.pill--ok {
+    background: rgba(var(--color-primary-rgb), 0.12);
+    color: var(--color-primary, #047844);
+  }
+  &.pill--warn {
+    background: rgba(var(--color-warning-rgb), 0.18);
+    color: var(--color-warning, #f59e0b);
+  }
+  &.pill--bad {
+    background: var(--color-expense-soft, rgba(239, 68, 68, 0.15));
+    color: var(--color-expense, #ef4444);
+  }
+}
+
+.ratio-value {
+  font-size: 1.5rem;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.01em;
+  margin: 0;
+  line-height: 1.1;
+
+  &.value--good {
+    color: var(--color-income, #10b981);
+  }
+  &.value--ok {
+    color: var(--color-primary, #047844);
+  }
+  &.value--warn {
+    color: var(--color-warning, #f59e0b);
+  }
+  &.value--bad {
+    color: var(--color-expense, #ef4444);
+  }
+}
+</style>
diff --git a/components/reports/FlowTab.stories.js b/components/reports/FlowTab.stories.js
new file mode 100644
index 0000000..2980d08
--- /dev/null
+++ b/components/reports/FlowTab.stories.js
@@ -0,0 +1,57 @@
+import FlowTab from './FlowTab.vue';
+
+const flow = {
+  sources: [
+    { name: 'Salary', amount: 5200 },
+    { name: 'Freelance', amount: 1400 },
+    { name: 'Interest', amount: 180 }
+  ],
+  sinks: [
+    { name: 'Housing', amount: 2100, color: '#8b5cf6' },
+    { name: 'Food & Dining', amount: 850, color: '#10b981' },
+    { name: 'Transport', amount: 420, color: '#f59e0b' },
+    { name: 'Utilities', amount: 360, color: '#3b82f6' },
+    { name: 'Leisure', amount: 480, color: '#ec4899' }
+  ],
+  totalIn: 6780,
+  totalOut: 4210,
+  savings: 2570
+};
+
+export default {
+  title: 'Domain/Reports/FlowTab',
+  component: FlowTab,
+  args: {
+    flow,
+    currency: 'USD'
+  }
+};
+
+export const HealthyFlow = {};
+
+export const Deficit = {
+  args: {
+    flow: {
+      sources: [{ name: 'Salary', amount: 2600 }],
+      sinks: [
+        { name: 'Housing', amount: 2100, color: '#8b5cf6' },
+        { name: 'Food & Dining', amount: 850, color: '#10b981' }
+      ],
+      totalIn: 2600,
+      totalOut: 2950,
+      savings: -350
+    }
+  }
+};
+
+export const Empty = {
+  args: {
+    flow: {
+      sources: [],
+      sinks: [],
+      totalIn: 0,
+      totalOut: 0,
+      savings: 0
+    }
+  }
+};
diff --git a/components/reports/FlowTab.vue b/components/reports/FlowTab.vue
new file mode 100644
index 0000000..d1a5bd0
--- /dev/null
+++ b/components/reports/FlowTab.vue
@@ -0,0 +1,279 @@
+<template>
+  <section class="flow-tab">
+    <header class="tab-header">
+      <div>
+        <p class="eyebrow">{{ t('Flow') }}</p>
+        <h2 class="title">{{ t('How money moved') }}</h2>
+        <p class="sub">
+          {{ t('Income on the left, where it went on the right. Hover a stream to focus.') }}
+        </p>
+      </div>
+    </header>
+
+    <div class="summary-strip">
+      <article class="sum sum--in">
+        <span class="sum-ico"><ArrowDownLeft :size="18" /></span>
+        <div>
+          <p class="sum-label">{{ t('Total in') }}</p>
+          <p class="sum-val">{{ formatter(flow.totalIn, currency) }}</p>
+        </div>
+      </article>
+      <article class="sum sum--out">
+        <span class="sum-ico"><ArrowUpRight :size="18" /></span>
+        <div>
+          <p class="sum-label">{{ t('Total out') }}</p>
+          <p class="sum-val">{{ formatter(flow.totalOut, currency) }}</p>
+        </div>
+      </article>
+      <article class="sum sum--save" :class="{ 'is-deficit': flow.savings <= 0 }">
+        <span class="sum-ico"><PiggyBank :size="18" /></span>
+        <div>
+          <p class="sum-label">{{ flow.savings >= 0 ? t('Saved') : t('Shortfall') }}</p>
+          <p class="sum-val">{{ formatter(Math.abs(flow.savings), currency) }}</p>
+        </div>
+      </article>
+    </div>
+
+    <div class="canvas">
+      <SankeyFlow :flow="flow" :currency="currency" :formatter="formatter" />
+    </div>
+
+    <div class="legend">
+      <div class="legend-col">
+        <h4 class="legend-title">
+          <ArrowDownLeft :size="12" />
+          {{ t('Sources') }}
+        </h4>
+        <ul>
+          <li v-for="s in flow.sources" :key="s.name">
+            <span class="dot" :style="{ background: 'var(--color-income)' }" />
+            <span class="ll-name">{{ s.name }}</span>
+            <span class="ll-amt">{{ formatter(s.amount, currency) }}</span>
+          </li>
+          <li v-if="!flow.sources.length" class="empty">{{ t('No income.') }}</li>
+        </ul>
+      </div>
+      <div class="legend-col">
+        <h4 class="legend-title">
+          <ArrowUpRight :size="12" />
+          {{ t('Destinations') }}
+        </h4>
+        <ul>
+          <li v-for="s in flow.sinks" :key="s.name">
+            <span class="dot" :style="{ background: s.color || 'var(--color-expense)' }" />
+            <span class="ll-name">{{ s.name }}</span>
+            <span class="ll-amt">{{ formatter(s.amount, currency) }}</span>
+          </li>
+          <li v-if="!flow.sinks.length" class="empty">{{ t('No expenses.') }}</li>
+        </ul>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ArrowDownLeft, ArrowUpRight, PiggyBank } from 'lucide-vue-next';
+import SankeyFlow from './SankeyFlow.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+defineProps({
+  flow: { type: Object, required: true },
+  currency: { type: String, default: 'USD' },
+  formatter: { type: Function, default: (n) => `${Math.round(n)}` }
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.flow-tab {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-4;
+}
+
+.tab-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: $spacing-3;
+  flex-wrap: wrap;
+}
+
+.eyebrow {
+  display: none;
+}
+
+.title {
+  font-size: 1.25rem;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  margin: 0;
+  letter-spacing: -0.01em;
+}
+
+.sub {
+  font-size: $font-size-sm;
+  color: $text-muted;
+  margin: 4px 0 0;
+}
+
+.summary-strip {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: $spacing-3;
+
+  @media (min-width: $breakpoint-sm) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.sum {
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+  padding: $spacing-4;
+  border-radius: 14px;
+  background: $bg-white;
+  border: 1px solid $border-color;
+  box-shadow: $elevation-1;
+}
+
+.sum-ico {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: $text-muted;
+
+  .sum--in & {
+    color: var(--color-income);
+  }
+  .sum--out & {
+    color: var(--color-expense);
+  }
+  .sum--save & {
+    color: $text-secondary;
+  }
+  .sum--save.is-deficit & {
+    color: var(--color-warning);
+  }
+}
+
+.sum-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-weight: $font-semibold;
+  color: $text-muted;
+  margin: 0;
+}
+
+.sum-val {
+  font-size: $font-size-xl;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  font-variant-numeric: tabular-nums;
+  margin: 2px 0 0;
+  letter-spacing: -0.01em;
+
+  .sum--in & {
+    color: var(--color-income);
+  }
+  .sum--out & {
+    color: var(--color-expense);
+  }
+  .sum--save.is-deficit & {
+    color: var(--color-warning);
+  }
+}
+
+.canvas {
+  background: $bg-white;
+  border: 1px solid $border-color;
+  border-radius: 16px;
+  padding: $spacing-4;
+  box-shadow: $elevation-1;
+  overflow-x: auto;
+}
+
+.legend {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: $spacing-3;
+
+  @media (min-width: $breakpoint-md) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.legend-col {
+  background: $bg-white;
+  border: 1px solid $border-color;
+  border-radius: 16px;
+  padding: $spacing-3 $spacing-4;
+  box-shadow: $elevation-1;
+}
+
+.legend-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: $font-semibold;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: $text-muted;
+  margin: 0 0 $spacing-2;
+}
+
+.legend-col ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.legend-col li {
+  display: grid;
+  grid-template-columns: 12px 1fr auto;
+  gap: 8px;
+  align-items: center;
+  padding: 4px 0;
+  border-bottom: 1px dashed $border-color;
+  font-size: $font-size-sm;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &.empty {
+    display: block;
+    color: $text-muted;
+    border-bottom: none;
+  }
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.ll-name {
+  color: $text-primary;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ll-amt {
+  font-weight: $font-bold;
+  color: $text-primary;
+  font-variant-numeric: tabular-nums;
+}
+</style>
diff --git a/components/reports/KpiCard.stories.js b/components/reports/KpiCard.stories.js
new file mode 100644
index 0000000..5ec8f8c
--- /dev/null
+++ b/components/reports/KpiCard.stories.js
@@ -0,0 +1,14 @@
+import KpiCard from './KpiCard.vue';
+
+export default {
+  title: 'Reports/KpiCard',
+  component: KpiCard,
+  tags: ['autodocs'],
+  argTypes: {
+    valueClass: { control: 'select', options: ['', 'is-positive', 'is-negative'] }
+  }
+};
+
+export const Default   = { args: { label: 'Total Revenue', value: '$12,400', valueClass: '' } };
+export const Positive  = { args: { label: 'Net Income', value: '+$3,200', valueClass: 'is-positive' } };
+export const Negative  = { args: { label: 'Expenses', value: '-$1,800', valueClass: 'is-negative' } };
diff --git a/components/reports/KpiCard.vue b/components/reports/KpiCard.vue
new file mode 100644
index 0000000..a83c8ef
--- /dev/null
+++ b/components/reports/KpiCard.vue
@@ -0,0 +1,51 @@
+<template>
+  <TCard class="kpi-card">
+    <div class="kpi-label">{{ label }}</div>
+    <div class="kpi-value" :class="valueClass">{{ value }}</div>
+  </TCard>
+</template>
+
+<script setup>
+import TCard from '../TCard.vue';
+
+const { label, value, valueClass } = defineProps({
+  label: { type: String, required: true },
+  value: { type: [String, Number], required: true },
+  valueClass: { type: [String, Array, Object], default: '' }
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+// TCard already provides background, border-radius, box-shadow and padding.
+// We only add the internal layout styles here.
+.kpi-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  height: fit-content;
+}
+
+.kpi-label {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  color: $text-muted;
+}
+
+.kpi-value {
+  font-size: 2.25rem;
+  font-weight: $font-bold;
+  color: $text-primary;
+  margin-top: 0.5rem;
+
+  &.is-positive {
+    color: $primary;
+  }
+  &.is-negative {
+    color: $error-color;
+  }
+}
+</style>
diff --git a/components/reports/MonthInReview.stories.js b/components/reports/MonthInReview.stories.js
new file mode 100644
index 0000000..846f002
--- /dev/null
+++ b/components/reports/MonthInReview.stories.js
@@ -0,0 +1,42 @@
+import MonthInReview from './MonthInReview.vue';
+
+const sampleMonthData = {
+  monthLabel: 'March 2024',
+  daysInMonth: 31,
+  transactionCount: 42,
+  income: 5600,
+  expense: 3100,
+  savingsRate: 0.446,
+  topCategory: {
+    name: 'Housing & Rent',
+    amount: 1450
+  },
+  topPayee: {
+    name: 'Downtown Landlord Co',
+    amount: 1450
+  },
+  biggestExpense: {
+    amount: 890,
+    party: 'Flight Agency',
+    category: 'Travel & Transport'
+  }
+};
+
+export default {
+  title: 'Domain/Reports/MonthInReview',
+  component: MonthInReview,
+  args: {
+    open: true,
+    data: sampleMonthData,
+    currency: 'USD'
+  }
+};
+
+export const OpenRecap = {};
+
+export const EmptyRecap = {
+  args: {
+    open: true,
+    data: null
+  }
+};
diff --git a/components/reports/MonthInReview.vue b/components/reports/MonthInReview.vue
new file mode 100644
index 0000000..2e7c5b9
--- /dev/null
+++ b/components/reports/MonthInReview.vue
@@ -0,0 +1,1335 @@
+<template>
+  <Transition name="story-root">
+    <div v-if="open" ref="rootRef" class="story-root" role="dialog" aria-modal="true" tabindex="-1">
+      <div class="story-frame" :class="`tone--${currentSlide?.tone || 'opening'}`">
+        <div v-if="slides.length" class="bars">
+          <span
+            v-for="(_, i) in slides"
+            :key="i"
+            class="bar"
+            :class="{
+              'bar--filled': i < currentIndex,
+              'bar--active': i === currentIndex
+            }"
+          >
+            <span
+              v-if="i === currentIndex"
+              class="bar-fill"
+              :class="{ 'bar-fill--paused': paused }"
+              :style="{ animationDuration: `${SLIDE_MS}ms` }"
+              @animationend="next"
+            />
+          </span>
+        </div>
+
+        <header class="story-head">
+          <div class="story-id">
+            <Calendar :size="14" class="story-dot-icon" />
+            <span class="story-month">{{ data?.monthLabel || t('Month in review') }}</span>
+          </div>
+          <TButton
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="story-close"
+            :aria-label="t('Close')"
+            @click="$emit('close')"
+          >
+            <X :size="20" />
+          </TButton>
+        </header>
+
+        <TButton
+          variant="text"
+          size="small"
+          :full-width="false"
+          class="tap-zone tap-zone--prev"
+          :aria-label="t('Previous')"
+          @click="prev"
+        >
+          <span class="tap-hint tap-hint--left">
+            <ChevronLeft :size="20" />
+            <span class="tap-hint-label">{{ t('Prev') }}</span>
+          </span>
+        </TButton>
+        <TButton
+          variant="text"
+          size="small"
+          :full-width="false"
+          class="tap-zone tap-zone--next"
+          :aria-label="t('Next')"
+          @click="next"
+        >
+          <span class="tap-hint tap-hint--right">
+            <span class="tap-hint-label">{{ t('Next') }}</span>
+            <ChevronRight :size="20" />
+          </span>
+        </TButton>
+        <TButton
+          variant="text"
+          size="small"
+          :full-width="false"
+          class="tap-zone tap-zone--pause"
+          :aria-label="paused ? t('Resume') : t('Pause')"
+          @click="togglePause"
+          text=""
+        />
+
+        <Transition name="slide-swap" mode="out-in">
+          <div v-if="!data" :key="'empty'" class="slide slide--empty">
+            <CalendarOff :size="48" />
+            <p class="slide-msg">{{ t('No data for the latest month yet.') }}</p>
+          </div>
+          <div
+            v-else
+            :key="currentIndex"
+            class="slide"
+            :class="{ 'slide--flip': currentIndex % 2 === 1 }"
+          >
+            <div class="illustration-panel">
+              <svg
+                class="illustration"
+                viewBox="0 0 600 600"
+                preserveAspectRatio="xMidYMid slice"
+                aria-hidden="true"
+              >
+                <defs>
+                  <radialGradient :id="`grad-${currentSlide?.kind}`" cx="50%" cy="50%" r="60%">
+                    <stop offset="0%" stop-color="var(--slide-accent)" stop-opacity="0.7" />
+                    <stop offset="100%" stop-color="var(--slide-accent)" stop-opacity="0.05" />
+                  </radialGradient>
+                  <pattern
+                    :id="`dots-${currentSlide?.kind}`"
+                    width="24"
+                    height="24"
+                    patternUnits="userSpaceOnUse"
+                  >
+                    <circle cx="2" cy="2" r="1.4" fill="var(--slide-deep)" opacity="0.18" />
+                  </pattern>
+                </defs>
+
+                <g v-if="currentSlide?.kind === 'opening'">
+                  <rect
+                    x="0"
+                    y="0"
+                    width="600"
+                    height="600"
+                    :fill="`url(#dots-${currentSlide?.kind})`"
+                  />
+                  <circle cx="300" cy="620" r="320" :fill="`url(#grad-${currentSlide?.kind})`" />
+                  <g
+                    transform="translate(300 620)"
+                    stroke="var(--slide-deep)"
+                    stroke-width="6"
+                    stroke-linecap="round"
+                    opacity="0.55"
+                  >
+                    <line
+                      v-for="i in 12"
+                      :key="i"
+                      :x1="0"
+                      :y1="-330"
+                      :x2="0"
+                      :y2="-380"
+                      :transform="`rotate(${(i - 6) * 15})`"
+                    />
+                  </g>
+                  <circle cx="300" cy="620" r="180" fill="var(--slide-accent)" opacity="0.5" />
+                  <circle cx="300" cy="620" r="110" fill="var(--slide-deep)" opacity="0.85" />
+                  <circle cx="120" cy="120" r="10" fill="var(--slide-deep)" opacity="0.6" />
+                  <circle cx="500" cy="80" r="14" fill="var(--slide-accent)" opacity="0.85" />
+                  <circle cx="540" cy="220" r="6" fill="var(--slide-deep)" opacity="0.7" />
+                  <circle cx="80" cy="280" r="8" fill="var(--slide-accent)" opacity="0.7" />
+                </g>
+
+                <g v-else-if="currentSlide?.kind === 'income'">
+                  <rect
+                    x="0"
+                    y="0"
+                    width="600"
+                    height="600"
+                    :fill="`url(#dots-${currentSlide?.kind})`"
+                  />
+                  <path
+                    d="M 0 600 L 0 510 L 80 470 L 160 410 L 240 340 L 320 260 L 400 200 L 480 130 L 560 70 L 600 50 L 600 600 Z"
+                    :fill="`url(#grad-${currentSlide?.kind})`"
+                  />
+                  <path
+                    d="M 0 510 L 80 470 L 160 410 L 240 340 L 320 260 L 400 200 L 480 130 L 560 70 L 600 50"
+                    fill="none"
+                    stroke="var(--slide-deep)"
+                    stroke-width="5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <g
+                    v-for="(p, i) in [
+                      [80, 470],
+                      [160, 410],
+                      [240, 340],
+                      [320, 260],
+                      [400, 200],
+                      [480, 130],
+                      [560, 70]
+                    ]"
+                    :key="i"
+                  >
+                    <circle
+                      :cx="p[0]"
+                      :cy="p[1]"
+                      r="10"
+                      fill="var(--slide-bg)"
+                      stroke="var(--slide-deep)"
+                      stroke-width="4"
+                    />
+                  </g>
+                  <g v-for="(b, i) in [70, 140, 210, 280, 350, 420, 490]" :key="`b-${i}`">
+                    <rect
+                      :x="b"
+                      y="540"
+                      width="40"
+                      :height="40 + i * 14"
+                      rx="6"
+                      fill="var(--slide-deep)"
+                      opacity="0.16"
+                    />
+                  </g>
+                </g>
+
+                <g v-else-if="currentSlide?.kind === 'spending'">
+                  <rect
+                    x="0"
+                    y="0"
+                    width="600"
+                    height="600"
+                    :fill="`url(#dots-${currentSlide?.kind})`"
+                  />
+                  <circle cx="300" cy="300" r="260" fill="var(--slide-accent)" opacity="0.14" />
+                  <circle
+                    cx="300"
+                    cy="300"
+                    r="210"
+                    fill="none"
+                    stroke="var(--slide-deep)"
+                    stroke-width="30"
+                    stroke-dasharray="380 1320"
+                    stroke-linecap="round"
+                    opacity="0.85"
+                    transform="rotate(-90 300 300)"
+                  />
+                  <circle
+                    cx="300"
+                    cy="300"
+                    r="210"
+                    fill="none"
+                    stroke="var(--slide-accent)"
+                    stroke-width="30"
+                    stroke-dasharray="260 1320"
+                    stroke-linecap="round"
+                    opacity="0.95"
+                    transform="rotate(38 300 300)"
+                  />
+                  <circle
+                    cx="300"
+                    cy="300"
+                    r="210"
+                    fill="none"
+                    stroke="var(--slide-deep)"
+                    stroke-width="30"
+                    stroke-dasharray="180 1320"
+                    stroke-linecap="round"
+                    opacity="0.6"
+                    transform="rotate(96 300 300)"
+                  />
+                  <circle
+                    cx="300"
+                    cy="300"
+                    r="210"
+                    fill="none"
+                    stroke="var(--slide-accent)"
+                    stroke-width="30"
+                    stroke-dasharray="120 1320"
+                    stroke-linecap="round"
+                    opacity="0.45"
+                    transform="rotate(146 300 300)"
+                  />
+                  <circle cx="300" cy="300" r="150" fill="var(--slide-bg)" />
+                  <circle cx="300" cy="300" r="120" fill="var(--slide-accent)" opacity="0.25" />
+                </g>
+
+                <g v-else-if="currentSlide?.kind === 'topCategory'">
+                  <rect
+                    x="0"
+                    y="0"
+                    width="600"
+                    height="600"
+                    :fill="`url(#dots-${currentSlide?.kind})`"
+                  />
+                  <g
+                    transform="translate(300 300)"
+                    stroke="var(--slide-deep)"
+                    stroke-width="5"
+                    stroke-linecap="round"
+                    opacity="0.55"
+                  >
+                    <line
+                      v-for="i in 18"
+                      :key="i"
+                      x1="0"
+                      y1="-240"
+                      x2="0"
+                      y2="-280"
+                      :transform="`rotate(${i * 20})`"
+                    />
+                  </g>
+                  <circle cx="300" cy="300" r="220" fill="var(--slide-accent)" opacity="0.18" />
+                  <circle cx="300" cy="300" r="170" fill="var(--slide-accent)" opacity="0.32" />
+                  <circle cx="300" cy="300" r="120" fill="var(--slide-deep)" opacity="0.9" />
+                  <g transform="translate(300 300)" fill="var(--slide-bg)">
+                    <polygon
+                      points="0,-58 17,-18 60,-18 25,8 40,52 0,26 -40,52 -25,8 -60,-18 -17,-18"
+                    />
+                  </g>
+                </g>
+
+                <g v-else-if="currentSlide?.kind === 'topPayee'">
+                  <rect
+                    x="0"
+                    y="0"
+                    width="600"
+                    height="600"
+                    :fill="`url(#dots-${currentSlide?.kind})`"
+                  />
+                  <path
+                    d="M 300 200 C 240 130 100 130 100 270 C 100 380 220 460 300 510 C 380 460 500 380 500 270 C 500 130 360 130 300 200 Z"
+                    :fill="`url(#grad-${currentSlide?.kind})`"
+                  />
+                  <path
+                    d="M 300 240 C 260 190 170 190 170 280 C 170 350 240 410 300 440 C 360 410 430 350 430 280 C 430 190 340 190 300 240 Z"
+                    fill="var(--slide-deep)"
+                    opacity="0.85"
+                  />
+                  <g fill="var(--slide-accent)">
+                    <path
+                      d="M 90 110 C 78 100 56 100 56 122 C 56 138 74 152 90 162 C 106 152 124 138 124 122 C 124 100 102 100 90 110 Z"
+                      opacity="0.8"
+                    />
+                    <path
+                      d="M 510 110 C 498 100 476 100 476 122 C 476 138 494 152 510 162 C 526 152 544 138 544 122 C 544 100 522 100 510 110 Z"
+                      opacity="0.7"
+                    />
+                    <path
+                      d="M 60 470 C 52 463 38 463 38 477 C 38 487 50 496 60 503 C 70 496 82 487 82 477 C 82 463 68 463 60 470 Z"
+                      opacity="0.6"
+                    />
+                    <path
+                      d="M 540 480 C 530 471 510 471 510 491 C 510 505 526 517 540 526 C 554 517 570 505 570 491 C 570 471 550 471 540 480 Z"
+                      opacity="0.55"
+                    />
+                  </g>
+                </g>
+
+                <g v-else-if="currentSlide?.kind === 'biggest'">
+                  <rect
+                    x="0"
+                    y="0"
+                    width="600"
+                    height="600"
+                    :fill="`url(#dots-${currentSlide?.kind})`"
+                  />
+                  <circle cx="300" cy="300" r="280" :fill="`url(#grad-${currentSlide?.kind})`" />
+                  <g
+                    transform="translate(300 300)"
+                    stroke="var(--slide-deep)"
+                    stroke-width="6"
+                    stroke-linecap="round"
+                    opacity="0.7"
+                  >
+                    <line
+                      v-for="i in 16"
+                      :key="i"
+                      x1="0"
+                      y1="-160"
+                      x2="0"
+                      y2="-230"
+                      :transform="`rotate(${i * 22.5})`"
+                    />
+                  </g>
+                  <circle cx="300" cy="300" r="140" fill="var(--slide-accent)" opacity="0.5" />
+                  <circle cx="300" cy="300" r="100" fill="var(--slide-deep)" opacity="0.95" />
+                  <g transform="translate(300 300)" fill="var(--slide-bg)">
+                    <path
+                      d="M 0 -54 C 25 -30 35 -10 30 14 C 40 6 50 -4 54 -16 C 68 -2 72 22 60 42 C 48 60 24 70 0 70 C -24 70 -48 60 -60 42 C -72 22 -68 -2 -54 -16 C -50 -4 -40 6 -30 14 C -35 -10 -25 -30 0 -54 Z"
+                    />
+                  </g>
+                </g>
+
+                <g v-else-if="currentSlide?.kind === 'closing'">
+                  <rect
+                    x="0"
+                    y="0"
+                    width="600"
+                    height="600"
+                    :fill="`url(#dots-${currentSlide?.kind})`"
+                  />
+                  <circle cx="300" cy="300" r="260" :fill="`url(#grad-${currentSlide?.kind})`" />
+                  <circle cx="300" cy="300" r="170" fill="var(--slide-accent)" opacity="0.4" />
+                  <circle cx="300" cy="300" r="110" fill="var(--slide-deep)" opacity="0.9" />
+                  <g
+                    transform="translate(300 300)"
+                    stroke="var(--slide-bg)"
+                    stroke-width="6"
+                    stroke-linecap="round"
+                  >
+                    <polyline points="-32,4 -10,28 36,-26" fill="none" />
+                  </g>
+                  <g>
+                    <rect
+                      v-for="(p, i) in confettiDots"
+                      :key="i"
+                      :x="p.x - p.r"
+                      :y="p.y - p.r"
+                      :width="p.r * 2"
+                      :height="p.r * 2"
+                      :fill="p.fill"
+                      :opacity="p.o"
+                      :transform="`rotate(${(i * 37) % 360} ${p.x} ${p.y})`"
+                      rx="2"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </div>
+
+            <div class="slide-body" :class="`align--${currentSlide?.align || 'center'}`">
+              <span class="slide-eyebrow">{{ currentSlide?.eyebrow }}</span>
+              <component
+                :is="currentSlide.icon"
+                v-if="currentSlide?.icon"
+                :size="28"
+                class="slide-icon"
+              />
+              <h2 class="slide-headline">
+                <template v-if="currentSlide?.value != null">
+                  {{ formatter(animatedValue, currency) }}
+                </template>
+                <template v-else>
+                  {{ currentSlide?.headline }}
+                </template>
+              </h2>
+              <p v-if="currentSlide?.detail" class="slide-detail">{{ currentSlide.detail }}</p>
+              <p v-if="currentSlide?.footnote" class="slide-footnote">
+                {{ currentSlide.footnote }}
+              </p>
+            </div>
+          </div>
+        </Transition>
+
+        <footer v-if="data" class="story-foot">
+          <TButton
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="foot-btn foot-btn--text"
+            :class="{ 'foot-btn--disabled': currentIndex === 0 }"
+            :aria-label="t('Previous slide')"
+            @click="prev"
+          >
+            <ChevronLeft :size="18" />
+            <span>{{ t('Prev') }}</span>
+          </TButton>
+          <span class="counter">{{ currentIndex + 1 }} / {{ slides.length }}</span>
+          <TButton
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="foot-btn"
+            :aria-label="paused ? t('Resume') : t('Pause')"
+            @click="togglePause"
+          >
+            <Pause v-if="!paused" :size="14" />
+            <Play v-else :size="14" />
+          </TButton>
+          <TButton
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="foot-btn foot-btn--text foot-btn--cta"
+            :aria-label="t('Next slide')"
+            @click="next"
+          >
+            <span>{{ t('Next') }}</span>
+            <ChevronRight :size="18" />
+          </TButton>
+        </footer>
+
+        <Transition name="hint-fade">
+          <div v-if="data && showFirstHint" class="first-hint">
+            <Keyboard :size="14" />
+            <span>{{ t('Click sides, use arrow keys, or use the controls below.') }}</span>
+          </div>
+        </Transition>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue';
+import {
+  X,
+  Calendar,
+  CalendarOff,
+  ChevronLeft,
+  ChevronRight,
+  TrendingUp,
+  ShoppingBag,
+  Award,
+  Heart,
+  Flame,
+  PartyPopper,
+  Keyboard,
+  Pause,
+  Play
+} from 'lucide-vue-next';
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k, params) => {
+  if (params) {
+    return Object.entries(params).reduce((str, [key, val]) => str.replace(new RegExp('\\{' + key + '\\}', 'g'), val), k);
+  }
+  return k;
+});
+
+const props = defineProps({
+  open: { type: Boolean, default: false },
+  data: { type: Object, default: null },
+  currency: { type: String, default: 'USD' },
+  formatter: { type: Function, default: (n) => `${Math.round(n)}` }
+});
+
+const emit = defineEmits(['close']);
+
+const SLIDE_MS = 5200;
+
+const currentIndex = ref(0);
+const paused = ref(false);
+const rootRef = ref(null);
+const animatedValue = ref(0);
+const showFirstHint = ref(false);
+let hintTimer = null;
+
+const monthDescriptor = (rate) => {
+  if (rate >= 0.3) return t('A stellar month.');
+  if (rate >= 0.2) return t('A healthy month.');
+  if (rate >= 0.1) return t('A steady month.');
+  if (rate >= 0) return t('You broke even.');
+  return t('A heavy month.');
+};
+
+const closingHeadline = (rate) => {
+  if (rate >= 0.2)
+    return t('You kept {n} of every $100 earned.', { n: `$${Math.round(rate * 100)}` });
+  if (rate >= 0.1)
+    return t('You set aside about 1 in {n} dollars.', { n: Math.round(1 / Math.max(rate, 0.01)) });
+  if (rate >= 0) return t('Income and spending nearly cancelled out.');
+  return t('You spent more than you earned this month.');
+};
+
+const slides = computed(() => {
+  const d = props.data;
+  if (!d) return [];
+  const out = [];
+  const cadence =
+    d.transactionCount > 0 ? Math.max(1, Math.round(d.daysInMonth / d.transactionCount)) : 0;
+
+  out.push({
+    kind: 'opening',
+    tone: 'opening',
+    align: 'center',
+    eyebrow: d.monthLabel,
+    headline: monthDescriptor(d.savingsRate),
+    detail: t('Here is your recap.')
+  });
+
+  out.push({
+    kind: 'income',
+    tone: 'income',
+    align: 'left',
+    eyebrow: t('Cash in'),
+    icon: TrendingUp,
+    value: d.income,
+    detail: d.income > 0 ? t('Money you brought home this month.') : t('No income recorded.')
+  });
+
+  if (d.expense > 0) {
+    out.push({
+      kind: 'spending',
+      tone: 'spending',
+      align: 'left',
+      eyebrow: t('Cash out'),
+      icon: ShoppingBag,
+      value: d.expense,
+      detail: t('Where your spending went.'),
+      footnote: d.topCategory ? t('{name} led the way.', { name: d.topCategory.name }) : ''
+    });
+  }
+
+  if (d.topCategory) {
+    out.push({
+      kind: 'topCategory',
+      tone: 'topCategory',
+      align: 'center',
+      eyebrow: t('Top category'),
+      icon: Award,
+      headline: d.topCategory.name,
+      detail: props.formatter(d.topCategory.amount, props.currency),
+      footnote:
+        d.expense > 0
+          ? t('{n}% of your spending.', {
+              n: Math.round((d.topCategory.amount / d.expense) * 100)
+            })
+          : ''
+    });
+  }
+
+  if (d.topPayee) {
+    out.push({
+      kind: 'topPayee',
+      tone: 'topPayee',
+      align: 'center',
+      eyebrow: t('Your favourite'),
+      icon: Heart,
+      headline: d.topPayee.name,
+      detail: props.formatter(d.topPayee.amount, props.currency),
+      footnote: t('Total spent with this party.')
+    });
+  }
+
+  if (d.biggestExpense) {
+    out.push({
+      kind: 'biggest',
+      tone: 'biggest',
+      align: 'center',
+      eyebrow: t('Biggest single expense'),
+      icon: Flame,
+      value: d.biggestExpense.amount,
+      detail: d.biggestExpense.party,
+      footnote: d.biggestExpense.category ? t('in {name}', { name: d.biggestExpense.category }) : ''
+    });
+  }
+
+  out.push({
+    kind: 'closing',
+    tone: 'closing',
+    align: 'center',
+    eyebrow: t('The recap'),
+    icon: PartyPopper,
+    headline: closingHeadline(d.savingsRate),
+    detail: cadence
+      ? t('{count} transactions logged. Roughly one every {days} days.', {
+          count: d.transactionCount,
+          days: cadence
+        })
+      : t('{count} transactions logged.', { count: d.transactionCount })
+  });
+
+  return out;
+});
+
+const currentSlide = computed(() => slides.value[currentIndex.value]);
+
+const confettiDots = computed(() => {
+  const rng = (seed) => {
+    let s = seed;
+    return () => {
+      s = (s * 9301 + 49297) % 233280;
+      return s / 233280;
+    };
+  };
+  const r = rng(11);
+  const palette = ['var(--slide-accent)', 'var(--slide-deep)'];
+  return Array.from({ length: 28 }, (_, i) => ({
+    x: 30 + r() * 540,
+    y: 30 + r() * 540,
+    r: 5 + r() * 9,
+    fill: palette[i % 2],
+    o: 0.45 + r() * 0.45
+  }));
+});
+
+let raf = null;
+const animateValue = (target) => {
+  cancelAnimationFrame(raf);
+  if (target == null) {
+    animatedValue.value = 0;
+    return;
+  }
+  if (paused.value) {
+    animatedValue.value = target;
+    return;
+  }
+  const start = performance.now();
+  const duration = 900;
+  const ease = (x) => 1 - Math.pow(1 - x, 3);
+  const tick = (now) => {
+    const t2 = Math.min(1, (now - start) / duration);
+    animatedValue.value = target * ease(t2);
+    if (t2 < 1) raf = requestAnimationFrame(tick);
+    else animatedValue.value = target;
+  };
+  raf = requestAnimationFrame(tick);
+};
+
+watch(currentSlide, (s) => {
+  animateValue(s?.value ?? null);
+});
+
+watch(
+  () => props.open,
+  async (o) => {
+    if (o) {
+      currentIndex.value = 0;
+      paused.value = false;
+      showFirstHint.value = true;
+      clearTimeout(hintTimer);
+      hintTimer = setTimeout(() => {
+        showFirstHint.value = false;
+      }, 4200);
+      await nextTick();
+      rootRef.value?.focus?.();
+      animateValue(currentSlide.value?.value ?? null);
+    } else {
+      cancelAnimationFrame(raf);
+      clearTimeout(hintTimer);
+      showFirstHint.value = false;
+    }
+  }
+);
+
+watch(currentIndex, () => {
+  if (showFirstHint.value) {
+    showFirstHint.value = false;
+    clearTimeout(hintTimer);
+  }
+});
+
+const next = () => {
+  if (currentIndex.value < slides.value.length - 1) {
+    currentIndex.value += 1;
+  } else {
+    emit('close');
+  }
+};
+const prev = () => {
+  if (currentIndex.value > 0) currentIndex.value -= 1;
+};
+const togglePause = () => {
+  paused.value = !paused.value;
+};
+
+const onKey = (e) => {
+  if (!props.open) return;
+  if (e.key === 'ArrowLeft') {
+    e.preventDefault();
+    prev();
+  } else if (e.key === 'ArrowRight' || e.key === ' ') {
+    e.preventDefault();
+    next();
+  } else if (e.key === 'Escape') {
+    e.preventDefault();
+    emit('close');
+  } else if (e.key === 'p' || e.key === 'P') {
+    togglePause();
+  }
+};
+
+onMounted(() => window.addEventListener('keydown', onKey));
+onUnmounted(() => {
+  window.removeEventListener('keydown', onKey);
+  cancelAnimationFrame(raf);
+  clearTimeout(hintTimer);
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.story-root {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.78);
+  backdrop-filter: blur(10px);
+  display: grid;
+  place-items: center;
+  z-index: $z-index-modal;
+  outline: none;
+
+  @media (min-width: $breakpoint-md) {
+    padding: $spacing-4;
+  }
+}
+
+.story-frame {
+  position: relative;
+  background: var(--slide-bg, #fef9f4);
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-shadow: $elevation-5;
+  color: var(--slide-ink, #1b1f2c);
+  transition:
+    background $duration-slow $easing-emphasized,
+    color $duration-slow $easing-emphasized;
+
+  @media (min-width: $breakpoint-md) {
+    width: 100%;
+    max-width: 1080px;
+    aspect-ratio: 16 / 10;
+    height: auto;
+    max-height: 88vh;
+    border-radius: 28px;
+  }
+
+  &.tone--opening {
+    --slide-bg: #fdf6ec;
+    --slide-ink: #2d1c08;
+    --slide-accent: #f59e0b;
+    --slide-deep: #b45309;
+  }
+  &.tone--income {
+    --slide-bg: #ecfdf5;
+    --slide-ink: #052e1c;
+    --slide-accent: #34d399;
+    --slide-deep: #047857;
+  }
+  &.tone--spending {
+    --slide-bg: #fff7ed;
+    --slide-ink: #2c1503;
+    --slide-accent: #fb923c;
+    --slide-deep: #c2410c;
+  }
+  &.tone--topCategory {
+    --slide-bg: #f5f3ff;
+    --slide-ink: #1e1146;
+    --slide-accent: #a78bfa;
+    --slide-deep: #6d28d9;
+  }
+  &.tone--topPayee {
+    --slide-bg: #ecfeff;
+    --slide-ink: #0c2e34;
+    --slide-accent: #22d3ee;
+    --slide-deep: #0e7490;
+  }
+  &.tone--biggest {
+    --slide-bg: #fff1f2;
+    --slide-ink: #2d0a13;
+    --slide-accent: #fb7185;
+    --slide-deep: #be123c;
+  }
+  &.tone--closing {
+    --slide-bg: #eef2ff;
+    --slide-ink: #161a45;
+    --slide-accent: #818cf8;
+    --slide-deep: #3730a3;
+  }
+}
+
+.bars {
+  position: absolute;
+  top: 14px;
+  left: 14px;
+  right: 14px;
+  display: flex;
+  gap: 4px;
+  z-index: 6;
+}
+
+.bar {
+  flex: 1;
+  height: 3px;
+  background: rgba(0, 0, 0, 0.12);
+  border-radius: 999px;
+  overflow: hidden;
+  position: relative;
+
+  &--filled {
+    background: var(--slide-deep);
+    opacity: 0.85;
+  }
+}
+
+.bar-fill {
+  display: block;
+  height: 100%;
+  background: var(--slide-deep);
+  border-radius: 999px;
+  animation: barFill linear forwards;
+
+  &--paused {
+    animation-play-state: paused;
+  }
+}
+
+@keyframes barFill {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+
+.story-head {
+  position: absolute;
+  top: 30px;
+  left: 18px;
+  right: 18px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 6;
+}
+
+.story-id {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--slide-deep);
+}
+
+.story-dot-icon {
+  opacity: 0.9;
+}
+
+.story-month {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  letter-spacing: -0.005em;
+}
+
+.story-close {
+  width: 38px;
+  height: 38px;
+  padding: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  color: var(--slide-ink);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  backdrop-filter: blur(6px);
+  transition: $transition-fast;
+
+  &:hover {
+    background: white;
+    transform: scale(1.04);
+  }
+}
+
+.tap-zone {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 35%;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  cursor: pointer;
+  z-index: 3;
+  -webkit-tap-highlight-color: transparent;
+  display: flex;
+  align-items: center;
+
+  :deep(.button__text) {
+    justify-content: inherit;
+  }
+
+  &--prev {
+    left: 0;
+    justify-content: flex-start;
+  }
+  &--next {
+    right: 0;
+    justify-content: flex-end;
+  }
+  &--pause {
+    left: 35%;
+    width: 30%;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:hover,
+  &:focus-visible {
+    background-color: transparent;
+  }
+
+  &:hover .tap-hint,
+  &:focus-visible .tap-hint {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.tap-hint {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0 18px;
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.85);
+  color: var(--slide-deep);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  backdrop-filter: blur(6px);
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity $duration-fast $easing-standard,
+    transform $duration-fast $easing-emphasized;
+
+  &--left {
+    transform: translateX(-8px);
+  }
+  &--right {
+    transform: translateX(8px);
+  }
+}
+
+.tap-hint-label {
+  @media (max-width: $breakpoint-sm) {
+    display: none;
+  }
+}
+
+.slide {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 0;
+  color: var(--slide-ink);
+  overflow: hidden;
+
+  @media (min-width: $breakpoint-md) {
+    display: grid;
+    grid-template-columns: 5fr 6fr;
+    align-items: stretch;
+  }
+
+  &--flip {
+    @media (min-width: $breakpoint-md) {
+      grid-template-columns: 6fr 5fr;
+
+      .illustration-panel {
+        order: 2;
+      }
+      .slide-body {
+        order: 1;
+      }
+    }
+  }
+
+  &--empty {
+    color: $text-muted;
+    background: $bg-white;
+    align-items: center;
+    justify-content: center;
+    gap: $spacing-3;
+    padding: $spacing-8;
+    display: flex;
+  }
+
+  .slide-msg {
+    font-size: $font-size-sm;
+    margin: 0;
+  }
+}
+
+.illustration-panel {
+  position: relative;
+  width: 100%;
+  min-height: 50%;
+  z-index: 0;
+
+  @media (min-width: $breakpoint-md) {
+    min-height: 100%;
+  }
+}
+
+.illustration {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  animation: illEnter $duration-deliberate $easing-emphasized both;
+}
+
+@keyframes illEnter {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.slide-body {
+  position: relative;
+  z-index: 2;
+  padding: $spacing-6 $spacing-6 80px;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-2;
+  justify-content: flex-end;
+
+  @media (min-width: $breakpoint-md) {
+    padding: $spacing-8 $spacing-6 80px;
+    justify-content: center;
+    gap: $spacing-3;
+  }
+
+  &.align--center {
+    text-align: center;
+    align-items: center;
+
+    @media (min-width: $breakpoint-md) {
+      text-align: left;
+      align-items: flex-start;
+    }
+  }
+  &.align--left {
+    text-align: left;
+    align-items: flex-start;
+  }
+}
+
+.slide-eyebrow {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  font-weight: $font-bold;
+  color: var(--slide-deep);
+}
+
+.slide-icon {
+  color: var(--slide-deep);
+  margin-bottom: $spacing-1;
+}
+
+.slide-headline {
+  font-size: 2.4rem;
+  font-weight: $font-bold;
+  margin: 0;
+  letter-spacing: -0.025em;
+  line-height: 1.05;
+  font-variant-numeric: tabular-nums;
+  word-break: break-word;
+  color: var(--slide-ink);
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 2rem;
+  }
+  @media (min-width: $breakpoint-md) {
+    font-size: 3.4rem;
+    line-height: 1;
+  }
+  @media (min-width: $breakpoint-lg) {
+    font-size: 4rem;
+  }
+}
+
+.slide-detail {
+  font-size: $font-size-base;
+  color: var(--slide-ink);
+  opacity: 0.78;
+  margin: 0;
+  max-width: 30ch;
+  line-height: 1.4;
+
+  @media (min-width: $breakpoint-md) {
+    font-size: 1.05rem;
+    max-width: 36ch;
+  }
+}
+
+.slide-detail:has(+ .slide-footnote) {
+  margin-bottom: $spacing-1;
+}
+
+.slide-footnote {
+  font-size: $font-size-sm;
+  color: var(--slide-deep);
+  font-weight: $font-semibold;
+  margin: 0;
+  letter-spacing: -0.005em;
+}
+
+.story-foot {
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-2;
+  z-index: 7;
+  padding: 6px 10px;
+  background: rgba(255, 255, 255, 0.78);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 999px;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
+}
+
+.counter {
+  font-size: 11px;
+  color: var(--slide-deep);
+  opacity: 0.85;
+  font-variant-numeric: tabular-nums;
+  font-weight: $font-bold;
+  letter-spacing: 0.05em;
+  padding: 0 $spacing-2;
+  min-width: 36px;
+  text-align: center;
+}
+
+.foot-btn {
+  height: 34px;
+  min-width: 34px;
+  padding: 0;
+  border-radius: 999px;
+  background: transparent;
+  border: none;
+  color: var(--slide-deep);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  cursor: pointer;
+  transition:
+    background $duration-fast $easing-standard,
+    transform $duration-fast $easing-standard;
+
+  :deep(.button__text) {
+    gap: 4px;
+  }
+
+  &--text {
+    padding: 0 12px;
+  }
+  &--cta {
+    background: var(--slide-deep);
+    color: var(--slide-bg);
+
+    &:hover {
+      background: var(--slide-deep);
+      filter: brightness(1.1);
+    }
+  }
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.06);
+    transform: scale(1.04);
+  }
+  &:active {
+    transform: scale(0.96);
+  }
+  &--disabled {
+    opacity: 0.3;
+    pointer-events: none;
+  }
+}
+
+.first-hint {
+  position: absolute;
+  bottom: 70px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px;
+  background: rgba(15, 23, 42, 0.85);
+  color: white;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: $font-medium;
+  letter-spacing: -0.005em;
+  z-index: 8;
+  white-space: nowrap;
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
+  max-width: calc(100% - $spacing-6);
+
+  @media (max-width: $breakpoint-sm) {
+    bottom: 64px;
+    font-size: 11px;
+    padding: 7px 12px;
+    white-space: normal;
+    max-width: 88%;
+    text-align: center;
+  }
+}
+
+.hint-fade-enter-active,
+.hint-fade-leave-active {
+  transition:
+    opacity $duration-base $easing-standard,
+    transform $duration-base $easing-emphasized;
+}
+.hint-fade-enter-from,
+.hint-fade-leave-to {
+  opacity: 0;
+  transform: translateX(-50%) translateY(10px);
+}
+
+.story-root-enter-active,
+.story-root-leave-active {
+  transition: opacity $duration-base $easing-standard;
+}
+.story-root-enter-active .story-frame,
+.story-root-leave-active .story-frame {
+  transition: transform $duration-base $easing-emphasized;
+}
+.story-root-enter-from {
+  opacity: 0;
+}
+.story-root-leave-to {
+  opacity: 0;
+}
+.story-root-enter-from .story-frame,
+.story-root-leave-to .story-frame {
+  transform: scale(0.96);
+}
+
+.slide-swap-enter-active,
+.slide-swap-leave-active {
+  transition: opacity $duration-base $easing-standard;
+}
+.slide-swap-enter-from,
+.slide-swap-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/components/reports/NotableStrip.stories.js b/components/reports/NotableStrip.stories.js
new file mode 100644
index 0000000..f4074c5
--- /dev/null
+++ b/components/reports/NotableStrip.stories.js
@@ -0,0 +1,45 @@
+import NotableStrip from './NotableStrip.vue';
+
+export default {
+  title: 'Domain/Reports/NotableStrip',
+  component: NotableStrip,
+  args: {
+    currency: 'USD',
+    notable: {
+      biggestExpense: {
+        amount: 890.0,
+        party: 'Flight Agency',
+        category: 'Travel & Transport',
+        date: '2024-03-12'
+      },
+      biggestCategorySwing: {
+        name: 'Dining & Restaurants',
+        fromAmount: 450.0,
+        toAmount: 210.0,
+        deltaPct: -53
+      },
+      firstTimePayees: {
+        count: 3,
+        names: ['Coffee Lab', 'Metro Carwash', 'Cloud Host']
+      },
+      longestNoSpendStreak: {
+        days: 4,
+        startDate: '2024-03-04',
+        endDate: '2024-03-07'
+      }
+    }
+  }
+};
+
+export const Default = {};
+
+export const EmptyState = {
+  args: {
+    notable: {
+      biggestExpense: null,
+      biggestCategorySwing: null,
+      firstTimePayees: { count: 0, names: [] },
+      longestNoSpendStreak: { days: 0, startDate: '', endDate: '' }
+    }
+  }
+};
diff --git a/components/reports/NotableStrip.vue b/components/reports/NotableStrip.vue
new file mode 100644
index 0000000..b010e10
--- /dev/null
+++ b/components/reports/NotableStrip.vue
@@ -0,0 +1,310 @@
+<template>
+  <section class="strip">
+    <article class="note-card note-card--biggest">
+      <header>
+        <span class="ico"><Banknote :size="14" /></span>
+        <h3>{{ t('Biggest expense') }}</h3>
+      </header>
+      <template v-if="notable?.biggestExpense">
+        <p class="note-value">
+          {{ formatValue(notable.biggestExpense.amount) }}
+        </p>
+        <p class="note-meta">
+          {{ notable.biggestExpense.party }}
+          <span class="dot">·</span>
+          {{ notable.biggestExpense.category }}
+        </p>
+        <p class="note-date">{{ formatDate(notable.biggestExpense.date) }}</p>
+      </template>
+      <p v-else class="note-empty">{{ t('No expenses in this period') }}</p>
+    </article>
+
+    <article class="note-card note-card--swing">
+      <header>
+        <span class="ico"><ArrowUpDown :size="14" /></span>
+        <h3>{{ t('Biggest swing') }}</h3>
+      </header>
+      <template v-if="notable?.biggestCategorySwing">
+        <p class="note-value">
+          {{ notable.biggestCategorySwing.name }}
+        </p>
+        <p class="note-meta">
+          {{ formatValue(notable.biggestCategorySwing.fromAmount) }}
+          <ArrowRight :size="12" class="inline-ico" />
+          {{ formatValue(notable.biggestCategorySwing.toAmount) }}
+        </p>
+        <p
+          class="note-pill"
+          :class="notable.biggestCategorySwing.deltaPct < 0 ? 'pill--good' : 'pill--bad'"
+        >
+          <component
+            :is="notable.biggestCategorySwing.deltaPct > 0 ? ArrowUpRight : ArrowDownRight"
+            :size="12"
+          />
+          {{ notable.biggestCategorySwing.deltaPct > 0 ? '+' : ''
+          }}{{ notable.biggestCategorySwing.deltaPct }}%
+        </p>
+      </template>
+      <p v-else class="note-empty">{{ t('No comparable changes') }}</p>
+    </article>
+
+    <article class="note-card note-card--first">
+      <header>
+        <span class="ico"><UserPlus :size="14" /></span>
+        <h3>{{ t('First-time payees') }}</h3>
+      </header>
+      <p class="note-value">{{ notable?.firstTimePayees?.count ?? 0 }}</p>
+      <template v-if="notable?.firstTimePayees?.names?.length">
+        <p class="note-meta note-meta--list">
+          <span v-for="(name, i) in notable.firstTimePayees.names" :key="name" class="tag">
+            {{ name }}<span v-if="i < notable.firstTimePayees.names.length - 1">·</span>
+          </span>
+        </p>
+      </template>
+      <p v-else class="note-empty">{{ t('All familiar names') }}</p>
+    </article>
+
+    <article class="note-card note-card--streak">
+      <header>
+        <span class="ico"><ShieldCheck :size="14" /></span>
+        <h3>{{ t('No-spend streak') }}</h3>
+      </header>
+      <p class="note-value">
+        {{ notable?.longestNoSpendStreak?.days ?? 0 }}
+        <span class="value-suffix">{{ t('days') }}</span>
+      </p>
+      <p v-if="notable?.longestNoSpendStreak?.startDate" class="note-meta">
+        {{ formatDate(notable.longestNoSpendStreak.startDate) }}
+        <ArrowRight :size="12" class="inline-ico" />
+        {{ formatDate(notable.longestNoSpendStreak.endDate) }}
+      </p>
+      <p v-else class="note-empty">{{ t('Every day had spending') }}</p>
+    </article>
+  </section>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import {
+  Banknote,
+  ArrowUpDown,
+  UserPlus,
+  ShieldCheck,
+  ArrowRight,
+  ArrowUpRight,
+  ArrowDownRight
+} from 'lucide-vue-next';
+import { formatShortAmount } from '../../utils/currency';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+const locale = i18n?.locale || ref('en');
+
+const props = defineProps({
+  notable: {
+    type: Object,
+    required: true
+  },
+  currency: {
+    type: String,
+    default: 'USD'
+  },
+  formatter: {
+    type: Function,
+    default: null
+  }
+});
+
+const formatValue = (val) => {
+  if (props.formatter) return props.formatter(val, props.currency);
+  return formatShortAmount(`${val ?? 0} ${props.currency}`);
+};
+
+const formatDate = (iso) => {
+  if (!iso) return '';
+  const d = new Date(String(iso).includes('T') ? iso : `${iso}T00:00:00`);
+  try {
+    return new Intl.DateTimeFormat(locale.value || 'en', { month: 'short', day: 'numeric' }).format(d);
+  } catch {
+    return iso;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.strip {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0;
+  background: $bg-white;
+  border: 1px solid $border-color;
+  border-radius: 14px;
+  box-shadow: $elevation-1;
+  overflow: hidden;
+  width: 100%;
+
+  @media (min-width: $breakpoint-sm) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  @media (min-width: $breakpoint-lg) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.note-card {
+  padding: $spacing-4;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  border-right: 1px solid $border-color;
+
+  &:last-child {
+    border-right: none;
+  }
+
+  @media (max-width: $breakpoint-lg) {
+    &:nth-child(2) {
+      border-right: none;
+    }
+    &:nth-child(1),
+    &:nth-child(2) {
+      border-bottom: 1px solid $border-color;
+    }
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    border-right: none;
+    border-bottom: 1px solid $border-color;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  header {
+    display: flex;
+    align-items: center;
+    gap: $spacing-2;
+
+    h3 {
+      font-size: 11px;
+      font-weight: $font-semibold;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      color: $text-muted;
+      margin: 0;
+    }
+  }
+}
+
+.ico {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: $text-muted;
+}
+
+.note-card--biggest .ico {
+  color: var(--color-expense);
+}
+.note-card--swing .ico {
+  color: var(--color-warning);
+}
+.note-card--first .ico {
+  color: $text-secondary;
+}
+.note-card--streak .ico {
+  color: var(--color-income);
+}
+
+.note-value {
+  font-size: 1.15rem;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  margin: 2px 0 0;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.15;
+  letter-spacing: -0.01em;
+
+  .note-card--biggest & {
+    color: var(--color-expense);
+  }
+  .note-card--streak & {
+    color: var(--color-income);
+  }
+}
+
+.value-suffix {
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  color: $text-muted;
+  margin-left: 4px;
+}
+
+.note-meta {
+  font-size: $font-size-sm;
+  color: $text-secondary;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+
+  &--list {
+    gap: 4px;
+  }
+}
+
+.inline-ico {
+  display: inline-block;
+  vertical-align: middle;
+  color: $text-muted;
+}
+
+.dot {
+  color: $text-muted;
+}
+
+.tag {
+  font-size: $font-size-xs;
+  padding: 2px 6px;
+  border-radius: 6px;
+  background: $bg-light;
+  color: $text-secondary;
+}
+
+.note-date {
+  font-size: $font-size-xs;
+  color: $text-muted;
+  margin: 0;
+}
+
+.note-empty {
+  font-size: $font-size-sm;
+  color: $text-muted;
+  margin: 4px 0 0;
+}
+
+.note-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  align-self: flex-start;
+  margin-top: 4px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: $font-size-xs;
+  font-weight: $font-semibold;
+  font-variant-numeric: tabular-nums;
+
+  &.pill--good {
+    background: var(--color-income-soft);
+    color: var(--color-income);
+  }
+  &.pill--bad {
+    background: var(--color-expense-soft);
+    color: var(--color-expense);
+  }
+}
+</style>
diff --git a/components/reports/PeriodControl.stories.js b/components/reports/PeriodControl.stories.js
new file mode 100644
index 0000000..5fcfc49
--- /dev/null
+++ b/components/reports/PeriodControl.stories.js
@@ -0,0 +1,55 @@
+import PeriodControl from './PeriodControl.vue';
+import { ref } from 'vue';
+
+export default {
+  title: 'Reports/PeriodControl',
+  component: PeriodControl,
+  tags: ['autodocs'],
+  argTypes: {
+    selectedPeriod: { control: 'text' },
+    compareEnabled: { control: 'boolean' }
+  }
+};
+
+const periods = [
+  { label: 'Week', value: 'week' },
+  { label: 'Month', value: 'month' },
+  { label: 'Year', value: 'year' },
+  { label: 'All', value: 'all' }
+];
+
+export const Default = {
+  render: () => ({
+    components: { PeriodControl },
+    setup() {
+      const selected = ref('month');
+      const compare = ref(false);
+      const customRange = ref(null);
+
+      const handleSelect = (val) => { selected.value = val; };
+      const handleToggleCompare = () => { compare.value = !compare.value; };
+      const handleCustom = (r) => {
+        selected.value = 'custom';
+        customRange.value = r;
+      };
+
+      return { periods, selected, compare, customRange, handleSelect, handleToggleCompare, handleCustom };
+    },
+    template: `
+      <div style="width: 100%; max-width: 800px; padding: 1rem; background: var(--color-bg-white);">
+        <PeriodControl
+          :periods="periods"
+          :selected-period="selected"
+          :compare-enabled="compare"
+          :custom-range="customRange"
+          @select="handleSelect"
+          @toggle-compare="handleToggleCompare"
+          @apply-custom="handleCustom"
+        />
+        <div style="margin-top: 1rem; font-size: 0.875rem; color: var(--color-text-muted);">
+          Selected: {{ selected }} | Compare: {{ compare }} | Custom Range: {{ customRange }}
+        </div>
+      </div>
+    `
+  })
+};
diff --git a/components/reports/PeriodControl.vue b/components/reports/PeriodControl.vue
new file mode 100644
index 0000000..ef1dac2
--- /dev/null
+++ b/components/reports/PeriodControl.vue
@@ -0,0 +1,273 @@
+<template>
+  <div class="period-control">
+    <div class="period-chips">
+      <TButton
+        v-for="p in periods"
+        :key="p.value"
+        type="button"
+        :variant="selectedPeriod === p.value ? 'primary' : 'secondary'"
+        size="small"
+        :full-width="false"
+        class="period-chip"
+        @click="$emit('select', p.value)"
+      >
+        {{ t(p.label) }}
+      </TButton>
+
+      <div class="custom-popover-wrapper">
+        <TButton
+          type="button"
+          :variant="selectedPeriod === 'custom' ? 'primary' : 'secondary'"
+          size="small"
+          :full-width="false"
+          class="period-chip period-chip--custom"
+          @click="customOpen = !customOpen"
+        >
+          <template #left-icon>
+            <Calendar :size="14" />
+          </template>
+          <span>{{
+            selectedPeriod === 'custom' && customRange
+              ? `${customRange.start} → ${customRange.end}`
+              : t('Custom')
+          }}</span>
+          <ChevronDown :size="14" class="custom-chevron" :class="{ 'is-open': customOpen }" />
+        </TButton>
+
+        <Transition name="pop">
+          <div v-if="customOpen" class="custom-popover" @click.stop>
+            <label class="popover-row">
+              <span>{{ t('From') }}</span>
+              <input v-model="draftStart" type="date" class="popover-input" />
+            </label>
+            <label class="popover-row">
+              <span>{{ t('To') }}</span>
+              <input v-model="draftEnd" type="date" class="popover-input" />
+            </label>
+            <div class="popover-actions">
+              <TButton
+                variant="secondary"
+                size="small"
+                :full-width="false"
+                @click="customOpen = false"
+              >
+                {{ t('Cancel') }}
+              </TButton>
+              <TButton
+                variant="primary"
+                size="small"
+                :full-width="false"
+                :disabled="!draftStart || !draftEnd"
+                @click="applyCustom"
+              >
+                {{ t('Apply') }}
+              </TButton>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </div>
+
+    <div class="period-actions">
+      <TButton
+        type="button"
+        :variant="compareEnabled ? 'primary' : 'secondary'"
+        size="small"
+        :full-width="false"
+        :title="t('Compare to previous period')"
+        @click="$emit('toggle-compare')"
+      >
+        <template #left-icon>
+          <GitCompareArrows :size="14" />
+        </template>
+        {{ t('Compare') }}
+      </TButton>
+
+      <TButton
+        type="button"
+        variant="secondary"
+        size="small"
+        :full-width="false"
+        :title="t('Open monthly recap')"
+        @click="$emit('open-review')"
+      >
+        <template #left-icon>
+          <Sparkles :size="14" />
+        </template>
+        {{ t('Recap') }}
+      </TButton>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
+import { Calendar, ChevronDown, GitCompareArrows, Sparkles } from 'lucide-vue-next';
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  periods: { type: Array, required: true },
+  selectedPeriod: { type: String, required: true },
+  compareEnabled: { type: Boolean, default: false },
+  customRange: { type: Object, default: null }
+});
+
+const emit = defineEmits(['select', 'toggle-compare', 'open-review', 'apply-custom']);
+
+const customOpen = ref(false);
+const draftStart = ref(props.customRange?.start || '');
+const draftEnd = ref(props.customRange?.end || '');
+
+watch(
+  () => props.customRange,
+  (r) => {
+    draftStart.value = r?.start || '';
+    draftEnd.value = r?.end || '';
+  }
+);
+
+const applyCustom = () => {
+  if (!draftStart.value || !draftEnd.value) return;
+  emit('apply-custom', { start: draftStart.value, end: draftEnd.value });
+  customOpen.value = false;
+};
+
+const handleDocumentClick = (e) => {
+  if (!e.target.closest('.custom-popover-wrapper')) {
+    customOpen.value = false;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleDocumentClick);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleDocumentClick);
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.period-control {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-3;
+  padding: $spacing-2 $spacing-3;
+  background: transparent;
+  border-bottom: 1px solid $border-color;
+  width: 100%;
+}
+
+.period-chips {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: $spacing-1;
+  position: relative;
+}
+
+.period-chip {
+  border-radius: 999px;
+  height: 32px;
+  padding: 0 $spacing-3;
+}
+
+.custom-popover-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.custom-chevron {
+  margin-left: 4px;
+  transition: transform $duration-fast $easing-standard;
+
+  &.is-open {
+    transform: rotate(180deg);
+  }
+}
+
+.period-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-2;
+  flex-wrap: wrap;
+}
+
+.custom-popover {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  z-index: $z-index-popover;
+  background: $bg-white;
+  border: 1px solid $border-color;
+  border-radius: $radius-xl;
+  padding: $spacing-3;
+  box-shadow: $elevation-3;
+  min-width: 250px;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-2;
+}
+
+.popover-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-2;
+  font-size: $font-size-sm;
+  color: $text-secondary;
+}
+
+.popover-input {
+  border: 1px solid $border-color;
+  border-radius: $radius-md;
+  padding: 4px 8px;
+  font: inherit;
+  font-size: $font-size-xs;
+  background: $bg-light;
+  color: $text-primary;
+
+  &:focus {
+    outline: none;
+    border-color: $primary;
+  }
+}
+
+.popover-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: $spacing-2;
+  margin-top: $spacing-1;
+}
+
+.pop-enter-active,
+.pop-leave-active {
+  transition:
+    opacity $duration-fast $easing-standard,
+    transform $duration-fast $easing-decelerate;
+}
+
+.pop-enter-from,
+.pop-leave-to {
+  opacity: 0;
+  transform: translateY(-4px) scale(0.98);
+}
+
+@media (max-width: $breakpoint-sm) {
+  .period-control {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .period-actions,
+  .period-chips {
+    justify-content: flex-start;
+  }
+}
+</style>
diff --git a/components/reports/ReportsEmpty.stories.js b/components/reports/ReportsEmpty.stories.js
new file mode 100644
index 0000000..cb4f441
--- /dev/null
+++ b/components/reports/ReportsEmpty.stories.js
@@ -0,0 +1,22 @@
+import ReportsEmpty from './ReportsEmpty.vue';
+
+export default {
+  title: 'Domain/Reports/ReportsEmpty',
+  component: ReportsEmpty,
+  args: {
+    title: 'Reports are waiting on data',
+    description: 'Log a few transactions and your income, expenses, ratios, and patterns will appear here.',
+    actionText: 'Add your first transaction',
+    to: '/transactions/new'
+  }
+};
+
+export const Default = {};
+
+export const CustomMessage = {
+  args: {
+    title: 'No cashflow trends available',
+    description: 'Import a CSV statement or connect an account to view monthly insights.',
+    actionText: 'Upload bank statement'
+  }
+};
diff --git a/components/reports/ReportsEmpty.vue b/components/reports/ReportsEmpty.vue
new file mode 100644
index 0000000..01dc806
--- /dev/null
+++ b/components/reports/ReportsEmpty.vue
@@ -0,0 +1,156 @@
+<template>
+  <section class="empty-card">
+    <div class="empty-art" aria-hidden="true">
+      <svg viewBox="0 0 240 160" width="200" height="140">
+        <defs>
+          <linearGradient id="ec-grad" x1="0" x2="0" y1="0" y2="1">
+            <stop offset="0%" :stop-color="primaryColor" stop-opacity="0.18" />
+            <stop offset="100%" :stop-color="primaryColor" stop-opacity="0" />
+          </linearGradient>
+        </defs>
+        <path
+          d="M 10 120 L 50 90 L 90 100 L 130 60 L 170 80 L 210 40 L 230 50"
+          :stroke="primaryColor"
+          stroke-width="3"
+          fill="none"
+          stroke-linecap="round"
+        />
+        <path
+          d="M 10 120 L 50 90 L 90 100 L 130 60 L 170 80 L 210 40 L 230 50 L 230 150 L 10 150 Z"
+          fill="url(#ec-grad)"
+        />
+        <circle cx="50" cy="90" r="4" :fill="primaryColor" />
+        <circle cx="130" cy="60" r="4" :fill="primaryColor" />
+        <circle cx="210" cy="40" r="5" :fill="primaryColor" />
+        <g class="dots">
+          <circle cx="210" cy="40" r="10" :fill="primaryColor" fill-opacity="0.18" />
+        </g>
+      </svg>
+    </div>
+    <h2 class="empty-title">{{ title || t('Reports are waiting on data') }}</h2>
+    <p class="empty-text">
+      {{
+        description ||
+        t(
+          'Log a few transactions and your income, expenses, ratios, and patterns will appear here.'
+        )
+      }}
+    </p>
+    <component
+      :is="to ? 'NuxtLink' : 'button'"
+      :to="to || undefined"
+      class="cta"
+      @click="$emit('action')"
+    >
+      <Plus :size="16" />
+      <span>{{ actionText || t('Add your first transaction') }}</span>
+    </component>
+  </section>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { Plus } from 'lucide-vue-next';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  primary: {
+    type: String,
+    default: '#047844'
+  },
+  to: {
+    type: String,
+    default: '/transactions/new'
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+  actionText: {
+    type: String,
+    default: ''
+  }
+});
+
+defineEmits(['action']);
+
+const primaryColor = computed(() => props.primary || '#047844');
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.empty-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: $spacing-3;
+  padding: $spacing-8 $spacing-4;
+  background: $bg-white;
+  border: 1px solid $border-color;
+  border-radius: 14px;
+  box-shadow: $elevation-1;
+  width: 100%;
+}
+
+.empty-art .dots {
+  transform-origin: 210px 40px;
+  animation: pulse 2.2s $easing-standard infinite;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 0.7;
+  }
+  50% {
+    transform: scale(1.4);
+    opacity: 0.2;
+  }
+}
+
+.empty-title {
+  font-size: $font-size-xl;
+  font-weight: $font-bold;
+  color: $text-primary;
+  margin: 0;
+}
+
+.empty-text {
+  font-size: $font-size-sm;
+  color: $text-muted;
+  max-width: 380px;
+  margin: 0;
+  line-height: 1.5;
+}
+
+.cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: $spacing-2;
+  padding: 10px 18px;
+  border-radius: 999px;
+  background: $primary;
+  color: $text-inverse;
+  font-weight: $font-semibold;
+  font-size: $font-size-sm;
+  text-decoration: none;
+  border: none;
+  cursor: pointer;
+  transition: all $duration-fast $easing-standard;
+
+  &:hover {
+    filter: brightness(0.95);
+    color: $text-inverse;
+  }
+}
+</style>
diff --git a/components/reports/ReportsTabs.stories.js b/components/reports/ReportsTabs.stories.js
new file mode 100644
index 0000000..c0309af
--- /dev/null
+++ b/components/reports/ReportsTabs.stories.js
@@ -0,0 +1,28 @@
+import ReportsTabs from './ReportsTabs.vue';
+import { ref } from 'vue';
+import { BarChart2, TrendingUp, PieChart, Activity } from 'lucide-vue-next';
+
+export default {
+  title: 'Reports/ReportsTabs',
+  component: ReportsTabs,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' }
+};
+
+const tabs = [
+  { value: 'overview',    label: 'Overview',    icon: BarChart2,   count: 4 },
+  { value: 'cashflow',    label: 'Cashflow',    icon: TrendingUp },
+  { value: 'categories',  label: 'Categories',  icon: PieChart,    count: 12 },
+  { value: 'net-worth',   label: 'Net Worth',   icon: Activity }
+];
+
+export const Default = {
+  render: () => ({
+    components: { ReportsTabs },
+    setup() {
+      const active = ref('overview');
+      return { tabs, active };
+    },
+    template: `<ReportsTabs :tabs="tabs" v-model="active" />`
+  })
+};
diff --git a/components/reports/ReportsTabs.vue b/components/reports/ReportsTabs.vue
new file mode 100644
index 0000000..2afd746
--- /dev/null
+++ b/components/reports/ReportsTabs.vue
@@ -0,0 +1,137 @@
+<template>
+  <nav class="tabs" role="tablist">
+    <button
+      v-for="(tab, i) in tabs"
+      :ref="(el) => (tabRefs[i] = el)"
+      :key="tab.value"
+      class="tab"
+      :class="{ 'tab--active': modelValue === tab.value }"
+      role="tab"
+      :aria-selected="modelValue === tab.value"
+      @click="$emit('update:modelValue', tab.value)"
+    >
+      <component :is="tab.icon" :size="16" class="tab-ico" />
+      <span class="tab-label">{{ tab.label }}</span>
+      <span v-if="tab.count !== undefined" class="tab-count">{{ tab.count }}</span>
+    </button>
+    <span class="tab-indicator" :style="indicatorStyle" />
+  </nav>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, nextTick } from 'vue';
+
+const props = defineProps({
+  modelValue: { type: String, required: true },
+  tabs: { type: Array, required: true }
+});
+
+defineEmits(['update:modelValue']);
+
+const tabRefs = ref([]);
+const indicator = ref({ left: 0, width: 0 });
+
+const indicatorStyle = computed(() => ({
+  transform: `translateX(${indicator.value.left}px)`,
+  width: `${indicator.value.width}px`
+}));
+
+const updateIndicator = async () => {
+  await nextTick();
+  const idx = props.tabs.findIndex((t) => t.value === props.modelValue);
+  const el = tabRefs.value[idx];
+  if (!el) return;
+  indicator.value = { left: el.offsetLeft, width: el.offsetWidth };
+};
+
+watch(() => props.modelValue, updateIndicator);
+watch(() => props.tabs.length, updateIndicator);
+onMounted(updateIndicator);
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.tabs {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  background: $bg-white;
+  border: 1px solid $border-color;
+  border-radius: 999px;
+  box-shadow: $elevation-1;
+  overflow-x: auto;
+  max-width: 100%;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar { display: none; }
+}
+
+.tab {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border-radius: 999px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: $text-muted;
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  white-space: nowrap;
+  transition: color $duration-base $easing-standard;
+
+  &:hover { color: $text-primary; }
+
+  &--active {
+    color: $primary;
+    &:hover { color: $primary; }
+  }
+}
+
+.tab-ico { flex-shrink: 0; }
+.tab-label { font-weight: inherit; }
+
+.tab-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  background: rgba(255, 255, 255, 0.2);
+  color: inherit;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  font-weight: $font-semibold;
+}
+
+.tab--active .tab-count {
+  background: $bg-white;
+  color: $primary;
+}
+
+.tab:not(.tab--active) .tab-count {
+  background: $bg-light;
+  color: $text-muted;
+}
+
+.tab-indicator {
+  position: absolute;
+  z-index: 0;
+  top: 4px;
+  bottom: 4px;
+  left: 0;
+  background: $primary-light;
+  border-radius: 999px;
+  transition:
+    transform $duration-base $easing-emphasized,
+    width $duration-base $easing-emphasized;
+}
+</style>
diff --git a/components/reports/SankeyFlow.stories.js b/components/reports/SankeyFlow.stories.js
new file mode 100644
index 0000000..5e0da94
--- /dev/null
+++ b/components/reports/SankeyFlow.stories.js
@@ -0,0 +1,51 @@
+import SankeyFlow from './SankeyFlow.vue';
+
+const flow = {
+  sources: [
+    { name: 'Salary', amount: 5200 },
+    { name: 'Freelance', amount: 1400 },
+    { name: 'Interest', amount: 180 }
+  ],
+  sinks: [
+    { name: 'Housing', amount: 2100, color: '#8b5cf6' },
+    { name: 'Food & Dining', amount: 850, color: '#10b981' },
+    { name: 'Transport', amount: 420, color: '#f59e0b' },
+    { name: 'Utilities', amount: 360, color: '#3b82f6' },
+    { name: 'Leisure', amount: 480, color: '#ec4899' }
+  ],
+  savings: 2570
+};
+
+export default {
+  title: 'Domain/Reports/SankeyFlow',
+  component: SankeyFlow,
+  args: {
+    flow,
+    currency: 'USD'
+  }
+};
+
+export const WithSavings = {};
+
+export const Deficit = {
+  args: {
+    flow: {
+      sources: [{ name: 'Salary', amount: 2600 }],
+      sinks: [
+        { name: 'Housing', amount: 2100, color: '#8b5cf6' },
+        { name: 'Food & Dining', amount: 850, color: '#10b981' }
+      ],
+      savings: -350
+    }
+  }
+};
+
+export const Empty = {
+  args: {
+    flow: {
+      sources: [],
+      sinks: [],
+      savings: 0
+    }
+  }
+};
diff --git a/components/reports/SankeyFlow.vue b/components/reports/SankeyFlow.vue
new file mode 100644
index 0000000..8144ec7
--- /dev/null
+++ b/components/reports/SankeyFlow.vue
@@ -0,0 +1,267 @@
+<template>
+  <div ref="containerRef" class="sankey">
+    <svg :viewBox="`0 0 ${width} ${height}`" preserveAspectRatio="xMidYMid meet" class="sankey-svg">
+      <defs>
+        <linearGradient
+          v-for="(link, i) in links"
+          :id="`link-grad-${uid}-${i}`"
+          :key="`grad-${i}`"
+          x1="0%"
+          x2="100%"
+          y1="0%"
+          y2="0%"
+        >
+          <stop offset="0%" :stop-color="link.startColor" stop-opacity="0.55" />
+          <stop offset="100%" :stop-color="link.endColor" stop-opacity="0.55" />
+        </linearGradient>
+      </defs>
+
+      <path
+        v-for="(link, i) in links"
+        :key="`link-${i}`"
+        :d="link.path"
+        :stroke="`url(#link-grad-${uid}-${i})`"
+        :stroke-width="link.thickness"
+        fill="none"
+        :class="['link', { 'link--dim': hoverNode && !link.connectsTo(hoverNode) }]"
+        @mouseenter="hoveredLinkIdx = i"
+        @mouseleave="hoveredLinkIdx = -1"
+      />
+
+      <g v-for="node in incomeNodes" :key="`in-${node.name}`">
+        <rect
+          :x="node.x"
+          :y="node.y"
+          :width="nodeWidth"
+          :height="node.height"
+          rx="3"
+          :fill="node.color"
+          @mouseenter="hoverNode = node.name"
+          @mouseleave="hoverNode = null"
+        />
+        <text
+          :x="node.x - 8"
+          :y="node.y + node.height / 2"
+          dy="0.32em"
+          text-anchor="end"
+          class="node-label"
+        >
+          {{ node.name }}
+        </text>
+        <text
+          :x="node.x - 8"
+          :y="node.y + node.height / 2 + 14"
+          dy="0.32em"
+          text-anchor="end"
+          class="node-amount"
+        >
+          {{ formatter(node.amount, currency) }}
+        </text>
+      </g>
+
+      <g v-for="node in expenseNodes" :key="`out-${node.name}`">
+        <rect
+          :x="node.x"
+          :y="node.y"
+          :width="nodeWidth"
+          :height="node.height"
+          rx="3"
+          :fill="node.color"
+          @mouseenter="hoverNode = node.name"
+          @mouseleave="hoverNode = null"
+        />
+        <text
+          :x="node.x + nodeWidth + 8"
+          :y="node.y + node.height / 2"
+          dy="0.32em"
+          class="node-label"
+        >
+          {{ node.name }}
+        </text>
+        <text
+          :x="node.x + nodeWidth + 8"
+          :y="node.y + node.height / 2 + 14"
+          dy="0.32em"
+          class="node-amount"
+        >
+          {{ formatter(node.amount, currency) }}
+        </text>
+      </g>
+    </svg>
+
+    <p v-if="!links.length" class="empty">
+      {{ t('Not enough data to draw a flow yet') }}
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, onMounted } from 'vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  flow: { type: Object, required: true },
+  currency: { type: String, default: 'USD' },
+  formatter: { type: Function, default: (n) => `${Math.round(n)}` }
+});
+
+const containerRef = ref(null);
+const hoverNode = ref(null);
+const hoveredLinkIdx = ref(-1);
+const uid = Math.random().toString(36).slice(2, 8);
+
+const width = 900;
+const height = 460;
+const nodeWidth = 14;
+const nodeGap = 8;
+const leftX = 80;
+const rightX = width - 80 - nodeWidth;
+
+const layoutNodes = (items, color) => {
+  if (!items.length) return [];
+  const total = items.reduce((s, i) => s + i.amount, 0) || 1;
+  const usable = height - (items.length - 1) * nodeGap - 40;
+  let cursor = 20;
+  return items.map((item) => {
+    const h = Math.max(8, (item.amount / total) * usable);
+    const node = {
+      ...item,
+      x: 0,
+      y: cursor,
+      height: h,
+      color: item.color || color
+    };
+    cursor += h + nodeGap;
+    return node;
+  });
+};
+
+const incomeNodes = computed(() => {
+  const items = props.flow.sources || [];
+  return layoutNodes(items, 'var(--color-income)').map((n) => ({
+    ...n,
+    x: leftX,
+    color: 'var(--color-income)'
+  }));
+});
+
+const expenseNodes = computed(() => {
+  const sinks = props.flow.sinks || [];
+  const savings = props.flow.savings || 0;
+  const all = [...sinks];
+  if (savings > 0) {
+    all.push({ name: t('Savings'), amount: savings, color: 'var(--color-primary)' });
+  }
+  return layoutNodes(all, 'var(--color-expense)').map((n) => ({
+    ...n,
+    x: rightX
+  }));
+});
+
+const links = computed(() => {
+  const inNodes = incomeNodes.value;
+  const outNodes = expenseNodes.value;
+  if (!inNodes.length || !outNodes.length) return [];
+  const totalIn = inNodes.reduce((s, n) => s + n.amount, 0) || 1;
+  const totalOut = outNodes.reduce((s, n) => s + n.amount, 0) || 1;
+
+  const inCursors = new Map(inNodes.map((n) => [n.name, n.y]));
+  const outCursors = new Map(outNodes.map((n) => [n.name, n.y]));
+
+  const out = [];
+  inNodes.forEach((src) => {
+    outNodes.forEach((dst) => {
+      const inShare = src.amount / totalIn;
+      const linkAmt = (dst.amount * inShare * totalIn) / totalOut;
+      if (linkAmt < 0.5) return;
+      const thickness = Math.max(1, (linkAmt / totalIn) * (height - 40));
+
+      const srcY = inCursors.get(src.name);
+      const dstY = outCursors.get(dst.name);
+      const srcHFrac = thickness;
+      const dstHFrac = thickness;
+
+      inCursors.set(src.name, srcY + srcHFrac);
+      outCursors.set(dst.name, dstY + dstHFrac);
+
+      const x0 = src.x + nodeWidth;
+      const x1 = dst.x;
+      const cx = (x0 + x1) / 2;
+      const y0 = srcY + srcHFrac / 2;
+      const y1 = dstY + dstHFrac / 2;
+
+      const path = `M ${x0},${y0} C ${cx},${y0} ${cx},${y1} ${x1},${y1}`;
+
+      out.push({
+        path,
+        thickness,
+        startColor: 'var(--color-income)',
+        endColor: dst.color || 'var(--color-expense)',
+        src: src.name,
+        dst: dst.name,
+        connectsTo: (name) => name === src.name || name === dst.name
+      });
+    });
+  });
+  return out;
+});
+
+onMounted(() => {
+  // Reserved for resize observer if needed
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.sankey {
+  position: relative;
+  width: 100%;
+  min-height: 460px;
+}
+
+.sankey-svg {
+  width: 100%;
+  height: 460px;
+  display: block;
+}
+
+.link {
+  transition: opacity $duration-base $easing-standard;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.9;
+  }
+
+  &--dim {
+    opacity: 0.12;
+  }
+}
+
+.node-label {
+  font-size: 12px;
+  fill: var(--color-text-primary);
+  font-weight: 600;
+  font-family: $font-family-sans;
+}
+
+.node-amount {
+  font-size: 10px;
+  fill: var(--color-text-muted);
+  font-family: $font-family-sans;
+  font-variant-numeric: tabular-nums;
+}
+
+.empty {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  color: $text-muted;
+  font-size: $font-size-sm;
+  margin: 0;
+}
+</style>
diff --git a/components/reports/SparkLine.stories.js b/components/reports/SparkLine.stories.js
new file mode 100644
index 0000000..7b9dac4
--- /dev/null
+++ b/components/reports/SparkLine.stories.js
@@ -0,0 +1,24 @@
+import SparkLine from './SparkLine.vue';
+
+export default {
+  title: 'Reports/SparkLine',
+  component: SparkLine,
+  tags: ['autodocs'],
+  argTypes: {
+    color: { control: 'color' },
+    width:  { control: { type: 'range', min: 60, max: 300 } },
+    height: { control: { type: 'range', min: 20, max: 100 } }
+  }
+};
+
+export const Positive = {
+  args: { values: [10, 25, 18, 40, 35, 55, 48, 70], color: '#10b981', width: 120, height: 36 }
+};
+
+export const Negative = {
+  args: { values: [70, 55, 48, 35, 40, 18, 25, 10], color: '#ef4444', width: 120, height: 36 }
+};
+
+export const Flat = {
+  args: { values: [30, 30, 30, 30], color: '#6366f1', width: 120, height: 36 }
+};
diff --git a/components/reports/SparkLine.vue b/components/reports/SparkLine.vue
new file mode 100644
index 0000000..6b66cad
--- /dev/null
+++ b/components/reports/SparkLine.vue
@@ -0,0 +1,78 @@
+<template>
+  <svg
+    class="sparkline"
+    :viewBox="`0 0 ${width} ${height}`"
+    preserveAspectRatio="none"
+    aria-hidden="true"
+  >
+    <defs>
+      <linearGradient :id="gradId" x1="0" y1="0" x2="0" y2="1">
+        <stop offset="0%" :stop-color="color" stop-opacity="0.32" />
+        <stop offset="100%" :stop-color="color" stop-opacity="0" />
+      </linearGradient>
+    </defs>
+    <path v-if="areaPath" :d="areaPath" :fill="`url(#${gradId})`" />
+    <path v-if="linePath" :d="linePath" :stroke="color" stroke-width="2" fill="none" />
+    <circle
+      v-if="lastPoint"
+      :cx="lastPoint.x"
+      :cy="lastPoint.y"
+      r="3"
+      :fill="color"
+      stroke="var(--color-bg-white)"
+      stroke-width="1.5"
+    />
+  </svg>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  values: { type: Array, required: true }, // numbers oldest -> newest
+  color: { type: String, default: '#10b981' },
+  width: { type: Number, default: 120 },
+  height: { type: Number, default: 36 }
+});
+
+// Stable unique ID per component instance — avoids gradient conflicts when multiple instances render
+const gradId = computed(() => `spark-grad-${Math.random().toString(36).slice(2, 8)}`);
+
+const points = computed(() => {
+  if (!props.values?.length) return [];
+  const min = Math.min(...props.values);
+  const max = Math.max(...props.values);
+  const span = max - min || 1;
+  const padY = 4;
+  const usableH = props.height - padY * 2;
+  const stepX = props.values.length > 1 ? props.width / (props.values.length - 1) : 0;
+  return props.values.map((v, i) => ({
+    x: i * stepX,
+    y: padY + usableH - ((v - min) / span) * usableH
+  }));
+});
+
+const linePath = computed(() => {
+  const pts = points.value;
+  if (pts.length < 2) return '';
+  return pts.reduce((d, p, i) => (i === 0 ? `M ${p.x},${p.y}` : `${d} L ${p.x},${p.y}`), '');
+});
+
+const areaPath = computed(() => {
+  const pts = points.value;
+  if (pts.length < 2) return '';
+  const line = pts.reduce((d, p, i) => (i === 0 ? `M ${p.x},${p.y}` : `${d} L ${p.x},${p.y}`), '');
+  return `${line} L ${pts[pts.length - 1].x},${props.height} L ${pts[0].x},${props.height} Z`;
+});
+
+const lastPoint = computed(() => points.value[points.value.length - 1] || null);
+</script>
+
+<style lang="scss" scoped>
+.sparkline {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+</style>
diff --git a/components/reports/charts/CashflowLineChart.stories.js b/components/reports/charts/CashflowLineChart.stories.js
new file mode 100644
index 0000000..6a0ad7d
--- /dev/null
+++ b/components/reports/charts/CashflowLineChart.stories.js
@@ -0,0 +1,38 @@
+import CashflowLineChart from './CashflowLineChart.vue';
+
+const generateMonths = (n = 12) =>
+  Array.from({ length: n }, (_, i) => {
+    const d = new Date(2024, i, 1);
+    const label = d.toLocaleDateString('en', { month: 'short' });
+    const income = Math.round(1500 + Math.random() * 1000);
+    const expense = Math.round(900 + Math.random() * 800);
+    return { label, income, expense, net: income - expense };
+  });
+
+export default {
+  title: 'Reports/Charts/CashflowLineChart',
+  component: CashflowLineChart,
+  args: {
+    currency: 'USD',
+    formatter: (n) => `$${n.toLocaleString()}`
+  }
+};
+
+export const Default = {
+  args: { data: generateMonths(12) }
+};
+
+export const Weekly = {
+  args: {
+    data: Array.from({ length: 8 }, (_, i) => ({
+      label: `W${i + 1}`,
+      income: Math.round(300 + Math.random() * 200),
+      expense: Math.round(200 + Math.random() * 200),
+      net: Math.round(Math.random() * 200 - 50)
+    }))
+  }
+};
+
+export const Empty = {
+  args: { data: [] }
+};
diff --git a/components/reports/charts/CashflowLineChart.vue b/components/reports/charts/CashflowLineChart.vue
new file mode 100644
index 0000000..1a323e5
--- /dev/null
+++ b/components/reports/charts/CashflowLineChart.vue
@@ -0,0 +1,335 @@
+<template>
+  <div ref="containerRef" class="chart">
+    <svg
+      ref="svgRef"
+      :viewBox="`0 0 ${width} ${height}`"
+      preserveAspectRatio="none"
+      class="svg"
+      @mousemove="onMove"
+      @mouseleave="onLeave"
+    >
+      <!-- y grid + ticks -->
+      <g>
+        <template v-for="(tick, i) in yTicks" :key="`y-${i}`">
+          <line
+            :x1="padL"
+            :x2="width - padR"
+            :y1="yScale(tick)"
+            :y2="yScale(tick)"
+            class="grid"
+            stroke-dasharray="3 4"
+          />
+          <text :x="padL - 6" :y="yScale(tick) + 4" text-anchor="end" class="axis">
+            {{ shortNum(tick) }}
+          </text>
+        </template>
+      </g>
+
+      <!-- x labels -->
+      <template v-for="(p, i) in points" :key="`x-${i}`">
+        <text
+          v-if="data[i]"
+          :x="p.income.x"
+          :y="height - padB + 16"
+          text-anchor="middle"
+          class="axis"
+        >
+          {{ data[i].label }}
+        </text>
+      </template>
+
+      <!-- hover guide -->
+      <line
+        v-if="hover >= 0"
+        :x1="points[hover].income.x"
+        :x2="points[hover].income.x"
+        :y1="padT"
+        :y2="height - padB"
+        class="hover"
+        stroke-dasharray="2 4"
+      />
+
+      <!-- income area + line -->
+      <path :d="areaPath('income')" class="area area--income" />
+      <path :d="linePath('income')" class="line line--income" stroke-width="2" />
+
+      <!-- expense area + line -->
+      <path :d="areaPath('expense')" class="area area--expense" />
+      <path :d="linePath('expense')" class="line line--expense" stroke-width="2" />
+
+      <!-- net dashed line -->
+      <path :d="linePath('net')" class="line line--net" stroke-width="2" stroke-dasharray="5 4" />
+
+      <!-- points on hover -->
+      <template v-if="hover >= 0">
+        <circle
+          :cx="points[hover].income.x"
+          :cy="points[hover].income.y"
+          r="4"
+          class="dot dot--income"
+        />
+        <circle
+          :cx="points[hover].expense.x"
+          :cy="points[hover].expense.y"
+          r="4"
+          class="dot dot--expense"
+        />
+        <circle :cx="points[hover].net.x" :cy="points[hover].net.y" r="4" class="dot dot--net" />
+      </template>
+    </svg>
+
+    <!-- legend -->
+    <ul class="legend">
+      <li><span class="sw sw--income" />{{ t('Income') }}</li>
+      <li><span class="sw sw--expense" />{{ t('Expense') }}</li>
+      <li><span class="sw sw--net" />{{ t('Net') }}</li>
+    </ul>
+
+    <div v-if="hover >= 0 && data[hover]" class="tooltip" :style="tooltipStyle">
+      <p class="tooltip-title">{{ data[hover].label }}</p>
+      <p class="tip-row">
+        <span class="sw sw--income" />{{ t('Income') }}:
+        {{ formatter(data[hover].income, currency) }}
+      </p>
+      <p class="tip-row">
+        <span class="sw sw--expense" />{{ t('Expense') }}:
+        {{ formatter(data[hover].expense, currency) }}
+      </p>
+      <p class="tip-row">
+        <span class="sw sw--net" />{{ t('Net') }}: {{ formatter(data[hover].net, currency) }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+const i18nInstance = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18nInstance ? i18nInstance.t : (k) => k;
+
+const props = defineProps({
+  data: { type: Array, required: true }, // [{ label, income, expense, net }]
+  currency: { type: String, default: 'USD' },
+  formatter: { type: Function, default: (n) => `${Math.round(n)}` }
+});
+
+const width = 760;
+const height = 280;
+const padL = 56;
+const padR = 16;
+const padT = 16;
+const padB = 32;
+
+const svgRef = ref(null);
+const containerRef = ref(null);
+const hover = ref(-1);
+const tooltipStyle = ref({});
+
+const maxVal = computed(() => {
+  const arr = [
+    ...props.data.map((d) => d.income),
+    ...props.data.map((d) => d.expense),
+    ...props.data.map((d) => d.net)
+  ];
+  return Math.max(1, ...arr.map((v) => Math.abs(v)));
+});
+
+const niceStep = (max) => {
+  const raw = max / 4;
+  const pow10 = Math.pow(10, Math.floor(Math.log10(raw)));
+  const n = raw / pow10;
+  return (n <= 1 ? 1 : n <= 2 ? 2 : n <= 5 ? 5 : 10) * pow10;
+};
+const step = computed(() => niceStep(maxVal.value));
+const yMax = computed(() => Math.ceil(maxVal.value / step.value) * step.value);
+const yTicks = computed(() => Array.from({ length: 5 }, (_, i) => i * step.value));
+
+const xStep = computed(() => (width - padL - padR) / Math.max(props.data.length - 1, 1));
+const yScale = (v) => padT + (height - padT - padB) * (1 - v / yMax.value);
+
+const points = computed(() =>
+  props.data.map((d, i) => {
+    const x = padL + i * xStep.value;
+    return {
+      income: { x, y: yScale(d.income) },
+      expense: { x, y: yScale(d.expense) },
+      net: { x, y: yScale(Math.max(0, d.net)) }
+    };
+  })
+);
+
+const linePath = (key) => {
+  const pts = points.value.map((p) => p[key]);
+  if (!pts.length) return '';
+  return pts.reduce((d, p, i) => (i === 0 ? `M ${p.x},${p.y}` : `${d} L ${p.x},${p.y}`), '');
+};
+
+const areaPath = (key) => {
+  const pts = points.value.map((p) => p[key]);
+  if (pts.length < 2) return '';
+  const line = pts.reduce((d, p, i) => (i === 0 ? `M ${p.x},${p.y}` : `${d} L ${p.x},${p.y}`), '');
+  return `${line} L ${pts[pts.length - 1].x},${height - padB} L ${pts[0].x},${height - padB} Z`;
+};
+
+const shortNum = (n) => {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(0)}k`;
+  return `${Math.round(n)}`;
+};
+
+const onMove = (e) => {
+  if (!svgRef.value) return;
+  const rect = svgRef.value.getBoundingClientRect();
+  const xView = (e.clientX - rect.left) * (width / rect.width);
+  const idx = Math.round((xView - padL) / xStep.value);
+  hover.value = Math.max(0, Math.min(points.value.length - 1, idx));
+
+  const wrapRect = containerRef.value.getBoundingClientRect();
+  const left = e.clientX - wrapRect.left + 12;
+  const top = e.clientY - wrapRect.top - 56;
+  tooltipStyle.value = {
+    left: `${Math.max(8, Math.min(wrapRect.width - 200, left))}px`,
+    top: `${Math.max(8, top)}px`
+  };
+};
+
+const onLeave = () => {
+  hover.value = -1;
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../../assets/scss/_vars.scss' as *;
+
+.chart {
+  position: relative;
+  width: 100%;
+  height: 280px;
+}
+
+.svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.grid {
+  stroke: $chart-grid;
+}
+.hover {
+  stroke: $text-muted;
+  opacity: 0.6;
+}
+.axis {
+  fill: $text-muted;
+  font-size: 10px;
+  font-family: $font-family-sans;
+}
+
+.line {
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+
+  &--income {
+    stroke: var(--color-income);
+  }
+  &--expense {
+    stroke: var(--color-expense);
+  }
+  &--net {
+    stroke: var(--color-text-secondary);
+  }
+}
+
+.area {
+  &--income {
+    fill: rgba(var(--color-income-rgb), 0.1);
+  }
+  &--expense {
+    fill: rgba(var(--color-expense-rgb), 0.08);
+  }
+}
+
+.dot {
+  stroke: var(--color-bg-white);
+  stroke-width: 1.5;
+
+  &--income {
+    fill: var(--color-income);
+  }
+  &--expense {
+    fill: var(--color-expense);
+  }
+  &--net {
+    fill: var(--color-text-secondary);
+  }
+}
+
+.legend {
+  position: absolute;
+  top: 0;
+  right: 0;
+  list-style: none;
+  display: inline-flex;
+  gap: $spacing-3;
+  margin: 0;
+  padding: 0;
+  font-size: 11px;
+  color: $text-muted;
+
+  li {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+  }
+}
+
+.sw {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+
+  &--income {
+    background: var(--color-income);
+  }
+  &--expense {
+    background: var(--color-expense);
+  }
+  &--net {
+    background: var(--color-text-secondary);
+  }
+}
+
+.tooltip {
+  position: absolute;
+  min-width: 180px;
+  background: $bg-white;
+  border: 1px solid $border-color;
+  border-radius: 10px;
+  box-shadow: $elevation-3;
+  padding: $spacing-2 $spacing-3;
+  pointer-events: none;
+  font-size: $font-size-xs;
+
+  p {
+    margin: 0;
+  }
+}
+
+.tooltip-title {
+  font-weight: $font-bold;
+  color: $text-primary;
+  margin-bottom: 4px !important;
+}
+
+.tip-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: $text-secondary;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.5;
+}
+</style>
diff --git a/components/reports/charts/CategoryDonut.stories.js b/components/reports/charts/CategoryDonut.stories.js
new file mode 100644
index 0000000..586110e
--- /dev/null
+++ b/components/reports/charts/CategoryDonut.stories.js
@@ -0,0 +1,36 @@
+import CategoryDonut from './CategoryDonut.vue';
+
+const sampleCategories = [
+  { name: 'Food & Drink', value: 420, color: '#f87171' },
+  { name: 'Transport', value: 180, color: '#fb923c' },
+  { name: 'Shopping', value: 310, color: '#a78bfa' },
+  { name: 'Utilities', value: 90, color: '#60a5fa' },
+  { name: 'Entertainment', value: 145, color: '#34d399' }
+];
+
+const total = sampleCategories.reduce((s, d) => s + d.value, 0);
+
+export default {
+  title: 'Reports/Charts/CategoryDonut',
+  component: CategoryDonut,
+  args: {
+    currency: 'USD',
+    formatter: (n) => `$${n.toLocaleString()}`
+  }
+};
+
+export const Default = {
+  args: { data: sampleCategories, total, centerLabel: 'Total' }
+};
+
+export const SingleCategory = {
+  args: {
+    data: [{ name: 'Food & Drink', value: 800, color: '#f87171' }],
+    total: 800,
+    centerLabel: 'Spending'
+  }
+};
+
+export const Empty = {
+  args: { data: [], total: 0, centerLabel: 'Total' }
+};
diff --git a/components/reports/charts/CategoryDonut.vue b/components/reports/charts/CategoryDonut.vue
new file mode 100644
index 0000000..daf7247
--- /dev/null
+++ b/components/reports/charts/CategoryDonut.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class="donut-wrap">
+    <div
+      ref="ringRef"
+      class="ring"
+      :style="{ background: gradient }"
+      @mousemove="onMove"
+      @mouseleave="onLeave"
+    >
+      <div class="center">
+        <p class="center-label">{{ centerLabel }}</p>
+        <p class="center-value">{{ formatter(total, currency) }}</p>
+      </div>
+    </div>
+
+    <ul class="legend">
+      <li
+        v-for="(d, i) in data"
+        :key="d.name"
+        class="leg"
+        :class="{ 'leg--dim': hover >= 0 && hover !== i }"
+      >
+        <span class="dot" :style="{ background: d.color }" />
+        <span class="name">{{ d.name }}</span>
+        <span class="pct">{{ pct(d.value) }}%</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+  data: { type: Array, required: true }, // [{ name, value, color }]
+  total: { type: Number, required: true },
+  centerLabel: { type: String, default: 'Total' },
+  currency: { type: String, default: 'USD' },
+  formatter: { type: Function, default: (n) => `${Math.round(n)}` }
+});
+
+const ringRef = ref(null);
+const hover = ref(-1);
+
+const sum = computed(() => props.data.reduce((s, d) => s + d.value, 0) || 1);
+
+const gradient = computed(() => {
+  let cursor = 0;
+  const stops = props.data.map((d) => {
+    const start = (cursor / sum.value) * 360;
+    cursor += d.value;
+    const end = (cursor / sum.value) * 360;
+    return `${d.color} ${start}deg ${end}deg`;
+  });
+  return `conic-gradient(${stops.join(', ')})`;
+});
+
+const pct = (v) => ((v / sum.value) * 100).toFixed(0);
+
+const onMove = (e) => {
+  const el = ringRef.value;
+  if (!el) return;
+  const rect = el.getBoundingClientRect();
+  const cx = rect.left + rect.width / 2;
+  const cy = rect.top + rect.height / 2;
+  const dx = e.clientX - cx;
+  const dy = e.clientY - cy;
+  const r = Math.sqrt(dx * dx + dy * dy);
+  if (r > rect.width / 2) {
+    hover.value = -1;
+    return;
+  }
+  let ang = (Math.atan2(dy, dx) * 180) / Math.PI;
+  ang = (ang + 90 + 360) % 360;
+  let acc = 0;
+  for (let i = 0; i < props.data.length; i += 1) {
+    const span = (props.data[i].value / sum.value) * 360;
+    if (ang >= acc && ang < acc + span) {
+      hover.value = i;
+      return;
+    }
+    acc += span;
+  }
+  hover.value = -1;
+};
+const onLeave = () => {
+  hover.value = -1;
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../../assets/scss/_vars.scss' as *;
+
+.donut-wrap {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: $spacing-3;
+  align-items: center;
+
+  @media (min-width: $breakpoint-md) {
+    grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
+    gap: $spacing-4;
+  }
+}
+
+.ring {
+  position: relative;
+  width: 160px;
+  height: 160px;
+  border-radius: 50%;
+  background: $bg-light;
+  margin: 0 auto;
+
+  @media (min-width: $breakpoint-md) {
+    width: 180px;
+    height: 180px;
+    margin: 0;
+  }
+}
+
+.ring::after {
+  content: '';
+  position: absolute;
+  inset: 22px;
+  background: $bg-white;
+  border-radius: 50%;
+}
+
+.center {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  text-align: center;
+  z-index: 1;
+}
+
+.center-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: $font-semibold;
+  color: $text-muted;
+  margin: 0;
+}
+
+.center-value {
+  font-size: 1.2rem;
+  font-weight: $font-bold;
+  color: $text-primary;
+  font-variant-numeric: tabular-nums;
+  margin: 4px 0 0;
+}
+
+.legend {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.leg {
+  display: grid;
+  grid-template-columns: 12px 1fr auto;
+  gap: 8px;
+  align-items: center;
+  padding: 4px 0;
+  border-bottom: 1px dashed $border-color;
+  font-size: $font-size-sm;
+  transition: opacity $duration-fast $easing-standard;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &--dim {
+    opacity: 0.4;
+  }
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+}
+
+.name {
+  color: $text-primary;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pct {
+  font-weight: $font-bold;
+  color: $text-secondary;
+  font-variant-numeric: tabular-nums;
+}
+</style>
diff --git a/components/reports/charts/CumulativeNetArea.stories.js b/components/reports/charts/CumulativeNetArea.stories.js
new file mode 100644
index 0000000..5f8bfe4
--- /dev/null
+++ b/components/reports/charts/CumulativeNetArea.stories.js
@@ -0,0 +1,38 @@
+import CumulativeNetArea from './CumulativeNetArea.vue';
+
+const generateMonths = (n = 12) =>
+  Array.from({ length: n }, (_, i) => {
+    const d = new Date(2024, i, 1);
+    const label = d.toLocaleDateString('en', { month: 'short' });
+    const running = (i + 1) * 300 + Math.round((Math.random() - 0.4) * 500);
+    return { label, cumulative: running };
+  });
+
+export default {
+  title: 'Reports/Charts/CumulativeNetArea',
+  component: CumulativeNetArea,
+  args: {
+    currency: 'USD',
+    formatter: (n) => `$${n.toLocaleString()}`
+  }
+};
+
+export const Default = {
+  args: { data: generateMonths(12) }
+};
+
+export const NegativePeriod = {
+  args: {
+    data: [
+      { label: 'Jan', cumulative: 200 },
+      { label: 'Feb', cumulative: -100 },
+      { label: 'Mar', cumulative: 150 },
+      { label: 'Apr', cumulative: -50 },
+      { label: 'May', cumulative: 400 }
+    ]
+  }
+};
+
+export const Empty = {
+  args: { data: [] }
+};
diff --git a/components/reports/charts/CumulativeNetArea.vue b/components/reports/charts/CumulativeNetArea.vue
new file mode 100644
index 0000000..7e034e7
--- /dev/null
+++ b/components/reports/charts/CumulativeNetArea.vue
@@ -0,0 +1,219 @@
+<template>
+  <div ref="containerRef" class="chart">
+    <svg
+      ref="svgRef"
+      :viewBox="`0 0 ${width} ${height}`"
+      preserveAspectRatio="none"
+      class="svg"
+      @mousemove="onMove"
+      @mouseleave="onLeave"
+    >
+      <defs>
+        <linearGradient id="net-area" x1="0" x2="0" y1="0" y2="1">
+          <stop offset="0%" stop-color="var(--color-primary)" stop-opacity="0.28" />
+          <stop offset="100%" stop-color="var(--color-primary)" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+
+      <line :x1="padL" :x2="width - padR" :y1="zeroY" :y2="zeroY" class="zero-line" />
+
+      <template v-for="(tick, i) in yTicks" :key="`y-${i}`">
+        <line
+          :x1="padL"
+          :x2="width - padR"
+          :y1="yScale(tick)"
+          :y2="yScale(tick)"
+          class="grid"
+          stroke-dasharray="3 4"
+        />
+        <text :x="padL - 6" :y="yScale(tick) + 4" text-anchor="end" class="axis">
+          {{ shortNum(tick) }}
+        </text>
+      </template>
+
+      <template v-for="(p, i) in points" :key="`x-${i}`">
+        <text
+          v-if="i === 0 || i === points.length - 1 || i === Math.floor(points.length / 2)"
+          :x="p.x"
+          :y="height - padB + 16"
+          text-anchor="middle"
+          class="axis"
+        >
+          {{ data[i].label }}
+        </text>
+      </template>
+
+      <path :d="areaPath" fill="url(#net-area)" />
+      <path :d="linePath" class="line" stroke-width="2.4" />
+
+      <line
+        v-if="hover >= 0"
+        :x1="points[hover].x"
+        :x2="points[hover].x"
+        :y1="padT"
+        :y2="height - padB"
+        class="hover-line"
+        stroke-dasharray="2 4"
+      />
+      <circle v-if="hover >= 0" :cx="points[hover].x" :cy="points[hover].y" r="4" class="dot" />
+    </svg>
+
+    <div v-if="hover >= 0 && data[hover]" class="tooltip" :style="tooltipStyle">
+      <p class="tooltip-title">{{ data[hover].label }}</p>
+      <p class="tooltip-val">{{ formatter(data[hover].cumulative, currency) }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+  data: { type: Array, required: true }, // [{ label, cumulative }]
+  currency: { type: String, default: 'USD' },
+  formatter: { type: Function, default: (n) => `${Math.round(n)}` }
+});
+
+const width = 760;
+const height = 240;
+const padL = 56;
+const padR = 16;
+const padT = 16;
+const padB = 32;
+
+const svgRef = ref(null);
+const containerRef = ref(null);
+const hover = ref(-1);
+const tooltipStyle = ref({});
+
+const maxAbs = computed(() => Math.max(1, ...props.data.map((d) => Math.abs(d.cumulative))));
+const niceStep = (max) => {
+  const raw = max / 4;
+  const pow10 = Math.pow(10, Math.floor(Math.log10(raw)));
+  const n = raw / pow10;
+  return (n <= 1 ? 1 : n <= 2 ? 2 : n <= 5 ? 5 : 10) * pow10;
+};
+const step = computed(() => niceStep(maxAbs.value));
+const yMax = computed(() => Math.ceil(maxAbs.value / step.value) * step.value);
+const yTicks = computed(() => Array.from({ length: 5 }, (_, i) => i * step.value));
+
+const xStep = computed(() => (width - padL - padR) / Math.max(props.data.length - 1, 1));
+const yScale = (v) => padT + (height - padT - padB) * (1 - v / yMax.value);
+const zeroY = computed(() => yScale(0));
+
+const points = computed(() =>
+  props.data.map((d, i) => ({
+    x: padL + i * xStep.value,
+    y: yScale(Math.max(0, d.cumulative))
+  }))
+);
+
+const linePath = computed(() => {
+  const pts = points.value;
+  if (!pts.length) return '';
+  return pts.reduce((d, p, i) => (i === 0 ? `M ${p.x},${p.y}` : `${d} L ${p.x},${p.y}`), '');
+});
+
+const areaPath = computed(() => {
+  const pts = points.value;
+  if (pts.length < 2) return '';
+  const line = pts.reduce((d, p, i) => (i === 0 ? `M ${p.x},${p.y}` : `${d} L ${p.x},${p.y}`), '');
+  return `${line} L ${pts[pts.length - 1].x},${zeroY.value} L ${pts[0].x},${zeroY.value} Z`;
+});
+
+const shortNum = (n) => {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(0)}k`;
+  return `${Math.round(n)}`;
+};
+
+const onMove = (e) => {
+  if (!svgRef.value) return;
+  const rect = svgRef.value.getBoundingClientRect();
+  const xView = (e.clientX - rect.left) * (width / rect.width);
+  const idx = Math.round((xView - padL) / xStep.value);
+  hover.value = Math.max(0, Math.min(points.value.length - 1, idx));
+
+  const wrapRect = containerRef.value.getBoundingClientRect();
+  const left = e.clientX - wrapRect.left + 12;
+  const top = e.clientY - wrapRect.top - 56;
+  tooltipStyle.value = {
+    left: `${Math.max(8, Math.min(wrapRect.width - 180, left))}px`,
+    top: `${Math.max(8, top)}px`
+  };
+};
+
+const onLeave = () => {
+  hover.value = -1;
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../../assets/scss/_vars.scss' as *;
+
+.chart {
+  position: relative;
+  width: 100%;
+  height: 240px;
+}
+
+.svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.grid {
+  stroke: $chart-grid;
+}
+.zero-line {
+  stroke: $border-color;
+  stroke-width: 1;
+}
+.hover-line {
+  stroke: $text-muted;
+  opacity: 0.6;
+}
+.axis {
+  fill: $text-muted;
+  font-size: 10px;
+  font-family: $font-family-sans;
+}
+.line {
+  fill: none;
+  stroke: var(--color-primary);
+  stroke-linecap: round;
+}
+.dot {
+  fill: var(--color-primary);
+  stroke: var(--color-bg-white);
+  stroke-width: 1.5;
+}
+
+.tooltip {
+  position: absolute;
+  min-width: 160px;
+  background: $bg-white;
+  border: 1px solid $border-color;
+  border-radius: 10px;
+  box-shadow: $elevation-3;
+  padding: $spacing-2 $spacing-3;
+  pointer-events: none;
+  font-size: $font-size-xs;
+
+  p {
+    margin: 0;
+  }
+}
+
+.tooltip-title {
+  font-weight: $font-semibold;
+  color: $text-muted;
+}
+.tooltip-val {
+  font-weight: $font-bold;
+  color: $text-primary;
+  font-variant-numeric: tabular-nums;
+  font-size: $font-size-sm;
+}
+</style>
diff --git a/components/reports/charts/DailyBarChart.stories.js b/components/reports/charts/DailyBarChart.stories.js
new file mode 100644
index 0000000..8c3f2c9
--- /dev/null
+++ b/components/reports/charts/DailyBarChart.stories.js
@@ -0,0 +1,32 @@
+import DailyBarChart from './DailyBarChart.vue';
+
+const generateDays = (n = 30) =>
+  Array.from({ length: n }, (_, i) => {
+    const d = new Date(2024, 0, i + 1);
+    return {
+      date: d.toISOString().split('T')[0],
+      expense: Math.round(Math.random() * 800 + 50),
+      txCount: Math.round(Math.random() * 8 + 1)
+    };
+  });
+
+export default {
+  title: 'Reports/Charts/DailyBarChart',
+  component: DailyBarChart,
+  args: {
+    currency: 'USD',
+    formatter: (n) => `$${n.toLocaleString()}`
+  }
+};
+
+export const Default = {
+  args: { data: generateDays(30) }
+};
+
+export const SparseData = {
+  args: { data: generateDays(7) }
+};
+
+export const Empty = {
+  args: { data: [] }
+};
diff --git a/components/reports/charts/DailyBarChart.vue b/components/reports/charts/DailyBarChart.vue
new file mode 100644
index 0000000..2bda3c7
--- /dev/null
+++ b/components/reports/charts/DailyBarChart.vue
@@ -0,0 +1,224 @@
+<template>
+  <div ref="containerRef" class="chart">
+    <svg
+      ref="svgRef"
+      :viewBox="`0 0 ${width} ${height}`"
+      preserveAspectRatio="none"
+      class="svg"
+      @mousemove="onMove"
+      @mouseleave="onLeave"
+    >
+      <template v-for="(tick, i) in yTicks" :key="`y-${i}`">
+        <line
+          :x1="padL"
+          :x2="width - padR"
+          :y1="yScale(tick)"
+          :y2="yScale(tick)"
+          class="grid"
+          stroke-dasharray="3 4"
+        />
+        <text :x="padL - 6" :y="yScale(tick) + 4" text-anchor="end" class="axis">
+          {{ shortNum(tick) }}
+        </text>
+      </template>
+
+      <template v-for="(b, i) in bars" :key="`bar-${i}`">
+        <rect
+          :x="b.x"
+          :y="b.y"
+          :width="b.w"
+          :height="b.h"
+          rx="2"
+          :class="['bar', { 'bar--hover': hover === i, 'bar--zero': b.value === 0 }]"
+        />
+      </template>
+
+      <template v-for="(label, i) in xLabels" :key="`xl-${i}`">
+        <text :x="label.x" :y="height - padB + 14" text-anchor="middle" class="axis">
+          {{ label.text }}
+        </text>
+      </template>
+    </svg>
+
+    <div v-if="hover >= 0 && data[hover]" class="tooltip" :style="tooltipStyle">
+      <p class="tooltip-title">{{ formatLong(data[hover].date) }}</p>
+      <p class="tooltip-val">{{ formatter(data[hover].expense, currency) }}</p>
+      <p v-if="data[hover].txCount" class="tooltip-meta">
+        {{ data[hover].txCount }} {{ t('transactions') }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+const i18nInstance = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18nInstance ? i18nInstance.t : (k) => k;
+const locale = i18nInstance ? i18nInstance.locale : ref('en');
+
+const props = defineProps({
+  data: { type: Array, required: true }, // [{ date, expense, txCount }]
+  currency: { type: String, default: 'USD' },
+  formatter: { type: Function, default: (n) => `${Math.round(n)}` }
+});
+
+const width = 760;
+const height = 240;
+const padL = 56;
+const padR = 16;
+const padT = 16;
+const padB = 28;
+
+const svgRef = ref(null);
+const containerRef = ref(null);
+const hover = ref(-1);
+const tooltipStyle = ref({});
+
+const maxVal = computed(() => Math.max(1, ...props.data.map((d) => d.expense)));
+const niceStep = (max) => {
+  const raw = max / 4;
+  const pow10 = Math.pow(10, Math.floor(Math.log10(raw)));
+  const n = raw / pow10;
+  return (n <= 1 ? 1 : n <= 2 ? 2 : n <= 5 ? 5 : 10) * pow10;
+};
+const step = computed(() => niceStep(maxVal.value));
+const yMax = computed(() => Math.ceil(maxVal.value / step.value) * step.value);
+const yTicks = computed(() => Array.from({ length: 5 }, (_, i) => i * step.value));
+
+const usableW = computed(() => width - padL - padR);
+const gap = 2;
+const barW = computed(() => Math.max(2, usableW.value / Math.max(1, props.data.length) - gap));
+const yScale = (v) => padT + (height - padT - padB) * (1 - v / yMax.value);
+
+const bars = computed(() =>
+  props.data.map((d, i) => {
+    const x = padL + i * (barW.value + gap);
+    const y = yScale(d.expense);
+    return {
+      x,
+      y,
+      w: barW.value,
+      h: Math.max(d.expense === 0 ? 1 : 2, height - padB - y),
+      value: d.expense
+    };
+  })
+);
+
+// Sparse x labels - first, middle, last
+const xLabels = computed(() => {
+  if (!props.data.length) return [];
+  const idxs = [0, Math.floor(props.data.length / 2), props.data.length - 1].filter(
+    (v, i, arr) => arr.indexOf(v) === i
+  );
+  return idxs.map((i) => ({
+    x: padL + i * (barW.value + gap) + barW.value / 2,
+    text: shortDate(props.data[i].date)
+  }));
+});
+
+const shortNum = (n) => {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(0)}k`;
+  return `${Math.round(n)}`;
+};
+
+const shortDate = (iso) =>
+  new Intl.DateTimeFormat(locale.value, { month: 'short', day: 'numeric' }).format(
+    new Date(iso + 'T00:00:00')
+  );
+
+const formatLong = (iso) =>
+  new Intl.DateTimeFormat(locale.value, {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric'
+  }).format(new Date(iso + 'T00:00:00'));
+
+const onMove = (e) => {
+  if (!svgRef.value) return;
+  const rect = svgRef.value.getBoundingClientRect();
+  const xView = (e.clientX - rect.left) * (width / rect.width);
+  const idx = Math.floor((xView - padL) / (barW.value + gap));
+  hover.value = Math.max(0, Math.min(props.data.length - 1, idx));
+
+  const wrapRect = containerRef.value.getBoundingClientRect();
+  const left = e.clientX - wrapRect.left + 12;
+  const top = e.clientY - wrapRect.top - 56;
+  tooltipStyle.value = {
+    left: `${Math.max(8, Math.min(wrapRect.width - 200, left))}px`,
+    top: `${Math.max(8, top)}px`
+  };
+};
+
+const onLeave = () => {
+  hover.value = -1;
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../../assets/scss/_vars.scss' as *;
+
+.chart {
+  position: relative;
+  width: 100%;
+  height: 240px;
+}
+
+.svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.grid {
+  stroke: $chart-grid;
+}
+.axis {
+  fill: $text-muted;
+  font-size: 10px;
+  font-family: $font-family-sans;
+}
+
+.bar {
+  fill: rgba(var(--color-expense-rgb), 0.7);
+  transition: fill $duration-fast $easing-standard;
+
+  &--hover {
+    fill: var(--color-expense);
+  }
+  &--zero {
+    fill: $border-color;
+  }
+}
+
+.tooltip {
+  position: absolute;
+  min-width: 160px;
+  background: $bg-white;
+  border: 1px solid $border-color;
+  border-radius: 10px;
+  box-shadow: $elevation-3;
+  padding: $spacing-2 $spacing-3;
+  pointer-events: none;
+  font-size: $font-size-xs;
+
+  p {
+    margin: 0;
+  }
+}
+
+.tooltip-title {
+  font-weight: $font-semibold;
+  color: $text-muted;
+}
+.tooltip-val {
+  font-weight: $font-bold;
+  color: var(--color-expense);
+  font-variant-numeric: tabular-nums;
+  font-size: $font-size-sm;
+}
+.tooltip-meta {
+  color: $text-muted;
+}
+</style>
diff --git a/components/settings/CollapsibleSection.stories.js b/components/settings/CollapsibleSection.stories.js
new file mode 100644
index 0000000..a9081a6
--- /dev/null
+++ b/components/settings/CollapsibleSection.stories.js
@@ -0,0 +1,37 @@
+import CollapsibleSection from './CollapsibleSection.vue';
+import { Settings } from 'lucide-vue-next';
+
+export default {
+  title: 'Settings/CollapsibleSection',
+  component: CollapsibleSection,
+  tags: ['autodocs'],
+  argTypes: {
+    defaultOpen: { control: 'boolean' }
+  }
+};
+
+export const OpenByDefault = {
+  args: { title: 'Profile Settings', icon: Settings, defaultOpen: true },
+  render: (args) => ({
+    components: { CollapsibleSection },
+    setup: () => ({ args }),
+    template: `
+      <CollapsibleSection v-bind="args">
+        <p style="color: var(--color-text-secondary); margin: 0;">Section body content goes here.</p>
+      </CollapsibleSection>
+    `
+  })
+};
+
+export const ClosedByDefault = {
+  args: { title: 'Advanced Settings', icon: Settings, defaultOpen: false },
+  render: (args) => ({
+    components: { CollapsibleSection },
+    setup: () => ({ args }),
+    template: `
+      <CollapsibleSection v-bind="args">
+        <p style="color: var(--color-text-secondary); margin: 0;">Hidden until expanded.</p>
+      </CollapsibleSection>
+    `
+  })
+};
diff --git a/components/settings/CollapsibleSection.vue b/components/settings/CollapsibleSection.vue
new file mode 100644
index 0000000..446e5a6
--- /dev/null
+++ b/components/settings/CollapsibleSection.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="settings-section">
+    <div class="section-header">
+      <TButton
+        type="button"
+        variant="text"
+        :full-width="false"
+        class="header-button"
+        @click="toggleOpen"
+      >
+        <div class="header-title">
+          <component :is="icon" class="header-icon" />
+          <span>{{ title }}</span>
+        </div>
+        <div class="chevron">
+          <component :is="isOpen ? ChevronUp : ChevronDown" class="chevron-icon" />
+        </div>
+      </TButton>
+
+      <TButton
+        type="button"
+        variant="outline"
+        :full-width="false"
+        class="edit-button"
+        @click="toggleEdit"
+      >
+        <span>{{ isEditMode ? 'Done' : 'Edit' }}</span>
+        <component :is="isEditMode ? X : Edit" class="edit-icon" />
+      </TButton>
+    </div>
+
+    <transition name="collapse">
+      <div v-show="isOpen" class="section-body">
+        <slot :is-edit-mode="isEditMode" :set-edit-mode="setEditMode" />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { ChevronDown, ChevronUp, Edit, X } from 'lucide-vue-next';
+import TButton from '../TButton.vue';
+
+const props = defineProps({
+  title: { type: String, required: true },
+  icon: { type: [Object, String, Function], required: true },
+  defaultOpen: { type: Boolean, default: true }
+});
+
+const isOpen = ref(props.defaultOpen);
+const isEditMode = ref(false);
+
+const toggleOpen = () => { isOpen.value = !isOpen.value; };
+const toggleEdit = () => { isEditMode.value = !isEditMode.value; };
+const setEditMode = (value) => { isEditMode.value = !!value; };
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.settings-section {
+  background: $bg-white;
+  border-radius: $radius-xl;
+  box-shadow: $shadow-md;
+  padding: 1.5rem;
+  width: 100%;
+  margin-bottom: 1.5rem;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+// Override TButton's default padding/width for the header toggle
+.header-button {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  padding: 0;
+  min-height: auto;
+}
+
+.header-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: $font-size-xl;
+}
+
+.header-icon,
+.edit-icon,
+.chevron-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.section-body {
+  overflow: hidden;
+  margin-top: 1rem;
+}
+
+.collapse-enter-from,
+.collapse-leave-to {
+  max-height: 0;
+  opacity: 0;
+}
+
+.collapse-enter-active,
+.collapse-leave-active {
+  transition:
+    max-height 0.3s ease,
+    opacity 0.3s ease;
+}
+
+.collapse-enter-to,
+.collapse-leave-from {
+  max-height: 999px;
+  opacity: 1;
+}
+</style>
diff --git a/components/settings/PasswordModal.stories.js b/components/settings/PasswordModal.stories.js
new file mode 100644
index 0000000..1d90bf0
--- /dev/null
+++ b/components/settings/PasswordModal.stories.js
@@ -0,0 +1,8 @@
+import PasswordModal from './PasswordModal.vue';
+
+export default {
+  title: 'Domain/Settings/PasswordModal',
+  component: PasswordModal
+};
+
+export const Default = {};
diff --git a/components/settings/PasswordModal.vue b/components/settings/PasswordModal.vue
new file mode 100644
index 0000000..5ee7a1d
--- /dev/null
+++ b/components/settings/PasswordModal.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="modal-backdrop">
+    <div class="modal">
+      <h3 class="modal-title">
+        <Lock class="inline-icon" />
+        <span>{{ t('Change Password') }}</span>
+      </h3>
+      <p class="modal-subtitle">
+        {{ t('For security, please enter your old password to confirm the change.') }}
+      </p>
+
+      <div class="form-group">
+        <label class="form-label">{{ t('Old Password') }}</label>
+        <input v-model="oldPassword" type="password" class="form-input" />
+      </div>
+      <div class="form-group">
+        <label class="form-label">{{ t('New Password') }}</label>
+        <input v-model="newPassword" type="password" class="form-input" />
+      </div>
+      <div class="form-group">
+        <label class="form-label">{{ t('Confirm New Password') }}</label>
+        <input v-model="confirmNewPassword" type="password" class="form-input" />
+      </div>
+
+      <p
+        v-if="message"
+        class="modal-message"
+        :class="{ 'modal-message--error': isError, 'modal-message--success': !isError }"
+      >
+        {{ message }}
+      </p>
+
+      <div class="modal-actions">
+        <TButton variant="secondary" :full-width="false" class="cancel-btn" @click="$emit('close')">{{ t('Cancel') }}</TButton>
+        <TButton variant="primary" :full-width="false" class="submit-btn" @click="handleUpdate">
+          {{ t('Update Password') }}
+        </TButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { Lock } from 'lucide-vue-next';
+
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+defineEmits(['close']);
+
+const oldPassword = ref('');
+const newPassword = ref('');
+const confirmNewPassword = ref('');
+const message = ref('');
+const isError = ref(false);
+
+const handleUpdate = () => {
+  message.value = '';
+  isError.value = false;
+
+  if (oldPassword.value !== 'current123') {
+    message.value = t('Incorrect old password.');
+    isError.value = true;
+    return;
+  }
+  if (newPassword.value.length < 6) {
+    message.value = t('New password must be at least 6 characters long.');
+    isError.value = true;
+    return;
+  }
+  if (newPassword.value !== confirmNewPassword.value) {
+    message.value = t('New passwords do not match.');
+    isError.value = true;
+    return;
+  }
+
+  message.value = t('Password updated successfully!');
+  isError.value = false;
+  setTimeout(() => {
+    oldPassword.value = '';
+    newPassword.value = '';
+    confirmNewPassword.value = '';
+    message.value = '';
+    // notify parent to close modal
+  }, 1200);
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: $z-index-modal;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(2px);
+}
+
+.modal {
+  background: $bg-white;
+  width: min(480px, calc(100% - 2rem));
+  border-radius: $radius-xl;
+  box-shadow: $shadow-md;
+  padding: 1.5rem;
+}
+
+.modal-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: $font-size-2xl;
+  font-weight: $font-bold;
+  margin-bottom: 0.5rem;
+}
+
+.modal-subtitle {
+  color: $text-muted;
+  font-size: $font-size-sm;
+  margin-bottom: 1rem;
+}
+
+.inline-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.modal-message {
+  text-align: center;
+  font-weight: $font-semibold;
+  margin-top: 0.5rem;
+
+  &--error {
+    color: $error-color;
+  }
+  &--success {
+    color: $primary;
+  }
+}
+
+.modal-actions {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 1rem;
+}
+
+.cancel-btn {
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  border-radius: $radius-lg;
+  border: 1px solid $border-light;
+  color: $text-primary;
+  transition: $transition-base;
+
+  &:hover {
+    background: $bg-gray;
+  }
+}
+</style>
diff --git a/components/settings/SettingsAccount.stories.js b/components/settings/SettingsAccount.stories.js
new file mode 100644
index 0000000..b847a90
--- /dev/null
+++ b/components/settings/SettingsAccount.stories.js
@@ -0,0 +1,22 @@
+import SettingsAccount from './SettingsAccount.vue';
+
+export default {
+  title: 'Domain/Settings/SettingsAccount',
+  component: SettingsAccount,
+  args: {
+    isEditMode: true,
+    user: {
+      id: 1,
+      first_name: 'Jane',
+      last_name: 'Doe',
+      username: 'janedoe',
+      email: 'jane@example.com'
+    }
+  }
+};
+
+export const EditMode = {};
+
+export const ViewMode = {
+  args: { isEditMode: false }
+};
diff --git a/components/settings/SettingsAccount.vue b/components/settings/SettingsAccount.vue
new file mode 100644
index 0000000..4374468
--- /dev/null
+++ b/components/settings/SettingsAccount.vue
@@ -0,0 +1,205 @@
+<template>
+  <div>
+    <div class="form-group form-group--full">
+      <label class="form-label">{{ t('Profile Picture') }}</label>
+      <div class="avatar-container">
+        <img v-if="user" :src="getAvatarUrl(user)" :alt="t('User Avatar')" class="avatar-image" />
+      </div>
+    </div>
+    <div class="section-grid">
+      <div class="form-group">
+        <label class="form-label">{{ t('First Name') }}</label>
+        <input v-if="isEditMode" v-model="firstName" type="text" class="form-input" />
+        <p v-else class="text-display">{{ firstName }}</p>
+      </div>
+
+      <div class="form-group">
+        <label class="form-label">{{ t('Last Name') }}</label>
+        <input v-if="isEditMode" v-model="lastName" type="text" class="form-input" />
+        <p v-else class="text-display">{{ lastName }}</p>
+      </div>
+
+      <div class="form-group">
+        <label class="form-label">{{ t('Username') }}</label>
+        <input v-if="isEditMode" v-model="username" type="text" class="form-input" />
+        <p v-else class="text-display">{{ username }}</p>
+      </div>
+
+      <div class="form-group">
+        <label class="form-label">{{ t('Email Address') }}</label>
+        <input v-if="isEditMode" v-model="email" type="email" class="form-input" />
+        <p v-else class="text-display">{{ email }}</p>
+      </div>
+
+      <div class="form-group form-group--full">
+        <label class="form-label">{{ t('Password') }}</label>
+        <TButton
+          variant="text"
+          :full-width="false"
+          class="dashed-button"
+          @click="$emit('open-password-modal')"
+        >
+          <span>{{ t('Change Password') }}</span>
+          <Lock class="inline-icon" />
+        </TButton>
+      </div>
+    </div>
+
+    <div v-if="isEditMode" class="actions">
+      <TButton variant="primary" :full-width="false" class="submit-btn" @click="handleSave">
+        <Save class="inline-icon" />
+        <span>{{ t('Update Account') }}</span>
+      </TButton>
+      <p
+        v-if="message"
+        class="message"
+        :class="{ 'message--success': isSuccess, 'message--info': !isSuccess }"
+      >
+        {{ message }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, computed } from 'vue';
+import { Lock, Save } from 'lucide-vue-next';
+import { useAvatar } from '../../composables/useAvatar';
+
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+defineEmits(['open-password-modal']);
+
+const props = defineProps({
+  isEditMode: { type: Boolean, default: false },
+  user: { type: Object, default: null }
+});
+
+const user = computed(() => props.user);
+const { getAvatarUrl } = useAvatar();
+
+const firstName = ref(user.value?.first_name || '');
+const lastName = ref(user.value?.last_name || '');
+const username = ref(user.value?.username || '');
+const email = ref(user.value?.email || '');
+
+const message = ref('');
+const isSuccess = ref(false);
+
+watch(
+  () => props.isEditMode,
+  () => {
+    message.value = '';
+  }
+);
+
+watch(
+  user,
+  (newUser) => {
+    firstName.value = newUser?.first_name || '';
+    lastName.value = newUser?.last_name || '';
+    username.value = newUser?.username || '';
+    email.value = newUser?.email || '';
+  },
+  { immediate: true }
+);
+
+const handleSave = () => {
+  if (email.value !== 'user@example.com') {
+    message.value = t('A confirmation email has been sent to your new address.');
+    isSuccess.value = false;
+  } else {
+    message.value = t('Account information updated successfully!');
+    isSuccess.value = true;
+  }
+  setTimeout(() => {
+    message.value = '';
+  }, 3000);
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.avatar-container {
+  margin-top: 0.5rem;
+  display: flex;
+  justify-content: center;
+}
+
+.avatar-image {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 3px solid $bg-white;
+  box-shadow: $shadow-md;
+}
+
+.section-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+
+  @media (min-width: $breakpoint-md) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.form-group--full {
+  grid-column: 1 / -1;
+}
+
+.text-display {
+  padding: 0.75rem 1rem;
+  border-radius: $radius-lg;
+  background: $bg-gray;
+  color: $text-primary;
+  font-weight: $font-medium;
+}
+
+.dashed-button {
+  width: 100%;
+  text-align: left;
+  padding: 0.75rem 1rem;
+  border-radius: $radius-lg;
+  border: 2px dashed $primary;
+  color: $primary;
+  transition: $transition-base;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &:hover {
+    background: $primary-light;
+  }
+}
+
+.inline-icon {
+  width: 18px;
+  height: 18px;
+}
+
+.actions {
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.message {
+  margin-top: 0.75rem;
+  font-weight: $font-semibold;
+  text-align: center;
+
+  &--success {
+    color: $primary;
+  }
+  &--info {
+    color: $accent-color;
+  }
+}
+</style>
diff --git a/components/settings/SettingsConnections.stories.js b/components/settings/SettingsConnections.stories.js
new file mode 100644
index 0000000..4d7e492
--- /dev/null
+++ b/components/settings/SettingsConnections.stories.js
@@ -0,0 +1,23 @@
+import SettingsConnections from './SettingsConnections.vue';
+
+const tokens = [
+  { id: 1, name: 'Claude Desktop', last_used_at: '2024-03-20T10:00:00Z' },
+  { id: 2, name: 'Cursor', last_used_at: null }
+];
+
+export default {
+  title: 'Domain/Settings/SettingsConnections',
+  component: SettingsConnections,
+  args: {
+    endpoint: 'https://app.trakli.com/mcp',
+    tokens,
+    createToken: async (name) => ({ name, token: 'tk_live_example' }),
+    revokeToken: async () => {}
+  }
+};
+
+export const Default = {};
+
+export const Empty = {
+  args: { tokens: [] }
+};
diff --git a/components/settings/SettingsConnections.vue b/components/settings/SettingsConnections.vue
new file mode 100644
index 0000000..3c24ed0
--- /dev/null
+++ b/components/settings/SettingsConnections.vue
@@ -0,0 +1,309 @@
+<template>
+  <div class="mcp-settings">
+    <p class="section-intro">
+      {{
+        t(
+          'Connect an AI client like Claude Desktop or Cursor to your Trakli data over the Model Context Protocol.'
+        )
+      }}
+    </p>
+
+    <div class="form-group form-group--full">
+      <label class="form-label">{{ t('MCP endpoint') }}</label>
+      <div class="copy-row">
+        <input class="form-input" :value="endpoint" readonly />
+        <TButton
+          variant="text"
+          size="small"
+          :full-width="false"
+          class="icon-btn"
+          :title="t('Copy')"
+          @click="copy(endpoint, 'endpoint')"
+        >
+          <Check v-if="copied === 'endpoint'" class="inline-icon" />
+          <Copy v-else class="inline-icon" />
+        </TButton>
+      </div>
+      <p class="hint">
+        {{ t('Add this URL to your AI client and authenticate with one of the tokens below.') }}
+      </p>
+    </div>
+
+    <div class="tokens-section">
+      <h3 class="tokens-title">{{ t('Access tokens') }}</h3>
+
+      <div class="create-row">
+        <input
+          v-model="newName"
+          class="form-input"
+          :placeholder="t('Token name, e.g. Claude Desktop')"
+          @keyup.enter="generate"
+        />
+        <TButton variant="primary" :loading="creating" @click="generate">
+          {{ t('Generate token') }}
+        </TButton>
+      </div>
+
+      <ul v-if="tokens.length" class="token-list">
+        <li v-for="tk in tokens" :key="tk.id" class="token-item">
+          <div class="token-info">
+            <span class="token-name">{{ tk.name }}</span>
+            <span class="token-meta">
+              {{
+                tk.last_used_at
+                  ? t('Last used') + ' ' + formatDate(tk.last_used_at)
+                  : t('Never used')
+              }}
+            </span>
+          </div>
+          <TButton
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="icon-btn danger"
+            :title="t('Revoke')"
+            @click="revoke(tk)"
+          >
+            <Trash2 class="inline-icon" />
+          </TButton>
+        </li>
+      </ul>
+      <p v-else-if="!loading" class="empty">{{ t('No tokens yet.') }}</p>
+    </div>
+
+    <div v-if="createdToken" class="modal-backdrop">
+      <div class="modal">
+        <h3 class="modal-title">{{ t('Copy your token now') }}</h3>
+        <p class="modal-subtitle">
+          {{ t('This token is shown only once. Store it somewhere safe before closing.') }}
+        </p>
+        <div class="copy-row">
+          <input class="form-input token-reveal" :value="createdToken.token" readonly />
+          <TButton
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="icon-btn"
+            :title="t('Copy')"
+            @click="copy(createdToken.token, 'token')"
+          >
+            <Check v-if="copied === 'token'" class="inline-icon" />
+            <Copy v-else class="inline-icon" />
+          </TButton>
+        </div>
+        <div class="modal-actions">
+          <TButton variant="primary" :full-width="false" class="submit-btn" @click="createdToken = null">
+            {{ t('Done') }}
+          </TButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { Copy, Check, Trash2 } from 'lucide-vue-next';
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  endpoint: { type: String, default: '' },
+  tokens: { type: Array, default: () => [] },
+  createToken: { type: Function, default: null },
+  revokeToken: { type: Function, default: null }
+});
+
+const emit = defineEmits(['refresh']);
+
+const creating = ref(false);
+const newName = ref('');
+const createdToken = ref(null);
+const copied = ref('');
+
+const generate = async () => {
+  const name = newName.value.trim();
+  if (!name || creating.value) return;
+  creating.value = true;
+  try {
+    createdToken.value = props.createToken ? await props.createToken(name) : null;
+    newName.value = '';
+    emit('refresh');
+  } finally {
+    creating.value = false;
+  }
+};
+
+const revoke = async (tk) => {
+  if (props.revokeToken) await props.revokeToken(tk.id);
+  emit('refresh');
+};
+
+const copy = async (text, which) => {
+  try {
+    await navigator.clipboard.writeText(text);
+    copied.value = which;
+    setTimeout(() => (copied.value = ''), 1500);
+  } catch {
+    // Clipboard unavailable; the field is selectable so the user can copy manually.
+  }
+};
+
+const formatDate = (iso) => new Date(iso).toLocaleDateString();
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.section-intro {
+  color: $text-muted;
+  font-size: $font-size-sm;
+  margin-bottom: 1rem;
+}
+
+.copy-row {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.icon-btn {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: $radius-lg;
+  border: 1px solid $border-light;
+  color: $text-primary;
+  transition: $transition-base;
+
+  &:hover {
+    background: $bg-gray;
+  }
+
+  &.danger:hover {
+    color: $error-color;
+  }
+}
+
+.inline-icon {
+  width: 18px;
+  height: 18px;
+}
+
+.hint {
+  margin-top: 0.5rem;
+  color: $text-muted;
+  font-size: $font-size-sm;
+}
+
+.tokens-section {
+  margin-top: 1.5rem;
+}
+
+.tokens-title {
+  font-size: $font-size-lg;
+  font-weight: $font-semibold;
+  margin-bottom: 0.75rem;
+}
+
+.create-row {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.token-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.token-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-radius: $radius-lg;
+  background: $bg-gray;
+}
+
+.token-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.token-name {
+  font-weight: $font-medium;
+  color: $text-primary;
+}
+
+.token-meta {
+  font-size: $font-size-sm;
+  color: $text-muted;
+}
+
+.empty {
+  color: $text-muted;
+  font-size: $font-size-sm;
+}
+
+.token-reveal {
+  font-family: monospace;
+}
+
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: $z-index-modal;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(2px);
+}
+
+.modal {
+  background: $bg-white;
+  width: min(520px, calc(100% - 2rem));
+  border-radius: $radius-xl;
+  box-shadow: $shadow-md;
+  padding: 1.5rem;
+}
+
+.modal-title {
+  font-size: $font-size-2xl;
+  font-weight: $font-bold;
+  margin-bottom: 0.5rem;
+}
+
+.modal-subtitle {
+  color: $text-muted;
+  font-size: $font-size-sm;
+  margin-bottom: 1rem;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1rem;
+}
+
+.submit-btn {
+  padding: 0.5rem 1.25rem;
+  border-radius: $radius-lg;
+  background: $primary;
+  color: $bg-white;
+  font-weight: $font-semibold;
+  transition: $transition-base;
+
+  &:hover {
+    opacity: 0.92;
+  }
+}
+</style>
diff --git a/components/settings/SettingsDisplay.stories.js b/components/settings/SettingsDisplay.stories.js
new file mode 100644
index 0000000..ba16171
--- /dev/null
+++ b/components/settings/SettingsDisplay.stories.js
@@ -0,0 +1,17 @@
+import SettingsDisplay from './SettingsDisplay.vue';
+
+export default {
+  title: 'Domain/Settings/SettingsDisplay',
+  component: SettingsDisplay,
+  args: {
+    isDark: false,
+    chatFirst: true,
+    savingLanding: false
+  }
+};
+
+export const Default = {};
+
+export const DarkMode = {
+  args: { isDark: true }
+};
diff --git a/components/settings/SettingsDisplay.vue b/components/settings/SettingsDisplay.vue
new file mode 100644
index 0000000..d091f5f
--- /dev/null
+++ b/components/settings/SettingsDisplay.vue
@@ -0,0 +1,143 @@
+<template>
+  <div>
+    <div class="toggle-row">
+      <div class="toggle-label">
+        <component :is="isDark ? Sun : Moon" class="inline-icon" />
+        <span>{{ isDark ? t('Light') : t('Dark') }} {{ t('Mode') }}</span>
+      </div>
+      <TButton
+        variant="text"
+        size="small"
+        :full-width="false"
+        class="toggle"
+        :class="{ 'toggle--on': isDark }"
+        @click="toggleTheme"
+      >
+        <span class="toggle-circle" />
+      </TButton>
+    </div>
+
+    <div class="toggle-row" style="margin-top: 0.75rem">
+      <div class="toggle-label">
+        <MessageSquare class="inline-icon" />
+        <span>{{ t('Chat-first landing') }}</span>
+      </div>
+      <TButton
+        variant="text"
+        size="small"
+        :full-width="false"
+        class="toggle"
+        :class="{ 'toggle--on': chatFirst }"
+        :disabled="savingLanding"
+        @click="toggleLanding"
+      >
+        <span class="toggle-circle" />
+      </TButton>
+    </div>
+    <p class="hint">{{ t('Open the AI chat as your home screen instead of the dashboard.') }}</p>
+  </div>
+</template>
+
+<script setup>
+import { Sun, Moon, MessageSquare } from 'lucide-vue-next';
+
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+defineProps({
+  isDark: { type: Boolean, default: false },
+  chatFirst: { type: Boolean, default: false },
+  savingLanding: { type: Boolean, default: false }
+});
+
+const emit = defineEmits(['toggle-theme', 'toggle-landing']);
+
+const toggleTheme = () => emit('toggle-theme');
+const toggleLanding = () => emit('toggle-landing');
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-radius: $radius-lg;
+  background: $bg-gray;
+}
+
+.toggle-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: $font-semibold;
+  color: $text-primary;
+}
+
+.toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  border: none;
+  height: 24px;
+  width: 44px;
+  border-radius: 999px;
+  background: $primary-toggle;
+  transition: $transition-base;
+
+  &--on {
+    background: $primary;
+  }
+}
+
+.toggle-circle {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: $bg-white;
+  border-radius: 50%;
+  box-shadow: $shadow-sm;
+  transition: transform 0.2s ease-in-out;
+}
+
+.toggle.toggle--on .toggle-circle {
+  transform: translateX(20px);
+}
+
+.inline-icon {
+  width: 18px;
+  height: 18px;
+}
+
+.hint {
+  margin: 0.5rem 0 0;
+  padding: 0 1rem;
+  font-size: $font-size-xs;
+  color: $text-muted;
+}
+
+.toggle:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.actions {
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.success-text {
+  margin-top: 0.75rem;
+  color: $primary;
+  font-weight: $font-semibold;
+}
+</style>
diff --git a/components/settings/SettingsGeneral.stories.js b/components/settings/SettingsGeneral.stories.js
new file mode 100644
index 0000000..ab3dbb5
--- /dev/null
+++ b/components/settings/SettingsGeneral.stories.js
@@ -0,0 +1,17 @@
+import SettingsGeneral from './SettingsGeneral.vue';
+
+export default {
+  title: 'Domain/Settings/SettingsGeneral',
+  component: SettingsGeneral,
+  args: {
+    isEditMode: true,
+    language: 'en',
+    currency: 'USD'
+  }
+};
+
+export const EditMode = {};
+
+export const ViewMode = {
+  args: { isEditMode: false }
+};
diff --git a/components/settings/SettingsGeneral.vue b/components/settings/SettingsGeneral.vue
new file mode 100644
index 0000000..e9bbeb0
--- /dev/null
+++ b/components/settings/SettingsGeneral.vue
@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <div class="section-grid">
+      <div class="form-group">
+        <label class="form-label">{{ t('Default Language') }}</label>
+        <select v-if="isEditMode" v-model="languageCode" class="form-select">
+          <option v-for="lang in languages" :key="lang.code" :value="lang.code">
+            {{ lang.code.toUpperCase() }} - {{ lang.label }}
+          </option>
+        </select>
+        <p v-else class="text-display">{{ languageLabel }}</p>
+      </div>
+
+      <div class="form-group">
+        <label class="form-label">{{ t('Current Currency') }}</label>
+        <select v-if="isEditMode" v-model="currencyCode" class="form-select">
+          <option v-for="c in currencies" :key="c.code" :value="c.code">
+            {{ c.code }} - {{ c.label }}
+          </option>
+        </select>
+        <p v-else class="text-display">{{ currencyLabel }}</p>
+      </div>
+    </div>
+
+    <div v-if="isEditMode" class="actions">
+      <TButton variant="primary" :full-width="false" class="submit-btn" @click="handleSave">
+        <Save class="inline-icon" />
+        <span>{{ t('Update General Settings') }}</span>
+      </TButton>
+      <p v-if="message" class="success-text">{{ message }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, computed } from 'vue';
+import { Save } from 'lucide-vue-next';
+
+const currencies = [
+  { code: 'USD', label: 'US Dollar' },
+  { code: 'EUR', label: 'Euro' },
+  { code: 'GBP', label: 'British Pound' },
+  { code: 'JPY', label: 'Japanese Yen' },
+  { code: 'CAD', label: 'Canadian Dollar' },
+  { code: 'AUD', label: 'Australian Dollar' },
+  { code: 'XAF', label: 'Central African CFA Franc' },
+  { code: 'XOF', label: 'West African CFA Franc' },
+  { code: 'NGN', label: 'Nigerian Naira' },
+  { code: 'GHS', label: 'Ghanaian Cedi' },
+  { code: 'KES', label: 'Kenyan Shilling' },
+  { code: 'ZAR', label: 'South African Rand' },
+  { code: 'INR', label: 'Indian Rupee' },
+  { code: 'CNY', label: 'Chinese Yuan' },
+  { code: 'BRL', label: 'Brazilian Real' },
+  { code: 'MXN', label: 'Mexican Peso' },
+  { code: 'CHF', label: 'Swiss Franc' }
+];
+
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  isEditMode: { type: Boolean, default: false },
+  language: { type: String, default: 'en' },
+  currency: { type: String, default: 'USD' }
+});
+
+const emit = defineEmits(['save']);
+
+const languages = [
+  { code: 'en', label: 'English' },
+  { code: 'es', label: 'Español' },
+  { code: 'fr', label: 'Français' },
+  { code: 'de', label: 'Deutsch' },
+  { code: 'pt', label: 'Português' },
+  { code: 'it', label: 'Italiano' }
+];
+
+const languageCode = ref(props.language);
+const currencyCode = ref(props.currency);
+const message = ref('');
+
+const languageLabel = computed(() => {
+  const found = languages.find((l) => l.code === languageCode.value);
+  return found ? found.label : languageCode.value;
+});
+
+const currencyLabel = computed(() => {
+  const found = currencies.find((c) => c.code === currencyCode.value);
+  return found ? found.label : currencyCode.value;
+});
+
+watch(
+  () => props.isEditMode,
+  () => {
+    message.value = '';
+  }
+);
+
+const handleSave = () => {
+  emit('save', { language: languageCode.value, currency: currencyCode.value });
+  message.value = t('General settings updated successfully!');
+  setTimeout(() => {
+    message.value = '';
+  }, 2000);
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.section-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+
+  @media (min-width: $breakpoint-md) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.text-display {
+  padding: 0.75rem 1rem;
+  border-radius: $radius-lg;
+  background: $bg-gray;
+  color: $text-primary;
+  font-weight: $font-medium;
+}
+
+.inline-icon {
+  width: 18px;
+  height: 18px;
+}
+
+.actions {
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.success-text {
+  margin-top: 0.75rem;
+  color: $primary;
+  font-weight: $font-semibold;
+}
+</style>
diff --git a/components/settings/SettingsNotifications.stories.js b/components/settings/SettingsNotifications.stories.js
new file mode 100644
index 0000000..62449ba
--- /dev/null
+++ b/components/settings/SettingsNotifications.stories.js
@@ -0,0 +1,19 @@
+import SettingsNotifications from './SettingsNotifications.vue';
+
+export default {
+  title: 'Domain/Settings/SettingsNotifications',
+  component: SettingsNotifications,
+  args: {
+    isEditMode: true,
+    preferences: {
+      channels: { email: true, push: false, inapp: true },
+      types: { reminders: true, insights: true, inactivity: false }
+    }
+  }
+};
+
+export const EditMode = {};
+
+export const ViewMode = {
+  args: { isEditMode: false }
+};
diff --git a/components/settings/SettingsNotifications.vue b/components/settings/SettingsNotifications.vue
new file mode 100644
index 0000000..bdb2d67
--- /dev/null
+++ b/components/settings/SettingsNotifications.vue
@@ -0,0 +1,337 @@
+<template>
+  <div>
+    <div v-if="loading" class="loading-state">
+      <p>{{ t('Loading preferences...') }}</p>
+    </div>
+
+    <div v-else>
+      <h3 class="subsection-title">{{ t('Notification Channels') }}</h3>
+      <div class="toggle-grid">
+        <div class="toggle-item">
+          <div class="toggle-info">
+            <Mail class="toggle-icon" />
+            <div>
+              <p class="toggle-label">{{ t('Email Notifications') }}</p>
+              <p class="toggle-desc">{{ t('Receive notifications via email') }}</p>
+            </div>
+          </div>
+          <label class="toggle-switch">
+            <input
+              v-model="preferences.channels.email"
+              type="checkbox"
+              :disabled="!isEditMode"
+              @change="handleChange"
+            />
+            <span class="slider"></span>
+          </label>
+        </div>
+
+        <div class="toggle-item">
+          <div class="toggle-info">
+            <Smartphone class="toggle-icon" />
+            <div>
+              <p class="toggle-label">{{ t('Push Notifications') }}</p>
+              <p class="toggle-desc">{{ t('Receive notifications on your device') }}</p>
+            </div>
+          </div>
+          <label class="toggle-switch">
+            <input
+              v-model="preferences.channels.push"
+              type="checkbox"
+              :disabled="!isEditMode"
+              @change="handleChange"
+            />
+            <span class="slider"></span>
+          </label>
+        </div>
+
+        <div class="toggle-item">
+          <div class="toggle-info">
+            <Bell class="toggle-icon" />
+            <div>
+              <p class="toggle-label">{{ t('In-App Notifications') }}</p>
+              <p class="toggle-desc">{{ t('See notifications in the app') }}</p>
+            </div>
+          </div>
+          <label class="toggle-switch">
+            <input
+              v-model="preferences.channels.inapp"
+              type="checkbox"
+              :disabled="!isEditMode"
+              @change="handleChange"
+            />
+            <span class="slider"></span>
+          </label>
+        </div>
+      </div>
+
+      <h3 class="subsection-title">{{ t('Notification Types') }}</h3>
+      <div class="toggle-grid">
+        <div class="toggle-item">
+          <div class="toggle-info">
+            <Clock class="toggle-icon" />
+            <div>
+              <p class="toggle-label">{{ t('Reminders') }}</p>
+              <p class="toggle-desc">{{ t('Get notified about your reminders') }}</p>
+            </div>
+          </div>
+          <label class="toggle-switch">
+            <input
+              v-model="preferences.types.reminders"
+              type="checkbox"
+              :disabled="!isEditMode"
+              @change="handleChange"
+            />
+            <span class="slider"></span>
+          </label>
+        </div>
+
+        <div class="toggle-item">
+          <div class="toggle-info">
+            <TrendingUp class="toggle-icon" />
+            <div>
+              <p class="toggle-label">{{ t('Financial Insights') }}</p>
+              <p class="toggle-desc">{{ t('Weekly/monthly spending summaries') }}</p>
+            </div>
+          </div>
+          <label class="toggle-switch">
+            <input
+              v-model="preferences.types.insights"
+              type="checkbox"
+              :disabled="!isEditMode"
+              @change="handleChange"
+            />
+            <span class="slider"></span>
+          </label>
+        </div>
+
+        <div class="toggle-item">
+          <div class="toggle-info">
+            <UserCheck class="toggle-icon" />
+            <div>
+              <p class="toggle-label">{{ t('Engagement Reminders') }}</p>
+              <p class="toggle-desc">{{ t("Gentle nudges when you haven't tracked") }}</p>
+            </div>
+          </div>
+          <label class="toggle-switch">
+            <input
+              v-model="preferences.types.inactivity"
+              type="checkbox"
+              :disabled="!isEditMode"
+              @change="handleChange"
+            />
+            <span class="slider"></span>
+          </label>
+        </div>
+      </div>
+
+      <div v-if="isEditMode" class="actions">
+        <TButton variant="primary" :full-width="false" class="submit-btn" @click="handleSave">
+          <Save class="inline-icon" />
+          <span>{{ t('Save Preferences') }}</span>
+        </TButton>
+        <p v-if="message" class="success-text">{{ message }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, watch } from 'vue';
+import { Save, Mail, Smartphone, Bell, Clock, TrendingUp, UserCheck } from 'lucide-vue-next';
+
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  isEditMode: { type: Boolean, default: false },
+  preferences: {
+    type: Object,
+    default: () => ({
+      channels: { email: true, push: true, inapp: true },
+      types: { reminders: true, insights: true, inactivity: true }
+    })
+  }
+});
+
+const emit = defineEmits(['save']);
+
+const loading = ref(false);
+const message = ref('');
+const hasChanges = ref(false);
+
+const preferences = reactive({
+  channels: { ...(props.preferences.channels || {}) },
+  types: { ...(props.preferences.types || {}) }
+});
+
+watch(
+  () => props.isEditMode,
+  () => {
+    message.value = '';
+  }
+);
+
+const handleChange = () => {
+  hasChanges.value = true;
+};
+
+const handleSave = () => {
+  emit('save', {
+    channels: { ...preferences.channels },
+    types: { ...preferences.types }
+  });
+  message.value = t('Notification preferences updated!');
+  hasChanges.value = false;
+  setTimeout(() => {
+    message.value = '';
+  }, 2000);
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.loading-state {
+  text-align: center;
+  padding: 2rem;
+  color: $text-secondary;
+}
+
+.subsection-title {
+  font-size: $font-size-base;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  margin-bottom: 1rem;
+  margin-top: 1.5rem;
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+.toggle-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.toggle-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background: $bg-gray;
+  border-radius: $radius-lg;
+}
+
+.toggle-info {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.toggle-icon {
+  width: 20px;
+  height: 20px;
+  color: $primary;
+}
+
+.toggle-label {
+  font-weight: $font-medium;
+  color: $text-primary;
+  margin: 0;
+}
+
+.toggle-desc {
+  font-size: $font-size-sm;
+  color: $text-secondary;
+  margin: 0;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 48px;
+  height: 24px;
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+
+    &:checked + .slider {
+      background-color: $primary;
+    }
+
+    &:checked + .slider:before {
+      transform: translateX(24px);
+    }
+
+    &:disabled + .slider {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: $border-color;
+    transition: 0.3s;
+    border-radius: 24px;
+
+    &:before {
+      position: absolute;
+      content: '';
+      height: 18px;
+      width: 18px;
+      left: 3px;
+      bottom: 3px;
+      background-color: white;
+      transition: 0.3s;
+      border-radius: 50%;
+    }
+  }
+}
+
+.inline-icon {
+  width: 18px;
+  height: 18px;
+}
+
+.actions {
+  margin-top: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.submit-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  background: $primary;
+  color: white;
+  border-radius: $radius-lg;
+  font-weight: $font-semibold;
+  transition: $transition-base;
+
+  &:hover {
+    opacity: 0.9;
+  }
+}
+
+.success-text {
+  margin-top: 0.75rem;
+  color: $primary;
+  font-weight: $font-semibold;
+}
+</style>
diff --git a/components/settings/SettingsWallets.stories.js b/components/settings/SettingsWallets.stories.js
new file mode 100644
index 0000000..978f949
--- /dev/null
+++ b/components/settings/SettingsWallets.stories.js
@@ -0,0 +1,26 @@
+import SettingsWallets from './SettingsWallets.vue';
+
+export default {
+  title: 'Domain/Settings/SettingsWallets',
+  component: SettingsWallets,
+  args: {
+    isEditMode: true,
+    wallets: [
+      { id: 1, name: 'Main Bank Account', currency: 'USD' },
+      { id: 2, name: 'Cash Wallet', currency: 'USD' }
+    ],
+    groups: [
+      { id: 1, name: 'General' },
+      { id: 2, name: 'Travel' }
+    ],
+    defaultWalletId: 1,
+    defaultGroupId: 1,
+    allowNegativeBalance: false
+  }
+};
+
+export const EditMode = {};
+
+export const ViewMode = {
+  args: { isEditMode: false }
+};
diff --git a/components/settings/SettingsWallets.vue b/components/settings/SettingsWallets.vue
new file mode 100644
index 0000000..1bc3755
--- /dev/null
+++ b/components/settings/SettingsWallets.vue
@@ -0,0 +1,240 @@
+<template>
+  <div>
+    <div class="section-grid">
+      <div class="form-group">
+        <label class="form-label">{{ t('Default Wallet') }}</label>
+        <select v-if="isEditMode" v-model="walletId" class="form-select">
+          <option v-for="w in wallets" :key="w.id" :value="w.id">
+            {{ w.name }}
+            <template v-if="w.currency"> ({{ w.currency }})</template>
+          </option>
+        </select>
+        <div v-else class="wallet-display">
+          <p class="text-display">{{ walletLabel || '—' }}</p>
+          <span v-if="walletLabel" class="wallet-badge">{{ t('Currently Selected') }}</span>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label class="form-label">{{ t('Default Group') }}</label>
+        <select v-if="isEditMode" v-model="groupId" class="form-select">
+          <option :value="null">{{ t('None') }}</option>
+          <option v-for="g in groups" :key="g.id" :value="g.id">
+            {{ g.name }}
+          </option>
+        </select>
+        <p v-else class="text-display">{{ groupLabel || '—' }}</p>
+      </div>
+    </div>
+
+    <div class="toggle-item">
+      <div class="toggle-info">
+        <div>
+          <p class="toggle-label">{{ t('Allow Negative Balances') }}</p>
+          <p class="toggle-desc">
+            {{ t('Permit wallet balances to go below zero when spending or transferring.') }}
+          </p>
+        </div>
+      </div>
+      <label class="toggle-switch">
+        <input v-model="allowNegativeBalance" type="checkbox" :disabled="!isEditMode" />
+        <span class="slider"></span>
+      </label>
+    </div>
+
+    <div v-if="isEditMode" class="actions">
+      <TButton variant="primary" :full-width="false" class="submit-btn" @click="handleSave">
+        <Save class="inline-icon" />
+        <span>{{ t('Update Wallets & Groups') }}</span>
+      </TButton>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { Save } from 'lucide-vue-next';
+
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  isEditMode: { type: Boolean, default: false },
+  wallets: { type: Array, default: () => [] },
+  groups: { type: Array, default: () => [] },
+  defaultWalletId: { type: Number, default: null },
+  defaultGroupId: { type: Number, default: null },
+  allowNegativeBalance: { type: Boolean, default: false }
+});
+
+const emit = defineEmits(['save']);
+
+const wallets = computed(() => props.wallets);
+const groups = computed(() => props.groups);
+
+const walletId = ref(props.defaultWalletId);
+const groupId = ref(props.defaultGroupId);
+const allowNegativeBalance = ref(props.allowNegativeBalance);
+
+const walletLabel = computed(() => {
+  if (!walletId.value) return '';
+  const w = wallets.value.find((x) => x.id === walletId.value);
+  return w ? w.name : '';
+});
+
+const groupLabel = computed(() => {
+  if (!groupId.value) return '';
+  const g = groups.value.find((x) => x.id === groupId.value);
+  return g ? g.name : '';
+});
+
+const handleSave = () => {
+  emit('save', {
+    walletId: walletId.value,
+    groupId: groupId.value,
+    allowNegativeBalance: allowNegativeBalance.value
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.section-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+
+  @media (min-width: $breakpoint-md) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.text-display {
+  padding: 0.75rem 1rem;
+  border-radius: $radius-lg;
+  background: $bg-gray;
+  color: $text-primary;
+  font-weight: $font-medium;
+}
+
+.wallet-display {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  .text-display {
+    margin: 0;
+  }
+
+  .wallet-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(var(--color-primary-rgb), 0.1);
+    color: $primary;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 4px 10px;
+    border-radius: 4px;
+    width: fit-content;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+    border: 1px solid $primary;
+  }
+}
+
+.inline-icon {
+  width: 18px;
+  height: 18px;
+}
+
+.actions {
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.toggle-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  margin-top: 1rem;
+  background: $bg-gray;
+  border-radius: $radius-lg;
+}
+
+.toggle-info {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.toggle-label {
+  font-weight: $font-medium;
+  color: $text-primary;
+  margin: 0;
+}
+
+.toggle-desc {
+  font-size: $font-size-sm;
+  color: $text-secondary;
+  margin: 0;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 48px;
+  height: 24px;
+  flex-shrink: 0;
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+
+    &:checked + .slider {
+      background-color: $primary;
+    }
+
+    &:checked + .slider:before {
+      transform: translateX(24px);
+    }
+
+    &:disabled + .slider {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: $border-color;
+    transition: 0.3s;
+    border-radius: 24px;
+
+    &:before {
+      position: absolute;
+      content: '';
+      height: 18px;
+      width: 18px;
+      left: 3px;
+      bottom: 3px;
+      background-color: white;
+      transition: 0.3s;
+      border-radius: 50%;
+    }
+  }
+}
+</style>
diff --git a/components/transactions/TTransactionsCardList.stories.js b/components/transactions/TTransactionsCardList.stories.js
new file mode 100644
index 0000000..889b26c
--- /dev/null
+++ b/components/transactions/TTransactionsCardList.stories.js
@@ -0,0 +1,65 @@
+import TTransactionsCardList from './TTransactionsCardList.vue';
+
+const transactions = [
+  {
+    id: '1',
+    date: '2024-03-24',
+    time: '10:30',
+    type: 'EXPENSE',
+    party: 'Whole Foods Market',
+    amount: '142.50 USD',
+    category: 'Food & Dining',
+    wallet: 'Main Bank Account',
+    walletId: 1,
+    description: 'Weekly groceries'
+  },
+  {
+    id: '2',
+    date: '2024-03-20',
+    time: '08:15',
+    type: 'INCOME',
+    party: 'Employer',
+    amount: '2800.00 USD',
+    category: 'Salary',
+    wallet: 'Main Bank Account',
+    walletId: 1,
+    description: 'Monthly salary',
+    isRecurring: true
+  },
+  {
+    id: '3',
+    date: '2024-03-18',
+    time: '19:45',
+    type: 'EXPENSE',
+    party: 'City Bistro',
+    amount: '68.00 USD',
+    category: 'Food & Dining',
+    wallet: 'Cash Wallet',
+    walletId: 2,
+    description: 'Dinner'
+  }
+];
+
+export default {
+  title: 'Domain/Transactions/TTransactionsCardList',
+  component: TTransactionsCardList,
+  args: {
+    transactions,
+    searchQuery: '',
+    currentPage: 1,
+    itemsPerPage: 10,
+    totalPages: 1,
+    totalEntries: 3,
+    activeFilterCount: 0,
+    defaultWallet: { id: 1, name: 'Main Bank Account' }
+  }
+};
+
+export const Default = {};
+
+export const Empty = {
+  args: {
+    transactions: [],
+    totalEntries: 0
+  }
+};
diff --git a/components/transactions/TTransactionsCardList.vue b/components/transactions/TTransactionsCardList.vue
new file mode 100644
index 0000000..bb5df58
--- /dev/null
+++ b/components/transactions/TTransactionsCardList.vue
@@ -0,0 +1,327 @@
+<template>
+  <div class="transactions-cards">
+    <div class="cards-heading">
+      <h1 class="cards-heading__text">All Transactions</h1>
+      <div class="input-controls">
+        <SearchInput
+          :model-value="searchQuery"
+          placeholder="Search..."
+          :debounce="0"
+          @update:model-value="$emit('update:searchQuery', $event)"
+        />
+        <TButton
+          variant="text"
+          size="small"
+          :full-width="false"
+          class="filter-toggle-btn"
+          @click="$emit('toggle-filters')"
+        >
+          <FunnelIcon class="filter-toggle-icon" />
+          <span v-if="activeFilterCount" class="filter-count-badge">{{ activeFilterCount }}</span>
+        </TButton>
+      </div>
+    </div>
+
+    <div class="cards-list">
+      <div
+        v-for="(txn, idx) in displayedTransactions"
+        :key="txn.id ?? idx"
+        class="card txn-card"
+        :class="txn.type === 'INCOME' ? 'card--income' : 'card--expense'"
+        @click="$emit('edit', txn)"
+      >
+        <div class="txn-card__top">
+          <div class="icon-tile" :class="txn.type === 'INCOME' ? 'tile--income' : 'tile--expense'">
+            <ArrowDownLeftIcon v-if="txn.type === 'INCOME'" class="tile-icon" />
+            <ArrowUpRightIcon v-else class="tile-icon" />
+          </div>
+          <div class="header-line">
+            <span class="prefix">{{ directionLabel(txn.type) }}</span>
+            <UserIcon class="user-icon" />
+            <span class="party">{{ txn.party || '—' }}</span>
+            <span v-if="txn.isTransfer" class="transfer-indicator">{{ t('Transfer') }}</span>
+            <span v-if="txn.isRefund" class="refund-indicator">{{ t('Refund') }}</span>
+            <span v-if="txn.isRecurring" class="recurring-indicator">
+              <ArrowPathIcon class="recurring-icon" />
+              {{ t('Recurring') }}
+            </span>
+          </div>
+          <div class="amount" :class="txn.type === 'INCOME' ? 'amount--income' : 'amount--expense'">
+            {{ formatShortAmount(txn.amount) }}
+          </div>
+        </div>
+        <div class="txn-card__middle">
+          <span
+            class="txn-chip"
+            :class="isDefaultWallet(txn) ? 'txn-chip--default' : 'txn-chip--wallet'"
+          >
+            <LockClosedIcon v-if="isDefaultWallet(txn)" class="txn-chip__icon" />
+            <CreditCardIcon v-else class="txn-chip__icon" />
+            <span class="txn-chip__text">{{
+              isDefaultWallet(txn) ? 'Default' : txn.wallet || '—'
+            }}</span>
+          </span>
+        </div>
+        <div class="txn-card__bottom">
+          <div class="desc" :title="txn.description">{{ txn.description }}</div>
+          <div class="bottom-right">
+            <TButton
+              variant="text"
+              size="small"
+              :full-width="false"
+              class="card-action-btn"
+              :title="t('Make recurring')"
+              @click.stop="$emit('recurrent', txn)"
+            >
+              <ArrowPathIcon class="card-action-icon" />
+            </TButton>
+            <div class="date">{{ formatShortDate(txn) }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="pagination-container">
+      <div class="pagination-controls">
+        <TButton
+          variant="text"
+          size="small"
+          :full-width="false"
+          class="pagination-btn"
+          :disabled="currentPage === 1"
+          @click="$emit('page-change', currentPage - 1)"
+        >
+          Previous
+        </TButton>
+        <TButton
+          v-for="page in visiblePages"
+          :key="page"
+          variant="text"
+          size="small"
+          :full-width="false"
+          class="pagination-btn"
+          :class="{ active: page === currentPage }"
+          @click="$emit('page-change', page)"
+        >
+          {{ page }}
+        </TButton>
+        <TButton
+          variant="text"
+          size="small"
+          :full-width="false"
+          class="pagination-btn"
+          :disabled="currentPage === pagesTotal"
+          @click="$emit('page-change', currentPage + 1)"
+        >
+          Next
+        </TButton>
+      </div>
+      <div class="pagination-info">
+        <span class="entries-text"
+          >Showing {{ startEntry }}-{{ endEntry }} of {{ totalEntriesComputed }} entries</span
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import {
+  UserIcon,
+  LockClosedIcon,
+  CreditCardIcon,
+  ArrowUpRightIcon,
+  ArrowDownLeftIcon,
+  ArrowPathIcon,
+  FunnelIcon
+} from '@heroicons/vue/24/outline';
+import { formatShortAmount } from '../../utils/currency';
+import SearchInput from '../SearchInput.vue';
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  transactions: { type: Array, default: () => [] },
+  searchQuery: { type: String, default: '' },
+  currentPage: { type: Number, default: 1 },
+  itemsPerPage: { type: Number, default: 10 },
+  totalPages: { type: Number, default: 1 },
+  totalEntries: { type: Number, default: 0 },
+  activeFilterCount: { type: Number, default: 0 },
+  defaultWallet: { type: Object, default: null }
+});
+
+defineEmits(['edit', 'delete', 'recurrent', 'page-change', 'update:searchQuery', 'toggle-filters']);
+
+const displayedTransactions = computed(() => props.transactions);
+
+const totalEntriesComputed = computed(() => {
+  if (props.totalEntries && props.totalEntries > 0) return props.totalEntries;
+  return displayedTransactions.value.length;
+});
+
+const pagesTotal = computed(() => {
+  if (props.totalPages && props.totalPages > 1) return props.totalPages;
+  return Math.max(1, Math.ceil(totalEntriesComputed.value / props.itemsPerPage));
+});
+
+const startEntry = computed(() => {
+  if (totalEntriesComputed.value === 0) return 0;
+  return (props.currentPage - 1) * props.itemsPerPage + 1;
+});
+
+const endEntry = computed(() => {
+  const end = props.currentPage * props.itemsPerPage;
+  return Math.min(end, totalEntriesComputed.value);
+});
+
+const visiblePages = computed(() => {
+  const pages = [];
+  const maxVisible = 5;
+  const total = pagesTotal.value;
+  let start = Math.max(1, props.currentPage - Math.floor(maxVisible / 2));
+  const end = Math.min(total, start + maxVisible - 1);
+  if (end - start + 1 < maxVisible) start = Math.max(1, end - maxVisible + 1);
+  for (let i = start; i <= end; i++) pages.push(i);
+  return pages;
+});
+
+function isDefaultWallet(txn) {
+  const dw = props.defaultWallet;
+  if (!dw) return false;
+  if (txn.walletId && txn.walletId === dw.id) return true;
+  if (txn.wallet && dw.name && txn.wallet === dw.name) return true;
+  return false;
+}
+
+// Helpers for UI formatting
+const directionLabel = (type) => (type === 'INCOME' ? 'From' : 'To');
+
+function formatShortDate(txn) {
+  const iso = txn?.date || '';
+  if (!iso) return '';
+  const [y, m, d] = iso.split('-');
+  if (!y || !m || !d) return iso;
+  return `${d}/${m}/${y}`;
+}
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+@use '../../assets/scss/_transactions-cards.scss' as *;
+
+.filter-toggle-btn {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  width: 34px;
+  height: 34px;
+  border: 1px solid $border-light;
+  border-radius: $radius-md;
+  background: $bg-white;
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+
+  &:hover {
+    border-color: $primary;
+    background: rgba(var(--color-primary-rgb), 0.05);
+  }
+
+  .filter-toggle-icon {
+    width: 16px;
+    height: 16px;
+    color: $text-muted;
+  }
+
+  .filter-count-badge {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    border-radius: 8px;
+    background-color: $primary;
+    color: white;
+    font-size: 10px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.transfer-indicator {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 2px 6px;
+  border-radius: $radius-sm;
+  font-size: 10px;
+  font-weight: bold;
+  background-color: rgba(var(--color-primary-rgb), 0.15);
+  color: $primary;
+  vertical-align: middle;
+}
+
+.recurring-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  margin-left: 6px;
+  padding: 2px 6px;
+  border-radius: $radius-sm;
+  font-size: 10px;
+  font-weight: bold;
+  background-color: rgba(var(--color-warning-rgb), 0.15);
+  color: $warning-text;
+  vertical-align: middle;
+
+  .recurring-icon {
+    width: 10px;
+    height: 10px;
+  }
+}
+
+.refund-indicator {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 2px 6px;
+  border-radius: $radius-sm;
+  font-size: 10px;
+  font-weight: bold;
+  background-color: rgba(255, 159, 67, 0.18);
+  color: #b45309;
+  vertical-align: middle;
+}
+
+.bottom-right {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.card-action-btn {
+  padding: 4px;
+  min-width: auto;
+  min-height: auto;
+  border: none;
+  border-radius: $radius-sm;
+  background: transparent;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: rgba(var(--color-warning-rgb), 0.1);
+  }
+
+  .card-action-icon {
+    width: 14px;
+    height: 14px;
+    color: $warning-text;
+  }
+}
+</style>
diff --git a/components/transactions/TransactionFilters.stories.js b/components/transactions/TransactionFilters.stories.js
new file mode 100644
index 0000000..c616545
--- /dev/null
+++ b/components/transactions/TransactionFilters.stories.js
@@ -0,0 +1,33 @@
+import TransactionFilters from './TransactionFilters.vue';
+
+const wallets = [
+  { id: 1, name: 'Main Bank Account' },
+  { id: 2, name: 'Cash Wallet' }
+];
+const categories = [
+  { id: 1, name: 'Food & Dining' },
+  { id: 2, name: 'Salary' },
+  { id: 3, name: 'Housing' }
+];
+
+export default {
+  title: 'Domain/Transactions/TransactionFilters',
+  component: TransactionFilters,
+  args: {
+    filters: {},
+    wallets,
+    categories
+  }
+};
+
+export const Default = {};
+
+export const WithActiveFilters = {
+  args: {
+    filters: {
+      type: 'expense',
+      wallet_ids: [1],
+      category_ids: [1, 3]
+    }
+  }
+};
diff --git a/components/transactions/TransactionFilters.vue b/components/transactions/TransactionFilters.vue
new file mode 100644
index 0000000..f0fb49a
--- /dev/null
+++ b/components/transactions/TransactionFilters.vue
@@ -0,0 +1,432 @@
+<template>
+  <div class="transaction-filters">
+    <div class="filters-panel">
+      <TButton
+        variant="text"
+        size="small"
+        :full-width="false"
+        class="filters-close"
+        :aria-label="t('Close')"
+        @click="$emit('close')"
+      >
+        <XMarkIcon class="filters-close__icon" />
+      </TButton>
+
+      <div class="filters-row">
+        <!-- Type filter -->
+        <div class="filter-group filter-group--type">
+          <label class="filter-label">{{ t('Type') }}</label>
+          <div class="type-toggle">
+            <TButton
+              variant="text"
+              size="small"
+              :full-width="false"
+              class="type-btn"
+              :class="{ active: !localFilters.type }"
+              @click="setType(undefined)"
+            >
+              {{ t('All') }}
+            </TButton>
+            <TButton
+              variant="text"
+              size="small"
+              :full-width="false"
+              class="type-btn type-btn--income"
+              :class="{ active: localFilters.type === 'income' }"
+              @click="setType('income')"
+            >
+              {{ t('Income') }}
+            </TButton>
+            <TButton
+              variant="text"
+              size="small"
+              :full-width="false"
+              class="type-btn type-btn--expense"
+              :class="{ active: localFilters.type === 'expense' }"
+              @click="setType('expense')"
+            >
+              {{ t('Expenses') }}
+            </TButton>
+          </div>
+        </div>
+
+        <!-- Date range -->
+        <div class="filter-group filter-group--dates">
+          <label class="filter-label">{{ t('Date Range') }}</label>
+          <div class="date-inputs">
+            <input
+              type="date"
+              :value="localFilters.date_from"
+              :placeholder="t('Start date')"
+              class="date-input"
+              @input="
+                localFilters.date_from = ($event.target).value || undefined;
+                emitFilters();
+              "
+            />
+            <span class="date-separator">-</span>
+            <input
+              type="date"
+              :value="localFilters.date_to"
+              :placeholder="t('End date')"
+              class="date-input"
+              @input="
+                localFilters.date_to = ($event.target).value || undefined;
+                emitFilters();
+              "
+            />
+          </div>
+          <div class="date-presets">
+            <TButton
+              variant="text"
+              size="small"
+              :full-width="false"
+              class="preset-btn"
+              @click="setDatePreset('this-month')"
+            >
+              {{ t('This Month') }}
+            </TButton>
+            <TButton
+              variant="text"
+              size="small"
+              :full-width="false"
+              class="preset-btn"
+              @click="setDatePreset('last-3-months')"
+            >
+              {{ t('Last 3 months') }}
+            </TButton>
+            <TButton
+              variant="text"
+              size="small"
+              :full-width="false"
+              class="preset-btn"
+              @click="setDatePreset('this-year')"
+            >
+              {{ t('This Year') }}
+            </TButton>
+            <TButton
+              variant="text"
+              size="small"
+              :full-width="false"
+              class="preset-btn"
+              @click="setDatePreset('last-year')"
+            >
+              {{ t('Last Year') }}
+            </TButton>
+          </div>
+        </div>
+      </div>
+
+      <div class="filters-row">
+        <!-- Wallet filter -->
+        <div class="filter-group">
+          <label class="filter-label">{{ t('Wallets') }}</label>
+          <SearchableDropdown
+            :options="wallets"
+            :model-value="localFilters.wallet_ids || []"
+            :multiple="true"
+            :placeholder="t('All Wallets')"
+            option-label="name"
+            option-key="id"
+            @update:model-value="handleWalletChange"
+          />
+        </div>
+
+        <!-- Category filter -->
+        <div class="filter-group">
+          <label class="filter-label">{{ t('Category') }}</label>
+          <SearchableDropdown
+            :options="categories"
+            :model-value="localFilters.category_ids || []"
+            :placeholder="t('All Categories')"
+            :multiple="true"
+            option-label="name"
+            option-key="id"
+            @update:model-value="handleCategoryChange"
+          />
+        </div>
+      </div>
+
+      <div class="filters-actions">
+        <TButton
+          :text="t('Reset')"
+          variant="outline"
+          size="small"
+          :full-width="false"
+          @click="reset"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+import { XMarkIcon } from '@heroicons/vue/24/outline';
+import SearchableDropdown from '../SearchableDropdown.vue';
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  filters: {
+    type: Object,
+    default: () => ({})
+  },
+  wallets: {
+    type: Array,
+    default: () => []
+  },
+  categories: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(['update:filters', 'close']);
+
+const localFilters = reactive({ ...props.filters });
+
+function emitFilters() {
+  emit('update:filters', { ...localFilters });
+}
+
+function setType(type) {
+  localFilters.type = type;
+  emitFilters();
+}
+
+// Format a Date as YYYY-MM-DD using local time so presets match the
+// user's calendar view (avoids UTC drift from toISOString on timezones
+// east of UTC near month/year boundaries).
+function toLocalDateString(d) {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${y}-${m}-${day}`;
+}
+
+function setDatePreset(preset) {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = now.getMonth();
+
+  switch (preset) {
+    case 'this-month': {
+      localFilters.date_from = toLocalDateString(new Date(year, month, 1));
+      localFilters.date_to = toLocalDateString(new Date(year, month + 1, 0));
+      break;
+    }
+    case 'last-3-months': {
+      localFilters.date_from = toLocalDateString(new Date(year, month - 2, 1));
+      localFilters.date_to = toLocalDateString(now);
+      break;
+    }
+    case 'this-year':
+      localFilters.date_from = `${year}-01-01`;
+      localFilters.date_to = `${year}-12-31`;
+      break;
+    case 'last-year':
+      localFilters.date_from = `${year - 1}-01-01`;
+      localFilters.date_to = `${year - 1}-12-31`;
+      break;
+  }
+  emitFilters();
+}
+
+function extractIds(value) {
+  if (!Array.isArray(value)) return [];
+  return value.map((item) => (typeof item === 'object' ? item.id : item));
+}
+
+function handleWalletChange(value) {
+  localFilters.wallet_ids = extractIds(value);
+  emitFilters();
+}
+
+function handleCategoryChange(value) {
+  localFilters.category_ids = extractIds(value);
+  emitFilters();
+}
+
+function reset() {
+  localFilters.type = undefined;
+  localFilters.date_from = undefined;
+  localFilters.date_to = undefined;
+  localFilters.wallet_ids = undefined;
+  localFilters.category_ids = undefined;
+  localFilters.search = undefined;
+  emitFilters();
+}
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.transaction-filters {
+  width: 100%;
+}
+
+.filters-panel {
+  position: relative;
+  padding: $spacing-4;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-4;
+  background: $bg-white;
+  border-radius: $radius-lg;
+  border: 1px solid $border-light;
+  box-shadow: $shadow-sm;
+}
+
+.filters-close {
+  position: absolute;
+  top: $spacing-2;
+  right: $spacing-2;
+  padding: 0;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: $radius-md;
+  background: transparent;
+  color: $text-muted;
+  transition: all 0.15s ease;
+
+  &:hover {
+    background: $bg-gray;
+    color: $text-primary;
+  }
+
+  &__icon {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.filters-row {
+  display: flex;
+  gap: $spacing-4;
+  flex-wrap: wrap;
+
+  @media (max-width: $breakpoint-md) {
+    flex-direction: column;
+  }
+}
+
+.filter-group {
+  flex: 1;
+  min-width: 180px;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-1;
+
+  &--type {
+    flex: 0 0 auto;
+  }
+
+  &--dates {
+    flex: 2;
+  }
+}
+
+.filter-label {
+  font-size: $font-size-xs;
+  font-weight: $font-medium;
+  color: $text-muted;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.type-toggle {
+  display: flex;
+  gap: 0;
+  border: 1px solid $border-light;
+  border-radius: $radius-md;
+  overflow: hidden;
+}
+
+.type-btn {
+  padding: 6px 12px;
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  background: $bg-white;
+  border: none;
+  border-radius: 0;
+  color: $text-muted;
+  transition: all 0.15s ease;
+
+  &:not(:last-child) {
+    border-right: 1px solid $border-light;
+  }
+
+  &.active {
+    background-color: $primary;
+    color: white;
+  }
+
+  &--income.active {
+    background-color: #059669;
+  }
+
+  &--expense.active {
+    background-color: #dc2626;
+  }
+}
+
+.date-inputs {
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+}
+
+.date-input {
+  flex: 1;
+  padding: 6px 8px;
+  border: 1px solid $border-light;
+  border-radius: $radius-md;
+  font-size: $font-size-sm;
+  color: $text-primary;
+  background: $bg-white;
+
+  &:focus {
+    outline: none;
+    border-color: $primary;
+  }
+}
+
+.date-separator {
+  color: $text-muted;
+  font-size: $font-size-sm;
+}
+
+.date-presets {
+  display: flex;
+  gap: $spacing-2;
+  flex-wrap: wrap;
+  margin-top: $spacing-1;
+}
+
+.preset-btn {
+  padding: 2px 8px;
+  font-size: $font-size-xs;
+  background: transparent;
+  border: 1px solid $border-light;
+  border-radius: $radius-md;
+  color: $text-muted;
+  transition: all 0.15s ease;
+
+  &:hover {
+    border-color: $primary;
+    color: $primary;
+  }
+}
+
+.filters-actions {
+  display: flex;
+  gap: $spacing-2;
+  justify-content: flex-start;
+  padding-top: $spacing-2;
+  border-top: 1px solid $border-light;
+}
+</style>
diff --git a/components/transactions/TransactionsContentSection.stories.js b/components/transactions/TransactionsContentSection.stories.js
new file mode 100644
index 0000000..4cf960a
--- /dev/null
+++ b/components/transactions/TransactionsContentSection.stories.js
@@ -0,0 +1,68 @@
+import TransactionsContentSection from './TransactionsContentSection.vue';
+
+const transactions = [
+  {
+    id: '1',
+    date: '2024-03-24',
+    time: '10:30',
+    type: 'EXPENSE',
+    party: 'Whole Foods Market',
+    amount: '142.50 USD',
+    category: 'Food & Dining',
+    wallet: 'Main Bank Account',
+    walletId: 1,
+    description: 'Weekly groceries'
+  },
+  {
+    id: '2',
+    date: '2024-03-20',
+    time: '08:15',
+    type: 'INCOME',
+    party: 'Employer',
+    amount: '2800.00 USD',
+    category: 'Salary',
+    wallet: 'Main Bank Account',
+    walletId: 1,
+    description: 'Monthly salary'
+  },
+  {
+    id: '3',
+    date: '2024-03-18',
+    time: '19:45',
+    type: 'EXPENSE',
+    party: 'City Bistro',
+    amount: '68.00 USD',
+    category: 'Food & Dining',
+    wallet: 'Cash Wallet',
+    walletId: 2,
+    description: 'Dinner'
+  }
+];
+
+export default {
+  title: 'Domain/Transactions/TransactionsContentSection',
+  component: TransactionsContentSection,
+  args: {
+    transactions,
+    currentPage: 1,
+    totalPages: 1,
+    totalItems: 3,
+    perPage: 10,
+    totals: { income: 2800, expenses: 210.5, net: 2589.5 },
+    filters: {},
+    activeFilterCount: 0,
+    isLoading: false,
+    error: '',
+    isInitialized: true
+  }
+};
+
+export const Default = {};
+
+export const Empty = {
+  args: {
+    transactions: [],
+    totalItems: 0,
+    totals: { income: 0, expenses: 0, net: 0 }
+  }
+};
diff --git a/components/transactions/TransactionsContentSection.vue b/components/transactions/TransactionsContentSection.vue
new file mode 100644
index 0000000..cd45215
--- /dev/null
+++ b/components/transactions/TransactionsContentSection.vue
@@ -0,0 +1,329 @@
+<template>
+  <div class="content-area">
+    <TTopCard :page-name="'Transaction'" :page-name-plural="'Transactions'" @add="emit('add')">
+      <template #summary>
+        <div v-if="hasTotals" class="totals-summary">
+          <span class="total-item">
+            <span class="total-label">{{ t('Income') }}</span>
+            <span class="total-value income">{{ formatCurrency(totals.income) }}</span>
+          </span>
+          <span class="total-item">
+            <span class="total-label">{{ t('Expenses') }}</span>
+            <span class="total-value expense">{{ formatCurrency(totals.expenses) }}</span>
+          </span>
+          <span class="total-item">
+            <span class="total-label">{{ t('Net') }}</span>
+            <span class="total-value" :class="totals.net >= 0 ? 'income' : 'expense'">{{
+              formatCurrency(totals.net)
+            }}</span>
+          </span>
+        </div>
+      </template>
+      <template #actions>
+        <TButton
+          variant="text"
+          size="small"
+          :full-width="false"
+          class="spreadsheet-trigger"
+          :aria-label="t('Spreadsheet mode')"
+          :title="t('Open spreadsheet view')"
+          @click="showSpreadsheet = true"
+        >
+          <TableCellsIcon class="icon" />
+        </TButton>
+      </template>
+    </TTopCard>
+
+    <TransactionsSpreadsheet v-if="showSpreadsheet" @close="showSpreadsheet = false" />
+
+    <TransactionFilters
+      v-show="showFiltersPanel"
+      :filters="filters"
+      @update:filters="(f) => emit('filter-change', f)"
+      @close="showFiltersPanel = false"
+    />
+
+    <ComponentLoader
+      :is-loading="isLoadingOrNotReady"
+      :error="error"
+      :has-data="transactions.length > 0"
+      :show-empty="true"
+      skeleton-variant="table"
+      :skeleton-count="6"
+      :skeleton-columns="5"
+      empty-state-name="transactions"
+      @create="emit('add')"
+    >
+      <template #empty>
+        <div v-if="activeFilterCount > 0" class="no-filter-results">
+          <div class="no-filter-results__icon-wrapper">
+            <FunnelIcon class="no-filter-results__icon" />
+          </div>
+          <h3 class="no-filter-results__title">{{ t('No results found') }}</h3>
+          <p class="no-filter-results__text">
+            {{ t('No transactions match your current filters. Try adjusting or clearing them.') }}
+          </p>
+          <TButton
+            :text="t('Clear all filters')"
+            variant="primary"
+            size="small"
+            :full-width="false"
+            @click="emit('reset-filters')"
+          />
+        </div>
+        <OnboardingEmptyState v-else page-type="transactions" @create="emit('add')" />
+      </template>
+
+      <!-- Mobile cards -->
+      <TTransactionsCardList
+        class="only-mobile"
+        :transactions="transactions"
+        :search-query="filters.search || ''"
+        :current-page="currentPage"
+        :items-per-page="perPage"
+        :total-pages="totalPages"
+        :total-entries="totalItems"
+        :active-filter-count="activeFilterCount"
+        @update:search-query="(q) => emit('search-change', q)"
+        @page-change="(p) => emit('page-change', p)"
+        @edit="(t) => emit('edit', t)"
+        @delete="(t) => emit('delete', t)"
+        @recurrent="handleRecurrent"
+        @toggle-filters="toggleFilters"
+      />
+
+      <!-- Desktop table -->
+      <TTableComponent
+        class="only-desktop"
+        :transactions="transactions"
+        :all-transactions="transactions"
+        :search-query="filters.search || ''"
+        :current-page="currentPage"
+        :items-per-page="perPage"
+        :total-pages="totalPages"
+        :total-entries="totalItems"
+        :active-filter-count="activeFilterCount"
+        :filtered-totals="totals"
+        @update:search-query="(q) => emit('search-change', q)"
+        @page-change="(p) => emit('page-change', p)"
+        @edit="(t) => emit('edit', t)"
+        @delete="(t) => emit('delete', t)"
+        @recurrent="handleRecurrent"
+        @toggle-filters="toggleFilters"
+      />
+    </ComponentLoader>
+
+    <RecurringModal
+      :is-open="showRecurringModal"
+      :transaction="selectedTransaction"
+      @save="handleRecurringSave"
+      @remove="handleRecurringRemove"
+      @cancel="showRecurringModal = false"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { FunnelIcon, TableCellsIcon } from '@heroicons/vue/24/outline';
+import TTopCard from '../TTopCard.vue';
+import OnboardingEmptyState from '../onboarding/OnboardingEmptyState.vue';
+import TTableComponent from '../TTableComponent.vue';
+import TTransactionsCardList from './TTransactionsCardList.vue';
+import TransactionFilters from './TransactionFilters.vue';
+import TransactionsSpreadsheet from './TransactionsSpreadsheet.vue';
+import TButton from '../TButton.vue';
+import ComponentLoader from '../ComponentLoader.vue';
+import RecurringModal from '../modals/RecurringModal.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+
+const props = defineProps({
+  transactions: { type: Array, default: () => [] },
+  currentPage: { type: Number, default: 1 },
+  totalPages: { type: Number, default: 1 },
+  totalItems: { type: Number, default: 0 },
+  perPage: { type: Number, default: 10 },
+  totals: {
+    type: Object,
+    default: () => ({ income: 0, expenses: 0, net: 0 })
+  },
+  filters: { type: Object, default: () => ({}) },
+  activeFilterCount: { type: Number, default: 0 },
+  isLoading: { type: Boolean, default: false },
+  error: { type: String, default: '' },
+  isInitialized: { type: Boolean, default: false }
+});
+
+const emit = defineEmits([
+  'add',
+  'edit',
+  'delete',
+  'recurrent-save',
+  'recurrent-remove',
+  'page-change',
+  'filter-change',
+  'search-change',
+  'reset-filters'
+]);
+
+const showRecurringModal = ref(false);
+const showFiltersPanel = ref(false);
+const showSpreadsheet = ref(false);
+const selectedTransaction = ref(null);
+
+function toggleFilters() {
+  showFiltersPanel.value = !showFiltersPanel.value;
+}
+
+const hasTotals = computed(() => props.totalItems > 0);
+
+const formatCurrency = (value) => {
+  return new Intl.NumberFormat('en-US', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(value);
+};
+
+const isLoadingOrNotReady = computed(() => props.isLoading || !props.isInitialized);
+
+function handleRecurrent(txn) {
+  selectedTransaction.value = txn;
+  showRecurringModal.value = true;
+}
+
+function handleRecurringSave(config) {
+  if (!selectedTransaction.value) return;
+  emit('recurrent-save', { txn: selectedTransaction.value, config });
+  showRecurringModal.value = false;
+  selectedTransaction.value = null;
+}
+
+function handleRecurringRemove() {
+  if (!selectedTransaction.value) return;
+  emit('recurrent-remove', selectedTransaction.value);
+  showRecurringModal.value = false;
+  selectedTransaction.value = null;
+}
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+@use '../../assets/scss/_utilities.scss' as *;
+
+.content-area {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  align-items: center;
+  width: 100%;
+}
+
+.no-filter-results {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 3rem 1.5rem;
+  text-align: center;
+
+  &__icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    background-color: $primary-light;
+    margin-bottom: 0.25rem;
+  }
+
+  &__icon {
+    width: 28px;
+    height: 28px;
+    color: $primary;
+  }
+
+  &__title {
+    font-size: $font-size-base;
+    font-weight: $font-semibold;
+    color: $text-primary;
+    margin: 0;
+  }
+
+  &__text {
+    color: $text-muted;
+    font-size: $font-size-sm;
+    margin: 0;
+    max-width: 320px;
+    line-height: 1.5;
+  }
+}
+
+.spreadsheet-trigger {
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  background: var(--glass-bg);
+  border: 1px solid $border-light;
+  border-radius: 10px;
+  color: var(--surface-deep);
+  backdrop-filter: blur(6px);
+  transition:
+    background-color $duration-fast $easing-standard,
+    color $duration-fast $easing-standard;
+
+  .icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  &:hover {
+    background: var(--glass-bg-strong);
+  }
+}
+
+.totals-summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 6px;
+  flex-wrap: wrap;
+}
+
+.total-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: var(--glass-bg);
+  border: 1px solid $border-light;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  backdrop-filter: blur(6px);
+
+  .total-label {
+    color: var(--surface-ink);
+    opacity: 0.7;
+    font-weight: $font-semibold;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    font-size: 10px;
+  }
+
+  .total-value {
+    font-weight: $font-bold;
+    color: var(--surface-ink);
+
+    &.income {
+      color: var(--color-income);
+    }
+
+    &.expense {
+      color: var(--color-expense);
+    }
+  }
+}
+</style>
diff --git a/components/transactions/TransactionsSpreadsheet.stories.js b/components/transactions/TransactionsSpreadsheet.stories.js
new file mode 100644
index 0000000..423f5e7
--- /dev/null
+++ b/components/transactions/TransactionsSpreadsheet.stories.js
@@ -0,0 +1,49 @@
+import TransactionsSpreadsheet from './TransactionsSpreadsheet.vue';
+
+const rows = [
+  {
+    id: 1,
+    datetime: '2024-03-24T10:30:00',
+    type: 'expense',
+    amount: 142.5,
+    description: 'Weekly groceries',
+    wallet: { name: 'Main Bank Account', currency: 'USD' },
+    party: { name: 'Whole Foods Market' },
+    categories: [{ name: 'Food & Dining' }]
+  },
+  {
+    id: 2,
+    datetime: '2024-03-20T08:15:00',
+    type: 'income',
+    amount: 2800,
+    description: 'Monthly salary',
+    wallet: { name: 'Main Bank Account', currency: 'USD' },
+    party: { name: 'Employer' },
+    categories: [{ name: 'Salary' }]
+  },
+  {
+    id: 3,
+    datetime: '2024-03-18T19:45:00',
+    type: 'expense',
+    amount: 68,
+    description: 'Dinner',
+    wallet: { name: 'Cash Wallet', currency: 'USD' },
+    party: { name: 'City Bistro' },
+    categories: [{ name: 'Food & Dining' }]
+  }
+];
+
+const fetchTransactions = async ({ page }) => ({
+  data: page === 1 ? rows : [],
+  last_page: 1
+});
+
+export default {
+  title: 'Domain/Transactions/TransactionsSpreadsheet',
+  component: TransactionsSpreadsheet,
+  args: {
+    fetchTransactions
+  }
+};
+
+export const Default = {};
diff --git a/components/transactions/TransactionsSpreadsheet.vue b/components/transactions/TransactionsSpreadsheet.vue
new file mode 100644
index 0000000..748c1c5
--- /dev/null
+++ b/components/transactions/TransactionsSpreadsheet.vue
@@ -0,0 +1,645 @@
+<template>
+  <Teleport to="body">
+    <div class="spreadsheet-overlay" role="dialog" aria-modal="true">
+      <header class="spreadsheet-header">
+        <div class="spreadsheet-title">
+          <TableCellsIcon class="icon" />
+          <h2>{{ t('Transactions spreadsheet') }}</h2>
+          <span class="count">
+            {{ t('{count} rows', { count: filteredRows.length }) }}
+            <span v-if="isStreaming" class="loading-more">· {{ t('loading…') }}</span>
+          </span>
+        </div>
+        <div class="spreadsheet-actions">
+          <TInput
+            v-model="searchInput"
+            type="search"
+            class="search"
+            :placeholder="t('Search rows...')"
+          />
+          <TButton
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="action-btn"
+            :disabled="!filteredRows.length"
+            :aria-label="t('Export CSV')"
+            :title="t('Export CSV')"
+            @click="exportCsv"
+          >
+            <ArrowDownTrayIcon class="icon" />
+          </TButton>
+          <TButton
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="close-btn"
+            :aria-label="t('Close')"
+            @click="$emit('close')"
+          >
+            <XMarkIcon class="icon" />
+          </TButton>
+        </div>
+      </header>
+
+      <div v-if="isLoading" class="state">
+        <div class="spinner" />
+        <p>{{ t('Loading transactions...') }}</p>
+      </div>
+
+      <div v-else-if="error" class="state">
+        <p class="error">{{ error }}</p>
+      </div>
+
+      <div v-else class="sheet-wrap">
+        <table class="sheet">
+          <thead>
+            <tr>
+              <th class="col-idx">#</th>
+              <th
+                v-for="col in columns"
+                :key="col.key"
+                :class="[col.cls, 'sortable']"
+                :aria-sort="
+                  sortKey === col.key ? (sortDir === 'asc' ? 'ascending' : 'descending') : 'none'
+                "
+                @click="toggleSort(col.key)"
+              >
+                <span class="th-inner">
+                  {{ col.label }}
+                  <ChevronUpIcon
+                    v-if="sortKey === col.key && sortDir === 'asc'"
+                    class="sort-icon"
+                  />
+                  <ChevronDownIcon
+                    v-else-if="sortKey === col.key && sortDir === 'desc'"
+                    class="sort-icon"
+                  />
+                </span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(row, i) in sortedRows" :key="row.id" :class="`row--${row.type}`">
+              <td class="col-idx">{{ i + 1 }}</td>
+              <td class="col-date">{{ formatDate(row.datetime) }}</td>
+              <td class="col-type">
+                <span class="type-dot" :class="`type-dot--${row.type}`" />
+                {{ row.type }}
+                <span v-if="row.is_refund" class="refund-tag" :title="t('Marked as refund')">
+                  {{ t('refund') }}
+                </span>
+              </td>
+              <td class="col-amount" :class="`amt--${row.type}`">
+                {{ formatAmount(row.amount) }}
+              </td>
+              <td class="col-currency">{{ row.wallet?.currency ?? '' }}</td>
+              <td class="col-desc">{{ row.description || '—' }}</td>
+              <td class="col-cat">{{ categoriesText(row) }}</td>
+              <td class="col-wallet">{{ row.wallet?.name ?? '' }}</td>
+              <td class="col-party">{{ row.party?.name ?? '' }}</td>
+            </tr>
+          </tbody>
+          <tfoot>
+            <tr class="totals">
+              <td colspan="3">{{ t('Totals') }}</td>
+              <td>{{ formatAmount(totalAmount) }}</td>
+              <td colspan="5">
+                <span class="muted">{{ t('Income') }}</span>
+                <strong class="amt--income">{{ formatAmount(totalIncome) }}</strong>
+                <span class="muted">· {{ t('Expenses') }}</span>
+                <strong class="amt--expense">{{ formatAmount(totalExpense) }}</strong>
+                <span class="muted">· {{ t('Net') }}</span>
+                <strong :class="totalIncome - totalExpense >= 0 ? 'amt--income' : 'amt--expense'">
+                  {{ formatAmount(totalIncome - totalExpense) }}
+                </strong>
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import {
+  TableCellsIcon,
+  XMarkIcon,
+  ArrowDownTrayIcon,
+  ChevronUpIcon,
+  ChevronDownIcon
+} from '@heroicons/vue/24/outline';
+import TButton from '../TButton.vue';
+import TInput from '../TInput.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k, params) => {
+  if (params?.count !== undefined) return `${params.count} rows`;
+  return k;
+});
+
+const emit = defineEmits(['close']);
+
+const props = defineProps({
+  fetchTransactions: {
+    type: Function,
+    default: null
+  }
+});
+
+const rows = ref([]);
+const isLoading = ref(true);
+const isStreaming = ref(false);
+const error = ref('');
+const searchInput = ref('');
+const search = ref('');
+
+let searchTimer = null;
+watch(searchInput, (value) => {
+  if (searchTimer) clearTimeout(searchTimer);
+  searchTimer = setTimeout(() => {
+    search.value = value;
+  }, 200);
+});
+
+const PAGE_SIZE = 100;
+const MAX_PAGES = 50;
+// Guards against an out-of-order load overwriting a newer one.
+let loadToken = 0;
+
+async function loadAll() {
+  const token = ++loadToken;
+  isLoading.value = true;
+  isStreaming.value = true;
+  error.value = '';
+  rows.value = [];
+  try {
+    let page = 1;
+    while (page <= MAX_PAGES) {
+      const response = props.fetchTransactions
+        ? await props.fetchTransactions({ limit: PAGE_SIZE, page })
+        : { data: [] };
+      if (token !== loadToken) return;
+      const chunk = Array.isArray(response?.data) ? response.data : [];
+      // Append per page so the first chunk paints immediately and the totals
+      // climb as later pages stream in, rather than blocking on the full set.
+      rows.value = rows.value.concat(chunk);
+      isLoading.value = false;
+      const lastPage = Number(response?.last_page) || 1;
+      if (chunk.length < PAGE_SIZE || page >= lastPage) break;
+      page += 1;
+    }
+  } catch (e) {
+    if (token !== loadToken) return;
+    error.value = e instanceof Error ? e.message : t('Failed to load');
+  } finally {
+    if (token === loadToken) {
+      isLoading.value = false;
+      isStreaming.value = false;
+    }
+  }
+}
+
+const filteredRows = computed(() => {
+  const q = search.value.trim().toLowerCase();
+  if (!q) return rows.value;
+  return rows.value.filter((r) => {
+    const hay = [
+      r.description,
+      r.wallet?.name,
+      r.party?.name,
+      (r.categories ?? []).map((c) => c.name).join(' '),
+      r.type
+    ]
+      .filter(Boolean)
+      .join(' ')
+      .toLowerCase();
+    return hay.includes(q);
+  });
+});
+
+const totalAmount = computed(() =>
+  filteredRows.value.reduce((s, r) => s + Number(r.amount || 0), 0)
+);
+const totalIncome = computed(() =>
+  filteredRows.value.filter((r) => r.type === 'income').reduce((s, r) => s + Number(r.amount), 0)
+);
+const totalExpense = computed(() =>
+  filteredRows.value.filter((r) => r.type === 'expense').reduce((s, r) => s + Number(r.amount), 0)
+);
+
+const sortKey = ref(null);
+const sortDir = ref('asc');
+
+const sortValue = (row, key) => {
+  switch (key) {
+    case 'datetime':
+      return row.datetime || '';
+    case 'type':
+      return row.type || '';
+    case 'amount':
+      return Number(row.amount) || 0;
+    case 'currency':
+      return row.wallet?.currency || '';
+    case 'description':
+      return (row.description || '').toLowerCase();
+    case 'categories':
+      return categoriesText(row).toLowerCase();
+    case 'wallet':
+      return (row.wallet?.name || '').toLowerCase();
+    case 'party':
+      return (row.party?.name || '').toLowerCase();
+    default:
+      return '';
+  }
+};
+
+const sortedRows = computed(() => {
+  const key = sortKey.value;
+  if (!key) return filteredRows.value;
+  const dir = sortDir.value === 'asc' ? 1 : -1;
+  return [...filteredRows.value].sort((a, b) => {
+    const av = sortValue(a, key);
+    const bv = sortValue(b, key);
+    if (av < bv) return -1 * dir;
+    if (av > bv) return 1 * dir;
+    return 0;
+  });
+});
+
+const columns = computed(() => [
+  { key: 'datetime', label: t('Date'), cls: 'col-date' },
+  { key: 'type', label: t('Type'), cls: 'col-type' },
+  { key: 'amount', label: t('Amount'), cls: 'col-amount' },
+  { key: 'currency', label: t('Currency'), cls: 'col-currency' },
+  { key: 'description', label: t('Description'), cls: 'col-desc' },
+  { key: 'categories', label: t('Categories'), cls: 'col-cat' },
+  { key: 'wallet', label: t('Wallet'), cls: 'col-wallet' },
+  { key: 'party', label: t('Party'), cls: 'col-party' }
+]);
+
+const toggleSort = (key) => {
+  if (sortKey.value === key) {
+    sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc';
+  } else {
+    sortKey.value = key;
+    sortDir.value = 'asc';
+  }
+};
+
+const csvEscape = (value) => {
+  const s = String(value ?? '');
+  return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+};
+
+const exportCsv = () => {
+  const headers = [
+    t('Date'),
+    t('Type'),
+    t('Amount'),
+    t('Currency'),
+    t('Description'),
+    t('Categories'),
+    t('Wallet'),
+    t('Party')
+  ];
+  const lines = [headers.map(csvEscape).join(',')];
+  for (const r of sortedRows.value) {
+    lines.push(
+      [
+        formatDate(r.datetime),
+        r.type,
+        Number(r.amount) || 0,
+        r.wallet?.currency ?? '',
+        r.description ?? '',
+        categoriesText(r),
+        r.wallet?.name ?? '',
+        r.party?.name ?? ''
+      ]
+        .map(csvEscape)
+        .join(',')
+    );
+  }
+  const blob = new Blob(['' + lines.join('\n')], { type: 'text/csv;charset=utf-8;' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = 'transactions.csv';
+  link.click();
+  URL.revokeObjectURL(url);
+};
+
+const formatDate = (iso) => {
+  if (!iso) return '';
+  const d = new Date(iso);
+  return isNaN(d.getTime()) ? iso : d.toLocaleString();
+};
+
+const formatAmount = (value) => {
+  const n = Number(value);
+  if (!Number.isFinite(n)) return '';
+  return new Intl.NumberFormat(undefined, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(n);
+};
+
+const categoriesText = (row) => {
+  const list = row.categories ?? [];
+  if (!list.length) return '';
+  return list.map((c) => c.name).join(', ');
+};
+
+const onKey = (e) => {
+  if (e.key === 'Escape') emit('close');
+};
+
+onMounted(() => {
+  document.body.style.overflow = 'hidden';
+  document.addEventListener('keydown', onKey);
+  loadAll();
+});
+
+onUnmounted(() => {
+  document.body.style.overflow = '';
+  document.removeEventListener('keydown', onKey);
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.spreadsheet-overlay {
+  position: fixed;
+  inset: 0;
+  background: $bg-white;
+  color: $text-primary;
+  z-index: $z-index-modal;
+  display: flex;
+  flex-direction: column;
+}
+
+.spreadsheet-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid $border-color;
+  background: $bg-slate;
+  flex-shrink: 0;
+}
+
+.spreadsheet-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  h2 {
+    margin: 0;
+    font-size: $font-size-base;
+    font-weight: $font-semibold;
+  }
+
+  .icon {
+    width: 20px;
+    height: 20px;
+    color: $primary;
+  }
+
+  .count {
+    font-size: $font-size-xs;
+    color: $text-muted;
+    margin-left: 6px;
+  }
+}
+
+.spreadsheet-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.search {
+  width: 240px;
+  min-height: 32px;
+  border-color: $border-color;
+  border-radius: $radius-md;
+  background: $input-bg;
+  font-size: $font-size-sm;
+}
+
+.close-btn,
+.action-btn {
+  background: transparent;
+  border: 1px solid $border-color;
+  border-radius: $radius-md;
+  padding: 6px;
+  color: $text-muted;
+
+  .icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  &:hover:not(:disabled) {
+    color: $primary;
+    border-color: $primary-muted;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.loading-more {
+  color: $primary;
+  font-style: italic;
+}
+
+.state {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: center;
+  padding: 3rem 1rem;
+
+  .error {
+    color: $error-color;
+  }
+}
+
+.spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid $bg-light;
+  border-top-color: $primary;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.sheet-wrap {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  background: $bg-white;
+}
+
+.sheet {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 12px;
+  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
+
+  thead th {
+    position: sticky;
+    top: 0;
+    background: $bg-slate;
+    color: $text-secondary;
+    text-align: left;
+    padding: 6px 10px;
+    font-weight: $font-semibold;
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border-bottom: 1px solid $border-color;
+    z-index: 2;
+
+    &.sortable {
+      cursor: pointer;
+      user-select: none;
+
+      &:hover {
+        color: $primary;
+      }
+    }
+
+    .th-inner {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .sort-icon {
+      width: 12px;
+      height: 12px;
+      color: $primary;
+    }
+  }
+
+  tbody td {
+    padding: 4px 10px;
+    border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.05);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 320px;
+  }
+
+  tbody tr:hover {
+    background: rgba(var(--color-primary-rgb), 0.04);
+  }
+
+  .col-idx {
+    width: 44px;
+    text-align: right;
+    color: $text-muted;
+    background: $bg-slate;
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  .col-date {
+    min-width: 150px;
+  }
+
+  .col-type {
+    text-transform: capitalize;
+  }
+
+  .col-amount {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+    font-weight: $font-semibold;
+  }
+
+  .col-currency {
+    width: 60px;
+    color: $text-muted;
+  }
+
+  tfoot .totals {
+    position: sticky;
+    bottom: 0;
+    background: $bg-slate;
+    font-weight: $font-semibold;
+    border-top: 2px solid $border-color;
+
+    td {
+      padding: 8px 10px;
+      border-top: 1px solid $border-color;
+
+      strong {
+        margin: 0 8px;
+      }
+
+      .muted {
+        color: $text-muted;
+        font-weight: $font-normal;
+      }
+    }
+  }
+}
+
+.type-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  margin-right: 6px;
+  vertical-align: middle;
+
+  &--income {
+    background: var(--color-success);
+  }
+
+  &--expense {
+    background: var(--color-error);
+  }
+}
+
+.amt--income {
+  color: var(--color-success);
+}
+
+.amt--expense {
+  color: var(--color-error);
+}
+
+.refund-tag {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 1px 6px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: #b45309;
+  background: rgba(255, 159, 67, 0.18);
+  border: 1px solid rgba(255, 159, 67, 0.35);
+  text-transform: uppercase;
+}
+</style>
+
+
diff --git a/components/wallets/WalletDetailPanel.stories.js b/components/wallets/WalletDetailPanel.stories.js
new file mode 100644
index 0000000..cb0e844
--- /dev/null
+++ b/components/wallets/WalletDetailPanel.stories.js
@@ -0,0 +1,35 @@
+import WalletDetailPanel from './WalletDetailPanel.vue';
+
+const wallet = {
+  id: 1,
+  name: 'Main Bank Account',
+  type: 'bank',
+  currency: 'USD',
+  icon: 'Landmark'
+};
+
+const transactions = [
+  { date: '2024-03-24', type: 'EXPENSE', amount: '142.50 USD', party: 'Whole Foods', category: 'Food & Dining' },
+  { date: '2024-03-20', type: 'INCOME', amount: '2800.00 USD', party: 'Employer', category: 'Salary' },
+  { date: '2024-03-18', type: 'EXPENSE', amount: '68.00 USD', party: 'City Bistro', category: 'Food & Dining' }
+];
+
+export default {
+  title: 'Domain/Wallets/WalletDetailPanel',
+  component: WalletDetailPanel,
+  args: {
+    wallet,
+    isDefault: true,
+    transactions,
+    showBack: false
+  }
+};
+
+export const WithWallet = {};
+
+export const Empty = {
+  args: {
+    wallet: null,
+    transactions: []
+  }
+};
diff --git a/components/wallets/WalletDetailPanel.vue b/components/wallets/WalletDetailPanel.vue
new file mode 100644
index 0000000..76c2694
--- /dev/null
+++ b/components/wallets/WalletDetailPanel.vue
@@ -0,0 +1,922 @@
+<template>
+  <div class="detail" :class="{ 'detail--empty': !wallet }">
+    <div v-if="!wallet" class="empty">
+      <svg class="empty-illustration" viewBox="0 0 220 220" aria-hidden="true">
+        <defs>
+          <radialGradient id="wempty-glow" cx="50%" cy="50%" r="55%">
+            <stop offset="0%" stop-color="var(--color-primary)" stop-opacity="0.22" />
+            <stop offset="100%" stop-color="var(--color-primary)" stop-opacity="0" />
+          </radialGradient>
+        </defs>
+        <circle cx="110" cy="110" r="100" fill="url(#wempty-glow)" />
+        <circle
+          cx="110"
+          cy="110"
+          r="80"
+          fill="none"
+          stroke="var(--color-primary)"
+          stroke-opacity="0.18"
+          stroke-width="1"
+          stroke-dasharray="3 4"
+        />
+        <circle
+          cx="110"
+          cy="110"
+          r="56"
+          fill="none"
+          stroke="var(--color-primary)"
+          stroke-opacity="0.28"
+          stroke-width="1"
+        />
+        <rect x="74" y="92" width="72" height="44" rx="8" fill="var(--color-primary-light)" />
+        <rect
+          x="74"
+          y="92"
+          width="72"
+          height="14"
+          rx="8"
+          fill="var(--color-primary)"
+          opacity="0.6"
+        />
+        <circle cx="132" cy="116" r="5" fill="var(--color-primary)" />
+        <circle cx="190" cy="60" r="6" fill="var(--color-primary)" opacity="0.7" />
+        <circle cx="35" cy="170" r="4" fill="var(--color-primary)" opacity="0.55" />
+        <circle cx="170" cy="180" r="5" fill="var(--color-primary)" opacity="0.45" />
+      </svg>
+      <p class="empty-title">{{ t('Select a wallet') }}</p>
+      <p class="empty-sub">
+        {{ t('Pick a wallet on the left to see its balance, activity, and recent transactions.') }}
+      </p>
+    </div>
+
+    <Transition v-else name="wallet-swap" mode="out-in">
+      <div :key="wallet.id" class="detail-body">
+        <header class="hero surface" :class="netTone">
+          <svg
+            class="hero-decor"
+            viewBox="0 0 800 80"
+            preserveAspectRatio="xMaxYMid slice"
+            aria-hidden="true"
+          >
+            <defs>
+              <pattern
+                :id="`whero-dots-${wallet.id}`"
+                width="18"
+                height="18"
+                patternUnits="userSpaceOnUse"
+              >
+                <circle cx="2" cy="2" r="1" fill="var(--surface-deep)" opacity="0.12" />
+              </pattern>
+              <radialGradient :id="`whero-bloom-${wallet.id}`" cx="100%" cy="50%" r="60%">
+                <stop offset="0%" stop-color="var(--surface-accent)" stop-opacity="0.45" />
+                <stop offset="100%" stop-color="var(--surface-accent)" stop-opacity="0" />
+              </radialGradient>
+            </defs>
+            <rect x="0" y="0" width="800" height="80" :fill="`url(#whero-dots-${wallet.id})`" />
+            <circle cx="780" cy="40" r="120" :fill="`url(#whero-bloom-${wallet.id})`" />
+          </svg>
+
+          <TButton
+            v-if="showBack"
+            variant="text"
+            size="small"
+            :full-width="false"
+            class="back-btn"
+            :aria-label="t('Back to list')"
+            @click="$emit('back')"
+          >
+            <ChevronLeft :size="18" />
+          </TButton>
+
+          <div class="hero-avatar">
+            <component :is="resolvedIcon" :size="18" />
+          </div>
+          <div class="hero-meta">
+            <div class="hero-name-row">
+              <h2 class="hero-name">{{ wallet.name }}</h2>
+              <span v-if="isDefault" class="hero-default-badge">
+                <Star :size="11" />
+                {{ t('Default') }}
+              </span>
+            </div>
+            <span class="hero-sub">
+              <span class="hero-currency">{{ wallet.currency }}</span>
+              <template v-if="wallet.type">
+                <span class="hero-dot">·</span>
+                <span class="hero-type">{{ displayType }}</span>
+              </template>
+            </span>
+          </div>
+
+          <div class="hero-actions">
+            <TButton
+              variant="text"
+              size="small"
+              :full-width="false"
+              class="hero-action"
+              :title="t('Edit')"
+              :aria-label="t('Edit')"
+              @click="$emit('edit', wallet)"
+            >
+              <Edit3 :size="14" />
+            </TButton>
+            <TButton
+              variant="text"
+              size="small"
+              :full-width="false"
+              class="hero-action hero-action--danger"
+              :title="t('Delete')"
+              :aria-label="t('Delete')"
+              @click="$emit('delete', wallet)"
+            >
+              <Trash2 :size="14" />
+            </TButton>
+          </div>
+        </header>
+
+        <section class="totals">
+          <div class="total total--balance">
+            <span class="total-label">{{ t('Balance') }}</span>
+            <p class="total-value">{{ formatter(wallet.balance || 0, wallet.currency) }}</p>
+          </div>
+          <div class="total-divider" />
+          <div class="total total--income">
+            <span class="total-label">{{ t('Income') }}</span>
+            <p class="total-value tone-income">
+              {{ formatter(wallet.stats?.total_income || 0, wallet.currency) }}
+            </p>
+          </div>
+          <div class="total-divider" />
+          <div class="total total--expense">
+            <span class="total-label">{{ t('Expense') }}</span>
+            <p class="total-value tone-expense">
+              {{ formatter(wallet.stats?.total_expense || 0, wallet.currency) }}
+            </p>
+          </div>
+          <div class="total-divider" />
+          <div class="total total--net">
+            <span class="total-label">{{ t('Net') }}</span>
+            <p class="total-value" :class="netValue >= 0 ? 'tone-income' : 'tone-expense'">
+              {{ formatter(netValue, wallet.currency) }}
+            </p>
+          </div>
+        </section>
+
+        <section class="chart-card">
+          <header class="chart-head">
+            <div>
+              <span class="chart-eyebrow">{{ t('Last 6 months') }}</span>
+              <h3 class="chart-title">{{ t('Activity') }}</h3>
+            </div>
+            <span class="chart-legend">
+              <span class="legend-dot legend-dot--income" />{{ t('Income') }}
+              <span class="legend-dot legend-dot--expense" />{{ t('Expense') }}
+            </span>
+          </header>
+          <svg
+            v-if="hasActivity"
+            class="chart-svg"
+            :viewBox="`0 0 ${chartW} ${chartH}`"
+            preserveAspectRatio="none"
+          >
+            <line
+              v-for="i in 4"
+              :key="`grid-${i}`"
+              :x1="0"
+              :x2="chartW"
+              :y1="(chartH - 24) * (i / 4) + 4"
+              :y2="(chartH - 24) * (i / 4) + 4"
+              class="chart-grid"
+              vector-effect="non-scaling-stroke"
+            />
+            <polyline
+              :points="linePoints('income')"
+              fill="none"
+              stroke="var(--color-income)"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              vector-effect="non-scaling-stroke"
+            />
+            <polyline
+              :points="linePoints('expense')"
+              fill="none"
+              stroke="var(--color-expense)"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              vector-effect="non-scaling-stroke"
+            />
+            <g v-for="(m, i) in monthly" :key="`pt-${i}`">
+              <circle
+                v-if="m.income > 0"
+                :cx="xAt(i)"
+                :cy="yAt(m.income)"
+                r="3"
+                fill="var(--color-income)"
+              />
+              <circle
+                v-if="m.expense > 0"
+                :cx="xAt(i)"
+                :cy="yAt(m.expense)"
+                r="3"
+                fill="var(--color-expense)"
+              />
+            </g>
+            <text
+              v-for="(m, i) in monthly"
+              :key="`label-${i}`"
+              :x="xAt(i)"
+              :y="chartH - 4"
+              text-anchor="middle"
+              class="chart-axis"
+            >
+              {{ m.label }}
+            </text>
+          </svg>
+          <div v-else class="chart-empty">
+            <Activity :size="22" />
+            <span>{{ t('No activity in the last 6 months yet.') }}</span>
+          </div>
+        </section>
+
+        <section class="recent">
+          <header class="recent-head">
+            <div>
+              <span class="recent-eyebrow">{{ t('Recent transactions') }}</span>
+              <h3 class="recent-title">{{ recentTransactions.length }} {{ t('shown') }}</h3>
+            </div>
+            <NuxtLink :to="`/transactions?walletId=${wallet.id}`" class="recent-link">
+              {{ t('View all') }}
+              <ChevronRight :size="14" />
+            </NuxtLink>
+          </header>
+          <ul v-if="recentTransactions.length" class="recent-list">
+            <li v-for="tx in recentTransactions" :key="tx.id" class="recent-row">
+              <div class="recent-row-left">
+                <span
+                  class="recent-type"
+                  :class="
+                    tx.type === 'INCOME' || tx.type === 'income' ? 'tone-income' : 'tone-expense'
+                  "
+                >
+                  <component
+                    :is="
+                      tx.type === 'INCOME' || tx.type === 'income' ? ArrowDownLeft : ArrowUpRight
+                    "
+                    :size="14"
+                  />
+                </span>
+                <div class="recent-text">
+                  <span class="recent-name">{{
+                    tx.party || tx.description || tx.category || t('Transaction')
+                  }}</span>
+                  <span class="recent-date">{{ formatDate(tx.date || tx.datetime) }}</span>
+                </div>
+              </div>
+              <span
+                class="recent-amount"
+                :class="
+                  tx.type === 'INCOME' || tx.type === 'income' ? 'tone-income' : 'tone-expense'
+                "
+              >
+                {{ formatter(parseAmount(tx.amount).value, wallet.currency) }}
+              </span>
+            </li>
+          </ul>
+          <div v-else class="recent-empty">
+            {{ t('No transactions yet on this wallet.') }}
+          </div>
+        </section>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import * as LucideIcons from 'lucide-vue-next';
+import {
+  Edit3,
+  Trash2,
+  Star,
+  ChevronLeft,
+  ChevronRight,
+  ArrowDownLeft,
+  ArrowUpRight,
+  Activity
+} from 'lucide-vue-next';
+import { parseAmount } from '../../utils/currency';
+
+import TButton from '../TButton.vue';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k) => k);
+const locale = i18n?.locale || { value: 'en' };
+
+const props = defineProps({
+  wallet: { type: Object, default: null },
+  isDefault: { type: Boolean, default: false },
+  transactions: { type: Array, default: () => [] },
+  formatter: { type: Function, default: (n, cur) => `${Math.round(n)} ${cur || ''}` },
+  showBack: { type: Boolean, default: false }
+});
+
+defineEmits(['edit', 'delete', 'back']);
+
+const chartW = 720;
+const chartH = 200;
+
+const displayType = computed(() => {
+  if (!props.wallet?.type) return '';
+  const type = props.wallet.type.toLowerCase();
+  const map = {
+    bank_account: t('Bank account'),
+    cash: t('Cash'),
+    credit_card: t('Credit card'),
+    debit_card: t('Debit card'),
+    digital_wallet: t('Digital wallet'),
+    savings: t('Savings')
+  };
+  return (
+    map[type] ||
+    props.wallet.type.charAt(0).toUpperCase() + props.wallet.type.slice(1).toLowerCase()
+  );
+});
+
+const netValue = computed(() => {
+  if (!props.wallet) return 0;
+  return (
+    Number(props.wallet.stats?.total_income || 0) - Number(props.wallet.stats?.total_expense || 0)
+  );
+});
+
+const netTone = computed(() => {
+  if (!props.wallet) return 'surface--brand';
+  if (netValue.value > 0) return 'surface--income';
+  if (netValue.value < 0) return 'surface--expense';
+  return 'surface--brand';
+});
+
+const resolvedIcon = computed(() => {
+  const icon = props.wallet?.icon;
+  let v = '';
+  if (icon) {
+    if (typeof icon === 'string') v = icon;
+    else if (icon.path) v = icon.path;
+    else if (icon.content) v = icon.content;
+  }
+  return (v && LucideIcons[v]) || LucideIcons.Wallet;
+});
+
+const walletTransactions = computed(() => {
+  if (!props.wallet) return [];
+  return props.transactions
+    .filter((tx) => tx.walletId === props.wallet.id)
+    .sort(
+      (a, b) => new Date(b.date || b.datetime).getTime() - new Date(a.date || a.datetime).getTime()
+    );
+});
+
+const recentTransactions = computed(() => walletTransactions.value.slice(0, 6));
+
+const monthly = computed(() => {
+  const out = [];
+  const now = new Date();
+  for (let i = 5; i >= 0; i -= 1) {
+    const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
+    out.push({
+      key: `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`,
+      label: new Intl.DateTimeFormat(locale.value, { month: 'short' }).format(d),
+      income: 0,
+      expense: 0
+    });
+  }
+  walletTransactions.value.forEach((tx) => {
+    const txDate = new Date(tx.date || tx.datetime);
+    const key = `${txDate.getFullYear()}-${String(txDate.getMonth() + 1).padStart(2, '0')}`;
+    const bucket = out.find((m) => m.key === key);
+    if (!bucket) return;
+    const v = parseAmount(tx.amount).value;
+    if (tx.type === 'INCOME' || tx.type === 'income') bucket.income += v;
+    else bucket.expense += v;
+  });
+  return out;
+});
+
+const maxMonthValue = computed(() => {
+  let max = 0;
+  monthly.value.forEach((m) => {
+    max = Math.max(max, m.income, m.expense);
+  });
+  return max || 1;
+});
+
+const hasActivity = computed(() => maxMonthValue.value > 0);
+
+const xAt = (i) => {
+  const padding = 8;
+  const span = chartW - padding * 2;
+  return padding + (span * i) / Math.max(monthly.value.length - 1, 1);
+};
+
+const yAt = (v) => {
+  const padding = 12;
+  const span = chartH - padding * 2 - 14;
+  return padding + span * (1 - v / maxMonthValue.value);
+};
+
+const linePoints = (key) => monthly.value.map((m, i) => `${xAt(i)},${yAt(m[key])}`).join(' ');
+
+const formatDate = (val) => {
+  if (!val) return '';
+  const d = new Date(val);
+  return new Intl.DateTimeFormat(locale.value, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric'
+  }).format(d);
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.detail {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-height: 100%;
+
+  &--empty {
+    align-items: center;
+    justify-content: center;
+    padding: $spacing-8 $spacing-6;
+    min-height: 320px;
+  }
+}
+
+.empty {
+  text-align: center;
+  max-width: 340px;
+  color: $text-muted;
+}
+
+.empty-illustration {
+  width: 160px;
+  height: 160px;
+  margin-bottom: $spacing-3;
+  animation: wempty-float 6s $easing-standard infinite;
+}
+
+@keyframes wempty-float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-4px);
+  }
+}
+
+.empty-title {
+  font-size: $font-size-base;
+  font-weight: $font-bold;
+  color: $text-primary;
+  margin: 0 0 $spacing-1;
+  letter-spacing: -0.01em;
+}
+
+.empty-sub {
+  font-size: $font-size-sm;
+  margin: 0;
+  line-height: 1.5;
+}
+
+.detail-body {
+  display: flex;
+  flex-direction: column;
+}
+
+.wallet-swap-enter-active,
+.wallet-swap-leave-active {
+  transition:
+    opacity $duration-base $easing-standard,
+    transform $duration-base $easing-emphasized;
+}
+.wallet-swap-enter-from {
+  opacity: 0;
+  transform: translateY(6px);
+}
+.wallet-swap-leave-to {
+  opacity: 0;
+  transform: translateY(-6px);
+}
+
+.hero {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  min-height: 52px;
+  border-bottom: 1px solid $border-light;
+  overflow: hidden;
+}
+
+.hero-decor {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.hero > *:not(.hero-decor) {
+  position: relative;
+  z-index: 1;
+}
+
+.back-btn {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background: var(--glass-bg);
+  border: 1px solid $border-light;
+  color: var(--surface-deep);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color $duration-fast $easing-standard;
+  flex-shrink: 0;
+
+  &:hover {
+    background: var(--glass-bg-strong);
+  }
+
+  @media (max-width: $breakpoint-md) {
+    display: inline-flex;
+  }
+}
+
+.hero-avatar {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
+  background: var(--glass-bg);
+  border: 1px solid $border-light;
+  color: var(--surface-deep);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hero-meta {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  line-height: 1.2;
+}
+
+.hero-name-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.hero-name {
+  margin: 0;
+  font-size: $font-size-base;
+  font-weight: $font-bold;
+  color: var(--surface-ink);
+  letter-spacing: -0.015em;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.hero-default-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 1px 6px 1px 5px;
+  background: var(--glass-bg);
+  border: 1px solid $border-light;
+  color: var(--surface-deep);
+  border-radius: 6px;
+  font-size: 10px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  flex-shrink: 0;
+}
+
+.hero-sub {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  font-size: 11px;
+  color: var(--surface-ink);
+  opacity: 0.7;
+  font-weight: $font-medium;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.hero-currency {
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: $font-bold;
+  color: var(--surface-deep);
+  opacity: 0.85;
+  font-variant-numeric: tabular-nums;
+}
+
+.hero-dot {
+  opacity: 0.6;
+}
+
+.hero-actions {
+  display: inline-flex;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.hero-action {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background: transparent;
+  border: none;
+  color: var(--surface-deep);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition:
+    background-color $duration-fast $easing-standard,
+    color $duration-fast $easing-standard;
+
+  &:hover {
+    background: var(--glass-bg);
+  }
+
+  &--danger:hover {
+    color: var(--color-expense);
+    background: rgba(var(--color-expense-rgb), 0.1);
+  }
+}
+
+.totals {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
+  align-items: center;
+  padding: 10px 14px;
+  border-bottom: 1px solid $border-light;
+}
+
+.total {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-width: 0;
+  line-height: 1.2;
+}
+
+.total-label {
+  font-size: 10px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: $text-muted;
+}
+
+.total-value {
+  margin: 0;
+  font-size: $font-size-sm;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.005em;
+  color: $text-primary;
+}
+
+.total-divider {
+  width: 1px;
+  height: 22px;
+  background: $border-light;
+}
+
+.tone-income {
+  color: var(--color-income);
+}
+.tone-expense {
+  color: var(--color-expense);
+}
+
+.chart-card,
+.recent {
+  padding: 12px 14px;
+  border-bottom: 1px solid $border-light;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.chart-head,
+.recent-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  gap: $spacing-3;
+}
+
+.chart-eyebrow,
+.recent-eyebrow {
+  font-size: 11px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: $text-muted;
+}
+
+.chart-title,
+.recent-title {
+  margin: 2px 0 0;
+  font-size: $font-size-base;
+  font-weight: $font-bold;
+  color: $text-primary;
+  letter-spacing: -0.01em;
+}
+
+.chart-legend {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: $font-semibold;
+  color: $text-muted;
+  white-space: nowrap;
+}
+
+.legend-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-left: 4px;
+  margin-right: 2px;
+
+  &--income {
+    background: var(--color-income);
+  }
+  &--expense {
+    background: var(--color-expense);
+  }
+}
+
+.chart-svg {
+  width: 100%;
+  height: 180px;
+  display: block;
+
+  @media (max-width: $breakpoint-md) {
+    height: 140px;
+  }
+}
+
+.chart-grid {
+  stroke: $border-light;
+}
+
+.chart-axis {
+  font-size: 10px;
+  fill: $text-muted;
+  font-family: $font-family-sans;
+  font-variant-numeric: tabular-nums;
+}
+
+.chart-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: $spacing-4;
+  font-size: $font-size-sm;
+  color: $text-muted;
+
+  svg {
+    opacity: 0.5;
+  }
+}
+
+.recent-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  color: $primary;
+  text-decoration: none;
+  padding: 4px 8px;
+  border-radius: 8px;
+  transition: background-color $duration-fast $easing-standard;
+
+  &:hover {
+    background: $primary-light;
+  }
+}
+
+.recent-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.recent-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-3;
+  padding: $spacing-2 0;
+  border-bottom: 1px solid $border-light;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.recent-row-left {
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+  min-width: 0;
+  flex: 1;
+}
+
+.recent-type {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &.tone-income {
+    background: rgba(var(--color-income-rgb), 0.12);
+  }
+  &.tone-expense {
+    background: rgba(var(--color-expense-rgb), 0.12);
+  }
+}
+
+.recent-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-width: 0;
+  flex: 1;
+}
+
+.recent-name {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  color: $text-primary;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.recent-date {
+  font-size: 11px;
+  color: $text-muted;
+  font-variant-numeric: tabular-nums;
+}
+
+.recent-amount {
+  font-size: $font-size-sm;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+}
+
+.recent-empty {
+  padding: $spacing-3 0;
+  text-align: center;
+  font-size: $font-size-sm;
+  color: $text-muted;
+}
+</style>
diff --git a/components/wallets/WalletsStatsStrip.stories.js b/components/wallets/WalletsStatsStrip.stories.js
new file mode 100644
index 0000000..4bed1bd
--- /dev/null
+++ b/components/wallets/WalletsStatsStrip.stories.js
@@ -0,0 +1,54 @@
+import WalletsStatsStrip from './WalletsStatsStrip.vue';
+
+const wallets = [
+  {
+    id: 1,
+    name: 'Main Checking',
+    currency: 'USD',
+    balance: 8420.5,
+    stats: { total_income: 5200, total_expense: 1800 }
+  },
+  {
+    id: 2,
+    name: 'Savings',
+    currency: 'USD',
+    balance: 14200,
+    stats: { total_income: 3000, total_expense: 400 }
+  },
+  {
+    id: 3,
+    name: 'Euro Card',
+    currency: 'EUR',
+    balance: 1200,
+    stats: { total_income: 600, total_expense: 890 }
+  }
+];
+
+export default {
+  title: 'Domain/Wallets/WalletsStatsStrip',
+  component: WalletsStatsStrip,
+  args: {
+    wallets,
+    defaultCurrency: 'USD'
+  }
+};
+
+export const Default = {};
+
+export const NegativeBalance = {
+  args: {
+    wallets: [
+      {
+        id: 1,
+        name: 'Credit Card',
+        currency: 'USD',
+        balance: -3200,
+        stats: { total_income: 500, total_expense: 3700 }
+      }
+    ]
+  }
+};
+
+export const Empty = {
+  args: { wallets: [] }
+};
diff --git a/components/wallets/WalletsStatsStrip.vue b/components/wallets/WalletsStatsStrip.vue
new file mode 100644
index 0000000..4bbe44e
--- /dev/null
+++ b/components/wallets/WalletsStatsStrip.vue
@@ -0,0 +1,208 @@
+<template>
+  <section class="stats-strip">
+    <article
+      v-for="stat in stats"
+      :key="stat.key"
+      class="stat surface"
+      :class="`surface--${stat.tone}`"
+    >
+      <div class="stat-icon">
+        <component :is="stat.icon" :size="14" />
+      </div>
+      <div class="stat-body">
+        <span class="stat-label">{{ stat.label }}</span>
+        <p class="stat-value">{{ stat.value }}</p>
+        <span v-if="stat.sub" class="stat-sub">{{ stat.sub }}</span>
+      </div>
+    </article>
+  </section>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { Wallet, Coins, ArrowDownLeft, ArrowUpRight } from 'lucide-vue-next';
+import { formatShortAmount } from '../../utils/currency';
+
+const i18n = typeof useI18n === 'function' ? useI18n() : null;
+const t = i18n?.t || ((k, params) => {
+  if (!params) return k;
+  return k.replace(/\{(\w+)\}/g, (_, key) => params[key] ?? key);
+});
+
+const props = defineProps({
+  wallets: { type: Array, required: true },
+  defaultWalletId: { type: [String, Number], default: null },
+  defaultCurrency: { type: String, default: 'USD' },
+  formatter: {
+    type: Function,
+    default: (n, cur) => formatShortAmount(`${n} ${cur}`)
+  }
+});
+
+const inDefaultCurrency = computed(() =>
+  props.wallets.filter((w) => w.currency === props.defaultCurrency)
+);
+
+const totals = computed(() => {
+  let balance = 0;
+  let income = 0;
+  let expense = 0;
+  let topEarner = null;
+  let topSpender = null;
+
+  inDefaultCurrency.value.forEach((w) => {
+    balance += Number(w.balance || 0);
+    const inc = Number(w.stats?.total_income || 0);
+    const exp = Number(w.stats?.total_expense || 0);
+    income += inc;
+    expense += exp;
+    if (!topEarner || inc > Number(topEarner.stats?.total_income || 0)) topEarner = w;
+    if (!topSpender || exp > Number(topSpender.stats?.total_expense || 0)) topSpender = w;
+  });
+
+  return {
+    balance,
+    income,
+    expense,
+    topEarner: topEarner && Number(topEarner.stats?.total_income || 0) > 0 ? topEarner : null,
+    topSpender: topSpender && Number(topSpender.stats?.total_expense || 0) > 0 ? topSpender : null
+  };
+});
+
+const stats = computed(() => [
+  {
+    key: 'count',
+    label: t('Wallets'),
+    value: props.wallets.length,
+    sub:
+      inDefaultCurrency.value.length !== props.wallets.length
+        ? t('{n} in {cur}', { n: inDefaultCurrency.value.length, cur: props.defaultCurrency })
+        : '',
+    icon: Wallet,
+    tone: 'brand'
+  },
+  {
+    key: 'balance',
+    label: t('Total balance'),
+    value: props.formatter(totals.value.balance, props.defaultCurrency),
+    sub: inDefaultCurrency.value.length
+      ? t('Across {n} {cur} wallet(s)', {
+          n: inDefaultCurrency.value.length,
+          cur: props.defaultCurrency
+        })
+      : t('No {cur} wallets yet', { cur: props.defaultCurrency }),
+    icon: Coins,
+    tone: totals.value.balance >= 0 ? 'brand-soft' : 'expense'
+  },
+  {
+    key: 'topEarner',
+    label: t('Top earner'),
+    value: totals.value.topEarner?.name || '—',
+    sub: totals.value.topEarner
+      ? props.formatter(totals.value.topEarner.stats.total_income, props.defaultCurrency)
+      : t('No income yet'),
+    icon: ArrowDownLeft,
+    tone: 'income'
+  },
+  {
+    key: 'topSpender',
+    label: t('Top spend'),
+    value: totals.value.topSpender?.name || '—',
+    sub: totals.value.topSpender
+      ? props.formatter(totals.value.topSpender.stats.total_expense, props.defaultCurrency)
+      : t('No spend yet'),
+    icon: ArrowUpRight,
+    tone: 'expense'
+  }
+]);
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/scss/_vars.scss' as *;
+
+.stats-strip {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  width: 100%;
+
+  @media (max-width: $breakpoint-md) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.stat {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-right: 1px solid $border-light;
+  overflow: hidden;
+  min-width: 0;
+
+  &:last-child {
+    border-right: none;
+  }
+
+  @media (max-width: $breakpoint-md) {
+    &:nth-child(2n) {
+      border-right: none;
+    }
+    &:nth-child(-n + 2) {
+      border-bottom: 1px solid $border-light;
+    }
+  }
+}
+
+.stat-icon {
+  flex-shrink: 0;
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  background: var(--glass-bg);
+  border: 1px solid $border-light;
+  color: var(--surface-deep);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.stat-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-width: 0;
+  flex: 1;
+  line-height: 1.2;
+}
+
+.stat-label {
+  font-size: 10px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--surface-deep);
+  opacity: 0.85;
+}
+
+.stat-value {
+  margin: 0;
+  font-size: $font-size-sm;
+  font-weight: $font-bold;
+  color: var(--surface-ink);
+  letter-spacing: -0.005em;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.stat-sub {
+  font-size: 10px;
+  color: var(--surface-ink);
+  opacity: 0.6;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/composables/useAvatar.ts b/composables/useAvatar.ts
new file mode 100644
index 0000000..c23304e
--- /dev/null
+++ b/composables/useAvatar.ts
@@ -0,0 +1,51 @@
+import { createAvatar } from '@dicebear/core';
+import { personas } from '@dicebear/collection';
+
+export interface AvatarUser {
+  email?: string;
+  id?: number | string;
+  avatar_url?: string;
+}
+
+/**
+ * Avatar helper.
+ * Generates deterministic fallback SVG via @dicebear/personas.
+ */
+export const useAvatar = () => {
+  const generateFallbackAvatar = (user: AvatarUser): string => {
+    if (!user) return '';
+
+    // Use personas style for gender-neutral people avatars
+    const avatar = createAvatar(personas as any, {
+      seed: user.email || user.id?.toString() || 'fallback',
+      backgroundColor: [
+        'b6e3f4',
+        'c4b5fd',
+        'a78bfa',
+        'fb7185',
+        'fdba74',
+        'fde047',
+        'a7f3d0',
+        'fbb6ce',
+        '93c5fd'
+      ],
+      // Gender-neutral styling
+      beard: [],
+      body: ['squared', 'rounded'],
+      face: ['circle', 'square'],
+      hair: ['shortHair', 'mediumHair', 'curlyHair', 'straightHair'],
+      shirt: ['collared', 'crew', 'open']
+    });
+
+    return avatar.toDataUri();
+  };
+
+  const getAvatarUrl = (user: AvatarUser): string => {
+    return user?.avatar_url || generateFallbackAvatar(user);
+  };
+
+  return {
+    generateFallbackAvatar,
+    getAvatarUrl
+  };
+};
diff --git a/composables/useDropdown.ts b/composables/useDropdown.ts
new file mode 100644
index 0000000..dca136b
--- /dev/null
+++ b/composables/useDropdown.ts
@@ -0,0 +1,56 @@
+import { ref, onMounted, onUnmounted, type Ref } from 'vue';
+
+/**
+ * A small composable that models an open/closed dropdown anchored to a
+ * root element. Handles click-outside to close and Escape to close.
+ * Migrated from webui/composables/useDropdown.ts — Tier 0 primitive (#9)
+ * Zero domain deps; pure DOM event handling.
+ *
+ * Usage:
+ *   const { isOpen, rootRef, toggle, close } = useDropdown();
+ */
+export function useDropdown(): {
+  isOpen: Ref<boolean>;
+  rootRef: Ref<HTMLElement | null>;
+  toggle: () => void;
+  open: () => void;
+  close: () => void;
+} {
+  const isOpen = ref(false);
+  const rootRef = ref<HTMLElement | null>(null);
+
+  const open = () => {
+    isOpen.value = true;
+  };
+  const close = () => {
+    isOpen.value = false;
+  };
+  const toggle = () => {
+    isOpen.value = !isOpen.value;
+  };
+
+  const handleDocumentClick = (event: MouseEvent) => {
+    const target = event.target as Node | null;
+    if (rootRef.value && target && !rootRef.value.contains(target)) {
+      close();
+    }
+  };
+
+  const handleKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape' && isOpen.value) {
+      close();
+    }
+  };
+
+  onMounted(() => {
+    document.addEventListener('click', handleDocumentClick);
+    document.addEventListener('keydown', handleKeydown);
+  });
+
+  onUnmounted(() => {
+    document.removeEventListener('click', handleDocumentClick);
+    document.removeEventListener('keydown', handleKeydown);
+  });
+
+  return { isOpen, rootRef, toggle, open, close };
+}
diff --git a/composables/useExtensionSlots.ts b/composables/useExtensionSlots.ts
new file mode 100644
index 0000000..32d226e
--- /dev/null
+++ b/composables/useExtensionSlots.ts
@@ -0,0 +1,26 @@
+import { markRaw, ref } from 'vue';
+import type { Component } from 'vue';
+
+// Components a plugin Nuxt layer registers for a slot key (the escape hatch).
+const componentRegistry = ref<Record<string, Component>>({});
+
+export const useExtensionSlots = () => {
+  /**
+   * Register a real component for a slot key, used when a descriptor sets
+   * `ui.component`. Called from a plugin Nuxt layer.
+   */
+  const registerComponent = (slotKey: string, component: Component): void => {
+    componentRegistry.value = {
+      ...componentRegistry.value,
+      [slotKey]: markRaw(component)
+    };
+  };
+
+  const resolveComponent = (slotKey: string | null | undefined): Component | null =>
+    slotKey ? (componentRegistry.value[slotKey] ?? null) : null;
+
+  return {
+    registerComponent,
+    resolveComponent
+  };
+};
diff --git a/composables/useMarkdown.ts b/composables/useMarkdown.ts
new file mode 100644
index 0000000..a509686
--- /dev/null
+++ b/composables/useMarkdown.ts
@@ -0,0 +1,22 @@
+import MarkdownIt from 'markdown-it';
+
+// `html: false` escapes all raw HTML in the source, so neither the model nor any
+// embedded record text can inject active markup. markdown-it's built-in
+// validateLink also blocks dangerous link protocols (javascript:, vbscript:,
+// non-image data:). This is pure JS and safe to evaluate during SSR (no DOM).
+const md = new (MarkdownIt as any)({
+  html: false,
+  linkify: true,
+  breaks: true
+});
+
+/**
+ * SSR-safe markdown renderer.
+ */
+export function renderMarkdown(text: string | null | undefined): string {
+  return md.render(text ?? '');
+}
+
+export function useMarkdown() {
+  return { renderMarkdown };
+}
diff --git a/composables/useNotifications.ts b/composables/useNotifications.ts
new file mode 100644
index 0000000..c32131a
--- /dev/null
+++ b/composables/useNotifications.ts
@@ -0,0 +1,165 @@
+import { ref, readonly } from 'vue';
+
+interface Notification {
+  id: string;
+  type: 'success' | 'error' | 'warning' | 'info';
+  title: string;
+  message?: string;
+  duration?: number;
+}
+
+interface ConfirmOptions {
+  title: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  type?: 'warning' | 'danger' | 'info';
+}
+
+// Global state for notifications and modals
+const notifications = ref<Notification[]>([]);
+const isConfirmModalOpen = ref(false);
+const confirmModalData = ref<
+  ConfirmOptions & {
+    resolve: (value: boolean) => void;
+  }
+>({
+  title: '',
+  message: '',
+  resolve: () => {}
+});
+
+export const useNotifications = () => {
+  const t = (key: string, params?: Record<string, any>) => {
+    if (params?.item) {
+      return `Are you sure you want to delete this ${params.item}? This action cannot be undone.`;
+    }
+    return key;
+  };
+
+  // Add a notification
+  const addNotification = (notification: Omit<Notification, 'id'>) => {
+    const id = `notification-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const newNotification: Notification = {
+      id,
+      duration: 5000, // 5 seconds default
+      ...notification
+    };
+
+    notifications.value.push(newNotification);
+
+    // Auto-remove after duration
+    if (newNotification.duration && newNotification.duration > 0) {
+      setTimeout(() => {
+        removeNotification(id);
+      }, newNotification.duration);
+    }
+
+    return id;
+  };
+
+  // Remove a notification
+  const removeNotification = (id: string) => {
+    const index = notifications.value.findIndex((n) => n.id === id);
+    if (index > -1) {
+      notifications.value.splice(index, 1);
+    }
+  };
+
+  // Clear all notifications
+  const clearNotifications = () => {
+    notifications.value = [];
+  };
+
+  // Show success notification
+  const showSuccess = (title: string, message?: string, duration?: number) => {
+    return addNotification({
+      type: 'success',
+      title,
+      message,
+      duration
+    });
+  };
+
+  // Show error notification
+  const showError = (title: string, message?: string, duration?: number) => {
+    return addNotification({
+      type: 'error',
+      title,
+      message,
+      duration: duration || 7000 // Errors stay longer
+    });
+  };
+
+  // Show warning notification
+  const showWarning = (title: string, message?: string, duration?: number) => {
+    return addNotification({
+      type: 'warning',
+      title,
+      message,
+      duration
+    });
+  };
+
+  // Show info notification
+  const showInfo = (title: string, message?: string, duration?: number) => {
+    return addNotification({
+      type: 'info',
+      title,
+      message,
+      duration
+    });
+  };
+
+  // Show confirmation modal (replaces browser confirm())
+  const showConfirm = (options: ConfirmOptions): Promise<boolean> => {
+    return new Promise((resolve) => {
+      confirmModalData.value = {
+        ...options,
+        confirmText: options.confirmText || t('Confirm'),
+        cancelText: options.cancelText || t('Cancel'),
+        type: options.type || 'warning',
+        resolve
+      };
+      isConfirmModalOpen.value = true;
+    });
+  };
+
+  // Handle confirm modal response
+  const handleConfirmResponse = (confirmed: boolean) => {
+    confirmModalData.value.resolve(confirmed);
+    isConfirmModalOpen.value = false;
+  };
+
+  // Quick delete confirmation
+  const confirmDelete = (itemName: string = 'item'): Promise<boolean> => {
+    return showConfirm({
+      title: t('Confirm Deletion'),
+      message: t('Are you sure you want to delete this {item}? This action cannot be undone.', {
+        item: t(itemName)
+      }),
+      confirmText: t('Delete'),
+      cancelText: t('Cancel'),
+      type: 'danger'
+    });
+  };
+
+  return {
+    // State
+    notifications: readonly(notifications),
+    isConfirmModalOpen: readonly(isConfirmModalOpen),
+    confirmModalData: readonly(confirmModalData),
+
+    // Methods
+    addNotification,
+    removeNotification,
+    clearNotifications,
+    showSuccess,
+    showError,
+    showWarning,
+    showInfo,
+    showConfirm,
+    handleConfirmResponse,
+    confirmDelete
+  };
+};
diff --git a/composables/usePasswordToggle.ts b/composables/usePasswordToggle.ts
new file mode 100644
index 0000000..63dcf69
--- /dev/null
+++ b/composables/usePasswordToggle.ts
@@ -0,0 +1,19 @@
+import { ref } from 'vue';
+
+/**
+ * Password visibility toggle — Tier 0 primitive
+ * Migrated from webui/composables/usePasswordToggle.js
+ * .js → .ts for ui-kit; behavior identical.
+ */
+export const usePasswordToggle = () => {
+  const showPassword = ref(false);
+
+  const togglePassword = () => {
+    showPassword.value = !showPassword.value;
+  };
+
+  return {
+    showPassword,
+    togglePassword
+  };
+};
diff --git a/composables/useSidebar.ts b/composables/useSidebar.ts
new file mode 100644
index 0000000..9de9f53
--- /dev/null
+++ b/composables/useSidebar.ts
@@ -0,0 +1,100 @@
+import { ref, onMounted, onUnmounted, readonly, watch } from 'vue';
+
+const STORAGE_KEY = 'trakli-sidebar';
+
+// Mobile drawer — transient, tied to viewport state.
+const isSidebarOpen = ref(false);
+const isMobile = ref(false);
+const isTabletOrBelow = ref(false);
+
+// Desktop collapse — persisted across reloads, mirrors the `theme` pattern.
+const sidebarCollapsed = ref(false);
+let hydrated = false;
+
+const loadCollapseState = () => {
+  if (typeof window === 'undefined' || hydrated) return;
+  hydrated = true;
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    if (!raw) return;
+    const parsed = JSON.parse(raw);
+    if (typeof parsed.collapsed === 'boolean') {
+      sidebarCollapsed.value = parsed.collapsed;
+    }
+  } catch {
+    // ignore
+  }
+};
+
+const persistCollapseState = () => {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify({ collapsed: sidebarCollapsed.value }));
+  } catch {
+    // ignore
+  }
+};
+
+/**
+ * Sidebar state — Tier 0 primitive (layout chrome, no domain deps)
+ * Migrated from webui/composables/useSidebar.js
+ * Note: .js → .ts for ui-kit; behavior identical, persisted collapse + viewport listeners.
+ */
+export const useSidebar = () => {
+  const checkMobile = () => {
+    isMobile.value = window.innerWidth < 768;
+    isTabletOrBelow.value = window.innerWidth <= 1280;
+    if (!isMobile.value) {
+      isSidebarOpen.value = false;
+    }
+  };
+
+  const toggleSidebar = () => {
+    isSidebarOpen.value = !isSidebarOpen.value;
+  };
+
+  const closeSidebar = () => {
+    isSidebarOpen.value = false;
+  };
+
+  const openSidebar = () => {
+    isSidebarOpen.value = true;
+  };
+
+  const toggleCollapse = () => {
+    sidebarCollapsed.value = !sidebarCollapsed.value;
+  };
+
+  const collapseSidebar = () => {
+    sidebarCollapsed.value = true;
+  };
+
+  const expandSidebar = () => {
+    sidebarCollapsed.value = false;
+  };
+
+  watch(sidebarCollapsed, persistCollapseState);
+
+  onMounted(() => {
+    loadCollapseState();
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', checkMobile);
+  });
+
+  return {
+    isSidebarOpen: readonly(isSidebarOpen),
+    isMobile: readonly(isMobile),
+    isTabletOrBelow: readonly(isTabletOrBelow),
+    sidebarCollapsed: readonly(sidebarCollapsed),
+    toggleSidebar,
+    closeSidebar,
+    openSidebar,
+    toggleCollapse,
+    collapseSidebar,
+    expandSidebar
+  };
+};
diff --git a/composables/useTheme.ts b/composables/useTheme.ts
new file mode 100644
index 0000000..b98a437
--- /dev/null
+++ b/composables/useTheme.ts
@@ -0,0 +1,81 @@
+import { ref, computed } from 'vue';
+
+export type ThemeMode = 'light' | 'dark' | 'system';
+
+const theme = ref<ThemeMode>('light');
+const isDark = ref(false);
+
+const THEME_STORAGE_KEY = 'trakli-theme';
+
+function applyTheme(dark: boolean) {
+  if (typeof document === 'undefined') return;
+
+  if (dark) {
+    document.documentElement.classList.add('dark');
+  } else {
+    document.documentElement.classList.remove('dark');
+  }
+  isDark.value = dark;
+}
+
+function getSystemPreference(): boolean {
+  if (typeof window === 'undefined') return false;
+  return window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
+function resolveTheme(mode: ThemeMode): boolean {
+  if (mode === 'system') {
+    return getSystemPreference();
+  }
+  return mode === 'dark';
+}
+
+/**
+ * Headless theme state machine — Tier 0 primitive (#10)
+ * Migrated from webui/composables/useTheme.ts
+ * Manages light/dark/system, persists to localStorage, toggles `document.documentElement.dark` (drives tokens.css).
+ */
+export function useTheme() {
+  function setTheme(newTheme: ThemeMode) {
+    theme.value = newTheme;
+    const dark = resolveTheme(newTheme);
+    applyTheme(dark);
+
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem(THEME_STORAGE_KEY, newTheme);
+    }
+  }
+
+  function toggleTheme() {
+    const newTheme = isDark.value ? 'light' : 'dark';
+    setTheme(newTheme);
+  }
+
+  function initTheme() {
+    if (typeof window === 'undefined') return;
+
+    const saved = localStorage.getItem(THEME_STORAGE_KEY) as ThemeMode | null;
+    const initialTheme = saved || 'light';
+    theme.value = initialTheme;
+
+    const dark = resolveTheme(initialTheme);
+    applyTheme(dark);
+
+    if (initialTheme === 'system') {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      mediaQuery.addEventListener('change', (e) => {
+        if (theme.value === 'system') {
+          applyTheme(e.matches);
+        }
+      });
+    }
+  }
+
+  return {
+    theme: computed(() => theme.value),
+    isDark: computed(() => isDark.value),
+    setTheme,
+    toggleTheme,
+    initTheme
+  };
+}
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..2316201
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,17051 @@
+{
+  "name": "@trakli/ui-kit",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@trakli/ui-kit",
+      "version": "0.0.0",
+      "devDependencies": {
+        "@cypress/vite-dev-server": "^5.2.0",
+        "@dicebear/collection": "^9.2.4",
+        "@dicebear/core": "^9.2.4",
+        "@heroicons/vue": "^2.2.0",
+        "@storybook/addon-essentials": "^8.3.5",
+        "@storybook/vue3": "^8.3.5",
+        "@storybook/vue3-vite": "^8.3.5",
+        "@types/markdown-it": "^14.1.2",
+        "@vitejs/plugin-vue": "^5.1.4",
+        "cypress": "^13.15.0",
+        "lucide-vue-next": "^0.525.0",
+        "markdown-it": "^14.1.1",
+        "sass": "^1.89.0",
+        "storybook": "^8.3.5",
+        "vite": "^5.4.8",
+        "vue": "^3.5.0"
+      },
+      "peerDependencies": {
+        "@dicebear/collection": "^9.2.4",
+        "@dicebear/core": "^9.2.4",
+        "@heroicons/vue": "^2.2.0",
+        "lucide-vue-next": "^0.525.0",
+        "markdown-it": "^14.1.1",
+        "nuxt": "^3.12.4",
+        "sass": "^1.89.0",
+        "vue": "^3.4.0"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz",
+      "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
+      "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helpers": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "license": "ISC",
+      "peer": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.8.tgz",
+      "integrity": "sha512-gZbepsdh3WDtgZKWL+vTPh71LSBrm/Y4/QDZBVCcYfmeTEEuoOYwlSy+G1StfJg+/Zy550u/3TATbm7qDbbMtg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.29.8",
+        "@babel/types": "^7.29.8",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.29.7.tgz",
+      "integrity": "sha512-OoK6239jHPuSQOoS0kfTVKn0b/rVTk0seKq4Gd2UMLtmOVLjDC0ki3e+c90Trqv2gMfvJFqkiljrr568+qddiw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz",
+      "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/compat-data": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "license": "ISC",
+      "peer": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.29.7.tgz",
+      "integrity": "sha512-IY3ZD9Tmooqr3TUhc3DUWxiuo8xx1DWLhd5M7hQ+ZWJamqM2BbalrBJb2MisSLoYorOj75U03qULCxQTY9r3hg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.29.7",
+        "@babel/helper-member-expression-to-functions": "^7.29.7",
+        "@babel/helper-optimise-call-expression": "^7.29.7",
+        "@babel/helper-replace-supers": "^7.29.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "license": "ISC",
+      "peer": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
+      "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-member-expression-to-functions": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.29.7.tgz",
+      "integrity": "sha512-j+7JYmk1JYDtACIGj0QJqqWZjoUpMoEikQGADMaHgCMCSDqd2+P32rfcibUNrGOMWrlzK1WJBdxrB3JJQZwWtg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
+      "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz",
+      "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-optimise-call-expression": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.29.7.tgz",
+      "integrity": "sha512-+kmGVjcT9RGYzoDwdwEqEvGgKe3BYq+O1iGzjFubaNgZHwYHP6lsF2Yghf4kEuv9BV7tYDZ913aBW9am6YKong==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.29.7.tgz",
+      "integrity": "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.29.7.tgz",
+      "integrity": "sha512-atfGXWSeCiF4DnKZIfmJfQRkSw9b9gNNXR1kqKjbhG4pGYCOnkp8OcTB8E3NXjBu8NpheSnOeNKz8KT7UNFTmQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-member-expression-to-functions": "^7.29.7",
+        "@babel/helper-optimise-call-expression": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.29.7.tgz",
+      "integrity": "sha512-brcMGQaVzIeUb+6/bs1Av0f8YuNNjKY2JyvfRCsFuFsdKccEQ5Ges2y74D74NZ1Rz8lKJ9ksJkfqwQFJ/iNEyQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz",
+      "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz",
+      "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.8.tgz",
+      "integrity": "sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.8"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.29.7.tgz",
+      "integrity": "sha512-TSu8+mHCoEaaCDEZ0I3+6mvTBYR4PCxQwf2z9/r5Tbztv6NaLR3B9thGTTxX2WGuGHJqRiAbKPeGTJ5XWXVg6A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-typescript": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.29.7.tgz",
+      "integrity": "sha512-ngr+82Sh0xMz25TPCZi+nC2iTzjfCdWS2ONXTp/PtSCHCgaCNBpdMqgvJ2ccdLlClVZ7sisIgB914j/JFe+RZA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typescript": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.29.7.tgz",
+      "integrity": "sha512-jK52h8LaLc7JarhQV2ofeFMts4H7vnOXnqZNA6fYglBTZewRBE51KWt3BUltW1P+KoPsYkHoJeXePuz4zo2LMw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.29.7",
+        "@babel/helper-create-class-features-plugin": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7",
+        "@babel/plugin-syntax-typescript": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
+      "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.8.tgz",
+      "integrity": "sha512-I5z7H3bf/41ktsNVLtpN0wAa336HkqIHQ5BuPLEhTkt1jVSyZpeNKIzTgEWmlxjdg81R0IgUCcaE+Ok3NvrfZg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.8",
+        "@babel/helper-globals": "^7.29.7",
+        "@babel/parser": "^7.29.8",
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.8",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.8.tgz",
+      "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@clack/core": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/@clack/core/-/core-1.4.3.tgz",
+      "integrity": "sha512-/kr3UWNtdJfxZtPgDqUOmG2pvwlmcLGheex5yiZKdwbzZJxhV+HMNR9QNmyY5cGwTNV6LrR7Jtp+KjhUAP1qBQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "fast-wrap-ansi": "^0.2.0",
+        "sisteransi": "^1.0.5"
+      },
+      "engines": {
+        "node": ">= 20.12.0"
+      }
+    },
+    "node_modules/@clack/prompts": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-1.7.0.tgz",
+      "integrity": "sha512-y7/yvZ2TPAnR9+jnc00klvNNLkJiXFFrQA/hlLCcxA9a2A4zQIOimyFQ9XfwYKiGD1fb5GY8vbKIIgO8d5Tb2A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@clack/core": "1.4.3",
+        "fast-string-width": "^3.0.2",
+        "fast-wrap-ansi": "^0.2.0",
+        "sisteransi": "^1.0.5"
+      },
+      "engines": {
+        "node": ">= 20.12.0"
+      }
+    },
+    "node_modules/@cloudflare/kv-asset-handler": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@cloudflare/kv-asset-handler/-/kv-asset-handler-0.4.2.tgz",
+      "integrity": "sha512-SIOD2DxrRRwQ+jgzlXCqoEFiKOFqaPjhnNTGKXSRLvp1HiOvapLaFG2kEr9dYQTYe8rKrd9uvDUzmAITeNyaHQ==",
+      "license": "MIT OR Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@colordx/core": {
+      "version": "5.7.0",
+      "resolved": "https://registry.npmjs.org/@colordx/core/-/core-5.7.0.tgz",
+      "integrity": "sha512-Qbms38g1xs+4c6bNjIpgDGUVGVG25MtZxMNUs+kbmmeoFuaR/wuiKtu1wAOhtVPQShqE/p8F+uFQpoZiTR+1Jw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@colors/colors": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
+      "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.90"
+      }
+    },
+    "node_modules/@cypress/request": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.10.tgz",
+      "integrity": "sha512-hauBrOdvu08vOsagkZ/Aju5XuiZx6ldsLfByg1htFeldhex+PeMrYauANzFsMJeAA0+dyPLbDoX2OYuvVoLDkQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "aws-sign2": "~0.7.0",
+        "aws4": "^1.8.0",
+        "caseless": "~0.12.0",
+        "combined-stream": "~1.0.6",
+        "extend": "~3.0.2",
+        "forever-agent": "~0.6.1",
+        "form-data": "~4.0.4",
+        "http-signature": "~1.4.0",
+        "is-typedarray": "~1.0.0",
+        "isstream": "~0.1.2",
+        "json-stringify-safe": "~5.0.1",
+        "mime-types": "~2.1.19",
+        "performance-now": "^2.1.0",
+        "qs": "~6.14.1",
+        "safe-buffer": "^5.1.2",
+        "tough-cookie": "^5.0.0",
+        "tunnel-agent": "^0.6.0",
+        "uuid": "^8.3.2"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@cypress/request/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "deprecated": "uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/@cypress/vite-dev-server": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/@cypress/vite-dev-server/-/vite-dev-server-5.2.1.tgz",
+      "integrity": "sha512-5HEUpB2UjpoBByOPAdTBfeJWHlvyDv3Qz5GuGovoiZnzsZyF9eivWfFiYadFdjXXX8i8kVzibo8heWZg+jigGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.4",
+        "find-up": "6.3.0",
+        "node-html-parser": "5.3.3",
+        "semver": "^7.5.3"
+      }
+    },
+    "node_modules/@cypress/xvfb": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@cypress/xvfb/-/xvfb-1.2.4.tgz",
+      "integrity": "sha512-skbBzPggOVYCbnGgV+0dmBdW/s77ZkAOXIC1knS8NagwDjBrNC1LuXtQJeiN6l+m7lzmHtaoUw/ctJKdqkG57Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.1.0",
+        "lodash.once": "^4.1.1"
+      }
+    },
+    "node_modules/@cypress/xvfb/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/@dicebear/adventurer": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/adventurer/-/adventurer-9.4.2.tgz",
+      "integrity": "sha512-jqYp834ZmGDA9HBBDQAdgF1O2UTCwHF4vVrktXWa2Dppp1JczPL5HnVOWsjtrLmXNn61Wd6OLmBb2e6rhzp3ig==",
+      "dev": true,
+      "license": "(MIT AND CC-BY-4.0)",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/adventurer-neutral": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/adventurer-neutral/-/adventurer-neutral-9.4.2.tgz",
+      "integrity": "sha512-5xgkG/mNL4j3Q4SJGQLBU/KnU90tng8Ze5ofThD+55wi0oeY/nSAUowg6UFCmHrktjifj/MEx3CQqbpcPWtfIA==",
+      "dev": true,
+      "license": "(MIT AND CC-BY-4.0)",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/avataaars": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/avataaars/-/avataaars-9.4.2.tgz",
+      "integrity": "sha512-3x9jKFkOkFSPmpTbt9xvhiU2E1GX7beCSsX0tXRUShj8x6+5Ks9yBRT1VlkySbnXrZ/GglADGg7vJ/D2uIx1Yw==",
+      "dev": true,
+      "license": "See LICENSE file",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/avataaars-neutral": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/avataaars-neutral/-/avataaars-neutral-9.4.2.tgz",
+      "integrity": "sha512-/eNrp0YCNJRwQXqOloLm1+3Ss2C+pMpUQIGkbEnGsP1UK+13Ge80ggDDof1HpdqvG9HAZcKa7hnbG/0HSwyDSw==",
+      "dev": true,
+      "license": "See LICENSE file",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/big-ears": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/big-ears/-/big-ears-9.4.2.tgz",
+      "integrity": "sha512-mNfz3ppNA7UBq0IO3nXCiV5pFPG7c1DfzRB0foNU2Wo1XXT8FIcSY2BvDlYqorZTOUOz7dHb0vx06hqvG0HP5w==",
+      "dev": true,
+      "license": "(MIT AND CC-BY-4.0)",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/big-ears-neutral": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/big-ears-neutral/-/big-ears-neutral-9.4.2.tgz",
+      "integrity": "sha512-M8Ozmzza4eY4hpLOYULgJxMYmBA0CsBnrE15/xw6LZkEREXnrX5z0NJsf8hUfdyF6BWZ+RBgzoiav32DAC5zcg==",
+      "dev": true,
+      "license": "(MIT AND CC-BY-4.0)",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/big-smile": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/big-smile/-/big-smile-9.4.2.tgz",
+      "integrity": "sha512-hmT5i7rcPPhStjZyg28pbIhdTnnMBzK3RObI0vKCpY30EFrzaPkkdDL6Ck5fAFBdvDIW1EpOJkenyR0XPmhgbQ==",
+      "dev": true,
+      "license": "(MIT AND CC-BY-4.0)",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/bottts": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/bottts/-/bottts-9.4.2.tgz",
+      "integrity": "sha512-tsx+dII7EFUCVA8URj66G1GqORCCVduCAx4dY2prEY2IeFianVpkntXuFsWZ9BBGx1NZFndvDith5oTwKMQPbQ==",
+      "dev": true,
+      "license": "See LICENSE file",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/bottts-neutral": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/bottts-neutral/-/bottts-neutral-9.4.2.tgz",
+      "integrity": "sha512-kFNwWt6j+gzZ5n5Pz7WVwePubREAQOF8ZwWA9ztwVYDVMLnOChWbAofy5FED4j5md2MXFH2EgLCFCMr5K2BmIA==",
+      "dev": true,
+      "license": "See LICENSE file",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/collection": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/collection/-/collection-9.4.2.tgz",
+      "integrity": "sha512-KArubv7if8H7j9sIfpDK2hJJqrdNVR5zMPAMOSpIU2JPyXx8TC9o5wsmXb8il5wOHgaS9Q/cla7jUNIiDD7Gsg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@dicebear/adventurer": "9.4.2",
+        "@dicebear/adventurer-neutral": "9.4.2",
+        "@dicebear/avataaars": "9.4.2",
+        "@dicebear/avataaars-neutral": "9.4.2",
+        "@dicebear/big-ears": "9.4.2",
+        "@dicebear/big-ears-neutral": "9.4.2",
+        "@dicebear/big-smile": "9.4.2",
+        "@dicebear/bottts": "9.4.2",
+        "@dicebear/bottts-neutral": "9.4.2",
+        "@dicebear/croodles": "9.4.2",
+        "@dicebear/croodles-neutral": "9.4.2",
+        "@dicebear/dylan": "9.4.2",
+        "@dicebear/fun-emoji": "9.4.2",
+        "@dicebear/glass": "9.4.2",
+        "@dicebear/icons": "9.4.2",
+        "@dicebear/identicon": "9.4.2",
+        "@dicebear/initials": "9.4.2",
+        "@dicebear/lorelei": "9.4.2",
+        "@dicebear/lorelei-neutral": "9.4.2",
+        "@dicebear/micah": "9.4.2",
+        "@dicebear/miniavs": "9.4.2",
+        "@dicebear/notionists": "9.4.2",
+        "@dicebear/notionists-neutral": "9.4.2",
+        "@dicebear/open-peeps": "9.4.2",
+        "@dicebear/personas": "9.4.2",
+        "@dicebear/pixel-art": "9.4.2",
+        "@dicebear/pixel-art-neutral": "9.4.2",
+        "@dicebear/rings": "9.4.2",
+        "@dicebear/shapes": "9.4.2",
+        "@dicebear/thumbs": "9.4.2",
+        "@dicebear/toon-head": "9.4.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/core": {
+      "version": "9.4.3",
+      "resolved": "https://registry.npmjs.org/@dicebear/core/-/core-9.4.3.tgz",
+      "integrity": "sha512-9ITrQI57k3p5hKuU8HZJ1d0kPdrmTKEJDOdlKQ8CpaChbtmnD1R+dtWmNz5IesYThXM8F64pJ0ZvJ2rsY8Hciw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@dicebear/croodles": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/croodles/-/croodles-9.4.2.tgz",
+      "integrity": "sha512-6VoO0JviIf7dKKMBTL/SMXxWhnXHaZuzufX90G0nXxS77ELG1YkGNMaZzawizN4C09Gbya2gJkozqrWiJN/aGw==",
+      "dev": true,
+      "license": "(MIT AND CC-BY-4.0)",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/croodles-neutral": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/croodles-neutral/-/croodles-neutral-9.4.2.tgz",
+      "integrity": "sha512-oG5IeUdtiYshQ89gkAVcl5w3xAEi5UZX2fTzIyelpBPCG176l7VuuFzlxi2umnB3E6LVHYy06DXvUo/p+rXB2Q==",
+      "dev": true,
+      "license": "(MIT AND CC-BY-4.0)",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/dylan": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/dylan/-/dylan-9.4.2.tgz",
+      "integrity": "sha512-1vQvRu9x9DrwFxhFaIU2rf0EUL04yDTbAt7fHyAjM0mEsKzTD4mRNf95tCRuavCoW6W48u7A/OY6jyIub6kxLQ==",
+      "dev": true,
+      "license": "(MIT AND CC-BY-4.0)",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/fun-emoji": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/fun-emoji/-/fun-emoji-9.4.2.tgz",
+      "integrity": "sha512-kqB6LPkdYCdEU/mwbyz34xLzoNUKL6ARcoo3fr5ASq9D6ZE07qIKybC3xv5+CPz7VmspJ1Q3c/VVWVMDRP7Twg==",
+      "dev": true,
+      "license": "(MIT AND CC-BY-4.0)",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/glass": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/glass/-/glass-9.4.2.tgz",
+      "integrity": "sha512-z5qUogHQ1b6UJ2zCqT848mU2U9DKbVDhiX6GPDjD7tYLisCCJVisH9p6WyNdHvflUd4SHkA6gRqVJIh2v2HnTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/icons": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/icons/-/icons-9.4.2.tgz",
+      "integrity": "sha512-QSMMz0NA03ypSGhXC8HQX8FSj8lYT+/5yqH+/N03OH2IjL0q7wwGZ7nqsrtlRp76O5WqMTwGfSbTUUYPjFr+Xw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/identicon": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/identicon/-/identicon-9.4.2.tgz",
+      "integrity": "sha512-JVDSmZsv11mSWqwAktK5x9Bslht2xY3TFUn8xzu6slAYe1Z7hEXZ76eb+UJ6F4qEzdwZ7xPWzAS6Nb0Y3A0pww==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/initials": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/initials/-/initials-9.4.2.tgz",
+      "integrity": "sha512-yePuIUasmwtl9IrtB6rEzE/zb5fImKP/neW0CdcTC2MwLgMuP1GLHEGRgg1zI8exIh+PMv1YdLGyyUuRTE2Qpw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/lorelei": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/lorelei/-/lorelei-9.4.2.tgz",
+      "integrity": "sha512-YMv6vnriW6VLFDsreKuOnUFFno6SRe7+7X7R7zPY0rZ+MaHX9V3jcioIG+1PSjIHEDfOLUHpr5vd1JBWv8y7UA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/lorelei-neutral": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/lorelei-neutral/-/lorelei-neutral-9.4.2.tgz",
+      "integrity": "sha512-yspanTthA5vh6iCdeLzn6xZ4yYMYRcfcxblcgSvHTF1ut0bjAXtw5SXzZ6aJTrJWiHkzYOQuTOR6GVYiW80Q7w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/micah": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/micah/-/micah-9.4.2.tgz",
+      "integrity": "sha512-e4D3W/OlChSsLo7Llwsy0J18vk0azJqF/uFoY+EKACCNHBc1HGNsqVvu2CTf+OWOA8wTyAK6UkjBN5p01r7D+g==",
+      "dev": true,
+      "license": "(MIT AND CC-BY-4.0)",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/miniavs": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/miniavs/-/miniavs-9.4.2.tgz",
+      "integrity": "sha512-wLwyFNNUnDRd3BbhSBhXR0XEpX8sG0/xDA5M/OkDoapLqZnnI48YLUSDd2N5QTAVMmcSEuZOYxkcnj7WW79vlg==",
+      "dev": true,
+      "license": "(MIT AND CC-BY-4.0)",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/notionists": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/notionists/-/notionists-9.4.2.tgz",
+      "integrity": "sha512-ZCySq+nxcD/x4xyYgytcj2N9uY3gxrL+qpnmOdp2BdA221KacVrxlsUPpIgEMqxS2rMmBQXfxg129Pzn4ycIpA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/notionists-neutral": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/notionists-neutral/-/notionists-neutral-9.4.2.tgz",
+      "integrity": "sha512-AyD9kEfVxQUwDGf4Op059gVmYIOAkTKg3dtE9h9mEKP7zl/kMy5B67BFFOo7sB0mXCjzAegZ6ekGU02E8+hIHw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/open-peeps": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/open-peeps/-/open-peeps-9.4.2.tgz",
+      "integrity": "sha512-i01tLgtp2g937T81sVeAOVlqsCtiTck/Kw20g7hN80+7xrXjOUepz2HPLy3HeiMjwjMGRy5o54kSd0/8Ht4Dqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/personas": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/personas/-/personas-9.4.2.tgz",
+      "integrity": "sha512-NJlkvI5F5gugt6t2+7QrYNTwQC7+4IQZS3vG0dYk2BncxOHax0BuLovdSdiAesTL4ZkytFYIydWmKmV2/xcUwg==",
+      "dev": true,
+      "license": "(MIT AND CC-BY-4.0)",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/pixel-art": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/pixel-art/-/pixel-art-9.4.2.tgz",
+      "integrity": "sha512-peHf7oKICDgBZ8dUyj+txPnS7VZEWgvKE+xW4mNQqBt6dYZIjmva2shOVHn0b1JU+FDxMx3uIkWVixKdUq4WGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/pixel-art-neutral": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/pixel-art-neutral/-/pixel-art-neutral-9.4.2.tgz",
+      "integrity": "sha512-9e9Lz554uQvWaXV2P17ss+hPa6rTyuAKBtB8zk8ECjHiZzIl61N/KcTVLZ4dILVZwj7gYriaLo16QEqvL2GJCg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/rings": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/rings/-/rings-9.4.2.tgz",
+      "integrity": "sha512-Pc3ymWrRDQPJFNrbbLt7RJrzGvUuuxUiDkrfLhoVE+B6mZWEL1PC78DPbS1yUWYLErJOpJuM2GSwXmTbVjWf+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/shapes": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/shapes/-/shapes-9.4.2.tgz",
+      "integrity": "sha512-AFL6jAaiLztvcqyq+ds+lWZu6Vbp3PlGWhJeJRm842jxtiluJpl6r4f6nUXP2fdMz7MNpDzXfLooQK9E04NbUQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/thumbs": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/thumbs/-/thumbs-9.4.2.tgz",
+      "integrity": "sha512-ccWvDBqbkWS5uzHbsg5L6uML6vBfX7jT3J3jHCQksvz8haHItxTK02w+6e1UavZUsvza4lG5X/XY3eji3siJ4Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/toon-head": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/toon-head/-/toon-head-9.4.2.tgz",
+      "integrity": "sha512-lwFeSXyAnaKnCfMt9TiJwnD1cXQUGkey/0h6i/+4TVHVMCz5/Ri5u1ynovPNHy1SnBf858QwoXHkxilGLwQX/g==",
+      "dev": true,
+      "license": "(MIT AND CC-BY-4.0)",
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dxup/nuxt": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/@dxup/nuxt/-/nuxt-0.5.10.tgz",
+      "integrity": "sha512-54Vehb7LmR7qYpC6KFwjDTSm6CB1CayBu+JXdHrPLrIjjr5xAgb43jvgOU+mnB+tsRh414fSsEy0QjBMKILQ8g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@dxup/unimport": "^0.1.2",
+        "@nuxt/kit": "^4.5.2",
+        "@vue/compiler-dom": "^3.5.41",
+        "chokidar": "^5.0.0",
+        "knitwork": "^1.3.0",
+        "magic-string": "^1.2.2",
+        "pathe": "^2.0.3",
+        "tinyglobby": "^0.2.17",
+        "unplugin": "^3.3.0"
+      }
+    },
+    "node_modules/@dxup/nuxt/node_modules/@nuxt/kit": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.5.2.tgz",
+      "integrity": "sha512-l66LU9DcJYjmNwqwAj2I5UGRrUbnG2DOKGChnN70zIGtn0eq/z87gi/FRgha6eMb9/FmB1PFHgtx6PWVml1C2Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "c12": "^3.3.4",
+        "consola": "^3.4.2",
+        "defu": "^6.1.7",
+        "destr": "^2.0.5",
+        "errx": "^0.1.2",
+        "exsolve": "^1.1.1",
+        "ignore": "^7.0.6",
+        "jiti": "^2.7.0",
+        "klona": "^2.0.6",
+        "mlly": "^1.8.2",
+        "nostics": "^1.2.0",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.1",
+        "rc9": "^3.0.1",
+        "scule": "^1.3.0",
+        "tinyglobby": "^0.2.17",
+        "ufo": "^1.6.4",
+        "unctx": "^3.0.0",
+        "untyped": "^2.0.0",
+        "verkit": "^0.3.1"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/@dxup/nuxt/node_modules/magic-string": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-1.2.3.tgz",
+      "integrity": "sha512-Bpb0W2TbLKOZ7vJnOUnVRGq3WL2p+ISV29M6hYPL1AFCpyKZpdr5ytiXoTSSxRVhg8YW7f65+6gbG8WG6PCa/g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/@dxup/nuxt/node_modules/unctx": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/unctx/-/unctx-3.0.1.tgz",
+      "integrity": "sha512-5RAt2etv7g362RXyd33R82gm9u/kbtQlpoaOs9Bgm4E32GRMJ0xjbZyvdxUTmiuHk3V1IQb1aUNrp5IWY+JaWw==",
+      "license": "MIT",
+      "peer": true,
+      "peerDependencies": {
+        "magic-string": ">=0.30.21",
+        "oxc-parser": ">=0.140.0",
+        "rolldown": "^1.1.5",
+        "unplugin": "^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "magic-string": {
+          "optional": true
+        },
+        "oxc-parser": {
+          "optional": true
+        },
+        "rolldown": {
+          "optional": true
+        },
+        "unplugin": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@dxup/nuxt/node_modules/unplugin": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-3.3.0.tgz",
+      "integrity": "sha512-qa66K+crbfyE6JK10GjvbJeRrOsuC/JpbnHctfyp/i4oBTxWOzJfRZyDiOk1PtErMFRu8JhsU/wPvOdBNWe5Rg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "picomatch": "^4.0.4",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "@farmfe/core": "*",
+        "@rspack/core": "*",
+        "bun-types-no-globals": "*",
+        "esbuild": "*",
+        "rolldown": "*",
+        "rollup": "*",
+        "unloader": "*",
+        "vite": "*",
+        "webpack": "*"
+      },
+      "peerDependenciesMeta": {
+        "@farmfe/core": {
+          "optional": true
+        },
+        "@rspack/core": {
+          "optional": true
+        },
+        "bun-types-no-globals": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "rolldown": {
+          "optional": true
+        },
+        "rollup": {
+          "optional": true
+        },
+        "unloader": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@dxup/unimport": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@dxup/unimport/-/unimport-0.1.2.tgz",
+      "integrity": "sha512-/B8YJGPzaYq1NbsQmwgP8EZqg40NpTw4ZB3suuI0TplbxKHeK94jeaawLmVhCv+YwUnOpiWEz9U6SeThku/8JQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.2.tgz",
+      "integrity": "sha512-XExcO+dvLKvVtNTibSTBej1NCAbaGhWn9Ww1ZPx80qsahhPFe/8jgWP0IchNe0F3HwkU7n8ejhH8bjonqht8mQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.2.tgz",
+      "integrity": "sha512-kXXoiPVVGQcnIYGOeaovwOURpniDBpSq4A03qkQ+BMQqtGG6HYap3xne9C1O1yo4TR3qxlCX5IqqmX6fFo2Lqg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.2.tgz",
+      "integrity": "sha512-5YfKeeI8qWfBZIX+u2xZC3Zlb3Os/gLS2sbEKM+I4ZOcsWmHS2WLysCcQZDAFRslDUU5Oiq44gf6PYN1vGwG5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.2.tgz",
+      "integrity": "sha512-O387ite7SzUyCcy3JQX4P4bLtEA7bLLkx+esve5JHnyYfNTxcVpXZo9jhdB0lTKN44gztELTdU7nS8Nr16Fs1Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.2.tgz",
+      "integrity": "sha512-n4KqkOQrraxHJcgjM1RvwbigfQKIKJVpM7xp+KsxiyUSrRdIXnt73VhrPAx0fV44hgfmIVKjxMN9J1t5jySVkw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.2.tgz",
+      "integrity": "sha512-uq6suIWYP37qzGddBKPw5QEQPi6HiLGsO7UmkpfyaYNQ3D+rN6w6WfwH+nuqcGXWvawGwxOEroO4YGnFh95azw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.2.tgz",
+      "integrity": "sha512-n+I0BTSRIoy+d6RPKnEVwql5UwBJolytvY4mAOIEJorKlqgPII8ix6slVVrfZ5Tnj7glIZvloylbB/EJPMWEXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.2.tgz",
+      "integrity": "sha512-78XJTJkvPs0kz2w61301PJjXl4g7q3JqiYMZ/M/yVI73EHBrCRTgkhu9oqG7vPqq+a/yadEW8aD+agKlk5xrmg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.2.tgz",
+      "integrity": "sha512-XlDnu2q5yoqems+xay6wSAcg9DDD7K9RLKZEBOMZm3ckNpJBvOX20tSfby8KfrrhINDyv9V2YVZKY/SpoGJI8w==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.2.tgz",
+      "integrity": "sha512-pW4AC0P3it8c7do9MVM4p51FzHzdM/TZrerurgRcHJ2WTa1VQ1CIq18xncfpBJw4ojkiZZrKW2yIBWBP92j6Ug==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.2.tgz",
+      "integrity": "sha512-CYbnj78HsIeA+DhgUKgFCfvNsTHFhMMrinUrMZpDXJXKN8T3XViTZ/+wtHeVxEWY8ewSzTFN+nRmSwO2tZaLUQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.2.tgz",
+      "integrity": "sha512-buwkd8nsph4R+ajRvw0qM5Hja/TXQow3ptzWO2EbG/cqcIkHloRrdlBtQlshyYGTNFvfkfJ5tpPLVkY4DtsPfQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.2.tgz",
+      "integrity": "sha512-ZVykbDyk7519VwiNb9Lcj9m8XM6v5V9uKPvrEMkkEedVewf+0itkhahp4HDpgERXhwLRpWFypsGbG/J8s0QjJA==",
+      "cpu": [
+        "mips64el"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.2.tgz",
+      "integrity": "sha512-CAXl+Dtd9UUuJd8pKKdwh6MLm3MUMiqMPmhZ3tTSXPqfyQ3vDl6R5hZdZ/kYojK4ofXtdfSv1tFq8XzWx3heNQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.2.tgz",
+      "integrity": "sha512-GeXCej4IQtU1B+QlDV8W/RRvbzI3O/Stss+/bCXv4lZls5WGRtu2a+3JkA3i4qIUlMXpcHebWpF8AkJhATowuA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.2.tgz",
+      "integrity": "sha512-3H1weTYZPxt/WOhByszQZybS9w5lKzUn1FDMsgEChbHWQwHYQQRfBxgCcZvPhjHfKyJjIievvMmEUawJrdY9Dg==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.2.tgz",
+      "integrity": "sha512-4xTZr1FUmSoQW4XIWmit3tzQrUTZM+N3P0XV8xROKYF50XfI7xeO90+1bZvNwxIufQ9hDQVRJH5YhgPVF8A/HQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.2.tgz",
+      "integrity": "sha512-sSATRjPeDBg3pdgHoQfoYBob11Kk1FGa9lui5RIHZCoCkJa9QKlvl3/vKz2usCmYYjs7ymJR/2Nnsqe+Hjt5nw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.2.tgz",
+      "integrity": "sha512-lqnzCV+mM0gIADaKihiCg6ifgfU2L3h5E33rNQBN1Y4MaVGnzryzmvvf7UHxprpQdE8hpqLolJ9Rl+SkIRDpyw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.2.tgz",
+      "integrity": "sha512-AL2qJILH7lNjrDmCQDvdxMfAUIv8KMNZOvrwAQ8i8//ntL9FflhOyMJ8OZSMBb8/AWXe3/5v5S20y3zCoZWKoQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.2.tgz",
+      "integrity": "sha512-QtiuPytchRyC4rwUKhexJdQKvDuZ6hWloi3igqPQNUJCS1/v9EiO3UTOXR6A3FoMo4fnAKbWJdqaIwhOzh8qEw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.2.tgz",
+      "integrity": "sha512-WkhYDmpTjLvGlScA1rwjRUmhl4k8oXR3cIbtqWmELgU/dFeHHlEllxDvdWcNJV9rbzCexB5vz8gtNewWLgCT7Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.2.tgz",
+      "integrity": "sha512-GPMSkTOtMnv2U2F8gxe4Io6qmVs+YKyp832Etqqxr0hFngmXQ3rzwytelm3GIn7T4VviRUlf3sOgBOiTdvaf7g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.2.tgz",
+      "integrity": "sha512-PIhhEkE9uPBleRBrQEJpUn7MBnibZzbGzYWPmY3x+YoVg/95zbjB4CxPPOQ8l5tYYM4mMaCthF8/1DIfBQQyWQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.2.tgz",
+      "integrity": "sha512-YmJbfTlvU7Sdn9BB+4PRES4oB6pxgS37MAONj+hBr/cpXS1aBPKXxNnDbu+QCWPj0o9dgyxeq79g6c5P8KeuYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.2.tgz",
+      "integrity": "sha512-5ebpxr3nWMzrL/rnUI755Jkuee0bHL/Gq0WTF9lvcpv73wAp5eu8MfBUgWK9bhWvZjj7yX8etf/8tI8Ney695g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@heroicons/vue": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.2.0.tgz",
+      "integrity": "sha512-G3dbSxoeEKqbi/DFalhRxJU4mTXJn7GwZ7ae8NuEQzd1bqdd0jAbdaBZlHPcvPD2xI1iGzNVB4k20Un2AguYPw==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": ">= 3"
+      }
+    },
+    "node_modules/@ioredis/commands": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.10.0.tgz",
+      "integrity": "sha512-UmeW7z4LfctwoQ5wkhVzgq8tXkreED2xZGpX+Bg+zA+WJFZCT6c062AfCK/Dfk81xZnnwdhJCUMkitihRaoC2Q==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.3.0.tgz",
+      "integrity": "sha512-WpDfL7NO6j7tH88IDBNVdUJxDh9nmCteAVW9dsep846XdwF4naCBK+/tGLX3KJgcpgMRXCFlTM2hKGoK9FsdrQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansi-regex": "^6.2.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "minipass": "^7.0.4"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz",
+      "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.6.0.tgz",
+      "integrity": "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@kwsites/file-exists": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@kwsites/file-exists/-/file-exists-1.1.1.tgz",
+      "integrity": "sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "debug": "^4.1.1"
+      }
+    },
+    "node_modules/@kwsites/promise-deferred": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@kwsites/promise-deferred/-/promise-deferred-1.1.1.tgz",
+      "integrity": "sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@mapbox/node-pre-gyp": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-2.0.3.tgz",
+      "integrity": "sha512-uwPAhccfFJlsfCxMYTwOdVfOz3xqyj8xYL3zJj8f0pb30tLohnnFPhLuqp4/qoEz8sNxe4SESZedcBojRefIzg==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "consola": "^3.2.3",
+        "detect-libc": "^2.0.0",
+        "https-proxy-agent": "^7.0.5",
+        "node-fetch": "^2.6.7",
+        "nopt": "^8.0.0",
+        "semver": "^7.5.3",
+        "tar": "^7.4.0"
+      },
+      "bin": {
+        "node-pre-gyp": "bin/node-pre-gyp"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@mdx-js/react": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.1.tgz",
+      "integrity": "sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdx": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16",
+        "react": ">=16"
+      }
+    },
+    "node_modules/@napi-rs/lzma-linux-x64-gnu": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/lzma-linux-x64-gnu/-/lzma-linux-x64-gnu-1.5.1.tgz",
+      "integrity": "sha512-oTXEIha4SsuXdTA4Iyskj0kpdx2yVXdhd75c2v3xGrHFfVMsbhTPZU/nMPL4sWKo4pBHm3aucLaqGlF696dTyQ==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^22.20 || ^24.12 || >=25"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nuxt/cli": {
+      "version": "3.37.0",
+      "resolved": "https://registry.npmjs.org/@nuxt/cli/-/cli-3.37.0.tgz",
+      "integrity": "sha512-Zj9NwHjEBzVrgezsgMFjpMhNqwNgROk9DzNi/dyfk1mCbXIRigV11br2xOl0Satek30bmv7oZAfMtCnDe6Ip0Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@bomb.sh/tab": "^0.0.19",
+        "@clack/prompts": "^1.7.0",
+        "c12": "^3.3.4",
+        "citty": "^0.2.2",
+        "confbox": "^0.2.4",
+        "consola": "^3.4.2",
+        "debug": "^4.4.3",
+        "defu": "^6.1.7",
+        "exsolve": "^1.1.0",
+        "fuse.js": "^7.4.2",
+        "fzf": "^0.5.2",
+        "giget": "^3.3.0",
+        "jiti": "^2.7.0",
+        "listhen": "^1.10.0",
+        "nypm": "^0.6.8",
+        "ofetch": "^1.5.1",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "perfect-debounce": "^2.1.0",
+        "pkg-types": "^2.3.1",
+        "scule": "^1.3.0",
+        "semver": "^7.8.5",
+        "srvx": "^0.11.22",
+        "std-env": "^4.2.0",
+        "tinyclip": "^0.1.15",
+        "tinyexec": "^1.2.4",
+        "ufo": "^1.6.4",
+        "youch": "^4.1.1"
+      },
+      "bin": {
+        "nuxi": "bin/nuxi.mjs",
+        "nuxi-ng": "bin/nuxi.mjs",
+        "nuxt": "bin/nuxi.mjs",
+        "nuxt-cli": "bin/nuxi.mjs"
+      },
+      "engines": {
+        "node": "^16.14.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "@nuxt/schema": "^4.4.6"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/schema": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@nuxt/cli/node_modules/@bomb.sh/tab": {
+      "version": "0.0.19",
+      "resolved": "https://registry.npmjs.org/@bomb.sh/tab/-/tab-0.0.19.tgz",
+      "integrity": "sha512-dTRfo9Q9B+lbLG3JCu8a/AGQSfD2XXcFcnakQzVjSOX+VvR/s9zpsH8TlqV3iHqazniRn1Ypwd1hcRlXcu/4BA==",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "tab": "dist/bin/cli.mjs"
+      },
+      "peerDependencies": {
+        "cac": "^6.7.14",
+        "citty": "^0.1.6 || ^0.2.0",
+        "commander": "^13.1.0 || ^14.0.0 || ^15.0.0"
+      },
+      "peerDependenciesMeta": {
+        "cac": {
+          "optional": true
+        },
+        "citty": {
+          "optional": true
+        },
+        "commander": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@nuxt/devalue": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/devalue/-/devalue-2.0.2.tgz",
+      "integrity": "sha512-GBzP8zOc7CGWyFQS6dv1lQz8VVpz5C2yRszbXufwG/9zhStTIH50EtD87NmWbTMwXDvZLNg8GIpb1UFdH93JCA==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@nuxt/devtools-wizard": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/devtools-wizard/-/devtools-wizard-3.4.2.tgz",
+      "integrity": "sha512-U2G8fw7KW1rdECyJDho5N14z8hSllpTk430KG1QPLjrv5w3pDksZ+YcpITd0u762Vw3gq3Arpg65Bk6U4ua6aQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@clack/prompts": "^1.7.0",
+        "consola": "^3.4.2",
+        "diff": "^8.0.4",
+        "execa": "^8.0.1",
+        "magicast": "^0.5.4",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.1",
+        "semver": "^7.8.5"
+      },
+      "bin": {
+        "devtools-wizard": "cli.mjs"
+      }
+    },
+    "node_modules/@nuxt/devtools-wizard/node_modules/execa": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
+      "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^8.0.1",
+        "human-signals": "^5.0.0",
+        "is-stream": "^3.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^5.1.0",
+        "onetime": "^6.0.0",
+        "signal-exit": "^4.1.0",
+        "strip-final-newline": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=16.17"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/@nuxt/devtools-wizard/node_modules/get-stream": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
+      "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@nuxt/devtools-wizard/node_modules/human-signals": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
+      "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=16.17.0"
+      }
+    },
+    "node_modules/@nuxt/devtools-wizard/node_modules/is-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@nuxt/devtools-wizard/node_modules/mimic-fn": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+      "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@nuxt/devtools-wizard/node_modules/npm-run-path": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
+      "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "path-key": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@nuxt/devtools-wizard/node_modules/onetime": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+      "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "mimic-fn": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@nuxt/devtools-wizard/node_modules/path-key": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@nuxt/devtools-wizard/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@nuxt/devtools-wizard/node_modules/strip-final-newline": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@nuxt/kit": {
+      "version": "3.21.11",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.21.11.tgz",
+      "integrity": "sha512-0Xi3tgwN77w43Q8GCPIrvWmF1J7Peehkts44E0uKNIml9lB8WoUn8YxyUjxBv47XtVR86NWoWALAT+/IEMHJEA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "c12": "^3.3.4",
+        "consola": "^3.4.2",
+        "defu": "^6.1.7",
+        "destr": "^2.0.5",
+        "errx": "^0.1.2",
+        "exsolve": "^1.1.1",
+        "ignore": "^7.0.6",
+        "jiti": "^2.7.0",
+        "klona": "^2.0.6",
+        "knitwork": "^1.3.0",
+        "mlly": "^1.8.2",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.1",
+        "rc9": "^3.0.1",
+        "scule": "^1.3.0",
+        "semver": "^7.8.5",
+        "tinyglobby": "^0.2.17",
+        "ufo": "^1.6.4",
+        "unctx": "^2.5.0",
+        "untyped": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/@nuxt/nitro-server": {
+      "version": "3.21.11",
+      "resolved": "https://registry.npmjs.org/@nuxt/nitro-server/-/nitro-server-3.21.11.tgz",
+      "integrity": "sha512-QIIFH+0xtDBjOdXeTcC23dr+CS98vQv3/wcPtM72BHUUFYH+GWf7TiFCp6xG0wUN6MhGg3KTDjE6yV9U9g6H6Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@nuxt/devalue": "^2.0.2",
+        "@nuxt/kit": "3.21.11",
+        "@unhead/vue": "^2.1.17",
+        "@vue/shared": "^3.5.40",
+        "consola": "^3.4.2",
+        "defu": "^6.1.7",
+        "destr": "^2.0.5",
+        "devalue": "^5.9.0",
+        "errx": "^0.1.2",
+        "escape-string-regexp": "^5.0.0",
+        "exsolve": "^1.1.1",
+        "h3": "^1.15.11",
+        "impound": "^1.1.6",
+        "klona": "^2.0.6",
+        "mocked-exports": "^0.1.1",
+        "nitropack": "^2.13.4",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.1",
+        "rou3": "^0.9.1",
+        "std-env": "^4.2.0",
+        "ufo": "^1.6.4",
+        "unctx": "^2.5.0",
+        "unstorage": "^1.17.5",
+        "vue": "^3.5.40",
+        "vue-bundle-renderer": "^2.3.1",
+        "vue-devtools-stub": "^0.1.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "nuxt": "^3.21.11"
+      }
+    },
+    "node_modules/@nuxt/nitro-server/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@nuxt/telemetry": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/telemetry/-/telemetry-2.9.1.tgz",
+      "integrity": "sha512-WYQs6GvebU278YXhbGlLA8pUO3ox+juHAiKCB3SEH0lq2PDRwX465tHRtpVIqsHv+lGK/n99FC7qqyBt9+p3oQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "citty": "^0.2.2",
+        "consola": "^3.4.2",
+        "rc9": "^3.0.1",
+        "std-env": "^4.2.0"
+      },
+      "bin": {
+        "nuxt-telemetry": "bin/nuxt-telemetry.mjs"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "@nuxt/kit": ">=3.0.0"
+      }
+    },
+    "node_modules/@nuxt/vite-builder": {
+      "version": "3.21.11",
+      "resolved": "https://registry.npmjs.org/@nuxt/vite-builder/-/vite-builder-3.21.11.tgz",
+      "integrity": "sha512-4w3g5IFzXhVdX0ZIgmd/zKE2xPZ/e2ms4On1z0OWTDIzvIbrWeednYAJA0bgmgwCBsInYppdih8ZN0w+yWIQmw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@nuxt/kit": "3.21.11",
+        "@rollup/plugin-replace": "^6.0.3",
+        "@vitejs/plugin-vue": "^6.0.8",
+        "@vitejs/plugin-vue-jsx": "^5.1.6",
+        "autoprefixer": "^10.5.4",
+        "consola": "^3.4.2",
+        "cssnano": "^7.1.9",
+        "defu": "^6.1.7",
+        "escape-string-regexp": "^5.0.0",
+        "exsolve": "^1.1.1",
+        "externality": "^1.0.2",
+        "generic-names": "^4.0.0",
+        "get-port-please": "^3.2.0",
+        "jiti": "^2.7.0",
+        "knitwork": "^1.3.0",
+        "magic-string": "^0.30.21",
+        "mlly": "^1.8.2",
+        "mocked-exports": "^0.1.1",
+        "nypm": "^0.6.9",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "perfect-debounce": "^2.1.0",
+        "pkg-types": "^2.3.1",
+        "postcss": "^8.5.25",
+        "seroval": "^1.6.2",
+        "std-env": "^4.2.0",
+        "ufo": "^1.6.4",
+        "unenv": "^2.0.0-rc.24",
+        "vite": "^7.3.6",
+        "vite-node": "^5.3.0",
+        "vite-plugin-checker": "^0.14.5",
+        "vue-bundle-renderer": "^2.3.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "nuxt": "3.21.11",
+        "rolldown": "^1.0.0-beta.38",
+        "rollup-plugin-visualizer": "^6.0.0 || ^7.0.1",
+        "vue": "^3.3.4"
+      },
+      "peerDependenciesMeta": {
+        "rolldown": {
+          "optional": true
+        },
+        "rollup-plugin-visualizer": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@nuxt/vite-builder/node_modules/@vitejs/plugin-vue": {
+      "version": "6.0.8",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.8.tgz",
+      "integrity": "sha512-0ZjgOg7oO6farnNGup7yvoM/YXZV84OZxHAwtflItNa/6zzQyVb5LNxyea3FEKEX2XlagIKzrlH7wwxkKgtiew==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@rolldown/pluginutils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@nuxt/vite-builder/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@nuxt/vite-builder/node_modules/vite": {
+      "version": "7.3.6",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.6.tgz",
+      "integrity": "sha512-4XP60spRGjSZFf1qYH+dJIkK2znL3zQfl9KkOV9MkkRR/3Dls0dxaBsQPTloEc5BLXWPL9vsOxopxyKoMmDueg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3",
+        "postcss": "^8.5.6",
+        "rollup": "^4.43.0",
+        "tinyglobby": "^0.2.15"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "lightningcss": "^1.21.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@oxc-minify/binding-android-arm-eabi": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-android-arm-eabi/-/binding-android-arm-eabi-0.143.0.tgz",
+      "integrity": "sha512-/UEp7vlZSeB5kkcspO93fec1NnPfdkF0JmKUSKm6ZLBhkh+Ua6hHmGU5tBJYF3LeuDDVpe+RIjBlmSu4d0kmKg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-android-arm64": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-android-arm64/-/binding-android-arm64-0.143.0.tgz",
+      "integrity": "sha512-ZdqRE7yvqP1snCTlCuJ2u9KUSTIj4k1NobK44VRSboAQb6+9j3rxkJ5wPFuIYRYa12lBijFSijSYAFbYapkibw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-darwin-arm64": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-darwin-arm64/-/binding-darwin-arm64-0.143.0.tgz",
+      "integrity": "sha512-KGt9pdVmgmSoec2ViIIPaBS4E0LLXP9fuk+ALDgeVvbOo3IffJPBgL8PWGC5jDXvBOAET1p6Ps9B4VcOQnu1sg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-darwin-x64": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-darwin-x64/-/binding-darwin-x64-0.143.0.tgz",
+      "integrity": "sha512-gb7Nc1la98YxpY3uEiCeXsI/D9YzOAkh3nIpyfPRpZGERLUQ/OpLFqXBTQ+/VD/gSHS+BVQPPLukQcZDnRxX8A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-freebsd-x64": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-freebsd-x64/-/binding-freebsd-x64-0.143.0.tgz",
+      "integrity": "sha512-XBcPdh9Z7eusL49InRDjZQb5M/c9Uc95LVjbj4X9Vn/8K+HP3bI/RhAl+870kxRqRFcSZru/a4VRxWM/q+eYjw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-linux-arm-gnueabihf": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-0.143.0.tgz",
+      "integrity": "sha512-w9qTGLd+tGkf8sM9QWbzut+BxS5WLEph/annIxbZwoiDzob/6UCHY3j1AOMx9cp34iHv4jdoE5ZpcjkJM7vm6Q==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-linux-arm-musleabihf": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-0.143.0.tgz",
+      "integrity": "sha512-oqzjfB+JWnP8+A97R9MXZSRokQNrkMadxRdZ6NFIFPshjbqyrCZy0VQAHkdVPUulMYGziKXI3D18fxYTomPNjw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-linux-arm64-gnu": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-0.143.0.tgz",
+      "integrity": "sha512-kzUFsaL8ZMmwgMSY5PYvwOTBsQuSOp/FrWjmV3cecu54+f0RbF2mrDXVxOirRpF+mc4HzU8ndkatmgFlpIEo6A==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-linux-arm64-musl": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-arm64-musl/-/binding-linux-arm64-musl-0.143.0.tgz",
+      "integrity": "sha512-Si6teAvC97dUa2Dat0Aj15bqEKb8+bomAqLrmMZgJ5z6zZTFdDspmCM0dy7XlPVIV/gmM8b9R7353om6M868ag==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-linux-ppc64-gnu": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-0.143.0.tgz",
+      "integrity": "sha512-1YHgZgUHn6kL5q72ohDD7/BwmNTqy71ckz4X++yQ0gLA5iyFCZux+WYO5KOcR/gsh1nRgH7k/XhRlNpvvT43cA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-linux-riscv64-gnu": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-0.143.0.tgz",
+      "integrity": "sha512-XDVP9LLHxfMB2HiXFKF9gT3Zq648dugq98IUgmBCmRKvryxgXMVlzt+nxHL0v/3r4xtPYcbSTCOhMvVtApUtqQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-linux-riscv64-musl": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-0.143.0.tgz",
+      "integrity": "sha512-m6s3L8zbQWpOHtJ9n+8FQ1dBQ+eQz6l3hK2hDKvPRaYM1+nFjHWrVj6EIwXidBtk4OT1gGvw+ojPWi6X2xZ9SQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-linux-s390x-gnu": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-0.143.0.tgz",
+      "integrity": "sha512-5ILtPXU0zhjRoaQ86JbtkJwrIsJ70EEV4rYbYmtB6BJDxKDAb8P/tjwYcnBgVTrxrqn/3Mms2wGa2T9yXY6FRg==",
+      "cpu": [
+        "s390x"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-linux-x64-gnu": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-x64-gnu/-/binding-linux-x64-gnu-0.143.0.tgz",
+      "integrity": "sha512-JzSNJd8/sO0m+VEhgNfA1ZPxogwhDGrQ5ajNqP1Rdo1N7o4CLBH8wLMpBiHk7a/7Y3V0QHQZScCx6SnwoZ3Qsg==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-linux-x64-musl": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-x64-musl/-/binding-linux-x64-musl-0.143.0.tgz",
+      "integrity": "sha512-yvA7b2vJP29Kf/lbA+wgJjwgiRxHxK+vR/NVmqK39H40K1dWeugiIRLl3u7P5Q5xVsBaEfg36uokrZiyNY4IAw==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-openharmony-arm64": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-openharmony-arm64/-/binding-openharmony-arm64-0.143.0.tgz",
+      "integrity": "sha512-0bIPZFCoc5IJvenc3cTP6GRqn6PoIZeQwYlVvdbpun0IlE/Rwx9WTo622T2jcc4+j+u9Vk/oz6wHgisVzDtB5Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-win32-arm64-msvc": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-0.143.0.tgz",
+      "integrity": "sha512-sO3l3B5iWt1QS3owmR+HfJr6PZ3djl7Qu8EsdLao7Ampz1j2RqGpaLSdcLm5OUtFxXEpjQURG6K4yjg6idOXeA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-win32-ia32-msvc": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-0.143.0.tgz",
+      "integrity": "sha512-ZyqIYHCB2R0gSr8FqQVUeJNY5yyGoVWyewi9Mx7A222L4392KCzAYLZj9Hh6eAMO2fu9gX52vguA/gCWo2et4Q==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-win32-x64-msvc": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-win32-x64-msvc/-/binding-win32-x64-msvc-0.143.0.tgz",
+      "integrity": "sha512-akQwyMeeaOPBZRklc+KsGfvuAcfjUKctnivNLxW4ubG1SgwRoljR5QliS313lVhixdXiBsIF9eIGCU68RIBfOQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-android-arm-eabi": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-android-arm-eabi/-/binding-android-arm-eabi-0.143.0.tgz",
+      "integrity": "sha512-n9uozULWflPqBtdmI8lAabLqGKNgLVNN0ZH8HfgCwpKGNtzRzauB76jTiW/3YLkcA7N1zskpi9GdVnZuu1SAvg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-android-arm64": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-android-arm64/-/binding-android-arm64-0.143.0.tgz",
+      "integrity": "sha512-9BbdjHETk6O3zH/DDid9IgBtF0GlpLabNKN231uraXpRDSfY+iiZxTP5bk1Z63GBownVdhdINFIeddmMz4MzpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-darwin-arm64": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-darwin-arm64/-/binding-darwin-arm64-0.143.0.tgz",
+      "integrity": "sha512-gh+6ecoHUy4/sUcolBl/1qPXKBbYNxFY0Pk0ujgQvINTMSftJY7o4yb8gOkDJPeZeB8+a+u7xTe6umoP8N5HFA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-darwin-x64": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-darwin-x64/-/binding-darwin-x64-0.143.0.tgz",
+      "integrity": "sha512-qd1hl2d+lXgHv/VQ/M9qm8TrMC5T4RqDBwtOnl+1D0QMjwcz+8AaB4JSg8STgeag0GP6a6L74XEGAsrTSJWNzQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-freebsd-x64": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-freebsd-x64/-/binding-freebsd-x64-0.143.0.tgz",
+      "integrity": "sha512-M5XXcNa7aOqLPKTR41msfghKu2yQ4xWvCm11/gwU0JzOzHNk5sgW//rVEjJ+LO48+VDAMzXTSzurUVxIDKwozw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-arm-gnueabihf": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-0.143.0.tgz",
+      "integrity": "sha512-T/GXusuOkPNQhCQCSBbcU/N8j0rAypuDBl1IyFK+lyYT594XsVz80clPC/OtbSSpBGyJxj8uYEfctxVuxVYoww==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-arm-musleabihf": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-0.143.0.tgz",
+      "integrity": "sha512-oKu4RcBlXSqo3OC62dp6YTnQaZIurNDpCX3BnAM3+bJxt7s8J2TJKMnC0UYer1qhlRaDCg6wkTaTw+2IlsZ12w==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-arm64-gnu": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-0.143.0.tgz",
+      "integrity": "sha512-WJBbD186AZmMGaSIhlktC+rPl8L3peCTXAh88Ih9uEvK0en2mPojGyCGYiL6mHtV1RPV3JyfJW5t6n5hh0lXhA==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-arm64-musl": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm64-musl/-/binding-linux-arm64-musl-0.143.0.tgz",
+      "integrity": "sha512-t1AcYOwEzgceadT4v5e+vaCCb0AncCA3v5AyzfBAz/tMq11qzVccXKzNHtkWdjBsgvTKwRkaUF3QvT4kot8vcQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-ppc64-gnu": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-0.143.0.tgz",
+      "integrity": "sha512-RsnO/NoD8376LMJq8JS8TwI0ieNaFRTuNe2GVJntQg6gwZNMENZsEbknHdVwjpOmxdGLGodcwaGSbAeRr5Bgjw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-riscv64-gnu": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-0.143.0.tgz",
+      "integrity": "sha512-48fSVfR9TZi5CASZFyv0VC6z6BCoeihFsX031mAD/oSH7d9PYsPgIqza7d9mjP7Z2KTEpTFyH6SIu0Ui6R1vdg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-riscv64-musl": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-0.143.0.tgz",
+      "integrity": "sha512-T8CpdD+SfE01DnIOD4HpVxu0ZJOfMJ/VhCvikKfaXAxkZ+9veyLM/D2hpi7Y2hFUyPmVQO3FNZHmYzV/WlVR4g==",
+      "cpu": [
+        "riscv64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-s390x-gnu": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-0.143.0.tgz",
+      "integrity": "sha512-QLdeMsCcacenPEFsfxnBUDF1y6opyz5+fmOz9bfD5Y7fiGCMupUCuB3KTPQhNwshIG1P9fPqar9MHxuBDd4bwQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-x64-gnu": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-x64-gnu/-/binding-linux-x64-gnu-0.143.0.tgz",
+      "integrity": "sha512-659ujfqLy6k7cuH3sbzhd8b+ztSq+i6E2E9pG78Q0BmHjAExfGIdgc8cGgMdwAozDXeZFHkJ+LXYJdWsaGdgyw==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-x64-musl": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-x64-musl/-/binding-linux-x64-musl-0.143.0.tgz",
+      "integrity": "sha512-/Mw/9j4TfZcnKphPrzOE6t4MMknXadcAAuVUlDRTF/ETWB5xOgQvOJV2Mh9We/bWxZdoxaGAdc+hy4GuYwQ2yQ==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-openharmony-arm64": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-openharmony-arm64/-/binding-openharmony-arm64-0.143.0.tgz",
+      "integrity": "sha512-8rIKWR2BFuifbIK/1XB9wTaSdtuJ25dlE7ZQYDnEwj/2xH2vHsxnvIjHT3ZjSVuLLwGGlSslIG/fbOJ8TV8rTw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-win32-arm64-msvc": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-0.143.0.tgz",
+      "integrity": "sha512-5U9kQYMfRRI6Zq7KDxgbIP0RMnKrfn3gLepRMgJuRkPSUALTiRCk9d/uyhb4lGDjUdzwK7mBkKqhLgzBPCmLpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-win32-ia32-msvc": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-0.143.0.tgz",
+      "integrity": "sha512-25P7AaHk4R88Yv2XH4gToDVmh0cOu+bEURQU10CRrmvgabfRArSGAP5osmwUKeSUHj0VS50upbpbRWWW/m7mHA==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-win32-x64-msvc": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-win32-x64-msvc/-/binding-win32-x64-msvc-0.143.0.tgz",
+      "integrity": "sha512-ORMh3JE1s6V7ySicdRK7vgaDQnn5o+UHg9ct989PlWHbel8O9ARrmWXM6kZjrBMtNucxNayQ8g69G0VfWzhANw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.143.0.tgz",
+      "integrity": "sha512-u6JZdLBTLotrNC9Vd6vPssINdzcCzleKAH6EJKImQb7GtYvX5keN2dxkoK44stCc4tffE6QQRtZTXVSzsLUlWA==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
+    "node_modules/@oxc-transform/binding-android-arm-eabi": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-android-arm-eabi/-/binding-android-arm-eabi-0.143.0.tgz",
+      "integrity": "sha512-Rufrk7btlzkIAofJyrm3COzSrn4iNYOnHNYOahBDQly/PgleJv6QIVCHsPTqC6qfX/EJNoAeNshALvVfKSTY5A==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-android-arm64": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-android-arm64/-/binding-android-arm64-0.143.0.tgz",
+      "integrity": "sha512-EwdR7ynio7zcg3CCaArr/FllpJX8fxmCCQlDdo6o4rZuCSXuIE04hRgcOgRRd5r5AKu81s/XP0TBulXWXaWpmQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-darwin-arm64": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-darwin-arm64/-/binding-darwin-arm64-0.143.0.tgz",
+      "integrity": "sha512-+o1gLw5mefaKDFfhpIyxKEyeE9kAopy8uA/JCUG0D3stDeY35b3vjeWHgTTBwkOgLXWblq8OvZee1yEJ9Xd40Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-darwin-x64": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-darwin-x64/-/binding-darwin-x64-0.143.0.tgz",
+      "integrity": "sha512-lKEnKHSspm8c+aR+lspmP6m8g09f5VivzMCRpLTrMJLgaWmipUCflBsS8qTKcmRp/hYZl3ARfJ3K00SHSIFb2g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-freebsd-x64": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-freebsd-x64/-/binding-freebsd-x64-0.143.0.tgz",
+      "integrity": "sha512-8Rir0D6CpKuh0tWuCjnZgk+r8XmKsGXncGBp6lmcYXwC5baLI3DK3T9I/CM1+khoF7JbFE3PqAmoF4HxGysxUQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-linux-arm-gnueabihf": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-0.143.0.tgz",
+      "integrity": "sha512-4F+ErMGgG6f7ydN42VwD+4F1UHhYBb4vELUT/0+gOhuGBN1wwhOPNLhHeJJnZQHZM2JYERdS6wn9uBoBiXw3gw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-linux-arm-musleabihf": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-0.143.0.tgz",
+      "integrity": "sha512-XqEYetdBUbFJE8IQUOtDUlyAmoec7I5xkLBFW5wdMI6oRaRJeFFTAK4jg/5sSRzNLU/OFTBTWCn5soQ/iLbwHQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-linux-arm64-gnu": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-0.143.0.tgz",
+      "integrity": "sha512-LXswrXbEouF3X/q5s+X3Im4VCCNu8aZDj6gRI/s32WDlBqwGosW/A8Ci5MgvCEnU3efVacXhAPPF9zbFE42OAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-linux-arm64-musl": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-arm64-musl/-/binding-linux-arm64-musl-0.143.0.tgz",
+      "integrity": "sha512-/TKz33dR/kqEdmLwGYsAKuVbjDEPhFKq0PAyIMVCLbqglBy7BRQCw7w7g78X5PLFXso0LgfCFCz/C5dDtBDj/Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-linux-ppc64-gnu": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-0.143.0.tgz",
+      "integrity": "sha512-2mVVq6P4cCXElahTV/GKufxdqRUWZtPHD3EQP2GFigjXRSAXl3HGelIgpYT8I8eoU7QNq6qk+avYsXImt9Hb+Q==",
+      "cpu": [
+        "ppc64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-linux-riscv64-gnu": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-0.143.0.tgz",
+      "integrity": "sha512-kkZtkNIqljF8KP9jrZYkhtY1Vbg35jaRj7mZCOinWUPwZIR8PYJwe2KkUVNII+148mYyxlCuf8DZXHiJJ9SNgg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-linux-riscv64-musl": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-0.143.0.tgz",
+      "integrity": "sha512-GRJr0FmQ6C8pbAl0ZyPh/VQwb1/hiXtwrb3IoK93LNsqMWNjbqKFP39lZlLQOdeU8QQADlZM8Qx75YQAOFkbSw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-linux-s390x-gnu": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-0.143.0.tgz",
+      "integrity": "sha512-k4fpvbh7zGvSLXgOJznv7zPGLgFSYvaMWgVhebxmXZqJgax1kWVOhiJ92L+K/Aqq3tgLEQwkQ8wWGcArSM/O4g==",
+      "cpu": [
+        "s390x"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-linux-x64-gnu": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-x64-gnu/-/binding-linux-x64-gnu-0.143.0.tgz",
+      "integrity": "sha512-utU2SgpVcipJsQ2lHmZm1twk5ke75/Xt1PivxGV8Va55vrXdIXK+At6ERv+6BikB28qauCe7vv2yovtkEuvmQQ==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-linux-x64-musl": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-x64-musl/-/binding-linux-x64-musl-0.143.0.tgz",
+      "integrity": "sha512-T+cQ/IcWiQ5XVC1cG+DczewthN7c2Vujw0JyO2ugcr6B7TCQiucDd/erVxJSaY59X8d6970+lPtng8Z8XiyGYg==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-openharmony-arm64": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-openharmony-arm64/-/binding-openharmony-arm64-0.143.0.tgz",
+      "integrity": "sha512-3uyqUj+d9hccXdL5WiJW+SVojwckAqSGz+eEBjwIs0/2SXavVpasH8n4E2N5CbCOa4NJdaRKmquHa52s/DN1yQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-win32-arm64-msvc": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-0.143.0.tgz",
+      "integrity": "sha512-5x4/nWog5kjADuMVoZx9KOpbrzJNRuz59oA5jFW95NvV69lZikgubJDIM7WwBReS0mIoIF+QC2r3pAiJtKrYJQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-win32-ia32-msvc": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-0.143.0.tgz",
+      "integrity": "sha512-z/hozOHz6t/iB68GQPskKJMGxBMpBYqKhOmik3wOprnvnpwOeEyOQ89xuWgvQvX4B69LnxGyAWpJWjSK5zUVzA==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-win32-x64-msvc": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-win32-x64-msvc/-/binding-win32-x64-msvc-0.143.0.tgz",
+      "integrity": "sha512-8AaiwIM4M/gEcvXWD71SZDCpY70z7J99G110+fSBws/MHa9PaaWu0IVp5clEG/0alWPQiPZcZRFE3ZIhSd5fng==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@parcel/watcher": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.6.0.tgz",
+      "integrity": "sha512-7FNeNl8NCE7aINx7WXiKQrPYZWC/hvrTsmk6zmxbI7LTXE7hVek/n8AfVgpe2y82zl3w0HvCHN0bVKMBoJcC0w==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.3",
+        "is-glob": "^4.0.3",
+        "node-addon-api": "^7.0.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.6.0",
+        "@parcel/watcher-darwin-arm64": "2.6.0",
+        "@parcel/watcher-darwin-x64": "2.6.0",
+        "@parcel/watcher-freebsd-x64": "2.6.0",
+        "@parcel/watcher-linux-arm-glibc": "2.6.0",
+        "@parcel/watcher-linux-arm-musl": "2.6.0",
+        "@parcel/watcher-linux-arm64-glibc": "2.6.0",
+        "@parcel/watcher-linux-arm64-musl": "2.6.0",
+        "@parcel/watcher-linux-x64-glibc": "2.6.0",
+        "@parcel/watcher-linux-x64-musl": "2.6.0",
+        "@parcel/watcher-win32-arm64": "2.6.0",
+        "@parcel/watcher-win32-x64": "2.6.0"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.6.0.tgz",
+      "integrity": "sha512-trgpLSCKRC/huFjXX/Smh+0sWe4+YtKfktIToiMl59ghz7z+qkH6kMvNnUbLyRs9N11t8l4svSCs1+5B3rOAhA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.6.0.tgz",
+      "integrity": "sha512-Y3QV0gl7Q1zbfueunkWIERICbEojQFCgpyG7YqOGNFLsckXyI1xu9mAIUpKY9QBYzBtSkN8dBPwd3yiAO9ovMw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.6.0.tgz",
+      "integrity": "sha512-Ohv6OpzhUfKYD7Beb8kDvG0jbIxORCYY1JRdZnaBtnjjkJxgD7ZVL0nw2sCYd0yTMKTvz3nnTnOF3cDifK+kvw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.6.0.tgz",
+      "integrity": "sha512-5HmXvDgs8VK+74jF9y9/2FE3/OnlcKmc56tjmSrEuZjpSZOGL+fvAu+HKJBdPs9uwoP2hE6TlSUpXZ/C5jUFmQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.6.0.tgz",
+      "integrity": "sha512-Ps/hui3A+vMbjdqlqAowK2ZL8+BO8dBjxeWXj6npTBs3jx4wWmbPpaLuqwrQrSqIVMCnpWo238bJ1U37GhQOYg==",
+      "cpu": [
+        "arm"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.6.0.tgz",
+      "integrity": "sha512-9c6AUHgHoG+IY88MRIHupztQiQnrbqHYQjkM2btA+Bf/wQnQMuiD0Wfk1EVv3TlNT3x41uU71rn6E4xh/+zvkw==",
+      "cpu": [
+        "arm"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.6.0.tgz",
+      "integrity": "sha512-yHRqS2owEXe6Hic9z6Mh1ECsCd+ODVOGvZDyciqRd21+v+o+DnXMOrw50DSpIG2sb8GPEaPPmfeCAWKPJdq46g==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.6.0.tgz",
+      "integrity": "sha512-WhB2e/V7rqdHHWZusBSPuy5Ei8S6lSz6FE5TKKQz5h3a0O+C+mhY7vxU9b/stqvMb8beLnPY82ZrFTLKs+SrKA==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.6.0.tgz",
+      "integrity": "sha512-ulGE6x6Oz6iAwg75T8YQSoguBWasniIbX+QWpaYPcCnDOpdWX3k+4xbEYPZVLxOuoJI+svJJPD3sEj8G7lrQ3A==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.6.0.tgz",
+      "integrity": "sha512-tkBYKt7YQrjIJWYDnto2YgO8MRkjlMTSNoRHzsXinBqbLdeOM3L32wPZJvIZxqaLMfSlS/4sUjH/6STVP/XDLw==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-wasm": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-wasm/-/watcher-wasm-2.6.0.tgz",
+      "integrity": "sha512-dtjbDxKSDPQ8AmA+pS4OFaHE1FKrjtGpLGBxw85uKFkRorjNbvDM/aFPgqosu40wprbp1xw2ZSxIKqghCUHe2w==",
+      "bundleDependencies": [
+        "napi-wasm"
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "is-glob": "^4.0.3",
+        "napi-wasm": "^1.1.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-wasm/node_modules/napi-wasm": {
+      "version": "1.1.0",
+      "inBundle": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.6.0.tgz",
+      "integrity": "sha512-gIZAP23jaHjGWasY/TY6yL7NHFClf0Ga7FN+iINvk+KN94rhm94lYZhFsbYFNcA04/onvGD9kKmiJLJB2HbNwQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.6.0.tgz",
+      "integrity": "sha512-cA+/pXV2YkfxlIcXOQ5fSWqAzzPyD78/x5qbK/I0vUkrlYHA8TIz+MXjAbGouguKVSI4bOmkTSJ1/poVSsgt+A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.29",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
+      "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@poppinss/colors": {
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/@poppinss/colors/-/colors-4.1.6.tgz",
+      "integrity": "sha512-H9xkIdFswbS8n1d6vmRd8+c10t2Qe+rZITbbDHHkQixH5+2x1FDGmi/0K+WgWiqQFKPSlIYB7jlH6Kpfn6Fleg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "kleur": "^4.1.5"
+      }
+    },
+    "node_modules/@poppinss/dumper": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@poppinss/dumper/-/dumper-0.7.0.tgz",
+      "integrity": "sha512-0UTYalzk2t6S4rA2uHOz5bSSW2CHdv4vggJI6Alg90yvl0UgXs6XSXpH96OH+bRkX4J/06djv29pqXJ0lq5Kag==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@poppinss/colors": "^4.1.5",
+        "@sindresorhus/is": "^7.0.2",
+        "supports-color": "^10.0.0"
+      }
+    },
+    "node_modules/@poppinss/dumper/node_modules/supports-color": {
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-10.2.2.tgz",
+      "integrity": "sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/@poppinss/exception": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@poppinss/exception/-/exception-1.2.3.tgz",
+      "integrity": "sha512-dCED+QRChTVatE9ibtoaxc+WkdzOSjYTKi/+uacHWIsfodVfpsueo3+DKpgU5Px8qXjgmXkSvhXvSCz3fnP9lw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@rolldown/binding-android-arm-eabi": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.6.tgz",
+      "integrity": "sha512-b+jTcARdTiFLI6jB4a5XjTm0RWd6KcRfQj/I2356fxUZemiho9zQLxo0RtCuMDAyKcLo6cEltkgbQp6d1+sjjQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.6.tgz",
+      "integrity": "sha512-lkWU8ZJaRk9q3CIEY1Tc7vIFALp3Xw5NfGJo2hQg5oIqNgxWi1zI+IiDEK3r70BF5Dzol1tcXsnzsRc8NLhG+Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.2.6.tgz",
+      "integrity": "sha512-dgR56NYnvAszm7Ob1B2/Vn0e8bUQYZH2UjVaMMtMVOCKFSfjhfLmuA/9+O+F+ajUdG6B/bSssrKW6JJYASa8jA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.2.6.tgz",
+      "integrity": "sha512-vpVxFvUCFioJqug7OTvqptkc4yb8UX0AwfDmJpaR/0sWz+BUmqSVAf7c8JkUgnN8YLspb4a/N6NhTyMAmdyQ7Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.2.6.tgz",
+      "integrity": "sha512-h1wG6Y6K3JlRswxsI64qQJqBAy4vrLuHgRbc8CZMGSWTOFRY6ghMApM1NKzB2I0n5xV1fjkE18SuVl2QpLeNpA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.2.6.tgz",
+      "integrity": "sha512-tbCiqub0q2MVWJKgF5PoAlNWCtQydiOYSLIkd8sByqK/6MMYLJRcSXSYodqYtd0O+Fw7QaVmKKlS4oL94YRZ0w==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.6.tgz",
+      "integrity": "sha512-oxK9+baEBPhZG5HB4URY+uU04zJWeZlH6Tb9rB5DK4DF9XR1uXNLXt5Q5ZsugTKayNCNLhkcwz/ye74hRI98dg==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.6.tgz",
+      "integrity": "sha512-muWCk27FVBEZtv0MsK8gnfSmgczA8KQ0uRVJbTABKhkRfQc38aUrcb7fhi3BNiyseFmgcRsoMfQsSNJ+DbZdSw==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.2.6.tgz",
+      "integrity": "sha512-eWDoSfU7Co2qj3vgB3Dt4lj1mG6CoWbcJQkRMP3XJplyCMtuaq3LHvPFjS9QIPvMGWVadJC04Xiy0IdcVPtnwQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.2.6.tgz",
+      "integrity": "sha512-2bWNjRSIayvupRKxXUY2tWG9fYdoUlTqWywHRvE8Eq3GvuQ+f2HeIkve697fIt+IQs/PV8yFsdWuhp1aJ1PdnA==",
+      "cpu": [
+        "s390x"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.6.tgz",
+      "integrity": "sha512-KekI0gS0wLxe1UBSQSjenBVwou/JkcQPDzBPICGZjxUv9k3RteHDPBQaiOicZUFKRIH2wKEimGwVpnJsbPzu7w==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.6.tgz",
+      "integrity": "sha512-TvtPnfVr+HtyGiDmPK4VWmlNm7QhNNAcK5Q9A7aOXsI8545yCyaoMaicXrFZ72JzeYjaUVk7yT243zT0jzjFKQ==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.2.6.tgz",
+      "integrity": "sha512-iOo0VEay2XFhaCcH0sps5XIimkSuOnNaZrf6+ZkoSOQBJPKNU48RkmJv0/lSpipexu5P+ouFgafe5IGr/DiQfg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.6.tgz",
+      "integrity": "sha512-y5NTmmasMS455JlOCO4ZM9krIchv3Mvm1crL1iUPGOPgEzSkves9n0SdC5Sjz6+qWDFhd8/JpfWMH8NSWNHe+A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.6.tgz",
+      "integrity": "sha512-np8iZSLfXlAD4kWhiyq/u0Yt8oZDtRQ8lGhQaCXo2rl37KNjeU0GjJuwr4P3oeZ++ROfofsKNBqR5LTO8aXyWQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
+      "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@rollup/plugin-alias": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-6.0.0.tgz",
+      "integrity": "sha512-tPCzJOtS7uuVZd+xPhoy5W4vThe6KWXNmsFCNktaAh5RTqcLiSfT4huPQIXkgJ6YCOjJHvecOAzQxLFhPxKr+g==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "rollup": ">=4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-commonjs": {
+      "version": "29.0.3",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-29.0.3.tgz",
+      "integrity": "sha512-ZaOxZceP7SOUW7Lqw5IRVweSQYWaeIPnXIGLiB690EBA3FGJTO40EEr2L5yZplJWsgTCogILRSpcAe7+U0Otdg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.1",
+        "commondir": "^1.0.1",
+        "estree-walker": "^2.0.2",
+        "fdir": "^6.2.0",
+        "is-reference": "1.2.1",
+        "magic-string": "^0.30.3",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=16.0.0 || 14 >= 14.17"
+      },
+      "peerDependencies": {
+        "rollup": "^2.68.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-inject": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-inject/-/plugin-inject-5.0.5.tgz",
+      "integrity": "sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.1",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-json": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-6.1.0.tgz",
+      "integrity": "sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-node-resolve": {
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-16.0.3.tgz",
+      "integrity": "sha512-lUYM3UBGuM93CnMPG1YocWu7X802BrNF3jW2zny5gQyLQgRFJhV1Sq0Zi74+dh/6NBx1DxFC4b4GXg9wUCG5Qg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.1",
+        "@types/resolve": "1.20.2",
+        "deepmerge": "^4.2.2",
+        "is-module": "^1.0.0",
+        "resolve": "^1.22.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.78.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-replace": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-6.0.3.tgz",
+      "integrity": "sha512-J4RZarRvQAm5IF0/LwUUg+obsm+xZhYnbMXmXROyoSE1ATJe3oXSb9L5MMppdxP2ylNSjv6zFBwKYjcKMucVfA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.1",
+        "magic-string": "^0.30.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-terser": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-terser/-/plugin-terser-1.0.0.tgz",
+      "integrity": "sha512-FnCxhTBx6bMOYQrar6C8h3scPt8/JwIzw3+AJ2K++6guogH5fYaIFia+zZuhqv0eo1RN7W1Pz630SyvLbDjhtQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "serialize-javascript": "^7.0.3",
+        "smob": "^1.0.0",
+        "terser": "^5.17.4"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.4.0.tgz",
+      "integrity": "sha512-MfPp06CjRLfXQ3wY0R8vJDYBy/MvVcc9OulEfR0B8Iv9ko+GCNaRZ+EpJYFl27LhKsZK0o420sYCRHCjfCgeUg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.63.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.63.1.tgz",
+      "integrity": "sha512-UZ8sUxPTiHWYX9QNdJedb1kDZSpS1t/VPWBWGSgqHNi9w3Cu6IXvu2mzbhiTiPvtrqgTQJ+zqiAq2iPIPilpaQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.63.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.63.1.tgz",
+      "integrity": "sha512-cQ4nFQABN5cDvDpbvJ7bMStCpnaVxynZrRMfUJYgxcIk9Sh54FIO1vtfkg0B69REjER77ioZ/ov+eAApx/KmLQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.63.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.63.1.tgz",
+      "integrity": "sha512-FQNqd1lRy/0QhDk3xeRIkSBiCpXCiDnZO3YLVdcDKN1UBiKToNftCzcXYNLshmPDUMlu2TdeS8tGcsU6f3YF1Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.63.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.63.1.tgz",
+      "integrity": "sha512-pvD16V939D3CloK0+qikpGaxiPrDUXTe7Y5cWOMkMSy7m1cawa8EGy/kXYi/G/cKAC4HDAbSnzCIk1WmsoOKXg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.63.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.63.1.tgz",
+      "integrity": "sha512-pcFGeL2345VwdTnJhA6zLbew+YgWB0qBG2+dMtXjCicf6+rm6kO6cOoh5VnTe0ZMrMRgRyuHmCJxZWrIdzYuOw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.63.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.63.1.tgz",
+      "integrity": "sha512-mRJlqSRulVzcKq/LKA6ICSIc3K/l4fzlVn/gePn2nXIHy8seRi5z/eeRE0d/XMBxcMldiXtQTSpRj0tkkC3g8Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.63.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.63.1.tgz",
+      "integrity": "sha512-YDUNvVM85TI3g/1OpnqKP1h4NeW/j64DfWMf+G3M809xNk1bJSnpFp4sh83NpmVE5DXnkh8ULor4LTVZKoYLHw==",
+      "cpu": [
+        "arm"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.63.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.63.1.tgz",
+      "integrity": "sha512-7Mcn71p9ZuQFAj+h+dhQXy/yeLePRS2yKRnmW1DijA9thKO5qap0GNOIQK4yQ6iP3SU0Mrb/yWo8h8vgRba8lw==",
+      "cpu": [
+        "arm"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.63.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.63.1.tgz",
+      "integrity": "sha512-4YiLQTX6U4CSl0L9cluep9A9W6UmTfqBDc2/CH6wlu54pl4E7Jn3cOD8oxzvBDEGk/JMKgJ47C8g+radF7mwvg==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.63.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.63.1.tgz",
+      "integrity": "sha512-2ra8F7w8OquwZN9z2/fKFnli69wa8PLwaVzRMIPGb13ByMJwC28Fbp8YcVGoUhlYMTt7j5j9bNgpysrN2UM+vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.63.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.63.1.tgz",
+      "integrity": "sha512-Sy20ncyhjmBP0Ml+UvQbimjlk6VFgjW5uNP+qqwHB00mTE8Bl2C1TuHTlRwK2YoXeZbee5lP2XevBWVkAQAtSQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.63.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.63.1.tgz",
+      "integrity": "sha512-noITLp8oNjYliPnGWmLyelIHwULGqbHloQHGw1rtxbWhTuWooRpnZarZQJ1y9EUC4szuCusCc+HEpUtxpIwYvA==",
+      "cpu": [
+        "loong64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.63.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.63.1.tgz",
+      "integrity": "sha512-hlxxXd+F1mWiAcaFR7Sv9ZQT6m6UfI8+Vy/kFJzztq2pDMU/0wZ9sish0iszNZvsQDo8Gc0i5yuFEOz5dDf6fA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.63.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.63.1.tgz",
+      "integrity": "sha512-EF7OpqQTQ/BvGqLzUi4rEHuagCV9MugAUXSHemwPW5vxZ75RR+jxO/2j95Ph2dalMpFHSVECjRoioHZgA9zOYA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.63.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.63.1.tgz",
+      "integrity": "sha512-wQO3JesW9PRkwlabQ27y7sPfVOOTLRG73I4F2UYHG5PXun3J9U3y+b7ezVKSYbsvSKGQ1k1cq8Qlun4C9kLt3w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.63.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.63.1.tgz",
+      "integrity": "sha512-ouAGwhO6wHRXdnOVCOsB0tRFkA7nhNB2Nwax6oECXN0YiN8EYUTBAOudADOB1PI+yDL61TeNx/u7MVCzksNbkQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.63.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.63.1.tgz",
+      "integrity": "sha512-q2R38Sn+1J8RxhfJ+T54wSWmyKXWec+9jgDfqO2AtArEqHO5R2aeayp5H5OYLr5UYDVGsVaZPEFUooMhYCdz5A==",
+      "cpu": [
+        "s390x"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.63.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.63.1.tgz",
+      "integrity": "sha512-gfI5T24WLLuFfSKw7Go/zDXjAAV0fny0swTaDv+WjK7vqcw4cRhFfdsyKL1n+ukI+ooBxn3bVQnyrn06WpI50w==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.63.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.63.1.tgz",
+      "integrity": "sha512-4h6XqthmB4Hspji84wvgk+ElodTsGj+dbZqHJHHtKxj4mYq0ANSEEPX9ys3moJueqsRjwpaJYH7874Itwnj2ow==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.63.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.63.1.tgz",
+      "integrity": "sha512-dlfCOa87o1VAYegLQ9EKilx2JCeRofiyPGhTCmqnuXZ6bMPiycO1rq1+sKoulAp7pGLIsTIw+1x5R+zgh5LhhA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.63.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.63.1.tgz",
+      "integrity": "sha512-cjkLbOlfcm3QGhMM1J5zaZjsw1GggbN6rw9UTSSRrPrR1KkcXnN7Uq9rPw34xImQ9VOY9GN+6u2Zj80B9ptkcw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.63.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.63.1.tgz",
+      "integrity": "sha512-Li1KdUnWGE4N3e1F/B4RTB1ms+nG4WBgjByO46pkeBVX/2UBsY53xf5vK9WygVmnH3RwncIST7lkSdLSY6P9lg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.63.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.63.1.tgz",
+      "integrity": "sha512-t4ZYOSoLTgwhuFMrmTMLx/+i1DQVK7HYqMc6kY46EApwi8X0nIVphzdNoThU3xt6n+N5urG1/gxBdCaKDLavfg==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.63.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.63.1.tgz",
+      "integrity": "sha512-RgroPfMmKlD1RzSDxvwgcPiy2HNQKoYV7OmwIXDsk73uKW5t6B/V8KIy27SMv/FNXFo/oSBtWc9J0X7t91ezZg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.63.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.63.1.tgz",
+      "integrity": "sha512-at8QVep6S3h5Y6gSbdGU06bRY5WJkf6WUduM9YtvYMbYhB1MOFfUgc6kehitQXzOtMSaT70q7f9ydPhpqu821w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@simple-git/args-pathspec": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@simple-git/args-pathspec/-/args-pathspec-1.0.3.tgz",
+      "integrity": "sha512-ngJMaHlsWDTfjyq9F3VIQ8b7NXbBLq5j9i5bJ6XLYtD6qlDXT7fdKY2KscWWUF8t18xx052Y/PUO1K1TRc9yKA==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@simple-git/argv-parser": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@simple-git/argv-parser/-/argv-parser-1.1.1.tgz",
+      "integrity": "sha512-Q9lBcfQ+VQCpQqGJFHe5yooOS5hGdLFFbJ5R+R5aDsnkPCahtn1hSkMcORX65J2Z5lxSkD0lQorMsncuBQxYUw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@simple-git/args-pathspec": "^1.0.3"
+      }
+    },
+    "node_modules/@sindresorhus/is": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-7.2.0.tgz",
+      "integrity": "sha512-P1Cz1dWaFfR4IR+U13mqqiGsLFf1KbayybWwdd2vfctdV6hDpUkgCY0nKOLLTMSoRd/jJNjtbqzf13K8DCCXQw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/is?sponsor=1"
+      }
+    },
+    "node_modules/@sindresorhus/merge-streams": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-4.0.0.tgz",
+      "integrity": "sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@speed-highlight/core": {
+      "version": "1.2.24",
+      "resolved": "https://registry.npmjs.org/@speed-highlight/core/-/core-1.2.24.tgz",
+      "integrity": "sha512-qeW2e1l78afw8VhRPfPQ1Gjj+KU5XFQ/OFV5ti6eTa9bruO7mJyZtA4vw0ofqmA3tKCkROE9xLk3VZoeRc98nw==",
+      "license": "CC0-1.0",
+      "peer": true
+    },
+    "node_modules/@storybook/addon-actions": {
+      "version": "8.6.14",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.6.14.tgz",
+      "integrity": "sha512-mDQxylxGGCQSK7tJPkD144J8jWh9IU9ziJMHfB84PKpI/V5ZgqMDnpr2bssTrUaGDqU5e1/z8KcRF+Melhs9pQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/global": "^5.0.0",
+        "@types/uuid": "^9.0.1",
+        "dequal": "^2.0.2",
+        "polished": "^4.2.2",
+        "uuid": "^9.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.6.14"
+      }
+    },
+    "node_modules/@storybook/addon-backgrounds": {
+      "version": "8.6.14",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-8.6.14.tgz",
+      "integrity": "sha512-l9xS8qWe5n4tvMwth09QxH2PmJbCctEvBAc1tjjRasAfrd69f7/uFK4WhwJAstzBTNgTc8VXI4w8ZR97i1sFbg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/global": "^5.0.0",
+        "memoizerific": "^1.11.3",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.6.14"
+      }
+    },
+    "node_modules/@storybook/addon-controls": {
+      "version": "8.6.14",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-8.6.14.tgz",
+      "integrity": "sha512-IiQpkNJdiRyA4Mq9mzjZlvQugL/aE7hNgVxBBGPiIZG6wb6Ht9hNnBYpap5ZXXFKV9p2qVI0FZK445ONmAa+Cw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/global": "^5.0.0",
+        "dequal": "^2.0.2",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.6.14"
+      }
+    },
+    "node_modules/@storybook/addon-docs": {
+      "version": "8.6.14",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-8.6.14.tgz",
+      "integrity": "sha512-Obpd0OhAF99JyU5pp5ci17YmpcQtMNgqW2pTXV8jAiiipWpwO++hNDeQmLmlSXB399XjtRDOcDVkoc7rc6JzdQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@mdx-js/react": "^3.0.0",
+        "@storybook/blocks": "8.6.14",
+        "@storybook/csf-plugin": "8.6.14",
+        "@storybook/react-dom-shim": "8.6.14",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.6.14"
+      }
+    },
+    "node_modules/@storybook/addon-essentials": {
+      "version": "8.6.14",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-8.6.14.tgz",
+      "integrity": "sha512-5ZZSHNaW9mXMOFkoPyc3QkoNGdJHETZydI62/OASR0lmPlJ1065TNigEo5dJddmZNn0/3bkE8eKMAzLnO5eIdA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/addon-actions": "8.6.14",
+        "@storybook/addon-backgrounds": "8.6.14",
+        "@storybook/addon-controls": "8.6.14",
+        "@storybook/addon-docs": "8.6.14",
+        "@storybook/addon-highlight": "8.6.14",
+        "@storybook/addon-measure": "8.6.14",
+        "@storybook/addon-outline": "8.6.14",
+        "@storybook/addon-toolbars": "8.6.14",
+        "@storybook/addon-viewport": "8.6.14",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.6.14"
+      }
+    },
+    "node_modules/@storybook/addon-highlight": {
+      "version": "8.6.14",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-8.6.14.tgz",
+      "integrity": "sha512-4H19OJlapkofiE9tM6K/vsepf4ir9jMm9T+zw5L85blJZxhKZIbJ6FO0TCG9PDc4iPt3L6+aq5B0X29s9zicNQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/global": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.6.14"
+      }
+    },
+    "node_modules/@storybook/addon-measure": {
+      "version": "8.6.14",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-8.6.14.tgz",
+      "integrity": "sha512-1Tlyb72NX8aAqm6I6OICsUuGOP6hgnXcuFlXucyhKomPa6j3Eu2vKu561t/f0oGtAK2nO93Z70kVaEh5X+vaGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/global": "^5.0.0",
+        "tiny-invariant": "^1.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.6.14"
+      }
+    },
+    "node_modules/@storybook/addon-outline": {
+      "version": "8.6.14",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-8.6.14.tgz",
+      "integrity": "sha512-CW857JvN6OxGWElqjlzJO2S69DHf+xO3WsEfT5mT3ZtIjmsvRDukdWfDU9bIYUFyA2lFvYjncBGjbK+I91XR7w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/global": "^5.0.0",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.6.14"
+      }
+    },
+    "node_modules/@storybook/addon-toolbars": {
+      "version": "8.6.14",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.6.14.tgz",
+      "integrity": "sha512-W/wEXT8h3VyZTVfWK/84BAcjAxTdtRiAkT2KAN0nbSHxxB5KEM1MjKpKu2upyzzMa3EywITqbfy4dP6lpkVTwQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.6.14"
+      }
+    },
+    "node_modules/@storybook/addon-viewport": {
+      "version": "8.6.14",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-8.6.14.tgz",
+      "integrity": "sha512-gNzVQbMqRC+/4uQTPI2ZrWuRHGquTMZpdgB9DrD88VTEjNudP+J6r8myLfr2VvGksBbUMHkGHMXHuIhrBEnXYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "memoizerific": "^1.11.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.6.14"
+      }
+    },
+    "node_modules/@storybook/blocks": {
+      "version": "8.6.14",
+      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-8.6.14.tgz",
+      "integrity": "sha512-rBMHAfA39AGHgkrDze4RmsnQTMw1ND5fGWobr9pDcJdnDKWQWNRD7Nrlxj0gFlN3n4D9lEZhWGdFrCbku7FVAQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/icons": "^1.2.12",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "storybook": "^8.6.14"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/builder-vite": {
+      "version": "8.6.18",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-8.6.18.tgz",
+      "integrity": "sha512-XLqnOv4C36jlTd4uC8xpWBxv+7GV4/05zWJ0wAcU4qflorropUTirt4UQPGkwIzi+BVAhs9pJj+m4k0IWJtpHg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/csf-plugin": "8.6.18",
+        "browser-assert": "^1.2.1",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.6.18",
+        "vite": "^4.0.0 || ^5.0.0 || ^6.0.0"
+      }
+    },
+    "node_modules/@storybook/builder-vite/node_modules/@storybook/csf-plugin": {
+      "version": "8.6.18",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-8.6.18.tgz",
+      "integrity": "sha512-x1ioz/L0CwaelCkHci3P31YtvwayN3FBftvwQOPbvRh9qeb4Cpz5IdVDmyvSxxYwXN66uAORNoqgjTi7B4/y5Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "unplugin": "^1.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.6.18"
+      }
+    },
+    "node_modules/@storybook/components": {
+      "version": "8.6.18",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-8.6.18.tgz",
+      "integrity": "sha512-55yViiZzPS/cPBuOeW4QGxGqrusjXVyxuknmbYCIwDtFyyvI/CgbjXRHdxNBaIjz+IlftxvBmmSaOqFG5+/dkA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
+      }
+    },
+    "node_modules/@storybook/core": {
+      "version": "8.6.18",
+      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.6.18.tgz",
+      "integrity": "sha512-dRBP2TnX6fGdS0T2mXBHjkS/3Nlu1ra1huovZVFuM67CYMzrhM/3hX/zru1vWSC5rqY93ZaAhjMciPW4pK5mMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/theming": "8.6.18",
+        "better-opn": "^3.0.2",
+        "browser-assert": "^1.2.1",
+        "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0",
+        "esbuild-register": "^3.5.0",
+        "jsdoc-type-pratt-parser": "^4.0.0",
+        "process": "^0.11.10",
+        "recast": "^0.23.5",
+        "semver": "^7.6.2",
+        "util": "^0.12.5",
+        "ws": "^8.2.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "prettier": "^2 || ^3"
+      },
+      "peerDependenciesMeta": {
+        "prettier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+      "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@esbuild/android-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+      "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@esbuild/android-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+      "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@esbuild/android-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+      "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+      "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+      "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+      "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@esbuild/linux-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+      "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+      "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+      "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+      "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+      "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+      "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+      "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+      "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@esbuild/linux-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+      "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+      "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+      "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+      "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+      "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@esbuild/win32-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+      "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/esbuild": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
+      "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.12",
+        "@esbuild/android-arm": "0.25.12",
+        "@esbuild/android-arm64": "0.25.12",
+        "@esbuild/android-x64": "0.25.12",
+        "@esbuild/darwin-arm64": "0.25.12",
+        "@esbuild/darwin-x64": "0.25.12",
+        "@esbuild/freebsd-arm64": "0.25.12",
+        "@esbuild/freebsd-x64": "0.25.12",
+        "@esbuild/linux-arm": "0.25.12",
+        "@esbuild/linux-arm64": "0.25.12",
+        "@esbuild/linux-ia32": "0.25.12",
+        "@esbuild/linux-loong64": "0.25.12",
+        "@esbuild/linux-mips64el": "0.25.12",
+        "@esbuild/linux-ppc64": "0.25.12",
+        "@esbuild/linux-riscv64": "0.25.12",
+        "@esbuild/linux-s390x": "0.25.12",
+        "@esbuild/linux-x64": "0.25.12",
+        "@esbuild/netbsd-arm64": "0.25.12",
+        "@esbuild/netbsd-x64": "0.25.12",
+        "@esbuild/openbsd-arm64": "0.25.12",
+        "@esbuild/openbsd-x64": "0.25.12",
+        "@esbuild/openharmony-arm64": "0.25.12",
+        "@esbuild/sunos-x64": "0.25.12",
+        "@esbuild/win32-arm64": "0.25.12",
+        "@esbuild/win32-ia32": "0.25.12",
+        "@esbuild/win32-x64": "0.25.12"
+      }
+    },
+    "node_modules/@storybook/csf-plugin": {
+      "version": "8.6.14",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-8.6.14.tgz",
+      "integrity": "sha512-dErtc9teAuN+eelN8FojzFE635xlq9cNGGGEu0WEmMUQ4iJ8pingvBO1N8X3scz4Ry7KnxX++NNf3J3gpxS8qQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "unplugin": "^1.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.6.14"
+      }
+    },
+    "node_modules/@storybook/global": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@storybook/global/-/global-5.0.0.tgz",
+      "integrity": "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@storybook/icons": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-1.6.0.tgz",
+      "integrity": "sha512-hcFZIjW8yQz8O8//2WTIXylm5Xsgc+lW9ISLgUk1xGmptIJQRdlhVIXCpSyLrQaaRiyhQRaVg7l3BD9S216BHw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta"
+      }
+    },
+    "node_modules/@storybook/manager-api": {
+      "version": "8.6.18",
+      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.6.18.tgz",
+      "integrity": "sha512-BjIp12gEMgzFkEsgKpDIbZdnSWTZpm2dlws8WiPJCpgJtG+HWSxZ0/Ms30Au9yfwzQEKRSbV/5zpsKMGc2SIJw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
+      }
+    },
+    "node_modules/@storybook/preview-api": {
+      "version": "8.6.18",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.6.18.tgz",
+      "integrity": "sha512-joXRXh3GdVvzhbfIgmix1xs90p8Q/nja7AhEAC2egn5Pl7SKsIYZUCYI6UdrQANb2myg9P552LKXfPect8llKg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
+      }
+    },
+    "node_modules/@storybook/react-dom-shim": {
+      "version": "8.6.14",
+      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-8.6.14.tgz",
+      "integrity": "sha512-0hixr3dOy3f3M+HBofp3jtMQMS+sqzjKNgl7Arfuj3fvjmyXOks/yGjDImySR4imPtEllvPZfhiQNlejheaInw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+        "storybook": "^8.6.14"
+      }
+    },
+    "node_modules/@storybook/theming": {
+      "version": "8.6.18",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.6.18.tgz",
+      "integrity": "sha512-n6OEjEtHupa2PdTwWzRepr7cO8NkDd4rgF6BKLitRbujOspLxzMBEqdphs+QLcuiCIgf33SqmEA64QWnbSMhPw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
+      }
+    },
+    "node_modules/@storybook/vue3": {
+      "version": "8.6.18",
+      "resolved": "https://registry.npmjs.org/@storybook/vue3/-/vue3-8.6.18.tgz",
+      "integrity": "sha512-FY6XkM3hW0aHxtrMEUBhlaBrIrS1Ler68mb/oZM2PQ9NqY2Mm9x3B3fZuQgFVzzEi4Vc/XXuYNVuC8+B5S0LhQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/components": "8.6.18",
+        "@storybook/global": "^5.0.0",
+        "@storybook/manager-api": "8.6.18",
+        "@storybook/preview-api": "8.6.18",
+        "@storybook/theming": "8.6.18",
+        "@vue/compiler-core": "^3.0.0",
+        "ts-dedent": "^2.0.0",
+        "type-fest": "~2.19",
+        "vue-component-type-helpers": "latest"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.6.18",
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@storybook/vue3-vite": {
+      "version": "8.6.18",
+      "resolved": "https://registry.npmjs.org/@storybook/vue3-vite/-/vue3-vite-8.6.18.tgz",
+      "integrity": "sha512-iqRzIEmOOSI4+sAWAJb75FrKcFCAip4ykgwlAdU/SRTI//Cywpj0gN33TUaOBqP+vbqgtz/CJdDS2eozFIipeg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/builder-vite": "8.6.18",
+        "@storybook/vue3": "8.6.18",
+        "find-package-json": "^1.2.0",
+        "magic-string": "^0.30.0",
+        "typescript": "^5.7.3",
+        "vue-component-meta": "^2.0.0",
+        "vue-docgen-api": "^4.75.1"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.6.18",
+        "vite": "^4.0.0 || ^5.0.0 || ^6.0.0"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/markdown-it": {
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.2.0.tgz",
+      "integrity": "sha512-NoQ2yGlLWj4wpxMs+TYmRKk3thDrQ97agr7sFqfLsAlvoS8SNQuTrlObhFqG9iugdTtgOE9jpJ6FNM4ZGsa5xQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/linkify-it": "^5",
+        "@types/mdurl": "^2"
+      }
+    },
+    "node_modules/@types/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/mdx": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.14.tgz",
+      "integrity": "sha512-T48PeuJtvLosNTPVhfnIp3i/n3a4g4Bad7YCq5k64D4u7NwDrAotikQ+5+sjtUvBmxCMlbo3dVL+C2dP0rWHzg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "26.4.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-26.4.0.tgz",
+      "integrity": "sha512-faiGnoIrLH/V8cibOMEAZ8pMw6oXqSukl29ra4mN8GdaB2ZewzeaLj+INpV5N+Z1eKWzY+IzaIZH2EIR6YZRNQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "undici-types": "~8.3.0"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.18",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.18.tgz",
+      "integrity": "sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/resolve": {
+      "version": "1.20.2",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
+      "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@types/sinonjs__fake-timers": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz",
+      "integrity": "sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/sizzle": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.10.tgz",
+      "integrity": "sha512-TC0dmN0K8YcWEAEfiPi5gJP14eJe30TTGjkvek3iM/1NdHHsdCA/Td6GvNndMOo/iSnIsZ4HuuhrYPDAmbxzww==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/uuid": {
+      "version": "9.0.8",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
+      "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/yauzl": {
+      "version": "2.10.3",
+      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
+      "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@unhead/vue": {
+      "version": "2.1.17",
+      "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-2.1.17.tgz",
+      "integrity": "sha512-pnC8x9HLV3qQXdvWfylUEU25uhfCAy3ly9nmpQz84j9py818DRfU8jOsQ5wjdWtxyU1vX/fW2udfm4jtxUK8Bg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "hookable": "^6.0.1",
+        "unhead": "2.1.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      },
+      "peerDependencies": {
+        "vue": ">=3.5.18"
+      }
+    },
+    "node_modules/@unhead/vue/node_modules/hookable": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/hookable/-/hookable-6.1.1.tgz",
+      "integrity": "sha512-U9LYDy1CwhMCnprUfeAZWZGByVbhd54hwepegYTK7Pi5NvqEj63ifz5z+xukznehT7i6NIZRu89Ay1AZmRsLEQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@vercel/nft": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@vercel/nft/-/nft-1.11.0.tgz",
+      "integrity": "sha512-m1QFg+U+3yPOnP1xSYJ73UIRxLOXdts1JOhiOiyPYqEsALgrXFFINvgUaD6R6iNvaBFAjHllBCbkfx4FuOdpaA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@mapbox/node-pre-gyp": "^2.0.0",
+        "@rollup/pluginutils": "^5.1.3",
+        "acorn": "^8.6.0",
+        "acorn-import-attributes": "^1.9.5",
+        "async-sema": "^3.1.1",
+        "bindings": "^1.4.0",
+        "estree-walker": "2.0.2",
+        "glob": "^13.0.0",
+        "graceful-fs": "^4.2.9",
+        "node-gyp-build": "^4.2.2",
+        "picomatch": "^4.0.4",
+        "resolve-from": "^5.0.0"
+      },
+      "bin": {
+        "nft": "out/cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
+      "integrity": "sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@vitejs/plugin-vue-jsx": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-5.1.6.tgz",
+      "integrity": "sha512-YXvi4as2clxt6DFw5+a0tTA97ntiQXm/raR8ofNj3aNwwdlVGTiG2gp7EvfZW17P50acL/9bP0ccF4XnqNmlgA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/core": "^7.29.0",
+        "@babel/plugin-syntax-typescript": "^7.29.7",
+        "@babel/plugin-transform-typescript": "^7.29.7",
+        "@rolldown/pluginutils": "^1.0.1",
+        "@vue/babel-plugin-jsx": "^2.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@volar/language-core": {
+      "version": "2.4.28",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.28.tgz",
+      "integrity": "sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@volar/source-map": "2.4.28"
+      }
+    },
+    "node_modules/@volar/source-map": {
+      "version": "2.4.28",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.28.tgz",
+      "integrity": "sha512-yX2BDBqJkRXfKw8my8VarTyjv48QwxdJtvRgUpNE5erCsgEUdI2DsLbpa+rOQVAJYshY99szEcRDmyHbF10ggQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@volar/typescript": {
+      "version": "2.4.15",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.15.tgz",
+      "integrity": "sha512-2aZ8i0cqPGjXb4BhkMsPYDkkuc2ZQ6yOpqwAuNwUoncELqoy5fRgOQtLR9gB0g902iS0NAkvpIzs27geVyVdPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "2.4.15",
+        "path-browserify": "^1.0.1",
+        "vscode-uri": "^3.0.8"
+      }
+    },
+    "node_modules/@volar/typescript/node_modules/@volar/language-core": {
+      "version": "2.4.15",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.15.tgz",
+      "integrity": "sha512-3VHw+QZU0ZG9IuQmzT68IyN4hZNd9GchGPhbD9+pa8CVv7rnoOZwo7T8weIbrRmihqy3ATpdfXFnqRrfPVK6CA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/source-map": "2.4.15"
+      }
+    },
+    "node_modules/@volar/typescript/node_modules/@volar/source-map": {
+      "version": "2.4.15",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.15.tgz",
+      "integrity": "sha512-CPbMWlUN6hVZJYGcU/GSoHu4EnCHiLaXI9n8c9la6RaI9W5JHX+NqG+GSQcB0JdC2FIBLdZJwGsfKyBB71VlTg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@vue-macros/common": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-3.1.4.tgz",
+      "integrity": "sha512-/5Fv+6DgIcM9ajY05ZmKBv+LMX1M9A0X+IUwDRVdt67ciw8OV9bvG2r34p3RiEadlsQybjhKPRKNXDC8Bp23cw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-sfc": "^3.5.22",
+        "ast-kit": "^2.1.2",
+        "local-pkg": "^1.1.2",
+        "magic-string-ast": "^1.0.2",
+        "unplugin-utils": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/vue-macros"
+      },
+      "peerDependencies": {
+        "vue": "^2.7.0 || ^3.2.25"
+      },
+      "peerDependenciesMeta": {
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/babel-helper-vue-transform-on": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-2.0.1.tgz",
+      "integrity": "sha512-uZ66EaFbnnZSYqYEyplWvn46GhZ1KuYSThdT68p+am7MgBNbQ3hphTL9L+xSIsWkdktwhPYLwPgVWqo96jDdRA==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@vue/babel-plugin-jsx": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-jsx/-/babel-plugin-jsx-2.0.1.tgz",
+      "integrity": "sha512-a8CaLQjD/s4PVdhrLD/zT574ZNPnZBOY+IhdtKWRB4HRZ0I2tXBi5ne7d9eCfaYwp5gU5+4KIyFTV1W1YL9xZA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/plugin-syntax-jsx": "^7.27.1",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.4",
+        "@babel/types": "^7.28.4",
+        "@vue/babel-helper-vue-transform-on": "2.0.1",
+        "@vue/babel-plugin-resolve-type": "2.0.1",
+        "@vue/shared": "^3.5.22"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/babel-plugin-resolve-type": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-resolve-type/-/babel-plugin-resolve-type-2.0.1.tgz",
+      "integrity": "sha512-ybwgIuRGRRBhOU37GImDoWQoz+TlSqap65qVI6iwg/J7FfLTLmMf97TS7xQH9I7Qtr/gp161kYVdhr1ZMraSYQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/parser": "^7.28.4",
+        "@vue/compiler-sfc": "^3.5.22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.42.tgz",
+      "integrity": "sha512-2Ye1ilMtKXxl8qZUrQ5j0CdgenFp/HFQmta6rfRyfEsTG69L6Wk+tWuNoHYHMx9E8tF2Slvdg1FuwDvAXdy1LQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.8",
+        "@vue/shared": "3.5.42",
+        "entities": "^7.0.1",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.42.tgz",
+      "integrity": "sha512-qbhQZEFmycr+ni/qyuccS4sucNN7VAbDfbkvNxWOX2VfgFm90MNs3/UhRNKoPMEIVn0F8gdlYjLPvqxHwHeQOA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.42",
+        "@vue/shared": "3.5.42"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.42.tgz",
+      "integrity": "sha512-fkCAFB4okcAANGMThboWnScp/gzWjU0ZSkVnjTIiplmMDq2uq0tIB3j+xVu4rhv5rvOgBySCysudmbMd6xRRqw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.8",
+        "@vue/compiler-core": "3.5.42",
+        "@vue/compiler-dom": "3.5.42",
+        "@vue/compiler-ssr": "3.5.42",
+        "@vue/shared": "3.5.42",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.21",
+        "postcss": "^8.5.19",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.42.tgz",
+      "integrity": "sha512-xmLk3wLkbizPAiLyomjgFFosf2ys9b5Ghb+oh/k2tnvipNz8OFrQOiTcWCzyK7MpBp9KkyGtfvgfLUivbmuGYA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.42",
+        "@vue/shared": "3.5.42"
+      }
+    },
+    "node_modules/@vue/compiler-vue2": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-vue2/-/compiler-vue2-2.7.16.tgz",
+      "integrity": "sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@vue/devtools-core": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-8.2.1.tgz",
+      "integrity": "sha512-s/VfAY9oDTb/kFEWmy461jaFde2MIV1RO/gi1vwM+PAZBZ/Pc2Ndu3BNBdZUze8QDUuyYvElbEEGA83syjJfzA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/devtools-kit": "^8.2.1",
+        "@vue/devtools-shared": "^8.2.1"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@vue/devtools-kit": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-8.2.1.tgz",
+      "integrity": "sha512-FIGIuq3AWReEpbAHY/cRGeHDfI0qOb8OCQ3YjbEAX04uaxIDbGc9rhkbVcG7rnfHPXE3RsU5KrWOu9V/okd8AQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/devtools-shared": "^8.2.1",
+        "birpc": "^2.6.1",
+        "hookable": "^5.5.3",
+        "perfect-debounce": "^2.0.0"
+      }
+    },
+    "node_modules/@vue/devtools-kit/node_modules/birpc": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.9.0.tgz",
+      "integrity": "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vue/devtools-shared": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-8.2.1.tgz",
+      "integrity": "sha512-Fkac7lUdGReh6pVOi3AYPRGe82LQqRmAfThW7RRligOAP0ZA/Z1z9XLHDM9dv34pV2HRc79DK8uKPeG2fLnA/g==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@vue/language-core": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-3.3.11.tgz",
+      "integrity": "sha512-QJmpliwAVpC/OxubIByPAhNzsQPRc8/gxlN2qnVzVfIMjMDz/9RnXRFoetjz5yEgXVXyp4LqhXq3V53PjmNzFw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@volar/language-core": "2.4.28",
+        "@vue/compiler-dom": "^3.5.0",
+        "@vue/shared": "^3.5.0",
+        "alien-signals": "^3.2.1",
+        "muggle-string": "^0.4.1",
+        "path-browserify": "^1.0.1",
+        "picomatch": "^4.0.4"
+      }
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.42.tgz",
+      "integrity": "sha512-TzNNfKpb7hDxbQltwAut8VDQA5YP+BuRlxntHUuRjyKwlMvmAPbs3unhCvieijifY6vFfVBwsS7wG/C7uq+bEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.5.42"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.42.tgz",
+      "integrity": "sha512-9uACtuHs7vJGkm5Bp3xu4xRDLFTIYy5DgxpToVjqGIAhAEKwQfsaLvKINhM6nFVp6bZPRFGdDqd1g52MqKsotA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.42",
+        "@vue/shared": "3.5.42"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.42.tgz",
+      "integrity": "sha512-rsCmhiWLaRxGltLwhlCWyYkFn7WAbKRh0q17eZ1A6Dq6eqc2ACQ61IIryxz0LrsvCzHSilLA9JHovVwM8CNE2g==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.42",
+        "@vue/runtime-core": "3.5.42",
+        "@vue/shared": "3.5.42",
+        "csstype": "^3.2.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.42.tgz",
+      "integrity": "sha512-2++5dUyYS4gvo7xQXSECUDhB7TS0aOl5SeVfC5qSq1Jgfhjvegw1zqhwTIR3imZ+QYPJQw9gfcFvXGAjGZ7ajQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.42",
+        "@vue/runtime-dom": "3.5.42",
+        "@vue/shared": "3.5.42"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.42.tgz",
+      "integrity": "sha512-2rPxex1jQf4jvl9MOHl6YaXCPcrNqz/FstMOEh3QWY+/OME9nQTvl9WYeCwhW7AFjaR0SnngZGlp/wkR6rkI6g==",
+      "license": "MIT"
+    },
+    "node_modules/abbrev": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-3.0.1.tgz",
+      "integrity": "sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "event-target-shim": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=6.5"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.18.0.tgz",
+      "integrity": "sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-import-attributes": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+      "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
+      "license": "MIT",
+      "peer": true,
+      "peerDependencies": {
+        "acorn": "^8"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/aggregate-error": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
+      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "clean-stack": "^2.0.0",
+        "indent-string": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/alien-signals": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-3.2.1.tgz",
+      "integrity": "sha512-I8FjmltrfnDFoZedi5CG8DghVYNhzb/Ijluz7tCSJH0xpd0484Kowhbb1XDYOxfJpU1p5wnM2X54dA+IfGyD1g==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/ansi-colors": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
+      "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/ansi-escapes": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
+      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.21.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ansi-escapes/node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/ansis": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/ansis/-/ansis-4.3.1.tgz",
+      "integrity": "sha512-BJ8/l4R5LRE7hW9WdSuGYrLSHi2ynxeFpDFbH0K/CgNeY/tyhk+vO6TYxXC5r5CpUhNVX310xzPsN/H9lCdfOA==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/anymatch/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/arch": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz",
+      "integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/archiver": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/archiver/-/archiver-7.0.1.tgz",
+      "integrity": "sha512-ZcbTaIqJOfCc03QwD468Unz/5Ir8ATtvAHsK+FdXbDIbGfihqh9mrvdcYunQzqn4HrvWWaFyaxJhGZagaJJpPQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "archiver-utils": "^5.0.2",
+        "async": "^3.2.4",
+        "buffer-crc32": "^1.0.0",
+        "readable-stream": "^4.0.0",
+        "readdir-glob": "^1.1.2",
+        "tar-stream": "^3.0.0",
+        "zip-stream": "^6.0.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/archiver-utils": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-5.0.2.tgz",
+      "integrity": "sha512-wuLJMmIBQYCsGZgYLTy5FIB2pF6Lfb6cXMSF8Qywwk3t20zWnAi7zLcQFdKQmIB8wyZpY5ER38x08GbwtR2cLA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "glob": "^10.0.0",
+        "graceful-fs": "^4.2.0",
+        "is-stream": "^2.0.1",
+        "lazystream": "^1.0.0",
+        "lodash": "^4.17.15",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/archiver-utils/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/archiver-utils/node_modules/brace-expansion": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.4.tgz",
+      "integrity": "sha512-hGfVzPxthbf3+2yjg/RBs60cB0FhqBS/zvdV/4wn4/BmN0bNMMHPc4V/BbFieqf1TKAGGAHnY4eSjajCl0f2Xg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/archiver-utils/node_modules/glob": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
+      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/archiver-utils/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "license": "ISC",
+      "peer": true
+    },
+    "node_modules/archiver-utils/node_modules/minimatch": {
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/archiver-utils/node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "license": "BlueOak-1.0.0",
+      "peer": true,
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/asn1": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
+      "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": "~2.1.0"
+      }
+    },
+    "node_modules/assert-never": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/assert-never/-/assert-never-1.4.0.tgz",
+      "integrity": "sha512-5oJg84os6NMQNl27T9LnZkvvqzvAnHu03ShCnoj6bsJwS7L8AO4lf+C/XjK/nvzEqQB744moC6V128RucQd1jA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/assert-plus": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+      "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/ast-kit": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ast-kit/-/ast-kit-2.2.0.tgz",
+      "integrity": "sha512-m1Q/RaVOnTp9JxPX+F+Zn7IcLYMzM8kZofDImfsKZd8MbR+ikdOzTeztStWqfrqIxZnYWryyI9ePm3NGjnZgGw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.28.5",
+        "pathe": "^2.0.3"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/ast-types": {
+      "version": "0.16.3",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.3.tgz",
+      "integrity": "sha512-FvWoWYfSCM6kRxCSH+MGLHIKKGRL6A6AW7Zek2O32REPQRdg131428uRTKMBYAeRd3XXAaHDS60Wpri7CdKDrA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/ast-walker-scope": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/ast-walker-scope/-/ast-walker-scope-0.8.3.tgz",
+      "integrity": "sha512-cbdCP0PGOBq0ASG+sjnKIoYkWMKhhz+F/h9pRexUdX2Hd38+WOlBkRKlqkGOSm0YQpcFMQBJeK4WspUAkwsEdg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.28.4",
+        "ast-kit": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/astral-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
+      "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "license": "MIT"
+    },
+    "node_modules/async-sema": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/async-sema/-/async-sema-3.1.1.tgz",
+      "integrity": "sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.5.4",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.5.4.tgz",
+      "integrity": "sha512-MaU0U/za7N3r6brxD4YB/l4NSrFzLPlANv6wEuQVaIPlD3L4W9rFcQPbL/EilY9BHhHvhfcz3gInDLrEtWT4EA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "browserslist": "^4.28.6",
+        "caniuse-lite": "^1.0.30001806",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/aws-sign2": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+      "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/aws4": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.13.2.tgz",
+      "integrity": "sha512-lHe62zvbTB5eEABUVi/AwVh0ZKY9rMMDhmm+eeyuuUQbQ3+J+fONVQOZyj+DdrvD4BY33uYniyRJ4UJIaSKAfw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/b4a": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.8.1.tgz",
+      "integrity": "sha512-aiqre1Nr0B/6DgE2N5vwTc+2/oQZ4Wh1t4NznYY4E00y8LCt6NqdRv81so00oo27D8MVKTpUa/MwUUtBLXCoDw==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "peerDependencies": {
+        "react-native-b4a": "*"
+      },
+      "peerDependenciesMeta": {
+        "react-native-b4a": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/babel-walk": {
+      "version": "3.0.0-canary-5",
+      "resolved": "https://registry.npmjs.org/babel-walk/-/babel-walk-3.0.0-canary-5.tgz",
+      "integrity": "sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.9.6"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/bare-events": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.9.2.tgz",
+      "integrity": "sha512-AIPKioV7/Y/8KfZ3AAhjPJxLLbY49S64Ym5DakZlUg75qQiTgUq9hEJoEwa4eUezPUlXRy/i5NpsKvo9jgKmoA==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "peerDependencies": {
+        "bare-abort-controller": "*"
+      },
+      "peerDependenciesMeta": {
+        "bare-abort-controller": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/bare-fs": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-4.8.1.tgz",
+      "integrity": "sha512-N1nnXdHZAOSstz0XiHikGS4HGMH4CnSwhqWdGQQMqqdvp4Jybm9sE3R1WVnpWVd4SFkc8ryPDBLViNLwiEqECg==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "bare-events": "^2.5.4",
+        "bare-path": "^3.0.0",
+        "bare-stream": "^2.6.4",
+        "bare-url": "^2.2.2",
+        "fast-fifo": "^1.3.2"
+      },
+      "engines": {
+        "bare": ">=1.28.0"
+      },
+      "peerDependencies": {
+        "bare-buffer": "*"
+      },
+      "peerDependenciesMeta": {
+        "bare-buffer": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/bare-path": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-3.1.2.tgz",
+      "integrity": "sha512-ZyKbsuuqK6Ag0K8pX6V5Txq6XeJRvY+wXucnFGRjiyVYP9YWDpIQugk/b+enRYrEYBJaqLzghRQpXPMR7341Nw==",
+      "license": "Apache-2.0",
+      "peer": true
+    },
+    "node_modules/bare-stream": {
+      "version": "2.13.4",
+      "resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.13.4.tgz",
+      "integrity": "sha512-PcrQ8lVLbiJscNm1Kez+Yp4Gy4AHGcN1lzwjvf5NybWen7VvEgUfyfnXYJ2zNqWnzOfCb1Abq6lH8ti0syQszA==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "b4a": "^1.8.1",
+        "streamx": "^2.25.0",
+        "teex": "^1.0.1"
+      },
+      "peerDependencies": {
+        "bare-abort-controller": "*",
+        "bare-buffer": "*",
+        "bare-events": "*"
+      },
+      "peerDependenciesMeta": {
+        "bare-abort-controller": {
+          "optional": true
+        },
+        "bare-buffer": {
+          "optional": true
+        },
+        "bare-events": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/bare-url": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/bare-url/-/bare-url-2.5.3.tgz",
+      "integrity": "sha512-3absfEzoyFosWT8v83ZcJgbTJxv+S/sI7jBfeCMlUVatSaefRmwweqBhFpMllQv+HTxs/FbbToVOw1c05NORkQ==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "bare-path": "^3.0.0"
+      }
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.11.20",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.20.tgz",
+      "integrity": "sha512-H0ulySigv6icDJ1F7SjtdCD6PrhTpdYCmP0CactWy1+ekh0AFd0o1Wn5T8b+hnTmdBx19u9yhL6wvCylXMY7zw==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/bcrypt-pbkdf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tweetnacl": "^0.14.3"
+      }
+    },
+    "node_modules/better-opn": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/better-opn/-/better-opn-3.0.2.tgz",
+      "integrity": "sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "open": "^8.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/better-opn/node_modules/define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/better-opn/node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/better-opn/node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/better-opn/node_modules/open": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
+    "node_modules/birpc": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/birpc/-/birpc-4.2.0.tgz",
+      "integrity": "sha512-KxgKcZPfrtzJDDALHPguGpGJUrzdgpymyiQQgzFjWreHMOpWrnFNVREr5J48x2DBh8ZVioscrV1SBkDipGiX+Q==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/blob-util": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/blob-util/-/blob-util-2.0.2.tgz",
+      "integrity": "sha512-T7JQa+zsXXEa6/8ZhHcQEW1UFfVM49Ts65uBkFL6fz2QmrElqmbajIDJvuA0tEhRe5eIjpV9ZF+0RfZR9voJFQ==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/bluebird": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "license": "ISC"
+    },
+    "node_modules/brace-expansion": {
+      "version": "5.0.9",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.9.tgz",
+      "integrity": "sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browser-assert": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/browser-assert/-/browser-assert-1.2.1.tgz",
+      "integrity": "sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==",
+      "dev": true
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.8",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.8.tgz",
+      "integrity": "sha512-V2NpofLblG64mfOtSgDhOJESZEGogzDMBv/q+W6oc4LXWP/q75eOXoOaaOu1EOadB9U4Bwx/e0yzbvwKH8zalA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "baseline-browser-mapping": "^2.11.12",
+        "caniuse-lite": "^1.0.30001809",
+        "electron-to-chromium": "^1.5.402",
+        "node-releases": "^2.0.53",
+        "update-browserslist-db": "^1.3.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "node_modules/buffer-crc32": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-1.0.0.tgz",
+      "integrity": "sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/bundle-name": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-4.1.0.tgz",
+      "integrity": "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "run-applescript": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/c12": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/c12/-/c12-3.3.4.tgz",
+      "integrity": "sha512-cM0ApFQSBXuourJejzwv/AuPRvAxordTyParRVcHjjtXirtkzM0uK2L9TTn9s0cXZbG7E55jCivRQzoxYmRAlA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "chokidar": "^5.0.0",
+        "confbox": "^0.2.4",
+        "defu": "^6.1.6",
+        "dotenv": "^17.3.1",
+        "exsolve": "^1.0.8",
+        "giget": "^3.2.0",
+        "jiti": "^2.6.1",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "perfect-debounce": "^2.1.0",
+        "pkg-types": "^2.3.0",
+        "rc9": "^3.0.1"
+      },
+      "peerDependencies": {
+        "magicast": "*"
+      },
+      "peerDependenciesMeta": {
+        "magicast": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cac": {
+      "version": "6.7.14",
+      "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
+      "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cachedir": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/cachedir/-/cachedir-2.4.0.tgz",
+      "integrity": "sha512-9EtFOZR8g22CL7BWjJ9BUx1+A/djkofnyW3aOXZORNW2kxoUpx2h+uN2cOqwPmFhnpVmxg+KW2OjOSgChTEvsQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.9.tgz",
+      "integrity": "sha512-a/hy+pNsFUTR+Iz8TCJvXudKVLAnz/DyeSUo10I5yvFDQJBFU2s9uqQpoSrJlroHUKoKqzg+epxyP9lqFdzfBQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "get-intrinsic": "^1.3.0",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/caniuse-api": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
+      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "browserslist": "^4.0.0",
+        "caniuse-lite": "^1.0.0",
+        "lodash.memoize": "^4.1.2",
+        "lodash.uniq": "^4.5.0"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001810",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001810.tgz",
+      "integrity": "sha512-TITQPUkaz+aVk5GL6NhOdwk1aEaNTSDPsGFWrTuhKGtjTF70jL/Oht2W4c6rXUe5fu7Ie19VIahAXHIIiWWNeg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0",
+      "peer": true
+    },
+    "node_modules/caseless": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+      "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chalk/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/character-parser": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-2.2.0.tgz",
+      "integrity": "sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-regex": "^1.0.3"
+      }
+    },
+    "node_modules/check-more-types": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/check-more-types/-/check-more-types-2.24.0.tgz",
+      "integrity": "sha512-Pj779qHxV2tuapviy1bSZNEL1maXr13bPYpsvSDB68HlYcYuhlDrmGd63i0JHMCLKzc7rUSNIrpdJlhVlNwrxA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
+      "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/chownr": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+      "license": "BlueOak-1.0.0",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/ci-info": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
+      "integrity": "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/citty": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/citty/-/citty-0.2.2.tgz",
+      "integrity": "sha512-+6vJA3L98yv+IdfKGZHBNiGW5KHn22e/JwID0Strsz8h4S/csAu/OuICwxrg44k5MRiZHWIo8XXuJgQTriRP4w==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/clean-stack": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
+      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "restore-cursor": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cli-table3": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.5.tgz",
+      "integrity": "sha512-+W/5efTR7y5HRD7gACw9yQjqMVvEMLBHmboM/kPWam+H+Hmyrgjh6YncVKK122YZkXrLudzTuAukUw9FnMf7IQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "string-width": "^4.2.0"
+      },
+      "engines": {
+        "node": "10.* || >= 12.*"
+      },
+      "optionalDependencies": {
+        "@colors/colors": "1.5.0"
+      }
+    },
+    "node_modules/cli-truncate": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz",
+      "integrity": "sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "slice-ansi": "^3.0.0",
+        "string-width": "^4.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-9.0.1.tgz",
+      "integrity": "sha512-k7ndgKhwoQveBL+/1tqGJYNz097I7WOvwbmmU2AR5+magtbjPWQTS1C5vzGkBC8Ym8UWRzfKUzUUqFLypY4Q+w==",
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "string-width": "^7.2.0",
+        "strip-ansi": "^7.1.0",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/cliui/node_modules/ansi-regex": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.3.0.tgz",
+      "integrity": "sha512-WpDfL7NO6j7tH88IDBNVdUJxDh9nmCteAVW9dsep846XdwF4naCBK+/tGLX3KJgcpgMRXCFlTM2hKGoK9FsdrQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/cliui/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/cliui/node_modules/emoji-regex": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
+      "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/cliui/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cliui/node_modules/strip-ansi": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansi-regex": "^6.2.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz",
+      "integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/cluster-key-slot": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.1.1.tgz",
+      "integrity": "sha512-rwHwUfXL40Chm1r08yrhU3qpUvdVlgkKNeyeGPOxnW8/SyVDvgRaed/Uz54AqWNaTCAThlj6QAs3TZcKI0xDEw==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
+    "node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/commander": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+      "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/common-tags": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz",
+      "integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/compatx": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/compatx/-/compatx-0.2.0.tgz",
+      "integrity": "sha512-6gLRNt4ygsi5NyMVhceOCFv14CIdDFN7fQjX1U4+47qVE/+kjPoXMK65KWK+dWxmFzMTuKazoQ9sch6pM0p5oA==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/compress-commons": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-6.0.2.tgz",
+      "integrity": "sha512-6FqVXeETqWPoGcfzrXb37E50NP0LXT8kAMu5ooZayhWWdgEY4lBEEcbQNXtkuKQsGduxiIcI4gOTsxTmuq/bSg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "crc-32": "^1.2.0",
+        "crc32-stream": "^6.0.0",
+        "is-stream": "^2.0.1",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/confbox": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.4.tgz",
+      "integrity": "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/consola": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-3.4.2.tgz",
+      "integrity": "sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "^14.18.0 || >=16.10.0"
+      }
+    },
+    "node_modules/constantinople": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-4.0.1.tgz",
+      "integrity": "sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.6.0",
+        "@babel/types": "^7.6.1"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/cookie-es": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-2.0.1.tgz",
+      "integrity": "sha512-aVf4A4hI2w70LnF7GG+7xDQUkliwiXWXFvTjkip4+b64ygDQ2sJPRSKFDHbxn8o0xu9QzPkMuuiWIXyFSE2slA==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
+      "license": "MIT"
+    },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/crc32-stream": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-6.0.0.tgz",
+      "integrity": "sha512-piICUB6ei4IlTv1+653yq5+KoqfBYmj9bw6LqXoOneTMDXk5nM1qt12mFW1caG3LlJXEKW1Bp0WggEmIfQB34g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "crc-32": "^1.2.0",
+        "readable-stream": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/croner": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/croner/-/croner-10.0.1.tgz",
+      "integrity": "sha512-ixNtAJndqh173VQ4KodSdJEI6nuioBWI0V1ITNKhZZsO0pEMoDxz539T4FTTbSZ/xIOSuDnzxLVRqBVSvPNE2g==",
+      "funding": [
+        {
+          "type": "other",
+          "url": "https://paypal.me/hexagonpp"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/hexagon"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18.0"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/crossws": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/crossws/-/crossws-0.3.5.tgz",
+      "integrity": "sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "uncrypto": "^0.1.3"
+      }
+    },
+    "node_modules/css-declaration-sorter": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-7.4.0.tgz",
+      "integrity": "sha512-LTuzjPoyA2vMGKKcaOqKSp7Ub2eGrNfKiZH4LpezxpNrsICGCSFvsQOI29psISxNZtaXibkC2CXzrQ5enMeGGw==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.9"
+      }
+    },
+    "node_modules/css-select": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
+      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.0.1",
+        "domhandler": "^4.3.1",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
+      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/cssnano": {
+      "version": "7.1.9",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-7.1.9.tgz",
+      "integrity": "sha512-uPR75+5Dk/WJ/YSPR1/YDHdwMM9c5FsaARljfKWgeCKLKOtJ0we21xy/RcCjn53fZnD/f6yYEIZ8pu18+GnbNQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "cssnano-preset-default": "^7.0.17",
+        "lilconfig": "^3.1.3"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/cssnano"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/cssnano-preset-default": {
+      "version": "7.0.17",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-7.0.17.tgz",
+      "integrity": "sha512-11qO63A+czwguQFJCaTdICvbaxn0pJzz/XghLlv+OT7WyToDxAMR0Xb3/26/l0y0hQJywwNbj/SLSQlGBHE1OA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "browserslist": "^4.28.2",
+        "css-declaration-sorter": "^7.2.0",
+        "cssnano-utils": "^5.0.3",
+        "postcss-calc": "^10.1.1",
+        "postcss-colormin": "^7.0.10",
+        "postcss-convert-values": "^7.0.12",
+        "postcss-discard-comments": "^7.0.8",
+        "postcss-discard-duplicates": "^7.0.4",
+        "postcss-discard-empty": "^7.0.3",
+        "postcss-discard-overridden": "^7.0.3",
+        "postcss-merge-longhand": "^7.0.7",
+        "postcss-merge-rules": "^7.0.11",
+        "postcss-minify-font-values": "^7.0.3",
+        "postcss-minify-gradients": "^7.0.5",
+        "postcss-minify-params": "^7.0.9",
+        "postcss-minify-selectors": "^7.1.2",
+        "postcss-normalize-charset": "^7.0.3",
+        "postcss-normalize-display-values": "^7.0.3",
+        "postcss-normalize-positions": "^7.0.4",
+        "postcss-normalize-repeat-style": "^7.0.4",
+        "postcss-normalize-string": "^7.0.3",
+        "postcss-normalize-timing-functions": "^7.0.3",
+        "postcss-normalize-unicode": "^7.0.9",
+        "postcss-normalize-url": "^7.0.3",
+        "postcss-normalize-whitespace": "^7.0.3",
+        "postcss-ordered-values": "^7.0.4",
+        "postcss-reduce-initial": "^7.0.9",
+        "postcss-reduce-transforms": "^7.0.3",
+        "postcss-svgo": "^7.1.3",
+        "postcss-unique-selectors": "^7.0.7"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/cssnano-utils": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-5.0.3.tgz",
+      "integrity": "sha512-ynIREMICLxkxm7e9bCR9sh75s4Q5drICi0ua1yxo5jH2XPBqSKkl4dOh4EbFqtUmnTMhRffHgYL0EKKkMjtJTg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "license": "CC0-1.0",
+      "peer": true
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
+    },
+    "node_modules/cypress": {
+      "version": "13.17.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.17.0.tgz",
+      "integrity": "sha512-5xWkaPurwkIljojFidhw8lFScyxhtiFHl/i/3zov+1Z5CmY4t9tjIdvSXfu82Y3w7wt0uR9KkucbhkVvJZLQSA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "@cypress/request": "^3.0.6",
+        "@cypress/xvfb": "^1.2.4",
+        "@types/sinonjs__fake-timers": "8.1.1",
+        "@types/sizzle": "^2.3.2",
+        "arch": "^2.2.0",
+        "blob-util": "^2.0.2",
+        "bluebird": "^3.7.2",
+        "buffer": "^5.7.1",
+        "cachedir": "^2.3.0",
+        "chalk": "^4.1.0",
+        "check-more-types": "^2.24.0",
+        "ci-info": "^4.0.0",
+        "cli-cursor": "^3.1.0",
+        "cli-table3": "~0.6.1",
+        "commander": "^6.2.1",
+        "common-tags": "^1.8.0",
+        "dayjs": "^1.10.4",
+        "debug": "^4.3.4",
+        "enquirer": "^2.3.6",
+        "eventemitter2": "6.4.7",
+        "execa": "4.1.0",
+        "executable": "^4.1.1",
+        "extract-zip": "2.0.1",
+        "figures": "^3.2.0",
+        "fs-extra": "^9.1.0",
+        "getos": "^3.2.1",
+        "is-installed-globally": "~0.4.0",
+        "lazy-ass": "^1.6.0",
+        "listr2": "^3.8.3",
+        "lodash": "^4.17.21",
+        "log-symbols": "^4.0.0",
+        "minimist": "^1.2.8",
+        "ospath": "^1.2.2",
+        "pretty-bytes": "^5.6.0",
+        "process": "^0.11.10",
+        "proxy-from-env": "1.0.0",
+        "request-progress": "^3.0.0",
+        "semver": "^7.5.3",
+        "supports-color": "^8.1.1",
+        "tmp": "~0.2.3",
+        "tree-kill": "1.2.2",
+        "untildify": "^4.0.0",
+        "yauzl": "^2.10.0"
+      },
+      "bin": {
+        "cypress": "bin/cypress"
+      },
+      "engines": {
+        "node": "^16.0.0 || ^18.0.0 || >=20.0.0"
+      }
+    },
+    "node_modules/dashdash": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+      "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "assert-plus": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/dayjs": {
+      "version": "1.11.23",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.23.tgz",
+      "integrity": "sha512-QDTCU0M0MxR3hQfnlDJfwekQiaanm1ubOD231u73WBckQ/fsamwRLiE2GBz6D3a/xF1NgfiDLJjXBa1hYOYTtQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/db0": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/db0/-/db0-0.3.4.tgz",
+      "integrity": "sha512-RiXXi4WaNzPTHEOu8UPQKMooIbqOEyqA1t7Z6MsdxSCeb8iUC9ko3LcmsLmeUt2SM5bctfArZKkRQggKZz7JNw==",
+      "license": "MIT",
+      "peer": true,
+      "peerDependencies": {
+        "@electric-sql/pglite": "*",
+        "@libsql/client": "*",
+        "better-sqlite3": "*",
+        "drizzle-orm": "*",
+        "mysql2": "*",
+        "sqlite3": "*"
+      },
+      "peerDependenciesMeta": {
+        "@electric-sql/pglite": {
+          "optional": true
+        },
+        "@libsql/client": {
+          "optional": true
+        },
+        "better-sqlite3": {
+          "optional": true
+        },
+        "drizzle-orm": {
+          "optional": true
+        },
+        "mysql2": {
+          "optional": true
+        },
+        "sqlite3": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/de-indent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/default-browser": {
+      "version": "5.5.1",
+      "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.5.1.tgz",
+      "integrity": "sha512-m1pAzaJgZ/gssEqlOhJkPJp8Xly7QyW6xcrkUa2KKcDeDSEMP7X8xipU3snUcfisTQx0w1AGae+9UtJSfVnXGw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "bundle-name": "^4.1.0",
+        "default-browser-id": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/default-browser-id": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-5.0.1.tgz",
+      "integrity": "sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-lazy-prop": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
+      "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/defu": {
+      "version": "6.1.7",
+      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.7.tgz",
+      "integrity": "sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/denque": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/denque/-/denque-2.1.0.tgz",
+      "integrity": "sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/destr": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/destr/-/destr-2.0.5.tgz",
+      "integrity": "sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/devalue": {
+      "version": "5.9.2",
+      "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.9.2.tgz",
+      "integrity": "sha512-po4PAY5c53tw5XMocSnf8A/5OHhbbUftpr93aEN6BBoAdntUmK7vu7wOATqvt7cXO7m1Cl4gMVn6p7n6n4mj0w==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/diff": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-8.0.4.tgz",
+      "integrity": "sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
+    "node_modules/doctypes": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz",
+      "integrity": "sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/dom-serializer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/dom-serializer/node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/dot-prop": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-10.2.0.tgz",
+      "integrity": "sha512-BTJ9aZYL3vCfZlZOBLy9v8TUqWGQ0pzFnygKwFZt5udj6viBoFIBviKPUoZLDCPn1FoXffv6McQFDenrm5Krfw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "type-fest": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/dot-prop/node_modules/type-fest": {
+      "version": "5.9.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-5.9.0.tgz",
+      "integrity": "sha512-yANm3Jr3GiJ1qgJlxGAVxTOIcEOk1rhQHamlXtnrCK7EHP4HeM9OGxtMg/W7HFdrVzw/ZWJKGVIJusVH85sLtw==",
+      "license": "(MIT OR CC0-1.0)",
+      "peer": true,
+      "dependencies": {
+        "tagged-tag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "17.4.2",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.4.2.tgz",
+      "integrity": "sha512-nI4U3TottKAcAD9LLud4Cb7b2QztQMUEfHbvhTH09bqXTxnSie8WnjPALV/WMCrJZ6UV/qHJ6L03OqO3LcdYZw==",
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/duplexer": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/ecc-jsbn": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
+      "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.418",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.418.tgz",
+      "integrity": "sha512-UzS26r3AEbG5wSoGVpJKqwHIU9zwQN7LHdVIThDrJpS0I5KdlXFMEb8543fhc9dVnIIAST6ar8rhwa00AL5MlA==",
+      "license": "ISC",
+      "peer": true
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/end-of-stream": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.24.5",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.24.5.tgz",
+      "integrity": "sha512-L1l8TNvomm6UVW5B253AGxQagSQr+vGwhMlrrfRS2qmhx46AMpMVJKQYLvWYbysTMY8VoicOvzHzoHMbyzB+4A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/enquirer": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz",
+      "integrity": "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-colors": "^4.1.1",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/entities": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/error-stack-parser-es": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/error-stack-parser-es/-/error-stack-parser-es-1.0.5.tgz",
+      "integrity": "sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/errx": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/errx/-/errx-0.1.2.tgz",
+      "integrity": "sha512-chfpPHmCerdo/rXr/nNvPZRkV4WwDRwzwnsJ0Uzz3tVi8Z41tDctRjduYy1138ii77AFlts1qvWtX3g/Acg91Q==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-module-lexer": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.3.2.tgz",
+      "integrity": "sha512-poHGpORABojJJucnV9KbOavETW8lBVnphkW77ER5/BQ5Fz7oXSoCNek7IH3vR5nRjdsEz926ibFYX8KtLQmdyw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+      "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.2.tgz",
+      "integrity": "sha512-HKVLS8dvII+xoKW9kmqxbRKrnWEXfJJr/FZhhJmiqIB0e053QNYFqOBouTMO/k5sID4MvCiUCvv8b9M4h32wIA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.28.2",
+        "@esbuild/android-arm": "0.28.2",
+        "@esbuild/android-arm64": "0.28.2",
+        "@esbuild/android-x64": "0.28.2",
+        "@esbuild/darwin-arm64": "0.28.2",
+        "@esbuild/darwin-x64": "0.28.2",
+        "@esbuild/freebsd-arm64": "0.28.2",
+        "@esbuild/freebsd-x64": "0.28.2",
+        "@esbuild/linux-arm": "0.28.2",
+        "@esbuild/linux-arm64": "0.28.2",
+        "@esbuild/linux-ia32": "0.28.2",
+        "@esbuild/linux-loong64": "0.28.2",
+        "@esbuild/linux-mips64el": "0.28.2",
+        "@esbuild/linux-ppc64": "0.28.2",
+        "@esbuild/linux-riscv64": "0.28.2",
+        "@esbuild/linux-s390x": "0.28.2",
+        "@esbuild/linux-x64": "0.28.2",
+        "@esbuild/netbsd-arm64": "0.28.2",
+        "@esbuild/netbsd-x64": "0.28.2",
+        "@esbuild/openbsd-arm64": "0.28.2",
+        "@esbuild/openbsd-x64": "0.28.2",
+        "@esbuild/openharmony-arm64": "0.28.2",
+        "@esbuild/sunos-x64": "0.28.2",
+        "@esbuild/win32-arm64": "0.28.2",
+        "@esbuild/win32-ia32": "0.28.2",
+        "@esbuild/win32-x64": "0.28.2"
+      }
+    },
+    "node_modules/esbuild-register": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/esbuild-register/-/esbuild-register-3.6.0.tgz",
+      "integrity": "sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "peerDependencies": {
+        "esbuild": ">=0.12 <1"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/esm-resolve": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/esm-resolve/-/esm-resolve-1.0.11.tgz",
+      "integrity": "sha512-LxF0wfUQm3ldUDHkkV2MIbvvY0TgzIpJ420jHSV1Dm+IlplBEWiJTKWM61GtxUfvjV6iD4OtTYFGAGM2uuIUWg==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/eventemitter2": {
+      "version": "6.4.7",
+      "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.7.tgz",
+      "integrity": "sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
+    "node_modules/events-universal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/events-universal/-/events-universal-1.0.1.tgz",
+      "integrity": "sha512-LUd5euvbMLpwOF8m6ivPCbhQeSiYVNb8Vs0fQ8QjXo0JTkEHpz8pxdQf0gStltaPpw0Cca8b39KxvK9cfKRiAw==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "bare-events": "^2.7.0"
+      }
+    },
+    "node_modules/execa": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
+      "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "get-stream": "^5.0.0",
+        "human-signals": "^1.1.1",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.0",
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2",
+        "strip-final-newline": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/executable": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/executable/-/executable-4.1.1.tgz",
+      "integrity": "sha512-8iA79xD3uAch729dUG8xaaBBFGaEa0wdD2VkYLFHwlqosEj/jT66AzcreRDSgV7ehnNLBW2WR5jIXwGKjVdTLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/exsolve": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.1.1.tgz",
+      "integrity": "sha512-9U/jZUgjnSGyntRr6y5Muu1MJcwFl6kPu7k8qLF0IMNfLqvw0NZ4nnVDq0RVoZ0RvCyumib4Ez3KYrVfilrw+g==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/externality": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/externality/-/externality-1.0.2.tgz",
+      "integrity": "sha512-LyExtJWKxtgVzmgtEHyQtLFpw1KFhQphF9nTG8TpAIVkiI/xQ3FJh75tRFLYl4hkn7BNIIdLJInuDAavX35pMw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "enhanced-resolve": "^5.14.1",
+        "mlly": "^1.3.0",
+        "pathe": "^1.1.1",
+        "ufo": "^1.1.2"
+      }
+    },
+    "node_modules/externality/node_modules/pathe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/extract-zip": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "get-stream": "^5.1.0",
+        "yauzl": "^2.10.0"
+      },
+      "bin": {
+        "extract-zip": "cli.js"
+      },
+      "engines": {
+        "node": ">= 10.17.0"
+      },
+      "optionalDependencies": {
+        "@types/yauzl": "^2.9.1"
+      }
+    },
+    "node_modules/extsprintf": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
+      "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==",
+      "dev": true,
+      "engines": [
+        "node >=0.6.0"
+      ],
+      "license": "MIT"
+    },
+    "node_modules/fast-fifo": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz",
+      "integrity": "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-npm-meta": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/fast-npm-meta/-/fast-npm-meta-2.2.0.tgz",
+      "integrity": "sha512-99jPl8JkCSCa4VlboNU1XuL98ijm74Pm9CGo6H4BoMVoVh1uhguQcvwLgXDT8Vkl2qj/UEQ0J9gD8beHjTFk1w==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "cac": "^7.0.0"
+      },
+      "bin": {
+        "fast-npm-meta": "dist/cli.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/fast-npm-meta/node_modules/cac": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/cac/-/cac-7.0.0.tgz",
+      "integrity": "sha512-tixWYgm5ZoOD+3g6UTea91eow5z6AAHaho3g0V9CNSNb45gM8SmflpAc+GRd1InC4AqN/07Unrgp56Y94N9hJQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/fast-string-truncated-width": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/fast-string-truncated-width/-/fast-string-truncated-width-3.0.3.tgz",
+      "integrity": "sha512-0jjjIEL6+0jag3l2XWWizO64/aZVtpiGE3t0Zgqxv0DPuxiMjvB3M24fCyhZUO4KomJQPj3LTSUnDP3GpdwC0g==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/fast-string-width": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/fast-string-width/-/fast-string-width-3.0.2.tgz",
+      "integrity": "sha512-gX8LrtNEI5hq8DVUfRQMbr5lpaS4nMIWV+7XEbXk2b8kiQIizgnlr12B4dA3ZEx3308ze0O4Q1R+cHts8kyUJg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "fast-string-truncated-width": "^3.0.2"
+      }
+    },
+    "node_modules/fast-wrap-ansi": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/fast-wrap-ansi/-/fast-wrap-ansi-0.2.2.tgz",
+      "integrity": "sha512-7F2Fl+TjRSenLqlU3UjSH0iyqopqoZIu7eZVpEirP2g1GtWa2G/ecEmBdgz31+Mxr+ELclgg6sokpSFIQiZ02Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "fast-string-width": "^3.0.2"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.3.tgz",
+      "integrity": "sha512-XKv5nnLs6nLF71NgiKJLIZFLkPyIEuOselLG7ujZnGrRfQK8HpvY+WqKhAJUAdLomwVHErVS4LfxFlPq0/FTAw==",
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pend": "~1.2.0"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/figures": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
+      "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "escape-string-regexp": "^1.0.5"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-package-json": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/find-package-json/-/find-package-json-1.2.0.tgz",
+      "integrity": "sha512-+SOGcLGYDJHtyqHd87ysBhmaeQ95oWspDKnMXBrnQ9Eq4OkLNqejgoaD8xVWu6GPa0B6roa6KinCMEMcVeqONw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/find-up": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-6.3.0.tgz",
+      "integrity": "sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^7.1.0",
+        "path-exists": "^5.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/for-each": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/foreground-child/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/forever-agent": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+      "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.6.tgz",
+      "integrity": "sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.4",
+        "mime-types": "^2.1.35"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
+      "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/fuse.js": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.5.0.tgz",
+      "integrity": "sha512-sQtrEfA+ez/3G0cCZecF70oqpCRttCexYUG4mUrtWL49ULUzUyxokt5kyqwtKzj1270RaKih+hcP3qLcumccow==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/krisk"
+      }
+    },
+    "node_modules/fzf": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fzf/-/fzf-0.5.2.tgz",
+      "integrity": "sha512-Tt4kuxLXFKHy8KT40zwsUPUkg1CrsgY25FxA2U/j/0WgEDCk3ddc/zLTCCcbSHX9FcKtLuVaDGtGE/STWC+j3Q==",
+      "license": "BSD-3-Clause",
+      "peer": true
+    },
+    "node_modules/generator-function": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
+      "integrity": "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/generic-names": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/generic-names/-/generic-names-4.0.0.tgz",
+      "integrity": "sha512-ySFolZQfw9FoDb3ed9d80Cm9f0+r7qj+HJkWjeD9RBfpxEVTlVhol+gvaQB/78WbwYfbnNh8nWHHBSlg072y6A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "loader-utils": "^3.2.0"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-east-asian-width": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.6.0.tgz",
+      "integrity": "sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-port-please": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/get-port-please/-/get-port-please-3.2.0.tgz",
+      "integrity": "sha512-I9QVvBw5U/hw3RmWpYKRumUeaDgxTPd401x364rLmWBJcOQ753eov1eTgzDqRG9bqFIfDc7gfzcQEWrUri3o1A==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-stream": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/getos": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/getos/-/getos-3.2.1.tgz",
+      "integrity": "sha512-U56CfOK17OKgTVqozZjUKNdkfEv6jk5WISBJ8SHoagjE6L69zOwl3Z+O8myjY9MEW3i2HPWQBt/LTbCgcC973Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async": "^3.2.0"
+      }
+    },
+    "node_modules/getpass": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+      "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "assert-plus": "^1.0.0"
+      }
+    },
+    "node_modules/giget": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/giget/-/giget-3.3.1.tgz",
+      "integrity": "sha512-r+mvuDjrjMpsdw46Kmeydb8bdHm7wOKw8wNBtTndkjbPjgAp5oUJUxRE76wZFknxIPokfWvep2qSXK37aXE6zg==",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "giget": "dist/cli.mjs"
+      }
+    },
+    "node_modules/glob": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-13.0.6.tgz",
+      "integrity": "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==",
+      "license": "BlueOak-1.0.0",
+      "peer": true,
+      "dependencies": {
+        "minimatch": "^10.2.2",
+        "minipass": "^7.1.3",
+        "path-scurry": "^2.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/global-directory": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/global-directory/-/global-directory-4.0.1.tgz",
+      "integrity": "sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ini": "4.1.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/global-directory/node_modules/ini": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.1.tgz",
+      "integrity": "sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/global-dirs": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.1.tgz",
+      "integrity": "sha512-NBcGGFbBA9s1VzD41QXDG+3++t9Mn5t1FpLdhESY6oKY4gYTFpX4wO3sqGUa0Srjtbfj3szX0RnemmrVRUdULA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ini": "2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globby": {
+      "version": "16.2.4",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-16.2.4.tgz",
+      "integrity": "sha512-c8B/VNLmxRcmqqenRA9t+9IyOjf9+V6lTxPaUJLqOCONdQkWZ0ETYgX0qbtJqPsgCNusT9MZ5Jeidw8Eb9tn2g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@sindresorhus/merge-streams": "^4.0.0",
+        "fast-glob": "^3.3.3",
+        "ignore": "^7.0.5",
+        "is-path-inside": "^4.0.0",
+        "micromatch": "^4.0.8",
+        "slash": "^5.1.0",
+        "unicorn-magic": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globby/node_modules/is-path-inside": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-4.0.0.tgz",
+      "integrity": "sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
+    "node_modules/gzip-size": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-7.0.0.tgz",
+      "integrity": "sha512-O1Ld7Dr+nqPnmGpdhzLmMTQ4vAsD+rHwMm1NLUmoUFFymBOMKxCCrtDxqdBRYXdeEPEi3SyoR4TizJLQrnKBNA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "duplexer": "^0.1.2"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/h3": {
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/h3/-/h3-1.15.11.tgz",
+      "integrity": "sha512-L3THSe2MPeBwgIZVSH5zLdBBU90TOxarvhK9d04IDY2AmVS8j2Jz2LIWtwsGOU3lu2I5jCN7FNvVfY2+XyF+mg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "cookie-es": "^1.2.3",
+        "crossws": "^0.3.5",
+        "defu": "^6.1.6",
+        "destr": "^2.0.5",
+        "iron-webcrypto": "^1.2.1",
+        "node-mock-http": "^1.0.4",
+        "radix3": "^1.1.2",
+        "ufo": "^1.6.3",
+        "uncrypto": "^0.1.3"
+      }
+    },
+    "node_modules/h3/node_modules/cookie-es": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-1.2.3.tgz",
+      "integrity": "sha512-lXVyvUvrNXblMqzIRrxHb57UUVmqsSWlxqt3XIjCkUP0wDAf6uicO6KMbEgYrMNtEvWgWHwe42CKxPu9MYAnWw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hash-sum": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-2.0.0.tgz",
+      "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/hasown": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "he": "bin/he"
+      }
+    },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/http-shutdown": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/http-shutdown/-/http-shutdown-1.2.2.tgz",
+      "integrity": "sha512-S9wWkJ/VSY9/k4qcjG318bqJNruzE4HySUhFYknwmu6LBP97KLLfwNf+n4V1BHurvFNkSKLFnK/RsuUnRTf9Vw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "iojs": ">= 1.0.0",
+        "node": ">= 0.12.0"
+      }
+    },
+    "node_modules/http-signature": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.4.0.tgz",
+      "integrity": "sha512-G5akfn7eKbpDN+8nPS/cb57YeA1jLTVxjpCj7tmm3QKPdyDy7T+qSC40e9ptydSWvkwjSXw1VbkpyEm39ukeAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "assert-plus": "^1.0.0",
+        "jsprim": "^2.0.2",
+        "sshpk": "^1.18.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/httpxy": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/httpxy/-/httpxy-0.5.5.tgz",
+      "integrity": "sha512-uDjmnPyp1q4Sgzf3w+J/Fc6UqcCEj0x4Wjp7OqK5dGhNeDgpyrAmnS6ey8QWrX3SWDon2DMKf9sBa5X9+CVyMA==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/human-signals": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
+      "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8.12.0"
+      }
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/ignore": {
+      "version": "7.0.8",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.8.tgz",
+      "integrity": "sha512-YYNsSlXBjMk92SKnkwvB5LOVSa6OznlFUGcsvrFgNJbJCd0M1XKeFVRc8ZByeCqz32FivYNHJVooLmdqrmvp/Q==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/image-meta": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/image-meta/-/image-meta-0.2.2.tgz",
+      "integrity": "sha512-3MOLanc3sb3LNGWQl1RlQlNWURE5g32aUphrDyFeCsxBTk08iE3VNe4CwsUZ0Qs1X+EfX0+r29Sxdpza4B+yRA==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/immutable": {
+      "version": "5.1.9",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.9.tgz",
+      "integrity": "sha512-m8nVez3rwrgmWxtLMt1ZYXB2Lv7OKYn/disyxAlSDYAlKSlFoPPfIAmAM/M5xqL4m4C/wAPw7S2/CNaUii1Hxg==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/impound": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/impound/-/impound-1.2.0.tgz",
+      "integrity": "sha512-hbFh2WURN+XQ364SbblzubhEEj/B3qZCe80l/EHXPWM6/kZP2mvOllxwRBBWNxe4gLbqXZL0fxOZwoDCSlJZQw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.31",
+        "es-module-lexer": "^2.0.0",
+        "pathe": "^2.0.3",
+        "unplugin": "^3.0.0",
+        "unplugin-utils": "^0.3.1"
+      }
+    },
+    "node_modules/impound/node_modules/unplugin": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-3.3.0.tgz",
+      "integrity": "sha512-qa66K+crbfyE6JK10GjvbJeRrOsuC/JpbnHctfyp/i4oBTxWOzJfRZyDiOk1PtErMFRu8JhsU/wPvOdBNWe5Rg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "picomatch": "^4.0.4",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "@farmfe/core": "*",
+        "@rspack/core": "*",
+        "bun-types-no-globals": "*",
+        "esbuild": "*",
+        "rolldown": "*",
+        "rollup": "*",
+        "unloader": "*",
+        "vite": "*",
+        "webpack": "*"
+      },
+      "peerDependenciesMeta": {
+        "@farmfe/core": {
+          "optional": true
+        },
+        "@rspack/core": {
+          "optional": true
+        },
+        "bun-types-no-globals": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "rolldown": {
+          "optional": true
+        },
+        "rollup": {
+          "optional": true
+        },
+        "unloader": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/ini": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-2.0.0.tgz",
+      "integrity": "sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/ioredis": {
+      "version": "5.11.1",
+      "resolved": "https://registry.npmjs.org/ioredis/-/ioredis-5.11.1.tgz",
+      "integrity": "sha512-ehuGcf94bQXhfagULNXrJdfnWO38v070jxSx/qE87Kjzmu2fU7ro5EFAb+OPituLqgfyuQaym5DlrNydW2sJ9A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@ioredis/commands": "1.10.0",
+        "cluster-key-slot": "1.1.1",
+        "debug": "4.4.3",
+        "denque": "2.1.0",
+        "redis-errors": "1.2.0",
+        "redis-parser": "3.0.0",
+        "standard-as-callback": "2.1.0"
+      },
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/ioredis"
+      }
+    },
+    "node_modules/iron-webcrypto": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/iron-webcrypto/-/iron-webcrypto-1.2.1.tgz",
+      "integrity": "sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/brc-dd"
+      }
+    },
+    "node_modules/is-arguments": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz",
+      "integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.2",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.2.tgz",
+      "integrity": "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==",
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-docker": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
+      "integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-expression": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-expression/-/is-expression-4.0.0.tgz",
+      "integrity": "sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^7.1.1",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "node_modules/is-expression/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-generator-function": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
+      "integrity": "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.4",
+        "generator-function": "^2.0.0",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-in-ssh": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-in-ssh/-/is-in-ssh-1.0.0.tgz",
+      "integrity": "sha512-jYa6Q9rH90kR1vKB6NM7qqd1mge3Fx4Dhw5TVlK1MUBqhEOuCagrEHMevNuCcbECmXZ0ThXkRm+Ymr51HwEPAw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-inside-container": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
+      "integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "is-docker": "^3.0.0"
+      },
+      "bin": {
+        "is-inside-container": "cli.js"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-installed-globally": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
+      "integrity": "sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "global-dirs": "^3.0.0",
+        "is-path-inside": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-reference": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
+      "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-unicode-supported": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
+      "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-wsl": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-3.1.1.tgz",
+      "integrity": "sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "is-inside-container": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "license": "ISC"
+    },
+    "node_modules/isstream": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+      "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "license": "BlueOak-1.0.0",
+      "peer": true,
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/js-stringify": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
+      "integrity": "sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+      "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsdoc-type-pratt-parser": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.8.0.tgz",
+      "integrity": "sha512-iZ8Bdb84lWRuGHamRXFyML07r21pcwBrLkHEuHgEY5UbCouBwv7ECknDRKzsQIXMiqpPymqtIf8TC/shYKB5rw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-schema": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
+      "dev": true,
+      "license": "(AFL-2.1 OR BSD-3-Clause)"
+    },
+    "node_modules/json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsonfile": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.1.tgz",
+      "integrity": "sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/jsprim": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-2.0.2.tgz",
+      "integrity": "sha512-gqXddjPqQ6G40VdnI6T6yObEC+pDNvyP95wdQhkWkg7crHH3km5qP1FsOXEkzEQwnz6gz5qGTn1c2Y52wP3OyQ==",
+      "dev": true,
+      "engines": [
+        "node >=0.6.0"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "assert-plus": "1.0.0",
+        "extsprintf": "1.3.0",
+        "json-schema": "0.4.0",
+        "verror": "1.10.0"
+      }
+    },
+    "node_modules/jstransformer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz",
+      "integrity": "sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-promise": "^2.0.0",
+        "promise": "^7.0.1"
+      }
+    },
+    "node_modules/kleur": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/klona": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
+      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/knitwork": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/knitwork/-/knitwork-1.3.0.tgz",
+      "integrity": "sha512-4LqMNoONzR43B1W0ek0fhXMsDNW/zxa1NdFAVMY+k28pgZLovR4G3PB5MrpTxCy1QaZCqNoiaKPr5w5qZHfSNw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/launch-editor": {
+      "version": "2.14.1",
+      "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.14.1.tgz",
+      "integrity": "sha512-QWBrQsMpH7gPr965dsKD/3cKWiNoTjpATQf++Xq63N6sKRGMwlVXz41O1IZTMfZQgBctD/K5Zt06+/I6pP6+HA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "picocolors": "^1.1.1",
+        "shell-quote": "^1.8.4"
+      }
+    },
+    "node_modules/lazy-ass": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/lazy-ass/-/lazy-ass-1.6.0.tgz",
+      "integrity": "sha512-cc8oEVoctTvsFZ/Oje/kGnHbpWHYBe8IAJe4C0QNc3t8uM/0Y8+erSz/7Y1ALuXTEZTMvxXwO6YbX1ey3ujiZw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "> 0.8"
+      }
+    },
+    "node_modules/lazystream": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.1.tgz",
+      "integrity": "sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "readable-stream": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.6.3"
+      }
+    },
+    "node_modules/lazystream/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/lazystream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/lazystream/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.33.0.tgz",
+      "integrity": "sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==",
+      "license": "MPL-2.0",
+      "peer": true,
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.33.0",
+        "lightningcss-darwin-arm64": "1.33.0",
+        "lightningcss-darwin-x64": "1.33.0",
+        "lightningcss-freebsd-x64": "1.33.0",
+        "lightningcss-linux-arm-gnueabihf": "1.33.0",
+        "lightningcss-linux-arm64-gnu": "1.33.0",
+        "lightningcss-linux-arm64-musl": "1.33.0",
+        "lightningcss-linux-x64-gnu": "1.33.0",
+        "lightningcss-linux-x64-musl": "1.33.0",
+        "lightningcss-win32-arm64-msvc": "1.33.0",
+        "lightningcss-win32-x64-msvc": "1.33.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.33.0.tgz",
+      "integrity": "sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.33.0.tgz",
+      "integrity": "sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.33.0.tgz",
+      "integrity": "sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.33.0.tgz",
+      "integrity": "sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.33.0.tgz",
+      "integrity": "sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.33.0.tgz",
+      "integrity": "sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.33.0.tgz",
+      "integrity": "sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.33.0.tgz",
+      "integrity": "sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.33.0.tgz",
+      "integrity": "sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.33.0.tgz",
+      "integrity": "sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.33.0.tgz",
+      "integrity": "sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/linkify-it": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.2.tgz",
+      "integrity": "sha512-ONTm2jCMAVZjgQa/Fy1kScXsuOoF5NPTsoFBdE1KVIZ2vAh/r9+Bqo+0jINCBYnavTPQZz38QzFTme79ENoN3Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/markdown-it"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
+    "node_modules/listhen": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/listhen/-/listhen-1.10.1.tgz",
+      "integrity": "sha512-6nt/86SkqUQSLW1ofz8MxC6RhRMqOl3ONISe6qqvJ3xj09aJWQx6DhgSZpugs3PX4PXdOas/WD6A9jx6J2N19A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@parcel/watcher-wasm": "^2.5.6",
+        "citty": "^0.2.2",
+        "consola": "^3.4.2",
+        "crossws": "^0.4.10",
+        "defu": "^6.1.7",
+        "get-port-please": "^3.2.0",
+        "h3": "^1.15.11",
+        "http-shutdown": "^1.2.2",
+        "jiti": "^2.7.0",
+        "node-forge": "^1.4.0",
+        "pathe": "^2.0.3",
+        "std-env": "^4.2.0",
+        "tinyclip": "^0.1.15",
+        "ufo": "^1.6.4",
+        "untun": "^0.2.2",
+        "uqr": "^0.1.3"
+      },
+      "bin": {
+        "listen": "bin/listhen.mjs",
+        "listhen": "bin/listhen.mjs"
+      },
+      "peerDependencies": {
+        "@parcel/watcher": "^2.5.6"
+      },
+      "peerDependenciesMeta": {
+        "@parcel/watcher": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/listhen/node_modules/crossws": {
+      "version": "0.4.12",
+      "resolved": "https://registry.npmjs.org/crossws/-/crossws-0.4.12.tgz",
+      "integrity": "sha512-aypfsr6t0uNvkqaZc6zvBfXzC6pLI0/sIulpkV6RwCVtZqG5ebBzv4weImKK0VNCj91Wl9F5j7p5WU4MNrybng==",
+      "license": "MIT",
+      "peer": true,
+      "peerDependencies": {
+        "srvx": ">=0.11.5"
+      },
+      "peerDependenciesMeta": {
+        "srvx": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/listr2": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-3.14.0.tgz",
+      "integrity": "sha512-TyWI8G99GX9GjE54cJ+RrNMcIFBfwMPxc3XTFiAYGN4s10hWROGtOg7+O6u6LE3mNkyld7RSLE6nrKBvTfcs3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cli-truncate": "^2.1.0",
+        "colorette": "^2.0.16",
+        "log-update": "^4.0.0",
+        "p-map": "^4.0.0",
+        "rfdc": "^1.3.0",
+        "rxjs": "^7.5.1",
+        "through": "^2.3.8",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "enquirer": ">= 2.3.0 < 3"
+      },
+      "peerDependenciesMeta": {
+        "enquirer": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/loader-utils": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.3.1.tgz",
+      "integrity": "sha512-FMJTLMXfCLMLfJxcX9PFqX5qD88Z5MRGaZCVzfuqeZSPsyiBzs+pahDQjbIWz2QIzPZz0NX9Zy4FX3lmK6YHIg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 12.13.0"
+      }
+    },
+    "node_modules/local-pkg": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.2.1.tgz",
+      "integrity": "sha512-++gUqRDEvcnN6Zhqrr+y/CkVEHhlrR96vZn3nZZPYzMcBUyBtTKzB9NadClFIsIVSsu+3i9tfk/erqy9kAmt7Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "mlly": "^1.7.4",
+        "pkg-types": "^2.3.0",
+        "quansync": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-7.2.0.tgz",
+      "integrity": "sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^6.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/log-symbols": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
+      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "is-unicode-supported": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-4.0.0.tgz",
+      "integrity": "sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-escapes": "^4.3.0",
+        "cli-cursor": "^3.1.0",
+        "slice-ansi": "^4.0.0",
+        "wrap-ansi": "^6.2.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/slice-ansi": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
+      "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/lucide-vue-next": {
+      "version": "0.525.0",
+      "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.525.0.tgz",
+      "integrity": "sha512-Xf8+x8B2DrnGDV/rxylS+KBp2FIe6ljwDn2JsGTZZvXIfhmm/q+nv8RuGO1OyoMjOVkkz7CqtUqJfwtFPRbB2w==",
+      "deprecated": "Package deprecated. Please use @lucide/vue instead.",
+      "dev": true,
+      "license": "ISC",
+      "peerDependencies": {
+        "vue": ">=3.0.1"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/magic-string-ast": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/magic-string-ast/-/magic-string-ast-1.0.3.tgz",
+      "integrity": "sha512-CvkkH1i81zl7mmb94DsRiFeG9V2fR2JeuK8yDgS8oiZSFa++wWLEgZ5ufEOyLHbvSbD1gTRKv9NdX69Rnvr9JA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "magic-string": "^0.30.19"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/magicast": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/magicast/-/magicast-0.5.4.tgz",
+      "integrity": "sha512-llBEhWm1SacoRwgHUoQJYtwp4PBLF4faQi5TCpIGyGs9n4y5+juI0tDgyKIfpqxckRHaHzouUEph3THklWh03w==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/map-or-similar": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/map-or-similar/-/map-or-similar-1.5.0.tgz",
+      "integrity": "sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/markdown-it": {
+      "version": "14.3.1",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.3.1.tgz",
+      "integrity": "sha512-4Ej49aYTDFIQ+uBkfX8GBvJGccoARxxPep+7aWTs55ozbjQJpW9M26Fe53vnGgvLeVzva/amzjQQaQu9w0vMhA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/markdown-it"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.5.0",
+        "linkify-it": "^5.0.2",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
+    "node_modules/markdown-it/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "license": "CC0-1.0",
+      "peer": true
+    },
+    "node_modules/mdurl": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.1.0.tgz",
+      "integrity": "sha512-1+HBaOx0zi/dQWht8rNv9MYf9qqpqL/kxI0hXImU6Y547zM6Sni8BQibt7ifgMcYtQg41ao3Ivd6cnSM86inpg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/memoizerific": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz",
+      "integrity": "sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "map-or-similar": "^1.5.0"
+      }
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "license": "MIT"
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/mime": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-4.1.0.tgz",
+      "integrity": "sha512-X5ju04+cAzsojXKes0B/S4tcYtFAJ6tTMuSPBEn9CPGlrWr8Fiw7qYeLT0XyH80HSoAoqWCaz+MWKh22P7G1cw==",
+      "funding": [
+        "https://github.com/sponsors/broofa"
+      ],
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "mime": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "10.2.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.6.tgz",
+      "integrity": "sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==",
+      "license": "BlueOak-1.0.0",
+      "peer": true,
+      "dependencies": {
+        "brace-expansion": "^5.0.8"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz",
+      "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
+      "license": "BlueOak-1.0.0",
+      "peer": true,
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/minizlib": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz",
+      "integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/mlly": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.2.tgz",
+      "integrity": "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "acorn": "^8.16.0",
+        "pathe": "^2.0.3",
+        "pkg-types": "^1.3.1",
+        "ufo": "^1.6.3"
+      }
+    },
+    "node_modules/mlly/node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/mlly/node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
+    "node_modules/mocked-exports": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/mocked-exports/-/mocked-exports-0.1.1.tgz",
+      "integrity": "sha512-aF7yRQr/Q0O2/4pIXm6PZ5G+jAd7QS4Yu8m+WEeEHGnbo+7mE36CbLSDQiXYV8bVL3NfmdeqPJct0tUlnjVSnA==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/mrmime": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
+      "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/muggle-string": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
+      "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.18",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz",
+      "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/nanotar": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/nanotar/-/nanotar-0.3.0.tgz",
+      "integrity": "sha512-Kv2JYYiCzt16Kt5QwAc9BFG89xfPNBx+oQL4GQXD9nLqPkZBiNaqaCWtwnbk/q7UVsTYevvM1b0UF8zmEI4pCg==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/nitropack": {
+      "version": "2.13.4",
+      "resolved": "https://registry.npmjs.org/nitropack/-/nitropack-2.13.4.tgz",
+      "integrity": "sha512-tX7bT6zxNeMwkc6hxHiZeUoTOjVrcjoh1Z3cmxOlodIqjl4HISgqfGOmkWSayky3Nv9Z5+KQH52F8nmXJY5AAA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@cloudflare/kv-asset-handler": "^0.4.2",
+        "@rollup/plugin-alias": "^6.0.0",
+        "@rollup/plugin-commonjs": "^29.0.2",
+        "@rollup/plugin-inject": "^5.0.5",
+        "@rollup/plugin-json": "^6.1.0",
+        "@rollup/plugin-node-resolve": "^16.0.3",
+        "@rollup/plugin-replace": "^6.0.3",
+        "@rollup/plugin-terser": "^1.0.0",
+        "@vercel/nft": "^1.5.0",
+        "archiver": "^7.0.1",
+        "c12": "^3.3.4",
+        "chokidar": "^5.0.0",
+        "citty": "^0.2.2",
+        "compatx": "^0.2.0",
+        "confbox": "^0.2.4",
+        "consola": "^3.4.2",
+        "cookie-es": "^2.0.1",
+        "croner": "^10.0.1",
+        "crossws": "^0.3.5",
+        "db0": "^0.3.4",
+        "defu": "^6.1.7",
+        "destr": "^2.0.5",
+        "dot-prop": "^10.1.0",
+        "esbuild": "^0.28.0",
+        "escape-string-regexp": "^5.0.0",
+        "etag": "^1.8.1",
+        "exsolve": "^1.0.8",
+        "globby": "^16.2.0",
+        "gzip-size": "^7.0.0",
+        "h3": "^1.15.11",
+        "hookable": "^5.5.3",
+        "httpxy": "^0.5.1",
+        "ioredis": "^5.10.1",
+        "jiti": "^2.6.1",
+        "klona": "^2.0.6",
+        "knitwork": "^1.3.0",
+        "listhen": "^1.9.1",
+        "magic-string": "^0.30.21",
+        "magicast": "^0.5.2",
+        "mime": "^4.1.0",
+        "mlly": "^1.8.2",
+        "node-fetch-native": "^1.6.7",
+        "node-mock-http": "^1.0.4",
+        "ofetch": "^1.5.1",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "perfect-debounce": "^2.1.0",
+        "pkg-types": "^2.3.1",
+        "pretty-bytes": "^7.1.0",
+        "radix3": "^1.1.2",
+        "rollup": "^4.60.2",
+        "rollup-plugin-visualizer": "^7.0.1",
+        "scule": "^1.3.0",
+        "semver": "^7.7.4",
+        "serve-placeholder": "^2.0.2",
+        "serve-static": "^2.2.1",
+        "source-map": "^0.7.6",
+        "std-env": "^4.1.0",
+        "ufo": "^1.6.4",
+        "ultrahtml": "^1.6.0",
+        "uncrypto": "^0.1.3",
+        "unctx": "^2.5.0",
+        "unenv": "2.0.0-rc.24",
+        "unimport": "^6.2.0",
+        "unplugin-utils": "^0.3.1",
+        "unstorage": "^1.17.5",
+        "untyped": "^2.0.0",
+        "unwasm": "^0.5.3",
+        "youch": "^4.1.1",
+        "youch-core": "^0.3.3"
+      },
+      "bin": {
+        "nitro": "dist/cli/index.mjs",
+        "nitropack": "dist/cli/index.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "xml2js": "^0.6.2"
+      },
+      "peerDependenciesMeta": {
+        "xml2js": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/nitropack/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/nitropack/node_modules/pretty-bytes": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-7.1.2.tgz",
+      "integrity": "sha512-spZIOSORH9joSPGN0L/tYfvINH+xbOpnI3kdcEkq0mzGMjFvDZzyRVbqEOV0wACF0gggdKE9RWO2mosGsBh/Rg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/node-fetch-native": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.6.7.tgz",
+      "integrity": "sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/node-forge": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.4.0.tgz",
+      "integrity": "sha512-LarFH0+6VfriEhqMMcLX2F7SwSXeWwnEAJEsYm5QKWchiVYVvJyV9v7UDvUv+w5HO23ZpQTXDv/GxdDdMyOuoQ==",
+      "license": "(BSD-3-Clause OR GPL-2.0)",
+      "peer": true,
+      "engines": {
+        "node": ">= 6.13.0"
+      }
+    },
+    "node_modules/node-gyp-build": {
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.4.tgz",
+      "integrity": "sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "node-gyp-build": "bin.js",
+        "node-gyp-build-optional": "optional.js",
+        "node-gyp-build-test": "build-test.js"
+      }
+    },
+    "node_modules/node-html-parser": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/node-html-parser/-/node-html-parser-5.3.3.tgz",
+      "integrity": "sha512-ncg1033CaX9UexbyA7e1N0aAoAYRDiV8jkTvzEnfd1GDvzFdrsXLzR4p4ik8mwLgnaKP/jyUFWDy9q3jvRT2Jw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "css-select": "^4.2.1",
+        "he": "1.2.0"
+      }
+    },
+    "node_modules/node-mock-http": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/node-mock-http/-/node-mock-http-1.0.5.tgz",
+      "integrity": "sha512-KQyt/wLjG3TAc7DOUhpqWzgd4ERxR80JOlTK5VE5R1S12IaPVN5qkj4klBce9HPG1Njuup4Sb5bljaT34lIyjw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.54",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.54.tgz",
+      "integrity": "sha512-YHs7BmmcsdAI5Ozuf8JZo6PT0mv2GIWC9vMfvUC3dp65M8hn7Ux8CPL+2oBI7juNuj9d0ndhTcznq2ODBps9cQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/nopt": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-8.1.0.tgz",
+      "integrity": "sha512-ieGu42u/Qsa4TFktmaKEwM6MQH0pOWnaB3htzh0JRtx84+Mebc0cbZYN5bC+6WTZ4+77xrL9Pn5m7CV6VIkV7A==",
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "abbrev": "^3.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/nostics": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/nostics/-/nostics-1.2.0.tgz",
+      "integrity": "sha512-FGqEfhQjrvo1lL8KFifdTQiNwwQHJxC1jtYE1Rc54qF/jxONUNL+kC9gS1krX8Q65PgrQ5fCqH/I4NhWBvdSqg==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/npm-run-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
+    "node_modules/nuxt": {
+      "version": "3.21.11",
+      "resolved": "https://registry.npmjs.org/nuxt/-/nuxt-3.21.11.tgz",
+      "integrity": "sha512-/RlSSvx2ne/vXbeEy+ZWZ0uVgXyiadVkrK5hMx7XsDk7R6q2o4qln2JxoQqILe7K6HzbWM9/0YFS00bTRj/kEw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@dxup/nuxt": "^0.5.6",
+        "@nuxt/cli": "^3.37.0",
+        "@nuxt/devtools": "^3.4.1",
+        "@nuxt/kit": "3.21.11",
+        "@nuxt/nitro-server": "3.21.11",
+        "@nuxt/schema": "3.21.11",
+        "@nuxt/telemetry": "^2.8.0",
+        "@nuxt/vite-builder": "3.21.11",
+        "@unhead/vue": "^2.1.17",
+        "@vue/shared": "^3.5.40",
+        "c12": "^3.3.4",
+        "chokidar": "^5.0.0",
+        "compatx": "^0.2.0",
+        "consola": "^3.4.2",
+        "cookie-es": "^2.0.1",
+        "defu": "^6.1.7",
+        "destr": "^2.0.5",
+        "devalue": "^5.9.0",
+        "errx": "^0.1.2",
+        "escape-string-regexp": "^5.0.0",
+        "exsolve": "^1.1.1",
+        "h3": "^1.15.11",
+        "hookable": "^5.5.3",
+        "ignore": "^7.0.6",
+        "impound": "^1.1.6",
+        "jiti": "^2.7.0",
+        "klona": "^2.0.6",
+        "knitwork": "^1.3.0",
+        "magic-string": "^0.30.21",
+        "mlly": "^1.8.2",
+        "nanotar": "^0.3.0",
+        "nypm": "^0.6.9",
+        "ofetch": "^1.5.1",
+        "ohash": "^2.0.11",
+        "on-change": "^6.0.2",
+        "oxc-minify": "^0.143.0",
+        "oxc-parser": "^0.143.0",
+        "oxc-transform": "^0.143.0",
+        "oxc-walker": "^1.1.1",
+        "pathe": "^2.0.3",
+        "perfect-debounce": "^2.1.0",
+        "pkg-types": "^2.3.1",
+        "rou3": "^0.9.1",
+        "scule": "^1.3.0",
+        "semver": "^7.8.5",
+        "std-env": "^4.2.0",
+        "tinyglobby": "^0.2.17",
+        "ufo": "^1.6.4",
+        "ultrahtml": "^1.7.0",
+        "uncrypto": "^0.1.3",
+        "unctx": "^2.5.0",
+        "unimport": "^6.4.0",
+        "unplugin": "^3.3.0",
+        "unplugin-vue-router": "^0.19.2",
+        "untyped": "^2.0.0",
+        "vue": "^3.5.40",
+        "vue-router": "^4.6.4"
+      },
+      "bin": {
+        "nuxi": "bin/nuxt.mjs",
+        "nuxt": "bin/nuxt.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "@parcel/watcher": "^2.1.0",
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@parcel/watcher": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/nuxt/node_modules/@nuxt/devtools": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/devtools/-/devtools-3.4.2.tgz",
+      "integrity": "sha512-Nidg0/zB710cyK89ltTkv66hMfPlIPlKA+Yb67bIrAkNm5PoTwQ1goHdFWHIAGZ9nTadcVTzATwMwa56nvl/Wg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@nuxt/devtools-kit": "3.4.2",
+        "@nuxt/devtools-wizard": "3.4.2",
+        "@nuxt/kit": "^4.5.1",
+        "@vue/devtools-core": "^8.2.1",
+        "@vue/devtools-kit": "^8.2.1",
+        "birpc": "^4.0.0",
+        "consola": "^3.4.2",
+        "destr": "^2.0.5",
+        "error-stack-parser-es": "^2.0.1",
+        "execa": "^8.0.1",
+        "fast-npm-meta": "^2.2.0",
+        "get-port-please": "^3.2.0",
+        "hookable": "^6.1.1",
+        "image-meta": "^0.2.2",
+        "is-installed-globally": "^1.0.0",
+        "launch-editor": "^2.14.1",
+        "local-pkg": "^1.2.1",
+        "magicast": "^0.5.4",
+        "nypm": "^0.6.9",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "perfect-debounce": "^2.1.0",
+        "pkg-types": "^2.3.1",
+        "semver": "^7.8.5",
+        "simple-git": "^3.36.0",
+        "sirv": "^3.0.2",
+        "structured-clone-es": "^2.0.1",
+        "tinyglobby": "^0.2.17",
+        "unstorage": "^1.17.5",
+        "vite-plugin-inspect": "^11.4.1",
+        "vite-plugin-vue-tracer": "^1.4.0",
+        "which": "^6.0.1",
+        "ws": "^8.21.1"
+      },
+      "bin": {
+        "devtools": "cli.mjs"
+      },
+      "peerDependencies": {
+        "@vitejs/devtools": "*",
+        "vite": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vitejs/devtools": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/nuxt/node_modules/@nuxt/devtools-kit": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/devtools-kit/-/devtools-kit-3.4.2.tgz",
+      "integrity": "sha512-TPPbmH9xrExagYxfCe6JgtbHmgchfgDdA656Yws18rn8I/oCvB+gcw3kTWBBp2sC9ipZPXsgbsW/yZnVnGNBiA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@nuxt/kit": "^4.5.1",
+        "execa": "^8.0.1"
+      },
+      "peerDependencies": {
+        "vite": ">=6.0"
+      }
+    },
+    "node_modules/nuxt/node_modules/@nuxt/devtools-kit/node_modules/@nuxt/kit": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.5.2.tgz",
+      "integrity": "sha512-l66LU9DcJYjmNwqwAj2I5UGRrUbnG2DOKGChnN70zIGtn0eq/z87gi/FRgha6eMb9/FmB1PFHgtx6PWVml1C2Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "c12": "^3.3.4",
+        "consola": "^3.4.2",
+        "defu": "^6.1.7",
+        "destr": "^2.0.5",
+        "errx": "^0.1.2",
+        "exsolve": "^1.1.1",
+        "ignore": "^7.0.6",
+        "jiti": "^2.7.0",
+        "klona": "^2.0.6",
+        "mlly": "^1.8.2",
+        "nostics": "^1.2.0",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.1",
+        "rc9": "^3.0.1",
+        "scule": "^1.3.0",
+        "tinyglobby": "^0.2.17",
+        "ufo": "^1.6.4",
+        "unctx": "^3.0.0",
+        "untyped": "^2.0.0",
+        "verkit": "^0.3.1"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/nuxt/node_modules/@nuxt/devtools-kit/node_modules/unctx": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/unctx/-/unctx-3.0.1.tgz",
+      "integrity": "sha512-5RAt2etv7g362RXyd33R82gm9u/kbtQlpoaOs9Bgm4E32GRMJ0xjbZyvdxUTmiuHk3V1IQb1aUNrp5IWY+JaWw==",
+      "license": "MIT",
+      "peer": true,
+      "peerDependencies": {
+        "magic-string": ">=0.30.21",
+        "oxc-parser": ">=0.140.0",
+        "rolldown": "^1.1.5",
+        "unplugin": "^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "magic-string": {
+          "optional": true
+        },
+        "oxc-parser": {
+          "optional": true
+        },
+        "rolldown": {
+          "optional": true
+        },
+        "unplugin": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/nuxt/node_modules/@nuxt/devtools/node_modules/@nuxt/kit": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.5.2.tgz",
+      "integrity": "sha512-l66LU9DcJYjmNwqwAj2I5UGRrUbnG2DOKGChnN70zIGtn0eq/z87gi/FRgha6eMb9/FmB1PFHgtx6PWVml1C2Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "c12": "^3.3.4",
+        "consola": "^3.4.2",
+        "defu": "^6.1.7",
+        "destr": "^2.0.5",
+        "errx": "^0.1.2",
+        "exsolve": "^1.1.1",
+        "ignore": "^7.0.6",
+        "jiti": "^2.7.0",
+        "klona": "^2.0.6",
+        "mlly": "^1.8.2",
+        "nostics": "^1.2.0",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.1",
+        "rc9": "^3.0.1",
+        "scule": "^1.3.0",
+        "tinyglobby": "^0.2.17",
+        "ufo": "^1.6.4",
+        "unctx": "^3.0.0",
+        "untyped": "^2.0.0",
+        "verkit": "^0.3.1"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/nuxt/node_modules/@nuxt/devtools/node_modules/hookable": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/hookable/-/hookable-6.1.1.tgz",
+      "integrity": "sha512-U9LYDy1CwhMCnprUfeAZWZGByVbhd54hwepegYTK7Pi5NvqEj63ifz5z+xukznehT7i6NIZRu89Ay1AZmRsLEQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/nuxt/node_modules/@nuxt/devtools/node_modules/unctx": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/unctx/-/unctx-3.0.1.tgz",
+      "integrity": "sha512-5RAt2etv7g362RXyd33R82gm9u/kbtQlpoaOs9Bgm4E32GRMJ0xjbZyvdxUTmiuHk3V1IQb1aUNrp5IWY+JaWw==",
+      "license": "MIT",
+      "peer": true,
+      "peerDependencies": {
+        "magic-string": ">=0.30.21",
+        "oxc-parser": ">=0.140.0",
+        "rolldown": "^1.1.5",
+        "unplugin": "^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "magic-string": {
+          "optional": true
+        },
+        "oxc-parser": {
+          "optional": true
+        },
+        "rolldown": {
+          "optional": true
+        },
+        "unplugin": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/nuxt/node_modules/@nuxt/schema": {
+      "version": "3.21.11",
+      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.21.11.tgz",
+      "integrity": "sha512-5Couz53Pl/SgTwtMQ9jlxVIC6wZk9aAbWyeOD7D6D1UIP5DzV/yV5lPDY/kM0nmiqPSzJf9WLTdJgB2gNm0dOA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/shared": "^3.5.40",
+        "defu": "^6.1.7",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.1",
+        "std-env": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.10.0"
+      }
+    },
+    "node_modules/nuxt/node_modules/error-stack-parser-es": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/error-stack-parser-es/-/error-stack-parser-es-2.0.1.tgz",
+      "integrity": "sha512-J36ntO+rMQVRuR/umlmxmfLi4TpWwtmTnHoJoXTiC2xDNazs0VDPKcX6pbhZMDd2HFtH9isMBJXMdbki+A++Pg==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/nuxt/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/nuxt/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/nuxt/node_modules/execa": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
+      "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^8.0.1",
+        "human-signals": "^5.0.0",
+        "is-stream": "^3.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^5.1.0",
+        "onetime": "^6.0.0",
+        "signal-exit": "^4.1.0",
+        "strip-final-newline": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=16.17"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/nuxt/node_modules/get-stream": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
+      "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/nuxt/node_modules/human-signals": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
+      "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=16.17.0"
+      }
+    },
+    "node_modules/nuxt/node_modules/is-installed-globally": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-1.0.0.tgz",
+      "integrity": "sha512-K55T22lfpQ63N4KEN57jZUAaAYqYHEe8veb/TycJRk9DdSCLLcovXz/mL6mOnhQaZsQGwPhuFopdQIlqGSEjiQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "global-directory": "^4.0.1",
+        "is-path-inside": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/nuxt/node_modules/is-path-inside": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-4.0.0.tgz",
+      "integrity": "sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/nuxt/node_modules/is-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/nuxt/node_modules/isexe": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-4.0.0.tgz",
+      "integrity": "sha512-FFUtZMpoZ8RqHS3XeXEmHWLA4thH+ZxCv2lOiPIn1Xc7CxrqhWzNSDzD+/chS/zbYezmiwWLdQC09JdQKmthOw==",
+      "license": "BlueOak-1.0.0",
+      "peer": true,
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/nuxt/node_modules/mimic-fn": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+      "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/nuxt/node_modules/npm-run-path": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
+      "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "path-key": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/nuxt/node_modules/onetime": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+      "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "mimic-fn": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/nuxt/node_modules/path-key": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/nuxt/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/nuxt/node_modules/strip-final-newline": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/nuxt/node_modules/unplugin": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-3.3.0.tgz",
+      "integrity": "sha512-qa66K+crbfyE6JK10GjvbJeRrOsuC/JpbnHctfyp/i4oBTxWOzJfRZyDiOk1PtErMFRu8JhsU/wPvOdBNWe5Rg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "picomatch": "^4.0.4",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "@farmfe/core": "*",
+        "@rspack/core": "*",
+        "bun-types-no-globals": "*",
+        "esbuild": "*",
+        "rolldown": "*",
+        "rollup": "*",
+        "unloader": "*",
+        "vite": "*",
+        "webpack": "*"
+      },
+      "peerDependenciesMeta": {
+        "@farmfe/core": {
+          "optional": true
+        },
+        "@rspack/core": {
+          "optional": true
+        },
+        "bun-types-no-globals": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "rolldown": {
+          "optional": true
+        },
+        "rollup": {
+          "optional": true
+        },
+        "unloader": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/nuxt/node_modules/vite": {
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.2.2.tgz",
+      "integrity": "sha512-cFKLV/PRgAUlIRm5WjMjJ86jrftzpqcgH+Us+DS8mI3CDNiH30Whrz8uHL3+MOLPAgqbMBAqWdAHAphOAM+z/Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "lightningcss": "^1.33.0",
+        "picomatch": "^4.0.5",
+        "postcss": "^8.5.26",
+        "rolldown": "~1.2.4",
+        "tinyglobby": "^0.2.17"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.4.0 || ^0.5.0",
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/nuxt/node_modules/vite-plugin-inspect": {
+      "version": "11.4.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-inspect/-/vite-plugin-inspect-11.4.1.tgz",
+      "integrity": "sha512-ShOFe2PURXGvRS5OrgmOLZOCwDTD7dEBVt0tMpFPKb9AsvqXKCRGM8QgKrUbRbJYFXScHvDPpGRd28rYidC0tA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansis": "^4.3.0",
+        "error-stack-parser-es": "^1.0.5",
+        "obug": "^2.1.1",
+        "ohash": "^2.0.11",
+        "open": "^11.0.0",
+        "perfect-debounce": "^2.1.0",
+        "sirv": "^3.0.2",
+        "unplugin-utils": "^0.3.1",
+        "vite-dev-rpc": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vite": "^6.0.0 || ^7.0.0-0 || ^8.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/nuxt/node_modules/vite-plugin-inspect/node_modules/error-stack-parser-es": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/error-stack-parser-es/-/error-stack-parser-es-1.0.5.tgz",
+      "integrity": "sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/nuxt/node_modules/vite-plugin-vue-tracer": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-vue-tracer/-/vite-plugin-vue-tracer-1.5.0.tgz",
+      "integrity": "sha512-G2aQ676fLBPnYhRi5lsARoL4hbtc/sx6fVzO7p44AB+1xQXo2UuiRgv7K26UdijrNzmuQprmJ121n3rdjBk1CA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "estree-walker": "^3.0.3",
+        "exsolve": "^1.1.1",
+        "magic-string": "^1.1.0",
+        "pathe": "^2.0.3",
+        "source-map-js": "^1.2.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0-0",
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/nuxt/node_modules/vite-plugin-vue-tracer/node_modules/magic-string": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-1.2.3.tgz",
+      "integrity": "sha512-Bpb0W2TbLKOZ7vJnOUnVRGq3WL2p+ISV29M6hYPL1AFCpyKZpdr5ytiXoTSSxRVhg8YW7f65+6gbG8WG6PCa/g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/nuxt/node_modules/which": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-6.0.1.tgz",
+      "integrity": "sha512-oGLe46MIrCRqX7ytPUf66EAYvdeMIZYn3WaocqqKZAxrBpkqHfL/qvTyJ/bTk5+AqHCjXmrv3CEWgy368zhRUg==",
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "isexe": "^4.0.0"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/nypm": {
+      "version": "0.6.9",
+      "resolved": "https://registry.npmjs.org/nypm/-/nypm-0.6.9.tgz",
+      "integrity": "sha512-zxlE2yvSWZWmHcNdT3+5zV2lrCogeE9YOklHrR3dFjqutq5wO7GFDYLFDRXLsYnJzwvy/im9fYoxePvS0VTW0w==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "citty": "^0.2.2",
+        "pathe": "^2.0.3",
+        "tinyexec": "^1.2.4"
+      },
+      "bin": {
+        "nypm": "dist/cli.mjs"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/obug": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.4.tgz",
+      "integrity": "sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==",
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/ofetch": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/ofetch/-/ofetch-1.5.1.tgz",
+      "integrity": "sha512-2W4oUZlVaqAPAil6FUg/difl6YhqhUR7x2eZY4bQCko22UXg3hptq9KLQdqFClV+Wu85UX7hNtdGTngi/1BxcA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "destr": "^2.0.5",
+        "node-fetch-native": "^1.6.7",
+        "ufo": "^1.6.1"
+      }
+    },
+    "node_modules/ohash": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.12.tgz",
+      "integrity": "sha512-65S/5gk9YSsaRjcyf7Nfa6h/d3E8/1gslpXfI4W7Dxn/oap8IKRuNT5VXkLQ1YFKIEg4apRY4Pj6aiwFzrDdmw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/on-change": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/on-change/-/on-change-6.0.2.tgz",
+      "integrity": "sha512-08+12qcOVEA0fS9g/VxKS27HaT94nRutUT77J2dr8zv/unzXopvhBuF8tNLWsoLQ5IgrQ6eptGeGqUYat82U1w==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/on-change?sponsor=1"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/open": {
+      "version": "11.0.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-11.0.2.tgz",
+      "integrity": "sha512-RWqF+pBSkqecEvCKOn8QYhaNdRMJDZRIrlS/7rTDdLHaPcfXGCZ/h8zb413NfvdeAV0MR7T1yJcA34/q+CSm1Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "default-browser": "^5.5.1",
+        "define-lazy-prop": "^3.0.0",
+        "is-in-ssh": "^1.0.0",
+        "is-inside-container": "^1.0.0",
+        "powershell-utils": "^0.2.1",
+        "wsl-utils": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ospath": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/ospath/-/ospath-1.2.2.tgz",
+      "integrity": "sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/oxc-minify": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/oxc-minify/-/oxc-minify-0.143.0.tgz",
+      "integrity": "sha512-6P7PFKZpZkI14ez9duBfVWTKLBgJfJMtdPlGGUmTIXiwMWcxS4Qy4+65qWePmYyksuzhaI5AS660V2/UjaveMA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      },
+      "optionalDependencies": {
+        "@oxc-minify/binding-android-arm-eabi": "0.143.0",
+        "@oxc-minify/binding-android-arm64": "0.143.0",
+        "@oxc-minify/binding-darwin-arm64": "0.143.0",
+        "@oxc-minify/binding-darwin-x64": "0.143.0",
+        "@oxc-minify/binding-freebsd-x64": "0.143.0",
+        "@oxc-minify/binding-linux-arm-gnueabihf": "0.143.0",
+        "@oxc-minify/binding-linux-arm-musleabihf": "0.143.0",
+        "@oxc-minify/binding-linux-arm64-gnu": "0.143.0",
+        "@oxc-minify/binding-linux-arm64-musl": "0.143.0",
+        "@oxc-minify/binding-linux-ppc64-gnu": "0.143.0",
+        "@oxc-minify/binding-linux-riscv64-gnu": "0.143.0",
+        "@oxc-minify/binding-linux-riscv64-musl": "0.143.0",
+        "@oxc-minify/binding-linux-s390x-gnu": "0.143.0",
+        "@oxc-minify/binding-linux-x64-gnu": "0.143.0",
+        "@oxc-minify/binding-linux-x64-musl": "0.143.0",
+        "@oxc-minify/binding-openharmony-arm64": "0.143.0",
+        "@oxc-minify/binding-win32-arm64-msvc": "0.143.0",
+        "@oxc-minify/binding-win32-ia32-msvc": "0.143.0",
+        "@oxc-minify/binding-win32-x64-msvc": "0.143.0"
+      }
+    },
+    "node_modules/oxc-parser": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/oxc-parser/-/oxc-parser-0.143.0.tgz",
+      "integrity": "sha512-ov0NzaDCOInknS7mP1cwKdJERt3utPW8ldjtdUXQ8Ty0GEFD08wk422vCUN0d7pST6kqtV7dxoI9w1Zi0l/9TA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@oxc-project/types": "^0.143.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      },
+      "optionalDependencies": {
+        "@oxc-parser/binding-android-arm-eabi": "0.143.0",
+        "@oxc-parser/binding-android-arm64": "0.143.0",
+        "@oxc-parser/binding-darwin-arm64": "0.143.0",
+        "@oxc-parser/binding-darwin-x64": "0.143.0",
+        "@oxc-parser/binding-freebsd-x64": "0.143.0",
+        "@oxc-parser/binding-linux-arm-gnueabihf": "0.143.0",
+        "@oxc-parser/binding-linux-arm-musleabihf": "0.143.0",
+        "@oxc-parser/binding-linux-arm64-gnu": "0.143.0",
+        "@oxc-parser/binding-linux-arm64-musl": "0.143.0",
+        "@oxc-parser/binding-linux-ppc64-gnu": "0.143.0",
+        "@oxc-parser/binding-linux-riscv64-gnu": "0.143.0",
+        "@oxc-parser/binding-linux-riscv64-musl": "0.143.0",
+        "@oxc-parser/binding-linux-s390x-gnu": "0.143.0",
+        "@oxc-parser/binding-linux-x64-gnu": "0.143.0",
+        "@oxc-parser/binding-linux-x64-musl": "0.143.0",
+        "@oxc-parser/binding-openharmony-arm64": "0.143.0",
+        "@oxc-parser/binding-win32-arm64-msvc": "0.143.0",
+        "@oxc-parser/binding-win32-ia32-msvc": "0.143.0",
+        "@oxc-parser/binding-win32-x64-msvc": "0.143.0"
+      }
+    },
+    "node_modules/oxc-transform": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/oxc-transform/-/oxc-transform-0.143.0.tgz",
+      "integrity": "sha512-DBx6urRQRwA2pu3sMxmmVONu2fFlOoi3cU63DGyNsuB5YuAeR/AujdfBv7qqRRq0SnWlPsrHNrzoF8Zf43fIsg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      },
+      "optionalDependencies": {
+        "@oxc-transform/binding-android-arm-eabi": "0.143.0",
+        "@oxc-transform/binding-android-arm64": "0.143.0",
+        "@oxc-transform/binding-darwin-arm64": "0.143.0",
+        "@oxc-transform/binding-darwin-x64": "0.143.0",
+        "@oxc-transform/binding-freebsd-x64": "0.143.0",
+        "@oxc-transform/binding-linux-arm-gnueabihf": "0.143.0",
+        "@oxc-transform/binding-linux-arm-musleabihf": "0.143.0",
+        "@oxc-transform/binding-linux-arm64-gnu": "0.143.0",
+        "@oxc-transform/binding-linux-arm64-musl": "0.143.0",
+        "@oxc-transform/binding-linux-ppc64-gnu": "0.143.0",
+        "@oxc-transform/binding-linux-riscv64-gnu": "0.143.0",
+        "@oxc-transform/binding-linux-riscv64-musl": "0.143.0",
+        "@oxc-transform/binding-linux-s390x-gnu": "0.143.0",
+        "@oxc-transform/binding-linux-x64-gnu": "0.143.0",
+        "@oxc-transform/binding-linux-x64-musl": "0.143.0",
+        "@oxc-transform/binding-openharmony-arm64": "0.143.0",
+        "@oxc-transform/binding-win32-arm64-msvc": "0.143.0",
+        "@oxc-transform/binding-win32-ia32-msvc": "0.143.0",
+        "@oxc-transform/binding-win32-x64-msvc": "0.143.0"
+      }
+    },
+    "node_modules/oxc-walker": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/oxc-walker/-/oxc-walker-1.1.1.tgz",
+      "integrity": "sha512-Hwd7dq28zu/Er99+bpWp16CGwFrhyalJh0W3JOB7XpPvgWo3MqMi2ksWGKuzzA9zt50mJ2pIUwR5lpAdZ9ACNQ==",
+      "license": "MIT",
+      "peer": true,
+      "peerDependencies": {
+        "@oxc-project/types": ">=0.98.0",
+        "oxc-parser": ">=0.98.0",
+        "rolldown": ">=1.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@oxc-project/types": {
+          "optional": true
+        },
+        "oxc-parser": {
+          "optional": true
+        },
+        "rolldown": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz",
+      "integrity": "sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^1.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-6.0.0.tgz",
+      "integrity": "sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-map": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
+      "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "aggregate-error": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "license": "BlueOak-1.0.0",
+      "peer": true
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "license": "MIT"
+    },
+    "node_modules/path-exists": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-5.0.0.tgz",
+      "integrity": "sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "license": "MIT"
+    },
+    "node_modules/path-scurry": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.2.tgz",
+      "integrity": "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==",
+      "license": "BlueOak-1.0.0",
+      "peer": true,
+      "dependencies": {
+        "lru-cache": "^11.0.0",
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "11.5.2",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.2.tgz",
+      "integrity": "sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g==",
+      "license": "BlueOak-1.0.0",
+      "peer": true,
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/perfect-debounce": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-2.1.0.tgz",
+      "integrity": "sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.7.tgz",
+      "integrity": "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pkg-types": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.1.tgz",
+      "integrity": "sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "confbox": "^0.2.4",
+        "exsolve": "^1.0.8",
+        "pathe": "^2.0.3"
+      }
+    },
+    "node_modules/polished": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/polished/-/polished-4.3.1.tgz",
+      "integrity": "sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.17.8"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.26",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.26.tgz",
+      "integrity": "sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.17",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-calc": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-10.1.1.tgz",
+      "integrity": "sha512-NYEsLHh8DgG/PRH2+G9BTuUdtf9ViS+vdoQ0YA5OQdGsfN4ztiwtDWNtBl9EKeqNMFnIu8IKZ0cLxEQ5r5KVMw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "postcss-selector-parser": "^7.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12 || ^20.9 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.38"
+      }
+    },
+    "node_modules/postcss-colormin": {
+      "version": "7.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-7.0.10.tgz",
+      "integrity": "sha512-yFr6JezOolHLta/buLE71VKPh2mXursp4saVe98/ol8ZnEWhL+racShqPKlvd/DKWLre/39B6HhcMXf7RZ3hxg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@colordx/core": "^5.4.3",
+        "browserslist": "^4.28.2",
+        "caniuse-api": "^3.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-convert-values": {
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-7.0.12.tgz",
+      "integrity": "sha512-xurKu5qqk4viR3Cp3p4xBR4KfnZm4w4ys6+UBwBmeuBSNkH7+DtLnYOYnOffgtE4yx8sH9S1VZ6RAAvROXzP2Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "browserslist": "^4.28.2",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-discard-comments": {
+      "version": "7.0.8",
+      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-7.0.8.tgz",
+      "integrity": "sha512-CvvS5S9WrXblFXCEJ9nVo+4z+eA7zSC7Z88V1HEJuwlQhlFnYTIjg1xJY+BCUiG2bvICap2tXii4mP22BD108Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "postcss-selector-parser": "^7.1.1"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-discard-duplicates": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-7.0.4.tgz",
+      "integrity": "sha512-VBNn1+EuMZkeGVVtz0gRfbNGtx9IFgAsAV+E2pHtXPrp4qfGBkhTIiAuE/wrb+Y6Pakg9NewAlfTpYIFAWODtw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-discard-empty": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-7.0.3.tgz",
+      "integrity": "sha512-M2pyjQCU+/7cMHVtL6bKTHjv0lZnPLMpicgr67Dlth7AbuV9gjVTtUqaRwn6Pp6BwSDspUzhz8SaUrRykJU5Dw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-discard-overridden": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-7.0.3.tgz",
+      "integrity": "sha512-aNovXo9UsZuRNLzHJtp13lHIvinDPfiXBPePpXkSjCbgp++iU2FqE+YxvjIsg6EdyPZsASFbfu+JcBFVsErXIQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-merge-longhand": {
+      "version": "7.0.7",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-7.0.7.tgz",
+      "integrity": "sha512-b3mfYUxR388u5Pt0HPcVIUtUDn/k15UfTY9M+ORW+meCR6JLNxoZffiYvXyOYQoRYQNZyX/UFkMCM/mNHxe1qA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0",
+        "stylehacks": "^7.0.11"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-merge-rules": {
+      "version": "7.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-7.0.11.tgz",
+      "integrity": "sha512-SJUPM18g2BmPhf8BVlbwqWz4aK3pLu6u6xjfwEzra7xL6IBR10sUaiB++EzqcVfadPHrKBSMlNdP+XieykhI+Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "browserslist": "^4.28.2",
+        "caniuse-api": "^3.0.0",
+        "cssnano-utils": "^5.0.3",
+        "postcss-selector-parser": "^7.1.1"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-minify-font-values": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-7.0.3.tgz",
+      "integrity": "sha512-yilG/VOaNI74IylQvAQQxm3/wZVBkXyYUqNUAdxqwtbWUXPsbK1q8Ms0mL83v+f8YicgcyfYCRZtWACUdYajpA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-minify-gradients": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-7.0.5.tgz",
+      "integrity": "sha512-YraROyQRg3BI1+Hg8E05B/JPdnTm8EDSVu4P2BxdM+CRiOyfmou809+chGIqo6fQqwjPGQ947nbGncSjmTU1WQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@colordx/core": "^5.4.3",
+        "cssnano-utils": "^5.0.3",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-minify-params": {
+      "version": "7.0.9",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-7.0.9.tgz",
+      "integrity": "sha512-R8itbB8BhlpoYyBm1ou0dD+vJnQ3F6adQipR4UnkCHUwlo+S9WXJaDRg1RHjC8YVAtIdrQzSWvJl40HnGDTKjA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "browserslist": "^4.28.2",
+        "cssnano-utils": "^5.0.3",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-minify-selectors": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-7.1.2.tgz",
+      "integrity": "sha512-aQtrEWKwqafNlExcKHQvPGsXR2+vlUqqJtf5XsCQcgsSb5PL4wlujWBYDJuWsP4UnQX1YHDHU8qRlD+1PzTQ+Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "browserslist": "^4.28.1",
+        "caniuse-api": "^3.0.0",
+        "cssesc": "^3.0.0",
+        "postcss-selector-parser": "^7.1.1"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-normalize-charset": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-7.0.3.tgz",
+      "integrity": "sha512-NoBfZu8PR4c2NlmjvrqQTzCzLY79hwcSRgNQ3ZiNK0ABzf9kYKloE/jNj+/8GQY1wsm8pRRgANk6ydLH8cwo0Q==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-normalize-display-values": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-7.0.3.tgz",
+      "integrity": "sha512-ldsCX0QIt05pKIOobZtVQ48wXJecr+czw4+e1/YjVhLMqslShgpVxgPtI2CefURR8oyVoYaU/l829MMwExDMLw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-normalize-positions": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-7.0.4.tgz",
+      "integrity": "sha512-VEvlpeGd3Ju1Hqa/oN4jaP3+ms4laYwkEL9N9u+B6k54PZjXbW1n6wI+aVprf1BQXlCYpS5+1pl/7/vHiKgARg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-normalize-repeat-style": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-7.0.4.tgz",
+      "integrity": "sha512-6mPKlY/8cSaDHxX502wERADarJsccwlky6yIrOapHH2ZgfoKAV94SbiTKfKEs4EEpdazuc3J72WsqeYk7hp9+Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-normalize-string": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-7.0.3.tgz",
+      "integrity": "sha512-HnEQPUchi1eznmDKEYrKUTqrprEq97SrpUYClgUkv7V2zRODD9DFoUsYU+m9ZOetmD5ku7fEMZB/lwy8IT6xVQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-normalize-timing-functions": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-7.0.3.tgz",
+      "integrity": "sha512-zmEzHdvpZBZu0OKlbJSfgASQvaayyAoVuWtvyr34IJ/LyS+DaOKvvR3EvFJ9RWWtNIx+CMvO125OVophaxNYew==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-normalize-unicode": {
+      "version": "7.0.9",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-7.0.9.tgz",
+      "integrity": "sha512-DRAdWfeh/TjmhLJsw91vdiWCnUod9iwvM7xyS02/nF/sLsCR3A8l3pztrSUrWG8DSBqfX7yEk9FM0USaVJ2mSg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "browserslist": "^4.28.2",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-normalize-url": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-7.0.3.tgz",
+      "integrity": "sha512-CL93wmloq5qsffmFv+bw24MIRbmhHrp53qoh1LDAb/5TtjWEXI/np4xcP/Gw9oWCb2XyWnqHYLDUwiKRoJBA1Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-normalize-whitespace": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-7.0.3.tgz",
+      "integrity": "sha512-FdHjjn+Ht5Z2ZRjNOmeCbNq6lq09sUYKpmlF/Aq0XjVNSLTL6fmHlA/3swN2wP2caY9GV/tjSDcIIyS7aN7W0A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-ordered-values": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-7.0.4.tgz",
+      "integrity": "sha512-nubSi49hDHQk4E8KIj+IbLY8Bg+8OcSUEhgyolgM+atnOvXjV7EjaR6bac4YGZoFyPa9mWoAF3EaYbWdFkKqVg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "cssnano-utils": "^5.0.3",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-reduce-initial": {
+      "version": "7.0.9",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-7.0.9.tgz",
+      "integrity": "sha512-ztTNPdIxXTxtBcG03E9u8v44M4ElXbMIRT7pf2onlquGula0Y83nKKxqM22FA/hMgkfCjN7ohevkVlaNwI8iOQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "browserslist": "^4.28.2",
+        "caniuse-api": "^3.0.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-reduce-transforms": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-7.0.3.tgz",
+      "integrity": "sha512-FXsnN9ZwcZTT8Yf8cAHA8qIGUXcX6WfLd9JoYhrdDfmvsVhhfqkkv7m4AC3rwFOfz+GzkUa87OCKF9dUcicd+g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "7.1.5",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.5.tgz",
+      "integrity": "sha512-KvvtD7SrlBP7dlgkBghEE3r84CABm5SmV2aNcG4oCA+qDnJ/tvKonFVvwWAyyWUEwxuNawdfEAZKP9zM3oZ2Uw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-svgo": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-7.1.3.tgz",
+      "integrity": "sha512-2QfoFOYMcj8lwcVEf9WeTlkVIAm7u2QvOEhMzkQU3KUhhGX/l8hVV9EtjMv4iq3E9iI3OeeMN0YoMLbGusuigw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0",
+        "svgo": "^4.0.1"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >= 18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-unique-selectors": {
+      "version": "7.0.7",
+      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-7.0.7.tgz",
+      "integrity": "sha512-d+sCkaRnSefghOUdH8CMJZV9yUQhj2ojpe8Nw/lA+LV1UOfeleGkLTl6XdCFFSai9UJ+DJPb69FFuqthXYsY8w==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "postcss-selector-parser": "^7.1.1"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/powershell-utils": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/powershell-utils/-/powershell-utils-0.2.1.tgz",
+      "integrity": "sha512-C+y9x90UElAddDZmV4qOx9W53B61PO7cIqWz2dQsWlwswuq4mr8NEwytdGKboYbQlGZ3awrkTeNvcZiZNHnQ8A==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/pretty-bytes": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
+      "integrity": "sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "asap": "~2.0.3"
+      }
+    },
+    "node_modules/proper-lockfile": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/proper-lockfile/-/proper-lockfile-4.1.2.tgz",
+      "integrity": "sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "retry": "^0.12.0",
+        "signal-exit": "^3.0.2"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.0.0.tgz",
+      "integrity": "sha512-F2JHgJQ1iqwnHDcQjVBsq3n/uoaFL+iPW/eAeL7kVxy/2RrWaN4WroKjjvbsoRtv0ftelNyC01bjRhn/bhcf4A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/pug": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/pug/-/pug-3.0.4.tgz",
+      "integrity": "sha512-kFfq5mMzrS7+wrl5pLJzZEzemx34OQ0w4SARfhy/3yxTlhbstsudDwJzhf1hP02yHzbjoVMSXUj/Sz6RNfMyXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pug-code-gen": "^3.0.4",
+        "pug-filters": "^4.0.0",
+        "pug-lexer": "^5.0.1",
+        "pug-linker": "^4.0.0",
+        "pug-load": "^3.0.0",
+        "pug-parser": "^6.0.0",
+        "pug-runtime": "^3.0.1",
+        "pug-strip-comments": "^2.0.0"
+      }
+    },
+    "node_modules/pug-attrs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pug-attrs/-/pug-attrs-3.0.0.tgz",
+      "integrity": "sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "constantinople": "^4.0.1",
+        "js-stringify": "^1.0.2",
+        "pug-runtime": "^3.0.0"
+      }
+    },
+    "node_modules/pug-code-gen": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-3.0.4.tgz",
+      "integrity": "sha512-6okWYIKdasTyXICyEtvobmTZAVX57JkzgzIi4iRJlin8kmhG+Xry2dsus+Mun/nGCn6F2U49haHI5mkELXB14g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "constantinople": "^4.0.1",
+        "doctypes": "^1.1.0",
+        "js-stringify": "^1.0.2",
+        "pug-attrs": "^3.0.0",
+        "pug-error": "^2.1.0",
+        "pug-runtime": "^3.0.1",
+        "void-elements": "^3.1.0",
+        "with": "^7.0.0"
+      }
+    },
+    "node_modules/pug-error": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-2.1.0.tgz",
+      "integrity": "sha512-lv7sU9e5Jk8IeUheHata6/UThZ7RK2jnaaNztxfPYUY+VxZyk/ePVaNZ/vwmH8WqGvDz3LrNYt/+gA55NDg6Pg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/pug-filters": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-4.0.0.tgz",
+      "integrity": "sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "constantinople": "^4.0.1",
+        "jstransformer": "1.0.0",
+        "pug-error": "^2.0.0",
+        "pug-walk": "^2.0.0",
+        "resolve": "^1.15.1"
+      }
+    },
+    "node_modules/pug-lexer": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-5.0.1.tgz",
+      "integrity": "sha512-0I6C62+keXlZPZkOJeVam9aBLVP2EnbeDw3An+k0/QlqdwH6rv8284nko14Na7c0TtqtogfWXcRoFE4O4Ff20w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "character-parser": "^2.2.0",
+        "is-expression": "^4.0.0",
+        "pug-error": "^2.0.0"
+      }
+    },
+    "node_modules/pug-linker": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-4.0.0.tgz",
+      "integrity": "sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pug-error": "^2.0.0",
+        "pug-walk": "^2.0.0"
+      }
+    },
+    "node_modules/pug-load": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pug-load/-/pug-load-3.0.0.tgz",
+      "integrity": "sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "pug-walk": "^2.0.0"
+      }
+    },
+    "node_modules/pug-parser": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-6.0.0.tgz",
+      "integrity": "sha512-ukiYM/9cH6Cml+AOl5kETtM9NR3WulyVP2y4HOU45DyMim1IeP/OOiyEWRr6qk5I5klpsBnbuHpwKmTx6WURnw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pug-error": "^2.0.0",
+        "token-stream": "1.0.0"
+      }
+    },
+    "node_modules/pug-runtime": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/pug-runtime/-/pug-runtime-3.0.1.tgz",
+      "integrity": "sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/pug-strip-comments": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pug-strip-comments/-/pug-strip-comments-2.0.0.tgz",
+      "integrity": "sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pug-error": "^2.0.0"
+      }
+    },
+    "node_modules/pug-walk": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pug-walk/-/pug-walk-2.0.0.tgz",
+      "integrity": "sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/pump": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.4.tgz",
+      "integrity": "sha512-VS7sjc6KR7e1ukRFhQSY5LM2uBWAUPiOPa/A3mkKmiMwSmRFUITt0xuj+/lesgnCv+dPIEYlkzrcyXgquIHMcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.14.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.2.tgz",
+      "integrity": "sha512-V/yCWTTF7VJ9hIh18Ugr2zhJMP01MY7c5kh4J870L7imm6/DIzBsNLTXzMwUA3yZ5b/KBqLx8Kp3uRvd7xSe3Q==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/quansync": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
+      "integrity": "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/antfu"
+        },
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/sxzz"
+        }
+      ],
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/radix3": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/radix3/-/radix3-1.1.2.tgz",
+      "integrity": "sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/range-parser": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.3.0.tgz",
+      "integrity": "sha512-hek2mFQpPuI4E1BBKrSto+BU3e3x4xuarsbiwr3+lf7p44juvFMV0XFWQAP3xUyqXA4RrXLIoaSUGbSt056ZMw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/rc9": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/rc9/-/rc9-3.0.1.tgz",
+      "integrity": "sha512-gMDyleLWVE+i6Sgtc0QbbY6pEKqYs97NGi6isHQPqYlLemPoO8dxQ3uGi0f4NiP98c+jMW6cG1Kx9dDwfvqARQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "defu": "^6.1.6",
+        "destr": "^2.0.5"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.2.8",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.8.tgz",
+      "integrity": "sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.8",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.8.tgz",
+      "integrity": "sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.8"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.7.0.tgz",
+      "integrity": "sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "abort-controller": "^3.0.0",
+        "buffer": "^6.0.3",
+        "events": "^3.3.0",
+        "process": "^0.11.10",
+        "string_decoder": "^1.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/readable-stream/node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
+    "node_modules/readdir-glob": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/readdir-glob/-/readdir-glob-1.1.3.tgz",
+      "integrity": "sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "minimatch": "^5.1.0"
+      }
+    },
+    "node_modules/readdir-glob/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/readdir-glob/node_modules/brace-expansion": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.4.tgz",
+      "integrity": "sha512-hGfVzPxthbf3+2yjg/RBs60cB0FhqBS/zvdV/4wn4/BmN0bNMMHPc4V/BbFieqf1TKAGGAHnY4eSjajCl0f2Xg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/readdir-glob/node_modules/minimatch": {
+      "version": "5.1.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.9.tgz",
+      "integrity": "sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==",
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.1.1.tgz",
+      "integrity": "sha512-Kko+Y5XQ6fM+Ce3dq3m9YGxnacYZYl9cA1wZjaF3Vbry2L3i1qVg8+CAgNPsXRArPMUMCaOR7oa9Nqntc43JKA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/recast": {
+      "version": "0.23.21",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.21.tgz",
+      "integrity": "sha512-mFAyJq9vUbSTARLZUvAEf1z3YxlvAwswbmxMx2mPA/MSm4KmpwvwvhsH/NIrZhyOuwD60Lzyw2qh83uCbgTPYw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ast-types": "^0.16.1",
+        "esprima": "~4.0.0",
+        "source-map": "~0.6.1",
+        "tiny-invariant": "^1.3.3",
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/recast/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/redis-errors": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/redis-errors/-/redis-errors-1.2.0.tgz",
+      "integrity": "sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/redis-parser": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redis-parser/-/redis-parser-3.0.0.tgz",
+      "integrity": "sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "redis-errors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/request-progress": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/request-progress/-/request-progress-3.0.0.tgz",
+      "integrity": "sha512-MnWzEHHaxHO2iWiQuHrUPBi/1WeBf5PkxQqNyNvLl9VAYSdXkP8tQ3pBSeCPD+yw0v0Aq1zosWLz0BdeXpWwZg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "throttleit": "^1.0.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.12",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/retry": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
+      "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/rolldown": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.6.tgz",
+      "integrity": "sha512-vMM4q3aixf46GiF1Kok8jDPFsEpXgFWGjUHXNkNHNm+Y2adXAG2dbX91jkti3i0ZRsOlcmbuzAz1poObSHCmUA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@oxc-project/types": "=0.147.0",
+        "@rolldown/pluginutils": "^1.0.0"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm-eabi": "1.2.6",
+        "@rolldown/binding-android-arm64": "1.2.6",
+        "@rolldown/binding-darwin-arm64": "1.2.6",
+        "@rolldown/binding-darwin-x64": "1.2.6",
+        "@rolldown/binding-freebsd-x64": "1.2.6",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.2.6",
+        "@rolldown/binding-linux-arm64-gnu": "1.2.6",
+        "@rolldown/binding-linux-arm64-musl": "1.2.6",
+        "@rolldown/binding-linux-ppc64-gnu": "1.2.6",
+        "@rolldown/binding-linux-s390x-gnu": "1.2.6",
+        "@rolldown/binding-linux-x64-gnu": "1.2.6",
+        "@rolldown/binding-linux-x64-musl": "1.2.6",
+        "@rolldown/binding-openharmony-arm64": "1.2.6",
+        "@rolldown/binding-win32-arm64-msvc": "1.2.6",
+        "@rolldown/binding-win32-x64-msvc": "1.2.6"
+      }
+    },
+    "node_modules/rolldown/node_modules/@oxc-project/types": {
+      "version": "0.147.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.147.0.tgz",
+      "integrity": "sha512-IJ3s6ltHLp45S0bh7phkX+gJO7A1Wuz2EaqpAhb8WjqDwbzMiWKHhyyT42tskaWjEYXtHtVCPpnBJVT9+dcRLg==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.63.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.63.1.tgz",
+      "integrity": "sha512-3Df9jsstwhccuEfmAMi9l8XUh/GOkVObmFTU7CCVBysEbcOZLl84jCtaAZMcPiMz2EGKsATzQcU+Xr3n/wU6cg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.9"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@napi-rs/lzma-linux-x64-gnu": "1.5.1",
+        "@rollup/rollup-android-arm-eabi": "4.63.1",
+        "@rollup/rollup-android-arm64": "4.63.1",
+        "@rollup/rollup-darwin-arm64": "4.63.1",
+        "@rollup/rollup-darwin-x64": "4.63.1",
+        "@rollup/rollup-freebsd-arm64": "4.63.1",
+        "@rollup/rollup-freebsd-x64": "4.63.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.63.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.63.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.63.1",
+        "@rollup/rollup-linux-arm64-musl": "4.63.1",
+        "@rollup/rollup-linux-loong64-gnu": "4.63.1",
+        "@rollup/rollup-linux-loong64-musl": "4.63.1",
+        "@rollup/rollup-linux-ppc64-gnu": "4.63.1",
+        "@rollup/rollup-linux-ppc64-musl": "4.63.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.63.1",
+        "@rollup/rollup-linux-riscv64-musl": "4.63.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.63.1",
+        "@rollup/rollup-linux-x64-gnu": "4.63.1",
+        "@rollup/rollup-linux-x64-musl": "4.63.1",
+        "@rollup/rollup-openbsd-x64": "4.63.1",
+        "@rollup/rollup-openharmony-arm64": "4.63.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.63.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.63.1",
+        "@rollup/rollup-win32-x64-gnu": "4.63.1",
+        "@rollup/rollup-win32-x64-msvc": "4.63.1",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/rollup-plugin-visualizer": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-7.1.1.tgz",
+      "integrity": "sha512-ThaGiHTU8XW02OkK80TrTHATraJmM9OAduU4otal+7gyXLpYEtmGBLfx5kW+EHvvLwn03YGW2NnwKUIqsYlJAA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "open": "^11.0.0",
+        "picomatch": "^4.0.5",
+        "source-map": "^0.8.0",
+        "yargs": "^18.1.0"
+      },
+      "bin": {
+        "rollup-plugin-visualizer": "dist/bin/cli.js"
+      },
+      "engines": {
+        "node": ">=22"
+      },
+      "peerDependencies": {
+        "rolldown": "1.x || ^1.0.0-beta || ^1.0.0-rc",
+        "rollup": "2.x || 3.x || 4.x"
+      },
+      "peerDependenciesMeta": {
+        "rolldown": {
+          "optional": true
+        },
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/source-map": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0.tgz",
+      "integrity": "sha512-d8EqvL+k/SOXCreS/SUzg2ciyHqBBLcN/yuRjFsbvVhHTE2pgei7oAhmPM7kWFbkX6OSMQfUq4KbkF3au9lhYQ==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/rou3": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/rou3/-/rou3-0.9.2.tgz",
+      "integrity": "sha512-3SOzvaAg8rkHrXtRjpCvCvbyO5to9oOO27Z/XqHEYXfMRVSw/qMIVdmaOk9W2lcRLtR6dlqTjo9hDeJk70QBYQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/run-applescript": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-7.1.0.tgz",
+      "integrity": "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/sass": {
+      "version": "1.103.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.103.1.tgz",
+      "integrity": "sha512-9icZURbP51S6S0QGoyaeqk9uB06GNWxsFYWfH5RgpFgqK5FA8tJcM3AdVxrZEVJ7dz+L87nG95gBKf4VuaMHGw==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^5.0.0",
+        "immutable": "^5.1.5",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
+    "node_modules/sax": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.6.1.tgz",
+      "integrity": "sha512-42tBVwLWnaQvW5zc4HbZrTuWccECCZfBi92FDuwtqxasH+JbPB3/FOKb1m222K42R4WxuxzzMsTswfzgtSu64Q==",
+      "license": "BlueOak-1.0.0",
+      "peer": true,
+      "engines": {
+        "node": ">=11.0.0"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/scule": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz",
+      "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/semver": {
+      "version": "7.8.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
+      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/send": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
+      "integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "debug": "^4.4.3",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.1",
+        "mime-types": "^3.0.2",
+        "ms": "^2.1.3",
+        "on-finished": "^2.4.1",
+        "range-parser": "^1.2.1",
+        "statuses": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/send/node_modules/mime-db": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/send/node_modules/mime-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
+      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "mime-db": "^1.54.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/serialize-javascript": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-7.1.1.tgz",
+      "integrity": "sha512-k3CMsaIvvdSwm8oLB4MXSl0wH2/cwlH7xGcnRd2DaeRmBkbzYmyT8j0tsX60DwD1eRwHTpNpH8ljKu9oUT1MeQ==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/seroval": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/seroval/-/seroval-1.6.4.tgz",
+      "integrity": "sha512-LErWMNS2RRFdu2RMA5u/PA59/IWs0XsikyEXGQ2/36iEWFrdG0ABmg17E17cikrv76891kOAMq3TkTFXpwAHXw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/serve-placeholder": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/serve-placeholder/-/serve-placeholder-2.0.2.tgz",
+      "integrity": "sha512-/TMG8SboeiQbZJWRlfTCqMs2DD3SZgWp0kDQePz9yUuCnDfDh/92gf7/PxGhzXTKBIPASIHxFcZndoNbp6QOLQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "defu": "^6.1.4"
+      }
+    },
+    "node_modules/serve-static": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.1.tgz",
+      "integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "parseurl": "^1.3.3",
+        "send": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "license": "ISC",
+      "peer": true
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shell-quote": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.10.0.tgz",
+      "integrity": "sha512-w1aiOKwKuRgtwAReIIj89puqg+I7GvX4IbLrvmhXbzQsj1+Zwi4VO3+fa6ZF91TWSjIxoEkKnMeHcLEODK5ZXA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz",
+      "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.4",
+        "side-channel-list": "^1.0.1",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
+      "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "license": "ISC"
+    },
+    "node_modules/simple-git": {
+      "version": "3.36.0",
+      "resolved": "https://registry.npmjs.org/simple-git/-/simple-git-3.36.0.tgz",
+      "integrity": "sha512-cGQjLjK8bxJw4QuYT7gxHw3/IouVESbhahSsHrX97MzCL1gu2u7oy38W6L2ZIGECEfIBG4BabsWDPjBxJENv9Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@kwsites/file-exists": "^1.1.1",
+        "@kwsites/promise-deferred": "^1.1.1",
+        "@simple-git/args-pathspec": "^1.0.3",
+        "@simple-git/argv-parser": "^1.1.0",
+        "debug": "^4.4.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/steveukx/git-js?sponsor=1"
+      }
+    },
+    "node_modules/sirv": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.2.tgz",
+      "integrity": "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/sisteransi": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/slash": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
+      "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/slice-ansi": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz",
+      "integrity": "sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/smob": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/smob/-/smob-1.6.2.tgz",
+      "integrity": "sha512-RQsvleCbF8cVHEv+xuDGaA4pOizFqJ0GgjtMSRo6oP8pnN7WsigHgVGey6aILRBKv4W2YOMHLqbKdnB6hpB9fw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.7.6",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",
+      "integrity": "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/source-map-support/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/srvx": {
+      "version": "0.11.22",
+      "resolved": "https://registry.npmjs.org/srvx/-/srvx-0.11.22.tgz",
+      "integrity": "sha512-LqZxxBDMKuMAZzFzJnDCkFOrs9MZQZr0LvHiO/SuSZVdQaXD7xQ5UWTUxheJrQPve1qk9MG2B/yttUvJxw8egQ==",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "srvx": "bin/srvx.mjs"
+      },
+      "engines": {
+        "node": ">=20.16.0"
+      }
+    },
+    "node_modules/sshpk": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.18.0.tgz",
+      "integrity": "sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "asn1": "~0.2.3",
+        "assert-plus": "^1.0.0",
+        "bcrypt-pbkdf": "^1.0.0",
+        "dashdash": "^1.12.0",
+        "ecc-jsbn": "~0.1.1",
+        "getpass": "^0.1.1",
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.0.2",
+        "tweetnacl": "~0.14.0"
+      },
+      "bin": {
+        "sshpk-conv": "bin/sshpk-conv",
+        "sshpk-sign": "bin/sshpk-sign",
+        "sshpk-verify": "bin/sshpk-verify"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/standard-as-callback": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/standard-as-callback/-/standard-as-callback-2.1.0.tgz",
+      "integrity": "sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/statuses": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/std-env": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.2.0.tgz",
+      "integrity": "sha512-oCUKSupKTHX53EyjDtuZQ64pjLJ6yYCtpmEw0goYxtjG9KpbRe8KAsl2tBUGU9DyMcJ0RwJ8GqJAFzMXcXW1Rw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/storybook": {
+      "version": "8.6.18",
+      "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.6.18.tgz",
+      "integrity": "sha512-p8seiSI6FiVY6P3V0pG+5v7c8pDMehMAFRWEhG5XqIBSQszzOjDnW2rNvm3odoLKfo3V3P6Cs6Hv9ILzymULyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/core": "8.6.18"
+      },
+      "bin": {
+        "getstorybook": "bin/index.cjs",
+        "sb": "bin/index.cjs",
+        "storybook": "bin/index.cjs"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "prettier": "^2 || ^3"
+      },
+      "peerDependenciesMeta": {
+        "prettier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/streamx": {
+      "version": "2.28.1",
+      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.28.1.tgz",
+      "integrity": "sha512-zEzXb0s5Cds7tqMH6rhZ05lcJydCWiQPEwiNngVqzsxCc962vLY4Uw+mW7od8kDH258k2Uz/JrOkdIAAhSh9VA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "events-universal": "^1.0.0",
+        "fast-fifo": "^1.3.2",
+        "text-decoder": "^1.1.0"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/strip-literal": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-4.0.0.tgz",
+      "integrity": "sha512-PaqAvfUZKBwc/SLmNZtHmzK+v19Z4O4eS3cKPeGvbIv/U3pnyEq4Tuw3/4v/FwfM8VQaEawsyCcOQ0P+kpwWWw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "js-tokens": "^10.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/strip-literal/node_modules/js-tokens": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-10.0.0.tgz",
+      "integrity": "sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/structured-clone-es": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/structured-clone-es/-/structured-clone-es-2.0.1.tgz",
+      "integrity": "sha512-10ZL5r77LhknxlP1FBiCW+VdnuWOEFLdSS2SKtjyEV+L4qP1hUEIMIZW94LC3jKxRmT/Dj7KkD1mqh/IY6lhKQ==",
+      "license": "ISC",
+      "peer": true
+    },
+    "node_modules/stylehacks": {
+      "version": "7.0.11",
+      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-7.0.11.tgz",
+      "integrity": "sha512-iODNfhXVLqc5LADs+Y6Oh5wJuK5ZcHbVng8aiK3y9pjMQdc5hLrBW0eFU6FtnpNrE6PoEg/MmFTU4waotj5WNg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "browserslist": "^4.28.2",
+        "postcss-selector-parser": "^7.1.1"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/svgo": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-4.1.0.tgz",
+      "integrity": "sha512-bkxnTg1kSU0guhIBmibA6UUhrQmPVA1XsQLN+ylCd+UWzbnLkySOcXpyk1mrl05f+pcaCx2eHb+sp6BgMZWX+Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "commander": "^11.1.0",
+        "css-select": "^6.0.0",
+        "css-tree": "^3.0.1",
+        "css-what": "^7.0.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.1.1",
+        "sax": "1.6.1"
+      },
+      "bin": {
+        "svgo": "bin/svgo.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
+    },
+    "node_modules/svgo/node_modules/commander": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
+      "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/svgo/node_modules/css-select": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-6.0.0.tgz",
+      "integrity": "sha512-rZZVSLle8v0+EY8QAkDWrKhpgt6SA5OtHsgBnsj6ZaLb5dmDVOWUDtQitd9ydxxvEjhewNudS6eTVU7uOyzvXw==",
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^7.0.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.2.2",
+        "nth-check": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/svgo/node_modules/css-what": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-7.0.0.tgz",
+      "integrity": "sha512-wD5oz5xibMOPHzy13CyGmogB3phdvcDaB5t0W/Nr5Z2O/agcB8YwOz6e2Lsp10pNDzBoDO9nVa3RGs/2BttpHQ==",
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/svgo/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/svgo/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/svgo/node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/svgo/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/tagged-tag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/tagged-tag/-/tagged-tag-1.0.0.tgz",
+      "integrity": "sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/tapable": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
+      "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/tar": {
+      "version": "7.5.22",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.22.tgz",
+      "integrity": "sha512-MFO/QzvtAOmJbkhOaCTvbGcFN9L9b+JunIsDwaKljSOdcLMea3NJ1k9Usz/rjdfSXTq4dfzfeS7W4p4YOAAHeA==",
+      "license": "BlueOak-1.0.0",
+      "peer": true,
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.1.0",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tar-stream": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.2.1.tgz",
+      "integrity": "sha512-nqsEO8zLZJvrOMdEwkA0QdCLFbetHMn95Zqu4fKwX+hkaTWJPZZOrxx/PwtxoK0MMGQmBQNRW3CPs8IFYQz4cQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "b4a": "^1.6.4",
+        "bare-fs": "^4.5.5",
+        "fast-fifo": "^1.2.0",
+        "streamx": "^2.15.0"
+      }
+    },
+    "node_modules/tar/node_modules/yallist": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+      "license": "BlueOak-1.0.0",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/teex": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/teex/-/teex-1.0.1.tgz",
+      "integrity": "sha512-eYE6iEI62Ni1H8oIa7KlDU6uQBtqr4Eajni3wX7rpfXD8ysFx8z0+dri+KWEPWpBsxXfxu58x/0jvTVT1ekOSg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "streamx": "^2.12.5"
+      }
+    },
+    "node_modules/terser": {
+      "version": "5.51.2",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.51.2.tgz",
+      "integrity": "sha512-bWnjSNscmuI+GJze6ZupnHP8G/cTcsJF+bXCeQknk2SHQsgbNJnLrqiH9jZ2W4STPVXH2mDKKRX3iwPhc9Cn/Q==",
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.15.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/text-decoder": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/text-decoder/-/text-decoder-1.2.7.tgz",
+      "integrity": "sha512-vlLytXkeP4xvEq2otHeJfSQIRyWxo/oZGEbXrtEEF9Hnmrdly59sUbzZ/QgyWuLYHctCHxFF4tRQZNQ9k60ExQ==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "b4a": "^1.6.4"
+      }
+    },
+    "node_modules/throttleit": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-1.0.1.tgz",
+      "integrity": "sha512-vDZpf9Chs9mAdfY046mcPt8fg5QSZr37hEH4TXYBnDF+izxgrbRGUAAaBvIk/fJm9aOFCGFd1EsNg5AZCbnQCQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
+    "node_modules/tinyclip": {
+      "version": "0.1.15",
+      "resolved": "https://registry.npmjs.org/tinyclip/-/tinyclip-0.1.15.tgz",
+      "integrity": "sha512-uo33abH+Ays0xYaDysoBt494Hb3hsEczMpcC0MwFl773pazORx4fmvKhclhR1wonUbB6vvpRsvVMwnhfqeMc+A==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "^16.14.0 || >= 17.3.0"
+      }
+    },
+    "node_modules/tinyexec": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.3.0.tgz",
+      "integrity": "sha512-QKAl9m8gWWGHV8jZcPeym6j+XULi6tOf1mT83WYJ4Lk2ytW/uwAWkrP0uFsdoYMdueVJ0qs26wZ+23xeB4ibNQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tldts": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.86.tgz",
+      "integrity": "sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^6.1.86"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.86.tgz",
+      "integrity": "sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tmp": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.7.tgz",
+      "integrity": "sha512-e0votIpp4Uo2AJYSzVHV6xCcawuiez3DzqDAbrTc3YxBkplN6e+dM13ZeIcZnDg/QpSuU2zfZ3rzwY8ukEnaXw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/token-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/token-stream/-/token-stream-1.0.0.tgz",
+      "integrity": "sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tough-cookie": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.1.2.tgz",
+      "integrity": "sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^6.1.32"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
+    "node_modules/ts-dedent": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.3.0.tgz",
+      "integrity": "sha512-JfJeIHke7y2egdGGgRAvpCwYFUsHlM2gPcrVOxFkznt/4uzQ7HFmvE63iFHVLBJNDuyDOQgijDK/tXH/f6Msjg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.10"
+      }
+    },
+    "node_modules/ts-map": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/ts-map/-/ts-map-1.0.3.tgz",
+      "integrity": "sha512-vDWbsl26LIcPGmDpoVzjEP6+hvHZkBkLW7JpvwbCv/5IYPJlsbzCVXY3wsCeAxAUeTclNOUZxnLdGh3VBD/J6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD"
+    },
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/tweetnacl": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+      "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
+      "dev": true,
+      "license": "Unlicense"
+    },
+    "node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/ufo": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.4.tgz",
+      "integrity": "sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/ultrahtml": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/ultrahtml/-/ultrahtml-1.7.0.tgz",
+      "integrity": "sha512-2xRd0VHoAQE4M+vF/DvFFB7pUV0ZxTW1TLi7lHQWnF/Sb5TPeEUV/l+hxcNnGO00ZXGnR0voCMmYRKQf+rvJ2g==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/uncrypto": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/uncrypto/-/uncrypto-0.1.3.tgz",
+      "integrity": "sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/unctx": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/unctx/-/unctx-2.5.0.tgz",
+      "integrity": "sha512-p+Rz9x0R7X+CYDkT+Xg8/GhpcShTlU8n+cf9OtOEf7zEQsNcCZO1dPKNRDqvUTaq+P32PMMkxWHwfrxkqfqAYg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.21",
+        "unplugin": "^2.3.11"
+      }
+    },
+    "node_modules/unctx/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/unctx/node_modules/unplugin": {
+      "version": "2.3.11",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.11.tgz",
+      "integrity": "sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "acorn": "^8.15.0",
+        "picomatch": "^4.0.3",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-8.3.0.tgz",
+      "integrity": "sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/unenv": {
+      "version": "2.0.0-rc.24",
+      "resolved": "https://registry.npmjs.org/unenv/-/unenv-2.0.0-rc.24.tgz",
+      "integrity": "sha512-i7qRCmY42zmCwnYlh9H2SvLEypEFGye5iRmEMKjcGi7zk9UquigRjFtTLz0TYqr0ZGLZhaMHl/foy1bZR+Cwlw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "pathe": "^2.0.3"
+      }
+    },
+    "node_modules/unhead": {
+      "version": "2.1.17",
+      "resolved": "https://registry.npmjs.org/unhead/-/unhead-2.1.17.tgz",
+      "integrity": "sha512-HLMKXOszRhAPBrr6VlqCeVeJq2kbC4kXwzGLEZvvojPLWNYTJw22xG7Bfwhsvs31+IBet3Wl8ADg9dwYdyphfQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "hookable": "^6.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/unhead/node_modules/hookable": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/hookable/-/hookable-6.1.1.tgz",
+      "integrity": "sha512-U9LYDy1CwhMCnprUfeAZWZGByVbhd54hwepegYTK7Pi5NvqEj63ifz5z+xukznehT7i6NIZRu89Ay1AZmRsLEQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/unicorn-magic": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.4.0.tgz",
+      "integrity": "sha512-wH590V9VNgYH9g3lH9wWjTrUoKsjLF6sGLjhR4sH1LWpLmCOH0Zf7PukhDA8BiS7KHe4oPNkcTHqYkj7SOGUOw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/unimport": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/unimport/-/unimport-6.4.0.tgz",
+      "integrity": "sha512-JJOOuNMFq8b4ZPBKwQUxEcba4MplskDzYI1Lvrf8rJfWphZTWvPNXWa493qsPngHUmub89w6C7j+SeLWTE/UIQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "acorn": "^8.18.0",
+        "escape-string-regexp": "^5.0.0",
+        "estree-walker": "^3.0.3",
+        "local-pkg": "^1.2.1",
+        "magic-string": "^1.1.0",
+        "mlly": "^1.8.2",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.5",
+        "pkg-types": "^2.3.1",
+        "scule": "^1.3.0",
+        "strip-literal": "^4.0.0",
+        "tinyglobby": "^0.2.17",
+        "unplugin": "^3.3.0",
+        "unplugin-utils": "^0.3.2"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "oxc-parser": "*",
+        "rolldown": "^1.0.0"
+      },
+      "peerDependenciesMeta": {
+        "oxc-parser": {
+          "optional": true
+        },
+        "rolldown": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unimport/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/unimport/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/unimport/node_modules/magic-string": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-1.2.3.tgz",
+      "integrity": "sha512-Bpb0W2TbLKOZ7vJnOUnVRGq3WL2p+ISV29M6hYPL1AFCpyKZpdr5ytiXoTSSxRVhg8YW7f65+6gbG8WG6PCa/g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/unimport/node_modules/unplugin": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-3.3.0.tgz",
+      "integrity": "sha512-qa66K+crbfyE6JK10GjvbJeRrOsuC/JpbnHctfyp/i4oBTxWOzJfRZyDiOk1PtErMFRu8JhsU/wPvOdBNWe5Rg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "picomatch": "^4.0.4",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "@farmfe/core": "*",
+        "@rspack/core": "*",
+        "bun-types-no-globals": "*",
+        "esbuild": "*",
+        "rolldown": "*",
+        "rollup": "*",
+        "unloader": "*",
+        "vite": "*",
+        "webpack": "*"
+      },
+      "peerDependenciesMeta": {
+        "@farmfe/core": {
+          "optional": true
+        },
+        "@rspack/core": {
+          "optional": true
+        },
+        "bun-types-no-globals": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "rolldown": {
+          "optional": true
+        },
+        "rollup": {
+          "optional": true
+        },
+        "unloader": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/unplugin": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.16.1.tgz",
+      "integrity": "sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/unplugin-utils": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.3.2.tgz",
+      "integrity": "sha512-xVToRh2CTmLk2HnEG7ac4rl1MJTT3RFkpS8B++/SnB0kXvuaavD+n3m/vrzyWQOdJNSZQACnbz01pnppbwV5BA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/unplugin-vue-router": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/unplugin-vue-router/-/unplugin-vue-router-0.19.2.tgz",
+      "integrity": "sha512-u5dgLBarxE5cyDK/hzJGfpCTLIAyiTXGlo85COuD4Nssj6G7NxS+i9mhCWz/1p/ud1eMwdcUbTXehQe41jYZUA==",
+      "deprecated": "Merged into vuejs/router. Migrate: https://router.vuejs.org/guide/migration/v4-to-v5.html",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/generator": "^7.28.5",
+        "@vue-macros/common": "^3.1.1",
+        "@vue/language-core": "^3.2.1",
+        "ast-walker-scope": "^0.8.3",
+        "chokidar": "^5.0.0",
+        "json5": "^2.2.3",
+        "local-pkg": "^1.1.2",
+        "magic-string": "^0.30.21",
+        "mlly": "^1.8.0",
+        "muggle-string": "^0.4.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "scule": "^1.3.0",
+        "tinyglobby": "^0.2.15",
+        "unplugin": "^2.3.11",
+        "unplugin-utils": "^0.3.1",
+        "yaml": "^2.8.2"
+      },
+      "peerDependencies": {
+        "@vue/compiler-sfc": "^3.5.17",
+        "vue-router": "^4.6.0"
+      },
+      "peerDependenciesMeta": {
+        "vue-router": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-vue-router/node_modules/unplugin": {
+      "version": "2.3.11",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.11.tgz",
+      "integrity": "sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "acorn": "^8.15.0",
+        "picomatch": "^4.0.3",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/unstorage": {
+      "version": "1.17.5",
+      "resolved": "https://registry.npmjs.org/unstorage/-/unstorage-1.17.5.tgz",
+      "integrity": "sha512-0i3iqvRfx29hkNntHyQvJTpf5W9dQ9ZadSoRU8+xVlhVtT7jAX57fazYO9EHvcRCfBCyi5YRya7XCDOsbTgkPg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "anymatch": "^3.1.3",
+        "chokidar": "^5.0.0",
+        "destr": "^2.0.5",
+        "h3": "^1.15.10",
+        "lru-cache": "^11.2.7",
+        "node-fetch-native": "^1.6.7",
+        "ofetch": "^1.5.1",
+        "ufo": "^1.6.3"
+      },
+      "peerDependencies": {
+        "@azure/app-configuration": "^1.8.0",
+        "@azure/cosmos": "^4.2.0",
+        "@azure/data-tables": "^13.3.0",
+        "@azure/identity": "^4.6.0",
+        "@azure/keyvault-secrets": "^4.9.0",
+        "@azure/storage-blob": "^12.26.0",
+        "@capacitor/preferences": "^6 || ^7 || ^8",
+        "@deno/kv": ">=0.9.0",
+        "@netlify/blobs": "^6.5.0 || ^7.0.0 || ^8.1.0 || ^9.0.0 || ^10.0.0",
+        "@planetscale/database": "^1.19.0",
+        "@upstash/redis": "^1.34.3",
+        "@vercel/blob": ">=0.27.1",
+        "@vercel/functions": "^2.2.12 || ^3.0.0",
+        "@vercel/kv": "^1 || ^2 || ^3",
+        "aws4fetch": "^1.0.20",
+        "db0": ">=0.2.1",
+        "idb-keyval": "^6.2.1",
+        "ioredis": "^5.4.2",
+        "uploadthing": "^7.4.4"
+      },
+      "peerDependenciesMeta": {
+        "@azure/app-configuration": {
+          "optional": true
+        },
+        "@azure/cosmos": {
+          "optional": true
+        },
+        "@azure/data-tables": {
+          "optional": true
+        },
+        "@azure/identity": {
+          "optional": true
+        },
+        "@azure/keyvault-secrets": {
+          "optional": true
+        },
+        "@azure/storage-blob": {
+          "optional": true
+        },
+        "@capacitor/preferences": {
+          "optional": true
+        },
+        "@deno/kv": {
+          "optional": true
+        },
+        "@netlify/blobs": {
+          "optional": true
+        },
+        "@planetscale/database": {
+          "optional": true
+        },
+        "@upstash/redis": {
+          "optional": true
+        },
+        "@vercel/blob": {
+          "optional": true
+        },
+        "@vercel/functions": {
+          "optional": true
+        },
+        "@vercel/kv": {
+          "optional": true
+        },
+        "aws4fetch": {
+          "optional": true
+        },
+        "db0": {
+          "optional": true
+        },
+        "idb-keyval": {
+          "optional": true
+        },
+        "ioredis": {
+          "optional": true
+        },
+        "uploadthing": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unstorage/node_modules/lru-cache": {
+      "version": "11.5.2",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.2.tgz",
+      "integrity": "sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g==",
+      "license": "BlueOak-1.0.0",
+      "peer": true,
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/untildify": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",
+      "integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/untun": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/untun/-/untun-0.2.2.tgz",
+      "integrity": "sha512-+NnOJcSiEtYsVgJmXUzQbJeRAFXJC4yPJYuh6kF9B0Rm6zunXcs/3GZOTllyocSbUDIxD6Bj7e/4ATw7sph1Sw==",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "untun": "dist/cli.mjs"
+      }
+    },
+    "node_modules/untyped": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/untyped/-/untyped-2.0.0.tgz",
+      "integrity": "sha512-nwNCjxJTjNuLCgFr42fEak5OcLuB3ecca+9ksPFNvtfYSLpjf+iJqSIaSnIile6ZPbKYxI5k2AfXqeopGudK/g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "citty": "^0.1.6",
+        "defu": "^6.1.4",
+        "jiti": "^2.4.2",
+        "knitwork": "^1.2.0",
+        "scule": "^1.3.0"
+      },
+      "bin": {
+        "untyped": "dist/cli.mjs"
+      }
+    },
+    "node_modules/untyped/node_modules/citty": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/citty/-/citty-0.1.6.tgz",
+      "integrity": "sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "consola": "^3.2.3"
+      }
+    },
+    "node_modules/unwasm": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/unwasm/-/unwasm-0.5.3.tgz",
+      "integrity": "sha512-keBgTSfp3r6+s9ZcSma+0chwxQdmLbB5+dAD9vjtB21UTMYuKAxHXCU1K2CbCtnP09EaWeRvACnXk0EJtUx+hw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "exsolve": "^1.0.8",
+        "knitwork": "^1.3.0",
+        "magic-string": "^0.30.21",
+        "mlly": "^1.8.0",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.0"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.3.2.tgz",
+      "integrity": "sha512-UQ+MSxlhRm1bzjhU+DcuXfjFO1FzNtqhK5+9Yvlp90ItDLk5vT932A0rFu619nf7RVS+Y/VeaUW1jaRDqZ8VJw==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uqr": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/uqr/-/uqr-0.1.3.tgz",
+      "integrity": "sha512-0rjE8iEJe4YmT9TOhwsZtqCMRLc5DXZUI2UEYUUg63ikBkqqE5EYWaI0etFe/5KUcmcYwLih2RND1kq+hrUJXA==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/util": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+      "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "is-arguments": "^1.0.4",
+        "is-generator-function": "^1.0.7",
+        "is-typed-array": "^1.1.3",
+        "which-typed-array": "^1.1.2"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "deprecated": "uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/verkit": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/verkit/-/verkit-0.3.2.tgz",
+      "integrity": "sha512-zj/ob3UsvJGN0whEAKFp53REA5X66hvffVqoCtVQAakJKnKlH+/PcOfMoFwIG/o4rElqLv/ycAFlx8ZlXUorCg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/verror": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+      "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
+      "dev": true,
+      "engines": [
+        "node >=0.6.0"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "assert-plus": "^1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "^1.2.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "5.4.21",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
+      "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-dev-rpc": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/vite-dev-rpc/-/vite-dev-rpc-2.0.0.tgz",
+      "integrity": "sha512-yKwbTwdHKSD2k/aGqyWpPHepo45OQc8lH3/6IfT4ZqeKE26ooKvi4WIEKzqWav8v+9Is8u1k8q54hvOmqASazA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "birpc": "^4.0.0",
+        "vite-hot-client": "^2.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vite": "^2.9.0 || ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.1 || ^7.0.0-0 || ^8.0.0"
+      }
+    },
+    "node_modules/vite-hot-client": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/vite-hot-client/-/vite-hot-client-2.2.0.tgz",
+      "integrity": "sha512-76Zs9zrHbH7M7wqeyooGQKdX+yg0pQ0xuQ1PbFp4z5a0Lzn2e5IPFoCswnmqZ4GiwqB4Jo3WcDAMO9jARTJl8w==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vite": "^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0 || ^8.0.0"
+      }
+    },
+    "node_modules/vite-node": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-5.3.0.tgz",
+      "integrity": "sha512-8f20COPYJujc3OKPX6OuyBy3ZIv2det4eRRU4GY1y2MjbeGSUmPjedxg1b72KnTagCofwvZ65ThzjxDW2AtQFQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "cac": "^6.7.14",
+        "es-module-lexer": "^2.0.0",
+        "obug": "^2.1.1",
+        "pathe": "^2.0.3",
+        "vite": "^7.3.1"
+      },
+      "bin": {
+        "vite-node": "dist/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/antfu"
+      }
+    },
+    "node_modules/vite-node/node_modules/vite": {
+      "version": "7.3.6",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.6.tgz",
+      "integrity": "sha512-4XP60spRGjSZFf1qYH+dJIkK2znL3zQfl9KkOV9MkkRR/3Dls0dxaBsQPTloEc5BLXWPL9vsOxopxyKoMmDueg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3",
+        "postcss": "^8.5.6",
+        "rollup": "^4.43.0",
+        "tinyglobby": "^0.2.15"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "lightningcss": "^1.21.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-checker": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/vite-plugin-checker/-/vite-plugin-checker-0.14.5.tgz",
+      "integrity": "sha512-c9lQ92eisUO+F7Fd93aelojmiOS+NQpPgQ1XR2LTQHox1/laZf4yAoQj+L3RA9Vgh10e2nFd9b8r2LLyYZsbpA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.29.0",
+        "chokidar": "^5.0.0",
+        "npm-run-path": "^6.0.0",
+        "picocolors": "^1.1.1",
+        "picomatch": "^4.0.4",
+        "proper-lockfile": "^4.1.2",
+        "tiny-invariant": "^1.3.3"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@biomejs/biome": ">=2.4.12",
+        "eslint": ">=9.39.4",
+        "meow": "^13.2.0 || ^14.0.0",
+        "optionator": "^0.9.4",
+        "oxlint": ">=1",
+        "stylelint": ">=16.26.1",
+        "typescript": "*",
+        "vite": ">=5.4.21",
+        "vue-tsc": "~2.2.10 || ^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@biomejs/biome": {
+          "optional": true
+        },
+        "eslint": {
+          "optional": true
+        },
+        "meow": {
+          "optional": true
+        },
+        "optionator": {
+          "optional": true
+        },
+        "oxlint": {
+          "optional": true
+        },
+        "stylelint": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        },
+        "vue-tsc": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-checker/node_modules/npm-run-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-6.0.0.tgz",
+      "integrity": "sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "path-key": "^4.0.0",
+        "unicorn-magic": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/vite-plugin-checker/node_modules/path-key": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/vite-plugin-checker/node_modules/unicorn-magic": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.3.0.tgz",
+      "integrity": "sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/vscode-uri": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.2.0.tgz",
+      "integrity": "sha512-m2gXo3bn0G1kT9InzMf07fTbqMbGtyckj3bH5ktLO+1Ssv+yiATZ4dhwaQv9UZWxJh6E9IFGnQyjgWVDWVBDrg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vue": {
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.42.tgz",
+      "integrity": "sha512-4RyHQTbQvOPs3MfvUO1Sg0YRrKNnA0mAVtvpd12Tg1fKDN7OHBUl1IqSn8zGJjK9nI3NkNp8cgTpVrSZC5TTcA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.42",
+        "@vue/compiler-sfc": "3.5.42",
+        "@vue/runtime-dom": "3.5.42",
+        "@vue/server-renderer": "3.5.42",
+        "@vue/shared": "3.5.42"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-bundle-renderer": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/vue-bundle-renderer/-/vue-bundle-renderer-2.3.2.tgz",
+      "integrity": "sha512-BtazFw0lm3N/ZE4+tre2g8G+c5wolfizu+e5jxZAcao0gcy5KJei9Yopl1svDato2poeFldVLfmLMk57Sg8rLg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ufo": "^1.6.4"
+      }
+    },
+    "node_modules/vue-component-meta": {
+      "version": "2.2.12",
+      "resolved": "https://registry.npmjs.org/vue-component-meta/-/vue-component-meta-2.2.12.tgz",
+      "integrity": "sha512-dQU6/obNSNbennJ1xd+rhDid4g3vQro+9qUBBIg8HMZH2Zs1jTpkFNxuQ3z77bOlU+ew08Qck9sbYkdSePr0Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/typescript": "2.4.15",
+        "@vue/language-core": "2.2.12",
+        "path-browserify": "^1.0.1",
+        "vue-component-type-helpers": "2.2.12"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-component-meta/node_modules/@volar/language-core": {
+      "version": "2.4.15",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.15.tgz",
+      "integrity": "sha512-3VHw+QZU0ZG9IuQmzT68IyN4hZNd9GchGPhbD9+pa8CVv7rnoOZwo7T8weIbrRmihqy3ATpdfXFnqRrfPVK6CA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/source-map": "2.4.15"
+      }
+    },
+    "node_modules/vue-component-meta/node_modules/@volar/source-map": {
+      "version": "2.4.15",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.15.tgz",
+      "integrity": "sha512-CPbMWlUN6hVZJYGcU/GSoHu4EnCHiLaXI9n8c9la6RaI9W5JHX+NqG+GSQcB0JdC2FIBLdZJwGsfKyBB71VlTg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vue-component-meta/node_modules/@vue/language-core": {
+      "version": "2.2.12",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.2.12.tgz",
+      "integrity": "sha512-IsGljWbKGU1MZpBPN+BvPAdr55YPkj2nB/TBNGNC32Vy2qLG25DYu/NBN2vNtZqdRbTRjaoYrahLrToim2NanA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "2.4.15",
+        "@vue/compiler-dom": "^3.5.0",
+        "@vue/compiler-vue2": "^2.7.16",
+        "@vue/shared": "^3.5.0",
+        "alien-signals": "^1.0.3",
+        "minimatch": "^9.0.3",
+        "muggle-string": "^0.4.1",
+        "path-browserify": "^1.0.1"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-component-meta/node_modules/alien-signals": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-1.0.13.tgz",
+      "integrity": "sha512-OGj9yyTnJEttvzhTUWuscOvtqxq5vrhF7vL9oS0xJ2mK0ItPYP1/y+vCFebfxoEyAz0++1AIwJ5CMr+Fk3nDmg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vue-component-meta/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vue-component-meta/node_modules/brace-expansion": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.4.tgz",
+      "integrity": "sha512-hGfVzPxthbf3+2yjg/RBs60cB0FhqBS/zvdV/4wn4/BmN0bNMMHPc4V/BbFieqf1TKAGGAHnY4eSjajCl0f2Xg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/vue-component-meta/node_modules/minimatch": {
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/vue-component-meta/node_modules/vue-component-type-helpers": {
+      "version": "2.2.12",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.2.12.tgz",
+      "integrity": "sha512-YbGqHZ5/eW4SnkPNR44mKVc6ZKQoRs/Rux1sxC6rdwXb4qpbOSYfDr9DsTHolOTGmIKgM9j141mZbBeg05R1pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vue-component-type-helpers": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-3.3.11.tgz",
+      "integrity": "sha512-LwcxzeliO9fkQcpJG0PoX8X5kmAhKmH9wkpDLxNabwzkQ9Zeib2YVHwFV4pcWmMLfXVfjr/dSV+DaJ3cIPgSNA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vue-devtools-stub": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/vue-devtools-stub/-/vue-devtools-stub-0.1.0.tgz",
+      "integrity": "sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/vue-docgen-api": {
+      "version": "4.79.2",
+      "resolved": "https://registry.npmjs.org/vue-docgen-api/-/vue-docgen-api-4.79.2.tgz",
+      "integrity": "sha512-n9ENAcs+40awPZMsas7STqjkZiVlIjxIKgiJr5rSohDP0/JCrD9VtlzNojafsA1MChm/hz2h3PDtUedx3lbgfA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.24.7",
+        "@babel/types": "^7.24.7",
+        "@vue/compiler-dom": "^3.2.0",
+        "@vue/compiler-sfc": "^3.2.0",
+        "ast-types": "^0.16.1",
+        "esm-resolve": "^1.0.8",
+        "hash-sum": "^2.0.0",
+        "lru-cache": "^8.0.3",
+        "pug": "^3.0.2",
+        "recast": "^0.23.1",
+        "ts-map": "^1.0.3",
+        "vue-inbrowser-compiler-independent-utils": "^4.69.0"
+      },
+      "peerDependencies": {
+        "vue": ">=2"
+      }
+    },
+    "node_modules/vue-docgen-api/node_modules/lru-cache": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-8.0.5.tgz",
+      "integrity": "sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16.14"
+      }
+    },
+    "node_modules/vue-inbrowser-compiler-independent-utils": {
+      "version": "4.71.1",
+      "resolved": "https://registry.npmjs.org/vue-inbrowser-compiler-independent-utils/-/vue-inbrowser-compiler-independent-utils-4.71.1.tgz",
+      "integrity": "sha512-K3wt3iVmNGaFEOUR4JIThQRWfqokxLfnPslD41FDZB2ajXp789+wCqJyGYlIFsvEQ2P61PInw6/ph5iiqg51gg==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": ">=2"
+      }
+    },
+    "node_modules/vue-router": {
+      "version": "4.6.4",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
+      "integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "license": "BSD-2-Clause",
+      "peer": true
+    },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "license": "MIT"
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.22",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.22.tgz",
+      "integrity": "sha512-fvO4ExWMFsqyhG3AiPAObMuY1lxaqgYcxbc49CNdWDDECOJNgQyvsOWVwbZc+qf3rzRtxojBK+CMEv0Ld5CYpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/with": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/with/-/with-7.0.2.tgz",
+      "integrity": "sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.9.6",
+        "@babel/types": "^7.9.6",
+        "assert-never": "^1.2.1",
+        "babel-walk": "3.0.0-canary-5"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/ws": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.3.tgz",
+      "integrity": "sha512-201TZ/kPWxoPr/OKWjquZR1SWKXcvxdH+e1xrx89b3YbmzLMFCLfnaG1HFIgWzJOEWZ7MvpK++odZufgYR50Rw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/wsl-utils": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-1.0.0.tgz",
+      "integrity": "sha512-Hl0ZOAs672vg+06kfujwRhoS6/jehvULrlFkuF2dRu6pHgA8U06h3xqNIqNNU1LTXPcedxByAR4GS6pwQK0mgA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "is-wsl": "^3.1.0",
+        "powershell-utils": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/wsl-utils/node_modules/powershell-utils": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/powershell-utils/-/powershell-utils-0.1.0.tgz",
+      "integrity": "sha512-dM0jVuXJPsDN6DvRpea484tCUaMiXWjuCn++HGTqUWzGDjv5tZkEZldAJ/UMlqRYGFrD/etByo4/xOuC/snX2A==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "license": "ISC",
+      "peer": true
+    },
+    "node_modules/yaml": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
+      "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
+      "license": "ISC",
+      "peer": true,
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "18.1.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-18.1.0.tgz",
+      "integrity": "sha512-2rAgRKu54VsHkqI0/tYkmluGXHD4KW7yZoycuqDQ15QOTnc2VVfy0nN/1eMhnQLO00A+dwtK20xuCnc1YGeUyg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "cliui": "^9.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "string-width": "^8.2.1",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^22.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=23"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-22.0.0.tgz",
+      "integrity": "sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=23"
+      }
+    },
+    "node_modules/yargs/node_modules/ansi-regex": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.3.0.tgz",
+      "integrity": "sha512-WpDfL7NO6j7tH88IDBNVdUJxDh9nmCteAVW9dsep846XdwF4naCBK+/tGLX3KJgcpgMRXCFlTM2hKGoK9FsdrQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/yargs/node_modules/string-width": {
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.2.2.tgz",
+      "integrity": "sha512-GaPUh5gfdrYzqeVNZvUfT23vYYxXzKYidUcnMtJg/3rxRV63EFZy3k6xfKlmfeJD0176lnUV/Usr3XcwSvFzpg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "get-east-asian-width": "^1.5.0",
+        "strip-ansi": "^7.1.2"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/yargs/node_modules/strip-ansi": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansi-regex": "^6.2.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    },
+    "node_modules/yauzl/node_modules/buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.2.2.tgz",
+      "integrity": "sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/youch": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/youch/-/youch-4.1.1.tgz",
+      "integrity": "sha512-mxW3qiSnl+GRxXsaUMzv2Mbada1Y8CDltET9UxejDQe6DBYlSekghl5U5K0ReAikcHDi0G1vKZEmmo/NWAGKLA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@poppinss/colors": "^4.1.6",
+        "@poppinss/dumper": "^0.7.0",
+        "@speed-highlight/core": "^1.2.14",
+        "cookie-es": "^3.0.1",
+        "youch-core": "^0.3.3"
+      }
+    },
+    "node_modules/youch-core": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/youch-core/-/youch-core-0.3.3.tgz",
+      "integrity": "sha512-ho7XuGjLaJ2hWHoK8yFnsUGy2Y5uDpqSTq1FkHLK4/oqKtyUU1AFbOOxY4IpC9f0fTLjwYbslUz0Po5BpD1wrA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@poppinss/exception": "^1.2.2",
+        "error-stack-parser-es": "^1.0.5"
+      }
+    },
+    "node_modules/youch/node_modules/cookie-es": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-3.1.1.tgz",
+      "integrity": "sha512-UaXxwISYJPTr9hwQxMFYZ7kNhSXboMXP+Z3TRX6f1/NyaGPfuNUZOWP1pUEb75B2HjfklIYLVRfWiFZJyC6Npg==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/zip-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-6.0.1.tgz",
+      "integrity": "sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "archiver-utils": "^5.0.0",
+        "compress-commons": "^6.0.2",
+        "readable-stream": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
index 6274a00..ba6e46d 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,8 @@
   "files": [
     "components",
     "assets",
+    "utils",
+    "composables",
     "nuxt.config.ts"
   ],
   "scripts": {
@@ -16,21 +18,28 @@
     "cypress:open": "cypress open --component"
   },
   "peerDependencies": {
+    "@dicebear/collection": "^9.2.4",
+    "@dicebear/core": "^9.2.4",
     "@heroicons/vue": "^2.2.0",
     "lucide-vue-next": "^0.525.0",
+    "markdown-it": "^14.1.1",
     "nuxt": "^3.12.4",
     "sass": "^1.89.0",
     "vue": "^3.4.0"
   },
   "devDependencies": {
     "@cypress/vite-dev-server": "^5.2.0",
+    "@dicebear/collection": "^9.2.4",
+    "@dicebear/core": "^9.2.4",
     "@heroicons/vue": "^2.2.0",
     "@storybook/addon-essentials": "^8.3.5",
     "@storybook/vue3": "^8.3.5",
     "@storybook/vue3-vite": "^8.3.5",
+    "@types/markdown-it": "^14.1.2",
     "@vitejs/plugin-vue": "^5.1.4",
     "cypress": "^13.15.0",
     "lucide-vue-next": "^0.525.0",
+    "markdown-it": "^14.1.1",
     "sass": "^1.89.0",
     "storybook": "^8.3.5",
     "vite": "^5.4.8",
diff --git a/types/budget.ts b/types/budget.ts
new file mode 100644
index 0000000..63ec88e
--- /dev/null
+++ b/types/budget.ts
@@ -0,0 +1,53 @@
+export type BudgetPeriodType = 'weekly' | 'monthly' | 'yearly' | 'custom';
+
+export type BudgetTargetType = 'category' | 'group' | 'wallet';
+
+export type BudgetStatus = 'on_track' | 'near_limit' | 'over_budget' | 'forecast_breach';
+
+export interface BudgetTarget {
+  type: BudgetTargetType;
+  id: number;
+  client_generated_id?: string | null;
+  name?: string;
+}
+
+export interface BudgetProgress {
+  period_start: string;
+  period_end: string;
+  limit: number;
+  gross_spent: number;
+  refunds: number;
+  net_spent: number;
+  rollover_in: number;
+  effective_limit: number;
+  remaining: number;
+  percent_used: number;
+  projected_spend: number;
+  status: BudgetStatus;
+  is_threshold_crossed: boolean;
+  is_forecast_breach: boolean;
+}
+
+export interface Budget {
+  id: number;
+  owner_id?: number;
+  owner_type?: string;
+  name: string;
+  slug?: string;
+  description?: string | null;
+  amount: number | string;
+  currency: string;
+  period_type: BudgetPeriodType;
+  start_date: string;
+  end_date?: string | null;
+  rollover_enabled?: boolean;
+  threshold_percent?: number;
+  forecast_alerts_enabled?: boolean;
+  is_active?: boolean;
+  targets?: BudgetTarget[];
+  progress?: BudgetProgress;
+  last_synced_at?: string | null;
+  client_generated_id?: string | null;
+  created_at?: string;
+  updated_at?: string;
+}
diff --git a/types/integration.ts b/types/integration.ts
new file mode 100644
index 0000000..ff4dfba
--- /dev/null
+++ b/types/integration.ts
@@ -0,0 +1,40 @@
+export type ExtensionSlot =
+  | 'settings.integrations'
+  | 'settings.tabs'
+  | 'onboarding.steps'
+  | 'dashboard.widgets'
+  | 'sidebar.nav';
+
+export interface IntegrationCardDescriptor {
+  title: string;
+  cta?: string;
+  description?: string;
+  href?: string;
+}
+
+export interface IntegrationUiDescriptor {
+  slots: ExtensionSlot[];
+  card?: IntegrationCardDescriptor | null;
+  onboarding?: { title?: string; description?: string; href?: string; order?: number } | null;
+  component?: string | null;
+  show_when_unconfigured?: boolean;
+}
+
+export interface Integration {
+  key: string;
+  name: string;
+  description: string | null;
+  icon: string | null;
+  configured: boolean;
+  entitled: boolean;
+  ui: IntegrationUiDescriptor | null;
+}
+
+export interface SlotContribution {
+  key: string;
+  slot: ExtensionSlot;
+  integration: Integration;
+  ui: IntegrationUiDescriptor;
+  order: number;
+  configured: boolean;
+}
diff --git a/utils/colors.ts b/utils/colors.ts
new file mode 100644
index 0000000..c1eeb5c
--- /dev/null
+++ b/utils/colors.ts
@@ -0,0 +1,128 @@
+/**
+ * Dynamic color generation utilities for consistent UI theming
+ * Migrated from webui/utils/colors.ts — Tier 0 primitive (#7)
+ * Zero domain deps; pure algorithm + constants.
+ */
+
+// Base color palette for better visual consistency
+const BASE_COLORS = [
+  '#3b82f6', // Blue
+  '#f97316', // Orange
+  '#10b981', // Green
+  '#f43f5e', // Pink
+  '#8b5cf6', // Purple
+  '#06b6d4', // Cyan
+  '#84cc16', // Lime
+  '#f59e0b', // Amber
+  '#ef4444', // Red
+  '#6366f1', // Indigo
+  '#14b8a6', // Teal
+  '#a855f7', // Violet
+  '#22d3ee', // Sky
+  '#65a30d', // Green-600
+  '#dc2626', // Red-600
+  '#7c3aed' // Violet-600
+];
+
+/**
+ * Generate a hash from a string for consistent color assignment
+ */
+function hashString(str: string): number {
+  let hash = 0;
+  if (str.length === 0) return hash;
+
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash; // Convert to 32-bit integer
+  }
+
+  return Math.abs(hash);
+}
+
+/**
+ * Generate HSL color based on input string for infinite unique colors
+ */
+function generateHSLColor(input: string, saturation = 65, lightness = 55): string {
+  const hash = hashString(input);
+  const hue = hash % 360;
+  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+}
+
+/**
+ * Get color for a given input with consistent assignment
+ * First tries base palette, then generates unique HSL colors
+ */
+export function getColorForItem(
+  item: string,
+  index?: number,
+  options: {
+    saturation?: number;
+    lightness?: number;
+    forceGenerated?: boolean;
+  } = {}
+): string {
+  const { saturation = 65, lightness = 55, forceGenerated = false } = options;
+
+  // If we have an index and it's within base colors range, use base palette
+  if (!forceGenerated && typeof index === 'number' && index < BASE_COLORS.length) {
+    return BASE_COLORS[index];
+  }
+
+  // Generate consistent color based on item name hash
+  return generateHSLColor(item, saturation, lightness);
+}
+
+/**
+ * Generate a set of colors for multiple items ensuring uniqueness and consistency
+ */
+export function generateColorPalette(
+  items: string[],
+  options: {
+    saturation?: number;
+    lightness?: number;
+    preferBasePalette?: boolean;
+  } = {}
+): Record<string, string> {
+  const { preferBasePalette = true } = options;
+  const colorMap: Record<string, string> = {};
+
+  items.forEach((item, index) => {
+    colorMap[item] = getColorForItem(item, preferBasePalette ? index : undefined, options);
+  });
+
+  return colorMap;
+}
+
+/**
+ * Get colors specifically for chart data with consistent assignment
+ */
+export function getChartColors<T extends { name: string }>(
+  data: T[],
+  options: {
+    saturation?: number;
+    lightness?: number;
+  } = {}
+): Array<T & { color: string }> {
+  return data.map((item, index) => ({
+    ...item,
+    color: getColorForItem(item.name, index, options)
+  }));
+}
+
+/**
+ * Predefined theme colors for specific contexts
+ */
+export const THEME_COLORS = {
+  income: '#10b981', // Green
+  expense: '#ef4444', // Red
+  balance: '#3b82f6', // Blue
+  neutral: '#6b7280', // Gray
+  success: '#059669', // Green-600
+  warning: '#d97706', // Orange-600
+  danger: '#dc2626', // Red-600
+  info: '#0284c7' // Sky-600
+} as const;
+
+// Re-export internals for testing/consumers that need deterministic hashing
+export { hashString, generateHSLColor, BASE_COLORS };
diff --git a/utils/currency.ts b/utils/currency.ts
new file mode 100644
index 0000000..edf7eb9
--- /dev/null
+++ b/utils/currency.ts
@@ -0,0 +1,246 @@
+/**
+ * Centralized Currency Utility
+ * Migrated from webui/utils/currency.ts — Tier 0 primitive (#8)
+ * Provides locale-aware parsing and formatting for currency amounts
+ * Zero domain deps; Intl.NumberFormat only.
+ */
+
+/**
+ * Currency symbol mappings
+ * Maps internal currency codes to display symbols
+ */
+export const CURRENCY_SYMBOL_MAP: Record<string, string> = {
+  XAF: 'FCFA',
+  USD: '$',
+  EUR: '€',
+  GBP: '£',
+  CAD: 'C$',
+  JPY: '¥',
+  CHF: 'CHF'
+  // Add more mappings as needed
+};
+
+/**
+ * Get display currency symbol from currency code
+ * @param currencyCode - The currency code (e.g., 'XAF', 'USD')
+ * @returns The display symbol (e.g., 'FCFA', '$')
+ */
+export function getCurrencySymbol(currencyCode: string): string {
+  if (!currencyCode) return '';
+  return CURRENCY_SYMBOL_MAP[currencyCode.toUpperCase()] || currencyCode;
+}
+
+/**
+ * Parse an amount string that may contain currency symbols and locale-specific formatting
+ * Handles multiple formats:
+ * - "1,234.56 USD" (English format with currency)
+ * - "1.234,56 EUR" (European format with currency)
+ * - "5000 XAF" (simple format)
+ * - "1234.56" (no currency)
+ *
+ * @param amountStr - The amount string to parse
+ * @returns Object with numeric value and extracted currency code
+ */
+export function parseAmount(amountStr: string | number): { value: number; currency: string } {
+  // Handle numeric input directly
+  if (typeof amountStr === 'number') {
+    return { value: amountStr, currency: '' };
+  }
+
+  if (!amountStr || typeof amountStr !== 'string') {
+    return { value: 0, currency: '' };
+  }
+
+  try {
+    // Extract currency (last word/token in the string, typically 3 uppercase letters)
+    const currencyMatch = amountStr.match(/\b([A-Z]{3})\b\s*$/);
+    const currency = currencyMatch ? currencyMatch[1] : '';
+
+    // Remove currency and extract only numeric characters and separators
+    const numericPart = amountStr
+      .replace(/[A-Z]{3}\s*$/i, '')
+      .replace(/[^\d.,-]/g, '')
+      .trim();
+
+    if (!numericPart) {
+      return { value: 0, currency };
+    }
+
+    let value = 0;
+
+    // Count dots and commas
+    const dotCount = (numericPart.match(/\./g) || []).length;
+    const commaCount = (numericPart.match(/,/g) || []).length;
+
+    if (dotCount === 0 && commaCount === 0) {
+      // Simple integer: "1234"
+      value = parseFloat(numericPart);
+    } else if (dotCount === 0 && commaCount === 1) {
+      // One comma: could be "1234,56" (decimal) or "1,234" (thousands)
+      const commaPos = numericPart.lastIndexOf(',');
+      const afterComma = numericPart.substring(commaPos + 1);
+
+      if (afterComma.length <= 2) {
+        // Likely decimal separator (European format): "1234,56"
+        value = parseFloat(numericPart.replace(',', '.'));
+      } else {
+        // Likely thousands separator: "1,234"
+        value = parseFloat(numericPart.replace(',', ''));
+      }
+    } else if (commaCount === 0 && dotCount === 1) {
+      // One dot: could be "1234.56" (decimal) or "1.234" (thousands)
+      const dotPos = numericPart.lastIndexOf('.');
+      const afterDot = numericPart.substring(dotPos + 1);
+
+      if (afterDot.length <= 2) {
+        // Likely decimal separator (English format): "1234.56"
+        value = parseFloat(numericPart);
+      } else {
+        // Likely thousands separator: "1.234"
+        value = parseFloat(numericPart.replace('.', ''));
+      }
+    } else {
+      // Multiple separators - determine which is the decimal separator
+      // Rule: the last separator is the decimal separator
+      const lastDot = numericPart.lastIndexOf('.');
+      const lastComma = numericPart.lastIndexOf(',');
+
+      if (lastDot > lastComma) {
+        // Dot is decimal separator: "1,234.56" or "1.234.56"
+        value = parseFloat(numericPart.replace(/,/g, ''));
+      } else {
+        // Comma is decimal separator: "1.234,56"
+        value = parseFloat(numericPart.replace(/\./g, '').replace(',', '.'));
+      }
+    }
+
+    return {
+      value: isNaN(value) ? 0 : value,
+      currency
+    };
+  } catch (error) {
+    console.error('Error parsing amount:', amountStr, error);
+    return { value: 0, currency: '' };
+  }
+}
+
+export interface FormatAmountOptions {
+  /** The locale to use for formatting (defaults to browser locale) */
+  locale?: string;
+  /** Whether to use compact notation (1.2k instead of 1,200) */
+  compact?: boolean;
+  /** Threshold for compact notation in base units (default: 1000) */
+  compactThreshold?: number;
+  /** Minimum fraction digits (default: 0) */
+  minimumFractionDigits?: number;
+  /** Maximum fraction digits (default: 2) */
+  maximumFractionDigits?: number;
+  /** Whether to show currency symbol/code (default: true) */
+  showCurrency?: boolean;
+}
+
+/**
+ * Format amount with proper locale and optional compact notation
+ *
+ * @param amount - The amount to format (string or number)
+ * @param options - Formatting options
+ * @returns Formatted amount string with currency
+ *
+ * @example
+ * formatAmount("1234.56 USD") // "1,234.56 $"
+ * formatAmount(1234.56, { compact: true }) // "1.2k"
+ * formatAmount("5000 XAF", { locale: 'fr-FR' }) // "5 000 FCFA"
+ */
+export function formatAmount(amount: string | number, options: FormatAmountOptions = {}): string {
+  const {
+    locale = typeof navigator !== 'undefined' ? navigator.language : 'en-US',
+    compact = false,
+    compactThreshold = 1000,
+    minimumFractionDigits = 0,
+    maximumFractionDigits = 2,
+    showCurrency = true
+  } = options;
+
+  // Parse the amount if it's a string
+  const { value, currency } =
+    typeof amount === 'string' ? parseAmount(amount) : { value: amount, currency: '' };
+
+  // Get display currency symbol
+  const displayCurrency = getCurrencySymbol(currency);
+
+  // Determine if we should use compact notation
+  const useCompact = compact && Math.abs(value) >= compactThreshold;
+
+  try {
+    const formatterOptions: Intl.NumberFormatOptions = {
+      minimumFractionDigits,
+      maximumFractionDigits
+    };
+
+    // Add compact notation if supported and requested
+    if (useCompact) {
+      formatterOptions.notation = 'compact';
+      formatterOptions.compactDisplay = 'short';
+    }
+
+    const formatter = new Intl.NumberFormat(locale, formatterOptions);
+    const formattedNumber = formatter.format(value);
+
+    // Return with or without currency
+    if (showCurrency && displayCurrency) {
+      return `${formattedNumber} ${displayCurrency}`;
+    }
+
+    return formattedNumber;
+  } catch (error) {
+    console.error('Error formatting amount:', amount, error);
+    // Fallback to simple formatting
+    const rounded = Math.round(value * 100) / 100;
+    return showCurrency && displayCurrency ? `${rounded} ${displayCurrency}` : String(rounded);
+  }
+}
+
+/**
+ * Format amount for compact display (mobile cards, summaries)
+ * Always uses compact notation for numbers >= 1000
+ *
+ * @param amount - The amount to format
+ * @returns Formatted amount string (e.g., "1.2k FCFA", "450 $")
+ */
+export function formatShortAmount(amount: string | number): string {
+  return formatAmount(amount, {
+    compact: true,
+    compactThreshold: 1000,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2
+  });
+}
+
+/**
+ * Format amount for full display (tables, detailed views)
+ * Never uses compact notation, shows all digits with locale formatting
+ *
+ * @param amount - The amount to format
+ * @returns Formatted amount string (e.g., "1,234.56 $")
+ */
+export function formatFullAmount(amount: string | number): string {
+  return formatAmount(amount, {
+    compact: false,
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  });
+}
+
+/**
+ * Format amount without currency symbol (for input fields, calculations)
+ *
+ * @param amount - The amount to format
+ * @returns Formatted number without currency
+ */
+export function formatAmountNoCurrency(amount: string | number): string {
+  return formatAmount(amount, {
+    showCurrency: false,
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  });
+}