diff --git a/.claude/commands/frontend.md b/.claude/commands/frontend.md
index 2678b3a6..d9ad9df0 100644
--- a/.claude/commands/frontend.md
+++ b/.claude/commands/frontend.md
@@ -2,6 +2,17 @@
 
 Eres un arquitecto frontend experto. Esta skill se activa cuando el usuario pide crear un proyecto frontend, una app con UI, un componente nuevo, o una feature frontend. Tu trabajo es garantizar que TODO el frontend se construya usando el sistema de funciones reutilizables del registry y las mejores practicas actuales.
 
+## Stack
+
+- **pnpm** — gestor de paquetes
+- **React 19** — UI library
+- **Vite 8** — build tool
+- **Mantine v9** — component library + styling (props, no CSS manual)
+- **Phosphor Icons** — `@phosphor-icons/react`
+- **Recharts** — charts (via `@mantine/charts`)
+
+**NO usar:** Tailwind, shadcn, CVA, clsx, cn(), lucide-react, styled-components, emotion, CSS-in-JS runtime.
+
 ---
 
 ## PASO 1: Consultar el registry (OBLIGATORIO)
@@ -56,11 +67,12 @@ apps/{nombre}/
     package.json
     vite.config.ts
     tsconfig.json
+    postcss.config.cjs
     index.html
     src/
-      main.tsx              # Entry point
-      App.tsx               # Root con ThemeProvider + Router
-      app.css               # Tokens CSS — NUNCA hardcodear colores
+      main.tsx              # Entry point con MantineProvider
+      App.tsx               # Root con Router
+      app.css               # Minimal (font-smoothing solo)
       features/             # Feature-based co-location
         {feature}/
           components/       # Componentes del feature
@@ -87,21 +99,20 @@ apps/{nombre}/
     "preview": "vite preview --host"
   },
   "dependencies": {
-    "@base-ui/react": "^1.3.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^0.577.0",
+    "@mantine/core": "^9.0.0",
+    "@mantine/hooks": "^9.0.0",
+    "@mantine/notifications": "^9.0.0",
+    "@phosphor-icons/react": "^2.1.10",
     "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "recharts": "^2.15.0",
-    "tailwind-merge": "^3.5.0"
+    "react-dom": "^19.2.4"
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.2.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.0",
-    "tailwindcss": "^4.2.2",
+    "postcss": "^8.5.8",
+    "postcss-preset-mantine": "^1.18.0",
+    "postcss-simple-vars": "^7.0.1",
     "typescript": "~5.9.3",
     "vite": "^8.0.0"
   }
@@ -109,10 +120,10 @@ apps/{nombre}/
 ```
 
 Agregar dependencias extras segun necesidad:
+- **Charts**: `@mantine/charts`, `recharts`
 - **Tablas**: `@tanstack/react-table`
-- **Charts**: `recharts`
-- **Iconos extra**: `@phosphor-icons/react`
 - **Forms**: `react-hook-form`, `@hookform/resolvers`, `zod`
+- **Dates**: `@mantine/dates`, `dayjs`
 - **Router**: `react-router` o `@tanstack/react-router`
 - **State**: `zustand` (client state), `@tanstack/react-query` (server state)
 - **Wails**: los hooks de Wails ya estan en `@fn_library` (useWailsQuery, useWailsMutation, useWailsStream, useWailsEvent, WailsProvider)
@@ -122,11 +133,10 @@ Agregar dependencias extras segun necesidad:
 ```ts
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
-import tailwindcss from '@tailwindcss/vite'
 import { resolve } from 'path'
 
 export default defineConfig({
-  plugins: [react(), tailwindcss()],
+  plugins: [react()],
   resolve: {
     alias: {
       '@': resolve(__dirname, './src'),
@@ -134,6 +144,9 @@ export default defineConfig({
     },
     dedupe: ['react', 'react-dom'],
   },
+  css: {
+    postcss: resolve(__dirname, './postcss.config.cjs'),
+  },
   build: {
     target: 'es2022',
     rollupOptions: {
@@ -147,108 +160,32 @@ export default defineConfig({
 })
 ```
 
+### postcss.config.cjs base
+
+```js
+module.exports = {
+  plugins: {
+    'postcss-preset-mantine': {},
+    'postcss-simple-vars': {
+      variables: {
+        'mantine-breakpoint-xs': '36em',
+        'mantine-breakpoint-sm': '48em',
+        'mantine-breakpoint-md': '62em',
+        'mantine-breakpoint-lg': '75em',
+        'mantine-breakpoint-xl': '88em',
+      },
+    },
+  },
+};
+```
+
 ### app.css base
 
 ```css
-@import "tailwindcss";
-
-@theme inline {
-  --font-sans: 'Geist Variable', ui-sans-serif, system-ui, sans-serif;
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) * 0.6);
-  --radius-md: calc(var(--radius) * 0.8);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) * 1.4);
-}
-
-/* Dark theme (default) */
-:root,
-[data-theme="dark"] {
-  --background: oklch(8% 0.015 260);
-  --foreground: oklch(95% 0.01 260);
-  --muted: oklch(18% 0.02 260);
-  --muted-foreground: oklch(60% 0.02 260);
-  --border: oklch(15% 0.01 260);
-  --primary: oklch(65% 0.22 260);
-  --primary-foreground: oklch(98% 0.01 260);
-  --secondary: oklch(20% 0.02 260);
-  --secondary-foreground: oklch(95% 0.01 260);
-  --accent: oklch(18% 0.03 260);
-  --accent-foreground: oklch(95% 0.01 260);
-  --destructive: oklch(55% 0.22 25);
-  --destructive-foreground: oklch(98% 0.01 260);
-  --card: oklch(11% 0.015 260);
-  --card-foreground: oklch(95% 0.01 260);
-  --popover: oklch(12% 0.015 260);
-  --popover-foreground: oklch(95% 0.01 260);
-  --ring: oklch(65% 0.22 260);
-  --input: oklch(22% 0.02 260);
-  --radius: 0.5rem;
-  --chart-1: oklch(62% 0.19 260);
-  --chart-2: oklch(65% 0.2 155);
-  --chart-3: oklch(75% 0.18 85);
-  --chart-4: oklch(60% 0.22 25);
-  --chart-5: oklch(60% 0.2 300);
-}
-
-/* Light theme */
-[data-theme="light"] {
-  --background: oklch(99% 0.005 260);
-  --foreground: oklch(15% 0.01 260);
-  --muted: oklch(95% 0.01 260);
-  --muted-foreground: oklch(45% 0.02 260);
-  --border: oklch(90% 0.01 260);
-  --primary: oklch(50% 0.22 260);
-  --primary-foreground: oklch(98% 0.01 260);
-  --secondary: oklch(95% 0.01 260);
-  --secondary-foreground: oklch(20% 0.01 260);
-  --accent: oklch(95% 0.02 260);
-  --accent-foreground: oklch(20% 0.01 260);
-  --destructive: oklch(55% 0.22 25);
-  --destructive-foreground: oklch(98% 0.01 260);
-  --card: oklch(100% 0 0);
-  --card-foreground: oklch(15% 0.01 260);
-  --popover: oklch(100% 0 0);
-  --popover-foreground: oklch(15% 0.01 260);
-  --ring: oklch(50% 0.22 260);
-  --input: oklch(90% 0.01 260);
-  --radius: 0.5rem;
-  --chart-1: oklch(55% 0.22 260);
-  --chart-2: oklch(55% 0.2 155);
-  --chart-3: oklch(65% 0.18 85);
-  --chart-4: oklch(55% 0.22 25);
-  --chart-5: oklch(55% 0.2 300);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
+/* Minimal — Mantine handles all theming via MantineProvider */
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -259,18 +196,33 @@ export default defineConfig({
 }
 ```
 
-### App.tsx base
+### main.tsx base
 
 ```tsx
-import { ThemeProvider } from '@fn_library'
+import '@mantine/core/styles.css'
+import '@mantine/notifications/styles.css'
+import './app.css'
 
-export default function App() {
-  return (
-    <ThemeProvider defaultTheme="dark">
-      {/* Router y contenido aqui */}
-    </ThemeProvider>
-  )
-}
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { MantineProvider, createTheme } from '@mantine/core'
+import { Notifications } from '@mantine/notifications'
+import App from './App'
+
+const theme = createTheme({
+  primaryColor: 'blue',
+  defaultRadius: 'md',
+  // Customize colors, fonts, etc. here
+})
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <MantineProvider theme={theme} defaultColorScheme="dark">
+      <Notifications />
+      <App />
+    </MantineProvider>
+  </React.StrictMode>,
+)
 ```
 
 ### Despues del scaffold
@@ -287,17 +239,16 @@ Para componentes nuevos que van al registry en `frontend/functions/`.
 
 ### Reglas de implementacion
 
-1. **Headless first**: usar `@base-ui/react` como primitivo si el componente es interactivo (dialog, select, tooltip, etc.)
-2. **CVA para variantes**: SIEMPRE usar `class-variance-authority` para definir variantes
-3. **cn() para clases**: SIEMPRE usar `cn()` de `frontend/functions/core/cn.ts` para componer classNames
-4. **CSS variables**: NUNCA hex/rgb/oklch inline en el componente — solo clases Tailwind que mapean a CSS variables (`bg-primary`, `text-muted-foreground`, `border-border`)
-5. **Props tipadas**: usar `React.ComponentPropsWithoutRef<"element">` para HTML props spreading
+1. **Mantine first**: wrappear componentes de Mantine. Solo crear desde cero si Mantine no tiene equivalente.
+2. **Styling via props**: usar props de Mantine (`size`, `color`, `variant`, `p`, `m`, `fw`, `gap`, etc.) y el style system. NUNCA clases CSS manuales ni Tailwind.
+3. **CSS variables de Mantine**: si necesitas styles inline, usar `var(--mantine-color-*)`, `var(--mantine-spacing-*)`, etc.
+4. **Iconos**: usar `@phosphor-icons/react`, no lucide-react ni @tabler/icons-react.
+5. **Props tipadas**: usar `React.ComponentPropsWithoutRef<"element">` para HTML props spreading.
 6. **Accesibilidad**:
-   - Elementos semanticos: `<button>` para acciones, `<a>` para navegacion, `<dialog>` para modales
+   - Elementos semanticos: `<button>` para acciones, `<a>` para navegacion
    - NUNCA `<div onClick>` para elementos interactivos
-   - `aria-label` o `aria-labelledby` en todo componente interactivo
+   - `aria-label` en botones de solo icono
    - `aria-invalid` + `aria-describedby` en inputs con error
-   - `role="status"` para loading states
    - Focus management en modales/popovers
 7. **Discriminated unions** cuando las props cambian segun variante:
 
@@ -311,54 +262,19 @@ type Props = { size?: 'sm' | 'md' | 'lg'; children: React.ReactNode } & (
 ### Patron de archivo .tsx
 
 ```tsx
-import * as React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '../core/cn'
+import { Select, type SelectProps } from '@mantine/core'
 
-const componentVariants = cva(
-  'base-classes-here', // clases base
-  {
-    variants: {
-      variant: {
-        default: 'classes...',
-        secondary: 'classes...',
-      },
-      size: {
-        sm: 'classes...',
-        md: 'classes...',
-        lg: 'classes...',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'md',
-    },
-  }
-)
-
-interface ComponentProps
-  extends React.ComponentPropsWithoutRef<'div'>,
-    VariantProps<typeof componentVariants> {
-  // props adicionales con JSDoc
-  /** Descripcion de la prop */
+// Re-export con defaults o logica adicional si necesario
+interface MySelectProps extends Omit<SelectProps, 'xxx'> {
   customProp?: string
 }
 
-const Component = React.forwardRef<HTMLDivElement, ComponentProps>(
-  ({ className, variant, size, customProp, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cn(componentVariants({ variant, size }), className)}
-        {...props}
-      />
-    )
-  }
-)
-Component.displayName = 'Component'
+function MySelect({ customProp, ...props }: MySelectProps) {
+  return <Select {...props} />
+}
 
-export { Component, componentVariants }
-export type { ComponentProps }
+export { MySelect }
+export type { MySelectProps }
 ```
 
 ### Patron de archivo .md
@@ -376,12 +292,12 @@ purity: impure
 signature: "ComponentName(props: ComponentProps): JSX.Element"
 description: "Descripcion concisa de que hace el componente"
 tags: [component, ui, ...]
-uses_functions: [cn_ts_core]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: ["@base-ui/react", "class-variance-authority"]
+imports: ["@mantine/core"]
 tested: false
 tests: []
 test_file_path: ""
@@ -391,14 +307,10 @@ props:
     type: "'default' | 'secondary'"
     required: false
     description: "Estilo visual"
-  - name: className
-    type: "string"
-    required: false
-    description: "Clases CSS adicionales"
 emits: []
 has_state: false
 framework: react
-variant: [default, secondary]
+variant: [default]
 ---
 
 ## Ejemplo
@@ -493,7 +405,7 @@ function useFeatureData() {
 
 ```tsx
 import { lazy, Suspense } from 'react'
-import { Skeleton } from '@fn_library'
+import { Skeleton } from '@mantine/core'
 
 const FeaturePage = lazy(() => import('./features/feature/components/FeaturePage'))
 
@@ -501,7 +413,7 @@ function AppRoutes() {
   return (
     <Routes>
       <Route path="/feature" element={
-        <Suspense fallback={<Skeleton className="h-screen w-full" />}>
+        <Suspense fallback={<Skeleton height="100vh" />}>
           <FeaturePage />
         </Suspense>
       } />
@@ -517,14 +429,19 @@ function AppRoutes() {
 Antes de dar por terminado cualquier trabajo frontend, verificar:
 
 ### Colores y estilos
-- [ ] CERO colores hardcodeados (no hex, no rgb, no oklch inline en componentes)
-- [ ] Solo clases Tailwind mapeadas a CSS variables: `bg-primary`, `text-foreground`, `border-border`, etc.
-- [ ] `cn()` usado para merge de clases en todo componente
-- [ ] CVA usado para variantes (no condicionales manuales con ternarios)
+- [ ] CERO colores hardcodeados en componentes (no hex, no rgb inline)
+- [ ] Styling via props de Mantine (`size`, `color`, `variant`, `p`, `m`, `fw`, `gap`, etc.)
+- [ ] Si se necesitan styles inline, usar CSS variables de Mantine (`var(--mantine-color-*)`)
+- [ ] NO clases CSS manuales, NO Tailwind, NO cn(), NO CVA
 
 ### Componentes del registry
 - [ ] Verificado que no se esta recreando algo que ya existe en `@fn_library` (`frontend/functions/ui/`)
-- [ ] Componentes de `@fn_library` usados donde aplica: Alert, Badge, Button, Card, Dialog, Input, Label, Select, SimpleSelect, Skeleton, Sparkline, Tabs, Tooltip, FormField, PageHeader, ProgressBar, KPICard, ThemeProvider, DashboardLayout, DataTable, charts (AreaChart, BarChart, LineChart, PieChart, ChartContainer), hooks Wails (useWailsQuery, useWailsMutation, useWailsStream, useWailsEvent)
+- [ ] Componentes de `@fn_library` usados donde aplica: Card, Select, SimpleSelect, KPICard, Sparkline, DashboardLayout, DataTable, charts, hooks Wails
+- [ ] Componentes de Mantine usados directamente donde `@fn_library` no tiene wrapper: Button, TextInput, Table, Alert, Badge, Skeleton, Tabs, Tooltip, Group, Stack, Grid, Box, Paper, AppShell, Container
+
+### Iconos
+- [ ] Usando `@phosphor-icons/react` para iconos
+- [ ] NO lucide-react, NO @tabler/icons-react
 
 ### TypeScript
 - [ ] Props interfaces con `React.ComponentPropsWithoutRef` para HTML spreading
@@ -533,7 +450,7 @@ Antes de dar por terminado cualquier trabajo frontend, verificar:
 - [ ] No `any` — usar `unknown` + type guards si es necesario
 
 ### Accesibilidad
-- [ ] Elementos semanticos (button, a, dialog — no div onClick)
+- [ ] Elementos semanticos (button, a — no div onClick)
 - [ ] `aria-label` en botones de solo icono
 - [ ] `aria-invalid` + `aria-describedby` en inputs con validacion
 - [ ] Focus trap en modales y popovers
@@ -555,15 +472,15 @@ Antes de dar por terminado cualquier trabajo frontend, verificar:
 
 ## ANTI-PATRONES (nunca hacer)
 
-1. **`<div onClick={...}>`** → usar `<button>` o Base-UI primitivo
-2. **`style={{ color: '#3b82f6' }}`** → usar `className="text-primary"`
-3. **`import Button from './MyButton'`** cuando existe en la lib → usar `import { Button } from '@fn_library'`
+1. **`<div onClick={...}>`** → usar `<button>` o componente Mantine
+2. **`style={{ color: '#3b82f6' }}`** → usar prop `c="blue"` o `var(--mantine-color-blue-6)`
+3. **`import Button from './MyButton'`** cuando existe en Mantine → usar `import { Button } from '@mantine/core'`
 4. **Estado global para todo** → segmentar: server state (React Query), client state (Zustand), form state (React Hook Form), URL state (search params)
 5. **`index.ts` en la raiz de `src/`** que re-exporta todo → mata tree-shaking
 6. **`// @ts-ignore`** → arreglar el tipo
-7. **CSS-in-JS runtime** (styled-components, emotion) → usar Tailwind
-8. **Instalar shadcn/ui como dependencia** → los componentes ya estan en el registry, usar `@fn_library`
-9. **Crear utilidades que ya existen**: `cn()`, `getSeriesColor()`, `ChartContainer`, `ThemeProvider` ya estan en `@fn_library`
-10. **Colores de chart hardcodeados** → usar `--chart-1` a `--chart-5` o `getSeriesColor()`
+7. **CSS-in-JS runtime** (styled-components, emotion) → usar props de Mantine
+8. **Tailwind, CVA, cn(), clsx** → usar props de Mantine y su style system
+9. **Crear utilidades que ya existen**: `getSeriesColor()`, `ChartContainer`, `DashboardLayout`, `DataTable` ya estan en `@fn_library`
+10. **Colores de chart hardcodeados** → usar `@mantine/charts` color system o `getSeriesColor()`
 
 $ARGUMENTS
diff --git a/.claude/rules/frontend_theming.md b/.claude/rules/frontend_theming.md
index cafe0434..9dbb2fb3 100644
--- a/.claude/rules/frontend_theming.md
+++ b/.claude/rules/frontend_theming.md
@@ -1,3 +1,11 @@
 En todos los frontends se usan los componentes de `@fn_library` (alias a `frontend/functions/ui/`) antes que elementos HTML nativos o librerias externas.
 
-En todos los frontends se usa el sistema de temas basado en CSS variables (`--background`, `--foreground`, `--input`, `--border`, `--popover`, etc.) definidas en `app.css`. Los componentes deben leer estas variables para adaptarse al tema activo. Nunca hardcodear colores.
+El sistema de UI es Mantine v9. Todos los componentes de @fn_library wrappean componentes de Mantine.
+
+**Theming:** Cada app define su tema con `createTheme()` de `@mantine/core` y lo pasa a `MantineProvider` (o `FnMantineProvider` de @fn_library). No se usan CSS variables custom — Mantine genera las suyas automaticamente (`--mantine-color-*`).
+
+**Styling:** No se usa Tailwind, CVA, cn(), ni clases CSS manuales. Los componentes se estilizan con props de Mantine (`size`, `color`, `variant`, `p`, `m`, `fw`, etc.) y el style system de Mantine.
+
+**Iconos:** Se usa `@tabler/icons-react` (el set nativo de Mantine), no lucide-react.
+
+**Layout:** Se usan los componentes de layout de Mantine: `Group`, `Stack`, `Grid`, `Flex`, `SimpleGrid`, `AppShell`, `Container`, `Box`, `Paper`.
diff --git a/frontend/components.json b/frontend/components.json
deleted file mode 100644
index 6167d26f..00000000
--- a/frontend/components.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "base-nova",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "src/globals.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "iconLibrary": "lucide",
-  "rtl": false,
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "menuColor": "default",
-  "menuAccent": "subtle",
-  "registries": {}
-}
diff --git a/frontend/functions/core/chart_colors.ts b/frontend/functions/core/chart_colors.ts
index fc55e8cf..062443b2 100644
--- a/frontend/functions/core/chart_colors.ts
+++ b/frontend/functions/core/chart_colors.ts
@@ -1,11 +1,11 @@
 export const chartColors = [
-  'hsl(var(--chart-1, 220 70% 50%))',
-  'hsl(var(--chart-2, 160 60% 45%))',
-  'hsl(var(--chart-3, 30 80% 55%))',
-  'hsl(var(--chart-4, 280 65% 60%))',
-  'hsl(var(--chart-5, 340 75% 55%))',
+  '#3b82f6',
+  '#10b981',
+  '#f59e0b',
+  '#8b5cf6',
+  '#ef4444',
 ]
 
 export function getChartColor(index: number): string {
-  return chartColors[index % chartColors.length]
+  return chartColors[index % chartColors.length]!
 }
diff --git a/frontend/functions/core/cn.md b/frontend/functions/core/cn.md
deleted file mode 100644
index f36db57f..00000000
--- a/frontend/functions/core/cn.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-name: cn
-kind: function
-lang: ts
-domain: core
-version: "1.0.0"
-purity: pure
-signature: "cn(...inputs: ClassValue[]): string"
-description: "Combina clases CSS con clsx y resuelve conflictos Tailwind con tailwind-merge. Utilidad fundamental para composición de estilos."
-tags: [css, tailwind, classname, merge, utility]
-uses_functions: []
-uses_types: []
-returns: []
-returns_optional: false
-error_type: ""
-imports: [clsx, tailwind-merge]
-params:
-  - name: inputs
-    desc: "Clases CSS en cualquier formato: strings, arrays, objetos con condiciones booleanas"
-output: "String con clases CSS combinadas y mergeadas, sin duplicados y conflictos Tailwind resueltos"
-tested: false
-tests: []
-test_file_path: ""
-file_path: "frontend/functions/core/cn.ts"
-source_repo: "https://gitea-dgg044oo04woo4ggcsws4gk0.organic-machine.com/Bl4cksmith/Frontend_Library"
-source_license: "MIT"
-source_file: "frontend/src/lib/utils.ts"
----
-
-## Ejemplo
-
-```typescript
-cn("px-4 py-2", "px-6")              // "px-6 py-2" (tailwind-merge resuelve conflicto)
-cn("text-red-500", false && "hidden") // "text-red-500" (clsx filtra falsy)
-cn("rounded-lg", className)           // composición con className externo
-```
-
-## Notas
-
-Base de todo el sistema de estilos. Todos los componentes la usan para componer className.
diff --git a/frontend/functions/core/cn.ts b/frontend/functions/core/cn.ts
deleted file mode 100644
index e3155433..00000000
--- a/frontend/functions/core/cn.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]): string {
-  return twMerge(clsx(inputs))
-}
diff --git a/frontend/functions/core/generate_theme_css.md b/frontend/functions/core/generate_theme_css.md
deleted file mode 100644
index 7b971d57..00000000
--- a/frontend/functions/core/generate_theme_css.md
+++ /dev/null
@@ -1,69 +0,0 @@
----
-name: generate_theme_css
-kind: function
-lang: ts
-domain: core
-version: "1.0.0"
-purity: pure
-signature: "generateThemeCss(colors: Record<string, string>, selector?: string): string"
-description: "Genera un bloque CSS con variables de tema a partir de un objeto de tokens. Convierte claves camelCase a kebab-case automaticamente. Pura — solo transforma datos, no accede al DOM."
-tags: [theme, css, generator, pure]
-uses_functions: []
-uses_types: []
-returns: []
-returns_optional: false
-error_type: ""
-imports: []
-params:
-  - name: colors
-    desc: "Objeto con pares clave-valor de nombre variable CSS a valor de color"
-  - name: selector
-    desc: "Selector CSS donde inyectar variables (':root' por defecto)"
-output: "String con bloque CSS completo conteniendo definiciones de variables de tema"
-tested: false
-tests: []
-test_file_path: ""
-file_path: "frontend/functions/core/generate_theme_css.ts"
----
-
-## Ejemplo
-
-```typescript
-import { generateThemeCss } from './generate_theme_css'
-import { themeConfigToColors } from './theme_config_to_colors'
-import { darkTheme } from '../ui/themes'
-
-// Generar CSS para inyectar en <style>
-const colors = themeConfigToColors(darkTheme)
-const css = generateThemeCss(colors)
-// Output:
-// :root {
-//   --background: oklch(8% 0.015 260);
-//   --foreground: oklch(95% 0.01 260);
-//   --card: oklch(12% 0.015 260);
-//   --card-foreground: oklch(95% 0.01 260);
-//   ...
-// }
-
-// Inyectar en el documento
-const style = document.createElement('style')
-style.textContent = css
-document.head.appendChild(style)
-
-// Generar para selector especifico (dark mode)
-const darkCss = generateThemeCss(colors, '.dark')
-// Output: .dark { --background: oklch(...); ... }
-
-// Generar para multiples selectores
-const lightCss = generateThemeCss(lightColors, ':root')
-const darkCss2 = generateThemeCss(darkColors, ':root.dark')
-const combined = [lightCss, darkCss2].join('\n\n')
-```
-
-## Notas
-
-Funcion pura — sin acceso al DOM, sin side effects. Util para SSR, generacion de archivos CSS estaticos, o pre-generar temas en build time.
-
-La conversion camelCase → kebab-case es simple (reemplaza mayusculas con `-` + minuscula). No maneja casos especiales como `backgroundColor` → `background-color`; los tokens del registry ya usan nombres semanticos directos (`background`, `cardForeground`, etc.).
-
-Compone naturalmente con `themeConfigToColors` del registry: `generateThemeCss(themeConfigToColors(config))`.
diff --git a/frontend/functions/core/generate_theme_css.ts b/frontend/functions/core/generate_theme_css.ts
deleted file mode 100644
index 4080ad45..00000000
--- a/frontend/functions/core/generate_theme_css.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Genera un bloque CSS con variables de tema para inyectar como &lt;style&gt; o
- * escribir en un archivo .css.
- *
- * Convierte claves camelCase a kebab-case automaticamente:
- *   `cardForeground` → `--card-foreground`
- *
- * @param colors - Objeto con tokens de tema. Claves en camelCase, valores CSS.
- * @param selector - Selector CSS donde aplicar las variables. Por defecto `:root`.
- * @returns String CSS con el bloque completo.
- */
-export function generateThemeCss(
-  colors: Record<string, string>,
-  selector: string = ':root',
-): string {
-  const lines = Object.entries(colors)
-    .map(([key, value]) => {
-      const cssName = key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)
-      return `  --${cssName}: ${value};`
-    })
-    .join('\n')
-  return `${selector} {\n${lines}\n}`
-}
diff --git a/frontend/functions/core/get_series_color.ts b/frontend/functions/core/get_series_color.ts
index 0c89b11a..28638b9b 100644
--- a/frontend/functions/core/get_series_color.ts
+++ b/frontend/functions/core/get_series_color.ts
@@ -1,7 +1,7 @@
 const defaultColors = ['#3b82f6', '#22c55e', '#f59e0b', '#8b5cf6', '#ec4899']
 
 export function getSeriesColor(index: number, color?: string): string {
-  return color || defaultColors[index % defaultColors.length]
+  return color ?? defaultColors[index % defaultColors.length]!
 }
 
 export { defaultColors }
diff --git a/frontend/functions/core/get_theme_tokens.md b/frontend/functions/core/get_theme_tokens.md
deleted file mode 100644
index ac3640d5..00000000
--- a/frontend/functions/core/get_theme_tokens.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-name: get_theme_tokens
-kind: function
-lang: ts
-domain: core
-version: "1.0.0"
-purity: impure
-signature: "getThemeTokens(): ThemeTokens"
-description: "Lee todas las CSS variables de tema del documento y devuelve un objeto tipado con los valores computados desde :root. Util para pasar colores a APIs que no entienden CSS variables (canvas, sigma.js, D3)."
-tags: [theme, css, tokens, runtime, dom]
-uses_functions: []
-uses_types: []
-returns: []
-returns_optional: false
-error_type: "error_go_core"
-imports: []
-output: "Objeto ThemeTokens con todas las variables CSS de tema resueltas (colores, tipografía, espaciado)"
-tested: false
-tests: []
-test_file_path: ""
-file_path: "frontend/functions/core/get_theme_tokens.ts"
----
-
-## Ejemplo
-
-```typescript
-import { getThemeTokens } from './get_theme_tokens'
-
-const tokens = getThemeTokens()
-
-// Pasar colores a sigma.js (que no soporta CSS variables)
-const sigmaSettings = {
-  defaultNodeColor: tokens.primary,
-  defaultEdgeColor: tokens.muted,
-  labelColor: { color: tokens.foreground },
-}
-
-// Pasar colores a un canvas 2D
-const ctx = canvas.getContext('2d')
-ctx.fillStyle = tokens.background
-ctx.strokeStyle = tokens.border
-```
-
-## Notas
-
-Impura — accede a `document.documentElement` y `getComputedStyle`. Solo disponible en browser.
-
-Los valores retornados son los valores sin procesar de las CSS variables (ej: `oklch(8% 0.015 260)`). Para obtener valores RGB computed (necesarios para algunas APIs), usar `getComputedColor`.
-
-Funciona con cualquier tema activo: el resultado cambia automaticamente cuando se cambia el tema via `applyTheme`.
diff --git a/frontend/functions/core/get_theme_tokens.ts b/frontend/functions/core/get_theme_tokens.ts
deleted file mode 100644
index 03d81825..00000000
--- a/frontend/functions/core/get_theme_tokens.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-/** Tokens de tema leidos de las CSS variables activas en :root. */
-export interface ThemeTokens {
-  background: string
-  foreground: string
-  card: string
-  cardForeground: string
-  popover: string
-  popoverForeground: string
-  primary: string
-  primaryForeground: string
-  secondary: string
-  secondaryForeground: string
-  muted: string
-  mutedForeground: string
-  accent: string
-  accentForeground: string
-  destructive: string
-  destructiveForeground: string
-  success: string
-  successForeground: string
-  border: string
-  input: string
-  ring: string
-}
-
-/**
- * Lee todas las CSS variables de tema del documento y devuelve un objeto
- * tipado con los valores computados desde :root.
- *
- * Util para pasar colores a APIs que no entienden CSS variables
- * (canvas, sigma.js, D3, etc.).
- */
-export function getThemeTokens(): ThemeTokens {
-  const style = getComputedStyle(document.documentElement)
-  const get = (name: string) => style.getPropertyValue(`--${name}`).trim()
-  return {
-    background: get('background'),
-    foreground: get('foreground'),
-    card: get('card'),
-    cardForeground: get('card-foreground'),
-    popover: get('popover'),
-    popoverForeground: get('popover-foreground'),
-    primary: get('primary'),
-    primaryForeground: get('primary-foreground'),
-    secondary: get('secondary'),
-    secondaryForeground: get('secondary-foreground'),
-    muted: get('muted'),
-    mutedForeground: get('muted-foreground'),
-    accent: get('accent'),
-    accentForeground: get('accent-foreground'),
-    destructive: get('destructive'),
-    destructiveForeground: get('destructive-foreground'),
-    success: get('success'),
-    successForeground: get('success-foreground'),
-    border: get('border'),
-    input: get('input'),
-    ring: get('ring'),
-  }
-}
diff --git a/frontend/functions/core/theme_config_to_colors.md b/frontend/functions/core/theme_config_to_colors.md
deleted file mode 100644
index 07266fc1..00000000
--- a/frontend/functions/core/theme_config_to_colors.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-name: theme_config_to_colors
-kind: function
-lang: ts
-domain: core
-version: "1.0.0"
-purity: pure
-signature: "themeConfigToColors(config: ThemeConfig): ThemeColors"
-description: "Convierte un ThemeConfig completo a ThemeColors plano para inyectar como CSS variables. Mapea tokens semánticos a variables CSS."
-tags: [theme, colors, css-variables, conversion]
-uses_functions: []
-uses_types: []
-returns: []
-returns_optional: false
-error_type: ""
-imports: []
-params:
-  - name: config
-    desc: "Configuración de tema con propiedades semánticas de color"
-output: "Objeto ThemeColors con variables CSS estandarizadas mapeadas de la config"
-tested: false
-tests: []
-test_file_path: ""
-file_path: "frontend/functions/core/theme_config_to_colors.ts"
-source_repo: "https://gitea-dgg044oo04woo4ggcsws4gk0.organic-machine.com/Bl4cksmith/Frontend_Library"
-source_license: "MIT"
-source_file: "frontend/src/themes/types.ts"
----
-
-## Ejemplo
-
-```typescript
-const colors = themeConfigToColors(darkThemeConfig)
-// { background: '...', foreground: '...', primary: '...', ... }
-```
-
-## Notas
-
-Puente entre el sistema de temas estructurado (ThemeConfig) y el sistema plano de CSS variables que consumen los componentes.
-
-Depende de los tipos ThemeConfig y ThemeColors definidos en `frontend/types/ui/theme_config.ts`. El tipo aún no está indexado en la BD (pendiente añadir theme_config.md para que fn index lo registre).
diff --git a/frontend/functions/core/theme_config_to_colors.ts b/frontend/functions/core/theme_config_to_colors.ts
deleted file mode 100644
index 884155db..00000000
--- a/frontend/functions/core/theme_config_to_colors.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import type { ThemeConfig, ThemeColors } from "../../types/ui/theme_config"
-
-export function themeConfigToColors(config: ThemeConfig): ThemeColors {
-  const { colors } = config
-
-  return {
-    background: colors.background.default,
-    foreground: colors.foreground.default,
-    card: colors.surface.raised,
-    cardForeground: colors.foreground.default,
-    popover: colors.surface.overlay,
-    popoverForeground: colors.foreground.default,
-    primary: colors.brand.primary,
-    primaryForeground: colors.brand.primaryForeground,
-    secondary: colors.brand.secondary,
-    secondaryForeground: colors.brand.secondaryForeground,
-    muted: colors.background.muted,
-    mutedForeground: colors.foreground.muted,
-    accent: colors.brand.accent,
-    accentForeground: colors.brand.accentForeground,
-    destructive: colors.status.error,
-    destructiveForeground: colors.status.errorForeground,
-    success: colors.status.success,
-    successForeground: colors.status.successForeground,
-    warning: colors.status.warning,
-    warningForeground: colors.status.warningForeground,
-    info: colors.status.info,
-    infoForeground: colors.status.infoForeground,
-    surface: colors.surface.raised,
-    surfaceHover: colors.background.subtle,
-    overlay: colors.surface.overlay,
-    border: colors.border.default,
-    input: colors.border.default,
-    ring: colors.ring,
-    chart1: colors.chart[1],
-    chart2: colors.chart[2],
-    chart3: colors.chart[3],
-    chart4: colors.chart[4],
-    chart5: colors.chart[5],
-    sidebar: colors.sidebar.background,
-    sidebarForeground: colors.sidebar.foreground,
-    sidebarPrimary: colors.brand.primary,
-    sidebarPrimaryForeground: colors.brand.primaryForeground,
-    sidebarAccent: colors.sidebar.accent,
-    sidebarAccentForeground: colors.sidebar.accentForeground,
-    sidebarBorder: colors.sidebar.border,
-    sidebarRing: colors.sidebar.ring,
-  }
-}
diff --git a/frontend/functions/ui/accordion.md b/frontend/functions/ui/accordion.md
index a2926de8..41d611f9 100644
--- a/frontend/functions/ui/accordion.md
+++ b/frontend/functions/ui/accordion.md
@@ -6,14 +6,14 @@ domain: ui
 version: "1.0.0"
 purity: impure
 signature: "Accordion(props: AccordionProps): JSX.Element"
-description: "Secciones colapsables con animaciones. Base-UI Collapsible primitive. Composable: AccordionItem + AccordionTrigger + AccordionContent."
-tags: [accordion, collapsible, component, ui, interactive, base-ui]
-uses_functions: [cn_ts_core]
+description: "Secciones colapsables con animaciones. Mantine Accordion. Composable: AccordionItem + AccordionTrigger + AccordionContent."
+tags: [accordion, collapsible, component, ui, interactive, mantine]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: ["@base-ui/react/collapsible", "lucide-react"]
+imports: ["@mantine/core"]
 output: "Componente Accordion que renderiza secciones colapsables con soporte para múltiples items abiertos simultáneamente"
 tested: false
 tests: []
@@ -33,14 +33,14 @@ variant: []
 ## Ejemplo
 
 ```tsx
-<Accordion>
-  <AccordionItem defaultOpen>
+<Accordion defaultValue="section-1">
+  <AccordionItem value="section-1">
     <AccordionTrigger>Seccion 1</AccordionTrigger>
     <AccordionContent>
       Contenido de la primera seccion.
     </AccordionContent>
   </AccordionItem>
-  <AccordionItem>
+  <AccordionItem value="section-2">
     <AccordionTrigger>Seccion 2</AccordionTrigger>
     <AccordionContent>
       Contenido de la segunda seccion.
@@ -51,4 +51,4 @@ variant: []
 
 ## Notas
 
-Cada AccordionItem es un Collapsible independiente — permite multiples items abiertos simultaneamente. Para exclusividad (solo uno abierto), manejar el estado externamente. El chevron rota 180 grados con [data-open]. Exports: Accordion, AccordionItem, AccordionTrigger, AccordionContent.
+Usa Mantine Accordion nativo. Soporta type single (default) y multiple para multiples items abiertos. El chevron se maneja automaticamente por Mantine. AccordionItem requiere prop value unico. Exports: Accordion, AccordionItem, AccordionTrigger, AccordionContent.
diff --git a/frontend/functions/ui/accordion.tsx b/frontend/functions/ui/accordion.tsx
index c7acabcf..2d9c1938 100644
--- a/frontend/functions/ui/accordion.tsx
+++ b/frontend/functions/ui/accordion.tsx
@@ -1,7 +1,5 @@
 import * as React from "react"
-import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible"
-import { ChevronDownIcon } from "lucide-react"
-import { cn } from "../core/cn"
+import { Accordion as MantineAccordion } from "@mantine/core"
 
 interface AccordionItem {
   value: string
@@ -19,61 +17,72 @@ interface AccordionProps {
   children?: React.ReactNode
 }
 
-function Accordion({ className, children, ...props }: React.ComponentProps<"div"> & AccordionProps) {
+function Accordion({ className, type, defaultValue, children }: AccordionProps) {
+  if (type === "multiple") {
+    return (
+      <MantineAccordion
+        multiple
+        data-slot="accordion"
+        className={className}
+        defaultValue={Array.isArray(defaultValue) ? defaultValue : undefined}
+      >
+        {children}
+      </MantineAccordion>
+    )
+  }
+
   return (
-    <div data-slot="accordion" className={cn("divide-y divide-border", className)} {...props}>
+    <MantineAccordion
+      data-slot="accordion"
+      className={className}
+      defaultValue={typeof defaultValue === "string" ? defaultValue : undefined}
+    >
       {children}
-    </div>
+    </MantineAccordion>
   )
 }
 
-interface AccordionItemProps extends CollapsiblePrimitive.Root.Props {
+interface AccordionItemProps {
+  value: string
   className?: string
+  children?: React.ReactNode
+  disabled?: boolean
 }
 
-function AccordionItem({ className, ...props }: AccordionItemProps) {
+function AccordionItem({ className, value, children, ...props }: AccordionItemProps) {
   return (
-    <CollapsiblePrimitive.Root
+    <MantineAccordion.Item
       data-slot="accordion-item"
-      className={cn("group/accordion-item", className)}
-      {...props}
-    />
-  )
-}
-
-function AccordionTrigger({ className, children, ...props }: CollapsiblePrimitive.Trigger.Props) {
-  return (
-    <CollapsiblePrimitive.Trigger
-      data-slot="accordion-trigger"
-      className={cn(
-        "flex w-full items-center justify-between py-4 text-sm font-medium transition-all outline-none",
-        "hover:underline focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:underline",
-        "disabled:pointer-events-none disabled:opacity-50",
-        "[&[data-open]>svg]:rotate-180",
-        className
-      )}
+      value={value}
+      className={className}
       {...props}
     >
       {children}
-      <ChevronDownIcon className="size-4 shrink-0 text-muted-foreground transition-transform duration-200" />
-    </CollapsiblePrimitive.Trigger>
+    </MantineAccordion.Item>
   )
 }
 
-function AccordionContent({ className, children, ...props }: CollapsiblePrimitive.Panel.Props) {
+function AccordionTrigger({ className, children, ...props }: { className?: string; children?: React.ReactNode }) {
   return (
-    <CollapsiblePrimitive.Panel
-      data-slot="accordion-content"
-      className={cn(
-        "overflow-hidden text-sm",
-        "data-open:animate-in data-open:fade-in-0",
-        "data-closed:animate-out data-closed:fade-out-0",
-        className
-      )}
+    <MantineAccordion.Control
+      data-slot="accordion-trigger"
+      className={className}
       {...props}
     >
-      <div className="pb-4">{children}</div>
-    </CollapsiblePrimitive.Panel>
+      {children}
+    </MantineAccordion.Control>
+  )
+}
+
+function AccordionContent({ className, children, ...props }: { className?: string; children?: React.ReactNode }) {
+  return (
+    <MantineAccordion.Panel
+      data-slot="accordion-content"
+      className={className}
+      {...props}
+    >
+      {children}
+    </MantineAccordion.Panel>
   )
 }
 
diff --git a/frontend/functions/ui/action_icon.md b/frontend/functions/ui/action_icon.md
new file mode 100644
index 00000000..61f4c340
--- /dev/null
+++ b/frontend/functions/ui/action_icon.md
@@ -0,0 +1,77 @@
+---
+name: action_icon
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "FnActionIcon(props: FnActionIconProps): JSX.Element"
+description: "Boton de icono con variantes, loading y tooltip opcional. Wrapper sobre Mantine ActionIcon."
+tags: [mantine, button, icon, action, tooltip, component, ui]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core"]
+framework: react
+props:
+  - name: icon
+    type: "ReactNode"
+    required: true
+    description: "Icono a renderizar dentro del boton"
+  - name: variant
+    type: "'filled' | 'light' | 'outline' | 'transparent' | 'default' | 'subtle'"
+    required: false
+    description: "Variante visual del boton, default 'default'"
+  - name: size
+    type: "MantineSize | number"
+    required: false
+    description: "Tamano del boton"
+  - name: color
+    type: "MantineColor"
+    required: false
+    description: "Color del boton"
+  - name: onClick
+    type: "MouseEventHandler"
+    required: false
+    description: "Callback al hacer click"
+  - name: loading
+    type: "boolean"
+    required: false
+    description: "Muestra spinner de carga"
+  - name: disabled
+    type: "boolean"
+    required: false
+    description: "Deshabilita el boton"
+  - name: tooltip
+    type: "string"
+    required: false
+    description: "Si se provee, envuelve el boton en un Tooltip"
+output: "Boton de icono con tooltip opcional, estados loading/disabled y multiples variantes"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/action_icon.tsx"
+emits: []
+has_state: false
+variant: [filled, light, outline, transparent, default, subtle]
+---
+
+## Ejemplo
+
+```tsx
+import { FnActionIcon } from '@fn_library'
+import { IconSettings } from '@tabler/icons-react'
+
+<FnActionIcon
+  icon={<IconSettings size={18} />}
+  tooltip="Configuracion"
+  variant="light"
+  onClick={() => openSettings()}
+/>
+```
+
+## Notas
+
+Wrapper sobre Mantine `ActionIcon`. Si se provee `tooltip`, envuelve automaticamente en Mantine `Tooltip`. Compatible con iconos de `@tabler/icons-react`.
diff --git a/frontend/functions/ui/action_icon.tsx b/frontend/functions/ui/action_icon.tsx
new file mode 100644
index 00000000..20b6fe37
--- /dev/null
+++ b/frontend/functions/ui/action_icon.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react'
+import { ActionIcon, Tooltip } from '@mantine/core'
+import type { MantineSize, MantineColor } from '@mantine/core'
+
+interface FnActionIconProps {
+  icon: React.ReactNode
+  variant?: 'filled' | 'light' | 'outline' | 'transparent' | 'default' | 'subtle'
+  size?: MantineSize | number
+  color?: MantineColor
+  onClick?: React.MouseEventHandler<HTMLButtonElement>
+  loading?: boolean
+  disabled?: boolean
+  tooltip?: string
+}
+
+function FnActionIcon({
+  icon,
+  variant = 'default',
+  size = 'md',
+  color,
+  onClick,
+  loading,
+  disabled,
+  tooltip,
+}: FnActionIconProps) {
+  const button = (
+    <ActionIcon
+      variant={variant}
+      size={size}
+      color={color}
+      onClick={onClick}
+      loading={loading}
+      disabled={disabled}
+    >
+      {icon}
+    </ActionIcon>
+  )
+
+  if (tooltip) {
+    return <Tooltip label={tooltip}>{button}</Tooltip>
+  }
+
+  return button
+}
+
+export { FnActionIcon }
+export type { FnActionIconProps }
diff --git a/frontend/functions/ui/alert.md b/frontend/functions/ui/alert.md
index e3204043..22917d57 100644
--- a/frontend/functions/ui/alert.md
+++ b/frontend/functions/ui/alert.md
@@ -6,15 +6,15 @@ domain: ui
 version: "1.0.0"
 purity: impure
 signature: "Alert(props: { variant?: 'default' | 'destructive' }): JSX.Element"
-description: "Alerta accesible con variantes default y destructive. Sistema de slots para título, descripción, icono y acción."
-tags: [alert, feedback, component, ui, notification]
-uses_functions: [cn_ts_core]
+description: "Alerta accesible con variantes default y destructive. Mantine Alert con slots para título, descripción y acción."
+tags: [alert, feedback, component, ui, notification, mantine]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: [react, class-variance-authority]
-output: "Componente Alert que renderiza una alerta accesible con slots para título, descripción, icono y acción"
+imports: ["@mantine/core", react]
+output: "Componente Alert que renderiza una alerta accesible via Mantine Alert con slots para título, descripción y acción"
 tested: false
 tests: []
 test_file_path: ""
@@ -46,5 +46,5 @@ source_file: "frontend/src/components/ui/alert.tsx"
 ## Notas
 
 Exporta 4 subcomponentes composables via data-slot: Alert, AlertTitle, AlertDescription, AlertAction.
-El icono SVG se posiciona automáticamente en grid cuando es hijo directo de Alert.
-AlertAction se posiciona absolute top-right para acciones secundarias (ej: botón cerrar).
+AlertAction se posiciona absolute top-right para acciones secundarias (ej: boton cerrar).
+alertVariants se exporta como objeto vacio por compatibilidad (Mantine gestiona variantes via color prop).
diff --git a/frontend/functions/ui/alert.tsx b/frontend/functions/ui/alert.tsx
index 788daf70..da6ae025 100644
--- a/frontend/functions/ui/alert.tsx
+++ b/frontend/functions/ui/alert.tsx
@@ -1,34 +1,70 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "../core/cn"
+import * as React from 'react'
+import { Alert as MantineAlert, Box, Text } from '@mantine/core'
 
-const alertVariants = cva(
-  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "bg-card text-card-foreground",
-        destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
-      },
-    },
-    defaultVariants: { variant: "default" },
-  }
-)
+type AlertVariant = 'default' | 'destructive'
 
-function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
-  return <div data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+const variantColorMap: Record<AlertVariant, string | undefined> = {
+  default: undefined,
+  destructive: 'red',
 }
 
-function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return <div data-slot="alert-title" className={cn("font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground", className)} {...props} />
+function Alert({
+  className,
+  variant = 'default',
+  children,
+  ...props
+}: React.ComponentProps<'div'> & { variant?: AlertVariant }) {
+  return (
+    <MantineAlert
+      data-slot="alert"
+      color={variantColorMap[variant]}
+      radius="md"
+      variant="light"
+      className={className}
+      {...props}
+    >
+      {children}
+    </MantineAlert>
+  )
 }
 
-function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return <div data-slot="alert-description" className={cn("text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className)} {...props} />
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <Text
+      component="div"
+      data-slot="alert-title"
+      fw={500}
+      size="sm"
+      className={className}
+      {...props}
+    />
+  )
 }
 
-function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
-  return <div data-slot="alert-action" className={cn("absolute top-2 right-2", className)} {...props} />
+function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <Text
+      component="div"
+      data-slot="alert-description"
+      size="sm"
+      c="dimmed"
+      className={className}
+      {...props}
+    />
+  )
 }
 
+function AlertAction({ className, style, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <Box
+      data-slot="alert-action"
+      style={{ position: 'absolute', top: 'var(--mantine-spacing-xs)', right: 'var(--mantine-spacing-xs)', ...style }}
+      className={className}
+      {...props}
+    />
+  )
+}
+
+const alertVariants = {} as const
+
 export { Alert, AlertTitle, AlertDescription, AlertAction, alertVariants }
diff --git a/frontend/functions/ui/analytics_page.md b/frontend/functions/ui/analytics_page.md
index e303a3d8..ff60a97e 100644
--- a/frontend/functions/ui/analytics_page.md
+++ b/frontend/functions/ui/analytics_page.md
@@ -8,12 +8,12 @@ purity: pure
 signature: "analyticsPage(props: AnalyticsPageProps): ReactElement"
 description: "Genera un dashboard de analytics completo con header, fila de KPIs con deltas y grid de charts configurables."
 tags: [analytics, dashboard, kpi, charts, factory, composition, ui]
-uses_functions: [cn_ts_core]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: [react]
+imports: [react, "@mantine/core"]
 params:
   - name: props
     desc: "Configuración del dashboard: título, métricas con deltas, y lista de charts con span"
diff --git a/frontend/functions/ui/analytics_page.tsx b/frontend/functions/ui/analytics_page.tsx
index 9208aa03..a6888335 100644
--- a/frontend/functions/ui/analytics_page.tsx
+++ b/frontend/functions/ui/analytics_page.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cn } from '../core/cn'
+import { Stack, Group, Title, Text, Paper, SimpleGrid } from '@mantine/core'
 
 interface MetricConfig {
   label: string
@@ -34,67 +34,63 @@ export function analyticsPage({
   metrics,
   charts,
   actions,
-  className,
 }: AnalyticsPageProps): React.ReactElement {
+  const metricCols = metrics.length <= 2 ? { base: 1, md: 2 } : metrics.length <= 3 ? { base: 1, md: 3 } : { base: 1, md: 2, lg: 4 }
+
   return (
-    <div className={cn('space-y-6', className)}>
+    <Stack gap="lg">
       {/* Header */}
-      <div className="flex items-center justify-between border-b pb-4">
-        <div className="space-y-1">
-          <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
-          {subtitle && <p className="text-sm text-muted-foreground">{subtitle}</p>}
-        </div>
-        <div className="flex items-center gap-2">
+      <Group justify="space-between" pb="md" style={{ borderBottom: '1px solid var(--mantine-color-default-border)' }}>
+        <Stack gap={4}>
+          <Title order={2}>{title}</Title>
+          {subtitle && <Text size="sm" c="dimmed">{subtitle}</Text>}
+        </Stack>
+        <Group gap="xs">
           {dateRange}
           {actions}
-        </div>
-      </div>
+        </Group>
+      </Group>
 
       {/* KPI Row */}
-      <div className={cn(
-        'grid gap-4',
-        metrics.length <= 2 ? 'grid-cols-1 md:grid-cols-2' :
-        metrics.length <= 3 ? 'grid-cols-1 md:grid-cols-3' :
-        'grid-cols-1 md:grid-cols-2 lg:grid-cols-4'
-      )}>
+      <SimpleGrid cols={metricCols} spacing="md">
         {metrics.map((metric, i) => (
-          <div key={i} className="rounded-lg border bg-card p-4 text-card-foreground shadow-sm">
-            <p className="text-sm text-muted-foreground">{metric.label}</p>
-            <div className="mt-2 flex items-end justify-between gap-4">
-              <div className="space-y-1">
-                <p className="text-3xl font-bold tracking-tight">{metric.value}</p>
+          <Paper key={i} p="md" withBorder shadow="xs">
+            <Text size="sm" c="dimmed">{metric.label}</Text>
+            <Group mt="xs" justify="space-between" align="flex-end" gap="md">
+              <Stack gap={4}>
+                <Text fz={30} fw={700} lh={1}>{metric.value}</Text>
                 {metric.delta && (
-                  <div className={cn(
-                    'flex items-center gap-1 text-sm font-medium',
-                    metric.delta.value === 0 ? 'text-muted-foreground' :
-                    metric.delta.isPositive ? 'text-green-600 dark:text-green-500' :
-                    'text-red-600 dark:text-red-500'
-                  )}>
-                    <span>{metric.delta.value > 0 ? '+' : ''}{metric.delta.value}%</span>
-                  </div>
+                  <Text
+                    size="sm"
+                    fw={500}
+                    c={metric.delta.value === 0 ? 'dimmed' : metric.delta.isPositive ? 'green' : 'red'}
+                  >
+                    {metric.delta.value > 0 ? '+' : ''}{metric.delta.value}%
+                  </Text>
                 )}
-              </div>
-            </div>
-          </div>
+              </Stack>
+            </Group>
+          </Paper>
         ))}
-      </div>
+      </SimpleGrid>
 
       {/* Charts Grid */}
-      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+      <SimpleGrid cols={{ base: 1, lg: 2 }} spacing="md">
         {charts.map((chart) => (
-          <div
+          <Paper
             key={chart.id}
-            className={cn(
-              'rounded-xl border bg-card p-4 text-card-foreground shadow-sm',
-              chart.span === 2 && 'lg:col-span-2'
-            )}
+            p="md"
+            withBorder
+            shadow="xs"
+            radius="md"
+            style={chart.span === 2 ? { gridColumn: 'span 2' } : undefined}
           >
-            <h3 className="mb-3 text-sm font-medium text-muted-foreground">{chart.title}</h3>
+            <Text size="sm" fw={500} c="dimmed" mb="sm">{chart.title}</Text>
             {chart.content}
-          </div>
+          </Paper>
         ))}
-      </div>
-    </div>
+      </SimpleGrid>
+    </Stack>
   )
 }
 
diff --git a/frontend/functions/ui/app_shell.md b/frontend/functions/ui/app_shell.md
new file mode 100644
index 00000000..343ce91d
--- /dev/null
+++ b/frontend/functions/ui/app_shell.md
@@ -0,0 +1,65 @@
+---
+name: app_shell
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "FnAppShell(props: FnAppShellProps): JSX.Element"
+description: "Layout shell con header, navbar colapsable y area principal. Wrapper sobre Mantine AppShell."
+tags: [mantine, layout, shell, navigation, component, ui]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core"]
+framework: react
+props:
+  - name: header
+    type: "ReactNode"
+    required: false
+    description: "Contenido del header superior"
+  - name: navbar
+    type: "ReactNode"
+    required: false
+    description: "Contenido del sidebar de navegacion"
+  - name: navbarWidth
+    type: "number"
+    required: false
+    description: "Ancho del navbar en px, default 250"
+  - name: navbarCollapsed
+    type: "boolean"
+    required: false
+    description: "Si el navbar esta colapsado"
+  - name: children
+    type: "ReactNode"
+    required: true
+    description: "Contenido principal del area main"
+output: "Layout de aplicacion con header fijo, sidebar colapsable y area de contenido principal"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/app_shell.tsx"
+emits: []
+has_state: false
+variant: []
+---
+
+## Ejemplo
+
+```tsx
+import { FnAppShell } from '@fn_library'
+
+<FnAppShell
+  header={<Group px="md">Logo</Group>}
+  navbar={<NavLinks />}
+  navbarCollapsed={collapsed}
+>
+  <MainContent />
+</FnAppShell>
+```
+
+## Notas
+
+Wrapper sobre Mantine `AppShell`. El header tiene altura fija de 60px. El navbar colapsa tanto en mobile como en desktop cuando `navbarCollapsed` es true. El breakpoint de responsive es `sm`.
diff --git a/frontend/functions/ui/app_shell.tsx b/frontend/functions/ui/app_shell.tsx
new file mode 100644
index 00000000..f71b327c
--- /dev/null
+++ b/frontend/functions/ui/app_shell.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { AppShell } from '@mantine/core'
+
+interface FnAppShellProps {
+  header?: React.ReactNode
+  navbar?: React.ReactNode
+  navbarWidth?: number
+  navbarCollapsed?: boolean
+  children: React.ReactNode
+}
+
+function FnAppShell({
+  header,
+  navbar,
+  navbarWidth = 250,
+  navbarCollapsed = false,
+  children,
+}: FnAppShellProps) {
+  return (
+    <AppShell
+      header={header ? { height: 60 } : undefined}
+      navbar={navbar ? { width: navbarWidth, breakpoint: 'sm', collapsed: { mobile: navbarCollapsed, desktop: navbarCollapsed } } : undefined}
+      padding="md"
+    >
+      {header && <AppShell.Header>{header}</AppShell.Header>}
+      {navbar && <AppShell.Navbar p="md">{navbar}</AppShell.Navbar>}
+      <AppShell.Main>{children}</AppShell.Main>
+    </AppShell>
+  )
+}
+
+export { FnAppShell }
+export type { FnAppShellProps }
diff --git a/frontend/functions/ui/apply_theme.md b/frontend/functions/ui/apply_theme.md
deleted file mode 100644
index 250857d5..00000000
--- a/frontend/functions/ui/apply_theme.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-name: apply_theme
-kind: function
-lang: ts
-domain: ui
-version: "1.0.0"
-purity: impure
-signature: "applyTheme(theme: Theme): void"
-description: "Inyecta un tema como CSS variables en document.documentElement. Maneja clase dark automáticamente. Mapea 40 tokens semánticos."
-tags: [theme, css-variables, apply, runtime, ui]
-uses_functions: []
-uses_types: [ThemeConfig_ts_ui]
-returns: []
-returns_optional: false
-error_type: "error_go_core"
-imports: []
-params:
-  - name: theme
-    desc: "Objeto Theme con nombre, label y colores a inyectar como CSS variables"
-output: "Void - función impura que inyecta CSS variables en document.documentElement"
-tested: false
-tests: []
-test_file_path: ""
-file_path: "frontend/functions/ui/apply_theme.tsx"
-source_repo: "https://gitea-dgg044oo04woo4ggcsws4gk0.organic-machine.com/Bl4cksmith/Frontend_Library"
-source_license: "MIT"
-source_file: "frontend/src/hooks/use-theme.tsx"
----
-
-## Ejemplo
-
-```typescript
-import { applyTheme } from './apply_theme'
-
-applyTheme({
-  name: 'dark',
-  label: 'Oscuro',
-  colors: themeConfigToColors(darkThemeConfig)
-})
-```
-
-## Notas
-
-Función impura (modifica el DOM). Mapea cada key de ThemeColors a una CSS variable. Temas oscuros (dark, midnight, sunset) añaden clase `dark` al root.
diff --git a/frontend/functions/ui/apply_theme.tsx b/frontend/functions/ui/apply_theme.tsx
deleted file mode 100644
index 49eafbd5..00000000
--- a/frontend/functions/ui/apply_theme.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-interface ThemeColors {
-  background: string
-  foreground: string
-  card: string
-  cardForeground: string
-  popover: string
-  popoverForeground: string
-  primary: string
-  primaryForeground: string
-  secondary: string
-  secondaryForeground: string
-  muted: string
-  mutedForeground: string
-  accent: string
-  accentForeground: string
-  destructive: string
-  destructiveForeground: string
-  success: string
-  successForeground: string
-  warning: string
-  warningForeground: string
-  info: string
-  infoForeground: string
-  surface: string
-  surfaceHover: string
-  overlay: string
-  border: string
-  input: string
-  ring: string
-  chart1: string
-  chart2: string
-  chart3: string
-  chart4: string
-  chart5: string
-  sidebar: string
-  sidebarForeground: string
-  sidebarPrimary: string
-  sidebarPrimaryForeground: string
-  sidebarAccent: string
-  sidebarAccentForeground: string
-  sidebarBorder: string
-  sidebarRing: string
-}
-
-interface Theme {
-  name: string
-  label: string
-  colors: ThemeColors
-}
-
-const cssVarMap: Record<keyof ThemeColors, string> = {
-  background: '--background',
-  foreground: '--foreground',
-  card: '--card',
-  cardForeground: '--card-foreground',
-  popover: '--popover',
-  popoverForeground: '--popover-foreground',
-  primary: '--primary',
-  primaryForeground: '--primary-foreground',
-  secondary: '--secondary',
-  secondaryForeground: '--secondary-foreground',
-  muted: '--muted',
-  mutedForeground: '--muted-foreground',
-  accent: '--accent',
-  accentForeground: '--accent-foreground',
-  destructive: '--destructive',
-  destructiveForeground: '--destructive-foreground',
-  success: '--success',
-  successForeground: '--success-foreground',
-  warning: '--warning',
-  warningForeground: '--warning-foreground',
-  info: '--info',
-  infoForeground: '--info-foreground',
-  surface: '--surface',
-  surfaceHover: '--surface-hover',
-  overlay: '--overlay',
-  border: '--border',
-  input: '--input',
-  ring: '--ring',
-  chart1: '--chart-1',
-  chart2: '--chart-2',
-  chart3: '--chart-3',
-  chart4: '--chart-4',
-  chart5: '--chart-5',
-  sidebar: '--sidebar',
-  sidebarForeground: '--sidebar-foreground',
-  sidebarPrimary: '--sidebar-primary',
-  sidebarPrimaryForeground: '--sidebar-primary-foreground',
-  sidebarAccent: '--sidebar-accent',
-  sidebarAccentForeground: '--sidebar-accent-foreground',
-  sidebarBorder: '--sidebar-border',
-  sidebarRing: '--sidebar-ring',
-}
-
-export function applyTheme(theme: Theme): void {
-  const root = document.documentElement
-  const colors = theme.colors
-
-  Object.entries(cssVarMap).forEach(([key, cssVar]) => {
-    const value = colors[key as keyof ThemeColors]
-    root.style.setProperty(cssVar, value)
-  })
-
-  if (theme.name === 'dark' || theme.name === 'midnight' || theme.name === 'sunset') {
-    root.classList.add('dark')
-  } else {
-    root.classList.remove('dark')
-  }
-}
-
-export type { Theme, ThemeColors }
diff --git a/frontend/functions/ui/area_chart.md b/frontend/functions/ui/area_chart.md
index 0c1adec2..4b9cf0c9 100644
--- a/frontend/functions/ui/area_chart.md
+++ b/frontend/functions/ui/area_chart.md
@@ -6,15 +6,15 @@ domain: ui
 version: "1.0.0"
 purity: impure
 signature: "AreaChart(props: AreaChartProps): JSX.Element"
-description: "Gráfico de área Recharts con gradientes automáticos, multi-series, stacking y tooltips temáticos."
-tags: [chart, area, visualization, recharts, gradient, component, ui]
-uses_functions: [cn_ts_core, chart_container_ts_ui, get_series_color_ts_core]
+description: "Gráfico de área @mantine/charts con gradientes automáticos, multi-series, stacking y tooltips."
+tags: [chart, area, visualization, mantine, gradient, component, ui]
+uses_functions: [chart_container_ts_ui]
 uses_types: [ChartSeries_ts_ui]
 returns: []
 returns_optional: false
 error_type: ""
-imports: [recharts]
-output: "Componente JSX que renderiza un gráfico de área con gradientes, multi-series y tooltips temáticos"
+imports: ["@mantine/charts", "@mantine/core"]
+output: "Componente JSX que renderiza un gráfico de área con gradientes, multi-series y tooltips"
 tested: false
 tests: []
 test_file_path: ""
diff --git a/frontend/functions/ui/area_chart.tsx b/frontend/functions/ui/area_chart.tsx
index f0ef51cb..c7adc1b3 100644
--- a/frontend/functions/ui/area_chart.tsx
+++ b/frontend/functions/ui/area_chart.tsx
@@ -1,9 +1,6 @@
-import {
-  AreaChart as RechartsAreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
-} from 'recharts'
-import { ChartContainer, ChartTooltipContent, type Series, getSeriesColor } from './chart_container'
-
-interface GradientConfig { from: string; to: string }
+import { AreaChart as MantineAreaChart } from '@mantine/charts'
+import { Paper } from '@mantine/core'
+import { type Series, getSeriesColor } from './chart_container'
 
 interface AreaChartProps {
   data: Record<string, unknown>[]
@@ -11,11 +8,10 @@ interface AreaChartProps {
   yKey?: string
   series?: Series[]
   stacked?: boolean
-  gradient?: GradientConfig | boolean
+  gradient?: boolean
   showGrid?: boolean
   showLegend?: boolean
-  height?: number | string
-  className?: string
+  height?: number
   xAxisFormatter?: (value: unknown) => string
   yAxisFormatter?: (value: unknown) => string
   valueFormatter?: (value: number) => string
@@ -23,40 +19,36 @@ interface AreaChartProps {
 
 function AreaChartComponent({
   data, xKey, yKey, series, stacked = false, gradient = true, showGrid = true,
-  showLegend = false, height = 300, className, xAxisFormatter, yAxisFormatter,
+  showLegend = false, height = 300, xAxisFormatter, yAxisFormatter,
   valueFormatter = (v) => v.toLocaleString(),
 }: AreaChartProps) {
-  const areas = series
-    ? series.map((s, i) => ({ dataKey: s.key, name: s.name, color: getSeriesColor(i, s.color) }))
-    : yKey ? [{ dataKey: yKey, name: yKey, color: getSeriesColor(0) }] : []
-
-  const gradientConfig: GradientConfig | null = gradient
-    ? typeof gradient === 'object' ? gradient : { from: '', to: 'transparent' }
-    : null
+  const chartSeries = series
+    ? series.map((s, i) => ({ name: s.key, label: s.name, color: getSeriesColor(i, s.color) }))
+    : yKey ? [{ name: yKey, label: yKey, color: getSeriesColor(0) }] : []
 
   return (
-    <ChartContainer className={className} height={height}>
-      <RechartsAreaChart data={data} margin={{ top: 10, right: 10, left: 10, bottom: 10 }}>
-        <defs>
-          {areas.map((area) => (
-            <linearGradient key={area.dataKey} id={`gradient-${area.dataKey}`} x1="0" y1="0" x2="0" y2="1">
-              <stop offset="5%" stopColor={gradientConfig?.from || area.color} stopOpacity={0.8} />
-              <stop offset="95%" stopColor={gradientConfig?.to || area.color} stopOpacity={0.1} />
-            </linearGradient>
-          ))}
-        </defs>
-        {showGrid && <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />}
-        <XAxis dataKey={xKey} tickFormatter={xAxisFormatter} className="text-xs fill-muted-foreground" />
-        <YAxis tickFormatter={yAxisFormatter} className="text-xs fill-muted-foreground" />
-        <Tooltip content={<ChartTooltipContent valueFormatter={valueFormatter} />} cursor={{ stroke: 'hsl(var(--muted-foreground))', strokeDasharray: '3 3' }} />
-        {showLegend && <Legend />}
-        {areas.map((area) => (
-          <Area key={area.dataKey} type="monotone" dataKey={area.dataKey} name={area.name} stroke={area.color} strokeWidth={2} fill={gradient ? `url(#gradient-${area.dataKey})` : area.color} fillOpacity={gradient ? 1 : 0.3} stackId={stacked ? 'stack' : undefined} />
-        ))}
-      </RechartsAreaChart>
-    </ChartContainer>
+    <Paper p="md">
+      <MantineAreaChart
+        h={height}
+        data={data}
+        dataKey={xKey}
+        series={chartSeries}
+        type={stacked ? 'stacked' : 'default'}
+        curveType="monotone"
+        withGradient={gradient}
+        gridAxis={showGrid ? 'xy' : 'none'}
+        withLegend={showLegend}
+        withTooltip
+        valueFormatter={valueFormatter}
+        xAxisProps={xAxisFormatter ? { tickFormatter: xAxisFormatter } : undefined}
+        yAxisProps={yAxisFormatter ? { tickFormatter: yAxisFormatter } : undefined}
+      />
+    </Paper>
   )
 }
 
+/** @deprecated Gradient is handled by Mantine's withGradient prop */
+type GradientConfig = { from: string; to: string }
+
 export const AreaChart = AreaChartComponent
 export type { AreaChartProps, GradientConfig }
diff --git a/frontend/functions/ui/auth_form.md b/frontend/functions/ui/auth_form.md
new file mode 100644
index 00000000..5bcca8b8
--- /dev/null
+++ b/frontend/functions/ui/auth_form.md
@@ -0,0 +1,101 @@
+---
+name: auth_form
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "AuthForm(config: AuthFormConfig): ReactElement"
+description: "Genera página de autenticación con toggle login/register, social buttons opcionales, campos extra en registro y validación. Basado en Mantine AuthenticationForm."
+tags: [auth, login, register, form, page, ui, mantine, toggle]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core", "@mantine/hooks"]
+has_state: true
+framework: react
+emits: [onSubmit]
+params:
+  - name: title
+    desc: "Título principal que aparece en la cabecera del formulario (default: 'Welcome')"
+  - name: socialButtons
+    desc: "Lista de botones de login social, cada uno con label, icono opcional y callback onClick"
+  - name: extraFields
+    desc: "Campos de texto adicionales que se muestran únicamente en el modo registro (ej: nombre, empresa)"
+  - name: onSubmit
+    desc: "Callback invocado al enviar el formulario con type ('login'|'register'), email, password y valores de extraFields"
+  - name: defaultType
+    desc: "Modo inicial del formulario: 'login' (default) o 'register'"
+  - name: paperProps
+    desc: "Props de Mantine Paper para personalizar el contenedor (shadow, radius, p, etc.)"
+output: "Página de autenticación completa con toggle login/register, campos email/password, botones sociales opcionales y campo de términos en registro"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/auth_form.tsx"
+source_repo: ""
+source_license: ""
+source_file: ""
+---
+
+## Ejemplo
+
+### Config mínima (solo login)
+
+```tsx
+import { AuthForm } from '@fn_library/auth_form'
+
+function LoginPage() {
+  return (
+    <AuthForm
+      title="Acceder"
+      onSubmit={({ type, email, password }) => {
+        console.log(type, email, password)
+      }}
+    />
+  )
+}
+```
+
+### Con social buttons y campos extra en registro
+
+```tsx
+import { AuthForm } from '@fn_library/auth_form'
+import { IconBrandGoogle, IconBrandGithub } from '@tabler/icons-react'
+
+function AuthPage() {
+  return (
+    <AuthForm
+      title="fn_registry"
+      defaultType="register"
+      socialButtons={[
+        { label: 'Google', icon: <IconBrandGoogle size={16} />, onClick: () => signInWithGoogle() },
+        { label: 'GitHub', icon: <IconBrandGithub size={16} />, onClick: () => signInWithGitHub() },
+      ]}
+      extraFields={[
+        { name: 'name', label: 'Nombre completo', placeholder: 'Lucas García', required: true },
+        { name: 'company', label: 'Empresa', placeholder: 'Acme Corp' },
+      ]}
+      onSubmit={({ type, email, password, name, company }) => {
+        if (type === 'register') {
+          registerUser({ email, password, name, company })
+        } else {
+          loginUser({ email, password })
+        }
+      }}
+    />
+  )
+}
+```
+
+## Notas
+
+Función con estado interno (useToggle, useState de @mantine/hooks). Gestiona el toggle entre login y register sin prop externa — el padre solo recibe el valor final via onSubmit.type.
+
+Los `extraFields` solo se renderizan en modo register. El campo de términos y condiciones (Checkbox) también es exclusivo del registro.
+
+Los `socialButtons` se renderizan con un Divider "O continúa con email" cuando están presentes. Sin socialButtons el Divider no aparece.
+
+El campo `password` usa PasswordInput de Mantine, que incluye el toggle de visibilidad integrado.
diff --git a/frontend/functions/ui/auth_form.tsx b/frontend/functions/ui/auth_form.tsx
new file mode 100644
index 00000000..4d05f42e
--- /dev/null
+++ b/frontend/functions/ui/auth_form.tsx
@@ -0,0 +1,181 @@
+import * as React from 'react'
+import {
+  Anchor,
+  Button,
+  Checkbox,
+  Divider,
+  Group,
+  Paper,
+  PasswordInput,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Container,
+  type PaperProps,
+} from '@mantine/core'
+import { useToggle, upperFirst } from '@mantine/hooks'
+
+interface SocialButtonConfig {
+  label: string
+  icon?: React.ReactNode
+  onClick?: () => void
+}
+
+interface ExtraFieldConfig {
+  name: string
+  label: string
+  placeholder?: string
+  required?: boolean
+}
+
+interface AuthFormSubmitValues {
+  type: 'login' | 'register'
+  email: string
+  password: string
+  [key: string]: unknown
+}
+
+interface AuthFormConfig {
+  /** Título principal de la página */
+  title?: string
+  /** Botones de autenticación social opcionales */
+  socialButtons?: SocialButtonConfig[]
+  /** Campos adicionales que se muestran solo en el modo registro */
+  extraFields?: ExtraFieldConfig[]
+  /** Callback invocado al enviar el formulario */
+  onSubmit?: (values: AuthFormSubmitValues) => void
+  /** Modo inicial: 'login' (default) o 'register' */
+  defaultType?: 'login' | 'register'
+  /** Props adicionales para el Paper contenedor */
+  paperProps?: PaperProps
+}
+
+function AuthForm({
+  title = 'Welcome',
+  socialButtons = [],
+  extraFields = [],
+  onSubmit,
+  defaultType = 'login',
+  paperProps,
+}: AuthFormConfig): React.ReactElement {
+  const [type, toggle] = useToggle<'login' | 'register'>([
+    defaultType,
+    defaultType === 'login' ? 'register' : 'login',
+  ])
+  const [email, setEmail] = React.useState('')
+  const [password, setPassword] = React.useState('')
+  const [terms, setTerms] = React.useState(true)
+  const [extraValues, setExtraValues] = React.useState<Record<string, string>>({})
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    onSubmit?.({ type, email, password, ...extraValues })
+  }
+
+  const handleExtraChange = (name: string, value: string) => {
+    setExtraValues((prev) => ({ ...prev, [name]: value }))
+  }
+
+  return (
+    <Container size={420} py={40}>
+      <Paper radius="md" p="lg" withBorder {...paperProps}>
+        <Title order={2} ta="center" mb="md">
+          {title}
+        </Title>
+
+        {socialButtons.length > 0 && (
+          <>
+            <Group grow mb="md" gap="xs">
+              {socialButtons.map((btn) => (
+                <Button
+                  key={btn.label}
+                  variant="default"
+                  radius="xl"
+                  leftSection={btn.icon}
+                  onClick={btn.onClick}
+                >
+                  {btn.label}
+                </Button>
+              ))}
+            </Group>
+            <Divider label="O continúa con email" labelPosition="center" my="lg" />
+          </>
+        )}
+
+        <form onSubmit={handleSubmit}>
+          <Stack gap="sm">
+            {type === 'register' &&
+              extraFields.map((field) => (
+                <TextInput
+                  key={field.name}
+                  label={field.label}
+                  placeholder={field.placeholder}
+                  required={field.required}
+                  value={extraValues[field.name] ?? ''}
+                  onChange={(e) => handleExtraChange(field.name, e.currentTarget.value)}
+                  radius="md"
+                />
+              ))}
+
+            <TextInput
+              required
+              label="Email"
+              placeholder="tu@email.com"
+              value={email}
+              onChange={(e) => setEmail(e.currentTarget.value)}
+              radius="md"
+            />
+
+            <PasswordInput
+              required
+              label="Contraseña"
+              placeholder="Tu contraseña"
+              value={password}
+              onChange={(e) => setPassword(e.currentTarget.value)}
+              radius="md"
+            />
+
+            {type === 'register' && (
+              <Checkbox
+                label="Acepto los términos y condiciones"
+                checked={terms}
+                onChange={(e) => setTerms(e.currentTarget.checked)}
+              />
+            )}
+          </Stack>
+
+          <Group justify="space-between" mt="xl">
+            <Anchor
+              component="button"
+              type="button"
+              c="dimmed"
+              size="xs"
+              onClick={() => toggle()}
+            >
+              {type === 'register'
+                ? '¿Ya tienes cuenta? Inicia sesión'
+                : '¿No tienes cuenta? Regístrate'}
+            </Anchor>
+            <Button type="submit" radius="xl">
+              {upperFirst(type)}
+            </Button>
+          </Group>
+        </form>
+
+        {type === 'register' && (
+          <Text c="dimmed" size="xs" ta="center" mt="md">
+            Al registrarte aceptas nuestra{' '}
+            <Anchor size="xs" href="#">
+              política de privacidad
+            </Anchor>
+            .
+          </Text>
+        )}
+      </Paper>
+    </Container>
+  )
+}
+
+export { AuthForm }
+export type { AuthFormConfig, AuthFormSubmitValues, SocialButtonConfig, ExtraFieldConfig }
diff --git a/frontend/functions/ui/autocomplete.md b/frontend/functions/ui/autocomplete.md
new file mode 100644
index 00000000..dc4f3017
--- /dev/null
+++ b/frontend/functions/ui/autocomplete.md
@@ -0,0 +1,136 @@
+---
+name: autocomplete
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "Autocomplete(props: AutocompleteProps): JSX.Element"
+description: "Input con sugerencias de autocompletado. Permite valores libres a diferencia de Select. Wrapper sobre Mantine Autocomplete."
+tags: [autocomplete, input, form, suggestions, component, ui, interactive, mantine]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: "error_go_core"
+imports: ["@mantine/core"]
+output: "Componente Autocomplete que renderiza input con dropdown de sugerencias filtradas"
+props:
+  - name: data
+    type: "string[] | { value: string; label?: string; group?: string }[]"
+    required: true
+    description: "Lista de opciones a mostrar en el dropdown"
+  - name: value
+    type: "string"
+    required: false
+    description: "Valor controlado del input"
+  - name: onChange
+    type: "(value: string) => void"
+    required: false
+    description: "Callback al cambiar el valor del input"
+  - name: label
+    type: "string"
+    required: false
+    description: "Etiqueta visible encima del input"
+  - name: placeholder
+    type: "string"
+    required: false
+    description: "Texto placeholder cuando el input está vacío"
+  - name: clearable
+    type: "boolean"
+    required: false
+    description: "Muestra botón para limpiar el valor"
+  - name: loading
+    type: "boolean"
+    required: false
+    description: "Muestra spinner de carga en el input"
+  - name: disabled
+    type: "boolean"
+    required: false
+    description: "Deshabilita el input"
+  - name: limit
+    type: "number"
+    required: false
+    description: "Número máximo de sugerencias a mostrar en el dropdown"
+  - name: size
+    type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+    required: false
+    description: "Tamaño visual del input"
+emits: [onChange]
+has_state: true
+framework: react
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/autocomplete.tsx"
+---
+
+## Ejemplo
+
+```tsx
+import { Autocomplete } from '@fn_library/autocomplete'
+
+// Básico — lista de strings
+function BasicAutocomplete() {
+  return (
+    <Autocomplete
+      label="País"
+      placeholder="Escribe para buscar..."
+      data={['Argentina', 'Brasil', 'Chile', 'Colombia', 'Uruguay']}
+    />
+  )
+}
+
+// Con grupos
+function GroupedAutocomplete() {
+  return (
+    <Autocomplete
+      label="Ciudad"
+      placeholder="Selecciona una ciudad"
+      data={[
+        { value: 'Buenos Aires', group: 'Argentina' },
+        { value: 'Rosario', group: 'Argentina' },
+        { value: 'São Paulo', group: 'Brasil' },
+        { value: 'Río de Janeiro', group: 'Brasil' },
+      ]}
+      limit={5}
+    />
+  )
+}
+
+// Con loading y clearable (búsqueda asíncrona)
+function AsyncAutocomplete() {
+  const [value, setValue] = useState('')
+  const [data, setData] = useState<string[]>([])
+  const [loading, setLoading] = useState(false)
+
+  const handleChange = async (val: string) => {
+    setValue(val)
+    if (val.length < 2) return
+    setLoading(true)
+    const results = await fetchSuggestions(val)
+    setData(results)
+    setLoading(false)
+  }
+
+  return (
+    <Autocomplete
+      label="Búsqueda"
+      placeholder="Escribe al menos 2 caracteres..."
+      value={value}
+      onChange={handleChange}
+      data={data}
+      loading={loading}
+      clearable
+    />
+  )
+}
+```
+
+## Notas
+
+A diferencia de `Select`, `Autocomplete` permite que el usuario ingrese cualquier valor libre, no solo los de la lista. Ideal para búsquedas con sugerencias donde el valor final puede no estar en el dataset.
+
+Cuando `data` contiene objetos con `group`, el dropdown agrupa visualmente las opciones bajo el encabezado del grupo.
+
+El prop `limit` controla cuántas sugerencias se muestran simultáneamente (por defecto Mantine muestra todas). Útil para datasets grandes o búsquedas asíncronas donde se quiere limitar el ruido visual.
diff --git a/frontend/functions/ui/autocomplete.tsx b/frontend/functions/ui/autocomplete.tsx
new file mode 100644
index 00000000..d60099a1
--- /dev/null
+++ b/frontend/functions/ui/autocomplete.tsx
@@ -0,0 +1,10 @@
+import { Autocomplete as MantineAutocomplete, type AutocompleteProps as MantineAutcompleteProps } from '@mantine/core'
+
+interface AutocompleteProps extends MantineAutcompleteProps {}
+
+function Autocomplete(props: AutocompleteProps) {
+  return <MantineAutocomplete {...props} />
+}
+
+export { Autocomplete }
+export type { AutocompleteProps }
diff --git a/frontend/functions/ui/avatar.md b/frontend/functions/ui/avatar.md
index 4133037d..50c698d9 100644
--- a/frontend/functions/ui/avatar.md
+++ b/frontend/functions/ui/avatar.md
@@ -6,14 +6,14 @@ domain: ui
 version: "1.0.0"
 purity: impure
 signature: "Avatar(props: AvatarProps): JSX.Element"
-description: "Imagen de usuario circular con fallback a iniciales generadas automaticamente. 5 tamaños via CVA."
-tags: [avatar, user, image, component, ui, cva]
-uses_functions: [cn_ts_core]
+description: "Imagen de usuario circular con fallback a iniciales generadas automaticamente. 5 tamaños via Mantine Avatar."
+tags: [avatar, user, image, component, ui, mantine]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: ["class-variance-authority"]
+imports: ["@mantine/core"]
 output: "Componente Avatar que renderiza imagen de usuario circular con fallback a iniciales generadas"
 tested: false
 tests: []
@@ -45,7 +45,7 @@ props:
     required: false
     description: "Clases CSS adicionales"
 emits: []
-has_state: true
+has_state: false
 framework: react
 variant: [xs, sm, md, lg, xl]
 ---
@@ -68,4 +68,4 @@ variant: [xs, sm, md, lg, xl]
 
 ## Notas
 
-Usa estado interno para manejar errores de carga de imagen (onError). La funcion getInitials extrae 2 iniciales del nombre completo (primera y ultima palabra). Si solo hay una palabra, toma los 2 primeros caracteres. Usa forwardRef para compatibilidad con wrappers.
+Usa Mantine Avatar que maneja errores de carga de imagen nativamente. La funcion getInitials extrae 2 iniciales del nombre completo (primera y ultima palabra). Si solo hay una palabra, toma los 2 primeros caracteres. Usa forwardRef para compatibilidad con wrappers.
diff --git a/frontend/functions/ui/avatar.tsx b/frontend/functions/ui/avatar.tsx
index 012bdae3..6e43ec89 100644
--- a/frontend/functions/ui/avatar.tsx
+++ b/frontend/functions/ui/avatar.tsx
@@ -1,69 +1,57 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "../core/cn"
+import * as React from 'react'
+import { Avatar as MantineAvatar } from '@mantine/core'
 
-const avatarVariants = cva(
-  "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted font-medium text-muted-foreground select-none",
-  {
-    variants: {
-      size: {
-        xs: "size-6 text-xs",
-        sm: "size-8 text-sm",
-        md: "size-10 text-base",
-        lg: "size-12 text-lg",
-        xl: "size-16 text-xl",
-      },
-    },
-    defaultVariants: { size: "md" },
-  }
-)
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 
-interface AvatarProps
-  extends React.ComponentPropsWithoutRef<"span">,
-    VariantProps<typeof avatarVariants> {
+const sizeMap: Record<AvatarSize, string> = {
+  xs: 'sm',
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg',
+  xl: 'xl',
+}
+
+interface AvatarProps extends React.ComponentPropsWithoutRef<'div'> {
   src?: string
   alt?: string
   fallback?: string
   initials?: string
+  size?: AvatarSize
 }
 
 function getInitials(name?: string): string {
-  if (!name) return "?"
+  if (!name) return '?'
   const parts = name.trim().split(/\s+/)
-  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase()
-  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
+  const first = parts[0] ?? ''
+  const last = parts[parts.length - 1] ?? ''
+  if (parts.length === 1) return first.slice(0, 2).toUpperCase()
+  return ((first[0] ?? '') + (last[0] ?? '')).toUpperCase()
 }
 
-const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
-  ({ className, size, src, alt, fallback, initials, ...props }, ref) => {
-    const [imgError, setImgError] = React.useState(false)
-    const showImage = src && !imgError
+/** Kept for backwards compatibility */
+const avatarVariants = sizeMap
+
+const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
+  ({ className, size = 'md', src, alt, fallback, initials, ...props }, ref) => {
     const displayInitials = initials ?? getInitials(fallback ?? alt)
 
     return (
-      <span
+      <MantineAvatar
         ref={ref}
         data-slot="avatar"
-        className={cn(avatarVariants({ size }), className)}
+        src={src}
+        alt={alt ?? ''}
+        size={sizeMap[size]}
+        radius="xl"
+        className={className}
         {...props}
       >
-        {showImage ? (
-          <img
-            src={src}
-            alt={alt ?? ""}
-            className="aspect-square size-full object-cover"
-            onError={() => setImgError(true)}
-          />
-        ) : (
-          <span data-slot="avatar-fallback" aria-hidden="true">
-            {displayInitials}
-          </span>
-        )}
-      </span>
+        {displayInitials}
+      </MantineAvatar>
     )
   }
 )
-Avatar.displayName = "Avatar"
+Avatar.displayName = 'Avatar'
 
 export { Avatar, avatarVariants }
-export type { AvatarProps }
+export type { AvatarProps, AvatarSize }
diff --git a/frontend/functions/ui/badge.md b/frontend/functions/ui/badge.md
index 47d47317..2944e7e7 100644
--- a/frontend/functions/ui/badge.md
+++ b/frontend/functions/ui/badge.md
@@ -6,14 +6,14 @@ domain: ui
 version: "1.0.0"
 purity: impure
 signature: "Badge(props: BadgeProps & VariantProps<typeof badgeVariants>): JSX.Element"
-description: "Badge con 10 variantes semánticas (default, secondary, destructive, outline, ghost, link, success, warning, error, info) y 2 tamaños."
-tags: [badge, status, component, ui, indicator]
-uses_functions: [cn_ts_core]
+description: "Badge con 10 variantes semánticas (default, secondary, destructive, outline, ghost, link, success, warning, error, info) y 2 tamaños. Mantine Badge."
+tags: [badge, status, component, ui, indicator, mantine]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: ["class-variance-authority"]
+imports: ["@mantine/core"]
 output: "Componente Badge que renderiza un indicador visual con 10 variantes semánticas de estado"
 tested: false
 tests: []
@@ -46,4 +46,4 @@ source_file: "frontend/src/components/ui/badge.tsx"
 
 ## Notas
 
-Versión simplificada que usa span nativo en lugar de useRender de Base-UI. Mantiene todas las variantes y la composibilidad con cn().
+Usa Mantine Badge internamente. Las 10 variantes se mapean a combinaciones de variant+color de Mantine (filled, light, outline, subtle, transparent).
diff --git a/frontend/functions/ui/badge.tsx b/frontend/functions/ui/badge.tsx
index 76f1fece..5689a09b 100644
--- a/frontend/functions/ui/badge.tsx
+++ b/frontend/functions/ui/badge.tsx
@@ -1,45 +1,47 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "../core/cn"
+import * as React from 'react'
+import { Badge as MantineBadge } from '@mantine/core'
 
-const badgeVariants = cva(
-  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&>svg]:pointer-events-none [&>svg]:size-3!",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-        destructive: "bg-destructive/10 text-destructive [a]:hover:bg-destructive/20",
-        outline: "border-border text-foreground [a]:hover:bg-muted",
-        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-        link: "text-primary underline-offset-4 hover:underline",
-        success: "bg-green-500/10 text-green-600 dark:bg-green-500/20 dark:text-green-400",
-        warning: "bg-yellow-500/10 text-yellow-600 dark:bg-yellow-500/20 dark:text-yellow-400",
-        error: "bg-red-500/10 text-red-600 dark:bg-red-500/20 dark:text-red-400",
-        info: "bg-blue-500/10 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400",
-      },
-      size: {
-        default: "h-5 px-2 text-xs",
-        sm: "h-4 px-1.5 text-[10px]",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
+type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' | 'success' | 'warning' | 'error' | 'info'
+type BadgeSize = 'default' | 'sm'
 
-interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {}
+const variantMap: Record<BadgeVariant, { variant: string; color?: string }> = {
+  default: { variant: 'filled' },
+  secondary: { variant: 'light' },
+  destructive: { variant: 'light', color: 'red' },
+  outline: { variant: 'outline' },
+  ghost: { variant: 'subtle' },
+  link: { variant: 'transparent' },
+  success: { variant: 'light', color: 'green' },
+  warning: { variant: 'light', color: 'yellow' },
+  error: { variant: 'light', color: 'red' },
+  info: { variant: 'light', color: 'blue' },
+}
+
+/** Kept for backwards compatibility */
+const badgeVariants = variantMap
+
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: BadgeVariant
+  size?: BadgeSize
+}
+
+function Badge({ className, variant = 'default', size = 'default', children, ...props }: BadgeProps) {
+  const mv = variantMap[variant]
 
-function Badge({ className, variant = "default", size = "default", ...props }: BadgeProps) {
   return (
-    <span
+    <MantineBadge
       data-slot="badge"
-      className={cn(badgeVariants({ variant, size }), className)}
+      variant={mv.variant}
+      color={mv.color}
+      size={size === 'sm' ? 'xs' : 'sm'}
+      radius="xl"
+      className={className}
       {...props}
-    />
+    >
+      {children}
+    </MantineBadge>
   )
 }
 
 export { Badge, badgeVariants }
+export type { BadgeProps, BadgeVariant, BadgeSize }
diff --git a/frontend/functions/ui/bar_chart.md b/frontend/functions/ui/bar_chart.md
index f9db5e34..e9e7bd71 100644
--- a/frontend/functions/ui/bar_chart.md
+++ b/frontend/functions/ui/bar_chart.md
@@ -6,15 +6,15 @@ domain: ui
 version: "1.1.0"
 purity: impure
 signature: "BarChart(props: BarChartProps): JSX.Element"
-description: "Gráfico de barras Recharts con multi-series, orientación horizontal/vertical, tooltips temáticos y bordes redondeados."
-tags: [chart, bar, visualization, recharts, component, ui]
-uses_functions: [cn_ts_core, chart_container_ts_ui, get_series_color_ts_core]
+description: "Gráfico de barras @mantine/charts con multi-series, orientación horizontal/vertical y tooltips."
+tags: [chart, bar, visualization, mantine, component, ui]
+uses_functions: [chart_container_ts_ui]
 uses_types: [ChartSeries_ts_ui]
 returns: []
 returns_optional: false
 error_type: ""
-imports: [recharts]
-output: "Componente JSX que renderiza un gráfico de barras vertical u horizontal con multi-series y tooltips temáticos"
+imports: ["@mantine/charts", "@mantine/core"]
+output: "Componente JSX que renderiza un gráfico de barras vertical u horizontal con multi-series y tooltips"
 tested: false
 tests: []
 test_file_path: ""
@@ -54,4 +54,4 @@ source_file: "frontend/src/components/ui/charts/bar-chart.tsx"
 
 ## Notas
 
-En modo `horizontal=true`: el layout de Recharts es `'vertical'`, YAxis recibe `dataKey={xKey}` con `type="category"` (categorías en eje Y), XAxis recibe `type="number"` (valores en eje X). El radius de las barras se ajusta a `[0, 4, 4, 0]` para redondear la punta derecha. Este intercambio de ejes es obligatorio — sin él las barras horizontales no se renderizan.
+En modo `horizontal=true` se pasa `orientation="vertical"` a Mantine BarChart, que internamente intercambia los ejes.
diff --git a/frontend/functions/ui/bar_chart.tsx b/frontend/functions/ui/bar_chart.tsx
index 24cfc219..066339ea 100644
--- a/frontend/functions/ui/bar_chart.tsx
+++ b/frontend/functions/ui/bar_chart.tsx
@@ -1,7 +1,6 @@
-import {
-  BarChart as RechartsBarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
-} from 'recharts'
-import { ChartContainer, ChartTooltipContent, type Series, getSeriesColor } from './chart_container'
+import { BarChart as MantineBarChart } from '@mantine/charts'
+import { Paper } from '@mantine/core'
+import { type Series, getSeriesColor } from './chart_container'
 
 interface BarChartProps {
   data: Record<string, unknown>[]
@@ -11,8 +10,7 @@ interface BarChartProps {
   horizontal?: boolean
   showGrid?: boolean
   showLegend?: boolean
-  height?: number | string
-  className?: string
+  height?: number
   xAxisFormatter?: (value: unknown) => string
   yAxisFormatter?: (value: unknown) => string
   valueFormatter?: (value: number) => string
@@ -20,32 +18,28 @@ interface BarChartProps {
 
 function BarChartComponent({
   data, xKey, yKey, series, horizontal = false, showGrid = true, showLegend = false,
-  height = 300, className, xAxisFormatter, yAxisFormatter, valueFormatter = (v) => v.toLocaleString(),
+  height = 300, xAxisFormatter, yAxisFormatter, valueFormatter = (v) => v.toLocaleString(),
 }: BarChartProps) {
-  const bars = series
-    ? series.map((s, i) => ({ dataKey: s.key, name: s.name, fill: getSeriesColor(i, s.color) }))
-    : yKey ? [{ dataKey: yKey, name: yKey, fill: getSeriesColor(0) }] : []
+  const chartSeries = series
+    ? series.map((s, i) => ({ name: s.key, label: s.name, color: getSeriesColor(i, s.color) }))
+    : yKey ? [{ name: yKey, label: yKey, color: getSeriesColor(0) }] : []
 
   return (
-    <ChartContainer className={className} height={height}>
-      <RechartsBarChart data={data} layout={horizontal ? 'vertical' : 'horizontal'} margin={{ top: 10, right: 10, left: 10, bottom: 10 }}>
-        {showGrid && <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />}
-        {horizontal ? (
-          <>
-            <XAxis type="number" tickFormatter={yAxisFormatter} className="text-xs fill-muted-foreground" />
-            <YAxis dataKey={xKey} type="category" tickFormatter={xAxisFormatter} width={80} className="text-xs fill-muted-foreground" />
-          </>
-        ) : (
-          <>
-            <XAxis dataKey={xKey} tickFormatter={xAxisFormatter} className="text-xs fill-muted-foreground" />
-            <YAxis tickFormatter={yAxisFormatter} className="text-xs fill-muted-foreground" />
-          </>
-        )}
-        <Tooltip content={<ChartTooltipContent valueFormatter={valueFormatter} />} cursor={{ fill: 'hsl(var(--muted) / 0.3)' }} />
-        {showLegend && <Legend />}
-        {bars.map((bar) => <Bar key={bar.dataKey} dataKey={bar.dataKey} name={bar.name} fill={bar.fill} radius={horizontal ? [0, 4, 4, 0] : [4, 4, 0, 0]} />)}
-      </RechartsBarChart>
-    </ChartContainer>
+    <Paper p="md">
+      <MantineBarChart
+        h={height}
+        data={data}
+        dataKey={xKey}
+        series={chartSeries}
+        orientation={horizontal ? 'vertical' : 'horizontal'}
+        gridAxis={showGrid ? 'xy' : 'none'}
+        withLegend={showLegend}
+        withTooltip
+        valueFormatter={valueFormatter}
+        xAxisProps={xAxisFormatter ? { tickFormatter: xAxisFormatter } : undefined}
+        yAxisProps={yAxisFormatter ? { tickFormatter: yAxisFormatter } : undefined}
+      />
+    </Paper>
   )
 }
 
diff --git a/frontend/functions/ui/breadcrumb.md b/frontend/functions/ui/breadcrumb.md
index b0430774..19decd7b 100644
--- a/frontend/functions/ui/breadcrumb.md
+++ b/frontend/functions/ui/breadcrumb.md
@@ -6,14 +6,14 @@ domain: ui
 version: "1.0.0"
 purity: impure
 signature: "Breadcrumb(props: BreadcrumbProps): JSX.Element"
-description: "Navegacion jerarquica con separadores, elipsis para paths largos y soporte para router links via asChild."
-tags: [breadcrumb, navigation, component, ui]
-uses_functions: [cn_ts_core]
+description: "Navegacion jerarquica con separadores, elipsis para paths largos y soporte para router links via asChild. Mantine Anchor/Text."
+tags: [breadcrumb, navigation, component, ui, mantine]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: ["lucide-react"]
+imports: ["@mantine/core", "@tabler/icons-react"]
 output: "Componente Breadcrumb que renderiza navegación jerárquica con separadores, elipsis y soporte para router links"
 tested: false
 tests: []
@@ -69,4 +69,4 @@ variant: []
 
 ## Notas
 
-Exports: Breadcrumb (nav), BreadcrumbList (ol), BreadcrumbItem (li), BreadcrumbLink (a con asChild), BreadcrumbPage (span aria-current=page), BreadcrumbSeparator (ChevronRight por defecto, customizable), BreadcrumbEllipsis (MoreHorizontal). BreadcrumbLink acepta asChild para usar con Link de React Router o Next.js.
+Exports: Breadcrumb (nav), BreadcrumbList (ol via Group), BreadcrumbItem (li via Group), BreadcrumbLink (Mantine Anchor con asChild), BreadcrumbPage (Text aria-current=page), BreadcrumbSeparator (IconChevronRight por defecto, customizable), BreadcrumbEllipsis (IconDots). BreadcrumbLink acepta asChild para usar con Link de React Router o Next.js. Usa Tabler icons en vez de lucide-react.
diff --git a/frontend/functions/ui/breadcrumb.tsx b/frontend/functions/ui/breadcrumb.tsx
index 8cb47f23..f40a7654 100644
--- a/frontend/functions/ui/breadcrumb.tsx
+++ b/frontend/functions/ui/breadcrumb.tsx
@@ -1,28 +1,24 @@
 import * as React from "react"
-import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
-import { cn } from "../core/cn"
+import { Anchor, Text, Box } from "@mantine/core"
+import { IconChevronRight, IconDots } from "@tabler/icons-react"
 
-function Breadcrumb({ ...props }: React.ComponentPropsWithoutRef<"nav">) {
-  return <nav data-slot="breadcrumb" aria-label="breadcrumb" {...props} />
+function Breadcrumb({ children, ...props }: React.ComponentPropsWithoutRef<"nav">) {
+  return <nav data-slot="breadcrumb" aria-label="breadcrumb" {...props}>{children}</nav>
 }
 
-function BreadcrumbList({ className, ...props }: React.ComponentPropsWithoutRef<"ol">) {
+function BreadcrumbList({ className, children, ...props }: React.ComponentPropsWithoutRef<"ol">) {
   return (
-    <ol
-      data-slot="breadcrumb-list"
-      className={cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", className)}
-      {...props}
-    />
+    <ol data-slot="breadcrumb-list" style={{ listStyle: "none", display: "flex", flexWrap: "wrap", alignItems: "center", gap: 8, padding: 0, margin: 0 }} className={className} {...props}>
+      {children}
+    </ol>
   )
 }
 
-function BreadcrumbItem({ className, ...props }: React.ComponentPropsWithoutRef<"li">) {
+function BreadcrumbItem({ className, children, ...props }: React.ComponentPropsWithoutRef<"li">) {
   return (
-    <li
-      data-slot="breadcrumb-item"
-      className={cn("inline-flex items-center gap-1.5", className)}
-      {...props}
-    />
+    <li data-slot="breadcrumb-item" style={{ display: "flex", alignItems: "center", gap: 8 }} className={className} {...props}>
+      {children}
+    </li>
   )
 }
 
@@ -35,31 +31,29 @@ function BreadcrumbLink({
 }: React.ComponentPropsWithoutRef<"a"> & { asChild?: boolean }) {
   if (asChild) {
     return (
-      <span data-slot="breadcrumb-link" className={cn("transition-colors hover:text-foreground", className)} {...(props as React.ComponentPropsWithoutRef<"span">)}>
+      <Text data-slot="breadcrumb-link" component="span" size="sm" className={className} {...(props as React.ComponentPropsWithoutRef<"span">)}>
         {children}
-      </span>
+      </Text>
     )
   }
   return (
-    <a
-      data-slot="breadcrumb-link"
-      href={href}
-      className={cn("transition-colors hover:text-foreground", className)}
-      {...props}
-    >
+    <Anchor data-slot="breadcrumb-link" href={href} size="sm" className={className} {...props}>
       {children}
-    </a>
+    </Anchor>
   )
 }
 
 function BreadcrumbPage({ className, ...props }: React.ComponentPropsWithoutRef<"span">) {
   return (
-    <span
+    <Text
       data-slot="breadcrumb-page"
+      component="span"
+      size="sm"
+      fw={500}
       role="link"
       aria-current="page"
       aria-disabled="true"
-      className={cn("font-medium text-foreground", className)}
+      className={className}
       {...props}
     />
   )
@@ -67,30 +61,34 @@ function BreadcrumbPage({ className, ...props }: React.ComponentPropsWithoutRef<
 
 function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) {
   return (
-    <li
+    <Box
       data-slot="breadcrumb-separator"
+      component="li"
       role="presentation"
       aria-hidden="true"
-      className={cn("[&>svg]:size-3.5", className)}
+      className={className}
+      style={{ display: "flex", alignItems: "center" }}
       {...props}
     >
-      {children ?? <ChevronRightIcon />}
-    </li>
+      {children ?? <IconChevronRight size={14} />}
+    </Box>
   )
 }
 
 function BreadcrumbEllipsis({ className, ...props }: React.ComponentPropsWithoutRef<"span">) {
   return (
-    <span
+    <Box
       data-slot="breadcrumb-ellipsis"
+      component="span"
       role="presentation"
       aria-hidden="true"
-      className={cn("flex size-9 items-center justify-center", className)}
+      style={{ display: "flex", width: 36, height: 36, alignItems: "center", justifyContent: "center" }}
+      className={className}
       {...props}
     >
-      <MoreHorizontalIcon className="size-4" />
-      <span className="sr-only">More</span>
-    </span>
+      <IconDots size={16} />
+      <span style={{ position: "absolute", width: 1, height: 1, padding: 0, margin: -1, overflow: "hidden", clip: "rect(0,0,0,0)", whiteSpace: "nowrap", borderWidth: 0 }}>More</span>
+    </Box>
   )
 }
 
diff --git a/frontend/functions/ui/button.md b/frontend/functions/ui/button.md
index 57e1fd25..ccbe113a 100644
--- a/frontend/functions/ui/button.md
+++ b/frontend/functions/ui/button.md
@@ -6,14 +6,14 @@ domain: ui
 version: "1.0.0"
 purity: impure
 signature: "Button(props: ButtonProps & VariantProps<typeof buttonVariants>): JSX.Element"
-description: "Botón accesible con 6 variantes (default, outline, secondary, ghost, destructive, link) y 8 tamaños. Base-UI primitivo con CVA."
-tags: [button, component, ui, interactive, cva]
-uses_functions: [cn_ts_core]
+description: "Botón accesible con 6 variantes (default, outline, secondary, ghost, destructive, link) y 8 tamaños. Mantine Button."
+tags: [button, component, ui, interactive, mantine]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: ["@base-ui/react", "class-variance-authority"]
+imports: ["@mantine/core"]
 output: "JSX.Element: botón renderizado con los estilos y comportamientos configurados"
 tested: false
 tests: []
@@ -51,4 +51,4 @@ source_file: "frontend/src/components/ui/button.tsx"
 
 ## Notas
 
-Componente base del sistema. Usa Base-UI Button primitive para accesibilidad completa (keyboard, ARIA). CVA para gestión type-safe de variantes.
+Componente base del sistema. Usa Mantine Button para accesibilidad completa (keyboard, ARIA). Las variantes se mapean a Mantine: default->filled, outline->outline, secondary->light, ghost->subtle, destructive->filled(red), link->transparent.
diff --git a/frontend/functions/ui/button.tsx b/frontend/functions/ui/button.tsx
index 74869947..e8dbdf33 100644
--- a/frontend/functions/ui/button.tsx
+++ b/frontend/functions/ui/button.tsx
@@ -1,52 +1,64 @@
-"use client"
+import * as React from 'react'
+import { Button as MantineButton } from '@mantine/core'
 
-import { Button as ButtonPrimitive } from "@base-ui/react/button"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "../core/cn"
+type ButtonVariant = 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive' | 'link'
+type ButtonSize = 'default' | 'xs' | 'sm' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg'
 
-const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
-        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs",
-        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem]",
-        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-        icon: "size-8",
-        "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)]",
-        "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)]",
-        "icon-lg": "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
+const variantMap: Record<ButtonVariant, { variant: string; color?: string }> = {
+  default: { variant: 'filled' },
+  outline: { variant: 'outline' },
+  secondary: { variant: 'light' },
+  ghost: { variant: 'subtle' },
+  destructive: { variant: 'filled', color: 'red' },
+  link: { variant: 'transparent' },
+}
+
+const sizeMap: Record<ButtonSize, { size: string; style?: React.CSSProperties }> = {
+  default: { size: 'sm' },
+  xs: { size: 'xs' },
+  sm: { size: 'xs' },
+  lg: { size: 'md' },
+  icon: { size: 'sm', style: { width: 32, height: 32, padding: 0 } },
+  'icon-xs': { size: 'xs', style: { width: 24, height: 24, padding: 0 } },
+  'icon-sm': { size: 'xs', style: { width: 28, height: 28, padding: 0 } },
+  'icon-lg': { size: 'md', style: { width: 36, height: 36, padding: 0 } },
+}
+
+/** Kept for backwards compatibility — maps variant names to Mantine equivalents */
+const buttonVariants = variantMap
+
+interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  children?: React.ReactNode
+}
 
 function Button({
   className,
-  variant = "default",
-  size = "default",
+  variant = 'default',
+  size = 'default',
+  style,
+  children,
   ...props
-}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+}: ButtonProps) {
+  const mv = variantMap[variant]
+  const ms = sizeMap[size]
+
   return (
-    <ButtonPrimitive
+    <MantineButton
       data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
+      variant={mv.variant}
+      color={mv.color}
+      size={ms.size}
+      radius="md"
+      className={className}
+      style={{ ...ms.style, ...style }}
       {...props}
-    />
+    >
+      {children}
+    </MantineButton>
   )
 }
 
 export { Button, buttonVariants }
+export type { ButtonProps, ButtonVariant, ButtonSize }
diff --git a/frontend/functions/ui/card.md b/frontend/functions/ui/card.md
index 7e7bca2c..5fec2f8c 100644
--- a/frontend/functions/ui/card.md
+++ b/frontend/functions/ui/card.md
@@ -8,7 +8,7 @@ purity: impure
 signature: "Card(props: { size?: 'default' | 'sm'; variant?: 'default' | 'borderless' | 'ghost'; className?: string; children: ReactNode }): JSX.Element"
 description: "Contenedor card con header, title, description, action, content y footer. Sistema de slots composable. Variantes default, borderless y ghost para dashboards dark."
 tags: [card, container, layout, component, ui, dashboard, dark]
-uses_functions: [cn_ts_core]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
diff --git a/frontend/functions/ui/card.tsx b/frontend/functions/ui/card.tsx
index ec1261f4..13e44637 100644
--- a/frontend/functions/ui/card.tsx
+++ b/frontend/functions/ui/card.tsx
@@ -1,89 +1,99 @@
-import * as React from "react"
-import { cn } from "../core/cn"
+import * as React from 'react'
+import { Paper, Box, Text } from '@mantine/core'
 
-type CardVariant = "default" | "borderless" | "ghost"
+type CardVariant = 'default' | 'borderless' | 'ghost'
 
 function Card({
   className,
-  size = "default",
-  variant = "default",
+  size = 'default',
+  variant = 'default',
+  children,
   ...props
-}: React.ComponentProps<"div"> & { size?: "default" | "sm"; variant?: CardVariant }) {
+}: React.ComponentProps<'div'> & { size?: 'default' | 'sm'; variant?: CardVariant }) {
   return (
-    <div
+    <Paper
       data-slot="card"
       data-size={size}
       data-variant={variant}
-      className={cn(
-        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
-        variant === "default" && "ring-1 ring-foreground/10",
-        variant === "borderless" && "ring-0 shadow-none",
-        variant === "ghost" && "ring-0 shadow-none bg-transparent",
-        className
-      )}
+      withBorder={variant === 'default'}
+      shadow={variant === 'default' ? 'xs' : undefined}
+      radius="md"
+      p={size === 'sm' ? 'sm' : 'md'}
+      bg={variant === 'ghost' ? 'transparent' : undefined}
+      className={className}
       {...props}
-    />
+    >
+      {children}
+    </Paper>
   )
 }
 
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
-    <div
+    <Box
       data-slot="card-header"
-      className={cn(
-        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
-        className
-      )}
+      pb="xs"
+      className={className}
       {...props}
     />
   )
 }
 
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
   return (
-    <div
+    <Text
+      component="div"
       data-slot="card-title"
-      className={cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)}
+      fw={600}
+      size="sm"
+      className={className}
       {...props}
     />
   )
 }
 
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
   return (
-    <div
+    <Text
+      component="div"
       data-slot="card-description"
-      className={cn("text-sm text-muted-foreground", className)}
+      size="sm"
+      c="dimmed"
+      className={className}
       {...props}
     />
   )
 }
 
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+function CardAction({ className, style, ...props }: React.ComponentProps<'div'>) {
   return (
-    <div
+    <Box
       data-slot="card-action"
-      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+      style={{ position: 'absolute', top: 0, right: 0, ...style }}
+      className={className}
       {...props}
     />
   )
 }
 
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
   return (
-    <div
+    <Box
       data-slot="card-content"
-      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+      className={className}
       {...props}
     />
   )
 }
 
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
   return (
-    <div
+    <Box
       data-slot="card-footer"
-      className={cn("flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3", className)}
+      pt="sm"
+      mt="auto"
+      style={{ borderTop: '1px solid var(--mantine-color-default-border)' }}
+      className={className}
       {...props}
     />
   )
diff --git a/frontend/functions/ui/chart_container.md b/frontend/functions/ui/chart_container.md
index 4535fa66..42ba4827 100644
--- a/frontend/functions/ui/chart_container.md
+++ b/frontend/functions/ui/chart_container.md
@@ -6,15 +6,15 @@ domain: ui
 version: "1.0.0"
 purity: impure
 signature: "ChartContainer(props: { children: ReactNode; height?: number | string }): JSX.Element"
-description: "Base para todos los charts Recharts: container responsive, tooltip temático, legend y utilidades de colores por serie."
-tags: [chart, container, recharts, base, visualization, component, ui]
-uses_functions: [cn_ts_core, get_series_color_ts_core]
+description: "Thin wrapper Paper y utilidades de colores/series para los charts @mantine/charts."
+tags: [chart, container, mantine, base, visualization, component, ui]
+uses_functions: []
 uses_types: [ChartSeries_ts_ui]
 returns: []
 returns_optional: false
 error_type: ""
-imports: [recharts, react]
-output: "Componente ChartContainer que renderiza base responsive para gráficos Recharts con tooltip y legend temáticos"
+imports: ["@mantine/core"]
+output: "Componente ChartContainer Paper wrapper y utilidades getSeriesColor/Series para charts Mantine"
 tested: false
 tests: []
 test_file_path: ""
@@ -40,11 +40,13 @@ source_file: "frontend/src/components/ui/charts/chart-base.tsx"
 ## Ejemplo
 
 ```tsx
+import { ChartContainer, getSeriesColor, type Series } from './chart_container'
+
 <ChartContainer height={400}>
-  <RechartsLineChart data={data}>...</RechartsLineChart>
+  <MantineLineChart ... />
 </ChartContainer>
 ```
 
 ## Notas
 
-Exporta: ChartContainer, ChartTooltipContent, ChartTooltip, ChartLegend, chartColors, defaultColors, getSeriesColor, Series.
+Exporta: ChartContainer, defaultColors, getSeriesColor, Series. Wrapper fino sobre Mantine Paper para layout uniforme de charts.
diff --git a/frontend/functions/ui/chart_container.tsx b/frontend/functions/ui/chart_container.tsx
index 040a83ca..1c1a352d 100644
--- a/frontend/functions/ui/chart_container.tsx
+++ b/frontend/functions/ui/chart_container.tsx
@@ -1,14 +1,4 @@
-import * as React from 'react'
-import { cn } from '../core/cn'
-import { ResponsiveContainer, Tooltip as RechartsTooltip, Legend as RechartsLegend } from 'recharts'
-
-export const chartColors = [
-  'hsl(var(--chart-1, 220 70% 50%))',
-  'hsl(var(--chart-2, 160 60% 45%))',
-  'hsl(var(--chart-3, 30 80% 55%))',
-  'hsl(var(--chart-4, 280 65% 60%))',
-  'hsl(var(--chart-5, 340 75% 55%))',
-]
+import { Paper } from '@mantine/core'
 
 export const defaultColors = ['#3b82f6', '#22c55e', '#f59e0b', '#8b5cf6', '#ec4899']
 
@@ -19,62 +9,25 @@ export interface Series {
 }
 
 export function getSeriesColor(index: number, color?: string): string {
-  return color || defaultColors[index % defaultColors.length]
+  return color || defaultColors[index % defaultColors.length]!
 }
 
 interface ChartContainerProps {
   children: React.ReactNode
-  className?: string
   height?: number | string
 }
 
-export function ChartContainer({ children, className, height = 300 }: ChartContainerProps) {
+export function ChartContainer({ children, height = 300 }: ChartContainerProps) {
   return (
-    <div
-      className={cn('w-full', className)}
-      style={{ height, minWidth: 100, minHeight: typeof height === 'number' ? Math.min(height, 100) : 100 }}
-    >
-      <ResponsiveContainer width="100%" height="100%">
-        {children as React.ReactElement}
-      </ResponsiveContainer>
-    </div>
+    <Paper p="md" style={{ height, minWidth: 100, minHeight: typeof height === 'number' ? Math.min(height, 100) : 100 }}>
+      {children}
+    </Paper>
   )
 }
 
-interface ChartTooltipContentProps {
-  active?: boolean
-  payload?: Array<{ name: string; value: number; color: string; dataKey: string }>
-  label?: string
-  labelFormatter?: (label: string) => string
-  valueFormatter?: (value: number) => string
-}
-
-export function ChartTooltipContent({
-  active, payload, label,
-  labelFormatter = (l) => l,
-  valueFormatter = (v) => v.toLocaleString(),
-}: ChartTooltipContentProps) {
-  if (!active || !payload?.length) return null
-  return (
-    <div className="rounded-lg border bg-background p-2 shadow-md">
-      <p className="mb-1 text-sm font-medium">{labelFormatter(label || '')}</p>
-      <div className="space-y-0.5">
-        {payload.map((entry, index) => (
-          <div key={index} className="flex items-center gap-2 text-sm">
-            <div className="size-2.5 rounded-full" style={{ backgroundColor: entry.color }} />
-            <span className="text-muted-foreground">{entry.name}:</span>
-            <span className="font-medium">{valueFormatter(entry.value)}</span>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-export function ChartTooltip(props: React.ComponentProps<typeof RechartsTooltip>) {
-  return <RechartsTooltip content={<ChartTooltipContent />} cursor={{ fill: 'hsl(var(--muted) / 0.3)' }} {...props} />
-}
-
-export function ChartLegend(props: React.ComponentProps<typeof RechartsLegend>) {
-  return <RechartsLegend wrapperStyle={{ paddingTop: 16 }} {...props} />
-}
+/** @deprecated Mantine charts handle tooltips internally. Kept for index.ts compat. */
+export function ChartTooltipContent() { return null }
+/** @deprecated Mantine charts handle tooltips internally. Kept for index.ts compat. */
+export function ChartTooltip() { return null }
+/** @deprecated Mantine charts handle legends internally. Kept for index.ts compat. */
+export function ChartLegend() { return null }
diff --git a/frontend/functions/ui/checkbox.md b/frontend/functions/ui/checkbox.md
index 26a3b850..bb425ae4 100644
--- a/frontend/functions/ui/checkbox.md
+++ b/frontend/functions/ui/checkbox.md
@@ -6,14 +6,14 @@ domain: ui
 version: "1.0.0"
 purity: impure
 signature: "Checkbox(props: CheckboxProps): JSX.Element"
-description: "Input booleano accesible con label opcional y variante indeterminate. Base-UI Checkbox primitive."
-tags: [checkbox, component, ui, interactive, form, base-ui]
-uses_functions: [cn_ts_core]
+description: "Input booleano accesible con label opcional y variante indeterminate. Mantine Checkbox."
+tags: [checkbox, component, ui, interactive, form, mantine]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: ["@base-ui/react/checkbox", "class-variance-authority"]
+imports: ["@mantine/core"]
 output: "Componente Checkbox que renderiza input booleano accesible con label opcional y estado indeterminate"
 tested: false
 tests: []
@@ -70,4 +70,4 @@ variant: []
 
 ## Notas
 
-Usa Base-UI Checkbox primitive para accesibilidad completa (keyboard, ARIA). El estado indeterminate se muestra con un guion horizontal. El id se genera automaticamente con useId si no se provee.
+Usa Mantine Checkbox para accesibilidad completa (keyboard, ARIA). El estado indeterminate se muestra con un guion horizontal. El callback onCheckedChange se adapta desde el onChange nativo de Mantine.
diff --git a/frontend/functions/ui/checkbox.tsx b/frontend/functions/ui/checkbox.tsx
index e129c1c7..a9205028 100644
--- a/frontend/functions/ui/checkbox.tsx
+++ b/frontend/functions/ui/checkbox.tsx
@@ -1,76 +1,32 @@
-import * as React from "react"
-import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
-import { cn } from "../core/cn"
+import { Checkbox as MantineCheckbox } from "@mantine/core"
 
-interface CheckboxProps extends CheckboxPrimitive.Root.Props {
+interface CheckboxProps {
   label?: string
   indeterminate?: boolean
   className?: string
   labelClassName?: string
+  checked?: boolean
+  defaultChecked?: boolean
+  disabled?: boolean
+  onCheckedChange?: (checked: boolean) => void
+  id?: string
 }
 
-function Checkbox({ className, label, id, indeterminate, ...props }: CheckboxProps) {
-  const internalId = React.useId()
-  const checkboxId = id ?? internalId
-
+function Checkbox({ className, label, id, indeterminate, checked, defaultChecked, disabled, onCheckedChange, ...props }: CheckboxProps) {
   return (
-    <div className="flex items-center gap-2">
-      <CheckboxPrimitive.Root
-        id={checkboxId}
-        data-slot="checkbox"
-        className={cn(
-          "peer size-4 shrink-0 rounded border border-input bg-transparent transition-colors outline-none",
-          "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
-          "data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground",
-          "data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground",
-          "disabled:pointer-events-none disabled:opacity-50",
-          className
-        )}
-        indeterminate={indeterminate}
-        {...props}
-      >
-        <CheckboxPrimitive.Indicator
-          data-slot="checkbox-indicator"
-          className="flex items-center justify-center text-current"
-        >
-          {indeterminate ? (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="3"
-              strokeLinecap="round"
-              className="size-3"
-            >
-              <line x1="5" y1="12" x2="19" y2="12" />
-            </svg>
-          ) : (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="3"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="size-3"
-            >
-              <polyline points="20 6 9 17 4 12" />
-            </svg>
-          )}
-        </CheckboxPrimitive.Indicator>
-      </CheckboxPrimitive.Root>
-      {label && (
-        <label
-          htmlFor={checkboxId}
-          data-slot="checkbox-label"
-          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 cursor-pointer select-none"
-        >
-          {label}
-        </label>
-      )}
-    </div>
+    <MantineCheckbox
+      id={id}
+      data-slot="checkbox"
+      label={label}
+      indeterminate={indeterminate}
+      checked={checked}
+      defaultChecked={defaultChecked}
+      disabled={disabled}
+      onChange={(event) => onCheckedChange?.(event.currentTarget.checked)}
+      className={className}
+      size="sm"
+      {...props}
+    />
   )
 }
 
diff --git a/frontend/functions/ui/chip.md b/frontend/functions/ui/chip.md
new file mode 100644
index 00000000..6d211692
--- /dev/null
+++ b/frontend/functions/ui/chip.md
@@ -0,0 +1,88 @@
+---
+name: chip
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "Chip(props: ChipProps): JSX.Element"
+description: "Chip seleccionable con variantes filled/outline/light. ChipGroup para selección simple o múltiple. Wrapper sobre Mantine Chip."
+tags: [chip, toggle, selection, component, ui, mantine]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core"]
+output: "Componente Chip que renderiza un elemento seleccionable tipo badge, con ChipGroup para gestionar selección simple o múltiple entre varios chips"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/chip.tsx"
+props:
+  - name: checked
+    type: "boolean"
+    required: false
+    description: "Estado seleccionado del chip (controlled)"
+  - name: onChange
+    type: "(checked: boolean) => void"
+    required: false
+    description: "Callback al cambiar el estado del chip"
+  - name: variant
+    type: "'filled' | 'outline' | 'light'"
+    required: false
+    description: "Estilo visual del chip"
+  - name: color
+    type: "string"
+    required: false
+    description: "Color del chip cuando está seleccionado"
+  - name: size
+    type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+    required: false
+    description: "Tamaño del chip"
+  - name: children
+    type: "React.ReactNode"
+    required: true
+    description: "Contenido del chip — texto o elemento"
+emits: [onChange]
+has_state: true
+framework: react
+variant: [filled, outline, light]
+---
+
+## Ejemplo
+
+```tsx
+import { Chip, ChipGroup } from '@fn_library'
+
+// Chip individual controlado
+<Chip checked={active} onChange={setActive}>
+  Activo
+</Chip>
+
+// ChipGroup selección simple (una sola opción)
+<ChipGroup value={selected} onChange={setSelected}>
+  <Chip value="react">React</Chip>
+  <Chip value="vue">Vue</Chip>
+  <Chip value="svelte">Svelte</Chip>
+</ChipGroup>
+
+// ChipGroup selección múltiple
+<ChipGroup multiple value={tags} onChange={setTags}>
+  <Chip value="frontend">Frontend</Chip>
+  <Chip value="backend">Backend</Chip>
+  <Chip value="devops">DevOps</Chip>
+</ChipGroup>
+
+// Con variante y color custom
+<Chip variant="outline" color="teal" size="lg">
+  Destacado
+</Chip>
+```
+
+## Notas
+
+- Wrapper directo sobre `Chip` de `@mantine/core` v9. Todas las props de Mantine Chip son válidas.
+- `ChipGroup` es un alias de `MantineChip.Group` — gestiona el estado de selección entre chips hijos.
+- En `ChipGroup` sin `multiple`, `value` es `string`. Con `multiple`, `value` es `string[]`.
+- Internamente cada `Chip` renderiza un checkbox/radio accesible oculto con label visual.
diff --git a/frontend/functions/ui/chip.tsx b/frontend/functions/ui/chip.tsx
new file mode 100644
index 00000000..adcc49e2
--- /dev/null
+++ b/frontend/functions/ui/chip.tsx
@@ -0,0 +1,12 @@
+import { Chip as MantineChip, type ChipProps as MantineChipProps } from '@mantine/core'
+
+interface ChipProps extends MantineChipProps {}
+
+function Chip(props: ChipProps) {
+  return <MantineChip {...props} />
+}
+
+const ChipGroup = MantineChip.Group
+
+export { Chip, ChipGroup }
+export type { ChipProps }
diff --git a/frontend/functions/ui/color_input.md b/frontend/functions/ui/color_input.md
new file mode 100644
index 00000000..901270be
--- /dev/null
+++ b/frontend/functions/ui/color_input.md
@@ -0,0 +1,104 @@
+---
+name: color_input
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "ColorInput(props: ColorInputProps): JSX.Element"
+description: "Selector de color con picker, swatches predefinidos y eye dropper. Soporta hex, rgb, hsl con alpha. Wrapper sobre Mantine ColorInput."
+tags: [color, picker, input, form, component, ui, interactive, mantine]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core"]
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/color_input.tsx"
+framework: react
+has_state: true
+props:
+  - name: format
+    type: "\"hex\" | \"hexa\" | \"rgb\" | \"rgba\" | \"hsl\" | \"hsla\""
+    required: false
+    description: "Formato de color a usar en el valor. Por defecto hex."
+  - name: swatches
+    type: "string[]"
+    required: false
+    description: "Lista de colores predefinidos mostrados como swatches en el picker."
+  - name: withEyeDropper
+    type: "boolean"
+    required: false
+    description: "Muestra el boton eye dropper para seleccionar color de la pantalla."
+  - name: withPicker
+    type: "boolean"
+    required: false
+    description: "Muestra el color picker interactivo. Por defecto true."
+  - name: value
+    type: "string"
+    required: false
+    description: "Valor controlado del color en el formato especificado."
+  - name: onChange
+    type: "(value: string) => void"
+    required: false
+    description: "Callback invocado cuando el color cambia."
+  - name: label
+    type: "React.ReactNode"
+    required: false
+    description: "Etiqueta del campo."
+  - name: placeholder
+    type: "string"
+    required: false
+    description: "Placeholder del input de texto."
+  - name: disabled
+    type: "boolean"
+    required: false
+    description: "Deshabilita el input."
+  - name: size
+    type: "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\""
+    required: false
+    description: "Tamanio del componente."
+emits: [onChange, onChangeEnd]
+output: "Componente ColorInput que renderiza input de color con picker desplegable y swatches"
+params: []
+---
+
+## Ejemplo
+
+```tsx
+import { ColorInput } from '@fn_library/color_input'
+
+// Basico con hex (default)
+<ColorInput
+  label="Color primario"
+  placeholder="#228be6"
+/>
+
+// Con swatches predefinidos
+<ColorInput
+  label="Color de marca"
+  swatches={['#2e2e2e', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
+  swatchesPerRow={7}
+  placeholder="Elige un color"
+/>
+
+// Con rgba y eye dropper
+<ColorInput
+  label="Color con transparencia"
+  format="rgba"
+  withEyeDropper
+  value="rgba(34, 139, 230, 0.5)"
+  onChange={(value) => console.log(value)}
+/>
+```
+
+## Notas
+
+Wrapper directo sobre `ColorInput` de Mantine v9. Hereda todas las props de Mantine sin restricciones.
+
+El eye dropper (`withEyeDropper`) solo funciona en browsers que soporten la EyeDropper API (Chrome/Edge). En Firefox no aparece el boton automaticamente.
+
+Cuando `format` es `hex` o `hsl`, el valor no incluye canal alpha. Para transparencia usar `hexa`, `rgba` o `hsla`.
diff --git a/frontend/functions/ui/color_input.tsx b/frontend/functions/ui/color_input.tsx
new file mode 100644
index 00000000..3d34d95a
--- /dev/null
+++ b/frontend/functions/ui/color_input.tsx
@@ -0,0 +1,10 @@
+import { ColorInput as MantineColorInput, type ColorInputProps as MantineColorInputProps } from '@mantine/core'
+
+interface ColorInputProps extends MantineColorInputProps {}
+
+function ColorInput(props: ColorInputProps) {
+  return <MantineColorInput {...props} />
+}
+
+export { ColorInput }
+export type { ColorInputProps }
diff --git a/frontend/functions/ui/command.md b/frontend/functions/ui/command.md
index 493c7954..0c010410 100644
--- a/frontend/functions/ui/command.md
+++ b/frontend/functions/ui/command.md
@@ -8,12 +8,12 @@ purity: impure
 signature: "Command(props: CommandProps): JSX.Element"
 description: "Combobox de busqueda y seleccion estilo cmdk. Filtra items por query, soporta grupos, iconos y shortcuts. Incluye CommandSearch para uso de una linea."
 tags: [command, search, combobox, component, ui, interactive]
-uses_functions: [cn_ts_core]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: ["lucide-react"]
+imports: ["@mantine/core", "@tabler/icons-react"]
 output: "Componente Command que renderiza combobox de búsqueda y selección con filtrado reactivo, grupos e iconos"
 tested: false
 tests: []
diff --git a/frontend/functions/ui/command.tsx b/frontend/functions/ui/command.tsx
index aa377e0c..7605394e 100644
--- a/frontend/functions/ui/command.tsx
+++ b/frontend/functions/ui/command.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import { SearchIcon, XIcon } from "lucide-react"
-import { cn } from "../core/cn"
+import * as React from 'react'
+import { TextInput, Text, Box, ScrollArea } from '@mantine/core'
+import { IconSearch } from '@tabler/icons-react'
 
-interface CommandItem {
+interface CommandItemData {
   value: string
   label: string
   description?: string
@@ -12,7 +12,7 @@ interface CommandItem {
 }
 
 interface CommandProps {
-  items: CommandItem[]
+  items: CommandItemData[]
   value?: string
   onValueChange?: (value: string) => void
   placeholder?: string
@@ -22,122 +22,107 @@ interface CommandProps {
   listClassName?: string
 }
 
-function Command({ className, ...props }: React.ComponentPropsWithoutRef<"div">) {
+function Command({ className, children, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+  return <Box data-slot="command" className={className} {...props}>{children}</Box>
+}
+
+function CommandInput({ className, value, onChange, placeholder, ...props }: {
+  className?: string
+  value?: string
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  placeholder?: string
+}) {
   return (
-    <div
-      data-slot="command"
-      className={cn("flex h-full w-full flex-col overflow-hidden rounded-xl bg-popover text-popover-foreground", className)}
+    <TextInput
+      data-slot="command-input"
+      leftSection={<IconSearch size={16} />}
+      className={className}
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      styles={{ input: { border: 'none', borderBottom: '1px solid var(--mantine-color-default-border)' } }}
       {...props}
     />
   )
 }
 
-function CommandInput({ className, ...props }: React.ComponentPropsWithoutRef<"input">) {
+function CommandList({ className, children }: { className?: string; children?: React.ReactNode }) {
   return (
-    <div data-slot="command-input-wrapper" className="flex items-center border-b px-3">
-      <SearchIcon className="mr-2 size-4 shrink-0 text-muted-foreground" />
-      <input
-        data-slot="command-input"
-        className={cn(
-          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none",
-          "placeholder:text-muted-foreground",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        {...props}
-      />
-    </div>
+    <ScrollArea.Autosize mah={300} data-slot="command-list" className={className}>
+      {children}
+    </ScrollArea.Autosize>
   )
 }
 
-function CommandList({ className, ...props }: React.ComponentPropsWithoutRef<"div">) {
+function CommandEmpty({ className, children }: { className?: string; children?: React.ReactNode }) {
   return (
-    <div
-      data-slot="command-list"
-      className={cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className)}
-      {...props}
-    />
+    <Text ta="center" c="dimmed" size="sm" py="xl" data-slot="command-empty" className={className}>
+      {children}
+    </Text>
   )
 }
 
-function CommandEmpty({ className, ...props }: React.ComponentPropsWithoutRef<"div">) {
+function CommandGroup({ className, heading, children }: { className?: string; heading?: string; children?: React.ReactNode }) {
   return (
-    <div
-      data-slot="command-empty"
-      className={cn("py-6 text-center text-sm text-muted-foreground", className)}
-      {...props}
-    />
+    <Box data-slot="command-group" p={4} className={className}>
+      {heading && <Text size="xs" fw={500} c="dimmed" px="sm" py={6}>{heading}</Text>}
+      <div>{children}</div>
+    </Box>
   )
 }
 
-function CommandGroup({ className, heading, ...props }: React.ComponentPropsWithoutRef<"div"> & { heading?: string }) {
-  return (
-    <div data-slot="command-group" className={cn("overflow-hidden p-1 text-foreground", className)}>
-      {heading && (
-        <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">{heading}</div>
-      )}
-      <div {...props} />
-    </div>
-  )
+function CommandSeparator({ className }: { className?: string }) {
+  return <Box data-slot="command-separator" h={1} bg="var(--mantine-color-default-border)" mx={-4} className={className} />
 }
 
-function CommandSeparator({ className, ...props }: React.ComponentPropsWithoutRef<"div">) {
-  return (
-    <div
-      data-slot="command-separator"
-      className={cn("-mx-1 h-px bg-border", className)}
-      {...props}
-    />
-  )
-}
-
-interface CommandItemProps extends React.ComponentPropsWithoutRef<"div"> {
+function CommandItem({ className, selected, disabled, onSelect, children }: {
+  className?: string
   selected?: boolean
   disabled?: boolean
   onSelect?: () => void
-}
-
-function CommandItem({ className, selected, disabled, onSelect, ...props }: CommandItemProps) {
+  children?: React.ReactNode
+}) {
   return (
-    <div
+    <Box
       data-slot="command-item"
       data-selected={selected}
       aria-disabled={disabled}
       role="option"
       aria-selected={selected}
       onClick={!disabled ? onSelect : undefined}
-      className={cn(
-        "relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none",
-        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground",
-        "hover:bg-accent hover:text-accent-foreground",
-        disabled && "pointer-events-none opacity-50",
-        className
-      )}
-      {...props}
-    />
+      px="sm"
+      py={6}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        borderRadius: 'var(--mantine-radius-sm)',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        opacity: disabled ? 0.5 : 1,
+        backgroundColor: selected ? 'var(--mantine-color-default-hover)' : undefined,
+        fontSize: 'var(--mantine-font-size-sm)',
+      }}
+      className={className}
+    >
+      {children}
+    </Box>
   )
 }
 
-function CommandShortcut({ className, ...props }: React.ComponentPropsWithoutRef<"span">) {
-  return (
-    <span
-      data-slot="command-shortcut"
-      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
-      {...props}
-    />
-  )
+function CommandShortcut({ className, children }: { className?: string; children?: React.ReactNode }) {
+  return <Text span size="xs" c="dimmed" ml="auto" className={className}>{children}</Text>
 }
 
 function CommandSearch({
   items,
   value,
   onValueChange,
-  placeholder = "Search...",
-  emptyMessage = "No results found.",
+  placeholder = 'Search...',
+  emptyMessage = 'No results found.',
   className,
 }: CommandProps) {
-  const [query, setQuery] = React.useState("")
-  const [selectedValue, setSelectedValue] = React.useState(value ?? "")
+  const [query, setQuery] = React.useState('')
+  const [selectedValue, setSelectedValue] = React.useState(value ?? '')
 
   const filtered = React.useMemo(() => {
     if (!query) return items
@@ -151,9 +136,9 @@ function CommandSearch({
   }, [items, query])
 
   const groups = React.useMemo(() => {
-    const map = new Map<string, CommandItem[]>()
+    const map = new Map<string, CommandItemData[]>()
     for (const item of filtered) {
-      const key = item.group ?? ""
+      const key = item.group ?? ''
       if (!map.has(key)) map.set(key, [])
       map.get(key)!.push(item)
     }
@@ -185,10 +170,10 @@ function CommandSearch({
                   disabled={item.disabled}
                   onSelect={() => handleSelect(item.value)}
                 >
-                  {item.icon && <span className="shrink-0">{item.icon}</span>}
+                  {item.icon && <span>{item.icon}</span>}
                   <span>{item.label}</span>
                   {item.description && (
-                    <span className="ml-auto text-xs text-muted-foreground">{item.description}</span>
+                    <Text span size="xs" c="dimmed" ml="auto">{item.description}</Text>
                   )}
                 </CommandItem>
               ))}
@@ -201,4 +186,4 @@ function CommandSearch({
 }
 
 export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSearch, CommandSeparator, CommandShortcut }
-export type { CommandItem, CommandProps }
+export type { CommandItemData, CommandProps }
diff --git a/frontend/functions/ui/crud_page.md b/frontend/functions/ui/crud_page.md
index 68f07c23..f1da5d79 100644
--- a/frontend/functions/ui/crud_page.md
+++ b/frontend/functions/ui/crud_page.md
@@ -8,12 +8,12 @@ purity: pure
 signature: "crudPage<T>(props: CrudPageProps<T>): ReactElement"
 description: "Genera una página CRUD completa con header, tabla con columnas configurables, botones de acción (add/edit/delete) y schema de formulario."
 tags: [crud, page, table, form, factory, composition, ui]
-uses_functions: [cn_ts_core]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: [react]
+imports: [react, "@mantine/core", "@tabler/icons-react"]
 params:
   - name: props
     desc: "Configuración CRUD: título, datos, columnas de tabla, campos de formulario y callbacks para add/edit/delete"
diff --git a/frontend/functions/ui/crud_page.tsx b/frontend/functions/ui/crud_page.tsx
index effa6a24..0b97734f 100644
--- a/frontend/functions/ui/crud_page.tsx
+++ b/frontend/functions/ui/crud_page.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
-import { cn } from '../core/cn'
+import { Stack, Group, Title, Text, Paper, Table, Button, ActionIcon, Center } from '@mantine/core'
+import { IconPlus, IconPencil, IconTrash } from '@tabler/icons-react'
 
 interface CrudField {
   key: string
@@ -37,83 +38,83 @@ export function crudPage<T extends Record<string, unknown>>({
   onEdit,
   onDelete,
   actions,
-  className,
 }: CrudPageProps<T>): React.ReactElement {
   return (
-    <div className={cn('space-y-6', className)}>
+    <Stack gap="lg">
       {/* Header */}
-      <div className="flex items-center justify-between border-b pb-4">
-        <div className="space-y-1">
-          <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
-          {subtitle && <p className="text-sm text-muted-foreground">{subtitle}</p>}
-        </div>
-        <div className="flex items-center gap-2">
+      <Group justify="space-between" pb="md" style={{ borderBottom: '1px solid var(--mantine-color-default-border)' }}>
+        <Stack gap={4}>
+          <Title order={2}>{title}</Title>
+          {subtitle && <Text size="sm" c="dimmed">{subtitle}</Text>}
+        </Stack>
+        <Group gap="xs">
           {actions}
           {onAdd && (
-            <button className="inline-flex h-8 items-center gap-1.5 rounded-lg bg-primary px-2.5 text-sm font-medium text-primary-foreground hover:bg-primary/80">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14M5 12h14"/></svg>
+            <Button size="xs" leftSection={<IconPlus size={16} />}>
               Add {title.replace(/s$/, '')}
-            </button>
+            </Button>
           )}
-        </div>
-      </div>
+        </Group>
+      </Group>
 
       {/* Table */}
-      <div className="rounded-lg border">
-        <table className="w-full caption-bottom text-sm">
-          <thead className="border-b bg-muted/50">
-            <tr>
+      <Paper withBorder radius="md">
+        <Table highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
               {columns.map((col) => (
-                <th key={String(col.key)} className="px-4 py-3 text-left text-sm font-medium text-muted-foreground">
+                <Table.Th key={String(col.key)} fz="sm" fw={500} c="dimmed" px="md" py="sm">
                   {col.label}
-                </th>
+                </Table.Th>
               ))}
               {(onEdit || onDelete) && (
-                <th className="px-4 py-3 text-right text-sm font-medium text-muted-foreground">Actions</th>
+                <Table.Th ta="right" fz="sm" fw={500} c="dimmed" px="md" py="sm">Actions</Table.Th>
               )}
-            </tr>
-          </thead>
-          <tbody className="divide-y">
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
             {data.length === 0 ? (
-              <tr>
-                <td colSpan={columns.length + (onEdit || onDelete ? 1 : 0)} className="h-24 text-center text-muted-foreground">
-                  No items yet.
-                </td>
-              </tr>
+              <Table.Tr>
+                <Table.Td colSpan={columns.length + (onEdit || onDelete ? 1 : 0)}>
+                  <Center h={96}>
+                    <Text c="dimmed">No items yet.</Text>
+                  </Center>
+                </Table.Td>
+              </Table.Tr>
             ) : (
               data.map((row, i) => (
-                <tr key={i} className="hover:bg-muted/50">
+                <Table.Tr key={i}>
                   {columns.map((col) => (
-                    <td key={String(col.key)} className="px-4 py-3 align-middle">
+                    <Table.Td key={String(col.key)} px="md" py="sm" style={{ verticalAlign: 'middle' }}>
                       {col.render ? col.render(row[col.key], row) : String(row[col.key] ?? '')}
-                    </td>
+                    </Table.Td>
                   ))}
                   {(onEdit || onDelete) && (
-                    <td className="px-4 py-3 text-right">
-                      <div className="flex justify-end gap-1">
+                    <Table.Td px="md" py="sm" ta="right">
+                      <Group gap={4} justify="flex-end">
                         {onEdit && (
-                          <button onClick={() => onEdit(row)} className="inline-flex size-7 items-center justify-center rounded-md hover:bg-muted">
-                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
-                          </button>
+                          <ActionIcon variant="subtle" size="sm" onClick={() => onEdit(row)}>
+                            <IconPencil size={14} />
+                          </ActionIcon>
                         )}
                         {onDelete && (
-                          <button onClick={() => onDelete(row)} className="inline-flex size-7 items-center justify-center rounded-md text-destructive hover:bg-destructive/10">
-                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
-                          </button>
+                          <ActionIcon variant="subtle" color="red" size="sm" onClick={() => onDelete(row)}>
+                            <IconTrash size={14} />
+                          </ActionIcon>
                         )}
-                      </div>
-                    </td>
+                      </Group>
+                    </Table.Td>
                   )}
-                </tr>
+                </Table.Tr>
               ))
             )}
-          </tbody>
-        </table>
-      </div>
+          </Table.Tbody>
+        </Table>
+      </Paper>
 
-      {/* Form fields definition (for agent use — renders a form preview) */}
-      <div className="hidden" data-slot="crud-form-schema" data-fields={JSON.stringify(fields)} />
-    </div>
+      {/* Form fields definition (for agent use) */}
+      <div style={{ display: 'none' }} data-slot="crud-form-schema" data-fields={JSON.stringify(fields)} />
+    </Stack>
   )
 }
 
diff --git a/frontend/functions/ui/dashboard_layout.md b/frontend/functions/ui/dashboard_layout.md
index 947a8c36..8a8f2945 100644
--- a/frontend/functions/ui/dashboard_layout.md
+++ b/frontend/functions/ui/dashboard_layout.md
@@ -8,12 +8,12 @@ purity: pure
 signature: "dashboardLayout(props: DashboardLayoutProps): ReactElement"
 description: "Genera un grid responsive de dashboard a partir de un array de widgets con span configurable. 1-4 columnas con auto-responsive."
 tags: [dashboard, layout, grid, factory, composition, ui]
-uses_functions: [cn_ts_core]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: [react]
+imports: [react, "@mantine/core"]
 params:
   - name: props
     desc: "Configuración de layout: número de columnas y array de widgets con id, título, contenido y span"
diff --git a/frontend/functions/ui/dashboard_layout.tsx b/frontend/functions/ui/dashboard_layout.tsx
index a3d3b89e..d542653c 100644
--- a/frontend/functions/ui/dashboard_layout.tsx
+++ b/frontend/functions/ui/dashboard_layout.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cn } from '../core/cn'
+import { SimpleGrid, Paper, Text } from '@mantine/core'
 
 interface DashboardWidget {
   id: string
@@ -16,51 +16,37 @@ interface DashboardLayoutProps {
   className?: string
 }
 
-const gapClasses = { sm: 'gap-2', md: 'gap-4', lg: 'gap-6' }
-
-const spanClasses: Record<number, string> = {
-  1: 'col-span-1',
-  2: 'col-span-1 md:col-span-2',
-  3: 'col-span-1 md:col-span-2 lg:col-span-3',
-  4: 'col-span-1 md:col-span-2 lg:col-span-4',
-}
-
-const rowSpanClasses: Record<number, string> = {
-  1: 'row-span-1',
-  2: 'row-span-2',
-}
+const gapMap = { sm: 'xs', md: 'md', lg: 'lg' } as const
 
 export function dashboardLayout({
   widgets,
   columns = 4,
   gap = 'md',
-  className,
 }: DashboardLayoutProps): React.ReactElement {
-  const gridCols: Record<number, string> = {
-    1: 'grid-cols-1',
-    2: 'grid-cols-1 md:grid-cols-2',
-    3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
-    4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
-  }
-
   return (
-    <div className={cn('grid', gridCols[columns], gapClasses[gap], className)}>
+    <SimpleGrid
+      cols={{ base: 1, md: Math.min(columns, 2), lg: columns }}
+      spacing={gapMap[gap]}
+    >
       {widgets.map((widget) => (
-        <div
+        <Paper
           key={widget.id}
-          className={cn(
-            'rounded-xl border bg-card p-4 text-card-foreground shadow-sm',
-            spanClasses[widget.span || 1],
-            rowSpanClasses[widget.rowSpan || 1]
-          )}
+          p="md"
+          withBorder
+          shadow="xs"
+          radius="md"
+          style={{
+            gridColumn: widget.span && widget.span > 1 ? `span ${widget.span}` : undefined,
+            gridRow: widget.rowSpan === 2 ? 'span 2' : undefined,
+          }}
         >
           {widget.title && (
-            <h3 className="mb-3 text-sm font-medium text-muted-foreground">{widget.title}</h3>
+            <Text size="sm" fw={500} c="dimmed" mb="sm">{widget.title}</Text>
           )}
           {widget.content}
-        </div>
+        </Paper>
       ))}
-    </div>
+    </SimpleGrid>
   )
 }
 
diff --git a/frontend/functions/ui/data_table.md b/frontend/functions/ui/data_table.md
index f6b2440b..c10e82f2 100644
--- a/frontend/functions/ui/data_table.md
+++ b/frontend/functions/ui/data_table.md
@@ -8,12 +8,12 @@ purity: impure
 signature: "DataTable(props: DataTableProps): JSX.Element"
 description: "Tabla de datos con sticky header, overflow scroll, heatmap por columna, formato condicional (number/datetime/currency) y hover rows. Auto-detecta columnas desde la primera fila si no se proveen."
 tags: [table, data, heatmap, dashboard, component, ui, format, visualization]
-uses_functions: [cn_ts_core]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: [react]
+imports: [react, "@mantine/core"]
 output: "Componente DataTable que renderiza tabla con sticky header, heatmap condicional y formato automático de datos"
 tested: false
 tests: []
@@ -44,10 +44,6 @@ props:
     type: "Error | null"
     required: false
     description: "Error a mostrar si la carga falló."
-  - name: className
-    type: "string"
-    required: false
-    description: "Clases CSS adicionales."
 emits: []
 has_state: false
 framework: react
diff --git a/frontend/functions/ui/data_table.tsx b/frontend/functions/ui/data_table.tsx
index f76dbe49..385708ea 100644
--- a/frontend/functions/ui/data_table.tsx
+++ b/frontend/functions/ui/data_table.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cn } from '../core/cn'
+import { Table, Text, Center, Loader } from '@mantine/core'
 
 interface ColumnDef {
   key: string
@@ -16,7 +16,6 @@ interface DataTableProps {
   /** Column keys that should be colored by value intensity (heatmap). */
   heatmapColumns?: string[]
   maxHeight?: number | string
-  className?: string
   loading?: boolean
   error?: Error | null
 }
@@ -33,7 +32,7 @@ function formatCell(value: unknown, format?: string): string {
   if (!isNaN(num)) {
     if (format.includes('f')) {
       const match = format.match(/\.(\d+)f/)
-      const d = match ? parseInt(match[1]) : 0
+      const d = match ? parseInt(match[1]!) : 0
       let str = num.toFixed(d)
       if (format.includes(',')) {
         str = Number(str).toLocaleString('en-US', { minimumFractionDigits: d, maximumFractionDigits: d })
@@ -51,7 +50,6 @@ function DataTableComponent({
   columns,
   heatmapColumns = [],
   maxHeight = 500,
-  className,
   loading = false,
   error = null,
 }: DataTableProps) {
@@ -59,7 +57,7 @@ function DataTableComponent({
   const effectiveColumns: ColumnDef[] = (columns && columns.length > 0)
     ? columns
     : (data && data.length > 0)
-      ? Object.keys(data[0]).map(k => ({ key: k, label: k }))
+      ? Object.keys(data[0]!).map(k => ({ key: k, label: k }))
       : []
 
   // Compute heatmap ranges per column
@@ -82,73 +80,74 @@ function DataTableComponent({
     const num = Number(value)
     if (isNaN(num)) return undefined
     const t = (num - range.min) / (range.max - range.min)
-    // Dark blue (low) → bright blue (high)
     const alpha = 0.1 + t * 0.55
     return { backgroundColor: `rgba(59, 130, 246, ${alpha})` }
   }
 
-  const maxHeightStyle = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight
-
   if (loading && (!data || data.length === 0)) {
     return (
-      <div className={cn('flex items-center justify-center text-muted-foreground text-sm', className)}
-        style={{ height: 200 }}>
-        Loading...
-      </div>
+      <Center h={200}>
+        <Loader size="sm" />
+      </Center>
     )
   }
 
   if (error) {
     return (
-      <div className={cn('flex items-center justify-center text-destructive text-sm', className)}
-        style={{ height: 200 }}>
-        {error.message}
-      </div>
+      <Center h={200}>
+        <Text size="sm" c="red">{error.message}</Text>
+      </Center>
     )
   }
 
   return (
-    <div className={cn('overflow-auto', className)} style={{ maxHeight: maxHeightStyle }}>
-      <table className="w-full text-sm">
-        <thead className="sticky top-0 bg-card z-10">
-          <tr className="border-b border-border">
+    <Table.ScrollContainer minWidth={0} mah={maxHeight} type="scrollarea">
+      <Table striped={false} highlightOnHover withTableBorder={false} withColumnBorders={false}>
+        <Table.Thead style={{ position: 'sticky', top: 0, zIndex: 10, backgroundColor: 'var(--mantine-color-body)' }}>
+          <Table.Tr>
             {effectiveColumns.map(col => (
-              <th
+              <Table.Th
                 key={col.key}
-                className="text-left py-1.5 px-3 text-xs font-medium text-muted-foreground uppercase tracking-wider whitespace-nowrap"
+                style={{ whiteSpace: 'nowrap' }}
+                fz="xs"
+                fw={500}
+                c="dimmed"
+                tt="uppercase"
+                py={6}
+                px="sm"
               >
                 {col.label}
-              </th>
+              </Table.Th>
             ))}
-          </tr>
-        </thead>
-        <tbody>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
           {(data ?? []).map((row, i) => (
-            <tr key={i} className="border-b border-border hover:bg-accent/50 transition-colors">
+            <Table.Tr key={i}>
               {effectiveColumns.map(col => {
                 const align = col.align ?? (typeof row[col.key] === 'number' ? 'right' : 'left')
                 return (
-                  <td
+                  <Table.Td
                     key={col.key}
-                    className={cn(
-                      'py-1.5 px-3 font-mono text-xs',
-                      align === 'right' && 'text-right',
-                      align === 'center' && 'text-center',
-                    )}
-                    style={heatmapStyle(col.key, row[col.key])}
+                    style={{ textAlign: align, fontFamily: 'var(--mantine-font-family-monospace)', ...heatmapStyle(col.key, row[col.key]) }}
+                    fz="xs"
+                    py={6}
+                    px="sm"
                   >
                     {formatCell(row[col.key], col.format)}
-                  </td>
+                  </Table.Td>
                 )
               })}
-            </tr>
+            </Table.Tr>
           ))}
-        </tbody>
-      </table>
+        </Table.Tbody>
+      </Table>
       {(!data || data.length === 0) && (
-        <p className="text-center text-muted-foreground text-sm py-8">No data</p>
+        <Center py="xl">
+          <Text size="sm" c="dimmed">No data</Text>
+        </Center>
       )}
-    </div>
+    </Table.ScrollContainer>
   )
 }
 
diff --git a/frontend/functions/ui/date_picker_input.md b/frontend/functions/ui/date_picker_input.md
new file mode 100644
index 00000000..fde1c8d5
--- /dev/null
+++ b/frontend/functions/ui/date_picker_input.md
@@ -0,0 +1,145 @@
+---
+name: date_picker_input
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "DatePickerInput(props: DatePickerInputProps): JSX.Element"
+description: "Selector de fecha con input y calendario desplegable. Soporta fecha simple, múltiple y rango. Wrapper sobre Mantine DatePickerInput."
+tags: [date, picker, calendar, form, component, ui, interactive, mantine]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/dates"]
+output: "Componente DatePickerInput que renderiza input con calendario para selección de fechas"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/date_picker_input.tsx"
+props:
+  - name: type
+    type: "'default' | 'multiple' | 'range'"
+    required: false
+    description: "Modo de selección — fecha simple, múltiples fechas, o rango de fechas"
+  - name: value
+    type: "DateValue | DateValue[] | [DateValue, DateValue] | null"
+    required: false
+    description: "Fecha o fechas seleccionadas (controlled)"
+  - name: onChange
+    type: "(value: DateValue | DateValue[] | [DateValue, DateValue] | null) => void"
+    required: false
+    description: "Callback al cambiar la selección de fecha"
+  - name: valueFormat
+    type: "string"
+    required: false
+    description: "Formato de la fecha mostrada en el input (ej: 'DD/MM/YYYY')"
+  - name: clearable
+    type: "boolean"
+    required: false
+    description: "Permite limpiar la selección de fecha"
+  - name: label
+    type: "string"
+    required: false
+    description: "Label del campo"
+  - name: placeholder
+    type: "string"
+    required: false
+    description: "Texto cuando no hay fecha seleccionada"
+  - name: minDate
+    type: "Date"
+    required: false
+    description: "Fecha mínima seleccionable"
+  - name: maxDate
+    type: "Date"
+    required: false
+    description: "Fecha máxima seleccionable"
+  - name: disabled
+    type: "boolean"
+    required: false
+    description: "Deshabilitar el selector"
+  - name: size
+    type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+    required: false
+    description: "Tamaño del componente"
+emits: [onChange]
+has_state: true
+framework: react
+variant: [default]
+params:
+  - name: props
+    desc: "Props del componente DatePickerInput — incluye type (modo de selección), value, onChange, valueFormat, clearable, label, placeholder, minDate, maxDate, disabled y size"
+---
+
+## Ejemplo
+
+```tsx
+import { DatePickerInput, DatePicker } from '@fn_library'
+import { useState } from 'react'
+
+// Fecha simple
+function SingleDateExample() {
+  const [value, setValue] = useState<Date | null>(null)
+  return (
+    <DatePickerInput
+      label="Fecha de inicio"
+      placeholder="Selecciona una fecha"
+      value={value}
+      onChange={setValue}
+      clearable
+    />
+  )
+}
+
+// Rango de fechas
+function RangeDateExample() {
+  const [range, setRange] = useState<[Date | null, Date | null]>([null, null])
+  return (
+    <DatePickerInput
+      type="range"
+      label="Periodo"
+      placeholder="Selecciona un rango"
+      value={range}
+      onChange={setRange}
+      valueFormat="DD/MM/YYYY"
+    />
+  )
+}
+
+// Múltiples fechas
+function MultipleDateExample() {
+  const [dates, setDates] = useState<Date[]>([])
+  return (
+    <DatePickerInput
+      type="multiple"
+      label="Días seleccionados"
+      placeholder="Selecciona fechas"
+      value={dates}
+      onChange={setDates}
+      minDate={new Date()}
+    />
+  )
+}
+
+// DatePicker inline (sin input)
+function InlineDateExample() {
+  const [value, setValue] = useState<Date | null>(null)
+  return (
+    <DatePicker
+      value={value}
+      onChange={setValue}
+    />
+  )
+}
+```
+
+## Notas
+
+- Wrapper directo sobre `DatePickerInput` y `DatePicker` de `@mantine/dates` v9. Todas las props de Mantine son válidas.
+- Requiere importar `@mantine/dates/styles.css` — este wrapper ya lo incluye.
+- El prop `type` controla el modo: `'default'` (fecha simple), `'multiple'` (varias fechas), `'range'` (rango con inicio y fin).
+- `DatePicker` es el calendario inline sin input — útil para formularios donde el calendario debe estar siempre visible.
+- `valueFormat` acepta tokens de dayjs (ej: `'DD/MM/YYYY'`, `'MMMM D, YYYY'`).
+- Re-exporta también `DatePicker` de `@mantine/dates` con el mismo patrón de wrapper.
diff --git a/frontend/functions/ui/date_picker_input.tsx b/frontend/functions/ui/date_picker_input.tsx
new file mode 100644
index 00000000..f69bf0cd
--- /dev/null
+++ b/frontend/functions/ui/date_picker_input.tsx
@@ -0,0 +1,17 @@
+import { DatePickerInput as MantineDatePickerInput, DatePicker as MantineDatePicker } from '@mantine/dates'
+import type { DatePickerInputProps as MantineDatePickerInputProps, DatePickerProps as MantineDatePickerProps } from '@mantine/dates'
+import '@mantine/dates/styles.css'
+
+interface DatePickerInputProps extends MantineDatePickerInputProps<'default'> {}
+interface DatePickerProps extends MantineDatePickerProps<'default'> {}
+
+function DatePickerInput(props: DatePickerInputProps) {
+  return <MantineDatePickerInput {...props} />
+}
+
+function DatePicker(props: DatePickerProps) {
+  return <MantineDatePicker {...props} />
+}
+
+export { DatePickerInput, DatePicker }
+export type { DatePickerInputProps, DatePickerProps }
diff --git a/frontend/functions/ui/detail_page.md b/frontend/functions/ui/detail_page.md
index 00dab53a..49b1acd9 100644
--- a/frontend/functions/ui/detail_page.md
+++ b/frontend/functions/ui/detail_page.md
@@ -8,12 +8,12 @@ purity: pure
 signature: "detailPage(props: DetailPageProps): ReactElement"
 description: "Genera una página de detalle de entidad con header (avatar, badge, back), grid de campos, tabs con contadores y timeline de actividad."
 tags: [detail, page, entity, timeline, factory, composition, ui]
-uses_functions: [cn_ts_core]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: [react]
+imports: [react, "@mantine/core", "@tabler/icons-react"]
 params:
   - name: props
     desc: "Configuración de página de detalle: título, avatar, badge, tabs, timeline y campos de metadata"
diff --git a/frontend/functions/ui/detail_page.tsx b/frontend/functions/ui/detail_page.tsx
index 86bae0d4..e8d577a5 100644
--- a/frontend/functions/ui/detail_page.tsx
+++ b/frontend/functions/ui/detail_page.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
-import { cn } from '../core/cn'
+import { Stack, Group, Title, Text, ActionIcon, Box, Tabs, Badge, Timeline, SimpleGrid } from '@mantine/core'
+import { IconChevronLeft } from '@tabler/icons-react'
 
 interface DetailField {
   label: string
@@ -38,96 +39,98 @@ interface DetailPageProps {
   className?: string
 }
 
-const variantDotColors = {
-  default: 'bg-primary',
-  success: 'bg-green-500',
-  warning: 'bg-amber-500',
-  error: 'bg-red-500',
+const variantColors: Record<string, string> = {
+  default: 'blue',
+  success: 'green',
+  warning: 'yellow',
+  error: 'red',
 }
 
 export function detailPage({
   title, subtitle, badge, avatar, actions, onBack,
-  fields, tabs, activeTab, onTabChange, timeline, className,
+  fields, tabs, activeTab, onTabChange, timeline,
 }: DetailPageProps): React.ReactElement {
   return (
-    <div className={cn('space-y-6', className)}>
+    <Stack gap="lg">
       {/* Header */}
-      <div className="flex items-start justify-between border-b pb-4">
-        <div className="flex items-start gap-4">
+      <Group justify="space-between" align="flex-start" pb="md" style={{ borderBottom: '1px solid var(--mantine-color-default-border)' }}>
+        <Group align="flex-start" gap="md">
           {onBack && (
-            <button onClick={onBack} className="mt-1 inline-flex size-7 shrink-0 items-center justify-center rounded-md hover:bg-muted">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m15 18-6-6 6-6"/></svg>
-            </button>
+            <ActionIcon variant="subtle" size="sm" onClick={onBack} mt={4}>
+              <IconChevronLeft size={16} />
+            </ActionIcon>
           )}
-          {avatar && <div className="size-12 shrink-0 overflow-hidden rounded-full bg-muted">{avatar}</div>}
-          <div className="space-y-1">
-            <div className="flex items-center gap-3">
-              <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
+          {avatar && (
+            <Box
+              w={48}
+              h={48}
+              style={{ flexShrink: 0, overflow: 'hidden', borderRadius: '50%', backgroundColor: 'var(--mantine-color-default)' }}
+            >
+              {avatar}
+            </Box>
+          )}
+          <Stack gap={4}>
+            <Group gap="sm" align="center">
+              <Title order={2}>{title}</Title>
               {badge}
-            </div>
-            {subtitle && <p className="text-sm text-muted-foreground">{subtitle}</p>}
-          </div>
-        </div>
-        {actions && <div className="flex items-center gap-2">{actions}</div>}
-      </div>
+            </Group>
+            {subtitle && <Text size="sm" c="dimmed">{subtitle}</Text>}
+          </Stack>
+        </Group>
+        {actions && <Group gap="xs">{actions}</Group>}
+      </Group>
 
       {/* Fields grid */}
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+      <SimpleGrid cols={{ base: 1, md: 2 }} spacing="md">
         {fields.map((field, i) => (
-          <div key={i} className={cn('space-y-1', field.span === 2 && 'md:col-span-2')}>
-            <p className="text-sm text-muted-foreground">{field.label}</p>
-            <div className="text-sm font-medium">{field.value}</div>
-          </div>
+          <Box key={i} style={field.span === 2 ? { gridColumn: 'span 2' } : undefined}>
+            <Stack gap={4}>
+              <Text size="sm" c="dimmed">{field.label}</Text>
+              <Text size="sm" fw={500}>{field.value}</Text>
+            </Stack>
+          </Box>
         ))}
-      </div>
+      </SimpleGrid>
 
       {/* Tabs */}
       {tabs && tabs.length > 0 && (
-        <div className="space-y-4">
-          <nav className="flex gap-4 border-b">
-            {tabs.map((tab) => (
-              <button
-                key={tab.value}
-                type="button"
-                onClick={() => onTabChange?.(tab.value)}
-                className={cn(
-                  'inline-flex items-center gap-2 border-b-2 px-1 pb-3 text-sm font-medium transition-colors',
-                  activeTab === tab.value ? 'border-primary text-foreground' : 'border-transparent text-muted-foreground hover:text-foreground'
-                )}
-              >
-                {tab.label}
-                {tab.count !== undefined && (
-                  <span className="inline-flex h-5 items-center rounded-full bg-muted px-2 text-xs font-medium">{tab.count}</span>
-                )}
-              </button>
-            ))}
-          </nav>
+        <Stack gap="md">
+          <Tabs value={activeTab} onChange={(v) => v && onTabChange?.(v)}>
+            <Tabs.List>
+              {tabs.map((tab) => (
+                <Tabs.Tab
+                  key={tab.value}
+                  value={tab.value}
+                  rightSection={tab.count !== undefined ? <Badge size="xs" variant="filled" circle>{tab.count}</Badge> : undefined}
+                >
+                  {tab.label}
+                </Tabs.Tab>
+              ))}
+            </Tabs.List>
+          </Tabs>
           {tabs.find(t => t.value === activeTab)?.content}
-        </div>
+        </Stack>
       )}
 
       {/* Timeline */}
       {timeline && timeline.length > 0 && (
-        <div className="space-y-3">
-          <h3 className="text-sm font-medium text-muted-foreground">Activity</h3>
-          <div className="space-y-0">
-            {timeline.map((event, i) => (
-              <div key={event.id} className="flex gap-3 pb-4">
-                <div className="flex flex-col items-center">
-                  <div className={cn('mt-1 size-2.5 rounded-full', variantDotColors[event.variant || 'default'])} />
-                  {i < timeline.length - 1 && <div className="flex-1 w-px bg-border" />}
-                </div>
-                <div className="flex-1 space-y-0.5 pb-2">
-                  <p className="text-sm font-medium">{event.title}</p>
-                  {event.description && <p className="text-xs text-muted-foreground">{event.description}</p>}
-                  <p className="text-xs text-muted-foreground/70">{event.timestamp}</p>
-                </div>
-              </div>
+        <Stack gap="sm">
+          <Text size="sm" fw={500} c="dimmed">Activity</Text>
+          <Timeline active={timeline.length - 1} bulletSize={12} lineWidth={2}>
+            {timeline.map((event) => (
+              <Timeline.Item
+                key={event.id}
+                color={variantColors[event.variant || 'default']}
+                title={<Text size="sm" fw={500}>{event.title}</Text>}
+              >
+                {event.description && <Text size="xs" c="dimmed">{event.description}</Text>}
+                <Text size="xs" c="dimmed" opacity={0.7}>{event.timestamp}</Text>
+              </Timeline.Item>
             ))}
-          </div>
-        </div>
+          </Timeline>
+        </Stack>
       )}
-    </div>
+    </Stack>
   )
 }
 
diff --git a/frontend/functions/ui/dialog.md b/frontend/functions/ui/dialog.md
index ae84dc09..1d7a0bf4 100644
--- a/frontend/functions/ui/dialog.md
+++ b/frontend/functions/ui/dialog.md
@@ -6,15 +6,15 @@ domain: ui
 version: "1.0.0"
 purity: impure
 signature: "Dialog(props: DialogRootProps): JSX.Element"
-description: "Diálogo modal accesible con overlay blur, animaciones, close button y sistema de slots (header, footer, title, description)."
-tags: [dialog, modal, overlay, component, ui, interactive]
-uses_functions: [cn_ts_core]
+description: "Diálogo modal accesible con close button y sistema de slots (header, footer, title, description). Mantine Modal."
+tags: [dialog, modal, overlay, component, ui, interactive, mantine]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: ["@base-ui/react", lucide-react, react]
-output: "Componente Dialog que renderiza modal accesible con overlay blur, focus trap y sistema de slots composables"
+imports: ["@mantine/core", react]
+output: "Componente Dialog que renderiza modal accesible con focus trap y sistema de slots composables via Mantine Modal"
 tested: false
 tests: []
 test_file_path: ""
@@ -53,4 +53,4 @@ source_file: "frontend/src/components/ui/dialog.tsx"
 
 ## Notas
 
-10 subcomponentes exportados. Base-UI Dialog primitive para accesibilidad completa (focus trap, escape, click outside).
+10 subcomponentes exportados. Mantine Modal para accesibilidad completa (focus trap, escape, click outside). DialogPortal y DialogOverlay son no-ops mantenidos por compatibilidad.
diff --git a/frontend/functions/ui/dialog.tsx b/frontend/functions/ui/dialog.tsx
index 77c7d8fa..ef22cde4 100644
--- a/frontend/functions/ui/dialog.tsx
+++ b/frontend/functions/ui/dialog.tsx
@@ -1,73 +1,134 @@
-import * as React from "react"
-import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
-import { cn } from "../core/cn"
-import { XIcon } from "lucide-react"
+import * as React from 'react'
+import { Modal, Box, Text, Group } from '@mantine/core'
 
-function Dialog({ ...props }: DialogPrimitive.Root.Props) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+interface DialogProps {
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  children: React.ReactNode
 }
 
-function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
-}
+const DialogContext = React.createContext<{
+  open: boolean
+  setOpen: (open: boolean) => void
+}>({ open: false, setOpen: () => {} })
 
-function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
-}
-
-function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
-}
-
-function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {
-  return (
-    <DialogPrimitive.Backdrop
-      data-slot="dialog-overlay"
-      className={cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className)}
-      {...props}
-    />
+function Dialog({ open: controlledOpen, onOpenChange, children }: DialogProps) {
+  const [internalOpen, setInternalOpen] = React.useState(false)
+  const open = controlledOpen ?? internalOpen
+  const setOpen = React.useCallback(
+    (v: boolean) => {
+      onOpenChange?.(v)
+      if (controlledOpen === undefined) setInternalOpen(v)
+    },
+    [controlledOpen, onOpenChange],
   )
-}
-
-function DialogContent({ className, children, showCloseButton = true, ...props }: DialogPrimitive.Popup.Props & { showCloseButton?: boolean }) {
   return (
-    <DialogPortal>
-      <DialogOverlay />
-      <DialogPrimitive.Popup
-        data-slot="dialog-content"
-        className={cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-background p-4 text-sm ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className)}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close data-slot="dialog-close" className="absolute top-2 right-2 inline-flex size-7 items-center justify-center rounded-md hover:bg-muted">
-            <XIcon className="size-4" />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Popup>
-    </DialogPortal>
-  )
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return <div data-slot="dialog-header" className={cn("flex flex-col gap-2", className)} {...props} />
-}
-
-function DialogFooter({ className, children, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div data-slot="dialog-footer" className={cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end", className)} {...props}>
+    <DialogContext.Provider value={{ open, setOpen }}>
       {children}
-    </div>
+    </DialogContext.Provider>
   )
 }
 
-function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
-  return <DialogPrimitive.Title data-slot="dialog-title" className={cn("text-base leading-none font-medium", className)} {...props} />
+function DialogTrigger({ children, ...props }: React.ComponentProps<'button'>) {
+  const { setOpen } = React.useContext(DialogContext)
+  return (
+    <button type="button" data-slot="dialog-trigger" onClick={() => setOpen(true)} {...props}>
+      {children}
+    </button>
+  )
 }
 
-function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props) {
-  return <DialogPrimitive.Description data-slot="dialog-description" className={cn("text-sm text-muted-foreground", className)} {...props} />
+function DialogPortal({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
+}
+
+function DialogClose({ children, ...props }: React.ComponentProps<'button'>) {
+  const { setOpen } = React.useContext(DialogContext)
+  return (
+    <button type="button" data-slot="dialog-close" onClick={() => setOpen(false)} {...props}>
+      {children}
+    </button>
+  )
+}
+
+function DialogOverlay() {
+  return null
+}
+
+function DialogContent({
+  children,
+  showCloseButton = true,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & { showCloseButton?: boolean }) {
+  const { open, setOpen } = React.useContext(DialogContext)
+  return (
+    <Modal
+      opened={open}
+      onClose={() => setOpen(false)}
+      withCloseButton={showCloseButton}
+      radius="md"
+      padding="md"
+      size="sm"
+      centered
+      data-slot="dialog-content"
+      className={className}
+      {...props}
+    >
+      {children}
+    </Modal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return <Box data-slot="dialog-header" mb="xs" className={className} {...props} />
+}
+
+function DialogFooter({ className, children, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <Group
+      data-slot="dialog-footer"
+      justify="flex-end"
+      gap="sm"
+      mt="md"
+      pt="sm"
+      style={{ borderTop: '1px solid var(--mantine-color-default-border)' }}
+      className={className}
+      {...props}
+    >
+      {children}
+    </Group>
+  )
+}
+
+function DialogTitle({ className, children, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <Text
+      component="div"
+      data-slot="dialog-title"
+      fw={500}
+      size="md"
+      className={className}
+      {...props}
+    >
+      {children}
+    </Text>
+  )
+}
+
+function DialogDescription({ className, children, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <Text
+      component="div"
+      data-slot="dialog-description"
+      size="sm"
+      c="dimmed"
+      className={className}
+      {...props}
+    >
+      {children}
+    </Text>
+  )
 }
 
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger }
diff --git a/frontend/functions/ui/dropdown_menu.md b/frontend/functions/ui/dropdown_menu.md
index b68da7ee..4f0be746 100644
--- a/frontend/functions/ui/dropdown_menu.md
+++ b/frontend/functions/ui/dropdown_menu.md
@@ -7,13 +7,13 @@ version: "1.0.0"
 purity: impure
 signature: "DropdownMenu(props: DropdownMenuProps): JSX.Element"
 description: "Menu de acciones y contexto accesible con items, checkboxes, radios, separadores y submenus. Base-UI Menu primitive."
-tags: [dropdown, menu, component, ui, interactive, overlay, base-ui]
-uses_functions: [cn_ts_core]
+tags: [dropdown, menu, component, ui, interactive, overlay, mantine]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: ["@base-ui/react/menu", "lucide-react"]
+imports: ["@mantine/core"]
 output: "Componente DropdownMenu que renderiza menú desplegable accesible con items, checkboxes, radios y submenus"
 tested: false
 tests: []
diff --git a/frontend/functions/ui/dropdown_menu.tsx b/frontend/functions/ui/dropdown_menu.tsx
index 3fb24bea..5b755af4 100644
--- a/frontend/functions/ui/dropdown_menu.tsx
+++ b/frontend/functions/ui/dropdown_menu.tsx
@@ -1,187 +1,125 @@
-import * as React from "react"
-import { Menu as MenuPrimitive } from "@base-ui/react/menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
-import { cn } from "../core/cn"
+import * as React from 'react'
+import { Menu, Text } from '@mantine/core'
 
-function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
-  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
-}
-
-function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
-  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
-}
-
-function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
-  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-}
-
-function DropdownMenuContent({ className, sideOffset = 4, ...props }: MenuPrimitive.Positioner.Props) {
+function DropdownMenu({ children, ...props }: { children: React.ReactNode; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; modal?: boolean }) {
   return (
-    <DropdownMenuPortal>
-      <MenuPrimitive.Positioner
-        data-slot="dropdown-menu-content"
-        sideOffset={sideOffset}
-        className="z-50"
-        {...props}
-      >
-        <MenuPrimitive.Popup
-          className={cn(
-            "min-w-[8rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-md",
-            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
-            "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-            "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-            className
-          )}
-        >
-          {props.children}
-        </MenuPrimitive.Popup>
-      </MenuPrimitive.Positioner>
-    </DropdownMenuPortal>
-  )
-}
-
-function DropdownMenuItem({ className, inset, ...props }: MenuPrimitive.Item.Props & { inset?: boolean }) {
-  return (
-    <MenuPrimitive.Item
-      data-slot="dropdown-menu-item"
-      className={cn(
-        "relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors",
-        "focus:bg-accent focus:text-accent-foreground",
-        "data-disabled:pointer-events-none data-disabled:opacity-50",
-        "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-        inset && "pl-8",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuCheckboxItem({ className, children, checked, ...props }: MenuPrimitive.CheckboxItem.Props) {
-  return (
-    <MenuPrimitive.CheckboxItem
-      data-slot="dropdown-menu-checkbox-item"
-      className={cn(
-        "relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors",
-        "focus:bg-accent focus:text-accent-foreground",
-        "data-disabled:pointer-events-none data-disabled:opacity-50",
-        className
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="absolute left-2 flex size-4 items-center justify-center">
-        <MenuPrimitive.CheckboxItemIndicator>
-          <CheckIcon className="size-4" />
-        </MenuPrimitive.CheckboxItemIndicator>
-      </span>
-      {children}
-    </MenuPrimitive.CheckboxItem>
-  )
-}
-
-function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
-  return <MenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />
-}
-
-function DropdownMenuRadioItem({ className, children, ...props }: MenuPrimitive.RadioItem.Props) {
-  return (
-    <MenuPrimitive.RadioItem
-      data-slot="dropdown-menu-radio-item"
-      className={cn(
-        "relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors",
-        "focus:bg-accent focus:text-accent-foreground",
-        "data-disabled:pointer-events-none data-disabled:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      <span className="absolute left-2 flex size-4 items-center justify-center">
-        <MenuPrimitive.RadioItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </MenuPrimitive.RadioItemIndicator>
-      </span>
-      {children}
-    </MenuPrimitive.RadioItem>
-  )
-}
-
-function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
-  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-}
-
-function DropdownMenuLabel({ className, inset, ...props }: MenuPrimitive.GroupLabel.Props & { inset?: boolean }) {
-  return (
-    <MenuPrimitive.GroupLabel
-      data-slot="dropdown-menu-label"
-      className={cn("px-2 py-1.5 text-xs font-medium text-muted-foreground", inset && "pl-8", className)}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dropdown-menu-separator"
-      className={cn("-mx-1 my-1 h-px bg-border", className)}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="dropdown-menu-shortcut"
-      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSub({ ...props }: MenuPrimitive.Root.Props) {
-  return <MenuPrimitive.Root data-slot="dropdown-menu-sub" {...props} />
-}
-
-function DropdownMenuSubTrigger({ className, inset, children, ...props }: MenuPrimitive.SubmenuTrigger.Props & { inset?: boolean }) {
-  return (
-    <MenuPrimitive.SubmenuTrigger
-      data-slot="dropdown-menu-sub-trigger"
-      className={cn(
-        "flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors",
-        "focus:bg-accent focus:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground",
-        "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-        inset && "pl-8",
-        className
-      )}
-      {...props}
+    <Menu
+      opened={props.open}
+      defaultOpened={props.defaultOpen}
+      onChange={props.onOpenChange}
+      withinPortal
+      shadow="md"
     >
       {children}
-      <ChevronRightIcon className="ml-auto" />
-    </MenuPrimitive.SubmenuTrigger>
+    </Menu>
   )
 }
 
-function DropdownMenuSubContent({ className, ...props }: MenuPrimitive.Positioner.Props) {
+function DropdownMenuTrigger({ children, ...props }: { children: React.ReactNode; asChild?: boolean; className?: string }) {
+  return <Menu.Target {...props}>{children}</Menu.Target>
+}
+
+function DropdownMenuPortal({ children }: { children?: React.ReactNode }) {
+  return <>{children}</>
+}
+
+function DropdownMenuContent({ children, className }: { children?: React.ReactNode; className?: string; sideOffset?: number }) {
+  return <Menu.Dropdown className={className}>{children}</Menu.Dropdown>
+}
+
+function DropdownMenuItem({ children, className, inset, ...props }: {
+  children?: React.ReactNode
+  className?: string
+  inset?: boolean
+  onClick?: () => void
+  onActivate?: () => void
+  disabled?: boolean
+}) {
   return (
-    <MenuPrimitive.Portal>
-      <MenuPrimitive.Positioner data-slot="dropdown-menu-sub-content" className="z-50" {...props}>
-        <MenuPrimitive.Popup
-          className={cn(
-            "min-w-[8rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-md",
-            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
-            "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-            className
-          )}
-        >
-          {props.children}
-        </MenuPrimitive.Popup>
-      </MenuPrimitive.Positioner>
-    </MenuPrimitive.Portal>
+    <Menu.Item
+      className={className}
+      onClick={props.onClick ?? props.onActivate}
+      disabled={props.disabled}
+      pl={inset ? 'xl' : undefined}
+    >
+      {children}
+    </Menu.Item>
   )
 }
 
+function DropdownMenuCheckboxItem({ children, className, checked, onCheckedChange, ...props }: {
+  children?: React.ReactNode
+  className?: string
+  checked?: boolean
+  onCheckedChange?: (checked: boolean) => void
+  disabled?: boolean
+}) {
+  return (
+    <Menu.Item
+      className={className}
+      onClick={() => onCheckedChange?.(!checked)}
+      disabled={props.disabled}
+      leftSection={checked ? <span style={{ fontSize: 14 }}>✓</span> : <span style={{ width: 14 }} />}
+    >
+      {children}
+    </Menu.Item>
+  )
+}
+
+function DropdownMenuRadioGroup({ children }: { children?: React.ReactNode; value?: string; onValueChange?: (value: string) => void }) {
+  return <>{children}</>
+}
+
+function DropdownMenuRadioItem({ children, className, value, ...props }: {
+  children?: React.ReactNode
+  className?: string
+  value?: string
+  disabled?: boolean
+  onClick?: () => void
+}) {
+  return (
+    <Menu.Item className={className} onClick={props.onClick} disabled={props.disabled}>
+      {children}
+    </Menu.Item>
+  )
+}
+
+function DropdownMenuGroup({ children }: { children?: React.ReactNode }) {
+  return <>{children}</>
+}
+
+function DropdownMenuLabel({ children, className, inset }: { children?: React.ReactNode; className?: string; inset?: boolean }) {
+  return (
+    <Menu.Label className={className} pl={inset ? 'xl' : undefined}>
+      {children}
+    </Menu.Label>
+  )
+}
+
+function DropdownMenuSeparator({ className }: { className?: string }) {
+  return <Menu.Divider className={className} />
+}
+
+function DropdownMenuShortcut({ children, className }: { children?: React.ReactNode; className?: string }) {
+  return <Text span size="xs" c="dimmed" ml="auto" className={className}>{children}</Text>
+}
+
+function DropdownMenuSub({ children }: { children?: React.ReactNode }) {
+  return <>{children}</>
+}
+
+function DropdownMenuSubTrigger({ children, className, inset }: { children?: React.ReactNode; className?: string; inset?: boolean }) {
+  return (
+    <Menu.Item className={className} pl={inset ? 'xl' : undefined}>
+      {children}
+    </Menu.Item>
+  )
+}
+
+function DropdownMenuSubContent({ children, className }: { children?: React.ReactNode; className?: string }) {
+  return <Menu.Dropdown className={className}>{children}</Menu.Dropdown>
+}
+
 export {
   DropdownMenu,
   DropdownMenuCheckboxItem,
diff --git a/frontend/functions/ui/dropzone.md b/frontend/functions/ui/dropzone.md
new file mode 100644
index 00000000..a3e8037e
--- /dev/null
+++ b/frontend/functions/ui/dropzone.md
@@ -0,0 +1,118 @@
+---
+name: dropzone
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "Dropzone(props: DropzoneProps): JSX.Element"
+description: "Zona de drag-and-drop para archivos con estados idle/accept/reject, límite de tamaño y tipos MIME. Wrapper sobre Mantine Dropzone."
+tags: [dropzone, upload, drag-drop, file, component, ui, interactive, mantine]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/dropzone"]
+output: "Componente Dropzone que renderiza área de arrastrar y soltar archivos con feedback visual"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/dropzone.tsx"
+props:
+  - name: onDrop
+    type: "(files: File[]) => void"
+    required: false
+    description: "Callback ejecutado cuando el usuario suelta archivos aceptados"
+  - name: onReject
+    type: "(files: FileRejection[]) => void"
+    required: false
+    description: "Callback ejecutado cuando el usuario suelta archivos rechazados (tipo o tamaño inválido)"
+  - name: accept
+    type: "Record<string, string[]>"
+    required: false
+    description: "Tipos MIME aceptados. Usar IMAGE_MIME_TYPE o MIME_TYPES para constantes predefinidas"
+  - name: maxSize
+    type: "number"
+    required: false
+    description: "Tamaño máximo de archivo en bytes"
+  - name: multiple
+    type: "boolean"
+    required: false
+    description: "Permite seleccionar múltiples archivos a la vez"
+  - name: loading
+    type: "boolean"
+    required: false
+    description: "Muestra estado de carga y desactiva la interacción"
+  - name: disabled
+    type: "boolean"
+    required: false
+    description: "Desactiva el dropzone"
+  - name: children
+    type: "React.ReactNode"
+    required: true
+    description: "Contenido interno, generalmente compuesto con DropzoneAccept, DropzoneReject y DropzoneIdle"
+emits: [onDrop, onReject]
+has_state: true
+framework: react
+variant: []
+---
+
+## Ejemplo
+
+```tsx
+import {
+  Dropzone,
+  DropzoneAccept,
+  DropzoneReject,
+  DropzoneIdle,
+  IMAGE_MIME_TYPE,
+} from '@fn_library/dropzone'
+import { IconPhoto, IconUpload, IconX } from '@tabler/icons-react'
+import { Group, Text } from '@mantine/core'
+
+function ImageUploader() {
+  return (
+    <Dropzone
+      onDrop={(files) => console.log('Archivos aceptados:', files)}
+      onReject={(files) => console.log('Archivos rechazados:', files)}
+      accept={IMAGE_MIME_TYPE}
+      maxSize={5 * 1024 ** 2}
+    >
+      <Group justify="center" gap="xl" mih={120} style={{ pointerEvents: 'none' }}>
+        <DropzoneAccept>
+          <IconUpload size={52} stroke={1.5} />
+        </DropzoneAccept>
+        <DropzoneReject>
+          <IconX size={52} stroke={1.5} />
+        </DropzoneReject>
+        <DropzoneIdle>
+          <IconPhoto size={52} stroke={1.5} />
+        </DropzoneIdle>
+        <div>
+          <Text size="xl" inline>
+            Arrastra imágenes aquí o haz clic para seleccionar
+          </Text>
+          <Text size="sm" c="dimmed" inline mt={7}>
+            Máximo 5 MB por imagen
+          </Text>
+        </div>
+      </Group>
+    </Dropzone>
+  )
+}
+```
+
+## Notas
+
+El prop `onDrop` tiene un default vacío (`() => {}`) para que el componente sea válido sin handler. Siempre sobreescribirlo en uso real.
+
+Sub-componentes exportados:
+- `DropzoneAccept` — visible cuando el archivo arrastrado es aceptado (tipo y tamaño válidos)
+- `DropzoneReject` — visible cuando el archivo es rechazado
+- `DropzoneIdle` — visible en estado de reposo
+- `DropzoneFullScreen` — captura drops en cualquier parte de la pantalla
+
+Constantes de tipos MIME exportadas:
+- `IMAGE_MIME_TYPE` — imágenes comunes (png, jpg, gif, webp, etc.)
+- `MIME_TYPES` — objeto con claves por tipo (pdf, csv, xlsx, mp4, etc.)
diff --git a/frontend/functions/ui/dropzone.tsx b/frontend/functions/ui/dropzone.tsx
new file mode 100644
index 00000000..a46eedec
--- /dev/null
+++ b/frontend/functions/ui/dropzone.tsx
@@ -0,0 +1,20 @@
+import { Dropzone as MantineDropzone, IMAGE_MIME_TYPE, MIME_TYPES } from '@mantine/dropzone'
+import type { DropzoneProps as MantineDropzoneProps } from '@mantine/dropzone'
+import '@mantine/dropzone/styles.css'
+
+interface DropzoneProps extends Partial<MantineDropzoneProps> {
+  children: React.ReactNode
+}
+
+function Dropzone({ children, ...props }: DropzoneProps) {
+  return <MantineDropzone onDrop={() => {}} {...props}>{children}</MantineDropzone>
+}
+
+// Re-export sub-components and constants
+const DropzoneAccept = MantineDropzone.Accept
+const DropzoneReject = MantineDropzone.Reject
+const DropzoneIdle = MantineDropzone.Idle
+const DropzoneFullScreen = MantineDropzone.FullScreen
+
+export { Dropzone, DropzoneAccept, DropzoneReject, DropzoneIdle, DropzoneFullScreen, IMAGE_MIME_TYPE, MIME_TYPES }
+export type { DropzoneProps }
diff --git a/frontend/functions/ui/empty_state.md b/frontend/functions/ui/empty_state.md
new file mode 100644
index 00000000..5f8fd703
--- /dev/null
+++ b/frontend/functions/ui/empty_state.md
@@ -0,0 +1,103 @@
+---
+name: empty_state
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "EmptyState(props: EmptyStateProps): JSX.Element"
+description: "Placeholder para listas y tablas vacías con icono, título, descripción y acción opcional. Tabler Icons por defecto."
+tags: [empty-state, placeholder, no-data, component, ui, mantine]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core", "@tabler/icons-react"]
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/empty_state.tsx"
+framework: react
+has_state: false
+emits: [onAction]
+props:
+  - name: icon
+    type: "React.ReactNode"
+    required: false
+    description: "Icono a mostrar. Default: IconInbox de @tabler/icons-react."
+  - name: title
+    type: "string"
+    required: false
+    description: "Título del empty state. Default: 'No data found'."
+  - name: description
+    type: "string"
+    required: false
+    description: "Descripción explicativa. Default: 'There are no items to display yet.'."
+  - name: actionLabel
+    type: "string"
+    required: false
+    description: "Texto del botón de acción. Se muestra solo si también hay onAction."
+  - name: onAction
+    type: "() => void"
+    required: false
+    description: "Callback del botón de acción. Se muestra solo si también hay actionLabel."
+  - name: size
+    type: "MantineSize"
+    required: false
+    description: "Tamaño general del componente. Afecta el icono, texto y botón. Default: 'md'."
+  - name: children
+    type: "React.ReactNode"
+    required: false
+    description: "Contenido custom renderizado debajo de la descripción y antes del botón."
+output: "Componente EmptyState centrado con icono, mensaje y botón de acción para estados sin datos"
+params:
+  - name: props
+    desc: "Props del componente EmptyState"
+---
+
+## Ejemplo
+
+```tsx
+import { EmptyState } from '@fn_library/empty_state'
+
+// Default — sin datos
+<EmptyState />
+
+// Con acción
+<EmptyState
+  title="No functions found"
+  description="Try adjusting your search or create a new function."
+  actionLabel="Create function"
+  onAction={() => navigate('/new')}
+/>
+
+// Con icono custom
+import { IconDatabase } from '@tabler/icons-react'
+
+<EmptyState
+  icon={<IconDatabase size={48} stroke={1.5} />}
+  title="No databases connected"
+  description="Connect a database to start querying data."
+  size="lg"
+/>
+
+// Dentro de una Card
+import { Card } from '@mantine/core'
+import { EmptyState } from '@fn_library/empty_state'
+
+<Card withBorder p="xl">
+  <EmptyState
+    title="No results"
+    description="Your query returned no rows."
+    size="sm"
+  />
+</Card>
+```
+
+## Notas
+
+El tamaño del icono escala con `size`: xs=32, sm=40, md=48, lg=64, xl=80.
+El orden del heading (`Title order`) es 5 para xs/sm y 4 para md/lg/xl.
+El botón usa `variant="light"` de Mantine — hereda el color primario del tema.
+`children` se renderiza entre la descripción y el botón, útil para filtros o links adicionales.
diff --git a/frontend/functions/ui/empty_state.tsx b/frontend/functions/ui/empty_state.tsx
new file mode 100644
index 00000000..b57b176a
--- /dev/null
+++ b/frontend/functions/ui/empty_state.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react'
+import { Button, Stack, Text, Title, type MantineSize } from '@mantine/core'
+import { IconInbox } from '@tabler/icons-react'
+
+interface EmptyStateProps {
+  /** Icono a mostrar (default: IconInbox) */
+  icon?: React.ReactNode
+  /** Título */
+  title?: string
+  /** Descripción */
+  description?: string
+  /** Texto del botón de acción */
+  actionLabel?: string
+  /** Callback del botón */
+  onAction?: () => void
+  /** Tamaño general */
+  size?: MantineSize
+  /** Contenido custom debajo de la descripción */
+  children?: React.ReactNode
+}
+
+function EmptyState({
+  icon,
+  title = 'No data found',
+  description = 'There are no items to display yet.',
+  actionLabel,
+  onAction,
+  size = 'md',
+  children,
+}: EmptyStateProps) {
+  const iconSize = size === 'xs' ? 32 : size === 'sm' ? 40 : size === 'lg' ? 64 : size === 'xl' ? 80 : 48
+
+  return (
+    <Stack align="center" gap="sm" py="xl">
+      <Text c="dimmed" style={{ opacity: 0.5 }}>
+        {icon || <IconInbox size={iconSize} stroke={1.5} />}
+      </Text>
+      <Title order={size === 'xs' || size === 'sm' ? 5 : 4} ta="center">
+        {title}
+      </Title>
+      <Text c="dimmed" size={size} ta="center" maw={400}>
+        {description}
+      </Text>
+      {children}
+      {actionLabel && onAction && (
+        <Button variant="light" size={size} onClick={onAction} mt="xs">
+          {actionLabel}
+        </Button>
+      )}
+    </Stack>
+  )
+}
+
+export { EmptyState }
+export type { EmptyStateProps }
diff --git a/frontend/functions/ui/error_page.md b/frontend/functions/ui/error_page.md
new file mode 100644
index 00000000..8ba4b70a
--- /dev/null
+++ b/frontend/functions/ui/error_page.md
@@ -0,0 +1,75 @@
+---
+name: error_page
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "ErrorPage(config: ErrorPageConfig): JSX.Element"
+description: "Genera página de error con código grande, título, descripción y acciones. Soporta 404, 500, 403 y cualquier código custom."
+tags: [error, 404, 500, page, empty-state, ui, mantine]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: [react, "@mantine/core"]
+params:
+  - name: code
+    desc: "Código de error numérico o string a mostrar prominentemente (404, 500, 403, o cualquier valor custom)"
+  - name: title
+    desc: "Título del error mostrado bajo el código. Default: 'Page not found'"
+  - name: description
+    desc: "Descripción explicativa del error. Default: mensaje genérico de página no encontrada"
+  - name: actionLabel
+    desc: "Texto del botón de acción principal. Default: 'Go back to home'"
+  - name: onAction
+    desc: "Callback invocado al pulsar el botón de acción principal"
+  - name: extraActions
+    desc: "Nodos React adicionales renderizados junto al botón principal (botones secundarios, links, etc.)"
+output: "Página de error centrada con código prominente, mensaje descriptivo y botones de acción"
+has_state: false
+framework: react
+emits: [onAction]
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/error_page.tsx"
+---
+
+## Ejemplo
+
+```tsx
+import { ErrorPage } from '@fn_library/error_page'
+import { Button } from '@mantine/core'
+
+// 404 con defaults
+<ErrorPage onAction={() => navigate('/')} />
+
+// 500 custom
+<ErrorPage
+  code={500}
+  title="Internal Server Error"
+  description="Something went wrong on our end. Please try again later or contact support."
+  actionLabel="Retry"
+  onAction={() => window.location.reload()}
+/>
+
+// 403 con acciones extra
+<ErrorPage
+  code={403}
+  title="Access Denied"
+  description="You don't have permission to view this page. Contact your administrator to request access."
+  actionLabel="Go to Dashboard"
+  onAction={() => navigate('/dashboard')}
+  extraActions={
+    <Button variant="outline" size="md" onClick={() => navigate('/login')}>
+      Switch Account
+    </Button>
+  }
+/>
+```
+
+## Notas
+
+El código de error se muestra con `fz={120}` y opacidad reducida (0.25) para crear un efecto visual de fondo sin distraer del mensaje. Acepta `number | string` para soportar códigos custom como "503" o "Maintenance".
diff --git a/frontend/functions/ui/error_page.tsx b/frontend/functions/ui/error_page.tsx
new file mode 100644
index 00000000..b93dbb4a
--- /dev/null
+++ b/frontend/functions/ui/error_page.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react'
+import { Button, Container, Group, Stack, Text, Title } from '@mantine/core'
+
+interface ErrorPageConfig {
+  /** Código de error (404, 500, 403, etc.) */
+  code?: number | string
+  /** Título del error */
+  title?: string
+  /** Descripción del error */
+  description?: string
+  /** Texto del botón de acción */
+  actionLabel?: string
+  /** Callback del botón */
+  onAction?: () => void
+  /** Acciones extra además del botón principal */
+  extraActions?: React.ReactNode
+}
+
+function ErrorPage({
+  code = 404,
+  title = 'Page not found',
+  description = 'The page you are looking for does not exist. You may have mistyped the address, or the page has been moved to another URL.',
+  actionLabel = 'Go back to home',
+  onAction,
+  extraActions,
+}: ErrorPageConfig) {
+  return (
+    <Container py={80}>
+      <Stack align="center" gap="md">
+        <Text
+          fz={120}
+          fw={900}
+          c="dimmed"
+          style={{ lineHeight: 1, opacity: 0.25 }}
+        >
+          {code}
+        </Text>
+        <Title order={2} ta="center">
+          {title}
+        </Title>
+        <Text c="dimmed" size="lg" ta="center" maw={500}>
+          {description}
+        </Text>
+        <Group mt="md">
+          <Button size="md" onClick={onAction}>
+            {actionLabel}
+          </Button>
+          {extraActions}
+        </Group>
+      </Stack>
+    </Container>
+  )
+}
+
+export { ErrorPage }
+export type { ErrorPageConfig }
diff --git a/frontend/functions/ui/file_input.md b/frontend/functions/ui/file_input.md
new file mode 100644
index 00000000..1795a80c
--- /dev/null
+++ b/frontend/functions/ui/file_input.md
@@ -0,0 +1,102 @@
+---
+name: file_input
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "FileInput(props: FileInputProps): JSX.Element"
+description: "Input de archivos con soporte para múltiples archivos, tipos aceptados y botón de limpiar. Wrapper sobre Mantine FileInput."
+tags: [file, upload, input, form, component, ui, interactive, mantine]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core"]
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/file_input.tsx"
+framework: react
+has_state: true
+emits: [onChange]
+props:
+  - name: multiple
+    type: "boolean"
+    required: false
+    description: "Permite seleccionar múltiples archivos"
+  - name: accept
+    type: "string"
+    required: false
+    description: "Tipos MIME o extensiones aceptadas (ej: 'image/*', '.pdf,.docx')"
+  - name: clearable
+    type: "boolean"
+    required: false
+    description: "Muestra botón para limpiar el archivo seleccionado"
+  - name: value
+    type: "File | File[] | null"
+    required: false
+    description: "Valor controlado del input"
+  - name: onChange
+    type: "(value: File | File[] | null) => void"
+    required: false
+    description: "Callback que se dispara al seleccionar o limpiar un archivo"
+  - name: placeholder
+    type: "string"
+    required: false
+    description: "Texto mostrado cuando no hay archivo seleccionado"
+  - name: label
+    type: "string"
+    required: false
+    description: "Etiqueta visible sobre el input"
+  - name: disabled
+    type: "boolean"
+    required: false
+    description: "Deshabilita el input"
+  - name: size
+    type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+    required: false
+    description: "Tamaño del componente"
+params:
+  - name: props
+    desc: "Props de FileInput: archivo(s) seleccionado(s), tipos aceptados, modo múltiple, estado controlado y apariencia"
+output: "Componente FileInput que renderiza input para selección de archivos con preview del nombre"
+---
+
+## Ejemplo
+
+```tsx
+import { FileInput } from '@fn_library'
+
+// Archivo único
+<FileInput
+  label="Subir documento"
+  placeholder="Selecciona un archivo"
+  clearable
+/>
+
+// Múltiples archivos
+<FileInput
+  label="Subir archivos"
+  placeholder="Selecciona uno o varios archivos"
+  multiple
+  clearable
+/>
+
+// Solo imágenes
+<FileInput
+  label="Subir imagen"
+  placeholder="Selecciona una imagen"
+  accept="image/*"
+  clearable
+/>
+```
+
+## Notas
+
+Wrapper directo sobre `FileInput` de `@mantine/core`. Acepta todas las props de Mantine sin restricciones.
+
+Para `multiple: true`, el tipo de `value` y `onChange` cambia a `File[] | null` automáticamente gracias al tipado genérico de Mantine.
+
+El prop `clearable` añade un ícono de X que permite vaciar la selección sin reabrir el explorador de archivos.
diff --git a/frontend/functions/ui/file_input.tsx b/frontend/functions/ui/file_input.tsx
new file mode 100644
index 00000000..38a551de
--- /dev/null
+++ b/frontend/functions/ui/file_input.tsx
@@ -0,0 +1,10 @@
+import { FileInput as MantineFileInput, type FileInputProps as MantineFileInputProps } from '@mantine/core'
+
+interface FileInputProps extends MantineFileInputProps {}
+
+function FileInput(props: FileInputProps) {
+  return <MantineFileInput {...props} />
+}
+
+export { FileInput }
+export type { FileInputProps }
diff --git a/frontend/functions/ui/form_field.md b/frontend/functions/ui/form_field.md
index 6913ced7..3c4670a9 100644
--- a/frontend/functions/ui/form_field.md
+++ b/frontend/functions/ui/form_field.md
@@ -8,12 +8,12 @@ purity: impure
 signature: "FormField(props: FormFieldProps): JSX.Element"
 description: "Wrapper de campo de formulario con label, helper text, error y ARIA automáticos. Inyecta id y aria-describedby a hijos."
 tags: [form, field, label, error, component, ui, accessibility]
-uses_functions: [cn_ts_core]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: [react]
+imports: ["@mantine/core"]
 output: "Componente FormField que renderiza wrapper de campo con label, helper text, error y ARIA automáticos"
 tested: false
 tests: []
diff --git a/frontend/functions/ui/form_field.tsx b/frontend/functions/ui/form_field.tsx
index d238aa43..0504161b 100644
--- a/frontend/functions/ui/form_field.tsx
+++ b/frontend/functions/ui/form_field.tsx
@@ -1,5 +1,5 @@
-import * as React from "react"
-import { cn } from "../core/cn"
+import * as React from 'react'
+import { Box, Text } from '@mantine/core'
 
 interface FormFieldProps {
   label?: string
@@ -15,26 +15,39 @@ function FormField({ label, helperText, error, children, className }: FormFieldP
   const helperId = `${id}-helper`
   const errorId = `${id}-error`
 
-  const describedBy = [helperText ? helperId : null, error ? errorId : null].filter(Boolean).join(" ") || undefined
+  const describedBy = [helperText ? helperId : null, error ? errorId : null].filter(Boolean).join(' ') || undefined
 
   const childWithProps = React.Children.map(children, (child) => {
     if (React.isValidElement(child)) {
       return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {
         id: inputId,
-        "aria-invalid": error ? true : undefined,
-        "aria-describedby": describedBy,
+        'aria-invalid': error ? true : undefined,
+        'aria-describedby': describedBy,
+        error: error || undefined,
       })
     }
     return child
   })
 
   return (
-    <div className={cn("flex flex-col gap-1.5", className)}>
-      {label && <label htmlFor={inputId} className="text-sm font-medium text-foreground">{label}</label>}
+    <Box className={className}>
+      {label && (
+        <Text component="label" htmlFor={inputId} size="sm" fw={500} mb={4} display="block">
+          {label}
+        </Text>
+      )}
       {childWithProps}
-      {helperText && !error && <p id={helperId} className="text-sm text-muted-foreground">{helperText}</p>}
-      {error && <p id={errorId} className="text-sm text-destructive">{error}</p>}
-    </div>
+      {helperText && !error && (
+        <Text id={helperId} size="sm" c="dimmed" mt={4}>
+          {helperText}
+        </Text>
+      )}
+      {error && (
+        <Text id={errorId} size="sm" c="red" mt={4}>
+          {error}
+        </Text>
+      )}
+    </Box>
   )
 }
 
diff --git a/frontend/functions/ui/graph/index.tsx b/frontend/functions/ui/graph/index.tsx
index e1fb584a..baac506e 100644
--- a/frontend/functions/ui/graph/index.tsx
+++ b/frontend/functions/ui/graph/index.tsx
@@ -49,6 +49,12 @@ export interface GraphTheme {
   selectionColor?: string
 }
 
+export interface ContextMenuTarget {
+  type: "node" | "edge" | "canvas"
+  id?: string
+  data?: GraphNode | GraphEdge
+}
+
 export interface GraphContainerProps {
   data: GraphData
   layout?: "organic" | "random"
@@ -58,6 +64,7 @@ export interface GraphContainerProps {
   nodeTypes?: NodeType[]
   onNodeClick?: (node: GraphNode) => void
   onNodeDoubleClick?: (node: GraphNode) => void
+  onContextMenu?: (event: MouseEvent, target: ContextMenuTarget) => void
   enableSelection?: boolean
   selectionMode?: "single" | "multiple"
   theme?: GraphTheme
@@ -84,6 +91,7 @@ function GraphContainer({
   nodeTypes = [],
   onNodeClick,
   onNodeDoubleClick,
+  onContextMenu,
   theme: themeProp,
   height = "100%",
   className,
@@ -96,10 +104,30 @@ function GraphContainer({
     [themeProp],
   )
 
-  // Build + render
+  // Build + render — wait for container to have dimensions
+  const [ready, setReady] = React.useState(false)
   React.useEffect(() => {
     const el = containerRef.current
     if (!el) return
+    if (el.clientHeight > 0 && el.clientWidth > 0) {
+      setReady(true)
+      return
+    }
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.contentRect.height > 0 && entry.contentRect.width > 0) {
+          setReady(true)
+          ro.disconnect()
+        }
+      }
+    })
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [])
+
+  React.useEffect(() => {
+    const el = containerRef.current
+    if (!el || !ready) return
 
     // Cleanup previous instance
     if (sigmaRef.current) {
@@ -110,7 +138,7 @@ function GraphContainer({
     const g = new Graph({ multi: true, type: "directed" })
     graphRef.current = g
 
-    // Add nodes
+    // Add nodes — store entity type as entityType to avoid sigma interpreting it as render program
     for (const n of data.nodes) {
       g.addNode(n.id, {
         label: n.label,
@@ -118,7 +146,7 @@ function GraphContainer({
         y: n.y ?? (Math.random() - 0.5) * 10,
         size: n.size ?? theme.nodeSize,
         color: n.color ?? theme.nodeColor,
-        type: n.type,
+        entityType: n.type,
       })
     }
 
@@ -152,6 +180,7 @@ function GraphContainer({
 
     // Render
     const renderer = new Sigma(g, el, {
+      allowInvalidContainer: true,
       renderEdgeLabels: false,
       defaultEdgeColor: theme.edgeColor,
       defaultNodeColor: theme.nodeColor,
@@ -174,13 +203,30 @@ function GraphContainer({
         onNodeDoubleClick({ id: node, ...attrs } as unknown as GraphNode)
       })
     }
+    if (onContextMenu) {
+      renderer.on("rightClickNode", ({ node, event }) => {
+        const mouseEvent = event.original as MouseEvent
+        mouseEvent.preventDefault()
+        const attrs = g.getNodeAttributes(node)
+        onContextMenu(mouseEvent, {
+          type: "node",
+          id: node,
+          data: { id: node, ...attrs } as unknown as GraphNode,
+        })
+      })
+      renderer.on("rightClickStage", ({ event }) => {
+        const mouseEvent = event.original as MouseEvent
+        mouseEvent.preventDefault()
+        onContextMenu(mouseEvent, { type: "canvas" })
+      })
+    }
 
     return () => {
       renderer.kill()
       sigmaRef.current = null
       graphRef.current = null
     }
-  }, [data, layout, theme, onNodeClick, onNodeDoubleClick])
+  }, [data, layout, theme, onNodeClick, onNodeDoubleClick, onContextMenu, ready])
 
   // Container background
   const containerStyle: React.CSSProperties = {
diff --git a/frontend/functions/ui/index.ts b/frontend/functions/ui/index.ts
index 9f674c01..906cf6c1 100644
--- a/frontend/functions/ui/index.ts
+++ b/frontend/functions/ui/index.ts
@@ -8,7 +8,8 @@ export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, Di
 export { Input, InputGroup, InputIcon } from './input'
 export { Label } from './label'
 export { KPICard } from './kpi_card'
-export { Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue } from './select'
+export { Select } from './select'
+export type { SelectProps } from './select'
 export { SimpleSelect } from './simple_select'
 export type { SimpleSelectOption, SimpleSelectGroup, SimpleSelectOptions } from './simple_select'
 export { Skeleton, SkeletonAvatar, SkeletonButton, SkeletonCard, SkeletonTable, SkeletonText } from './skeleton'
@@ -37,11 +38,9 @@ export type { Series } from './chart_container'
 export { DataTable } from './data_table'
 export type { DataTableProps, ColumnDef } from './data_table'
 
-// Theme
-export { ThemeProvider, useTheme, ThemeContext } from './theme_provider'
-export type { ThemeProviderProps } from './theme_provider'
-export { applyTheme } from './apply_theme'
-export type { Theme, ThemeColors } from './apply_theme'
+// Mantine Provider
+export { FnMantineProvider } from './mantine_provider'
+export type { FnMantineProviderProps } from './mantine_provider'
 
 // Page templates
 export { analyticsPage } from './analytics_page'
@@ -82,14 +81,14 @@ export type { CheckboxProps } from './checkbox'
 
 // Command
 export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSearch, CommandSeparator, CommandShortcut } from './command'
-export type { CommandProps } from './command'
+export type { CommandItemData, CommandProps } from './command'
 
 // Dropdown Menu
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './dropdown_menu'
 
 // Pagination
-export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from './pagination'
-export type { PaginationLinkProps } from './pagination'
+export { Pagination } from './pagination'
+export type { PaginationProps } from './pagination'
 
 // Popover
 export { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverPortal, PopoverTitle, PopoverTrigger } from './popover'
@@ -123,3 +122,15 @@ export { useAnimatedCanvas } from './use_animated_canvas'
 
 // Wails Provider
 export { WailsProvider } from './wails_provider'
+
+// New Mantine components
+export { FnAppShell } from './app_shell'
+export { FnStepper } from './stepper'
+export { FnTimeline } from './timeline'
+export { FnActionIcon } from './action_icon'
+export { FnNumberInput } from './number_input'
+export { FnSegmentedControl } from './segmented_control'
+export { FnLoadingOverlay } from './loading_overlay'
+export { FnRingProgress } from './ring_progress'
+export { FnNavLink } from './nav_link'
+export { FnIndicator } from './indicator'
diff --git a/frontend/functions/ui/indicator.md b/frontend/functions/ui/indicator.md
new file mode 100644
index 00000000..379f3be1
--- /dev/null
+++ b/frontend/functions/ui/indicator.md
@@ -0,0 +1,77 @@
+---
+name: indicator
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "FnIndicator(props: FnIndicatorProps): JSX.Element"
+description: "Badge indicador posicionado sobre un elemento hijo. Wrapper sobre Mantine Indicator."
+tags: [mantine, indicator, badge, notification, dot, component, ui]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core"]
+framework: react
+props:
+  - name: children
+    type: "ReactNode"
+    required: true
+    description: "Elemento sobre el cual se posiciona el indicador"
+  - name: color
+    type: "MantineColor"
+    required: false
+    description: "Color del indicador, default red"
+  - name: size
+    type: "number"
+    required: false
+    description: "Tamano del dot en px, default 10"
+  - name: position
+    type: "'top-start' | 'top-center' | 'top-end' | 'middle-start' | 'middle-center' | 'middle-end' | 'bottom-start' | 'bottom-center' | 'bottom-end'"
+    required: false
+    description: "Posicion del indicador, default top-end"
+  - name: processing
+    type: "boolean"
+    required: false
+    description: "Animacion de pulso, default false"
+  - name: disabled
+    type: "boolean"
+    required: false
+    description: "Oculta el indicador, default false"
+  - name: label
+    type: "ReactNode"
+    required: false
+    description: "Contenido dentro del indicador (numero, texto)"
+output: "Elemento hijo con un dot/badge indicador posicionado en una esquina"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/indicator.tsx"
+emits: []
+has_state: false
+variant: []
+---
+
+## Ejemplo
+
+```tsx
+import { FnIndicator } from '@fn_library'
+import { FnActionIcon } from '@fn_library'
+import { IconBell } from '@tabler/icons-react'
+
+{/* Dot simple */}
+<FnIndicator processing>
+  <FnActionIcon icon={<IconBell size={18} />} />
+</FnIndicator>
+
+{/* Con contador */}
+<FnIndicator label={5} size={16} color="blue">
+  <Avatar src="user.png" />
+</FnIndicator>
+```
+
+## Notas
+
+Wrapper sobre Mantine `Indicator`. El `processing` prop agrega una animacion de pulso al dot. Si se provee `label`, el indicador se agranda para mostrar contenido. `disabled` oculta el indicador sin desmontar el componente.
diff --git a/frontend/functions/ui/indicator.tsx b/frontend/functions/ui/indicator.tsx
new file mode 100644
index 00000000..13d130c0
--- /dev/null
+++ b/frontend/functions/ui/indicator.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { Indicator } from '@mantine/core'
+import type { MantineColor } from '@mantine/core'
+
+interface FnIndicatorProps {
+  children: React.ReactNode
+  color?: MantineColor
+  size?: number
+  position?: 'top-start' | 'top-center' | 'top-end' | 'middle-start' | 'middle-center' | 'middle-end' | 'bottom-start' | 'bottom-center' | 'bottom-end'
+  processing?: boolean
+  disabled?: boolean
+  label?: React.ReactNode
+}
+
+function FnIndicator({
+  children,
+  color = 'red',
+  size = 10,
+  position = 'top-end',
+  processing = false,
+  disabled = false,
+  label,
+}: FnIndicatorProps) {
+  return (
+    <Indicator
+      color={color}
+      size={size}
+      position={position}
+      processing={processing}
+      disabled={disabled}
+      label={label}
+    >
+      {children}
+    </Indicator>
+  )
+}
+
+export { FnIndicator }
+export type { FnIndicatorProps }
diff --git a/frontend/functions/ui/input.md b/frontend/functions/ui/input.md
index c0f197ba..b0ad72fe 100644
--- a/frontend/functions/ui/input.md
+++ b/frontend/functions/ui/input.md
@@ -6,14 +6,14 @@ domain: ui
 version: "1.0.0"
 purity: impure
 signature: "Input(props: InputHTMLAttributes): JSX.Element"
-description: "Campo de entrada accesible con soporte para iconos, grupos, validación ARIA y estados disabled/invalid."
-tags: [input, form, component, ui, interactive]
-uses_functions: [cn_ts_core]
+description: "Campo de entrada accesible con soporte para iconos, grupos, validación ARIA y estados disabled/invalid. Mantine TextInput."
+tags: [input, form, component, ui, interactive, mantine]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: ["@base-ui/react", "react"]
+imports: ["@mantine/core"]
 output: "Componente Input que renderiza campo de entrada accesible con soporte para iconos y validación ARIA"
 tested: false
 tests: []
@@ -49,4 +49,4 @@ source_file: "frontend/src/components/ui/input.tsx"
 
 ## Notas
 
-Exporta Input, InputGroup e InputIcon. InputGroup detecta automáticamente la presencia de iconos y ajusta padding del Input.
+Exporta Input, InputGroup e InputIcon. Usa Mantine TextInput internamente. InputGroup e InputIcon se mantienen como wrappers de compatibilidad — para nuevos usos preferir leftSection/rightSection de Mantine TextInput directamente.
diff --git a/frontend/functions/ui/input.tsx b/frontend/functions/ui/input.tsx
index e5168797..1e45468f 100644
--- a/frontend/functions/ui/input.tsx
+++ b/frontend/functions/ui/input.tsx
@@ -1,18 +1,17 @@
-import * as React from "react"
-import { Input as InputPrimitive } from "@base-ui/react/input"
-import { cn } from "../core/cn"
+import * as React from 'react'
+import { TextInput, Box } from '@mantine/core'
 
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+function Input({
+  className,
+  type,
+  ...props
+}: React.ComponentProps<typeof TextInput> & { type?: string }) {
   return (
-    <InputPrimitive
+    <TextInput
       type={type}
       data-slot="input"
-      className={cn(
-        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
-        "group-has-[data-slot=input-icon-start]/input-group:pl-9",
-        "group-has-[data-slot=input-icon-end]/input-group:pr-9",
-        className
-      )}
+      size="sm"
+      className={className}
       {...props}
     />
   )
@@ -25,32 +24,34 @@ interface InputGroupProps {
 
 function InputGroup({ children, className }: InputGroupProps) {
   return (
-    <div data-slot="input-group" className={cn("group/input-group relative", className)}>
+    <Box data-slot="input-group" className={className}>
       {children}
-    </div>
+    </Box>
   )
 }
 
 interface InputIconProps {
   children: React.ReactNode
-  position: "start" | "end"
+  position: 'start' | 'end'
   className?: string
 }
 
 function InputIcon({ children, position, className }: InputIconProps) {
   return (
-    <span
+    <Box
       data-slot={`input-icon-${position}`}
-      className={cn(
-        "pointer-events-none absolute top-1/2 -translate-y-1/2 text-muted-foreground [&_svg]:size-4",
-        position === "start" && "left-2.5",
-        position === "end" && "right-2.5",
-        className
-      )}
+      component="span"
+      className={className}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        pointerEvents: 'none',
+      }}
     >
       {children}
-    </span>
+    </Box>
   )
 }
 
 export { Input, InputGroup, InputIcon }
+export type { InputGroupProps, InputIconProps }
diff --git a/frontend/functions/ui/kpi_card.md b/frontend/functions/ui/kpi_card.md
index 90699eed..ef94bf34 100644
--- a/frontend/functions/ui/kpi_card.md
+++ b/frontend/functions/ui/kpi_card.md
@@ -8,7 +8,7 @@ purity: impure
 signature: "KPICard(props: KPICardProps): JSX.Element"
 description: "Card de KPI con label, valor+unidad, delta descriptivo con color semántico, icono, slot de chart inline y action. 3 tamaños."
 tags: [kpi, card, metrics, dashboard, component, ui, sparkline]
-uses_functions: [cn_ts_core]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
diff --git a/frontend/functions/ui/kpi_card.tsx b/frontend/functions/ui/kpi_card.tsx
index 4d774c55..7c31d0b3 100644
--- a/frontend/functions/ui/kpi_card.tsx
+++ b/frontend/functions/ui/kpi_card.tsx
@@ -1,78 +1,87 @@
 import * as React from 'react'
-import { cn } from '../core/cn'
+import { Paper, Text, Group, Stack, Box } from '@mantine/core'
 
 type KPICardSize = 'sm' | 'default' | 'lg'
 
 interface Delta {
   value: number
   isPositive: boolean
-  /** Descriptive label before value, e.g. "Increased by" */
   label?: string
-  /** Suffix after value, e.g. "vs yesterday" */
   suffix?: string
 }
 
 interface KPICardProps extends React.HTMLAttributes<HTMLDivElement> {
   label: string
   value: string | number
-  /** Unit displayed next to value in smaller font, e.g. "k", "ms", "%" */
   unit?: string
   delta?: Delta
   icon?: React.ReactNode
-  /** Action slot rendered top-right, e.g. a menu button */
   action?: React.ReactNode
-  /** Inline chart slot rendered to the right of the value */
   chart?: React.ReactNode
   subtitle?: string
   size?: KPICardSize
 }
 
-const sizeStyles: Record<KPICardSize, { value: string; unit: string; label: string }> = {
-  sm: { value: 'text-2xl font-bold', unit: 'text-base font-medium', label: 'text-xs' },
-  default: { value: 'text-3xl font-bold', unit: 'text-lg font-medium', label: 'text-sm' },
-  lg: { value: 'text-4xl font-bold', unit: 'text-xl font-medium', label: 'text-base' },
+const valueSizes: Record<KPICardSize, string> = {
+  sm: '1.5rem',
+  default: '1.875rem',
+  lg: '2.25rem',
+}
+
+const unitSizes: Record<KPICardSize, string> = {
+  sm: 'md',
+  default: 'lg',
+  lg: 'xl',
+}
+
+const labelSizes: Record<KPICardSize, string> = {
+  sm: 'xs',
+  default: 'sm',
+  lg: 'md',
 }
 
 const KPICard = React.forwardRef<HTMLDivElement, KPICardProps>(
   ({ label, value, unit, delta, icon, action, chart, subtitle, size = 'default', className, ...props }, ref) => {
-    const styles = sizeStyles[size]
     const deltaColor = delta
-      ? delta.value === 0 ? 'text-muted-foreground'
-        : delta.isPositive ? 'text-green-600 dark:text-green-500'
-        : 'text-red-600 dark:text-red-500'
-      : ''
+      ? delta.value === 0 ? 'dimmed'
+        : delta.isPositive ? 'teal'
+        : 'red'
+      : undefined
 
     return (
-      <div ref={ref} className={cn('rounded-lg border bg-card p-4 text-card-foreground shadow-sm', className)} {...props}>
-        <div className="flex items-start justify-between">
-          <div className="flex items-center gap-2">
-            {icon && <div className="text-muted-foreground">{icon}</div>}
-            <div className="space-y-1">
-              <p className={cn('text-muted-foreground', styles.label)}>{label}</p>
-              {subtitle && <p className="text-xs text-muted-foreground/80">{subtitle}</p>}
-            </div>
-          </div>
-          {action && <div className="text-muted-foreground">{action}</div>}
-        </div>
-        <div className="mt-3 flex items-end justify-between gap-4">
-          <div className="space-y-1">
-            <div className="flex items-baseline gap-1">
-              <span className={cn('tracking-tight', styles.value)}>{value}</span>
-              {unit && <span className={cn('text-muted-foreground', styles.unit)}>{unit}</span>}
-            </div>
+      <Paper ref={ref} withBorder shadow="xs" radius="md" p="md" className={className} {...props}>
+        <Group justify="space-between" align="flex-start">
+          <Group gap="xs" align="center">
+            {icon && <Box c="dimmed">{icon}</Box>}
+            <Stack gap={2}>
+              <Text size={labelSizes[size]} c="dimmed">{label}</Text>
+              {subtitle && <Text size="xs" c="dimmed" opacity={0.8}>{subtitle}</Text>}
+            </Stack>
+          </Group>
+          {action && <Box c="dimmed">{action}</Box>}
+        </Group>
+
+        <Group justify="space-between" align="flex-end" mt="md" gap="lg">
+          <Stack gap={4}>
+            <Group gap={4} align="baseline">
+              <Text fw={700} style={{ fontSize: valueSizes[size], lineHeight: 1, letterSpacing: '-0.025em' }}>
+                {value}
+              </Text>
+              {unit && <Text size={unitSizes[size]} c="dimmed" fw={500}>{unit}</Text>}
+            </Group>
             {delta && (
-              <div className="flex items-center gap-1 text-xs text-muted-foreground">
-                {delta.label && <span>{delta.label}</span>}
-                <span className={cn('font-medium', deltaColor)}>
-                  {delta.isPositive ? '▲' : '▼'} {delta.value > 0 ? '+' : ''}{delta.value}{delta.label ? '' : '%'}
-                </span>
-                {delta.suffix && <span>{delta.suffix}</span>}
-              </div>
+              <Group gap={4} align="center">
+                {delta.label && <Text size="xs" c="dimmed">{delta.label}</Text>}
+                <Text size="xs" fw={500} c={deltaColor}>
+                  {delta.isPositive ? '\u25B2' : '\u25BC'} {delta.value > 0 ? '+' : ''}{delta.value}{delta.label ? '' : '%'}
+                </Text>
+                {delta.suffix && <Text size="xs" c="dimmed">{delta.suffix}</Text>}
+              </Group>
             )}
-          </div>
-          {chart && <div className="flex-shrink-0">{chart}</div>}
-        </div>
-      </div>
+          </Stack>
+          {chart && <Box style={{ flexShrink: 0 }}>{chart}</Box>}
+        </Group>
+      </Paper>
     )
   }
 )
diff --git a/frontend/functions/ui/label.md b/frontend/functions/ui/label.md
index 7dd73b2b..08cad4bf 100644
--- a/frontend/functions/ui/label.md
+++ b/frontend/functions/ui/label.md
@@ -6,14 +6,14 @@ domain: ui
 version: "1.0.0"
 purity: impure
 signature: "Label(props: LabelHTMLAttributes): JSX.Element"
-description: "Etiqueta de formulario accesible con soporte para estados disabled y peer-disabled."
-tags: [label, form, component, ui]
-uses_functions: [cn_ts_core]
+description: "Etiqueta de formulario accesible con soporte para estados disabled. Mantine Text con component=label."
+tags: [label, form, component, ui, mantine]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: ["react"]
+imports: ["@mantine/core"]
 output: "Componente Label que renderiza etiqueta de formulario accesible con soporte para estados disabled"
 tested: false
 tests: []
diff --git a/frontend/functions/ui/label.tsx b/frontend/functions/ui/label.tsx
index 56bb58a6..0ab0f331 100644
--- a/frontend/functions/ui/label.tsx
+++ b/frontend/functions/ui/label.tsx
@@ -1,14 +1,15 @@
-import * as React from "react"
-import { cn } from "../core/cn"
+import * as React from 'react'
+import { Text } from '@mantine/core'
 
-function Label({ className, ...props }: React.ComponentProps<"label">) {
+function Label({ className, ...props }: React.ComponentProps<'label'>) {
   return (
-    <label
+    <Text
+      component="label"
       data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      )}
+      size="sm"
+      fw={500}
+      style={{ display: 'inline-flex', alignItems: 'center', gap: 8, userSelect: 'none' }}
+      className={className}
       {...props}
     />
   )
diff --git a/frontend/functions/ui/line_chart.md b/frontend/functions/ui/line_chart.md
index 524ae4f6..0c0ee63c 100644
--- a/frontend/functions/ui/line_chart.md
+++ b/frontend/functions/ui/line_chart.md
@@ -6,15 +6,15 @@ domain: ui
 version: "1.0.0"
 purity: impure
 signature: "LineChart(props: LineChartProps): JSX.Element"
-description: "Gráfico de líneas Recharts con multi-series, 5 tipos de curva, zoom brush, líneas de referencia, tooltips temáticos."
-tags: [chart, line, visualization, recharts, component, ui]
-uses_functions: [cn_ts_core, chart_container_ts_ui, get_series_color_ts_core]
+description: "Gráfico de líneas @mantine/charts con multi-series, 5 tipos de curva, líneas de referencia y tooltips."
+tags: [chart, line, visualization, mantine, component, ui]
+uses_functions: [chart_container_ts_ui]
 uses_types: [ChartSeries_ts_ui]
 returns: []
 returns_optional: false
 error_type: ""
-imports: [recharts]
-output: "Componente LineChart que renderiza gráfico de líneas multi-series con zoom, curvas customizables y líneas de referencia"
+imports: ["@mantine/charts", "@mantine/core"]
+output: "Componente LineChart que renderiza gráfico de líneas multi-series con curvas customizables y líneas de referencia"
 tested: false
 tests: []
 test_file_path: ""
@@ -32,10 +32,6 @@ props:
     type: "Series[]"
     required: false
     description: "Series de datos"
-  - name: zoomable
-    type: "boolean"
-    required: false
-    description: "Habilitar zoom brush"
   - name: curveType
     type: "'linear' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter'"
     required: false
diff --git a/frontend/functions/ui/line_chart.tsx b/frontend/functions/ui/line_chart.tsx
index 773e862c..29eef871 100644
--- a/frontend/functions/ui/line_chart.tsx
+++ b/frontend/functions/ui/line_chart.tsx
@@ -1,8 +1,6 @@
-import {
-  LineChart as RechartsLineChart, Line, XAxis, YAxis, CartesianGrid,
-  Tooltip, Legend, Brush, ReferenceLine,
-} from 'recharts'
-import { ChartContainer, ChartTooltipContent, type Series, getSeriesColor } from './chart_container'
+import { LineChart as MantineLineChart } from '@mantine/charts'
+import { Paper } from '@mantine/core'
+import { type Series, getSeriesColor } from './chart_container'
 
 type CurveType = 'linear' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter'
 
@@ -15,9 +13,7 @@ interface LineChartProps {
   showGrid?: boolean
   showLegend?: boolean
   showDots?: boolean
-  zoomable?: boolean
-  height?: number | string
-  className?: string
+  height?: number
   xAxisFormatter?: (value: unknown) => string
   yAxisFormatter?: (value: unknown) => string
   valueFormatter?: (value: number) => string
@@ -26,30 +22,37 @@ interface LineChartProps {
 
 function LineChartComponent({
   data, xKey, yKey, series, curveType = 'monotone', showGrid = true, showLegend = false,
-  showDots = true, zoomable = false, height = 300, className, xAxisFormatter, yAxisFormatter,
+  showDots = true, height = 300, xAxisFormatter, yAxisFormatter,
   valueFormatter = (v) => v.toLocaleString(), referenceLines = [],
 }: LineChartProps) {
-  const lines = series
-    ? series.map((s, i) => ({ dataKey: s.key, name: s.name, stroke: getSeriesColor(i, s.color) }))
-    : yKey ? [{ dataKey: yKey, name: yKey, stroke: getSeriesColor(0) }] : []
+  const chartSeries = series
+    ? series.map((s, i) => ({ name: s.key, label: s.name, color: getSeriesColor(i, s.color) }))
+    : yKey ? [{ name: yKey, label: yKey, color: getSeriesColor(0) }] : []
+
+  const refLines = referenceLines.map((ref) => ({
+    y: ref.y,
+    label: ref.label || '',
+    color: ref.color || 'gray.6',
+  }))
 
   return (
-    <ChartContainer className={className} height={height}>
-      <RechartsLineChart data={data} margin={{ top: 10, right: 10, left: 10, bottom: zoomable ? 30 : 10 }}>
-        {showGrid && <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />}
-        <XAxis dataKey={xKey} tickFormatter={xAxisFormatter} className="text-xs fill-muted-foreground" />
-        <YAxis tickFormatter={yAxisFormatter} className="text-xs fill-muted-foreground" />
-        <Tooltip content={<ChartTooltipContent valueFormatter={valueFormatter} />} cursor={{ stroke: 'hsl(var(--muted-foreground))', strokeDasharray: '3 3' }} />
-        {showLegend && <Legend />}
-        {referenceLines.map((ref, i) => (
-          <ReferenceLine key={i} y={ref.y} stroke={ref.color || 'hsl(var(--muted-foreground))'} strokeDasharray="3 3" label={ref.label ? { value: ref.label, position: 'right' } : undefined} />
-        ))}
-        {lines.map((line) => (
-          <Line key={line.dataKey} type={curveType} dataKey={line.dataKey} name={line.name} stroke={line.stroke} strokeWidth={2} dot={showDots ? { r: 3, fill: line.stroke } : false} activeDot={{ r: 5, fill: line.stroke }} />
-        ))}
-        {zoomable && <Brush dataKey={xKey} height={20} stroke="hsl(var(--primary))" fill="hsl(var(--muted))" tickFormatter={xAxisFormatter} />}
-      </RechartsLineChart>
-    </ChartContainer>
+    <Paper p="md">
+      <MantineLineChart
+        h={height}
+        data={data}
+        dataKey={xKey}
+        series={chartSeries}
+        curveType={curveType}
+        gridAxis={showGrid ? 'xy' : 'none'}
+        withLegend={showLegend}
+        withTooltip
+        withDots={showDots}
+        valueFormatter={valueFormatter}
+        referenceLines={refLines}
+        xAxisProps={xAxisFormatter ? { tickFormatter: xAxisFormatter } : undefined}
+        yAxisProps={yAxisFormatter ? { tickFormatter: yAxisFormatter } : undefined}
+      />
+    </Paper>
   )
 }
 
diff --git a/frontend/functions/ui/loading_overlay.md b/frontend/functions/ui/loading_overlay.md
new file mode 100644
index 00000000..2c69c4fd
--- /dev/null
+++ b/frontend/functions/ui/loading_overlay.md
@@ -0,0 +1,58 @@
+---
+name: loading_overlay
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "FnLoadingOverlay(props: FnLoadingOverlayProps): JSX.Element"
+description: "Overlay de carga con blur y opacidad configurable. Wrapper sobre Mantine LoadingOverlay."
+tags: [mantine, loading, overlay, spinner, component, ui]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core"]
+framework: react
+props:
+  - name: visible
+    type: "boolean"
+    required: true
+    description: "Controla visibilidad del overlay"
+  - name: loaderSize
+    type: "number | string"
+    required: false
+    description: "Tamano del loader/spinner"
+  - name: overlayBlur
+    type: "number"
+    required: false
+    description: "Intensidad del blur del fondo, default 2"
+  - name: overlayOpacity
+    type: "number"
+    required: false
+    description: "Opacidad del overlay, default 0.5"
+output: "Overlay semi-transparente con spinner centrado que cubre el contenedor padre"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/loading_overlay.tsx"
+emits: []
+has_state: false
+variant: []
+---
+
+## Ejemplo
+
+```tsx
+import { FnLoadingOverlay } from '@fn_library'
+
+<Box pos="relative">
+  <FnLoadingOverlay visible={loading} overlayBlur={3} />
+  <DataTable data={rows} />
+</Box>
+```
+
+## Notas
+
+Wrapper sobre Mantine `LoadingOverlay`. El contenedor padre necesita `position: relative` para que el overlay se posicione correctamente. Usa `loaderProps` y `overlayProps` internamente para mapear las props simplificadas.
diff --git a/frontend/functions/ui/loading_overlay.tsx b/frontend/functions/ui/loading_overlay.tsx
new file mode 100644
index 00000000..34b01f31
--- /dev/null
+++ b/frontend/functions/ui/loading_overlay.tsx
@@ -0,0 +1,26 @@
+import { LoadingOverlay } from '@mantine/core'
+
+interface FnLoadingOverlayProps {
+  visible: boolean
+  loaderSize?: number | string
+  overlayBlur?: number
+  overlayOpacity?: number
+}
+
+function FnLoadingOverlay({
+  visible,
+  loaderSize,
+  overlayBlur = 2,
+  overlayOpacity = 0.5,
+}: FnLoadingOverlayProps) {
+  return (
+    <LoadingOverlay
+      visible={visible}
+      loaderProps={loaderSize ? { size: loaderSize } : undefined}
+      overlayProps={{ blur: overlayBlur, backgroundOpacity: overlayOpacity }}
+    />
+  )
+}
+
+export { FnLoadingOverlay }
+export type { FnLoadingOverlayProps }
diff --git a/frontend/functions/ui/mantine_provider.md b/frontend/functions/ui/mantine_provider.md
new file mode 100644
index 00000000..85350d1f
--- /dev/null
+++ b/frontend/functions/ui/mantine_provider.md
@@ -0,0 +1,59 @@
+---
+name: mantine_provider
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "FnMantineProvider({ children, theme?, defaultColorScheme? })"
+description: "Provider raiz de Mantine para apps del registry. Wrappea MantineProvider con Notifications incluido. Importa los CSS de @mantine/core, charts y notifications."
+tags: [mantine, provider, theme, react]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: "error_go_core"
+imports: ["@mantine/core", "@mantine/notifications", "@mantine/charts"]
+framework: react
+props:
+  - name: children
+    desc: "contenido de la app"
+  - name: theme
+    desc: "tema Mantine creado con createTheme() — colores, fuentes, radio, etc."
+  - name: defaultColorScheme
+    desc: "esquema de color por defecto: 'dark' | 'light' | 'auto'"
+output: "arbol React envuelto en MantineProvider con notificaciones"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/mantine_provider.tsx"
+---
+
+## Ejemplo
+
+```tsx
+import { createTheme, MantineColorsTuple } from '@mantine/core'
+import { FnMantineProvider } from '@fn_library'
+
+const brand: MantineColorsTuple = [
+  '#e5f3ff', '#cde2ff', '#9ac2ff', '#64a0ff', '#3884fe',
+  '#1d72fe', '#0063ff', '#0058e4', '#004ecd', '#0043b5'
+]
+
+const theme = createTheme({
+  colors: { brand },
+  primaryColor: 'brand',
+})
+
+function App() {
+  return (
+    <FnMantineProvider theme={theme} defaultColorScheme="dark">
+      {/* Tu app aqui */}
+    </FnMantineProvider>
+  )
+}
+```
+
+## Notas
+
+Reemplaza ThemeProvider + applyTheme del sistema anterior. Las apps definen su propio tema con `createTheme()` y lo pasan como prop. Los CSS de Mantine se importan una sola vez aqui.
diff --git a/frontend/functions/ui/mantine_provider.tsx b/frontend/functions/ui/mantine_provider.tsx
new file mode 100644
index 00000000..79ecee07
--- /dev/null
+++ b/frontend/functions/ui/mantine_provider.tsx
@@ -0,0 +1,29 @@
+import '@mantine/core/styles.css'
+import '@mantine/charts/styles.css'
+import '@mantine/notifications/styles.css'
+
+import * as React from 'react'
+import { MantineProvider, type MantineThemeOverride, type MantineColorScheme } from '@mantine/core'
+import { Notifications } from '@mantine/notifications'
+
+interface FnMantineProviderProps {
+  children: React.ReactNode
+  theme?: MantineThemeOverride
+  defaultColorScheme?: MantineColorScheme
+}
+
+function FnMantineProvider({
+  children,
+  theme,
+  defaultColorScheme = 'dark',
+}: FnMantineProviderProps) {
+  return (
+    <MantineProvider theme={theme} defaultColorScheme={defaultColorScheme}>
+      <Notifications position="top-right" />
+      {children}
+    </MantineProvider>
+  )
+}
+
+export { FnMantineProvider }
+export type { FnMantineProviderProps }
diff --git a/frontend/functions/ui/multi_select.md b/frontend/functions/ui/multi_select.md
new file mode 100644
index 00000000..47aff410
--- /dev/null
+++ b/frontend/functions/ui/multi_select.md
@@ -0,0 +1,111 @@
+---
+name: multi_select
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "MultiSelect(props: MultiSelectProps): JSX.Element"
+description: "Selector múltiple con búsqueda, pills y límite de selecciones. Wrapper sobre Mantine MultiSelect."
+tags: [multi-select, form, dropdown, pills, component, ui, interactive, mantine]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core"]
+output: "Componente MultiSelect que renderiza dropdown con selección múltiple, búsqueda y pills"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/multi_select.tsx"
+props:
+  - name: data
+    type: "string[] | { value: string; label: string; disabled?: boolean }[]"
+    required: true
+    description: "Opciones del selector — strings o objetos {value, label}"
+  - name: value
+    type: "string[]"
+    required: false
+    description: "Valores seleccionados (controlled)"
+  - name: onChange
+    type: "(value: string[]) => void"
+    required: false
+    description: "Callback al cambiar la selección"
+  - name: searchable
+    type: "boolean"
+    required: false
+    description: "Permite buscar entre opciones"
+  - name: clearable
+    type: "boolean"
+    required: false
+    description: "Muestra botón para limpiar toda la selección"
+  - name: maxValues
+    type: "number"
+    required: false
+    description: "Número máximo de valores seleccionables"
+  - name: placeholder
+    type: "string"
+    required: false
+    description: "Texto cuando no hay selección"
+  - name: label
+    type: "string"
+    required: false
+    description: "Label del campo"
+  - name: disabled
+    type: "boolean"
+    required: false
+    description: "Deshabilitar el selector"
+  - name: size
+    type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+    required: false
+    description: "Tamaño del componente"
+emits: [onChange]
+has_state: true
+framework: react
+variant: [default]
+---
+
+## Ejemplo
+
+```tsx
+import { MultiSelect } from '@fn_library'
+
+// Opciones simples
+<MultiSelect
+  label="Frameworks favoritos"
+  placeholder="Elige uno o más"
+  data={['React', 'Vue', 'Angular', 'Svelte']}
+/>
+
+// Con búsqueda y clearable
+<MultiSelect
+  label="Tecnologías"
+  placeholder="Busca y selecciona"
+  searchable
+  clearable
+  value={selected}
+  onChange={setSelected}
+  data={[
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+    { value: 'ts', label: 'TypeScript' },
+  ]}
+/>
+
+// Máximo de selecciones
+<MultiSelect
+  label="Elige hasta 2"
+  placeholder="Máximo 2"
+  maxValues={2}
+  data={['Opción A', 'Opción B', 'Opción C', 'Opción D']}
+/>
+```
+
+## Notas
+
+- Wrapper directo sobre `MultiSelect` de `@mantine/core` v9. Todas las props de Mantine MultiSelect son válidas.
+- A diferencia de `Select`, `value` es `string[]` y `onChange` recibe `string[]`.
+- Las selecciones se muestran como pills dentro del input, eliminables con clic.
+- `maxValues` limita cuántos items pueden seleccionarse — el dropdown bloquea más selecciones al alcanzar el límite.
+- Soporta `searchable` para filtrar opciones y `clearable` para un botón de limpiar todo.
diff --git a/frontend/functions/ui/multi_select.tsx b/frontend/functions/ui/multi_select.tsx
new file mode 100644
index 00000000..d174f355
--- /dev/null
+++ b/frontend/functions/ui/multi_select.tsx
@@ -0,0 +1,10 @@
+import { MultiSelect as MantineMultiSelect, type MultiSelectProps as MantineMultiSelectProps } from '@mantine/core'
+
+interface MultiSelectProps extends MantineMultiSelectProps {}
+
+function MultiSelect(props: MultiSelectProps) {
+  return <MantineMultiSelect {...props} />
+}
+
+export { MultiSelect }
+export type { MultiSelectProps }
diff --git a/frontend/functions/ui/nav_link.md b/frontend/functions/ui/nav_link.md
new file mode 100644
index 00000000..af01e91a
--- /dev/null
+++ b/frontend/functions/ui/nav_link.md
@@ -0,0 +1,80 @@
+---
+name: nav_link
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "FnNavLink(props: FnNavLinkProps): JSX.Element"
+description: "Link de navegacion con icono, descripcion y anidamiento. Wrapper sobre Mantine NavLink."
+tags: [mantine, navigation, link, sidebar, menu, component, ui]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core"]
+framework: react
+props:
+  - name: label
+    type: "string"
+    required: true
+    description: "Texto principal del link"
+  - name: description
+    type: "string"
+    required: false
+    description: "Texto secundario debajo del label"
+  - name: icon
+    type: "ReactNode"
+    required: false
+    description: "Icono a la izquierda del label"
+  - name: active
+    type: "boolean"
+    required: false
+    description: "Estado activo/seleccionado"
+  - name: onClick
+    type: "MouseEventHandler"
+    required: false
+    description: "Callback al hacer click"
+  - name: href
+    type: "string"
+    required: false
+    description: "URL para navegacion como anchor"
+  - name: children
+    type: "ReactNode"
+    required: false
+    description: "NavLinks hijos para crear arbol anidado"
+  - name: opened
+    type: "boolean"
+    required: false
+    description: "Controla si los hijos estan expandidos"
+  - name: defaultOpened
+    type: "boolean"
+    required: false
+    description: "Estado inicial de expansion de hijos"
+output: "Link de navegacion con highlight activo, icono y soporte para sub-items colapsables"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/nav_link.tsx"
+emits: []
+has_state: false
+variant: []
+---
+
+## Ejemplo
+
+```tsx
+import { FnNavLink } from '@fn_library'
+import { IconHome, IconSettings } from '@tabler/icons-react'
+
+<FnNavLink label="Home" icon={<IconHome size={16} />} active />
+<FnNavLink label="Settings" icon={<IconSettings size={16} />} defaultOpened>
+  <FnNavLink label="General" />
+  <FnNavLink label="Seguridad" />
+</FnNavLink>
+```
+
+## Notas
+
+Wrapper sobre Mantine `NavLink`. Soporta anidamiento -- pasar `FnNavLink` como children crea un arbol colapsable. El `icon` se mapea a `leftSection` internamente. Ideal para uso dentro de `FnAppShell` navbar.
diff --git a/frontend/functions/ui/nav_link.tsx b/frontend/functions/ui/nav_link.tsx
new file mode 100644
index 00000000..ccb411cc
--- /dev/null
+++ b/frontend/functions/ui/nav_link.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react'
+import { NavLink } from '@mantine/core'
+
+interface FnNavLinkProps {
+  label: string
+  description?: string
+  icon?: React.ReactNode
+  active?: boolean
+  onClick?: React.MouseEventHandler<HTMLButtonElement>
+  href?: string
+  children?: React.ReactNode
+  opened?: boolean
+  defaultOpened?: boolean
+}
+
+function FnNavLink({
+  label,
+  description,
+  icon,
+  active,
+  onClick,
+  href,
+  children,
+  opened,
+  defaultOpened,
+}: FnNavLinkProps) {
+  return (
+    <NavLink
+      label={label}
+      description={description}
+      leftSection={icon}
+      active={active}
+      onClick={onClick}
+      href={href}
+      opened={opened}
+      defaultOpened={defaultOpened}
+    >
+      {children}
+    </NavLink>
+  )
+}
+
+export { FnNavLink }
+export type { FnNavLinkProps }
diff --git a/frontend/functions/ui/number_input.md b/frontend/functions/ui/number_input.md
new file mode 100644
index 00000000..2d3ff347
--- /dev/null
+++ b/frontend/functions/ui/number_input.md
@@ -0,0 +1,92 @@
+---
+name: number_input
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "FnNumberInput(props: FnNumberInputProps): JSX.Element"
+description: "Input numerico con min/max, step, prefijo y sufijo. Wrapper sobre Mantine NumberInput."
+tags: [mantine, input, number, form, component, ui]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core"]
+framework: react
+props:
+  - name: value
+    type: "number | string"
+    required: false
+    description: "Valor actual del input"
+  - name: onChange
+    type: "(value: number | string) => void"
+    required: false
+    description: "Callback cuando cambia el valor"
+  - name: min
+    type: "number"
+    required: false
+    description: "Valor minimo permitido"
+  - name: max
+    type: "number"
+    required: false
+    description: "Valor maximo permitido"
+  - name: step
+    type: "number"
+    required: false
+    description: "Incremento/decremento por click"
+  - name: label
+    type: "string"
+    required: false
+    description: "Etiqueta del input"
+  - name: description
+    type: "string"
+    required: false
+    description: "Texto descriptivo debajo del input"
+  - name: error
+    type: "string"
+    required: false
+    description: "Mensaje de error"
+  - name: placeholder
+    type: "string"
+    required: false
+    description: "Placeholder del input"
+  - name: prefix
+    type: "string"
+    required: false
+    description: "Texto prefijo dentro del input (ej: $)"
+  - name: suffix
+    type: "string"
+    required: false
+    description: "Texto sufijo dentro del input (ej: kg)"
+output: "Input numerico con controles de incremento, validacion y decoradores de texto"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/number_input.tsx"
+emits: []
+has_state: false
+variant: []
+---
+
+## Ejemplo
+
+```tsx
+import { FnNumberInput } from '@fn_library'
+
+<FnNumberInput
+  label="Precio"
+  value={price}
+  onChange={setPrice}
+  min={0}
+  max={10000}
+  step={0.01}
+  prefix="$"
+  description="Precio unitario en USD"
+/>
+```
+
+## Notas
+
+Wrapper sobre Mantine `NumberInput`. Soporta prefix/suffix para decorar el valor visualmente. Los controles de incremento/decremento respetan min/max/step.
diff --git a/frontend/functions/ui/number_input.tsx b/frontend/functions/ui/number_input.tsx
new file mode 100644
index 00000000..4158011e
--- /dev/null
+++ b/frontend/functions/ui/number_input.tsx
@@ -0,0 +1,48 @@
+import { NumberInput } from '@mantine/core'
+
+interface FnNumberInputProps {
+  value?: number | string
+  onChange?: (value: number | string) => void
+  min?: number
+  max?: number
+  step?: number
+  label?: string
+  description?: string
+  error?: string
+  placeholder?: string
+  prefix?: string
+  suffix?: string
+}
+
+function FnNumberInput({
+  value,
+  onChange,
+  min,
+  max,
+  step,
+  label,
+  description,
+  error,
+  placeholder,
+  prefix,
+  suffix,
+}: FnNumberInputProps) {
+  return (
+    <NumberInput
+      value={value}
+      onChange={onChange}
+      min={min}
+      max={max}
+      step={step}
+      label={label}
+      description={description}
+      error={error}
+      placeholder={placeholder}
+      prefix={prefix}
+      suffix={suffix}
+    />
+  )
+}
+
+export { FnNumberInput }
+export type { FnNumberInputProps }
diff --git a/frontend/functions/ui/page_header.md b/frontend/functions/ui/page_header.md
index 45d6db21..0df5c8e8 100644
--- a/frontend/functions/ui/page_header.md
+++ b/frontend/functions/ui/page_header.md
@@ -8,12 +8,12 @@ purity: impure
 signature: "PageHeader(props: PageHeaderProps): JSX.Element"
 description: "Cabecera de página con título, subtítulo, acciones, back button, tabs integrados, badge y modo sticky. Incluye SimplePageHeader."
 tags: [header, page, layout, navigation, component, ui]
-uses_functions: [cn_ts_core]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: [react]
+imports: [react, "@mantine/core", "@tabler/icons-react"]
 output: "Componente PageHeader que renderiza cabecera de página con título, acciones, tabs integrados y modo sticky"
 tested: false
 tests: []
diff --git a/frontend/functions/ui/page_header.tsx b/frontend/functions/ui/page_header.tsx
index 926ee202..2e74bd4c 100644
--- a/frontend/functions/ui/page_header.tsx
+++ b/frontend/functions/ui/page_header.tsx
@@ -1,7 +1,8 @@
 "use client"
 
 import * as React from "react"
-import { cn } from "../core/cn"
+import { Group, Stack, Title, Text, ActionIcon, Tabs, Box } from "@mantine/core"
+import { IconChevronLeft } from "@tabler/icons-react"
 
 interface TabItem {
   label: string
@@ -10,7 +11,7 @@ interface TabItem {
   disabled?: boolean
 }
 
-interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+interface PageHeaderProps {
   title: string
   subtitle?: string
   actions?: React.ReactNode
@@ -24,70 +25,67 @@ interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
 
 function PageHeader({
   title, subtitle, actions, onBack, tabs, activeTab, onTabChange,
-  badge, sticky = false, className, ...props
+  badge, sticky = false,
 }: PageHeaderProps) {
   return (
-    <header
+    <Box
       data-slot="page-header"
-      className={cn("space-y-4 border-b bg-background pb-4", sticky && "sticky top-0 z-20", className)}
-      {...props}
+      pb="md"
+      style={{
+        borderBottom: '1px solid var(--mantine-color-default-border)',
+        backgroundColor: 'var(--mantine-color-body)',
+        ...(sticky ? { position: 'sticky', top: 0, zIndex: 20 } : {}),
+      }}
     >
-      <div className="flex items-start justify-between gap-4">
-        <div className="flex items-start gap-3">
-          {onBack && (
-            <button onClick={onBack} className="mt-1 inline-flex size-7 shrink-0 items-center justify-center rounded-md hover:bg-muted">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m15 18-6-6 6-6"/></svg>
-            </button>
-          )}
-          <div className="space-y-1">
-            <div className="flex items-center gap-3">
-              <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
-              {badge}
-            </div>
-            {subtitle && <p className="text-sm text-muted-foreground">{subtitle}</p>}
-          </div>
-        </div>
-        {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
-      </div>
-      {tabs && tabs.length > 0 && (
-        <nav className="flex gap-4 border-b -mb-4 pb-0">
-          {tabs.map((tab) => (
-            <button
-              key={tab.value}
-              type="button"
-              disabled={tab.disabled}
-              onClick={() => onTabChange?.(tab.value)}
-              className={cn(
-                "inline-flex items-center gap-2 border-b-2 px-1 pb-3 text-sm font-medium transition-colors",
-                activeTab === tab.value ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground",
-                tab.disabled && "pointer-events-none opacity-50"
-              )}
-            >
-              {tab.icon && <span className="size-4">{tab.icon}</span>}
-              {tab.label}
-            </button>
-          ))}
-        </nav>
-      )}
-    </header>
+      <Stack gap="md">
+        <Group justify="space-between" align="flex-start" gap="md">
+          <Group align="flex-start" gap="sm">
+            {onBack && (
+              <ActionIcon variant="subtle" size="sm" onClick={onBack} mt={4}>
+                <IconChevronLeft size={16} />
+              </ActionIcon>
+            )}
+            <Stack gap={4}>
+              <Group gap="sm" align="center">
+                <Title order={2}>{title}</Title>
+                {badge}
+              </Group>
+              {subtitle && <Text size="sm" c="dimmed">{subtitle}</Text>}
+            </Stack>
+          </Group>
+          {actions && <Group gap="xs" style={{ flexShrink: 0 }}>{actions}</Group>}
+        </Group>
+        {tabs && tabs.length > 0 && (
+          <Tabs value={activeTab} onChange={(v) => v && onTabChange?.(v)} style={{ marginBottom: 'calc(-1 * var(--mantine-spacing-md))' }}>
+            <Tabs.List>
+              {tabs.map((tab) => (
+                <Tabs.Tab key={tab.value} value={tab.value} disabled={tab.disabled} leftSection={tab.icon}>
+                  {tab.label}
+                </Tabs.Tab>
+              ))}
+            </Tabs.List>
+          </Tabs>
+        )}
+      </Stack>
+    </Box>
   )
 }
 
-interface SimplePageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+interface SimplePageHeaderProps {
   title: string
   description?: string
   children?: React.ReactNode
 }
 
-function SimplePageHeader({ title, description, children, className, ...props }: SimplePageHeaderProps) {
+function SimplePageHeader({ title, description, children }: SimplePageHeaderProps) {
   return (
-    <div className={cn("flex items-center justify-between border-b pb-4", className)} {...props}>
-      <div className="space-y-1">
-        <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
-        {description && <p className="text-sm text-muted-foreground">{description}</p>}
-      </div>
-      {children && <div className="flex items-center gap-2">{children}</div>}
-    </div>
+    <Group justify="space-between" pb="md" style={{ borderBottom: '1px solid var(--mantine-color-default-border)' }}>
+      <Stack gap={4}>
+        <Title order={2}>{title}</Title>
+        {description && <Text size="sm" c="dimmed">{description}</Text>}
+      </Stack>
+      {children && <Group gap="xs">{children}</Group>}
+    </Group>
   )
 }
 
diff --git a/frontend/functions/ui/pagination.md b/frontend/functions/ui/pagination.md
index 17384130..40110f35 100644
--- a/frontend/functions/ui/pagination.md
+++ b/frontend/functions/ui/pagination.md
@@ -6,25 +6,53 @@ domain: ui
 version: "1.0.0"
 purity: impure
 signature: "Pagination(props: PaginationProps): JSX.Element"
-description: "Controles de navegacion de paginas con Previous/Next, numeros de pagina, elipsis y estado activo."
-tags: [pagination, navigation, component, ui]
-uses_functions: [cn_ts_core]
+description: "Controles de navegacion de paginas autocontenido. Mantine Pagination."
+tags: [pagination, navigation, component, ui, mantine]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: ["lucide-react", "./button"]
-output: "Componente Pagination que renderiza controles de navegación de páginas con Previous/Next y números"
+imports: ["@mantine/core"]
+output: "Componente Pagination autocontenido que renderiza controles de navegacion de paginas"
 tested: false
 tests: []
 test_file_path: ""
 file_path: "frontend/functions/ui/pagination.tsx"
 props:
+  - name: total
+    type: "number"
+    required: true
+    description: "Numero total de paginas"
+  - name: value
+    type: "number"
+    required: false
+    description: "Pagina actual (controlado)"
+  - name: defaultValue
+    type: "number"
+    required: false
+    description: "Pagina inicial (no controlado)"
+  - name: onChange
+    type: "(page: number) => void"
+    required: false
+    description: "Callback al cambiar de pagina"
+  - name: siblings
+    type: "number"
+    required: false
+    description: "Paginas visibles a cada lado de la actual"
+  - name: boundaries
+    type: "number"
+    required: false
+    description: "Paginas visibles al inicio y final"
+  - name: withEdges
+    type: "boolean"
+    required: false
+    description: "Mostrar botones first/last page"
   - name: className
     type: "string"
     required: false
     description: "Clases CSS adicionales"
-emits: []
+emits: [onChange]
 has_state: false
 framework: react
 variant: []
@@ -33,30 +61,16 @@ variant: []
 ## Ejemplo
 
 ```tsx
-<Pagination>
-  <PaginationContent>
-    <PaginationItem>
-      <PaginationPrevious href="/page/1" />
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationLink href="/page/1">1</PaginationLink>
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationLink href="/page/2" isActive>2</PaginationLink>
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationLink href="/page/3">3</PaginationLink>
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationEllipsis />
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationNext href="/page/3" />
-    </PaginationItem>
-  </PaginationContent>
-</Pagination>
+// Basico
+<Pagination total={10} defaultValue={1} />
+
+// Controlado
+<Pagination total={20} value={page} onChange={setPage} />
+
+// Con botones first/last
+<Pagination total={50} withEdges siblings={2} />
 ```
 
 ## Notas
 
-Exports: Pagination (nav), PaginationContent (ul), PaginationItem (li), PaginationLink (a con isActive/disabled), PaginationPrevious, PaginationNext, PaginationEllipsis. PaginationLink reutiliza buttonVariants para consistencia visual. Componente presentacional — el manejo del estado de pagina queda en el consumidor.
+Usa Mantine Pagination autocontenido. Previous/Next, numeros de pagina y elipsis se generan automaticamente. La API anterior con sub-componentes (PaginationContent, PaginationItem, PaginationLink, etc.) fue reemplazada por un unico componente con props declarativas. Export: Pagination y PaginationProps.
diff --git a/frontend/functions/ui/pagination.tsx b/frontend/functions/ui/pagination.tsx
index 6771cf31..9b27d8bf 100644
--- a/frontend/functions/ui/pagination.tsx
+++ b/frontend/functions/ui/pagination.tsx
@@ -1,100 +1,43 @@
-import * as React from "react"
-import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
-import { cn } from "../core/cn"
-import { buttonVariants } from "./button"
+import { Pagination as MantinePagination } from "@mantine/core"
 
-function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+interface PaginationProps {
+  total: number
+  value?: number
+  defaultValue?: number
+  onChange?: (page: number) => void
+  siblings?: number
+  boundaries?: number
+  withEdges?: boolean
+  className?: string
+}
+
+function Pagination({
+  total,
+  value,
+  defaultValue,
+  onChange,
+  siblings,
+  boundaries,
+  withEdges = false,
+  className,
+  ...props
+}: PaginationProps) {
   return (
-    <nav
+    <MantinePagination
       data-slot="pagination"
-      role="navigation"
-      aria-label="pagination"
-      className={cn("mx-auto flex w-full justify-center", className)}
+      total={total}
+      value={value}
+      defaultValue={defaultValue}
+      onChange={onChange}
+      siblings={siblings}
+      boundaries={boundaries}
+      withEdges={withEdges}
+      className={className}
+      size="sm"
       {...props}
     />
   )
 }
 
-function PaginationContent({ className, ...props }: React.ComponentProps<"ul">) {
-  return (
-    <ul
-      data-slot="pagination-content"
-      className={cn("flex flex-row items-center gap-1", className)}
-      {...props}
-    />
-  )
-}
-
-function PaginationItem({ ...props }: React.ComponentProps<"li">) {
-  return <li data-slot="pagination-item" {...props} />
-}
-
-type PaginationLinkProps = {
-  isActive?: boolean
-  disabled?: boolean
-  size?: "icon" | "default" | "sm" | "lg"
-} & React.ComponentProps<"a">
-
-function PaginationLink({ className, isActive, disabled, size = "icon", ...props }: PaginationLinkProps) {
-  return (
-    <a
-      data-slot="pagination-link"
-      aria-current={isActive ? "page" : undefined}
-      aria-disabled={disabled}
-      className={cn(
-        buttonVariants({ variant: isActive ? "outline" : "ghost", size }),
-        disabled && "pointer-events-none opacity-50",
-        isActive && "border-border font-medium",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function PaginationPrevious({ className, ...props }: React.ComponentProps<"a">) {
-  return (
-    <PaginationLink
-      data-slot="pagination-previous"
-      aria-label="Go to previous page"
-      size="default"
-      className={cn("gap-1 px-2.5 pl-2", className)}
-      {...props}
-    >
-      <ChevronLeftIcon className="size-4" />
-      <span>Previous</span>
-    </PaginationLink>
-  )
-}
-
-function PaginationNext({ className, ...props }: React.ComponentProps<"a">) {
-  return (
-    <PaginationLink
-      data-slot="pagination-next"
-      aria-label="Go to next page"
-      size="default"
-      className={cn("gap-1 px-2.5 pr-2", className)}
-      {...props}
-    >
-      <span>Next</span>
-      <ChevronRightIcon className="size-4" />
-    </PaginationLink>
-  )
-}
-
-function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="pagination-ellipsis"
-      aria-hidden
-      className={cn("flex size-8 items-center justify-center text-muted-foreground", className)}
-      {...props}
-    >
-      <MoreHorizontalIcon className="size-4" />
-      <span className="sr-only">More pages</span>
-    </span>
-  )
-}
-
-export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious }
-export type { PaginationLinkProps }
+export { Pagination }
+export type { PaginationProps }
diff --git a/frontend/functions/ui/password_input.md b/frontend/functions/ui/password_input.md
new file mode 100644
index 00000000..47c7f8f9
--- /dev/null
+++ b/frontend/functions/ui/password_input.md
@@ -0,0 +1,109 @@
+---
+name: password_input
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "PasswordInput(props: PasswordInputProps): JSX.Element"
+description: "Input de contraseña con toggle de visibilidad y soporte para indicador de fortaleza. Wrapper sobre Mantine PasswordInput."
+tags: [password, input, form, security, component, ui, interactive, mantine]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core"]
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/password_input.tsx"
+framework: react
+has_state: true
+props:
+  - name: visible
+    type: "boolean"
+    required: false
+    description: "Controla externamente si la contraseña es visible"
+  - name: onVisibilityChange
+    type: "(visible: boolean) => void"
+    required: false
+    description: "Callback cuando el usuario cambia la visibilidad"
+  - name: visibilityToggleIcon
+    type: "React.FC<{ reveal: boolean }>"
+    required: false
+    description: "Icono personalizado para el botón de toggle"
+  - name: value
+    type: "string"
+    required: false
+    description: "Valor controlado del input"
+  - name: onChange
+    type: "(event: React.ChangeEvent<HTMLInputElement>) => void"
+    required: false
+    description: "Callback al cambiar el valor"
+  - name: label
+    type: "React.ReactNode"
+    required: false
+    description: "Etiqueta del campo"
+  - name: placeholder
+    type: "string"
+    required: false
+    description: "Texto placeholder cuando está vacío"
+  - name: error
+    type: "React.ReactNode"
+    required: false
+    description: "Mensaje de error a mostrar bajo el input"
+  - name: disabled
+    type: "boolean"
+    required: false
+    description: "Deshabilita el input"
+  - name: size
+    type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+    required: false
+    description: "Tamaño del componente"
+emits: [onChange, onVisibilityChange]
+params:
+  - name: props
+    desc: "Props de Mantine PasswordInput: visible, onVisibilityChange, visibilityToggleIcon, value, onChange, label, placeholder, error, disabled, size y cualquier prop HTML nativa de input"
+output: "Componente PasswordInput que renderiza input enmascarado con botón de mostrar/ocultar"
+---
+
+## Ejemplo
+
+```tsx
+import { PasswordInput } from '@fn_library'
+
+// Uso básico
+function LoginForm() {
+  return (
+    <PasswordInput
+      label="Contraseña"
+      placeholder="Tu contraseña"
+    />
+  )
+}
+
+// Con visibilidad controlada
+import { useState } from 'react'
+
+function ControlledPasswordInput() {
+  const [visible, setVisible] = useState(false)
+  const [value, setValue] = useState('')
+
+  return (
+    <PasswordInput
+      label="Contraseña"
+      placeholder="Ingresa tu contraseña"
+      value={value}
+      onChange={(e) => setValue(e.currentTarget.value)}
+      visible={visible}
+      onVisibilityChange={setVisible}
+      error={value.length > 0 && value.length < 8 ? 'Mínimo 8 caracteres' : undefined}
+    />
+  )
+}
+```
+
+## Notas
+
+Wrapper delgado sobre `PasswordInput` de Mantine v9. El toggle de visibilidad es nativo de Mantine y se controla opcionalmente con `visible` + `onVisibilityChange`. Soporta todas las props de Mantine incluyendo `strengthMeter` para indicadores de fortaleza. Los iconos del toggle deben venir de `@tabler/icons-react`.
diff --git a/frontend/functions/ui/password_input.tsx b/frontend/functions/ui/password_input.tsx
new file mode 100644
index 00000000..288121ee
--- /dev/null
+++ b/frontend/functions/ui/password_input.tsx
@@ -0,0 +1,10 @@
+import { PasswordInput as MantinePasswordInput, type PasswordInputProps as MantinePasswordInputProps } from '@mantine/core'
+
+interface PasswordInputProps extends MantinePasswordInputProps {}
+
+function PasswordInput(props: PasswordInputProps) {
+  return <MantinePasswordInput {...props} />
+}
+
+export { PasswordInput }
+export type { PasswordInputProps }
diff --git a/frontend/functions/ui/pie_chart.md b/frontend/functions/ui/pie_chart.md
index 7f062fc9..c63d2c0e 100644
--- a/frontend/functions/ui/pie_chart.md
+++ b/frontend/functions/ui/pie_chart.md
@@ -6,15 +6,15 @@ domain: ui
 version: "1.0.0"
 purity: impure
 signature: "PieChart(props: PieChartProps): JSX.Element"
-description: "Gráfico de torta/dona Recharts con Cell por segmento, colores automáticos, labels con porcentaje, Legend y Tooltip temático. Soporte donut con innerRadius configurable."
-tags: [chart, pie, donut, visualization, recharts, component, ui, dashboard]
-uses_functions: [cn_ts_core]
+description: "Gráfico de torta/dona @mantine/charts con colores automáticos, labels y tooltip. Usa DonutChart para dona, PieChart para torta."
+tags: [chart, pie, donut, visualization, mantine, component, ui, dashboard]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: [recharts]
-output: "Componente PieChart que renderiza gráfico de torta o dona con labels de porcentaje, leyenda y tooltip"
+imports: ["@mantine/charts", "@mantine/core"]
+output: "Componente PieChart que renderiza gráfico de torta o dona con labels y tooltip"
 tested: false
 tests: []
 test_file_path: ""
@@ -40,14 +40,6 @@ props:
     type: "boolean"
     required: false
     description: "Modo dona. innerRadius pasa a 50 por defecto cuando donut=true."
-  - name: innerRadius
-    type: "number"
-    required: false
-    description: "Radio interno en px. Sobreescribe el default calculado por donut."
-  - name: outerRadius
-    type: "number"
-    required: false
-    description: "Radio externo en px. Default 100."
   - name: showLegend
     type: "boolean"
     required: false
@@ -93,4 +85,4 @@ variant: [pie, donut]
 
 ## Notas
 
-Extraido y generalizado desde `apps/rapid_dashboards/frontend/src/components/widgets/PieChartWidget.tsx`. Los valores de `valueKey` se convierten a `Number()` para garantizar que Recharts los interprete correctamente (útil cuando los datos vienen de SQLite como strings). El `ResponsiveContainer` ocupa el 100% del ancho del padre.
+Los valores de `valueKey` se convierten a `Number()` antes de pasarlos al chart. Cuando `donut=true` se usa `DonutChart` de Mantine, de lo contrario `PieChart`.
diff --git a/frontend/functions/ui/pie_chart.tsx b/frontend/functions/ui/pie_chart.tsx
index 8a0c3eba..b3dd3fb6 100644
--- a/frontend/functions/ui/pie_chart.tsx
+++ b/frontend/functions/ui/pie_chart.tsx
@@ -1,7 +1,5 @@
-import {
-  PieChart as RechartsPieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer,
-} from 'recharts'
-import { cn } from '../core/cn'
+import { PieChart as MantinePieChart, DonutChart } from '@mantine/charts'
+import { Paper } from '@mantine/core'
 
 const DEFAULT_COLORS = [
   '#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6',
@@ -14,12 +12,9 @@ interface PieChartProps {
   valueKey: string
   colors?: string[]
   donut?: boolean
-  innerRadius?: number
-  outerRadius?: number
   showLegend?: boolean
   showLabels?: boolean
-  height?: number | string
-  className?: string
+  height?: number
   valueFormatter?: (value: number) => string
 }
 
@@ -29,59 +24,33 @@ function PieChartComponent({
   valueKey,
   colors = DEFAULT_COLORS,
   donut = false,
-  innerRadius,
-  outerRadius = 100,
-  showLegend = true,
+  showLegend: _showLegend = true,
   showLabels = true,
   height = 300,
-  className,
   valueFormatter = (v) => v.toLocaleString(),
 }: PieChartProps) {
-  // Ensure numeric values for Recharts Pie
-  const pieData = data.map(row => ({
-    ...row,
-    [valueKey]: Number(row[valueKey]) || 0,
+  const chartData = data.map((row, i) => ({
+    name: String(row[nameKey] ?? ''),
+    value: Number(row[valueKey]) || 0,
+    color: colors[i % colors.length] as string,
   }))
 
-  const resolvedInnerRadius = donut ? (innerRadius ?? 50) : (innerRadius ?? 0)
-
-  const labelRenderer = showLabels
-    ? ({ name, percent }: Record<string, unknown>) =>
-        `${name ?? ''} ${(((percent as number) ?? 0) * 100).toFixed(0)}%`
-    : undefined
+  const Chart = donut ? DonutChart : MantinePieChart
 
   return (
-    <ResponsiveContainer width="100%" height={height} className={cn(className)}>
-      <RechartsPieChart>
-        <Pie
-          data={pieData}
-          dataKey={valueKey}
-          nameKey={nameKey}
-          cx="50%"
-          cy="50%"
-          outerRadius={outerRadius}
-          innerRadius={resolvedInnerRadius}
-          strokeWidth={0}
-          fontSize={11}
-          label={labelRenderer}
-          labelLine={showLabels}
-        >
-          {pieData.map((_, i) => (
-            <Cell key={i} fill={colors[i % colors.length]} />
-          ))}
-        </Pie>
-        <Tooltip
-          contentStyle={{
-            backgroundColor: 'var(--card)',
-            border: '1px solid var(--border)',
-            borderRadius: 8,
-            fontSize: 12,
-          }}
-          formatter={(value: unknown) => [valueFormatter(value as number)]}
-        />
-        {showLegend && <Legend wrapperStyle={{ fontSize: 11 }} />}
-      </RechartsPieChart>
-    </ResponsiveContainer>
+    <Paper p="md">
+      <Chart
+        h={height}
+        data={chartData}
+        withLabels={showLabels}
+        withLabelsLine={showLabels}
+        withTooltip
+        tooltipDataSource="segment"
+        valueFormatter={valueFormatter}
+      />
+      {/* Mantine PieChart/DonutChart does not have a built-in legend prop;
+          legend is handled via withLabels. showLegend kept for API compat. */}
+    </Paper>
   )
 }
 
diff --git a/frontend/functions/ui/pin_input.md b/frontend/functions/ui/pin_input.md
new file mode 100644
index 00000000..e568876c
--- /dev/null
+++ b/frontend/functions/ui/pin_input.md
@@ -0,0 +1,105 @@
+---
+name: pin_input
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "PinInput(props: PinInputProps): JSX.Element"
+description: "Input de código PIN/OTP con campos individuales y autocompletado. Wrapper sobre Mantine PinInput."
+tags: [pin, otp, code, input, form, component, ui, mantine]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core"]
+output: "Componente PinInput que renderiza campos individuales por dígito con soporte para autocompletado OTP, máscaras y teclado numérico o alfanumérico"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/pin_input.tsx"
+props:
+  - name: length
+    type: "number"
+    required: false
+    description: "Número de campos individuales del PIN (por defecto 4)"
+  - name: type
+    type: "'number' | 'alphanumeric'"
+    required: false
+    description: "Tipo de caracteres aceptados — solo números o también letras"
+  - name: mask
+    type: "boolean"
+    required: false
+    description: "Oculta los caracteres ingresados como contraseña"
+  - name: oneTimeCode
+    type: "boolean"
+    required: false
+    description: "Activa el atributo autocomplete=one-time-code para OTP en móvil"
+  - name: value
+    type: "string"
+    required: false
+    description: "Valor actual del PIN (controlled)"
+  - name: onChange
+    type: "(value: string) => void"
+    required: false
+    description: "Callback al cambiar cualquier campo"
+  - name: onComplete
+    type: "(value: string) => void"
+    required: false
+    description: "Callback cuando todos los campos están completos"
+  - name: placeholder
+    type: "string"
+    required: false
+    description: "Carácter placeholder en cada campo vacío"
+  - name: disabled
+    type: "boolean"
+    required: false
+    description: "Deshabilita todos los campos"
+  - name: size
+    type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+    required: false
+    description: "Tamaño visual de los campos"
+emits: [onChange, onComplete]
+has_state: true
+framework: react
+variant: [default]
+---
+
+## Ejemplo
+
+```tsx
+import { PinInput } from '@fn_library'
+
+// PIN numérico de 4 dígitos
+<PinInput
+  length={4}
+  type="number"
+  onComplete={(value) => console.log('PIN completo:', value)}
+/>
+
+// OTP de 6 dígitos con autocompletado móvil
+<PinInput
+  length={6}
+  type="number"
+  oneTimeCode
+  onComplete={handleOtpSubmit}
+/>
+
+// PIN enmascarado alfanumérico
+<PinInput
+  length={5}
+  type="alphanumeric"
+  mask
+  placeholder="*"
+  value={pin}
+  onChange={setPin}
+/>
+```
+
+## Notas
+
+- Wrapper directo sobre `PinInput` de `@mantine/core` v9. Todas las props de Mantine PinInput son válidas.
+- `oneTimeCode` genera `autocomplete="one-time-code"` para que el browser/SMS sugiera el código automáticamente.
+- Cada campo avanza al siguiente automáticamente al completarse.
+- Soporta navegación con teclado (flechas, backspace) entre campos.
diff --git a/frontend/functions/ui/pin_input.tsx b/frontend/functions/ui/pin_input.tsx
new file mode 100644
index 00000000..d6167d58
--- /dev/null
+++ b/frontend/functions/ui/pin_input.tsx
@@ -0,0 +1,10 @@
+import { PinInput as MantinePinInput, type PinInputProps as MantinePinInputProps } from '@mantine/core'
+
+interface PinInputProps extends MantinePinInputProps {}
+
+function PinInput(props: PinInputProps) {
+  return <MantinePinInput {...props} />
+}
+
+export { PinInput }
+export type { PinInputProps }
diff --git a/frontend/functions/ui/popover.md b/frontend/functions/ui/popover.md
index 5257d8f0..46f7e11d 100644
--- a/frontend/functions/ui/popover.md
+++ b/frontend/functions/ui/popover.md
@@ -6,15 +6,15 @@ domain: ui
 version: "1.0.0"
 purity: impure
 signature: "Popover(props: PopoverProps): JSX.Element"
-description: "Contenido flotante posicionado accesible con animaciones. Base-UI Popover primitive."
-tags: [popover, component, ui, interactive, overlay, base-ui]
-uses_functions: [cn_ts_core]
+description: "Contenido flotante posicionado accesible con animaciones. Mantine Popover."
+tags: [popover, component, ui, interactive, overlay, mantine]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: ["@base-ui/react/popover"]
-output: "Componente Popover que renderiza contenido flotante accesible posicionado automáticamente"
+imports: ["@mantine/core", react]
+output: "Componente Popover que renderiza contenido flotante accesible posicionado automáticamente via Mantine Popover"
 tested: false
 tests: []
 test_file_path: ""
@@ -63,4 +63,4 @@ variant: []
 
 ## Notas
 
-Compuesto de: Popover (root), PopoverTrigger, PopoverContent (positioner + popup), PopoverClose, PopoverHeader, PopoverTitle, PopoverDescription. El posicionamiento automatico lo maneja Base-UI. Animaciones con data-open/data-closed.
+Compuesto de: Popover (root), PopoverTrigger, PopoverContent, PopoverClose, PopoverHeader, PopoverTitle, PopoverDescription. El posicionamiento automatico lo maneja Mantine Popover. PopoverPortal es un no-op mantenido por compatibilidad.
diff --git a/frontend/functions/ui/popover.tsx b/frontend/functions/ui/popover.tsx
index d82f346e..e410f264 100644
--- a/frontend/functions/ui/popover.tsx
+++ b/frontend/functions/ui/popover.tsx
@@ -1,57 +1,92 @@
-import * as React from "react"
-import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
-import { cn } from "../core/cn"
+import * as React from 'react'
+import { Popover as MantinePopover, Box, Text } from '@mantine/core'
 
-function Popover({ ...props }: PopoverPrimitive.Root.Props) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+interface PopoverProps {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  children: React.ReactNode
 }
 
-function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
-}
-
-function PopoverPortal({ ...props }: PopoverPrimitive.Portal.Props) {
-  return <PopoverPrimitive.Portal data-slot="popover-portal" {...props} />
-}
-
-function PopoverContent({ className, sideOffset = 4, ...props }: PopoverPrimitive.Positioner.Props) {
+function Popover({ open, defaultOpen, onOpenChange, children }: PopoverProps) {
   return (
-    <PopoverPortal>
-      <PopoverPrimitive.Positioner
-        data-slot="popover-content"
-        sideOffset={sideOffset}
-        className={cn("z-50", className)}
-        {...props}
-      >
-        <PopoverPrimitive.Popup
-          className={cn(
-            "w-72 rounded-xl border bg-popover p-4 text-popover-foreground shadow-md outline-none",
-            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
-            "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-            "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
-          )}
-        >
-          {props.children}
-        </PopoverPrimitive.Popup>
-      </PopoverPrimitive.Positioner>
-    </PopoverPortal>
+    <MantinePopover
+      opened={open}
+      defaultOpened={defaultOpen}
+      onChange={onOpenChange}
+      withArrow
+      shadow="md"
+      radius="md"
+    >
+      {children}
+    </MantinePopover>
   )
 }
 
-function PopoverClose({ ...props }: PopoverPrimitive.Close.Props) {
-  return <PopoverPrimitive.Close data-slot="popover-close" {...props} />
+function PopoverTrigger({ children }: React.ComponentProps<'div'>) {
+  return (
+    <MantinePopover.Target>
+      {React.isValidElement(children) ? (
+        children
+      ) : (
+        <button type="button" data-slot="popover-trigger">{children}</button>
+      )}
+    </MantinePopover.Target>
+  )
 }
 
-function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return <div data-slot="popover-header" className={cn("flex flex-col gap-1.5", className)} {...props} />
+function PopoverPortal({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
 }
 
-function PopoverTitle({ className, ...props }: React.ComponentProps<"h4">) {
-  return <h4 data-slot="popover-title" className={cn("text-sm font-semibold leading-none", className)} {...props} />
+function PopoverContent({ className, children, sideOffset, ...props }: React.ComponentProps<'div'> & { sideOffset?: number }) {
+  return (
+    <MantinePopover.Dropdown
+      data-slot="popover-content"
+      className={className}
+      {...props}
+    >
+      {children}
+    </MantinePopover.Dropdown>
+  )
 }
 
-function PopoverDescription({ className, ...props }: React.ComponentProps<"p">) {
-  return <p data-slot="popover-description" className={cn("text-sm text-muted-foreground", className)} {...props} />
+function PopoverClose({ children, ...props }: React.ComponentProps<'button'>) {
+  return (
+    <button type="button" data-slot="popover-close" {...props}>
+      {children}
+    </button>
+  )
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return <Box data-slot="popover-header" mb="xs" className={className} {...props} />
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<'h4'>) {
+  return (
+    <Text
+      component="h4"
+      data-slot="popover-title"
+      fw={600}
+      size="sm"
+      className={className}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <Text
+      component="p"
+      data-slot="popover-description"
+      size="sm"
+      c="dimmed"
+      className={className}
+      {...props}
+    />
+  )
 }
 
 export { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverPortal, PopoverTitle, PopoverTrigger }
diff --git a/frontend/functions/ui/progress_bar.md b/frontend/functions/ui/progress_bar.md
index 23510ca4..52e853ef 100644
--- a/frontend/functions/ui/progress_bar.md
+++ b/frontend/functions/ui/progress_bar.md
@@ -6,14 +6,14 @@ domain: ui
 version: "1.0.0"
 purity: impure
 signature: "ProgressBar(props: ProgressBarProps): JSX.Element"
-description: "Barra de progreso con variantes de color y tamaño, buffer, animación, modo indeterminado y display de valor."
-tags: [progress, loading, component, ui, feedback]
-uses_functions: [cn_ts_core]
+description: "Barra de progreso con variantes de color y tamaño, buffer, animación, modo indeterminado y display de valor. Mantine Progress."
+tags: [progress, loading, component, ui, feedback, mantine]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: [class-variance-authority]
+imports: ["@mantine/core"]
 output: "Componente ProgressBar que renderiza barra de progreso con animaciones, buffer y modo indeterminado"
 tested: false
 tests: []
@@ -76,7 +76,4 @@ source_file: "frontend/src/components/ui/progress/progress-bar.tsx"
 
 ## Notas
 
-El porcentaje se clampea a [0, 100] internamente. El buffer se renderiza como capa semitransparente detrás del fill.
-Las animaciones de stripes e indeterminate requieren keyframes definidos en el CSS global:
-- `progress-stripes`: background-position de 0 a 1rem
-- `progress-indeterminate`: translateX de -100% a 300%
+El porcentaje se clampea a [0, 100] internamente. El buffer se renderiza como capa semitransparente debajo del fill usando Progress.Root apilados. Los colores se mapean de semanticos (primary/success/warning/destructive) a colores Mantine. La animacion striped usa el prop animated nativo de Mantine.
diff --git a/frontend/functions/ui/progress_bar.tsx b/frontend/functions/ui/progress_bar.tsx
index 09543328..f2d2d757 100644
--- a/frontend/functions/ui/progress_bar.tsx
+++ b/frontend/functions/ui/progress_bar.tsx
@@ -1,23 +1,6 @@
-import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '../core/cn'
+import { Progress, Box } from "@mantine/core"
 
-const progressBarVariants = cva(
-  'relative w-full overflow-hidden rounded-full bg-muted',
-  {
-    variants: {
-      size: { sm: 'h-1', md: 'h-2', lg: 'h-3' },
-      color: {
-        primary: '[&_.progress-fill]:bg-primary',
-        success: '[&_.progress-fill]:bg-emerald-500',
-        warning: '[&_.progress-fill]:bg-amber-500',
-        destructive: '[&_.progress-fill]:bg-destructive',
-      },
-    },
-    defaultVariants: { size: 'md', color: 'primary' },
-  }
-)
-
-export interface ProgressBarProps extends VariantProps<typeof progressBarVariants> {
+export interface ProgressBarProps {
   value: number
   max?: number
   buffer?: number
@@ -25,44 +8,80 @@ export interface ProgressBarProps extends VariantProps<typeof progressBarVariant
   animated?: boolean
   indeterminate?: boolean
   label?: string
+  size?: "sm" | "md" | "lg"
+  color?: "primary" | "success" | "warning" | "destructive"
   className?: string
 }
 
+const colorMap: Record<NonNullable<ProgressBarProps["color"]>, string> = {
+  primary: "blue",
+  success: "green",
+  warning: "yellow",
+  destructive: "red",
+}
+
+const sizeMap: Record<NonNullable<ProgressBarProps["size"]>, number> = {
+  sm: 4,
+  md: 8,
+  lg: 12,
+}
+
 export function ProgressBar({
-  value, max = 100, buffer, showValue = false, animated = false,
-  indeterminate = false, size = 'md', color = 'primary', label, className,
+  value,
+  max = 100,
+  buffer,
+  showValue = false,
+  animated = false,
+  indeterminate = false,
+  size = "md",
+  color = "primary",
+  label,
+  className,
 }: ProgressBarProps) {
   const percentage = Math.min(100, Math.max(0, (value / max) * 100))
   const bufferPercentage = buffer ? Math.min(100, Math.max(0, (buffer / max) * 100)) : undefined
+  const mantineColor = colorMap[color]
+  const mantineSize = sizeMap[size]
+
+  if (bufferPercentage !== undefined) {
+    return (
+      <Box data-slot="progress-bar" pos="relative" className={className}>
+        <Progress.Root size={mantineSize} aria-label={label}>
+          <Progress.Section value={bufferPercentage} color={mantineColor} style={{ opacity: 0.3 }} />
+        </Progress.Root>
+        <Box pos="absolute" top={0} left={0} right={0}>
+          <Progress.Root size={mantineSize} bg="transparent" aria-label={label}>
+            <Progress.Section
+              value={indeterminate ? 100 : percentage}
+              color={mantineColor}
+              animated={animated || indeterminate}
+            >
+              {showValue && !indeterminate && (
+                <Progress.Label>{Math.round(percentage)}%</Progress.Label>
+              )}
+            </Progress.Section>
+          </Progress.Root>
+        </Box>
+      </Box>
+    )
+  }
 
   return (
-    <div
+    <Progress.Root
       data-slot="progress-bar"
-      role="progressbar"
-      aria-valuenow={indeterminate ? undefined : value}
-      aria-valuemin={0}
-      aria-valuemax={max}
+      size={mantineSize}
       aria-label={label}
-      className={cn(progressBarVariants({ size, color }), className)}
+      className={className}
     >
-      {bufferPercentage !== undefined && (
-        <div className="progress-buffer absolute inset-0 bg-current opacity-20 transition-all duration-300" style={{ width: `${bufferPercentage}%` }} />
-      )}
-      <div
-        className={cn(
-          'progress-fill h-full transition-all duration-300',
-          animated && 'bg-[length:1rem_1rem] bg-[linear-gradient(45deg,rgba(255,255,255,.15)_25%,transparent_25%,transparent_50%,rgba(255,255,255,.15)_50%,rgba(255,255,255,.15)_75%,transparent_75%,transparent)] animate-[progress-stripes_1s_linear_infinite]',
-          indeterminate && 'w-1/3 animate-[progress-indeterminate_1.5s_ease-in-out_infinite]'
+      <Progress.Section
+        value={indeterminate ? 100 : percentage}
+        color={mantineColor}
+        animated={animated || indeterminate}
+      >
+        {showValue && !indeterminate && (
+          <Progress.Label>{Math.round(percentage)}%</Progress.Label>
         )}
-        style={indeterminate ? undefined : { width: `${percentage}%` }}
-      />
-      {showValue && !indeterminate && (
-        <span className="absolute inset-0 flex items-center justify-center text-[10px] font-medium text-foreground mix-blend-difference">
-          {Math.round(percentage)}%
-        </span>
-      )}
-    </div>
+      </Progress.Section>
+    </Progress.Root>
   )
 }
-
-export { progressBarVariants }
diff --git a/frontend/functions/ui/radio_group.md b/frontend/functions/ui/radio_group.md
index 8d8d56fc..7dca768c 100644
--- a/frontend/functions/ui/radio_group.md
+++ b/frontend/functions/ui/radio_group.md
@@ -6,14 +6,14 @@ domain: ui
 version: "1.0.0"
 purity: impure
 signature: "RadioGroup(props: RadioGroupProps): JSX.Element"
-description: "Grupo de opciones exclusivas accesible. Base-UI RadioGroup + Radio primitives."
-tags: [radio, radio-group, component, ui, interactive, form, base-ui]
-uses_functions: [cn_ts_core]
+description: "Grupo de opciones exclusivas accesible. Mantine Radio.Group + Radio."
+tags: [radio, radio-group, component, ui, interactive, form, mantine]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: ["@base-ui/react/radio-group", "@base-ui/react/radio"]
+imports: ["@mantine/core"]
 output: "Componente RadioGroup que renderiza grupo de opciones exclusivas accesible"
 tested: false
 tests: []
@@ -58,4 +58,4 @@ variant: []
 
 ## Notas
 
-RadioGroup es el contenedor (Base-UI RadioGroup). RadioGroupItem es cada opcion individual (Base-UI Radio). El id de cada item se genera con useId si no se provee.
+RadioGroup es el contenedor (Mantine Radio.Group). RadioGroupItem es cada opcion individual (Mantine Radio). Soporta orientacion horizontal y vertical.
diff --git a/frontend/functions/ui/radio_group.tsx b/frontend/functions/ui/radio_group.tsx
index 08cd22fa..64911f41 100644
--- a/frontend/functions/ui/radio_group.tsx
+++ b/frontend/functions/ui/radio_group.tsx
@@ -1,61 +1,56 @@
 import * as React from "react"
-import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group"
-import { Radio } from "@base-ui/react/radio"
-import { cn } from "../core/cn"
+import { Radio } from "@mantine/core"
 
-function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
+interface RadioGroupProps {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  disabled?: boolean
+  orientation?: "horizontal" | "vertical"
+  className?: string
+  children?: React.ReactNode
+}
+
+function RadioGroup({ className, value, defaultValue, onValueChange, orientation, children, ...props }: RadioGroupProps) {
   return (
-    <RadioGroupPrimitive
+    <Radio.Group
       data-slot="radio-group"
-      className={cn("grid gap-2", className)}
+      value={value}
+      defaultValue={defaultValue}
+      onChange={(val) => onValueChange?.(val)}
+      className={className}
+      {...props}
+    >
+      <div style={{ display: 'flex', flexDirection: orientation === 'horizontal' ? 'row' : 'column', gap: 'var(--mantine-spacing-sm)' }}>
+        {children}
+      </div>
+    </Radio.Group>
+  )
+}
+
+interface RadioGroupItemProps {
+  value: string
+  label?: string
+  disabled?: boolean
+  className?: string
+  labelClassName?: string
+  id?: string
+}
+
+function RadioGroupItem({ className, label, id, disabled, value, ...props }: RadioGroupItemProps) {
+  return (
+    <Radio
+      id={id}
+      data-slot="radio-group-item"
+      value={value}
+      label={label}
+      disabled={disabled}
+      className={className}
+      size="sm"
       {...props}
     />
   )
 }
 
-interface RadioGroupItemProps extends Radio.Root.Props {
-  label?: string
-  className?: string
-  labelClassName?: string
-}
-
-function RadioGroupItem({ className, label, id, labelClassName, ...props }: RadioGroupItemProps) {
-  const internalId = React.useId()
-  const itemId = id ?? internalId
-
-  return (
-    <div className="flex items-center gap-2">
-      <Radio.Root
-        id={itemId}
-        data-slot="radio-group-item"
-        className={cn(
-          "aspect-square size-4 rounded-full border border-input bg-transparent transition-colors outline-none",
-          "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
-          "data-checked:border-primary",
-          "disabled:pointer-events-none disabled:opacity-50",
-          className
-        )}
-        {...props}
-      >
-        <Radio.Indicator
-          data-slot="radio-group-indicator"
-          className="flex items-center justify-center"
-        >
-          <span className="block size-2 rounded-full bg-primary" />
-        </Radio.Indicator>
-      </Radio.Root>
-      {label && (
-        <label
-          htmlFor={itemId}
-          data-slot="radio-group-label"
-          className={cn("text-sm font-medium leading-none cursor-pointer select-none", labelClassName)}
-        >
-          {label}
-        </label>
-      )}
-    </div>
-  )
-}
-
 export { RadioGroup, RadioGroupItem }
 export type { RadioGroupItemProps }
diff --git a/frontend/functions/ui/rating.md b/frontend/functions/ui/rating.md
new file mode 100644
index 00000000..6610db2a
--- /dev/null
+++ b/frontend/functions/ui/rating.md
@@ -0,0 +1,94 @@
+---
+name: rating
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "Rating(props: RatingProps): JSX.Element"
+description: "Selector de calificación con estrellas, fracciones y símbolos custom. Wrapper sobre Mantine Rating."
+tags: [rating, stars, feedback, input, component, ui, mantine]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core"]
+output: "Componente Rating que renderiza un selector de estrellas interactivo con soporte para fracciones, modo solo lectura y símbolos personalizados"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/rating.tsx"
+props:
+  - name: count
+    type: "number"
+    required: false
+    description: "Número de estrellas/símbolos a mostrar (por defecto 5)"
+  - name: fractions
+    type: "number"
+    required: false
+    description: "Divisiones por estrella — 2 para mitades, 4 para cuartos"
+  - name: value
+    type: "number"
+    required: false
+    description: "Calificación actual (controlled)"
+  - name: onChange
+    type: "(value: number) => void"
+    required: false
+    description: "Callback al cambiar la calificación"
+  - name: readOnly
+    type: "boolean"
+    required: false
+    description: "Modo solo lectura — muestra la calificación sin permitir cambios"
+  - name: highlightSelectedOnly
+    type: "boolean"
+    required: false
+    description: "Solo resalta el símbolo seleccionado, no los anteriores"
+  - name: size
+    type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+    required: false
+    description: "Tamaño de los símbolos"
+  - name: color
+    type: "string"
+    required: false
+    description: "Color de los símbolos activos (color de Mantine o CSS)"
+emits: [onChange]
+has_state: true
+framework: react
+variant: [default]
+---
+
+## Ejemplo
+
+```tsx
+import { Rating } from '@fn_library'
+
+// Rating básico de 5 estrellas
+<Rating value={rating} onChange={setRating} />
+
+// Con medias estrellas
+<Rating
+  fractions={2}
+  value={3.5}
+  onChange={setRating}
+/>
+
+// Solo lectura para mostrar calificación
+<Rating value={4.2} fractions={10} readOnly />
+
+// Con más estrellas y color custom
+<Rating
+  count={10}
+  value={score}
+  onChange={setScore}
+  color="yellow"
+  size="lg"
+/>
+```
+
+## Notas
+
+- Wrapper directo sobre `Rating` de `@mantine/core` v9. Todas las props de Mantine Rating son válidas.
+- `fractions` permite selección granular: 2 = mitades (0.5, 1, 1.5...), 4 = cuartos (0.25, 0.5...).
+- En modo `readOnly` no dispara `onChange` y el cursor es el por defecto.
+- Accesible via teclado con soporte para lectores de pantalla.
diff --git a/frontend/functions/ui/rating.tsx b/frontend/functions/ui/rating.tsx
new file mode 100644
index 00000000..42092777
--- /dev/null
+++ b/frontend/functions/ui/rating.tsx
@@ -0,0 +1,10 @@
+import { Rating as MantineRating, type RatingProps as MantineRatingProps } from '@mantine/core'
+
+interface RatingProps extends MantineRatingProps {}
+
+function Rating(props: RatingProps) {
+  return <MantineRating {...props} />
+}
+
+export { Rating }
+export type { RatingProps }
diff --git a/frontend/functions/ui/ring_progress.md b/frontend/functions/ui/ring_progress.md
new file mode 100644
index 00000000..4f66ca22
--- /dev/null
+++ b/frontend/functions/ui/ring_progress.md
@@ -0,0 +1,67 @@
+---
+name: ring_progress
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "FnRingProgress(props: FnRingProgressProps): JSX.Element"
+description: "Anillo de progreso con secciones coloreadas y label central. Wrapper sobre Mantine RingProgress."
+tags: [mantine, progress, ring, chart, metrics, component, ui]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core"]
+framework: react
+props:
+  - name: sections
+    type: "RingProgressSection[]"
+    required: true
+    description: "Secciones del anillo con valor porcentual y color"
+  - name: size
+    type: "number"
+    required: false
+    description: "Tamano del anillo en px, default 120"
+  - name: thickness
+    type: "number"
+    required: false
+    description: "Grosor del trazo en px, default 12"
+  - name: label
+    type: "ReactNode"
+    required: false
+    description: "Contenido central del anillo (texto, icono, etc)"
+  - name: rootColor
+    type: "string"
+    required: false
+    description: "Color del fondo del anillo (parte sin llenar)"
+output: "Anillo de progreso SVG con secciones coloreadas y slot central para label"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/ring_progress.tsx"
+emits: []
+has_state: false
+variant: []
+---
+
+## Ejemplo
+
+```tsx
+import { FnRingProgress } from '@fn_library'
+import { Text } from '@mantine/core'
+
+<FnRingProgress
+  sections={[
+    { value: 40, color: 'cyan' },
+    { value: 25, color: 'orange' },
+    { value: 15, color: 'grape' },
+  ]}
+  label={<Text ta="center" fw={700}>80%</Text>}
+/>
+```
+
+## Notas
+
+Wrapper sobre Mantine `RingProgress`. Las secciones son aditivas -- la suma de `value` no deberia exceder 100. El `label` se renderiza centrado dentro del anillo.
diff --git a/frontend/functions/ui/ring_progress.tsx b/frontend/functions/ui/ring_progress.tsx
new file mode 100644
index 00000000..487377b0
--- /dev/null
+++ b/frontend/functions/ui/ring_progress.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react'
+import { RingProgress } from '@mantine/core'
+import type { RingProgressSection } from '@mantine/core'
+
+interface FnRingProgressProps {
+  sections: RingProgressSection[]
+  size?: number
+  thickness?: number
+  label?: React.ReactNode
+  rootColor?: string
+}
+
+function FnRingProgress({
+  sections,
+  size = 120,
+  thickness = 12,
+  label,
+  rootColor,
+}: FnRingProgressProps) {
+  return (
+    <RingProgress
+      sections={sections}
+      size={size}
+      thickness={thickness}
+      label={label}
+      rootColor={rootColor}
+    />
+  )
+}
+
+export { FnRingProgress }
+export type { FnRingProgressProps }
diff --git a/frontend/functions/ui/search_bar.md b/frontend/functions/ui/search_bar.md
index 343c3cf1..5ee95983 100644
--- a/frontend/functions/ui/search_bar.md
+++ b/frontend/functions/ui/search_bar.md
@@ -8,12 +8,12 @@ purity: impure
 signature: "SearchBar(props: SearchBarProps): JSX.Element"
 description: "Search input with debounce, search icon, and clear button"
 tags: [component, ui, search, input, debounce]
-uses_functions: [cn_ts_core]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: ["lucide-react"]
+imports: ["@mantine/core", "@tabler/icons-react"]
 params:
   - name: onSearch
     desc: "Callback que se ejecuta con la query debounceada"
diff --git a/frontend/functions/ui/search_bar.tsx b/frontend/functions/ui/search_bar.tsx
index 450096f5..8137bb01 100644
--- a/frontend/functions/ui/search_bar.tsx
+++ b/frontend/functions/ui/search_bar.tsx
@@ -1,25 +1,21 @@
-import * as React from "react"
-import { cn } from "../core/cn"
-import { Search, X } from "lucide-react"
+import * as React from 'react'
+import { TextInput, CloseButton } from '@mantine/core'
+import { IconSearch } from '@tabler/icons-react'
 
 interface SearchBarProps {
-  /** Called with the debounced search query */
   onSearch: (query: string) => void
-  /** Placeholder text */
   placeholder?: string
-  /** Debounce delay in ms (default 300) */
   debounceMs?: number
-  /** Additional CSS classes for the outer wrapper */
   className?: string
 }
 
 function SearchBar({
   onSearch,
-  placeholder = "Search...",
+  placeholder = 'Search...',
   debounceMs = 300,
   className,
 }: SearchBarProps) {
-  const [query, setQuery] = React.useState("")
+  const [query, setQuery] = React.useState('')
   const timerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
   const onSearchRef = React.useRef(onSearch)
   onSearchRef.current = onSearch
@@ -35,29 +31,17 @@ function SearchBar({
   }, [query, debounceMs])
 
   return (
-    <div
-      className={cn(
-        "flex flex-1 items-center gap-2 rounded border border-border bg-input px-2 py-1",
-        className,
-      )}
-    >
-      <Search size={14} className="text-muted-foreground shrink-0" />
-      <input
-        value={query}
-        onChange={(e) => setQuery(e.target.value)}
-        placeholder={placeholder}
-        className="flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground"
-      />
-      {query && (
-        <button
-          onClick={() => setQuery("")}
-          className="p-0.5 text-muted-foreground hover:text-foreground"
-          aria-label="Clear search"
-        >
-          <X size={12} />
-        </button>
-      )}
-    </div>
+    <TextInput
+      value={query}
+      onChange={(e) => setQuery(e.currentTarget.value)}
+      placeholder={placeholder}
+      leftSection={<IconSearch size={14} />}
+      rightSection={query ? (
+        <CloseButton size="sm" onClick={() => setQuery('')} aria-label="Clear search" />
+      ) : undefined}
+      className={className}
+      size="sm"
+    />
   )
 }
 
diff --git a/frontend/functions/ui/segmented_control.md b/frontend/functions/ui/segmented_control.md
new file mode 100644
index 00000000..1b3e55a9
--- /dev/null
+++ b/frontend/functions/ui/segmented_control.md
@@ -0,0 +1,71 @@
+---
+name: segmented_control
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "FnSegmentedControl(props: FnSegmentedControlProps): JSX.Element"
+description: "Control segmentado para seleccion unica entre opciones. Wrapper sobre Mantine SegmentedControl."
+tags: [mantine, segmented, toggle, tabs, selection, component, ui]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core"]
+framework: react
+props:
+  - name: data
+    type: "{ value: string; label: string }[]"
+    required: true
+    description: "Opciones del control segmentado"
+  - name: value
+    type: "string"
+    required: false
+    description: "Valor seleccionado actualmente"
+  - name: onChange
+    type: "(value: string) => void"
+    required: false
+    description: "Callback cuando cambia la seleccion"
+  - name: fullWidth
+    type: "boolean"
+    required: false
+    description: "Ocupa todo el ancho disponible, default false"
+  - name: size
+    type: "MantineSize"
+    required: false
+    description: "Tamano del control, default sm"
+  - name: color
+    type: "MantineColor"
+    required: false
+    description: "Color del segmento activo"
+output: "Control segmentado con animacion de slide entre opciones"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/segmented_control.tsx"
+emits: []
+has_state: false
+variant: []
+---
+
+## Ejemplo
+
+```tsx
+import { FnSegmentedControl } from '@fn_library'
+
+<FnSegmentedControl
+  value={view}
+  onChange={setView}
+  data={[
+    { value: 'table', label: 'Tabla' },
+    { value: 'chart', label: 'Grafico' },
+    { value: 'map', label: 'Mapa' },
+  ]}
+/>
+```
+
+## Notas
+
+Wrapper sobre Mantine `SegmentedControl`. Alternativa a tabs para seleccion compacta entre pocas opciones. La animacion de slide es nativa de Mantine.
diff --git a/frontend/functions/ui/segmented_control.tsx b/frontend/functions/ui/segmented_control.tsx
new file mode 100644
index 00000000..d35f78ca
--- /dev/null
+++ b/frontend/functions/ui/segmented_control.tsx
@@ -0,0 +1,39 @@
+import { SegmentedControl } from '@mantine/core'
+import type { MantineSize, MantineColor } from '@mantine/core'
+
+interface SegmentedItem {
+  value: string
+  label: string
+}
+
+interface FnSegmentedControlProps {
+  data: SegmentedItem[]
+  value?: string
+  onChange?: (value: string) => void
+  fullWidth?: boolean
+  size?: MantineSize
+  color?: MantineColor
+}
+
+function FnSegmentedControl({
+  data,
+  value,
+  onChange,
+  fullWidth = false,
+  size = 'sm',
+  color,
+}: FnSegmentedControlProps) {
+  return (
+    <SegmentedControl
+      data={data}
+      value={value}
+      onChange={onChange}
+      fullWidth={fullWidth}
+      size={size}
+      color={color}
+    />
+  )
+}
+
+export { FnSegmentedControl }
+export type { FnSegmentedControlProps, SegmentedItem }
diff --git a/frontend/functions/ui/select.md b/frontend/functions/ui/select.md
index 47165272..8043da9f 100644
--- a/frontend/functions/ui/select.md
+++ b/frontend/functions/ui/select.md
@@ -3,67 +3,104 @@ name: select
 kind: component
 lang: ts
 domain: ui
-version: "1.0.0"
+version: "2.0.0"
 purity: impure
-signature: "Select<T>(props: SelectRootProps<T>): JSX.Element"
-description: "Select genérico accesible con grupos, separadores y animaciones. Base-UI primitive con posicionamiento automático."
-tags: [select, form, dropdown, component, ui, interactive]
-uses_functions: [cn_ts_core]
+signature: "Select(props: SelectProps): JSX.Element"
+description: "Select dropdown con búsqueda, grupos y accesibilidad. Wrapper sobre Mantine Select con API declarativa via prop data."
+tags: [select, form, dropdown, component, ui, interactive, mantine]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: ["@base-ui/react", lucide-react, react]
-output: "Componente Select que renderiza dropdown genérico accesible con grupos, separadores y posicionamiento automático"
+imports: ["@mantine/core"]
+output: "Componente Select que renderiza dropdown searchable con soporte para opciones planas, agrupadas y custom render"
 tested: false
 tests: []
 test_file_path: ""
 file_path: "frontend/functions/ui/select.tsx"
 props:
+  - name: data
+    type: "string[] | { value: string; label: string; disabled?: boolean }[] | { group: string; items: ... }[]"
+    required: true
+    description: "Opciones del select — strings, objetos {value,label}, o grupos"
   - name: value
-    type: "T"
+    type: "string | null"
     required: false
     description: "Valor seleccionado (controlled)"
-  - name: onValueChange
-    type: "(value: T) => void"
+  - name: onChange
+    type: "(value: string | null) => void"
     required: false
     description: "Callback al cambiar selección"
   - name: defaultValue
-    type: "T"
+    type: "string | null"
     required: false
     description: "Valor inicial (uncontrolled)"
+  - name: placeholder
+    type: "string"
+    required: false
+    description: "Texto cuando no hay selección"
+  - name: label
+    type: "string"
+    required: false
+    description: "Label del campo"
+  - name: searchable
+    type: "boolean"
+    required: false
+    description: "Permite buscar entre opciones"
+  - name: clearable
+    type: "boolean"
+    required: false
+    description: "Permite limpiar la selección"
   - name: disabled
     type: "boolean"
     required: false
     description: "Deshabilitar el select"
-emits: [onValueChange]
+  - name: size
+    type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+    required: false
+    description: "Tamaño del componente"
+emits: [onChange]
 has_state: true
 framework: react
 variant: [default]
-source_repo: "https://gitea-dgg044oo04woo4ggcsws4gk0.organic-machine.com/Bl4cksmith/Frontend_Library"
-source_license: "MIT"
-source_file: "frontend/src/components/ui/select.tsx"
 ---
 
 ## Ejemplo
 
 ```tsx
-<Select>
-  <SelectTrigger><SelectValue placeholder="Elegir..." /></SelectTrigger>
-  <SelectContent>
-    <SelectGroup>
-      <SelectGroupLabel>Frutas</SelectGroupLabel>
-      <SelectItem value="apple">Manzana</SelectItem>
-      <SelectItem value="banana">Banana</SelectItem>
-    </SelectGroup>
-    <SelectSeparator />
-    <SelectItem value="other">Otro</SelectItem>
-  </SelectContent>
-</Select>
+import { Select } from '@fn_library'
+
+// Opciones simples (strings)
+<Select
+  label="Tu librería favorita"
+  placeholder="Elige una"
+  data={['React', 'Angular', 'Vue', 'Svelte']}
+/>
+
+// Opciones con value/label
+<Select
+  value={selected}
+  onChange={setSelected}
+  data={[
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+  ]}
+/>
+
+// Con grupos
+<Select
+  searchable
+  data={[
+    { group: 'Frontend', items: [{ value: 'react', label: 'React' }] },
+    { group: 'Backend', items: [{ value: 'node', label: 'Node.js' }] },
+  ]}
+/>
 ```
 
 ## Notas
 
-Exporta 9 subcomponentes composables: Select, SelectTrigger, SelectValue, SelectPortal, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator.
-Genérico sobre el tipo de valor T — TypeScript infiere el tipo desde el prop value/defaultValue.
-Depende de @base-ui/react y lucide-react.
+- Wrapper directo sobre `Select` de `@mantine/core` v9. Todas las props de Mantine Select son válidas.
+- Soporta `searchable` para filtrar opciones, `clearable` para limpiar, `allowDeselect` para deseleccionar.
+- Data acepta: `string[]`, `{ value, label }[]`, o `{ group, items }[]`.
+- Reemplaza al antiguo `select.tsx` basado en NativeSelect con sub-componentes stub.
diff --git a/frontend/functions/ui/select.tsx b/frontend/functions/ui/select.tsx
index 5a80d558..d9824d8a 100644
--- a/frontend/functions/ui/select.tsx
+++ b/frontend/functions/ui/select.tsx
@@ -1,91 +1,10 @@
-"use client"
+import { Select as MantineSelect, type SelectProps as MantineSelectProps } from '@mantine/core'
 
-import * as React from "react"
-import { cn } from "../core/cn"
-import { ChevronDown } from "lucide-react"
+interface SelectProps extends MantineSelectProps {}
 
-// ── Native select wrapper ─────────────────────────────────────────────────
-
-interface SelectProps extends React.ComponentPropsWithoutRef<"select"> {
-  placeholder?: string
+function Select(props: SelectProps) {
+  return <MantineSelect {...props} />
 }
 
-const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
-  ({ className, children, placeholder, ...props }, ref) => {
-    return (
-      <div className="relative">
-        <select
-          ref={ref}
-          data-slot="select"
-          className={cn(
-            "flex h-8 w-full appearance-none items-center rounded-lg border border-input bg-transparent px-2.5 pr-8 py-1 text-sm transition-colors outline-none",
-            "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
-            "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-            "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
-            className,
-          )}
-          {...props}
-        >
-          {placeholder && (
-            <option value="" disabled>
-              {placeholder}
-            </option>
-          )}
-          {children}
-        </select>
-        <ChevronDown className="pointer-events-none absolute right-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-      </div>
-    )
-  },
-)
-Select.displayName = "Select"
-
-// ── Sub-components (thin wrappers for API compatibility) ──────────────────
-
-function SelectItem({
-  className,
-  ...props
-}: React.ComponentPropsWithoutRef<"option">) {
-  return <option className={className} {...props} />
-}
-
-function SelectGroup({
-  className,
-  ...props
-}: React.ComponentPropsWithoutRef<"optgroup">) {
-  return <optgroup className={className} {...props} />
-}
-
-function SelectGroupLabel(_props: { children?: React.ReactNode }) {
-  // optgroup uses `label` attr, this is a no-op for compatibility
-  return null
-}
-
-// Stubs for barrel export compatibility — these are no-ops with native select
-function SelectContent({ children }: { children?: React.ReactNode; className?: string }) {
-  return <>{children}</>
-}
-function SelectTrigger({ children }: { children?: React.ReactNode; className?: string }) {
-  return <>{children}</>
-}
-function SelectValue(_props: { placeholder?: string }) {
-  return null
-}
-function SelectPortal({ children }: { children?: React.ReactNode }) {
-  return <>{children}</>
-}
-function SelectSeparator({ className, ...props }: React.ComponentProps<"div">) {
-  return <div className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
-}
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectGroupLabel,
-  SelectItem,
-  SelectPortal,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-}
+export { Select }
+export type { SelectProps }
diff --git a/frontend/functions/ui/settings_page.md b/frontend/functions/ui/settings_page.md
index 797be63a..dc01a0fa 100644
--- a/frontend/functions/ui/settings_page.md
+++ b/frontend/functions/ui/settings_page.md
@@ -8,12 +8,12 @@ purity: pure
 signature: "settingsPage(props: SettingsPageProps): ReactElement"
 description: "Genera una página de configuración con navegación lateral, secciones y campos de formulario (text, number, toggle, select, textarea)."
 tags: [settings, page, form, sections, factory, composition, ui]
-uses_functions: [cn_ts_core]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: [react]
+imports: [react, "@mantine/core"]
 params:
   - name: props
     desc: "Configuración: título, secciones con campos (text, number, toggle, select, textarea) y callback onSave"
diff --git a/frontend/functions/ui/settings_page.tsx b/frontend/functions/ui/settings_page.tsx
index 3115c945..27aa255e 100644
--- a/frontend/functions/ui/settings_page.tsx
+++ b/frontend/functions/ui/settings_page.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cn } from '../core/cn'
+import { Stack, Group, Title, Text, Paper, TextInput, Textarea, Switch, NativeSelect, Button, Box, Anchor } from '@mantine/core'
 
 interface SettingField {
   key: string
@@ -31,81 +31,92 @@ export function settingsPage({
   subtitle,
   sections,
   onSave,
-  className,
 }: SettingsPageProps): React.ReactElement {
   return (
-    <div className={cn('space-y-6', className)}>
+    <Stack gap="lg">
       {/* Header */}
-      <div className="border-b pb-4">
-        <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
-        {subtitle && <p className="text-sm text-muted-foreground">{subtitle}</p>}
-      </div>
+      <Box pb="md" style={{ borderBottom: '1px solid var(--mantine-color-default-border)' }}>
+        <Title order={2}>{title}</Title>
+        {subtitle && <Text size="sm" c="dimmed">{subtitle}</Text>}
+      </Box>
 
-      {/* Tabs navigation */}
-      <div className="flex gap-6">
-        <nav className="hidden w-48 shrink-0 md:block">
-          <div className="space-y-1">
+      {/* Content with sidebar nav */}
+      <Group align="flex-start" gap="xl">
+        <Box w={192} visibleFrom="md" style={{ flexShrink: 0 }}>
+          <Stack gap={4}>
             {sections.map((section) => (
-              <a
+              <Anchor
                 key={section.id}
                 href={`#${section.id}`}
-                className="block rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
+                underline="never"
+                size="sm"
+                fw={500}
+                c="dimmed"
+                py={6}
+                px="sm"
+                style={{ display: 'block', borderRadius: 'var(--mantine-radius-sm)' }}
               >
                 {section.title}
-              </a>
+              </Anchor>
             ))}
-          </div>
-        </nav>
+          </Stack>
+        </Box>
 
         {/* Sections */}
-        <div className="flex-1 space-y-8">
+        <Stack gap="xl" style={{ flex: 1 }}>
           {sections.map((section) => (
-            <div key={section.id} id={section.id} className="space-y-4">
-              <div>
-                <h2 className="text-lg font-medium">{section.title}</h2>
-                {section.description && <p className="text-sm text-muted-foreground">{section.description}</p>}
-              </div>
-              <div className="space-y-4 rounded-lg border p-4">
-                {section.fields.map((field) => (
-                  <div key={field.key} className="flex flex-col gap-1.5 sm:flex-row sm:items-center sm:justify-between">
-                    <div className="space-y-0.5">
-                      <label className="text-sm font-medium">{field.label}</label>
-                      {field.description && <p className="text-xs text-muted-foreground">{field.description}</p>}
-                    </div>
-                    <div className="w-full sm:w-64">
-                      {field.type === 'toggle' ? (
-                        <button className={cn(
-                          'relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors',
-                          field.value ? 'bg-primary' : 'bg-input'
-                        )}>
-                          <span className={cn('pointer-events-none block size-4 rounded-full bg-background shadow-lg ring-0 transition-transform', field.value ? 'translate-x-4' : 'translate-x-0')} />
-                        </button>
-                      ) : field.type === 'select' ? (
-                        <select className="h-8 w-full rounded-lg border border-input bg-transparent px-2.5 text-sm">
-                          {field.options?.map((opt) => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
-                        </select>
-                      ) : field.type === 'textarea' ? (
-                        <textarea className="w-full rounded-lg border border-input bg-transparent px-2.5 py-1.5 text-sm" rows={3} placeholder={field.placeholder} defaultValue={String(field.value ?? '')} />
-                      ) : (
-                        <input type={field.type} className="h-8 w-full rounded-lg border border-input bg-transparent px-2.5 text-sm" placeholder={field.placeholder} defaultValue={String(field.value ?? '')} />
-                      )}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
+            <Stack key={section.id} id={section.id} gap="md">
+              <Box>
+                <Text size="lg" fw={500}>{section.title}</Text>
+                {section.description && <Text size="sm" c="dimmed">{section.description}</Text>}
+              </Box>
+              <Paper withBorder p="md" radius="md">
+                <Stack gap="md">
+                  {section.fields.map((field) => (
+                    <Group key={field.key} justify="space-between" align="center" wrap="wrap" gap="md">
+                      <Stack gap={2} style={{ flex: '1 1 auto' }}>
+                        <Text size="sm" fw={500}>{field.label}</Text>
+                        {field.description && <Text size="xs" c="dimmed">{field.description}</Text>}
+                      </Stack>
+                      <Box w={{ base: '100%', sm: 256 }}>
+                        {field.type === 'toggle' ? (
+                          <Switch defaultChecked={!!field.value} />
+                        ) : field.type === 'select' ? (
+                          <NativeSelect
+                            data={field.options?.map(o => ({ label: o.label, value: o.value })) ?? []}
+                            size="xs"
+                          />
+                        ) : field.type === 'textarea' ? (
+                          <Textarea
+                            rows={3}
+                            placeholder={field.placeholder}
+                            defaultValue={String(field.value ?? '')}
+                            size="xs"
+                          />
+                        ) : (
+                          <TextInput
+                            type={field.type}
+                            placeholder={field.placeholder}
+                            defaultValue={String(field.value ?? '')}
+                            size="xs"
+                          />
+                        )}
+                      </Box>
+                    </Group>
+                  ))}
+                </Stack>
+              </Paper>
+            </Stack>
           ))}
 
           {onSave && (
-            <div className="flex justify-end border-t pt-4">
-              <button className="inline-flex h-8 items-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/80">
-                Save changes
-              </button>
-            </div>
+            <Group justify="flex-end" pt="md" style={{ borderTop: '1px solid var(--mantine-color-default-border)' }}>
+              <Button size="xs">Save changes</Button>
+            </Group>
           )}
-        </div>
-      </div>
-    </div>
+        </Stack>
+      </Group>
+    </Stack>
   )
 }
 
diff --git a/frontend/functions/ui/sheet.md b/frontend/functions/ui/sheet.md
index 9aa45b43..34ea2ebf 100644
--- a/frontend/functions/ui/sheet.md
+++ b/frontend/functions/ui/sheet.md
@@ -6,15 +6,15 @@ domain: ui
 version: "1.0.0"
 purity: impure
 signature: "Sheet(props: SheetProps): JSX.Element"
-description: "Panel lateral deslizante (drawer) accesible con variantes de lado y animaciones. Base-UI Dialog con posicionamiento lateral via CVA."
-tags: [sheet, drawer, panel, component, ui, interactive, overlay, base-ui, cva]
-uses_functions: [cn_ts_core]
+description: "Panel lateral deslizante (drawer) accesible con variantes de lado y animaciones. Mantine Drawer."
+tags: [sheet, drawer, panel, component, ui, interactive, overlay, mantine]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: ["@base-ui/react/dialog", "class-variance-authority", "lucide-react"]
-output: "Componente Sheet que renderiza panel deslizante lateral accesible con animaciones"
+imports: ["@mantine/core", react]
+output: "Componente Sheet que renderiza panel deslizante lateral accesible con animaciones via Mantine Drawer"
 tested: false
 tests: []
 test_file_path: ""
@@ -69,4 +69,4 @@ variant: [top, bottom, left, right]
 
 ## Notas
 
-Reutiliza Base-UI Dialog para el comportamiento modal. Las animaciones de deslizamiento usan slide-in-from-* de Tailwind. CVA gestiona las variantes de lado. Exports: Sheet, SheetTrigger, SheetContent, SheetClose, SheetPortal, SheetOverlay, SheetHeader, SheetFooter, SheetTitle, SheetDescription.
+Reutiliza Mantine Drawer para el comportamiento modal y animaciones. SheetPortal y SheetOverlay son no-ops mantenidos por compatibilidad. Exports: Sheet, SheetTrigger, SheetContent, SheetClose, SheetPortal, SheetOverlay, SheetHeader, SheetFooter, SheetTitle, SheetDescription.
diff --git a/frontend/functions/ui/sheet.tsx b/frontend/functions/ui/sheet.tsx
index cd0b9f36..66cf3c3f 100644
--- a/frontend/functions/ui/sheet.tsx
+++ b/frontend/functions/ui/sheet.tsx
@@ -1,118 +1,143 @@
-import * as React from "react"
-import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
-import { cva, type VariantProps } from "class-variance-authority"
-import { XIcon } from "lucide-react"
-import { cn } from "../core/cn"
+import * as React from 'react'
+import { Drawer, Box, Text, Group } from '@mantine/core'
 
-function Sheet({ ...props }: DialogPrimitive.Root.Props) {
-  return <DialogPrimitive.Root data-slot="sheet" {...props} />
+type SheetSide = 'top' | 'bottom' | 'left' | 'right'
+
+interface SheetProps {
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  children: React.ReactNode
 }
 
-function SheetTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
-  return <DialogPrimitive.Trigger data-slot="sheet-trigger" {...props} />
-}
-
-function SheetClose({ ...props }: DialogPrimitive.Close.Props) {
-  return <DialogPrimitive.Close data-slot="sheet-close" {...props} />
-}
-
-function SheetPortal({ ...props }: DialogPrimitive.Portal.Props) {
-  return <DialogPrimitive.Portal data-slot="sheet-portal" {...props} />
-}
-
-function SheetOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {
-  return (
-    <DialogPrimitive.Backdrop
-      data-slot="sheet-overlay"
-      className={cn(
-        "fixed inset-0 z-50 bg-black/50",
-        "data-open:animate-in data-open:fade-in-0",
-        "data-closed:animate-out data-closed:fade-out-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-const sheetVariants = cva(
-  "fixed z-50 flex flex-col gap-4 bg-background p-6 shadow-lg transition ease-in-out",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b data-open:animate-in data-open:slide-in-from-top data-closed:animate-out data-closed:slide-out-to-top",
-        bottom: "inset-x-0 bottom-0 border-t data-open:animate-in data-open:slide-in-from-bottom data-closed:animate-out data-closed:slide-out-to-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-open:animate-in data-open:slide-in-from-left data-closed:animate-out data-closed:slide-out-to-left sm:max-w-sm",
-        right: "inset-y-0 right-0 h-full w-3/4 border-l data-open:animate-in data-open:slide-in-from-right data-closed:animate-out data-closed:slide-out-to-right sm:max-w-sm",
-      },
-    },
-    defaultVariants: { side: "right" },
-  }
-)
-
-interface SheetContentProps
-  extends DialogPrimitive.Popup.Props,
-    VariantProps<typeof sheetVariants> {
+interface SheetContentProps extends React.ComponentProps<'div'> {
+  side?: SheetSide
   showCloseButton?: boolean
+  children?: React.ReactNode
 }
 
-function SheetContent({ className, children, side = "right", showCloseButton = true, ...props }: SheetContentProps) {
+const SheetContext = React.createContext<{
+  open: boolean
+  setOpen: (open: boolean) => void
+}>({ open: false, setOpen: () => {} })
+
+function Sheet({ open: controlledOpen, onOpenChange, children }: SheetProps) {
+  const [internalOpen, setInternalOpen] = React.useState(false)
+  const open = controlledOpen ?? internalOpen
+  const setOpen = React.useCallback(
+    (v: boolean) => {
+      onOpenChange?.(v)
+      if (controlledOpen === undefined) setInternalOpen(v)
+    },
+    [controlledOpen, onOpenChange],
+  )
   return (
-    <SheetPortal>
-      <SheetOverlay />
-      <DialogPrimitive.Popup
-        data-slot="sheet-content"
-        className={cn(sheetVariants({ side }), className)}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="sheet-close-button"
-            className="absolute top-4 right-4 inline-flex size-7 items-center justify-center rounded-md opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            <XIcon className="size-4" />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Popup>
-    </SheetPortal>
+    <SheetContext.Provider value={{ open, setOpen }}>
+      {children}
+    </SheetContext.Provider>
   )
 }
 
-function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return <div data-slot="sheet-header" className={cn("flex flex-col gap-1.5", className)} {...props} />
+function SheetTrigger({ children, ...props }: React.ComponentProps<'button'>) {
+  const { setOpen } = React.useContext(SheetContext)
+  return (
+    <button type="button" data-slot="sheet-trigger" onClick={() => setOpen(true)} {...props}>
+      {children}
+    </button>
+  )
 }
 
-function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+function SheetClose({ children, ...props }: React.ComponentProps<'button'>) {
+  const { setOpen } = React.useContext(SheetContext)
   return (
-    <div
+    <button type="button" data-slot="sheet-close" onClick={() => setOpen(false)} {...props}>
+      {children}
+    </button>
+  )
+}
+
+function SheetPortal({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
+}
+
+function SheetOverlay() {
+  return null
+}
+
+const sizeMap: Record<SheetSide, string> = {
+  left: 'sm',
+  right: 'sm',
+  top: 'md',
+  bottom: 'md',
+}
+
+function SheetContent({ side = 'right', showCloseButton = true, children, className, ...props }: SheetContentProps) {
+  const { open, setOpen } = React.useContext(SheetContext)
+  return (
+    <Drawer
+      opened={open}
+      onClose={() => setOpen(false)}
+      position={side}
+      withCloseButton={showCloseButton}
+      size={sizeMap[side]}
+      padding="md"
+      data-slot="sheet-content"
+      className={className}
+      {...props}
+    >
+      {children}
+    </Drawer>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return <Box data-slot="sheet-header" mb="xs" className={className} {...props} />
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <Group
       data-slot="sheet-footer"
-      className={cn("mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      justify="flex-end"
+      gap="sm"
+      mt="auto"
+      pt="sm"
+      className={className}
       {...props}
     />
   )
 }
 
-function SheetTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+function SheetTitle({ className, children, ...props }: React.ComponentProps<'div'>) {
   return (
-    <DialogPrimitive.Title
+    <Text
+      component="div"
       data-slot="sheet-title"
-      className={cn("text-base font-semibold leading-none", className)}
+      fw={600}
+      size="md"
+      className={className}
       {...props}
-    />
+    >
+      {children}
+    </Text>
   )
 }
 
-function SheetDescription({ className, ...props }: DialogPrimitive.Description.Props) {
+function SheetDescription({ className, children, ...props }: React.ComponentProps<'div'>) {
   return (
-    <DialogPrimitive.Description
+    <Text
+      component="div"
       data-slot="sheet-description"
-      className={cn("text-sm text-muted-foreground", className)}
+      size="sm"
+      c="dimmed"
+      className={className}
       {...props}
-    />
+    >
+      {children}
+    </Text>
   )
 }
 
+const sheetVariants = {} as const
+
 export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, sheetVariants }
 export type { SheetContentProps }
diff --git a/frontend/functions/ui/simple_select.md b/frontend/functions/ui/simple_select.md
index 519b05c8..62adfd42 100644
--- a/frontend/functions/ui/simple_select.md
+++ b/frontend/functions/ui/simple_select.md
@@ -8,12 +8,12 @@ purity: impure
 signature: "SimpleSelect(props: SimpleSelectProps): JSX.Element"
 description: "Select simplificado que acepta un array plano o agrupado de opciones. Wrapper sobre Select con API declarativa."
 tags: [select, dropdown, form, component, ui, simple]
-uses_functions: [cn_ts_core, select_ts_ui]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: [react]
+imports: ["@mantine/core"]
 output: "Componente SimpleSelect que renderiza dropdown simplificado con soporte para opciones planas o agrupadas"
 tested: false
 tests: []
diff --git a/frontend/functions/ui/simple_select.tsx b/frontend/functions/ui/simple_select.tsx
index 8eb1a2b9..4fc69853 100644
--- a/frontend/functions/ui/simple_select.tsx
+++ b/frontend/functions/ui/simple_select.tsx
@@ -1,8 +1,4 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "../core/cn"
-import { ChevronDown } from "lucide-react"
+import { NativeSelect } from '@mantine/core'
 
 export interface SimpleSelectOption {
   value: string
@@ -23,69 +19,55 @@ interface SimpleSelectProps {
   options: SimpleSelectOptions
   placeholder?: string
   disabled?: boolean
-  size?: "sm" | "default"
+  size?: 'sm' | 'default'
   className?: string
 }
 
 function isGrouped(
   options: SimpleSelectOptions,
 ): options is SimpleSelectGroup[] {
-  return options.length > 0 && "group" in options[0]
+  return options.length > 0 && options[0] != null && 'group' in options[0]
+}
+
+function toMantineData(options: SimpleSelectOptions, placeholder?: string) {
+  const data: Array<{ value: string; label: string; disabled?: boolean } | { group: string; items: Array<{ value: string; label: string; disabled?: boolean }> }> = []
+
+  if (placeholder) {
+    data.push({ value: '', label: placeholder, disabled: true })
+  }
+
+  if (isGrouped(options)) {
+    for (const g of options) {
+      data.push({ group: g.group, items: g.items })
+    }
+  } else {
+    for (const item of options) {
+      data.push(item)
+    }
+  }
+
+  return data
 }
 
 function SimpleSelect({
   value,
   onValueChange,
   options,
-  placeholder = "Select...",
+  placeholder = 'Select...',
   disabled = false,
-  size = "default",
+  size = 'default',
   className,
 }: SimpleSelectProps) {
   return (
-    <div className={cn("relative", className)}>
-      <select
-        value={value}
-        onChange={(e) => onValueChange(e.target.value)}
-        disabled={disabled}
-        className={cn(
-          "flex w-full appearance-none items-center rounded-lg border border-input bg-transparent px-2.5 pr-8 text-sm transition-colors outline-none",
-          "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
-          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-          size === "sm" ? "h-7 text-xs px-2" : "h-8 py-1",
-        )}
-      >
-        {placeholder && !value && (
-          <option value="" disabled>
-            {placeholder}
-          </option>
-        )}
-        {isGrouped(options)
-          ? options.map((g) => (
-              <optgroup key={g.group} label={g.group}>
-                {g.items.map((item) => (
-                  <option
-                    key={item.value}
-                    value={item.value}
-                    disabled={item.disabled}
-                  >
-                    {item.label}
-                  </option>
-                ))}
-              </optgroup>
-            ))
-          : (options as SimpleSelectOption[]).map((item) => (
-              <option
-                key={item.value}
-                value={item.value}
-                disabled={item.disabled}
-              >
-                {item.label}
-              </option>
-            ))}
-      </select>
-      <ChevronDown className="pointer-events-none absolute right-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-    </div>
+    <NativeSelect
+      value={value}
+      onChange={(e) => onValueChange(e.currentTarget.value)}
+      data={toMantineData(options, !value ? placeholder : undefined)}
+      disabled={disabled}
+      size={size === 'sm' ? 'xs' : 'sm'}
+      className={className}
+      styles={{ input: { cursor: 'pointer' } }}
+    />
   )
 }
 
diff --git a/frontend/functions/ui/skeleton.md b/frontend/functions/ui/skeleton.md
index bb42b046..8a3cd460 100644
--- a/frontend/functions/ui/skeleton.md
+++ b/frontend/functions/ui/skeleton.md
@@ -6,14 +6,14 @@ domain: ui
 version: "1.0.0"
 purity: impure
 signature: "Skeleton(props: HTMLAttributes<HTMLDivElement>): JSX.Element"
-description: "Sistema de loading skeletons: base, text, card, avatar, button, table. Variantes preconfiguradas para estados de carga."
-tags: [skeleton, loading, placeholder, component, ui]
-uses_functions: [cn_ts_core]
+description: "Sistema de loading skeletons: base, text, card, avatar, button, table. Variantes preconfiguradas para estados de carga. Mantine Skeleton."
+tags: [skeleton, loading, placeholder, component, ui, mantine]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: [react]
+imports: ["@mantine/core"]
 output: "Componente Skeleton que renderiza placeholder de carga con 6 variantes preconfiguradas (text, card, avatar, button, table)"
 tested: false
 tests: []
@@ -61,6 +61,6 @@ source_file: "frontend/src/components/ui/skeleton.tsx"
 
 ## Notas
 
-Exporta 6 variantes preconfiguradas. Todas componen sobre el Skeleton base con animate-pulse.
-La última línea de SkeletonText se acorta a w-4/5 para simular texto real.
-SkeletonCard incluye imagen (h-[180px]) + dos líneas de texto.
+Exporta 6 variantes preconfiguradas. Todas componen sobre Mantine Skeleton con animacion nativa.
+La ultima linea de SkeletonText se acorta a 80% para simular texto real.
+SkeletonCard incluye imagen (180px) + dos lineas de texto. SkeletonAvatar usa circle para forma redonda.
diff --git a/frontend/functions/ui/skeleton.tsx b/frontend/functions/ui/skeleton.tsx
index 0efb56ab..b5432174 100644
--- a/frontend/functions/ui/skeleton.tsx
+++ b/frontend/functions/ui/skeleton.tsx
@@ -1,53 +1,53 @@
 import * as React from "react"
-import { cn } from "../core/cn"
+import { Skeleton as MantineSkeleton, Group, Stack } from "@mantine/core"
 
-function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div data-slot="skeleton" className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />
+function Skeleton({ className, style, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <MantineSkeleton data-slot="skeleton" className={className} style={style} {...props} />
 }
 
 function SkeletonText({ className, lines = 3, ...props }: React.HTMLAttributes<HTMLDivElement> & { lines?: number }) {
   return (
-    <div className={cn("space-y-2", className)} {...props}>
+    <Stack gap="xs" className={className} data-slot="skeleton-text" {...props}>
       {Array.from({ length: lines }).map((_, i) => (
-        <Skeleton key={i} className={cn("h-4", i === lines - 1 ? "w-4/5" : "w-full")} />
+        <MantineSkeleton key={i} h={16} w={i === lines - 1 ? "80%" : "100%"} />
       ))}
-    </div>
+    </Stack>
   )
 }
 
 function SkeletonCard({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
-    <div className={cn("space-y-3", className)} {...props}>
-      <Skeleton className="h-[180px] w-full rounded-lg" />
-      <Skeleton className="h-4 w-3/4" />
-      <Skeleton className="h-4 w-1/2" />
-    </div>
+    <Stack gap="xs" className={className} data-slot="skeleton-card" {...props}>
+      <MantineSkeleton h={180} w="100%" radius="md" />
+      <MantineSkeleton h={16} w="75%" />
+      <MantineSkeleton h={16} w="50%" />
+    </Stack>
   )
 }
 
+const avatarSizeMap = { xs: 24, sm: 32, md: 40, lg: 48, xl: 64 }
+
 function SkeletonAvatar({ className, size = "md", ...props }: React.HTMLAttributes<HTMLDivElement> & { size?: "xs" | "sm" | "md" | "lg" | "xl" }) {
-  const sizeClasses = { xs: "size-6", sm: "size-8", md: "size-10", lg: "size-12", xl: "size-16" }
-  return <Skeleton className={cn("rounded-full", sizeClasses[size], className)} {...props} />
+  const px = avatarSizeMap[size]
+  return <MantineSkeleton data-slot="skeleton-avatar" circle h={px} w={px} className={className} {...props} />
 }
 
 function SkeletonButton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <Skeleton className={cn("h-8 w-24 rounded-lg", className)} {...props} />
+  return <MantineSkeleton data-slot="skeleton-button" h={32} w={96} radius="md" className={className} {...props} />
 }
 
 function SkeletonTable({ className, rows = 5, columns = 4, ...props }: React.HTMLAttributes<HTMLDivElement> & { rows?: number; columns?: number }) {
   return (
-    <div className={cn("space-y-3", className)} {...props}>
-      <div className="flex gap-4">
-        {Array.from({ length: columns }).map((_, i) => <Skeleton key={i} className="h-4 flex-1" />)}
-      </div>
-      <div className="space-y-2">
-        {Array.from({ length: rows }).map((_, rowIndex) => (
-          <div key={rowIndex} className="flex gap-4">
-            {Array.from({ length: columns }).map((_, colIndex) => <Skeleton key={colIndex} className="h-4 flex-1" />)}
-          </div>
-        ))}
-      </div>
-    </div>
+    <Stack gap="xs" className={className} data-slot="skeleton-table" {...props}>
+      <Group gap="sm">
+        {Array.from({ length: columns }).map((_, i) => <MantineSkeleton key={i} h={16} style={{ flex: 1 }} />)}
+      </Group>
+      {Array.from({ length: rows }).map((_, rowIndex) => (
+        <Group key={rowIndex} gap="sm">
+          {Array.from({ length: columns }).map((_, colIndex) => <MantineSkeleton key={colIndex} h={16} style={{ flex: 1 }} />)}
+        </Group>
+      ))}
+    </Stack>
   )
 }
 
diff --git a/frontend/functions/ui/slider.md b/frontend/functions/ui/slider.md
new file mode 100644
index 00000000..c7ffccb5
--- /dev/null
+++ b/frontend/functions/ui/slider.md
@@ -0,0 +1,122 @@
+---
+name: slider
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "Slider(props: SliderProps): JSX.Element | RangeSlider(props: RangeSliderProps): JSX.Element"
+description: "Deslizador de valor numérico con marcas, labels y modo rango. Incluye RangeSlider. Wrapper sobre Mantine Slider."
+tags: [slider, range, input, numeric, component, ui, mantine]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core"]
+output: "Componente Slider para selección de un valor numérico en un rango, o RangeSlider para selección de un intervalo [min, max]"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/slider.tsx"
+props:
+  - name: min
+    type: "number"
+    required: false
+    description: "Valor mínimo del rango (por defecto 0)"
+  - name: max
+    type: "number"
+    required: false
+    description: "Valor máximo del rango (por defecto 100)"
+  - name: step
+    type: "number"
+    required: false
+    description: "Incremento por paso al deslizar"
+  - name: marks
+    type: "{ value: number; label?: string }[]"
+    required: false
+    description: "Marcas en el track con etiquetas opcionales"
+  - name: value
+    type: "number"
+    required: false
+    description: "Valor actual del slider (controlled) — para RangeSlider es [number, number]"
+  - name: onChange
+    type: "(value: number) => void"
+    required: false
+    description: "Callback mientras se arrastra — para RangeSlider recibe [number, number]"
+  - name: onChangeEnd
+    type: "(value: number) => void"
+    required: false
+    description: "Callback al soltar el slider — para RangeSlider recibe [number, number]"
+  - name: label
+    type: "string | ((value: number) => string) | null"
+    required: false
+    description: "Tooltip sobre el thumb — función para formatear el valor"
+  - name: labelAlwaysOn
+    type: "boolean"
+    required: false
+    description: "Muestra el label siempre visible, no solo al hover"
+  - name: disabled
+    type: "boolean"
+    required: false
+    description: "Deshabilita la interacción"
+  - name: size
+    type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+    required: false
+    description: "Grosor del track y tamaño del thumb"
+  - name: color
+    type: "string"
+    required: false
+    description: "Color del track activo y el thumb"
+emits: [onChange, onChangeEnd]
+has_state: true
+framework: react
+variant: [default, range]
+---
+
+## Ejemplo
+
+```tsx
+import { Slider, RangeSlider } from '@fn_library'
+
+// Slider básico
+<Slider
+  value={volume}
+  onChange={setVolume}
+  min={0}
+  max={100}
+  step={5}
+/>
+
+// Con marcas y label formateado
+<Slider
+  value={price}
+  onChange={setPrice}
+  min={0}
+  max={1000}
+  step={50}
+  label={(v) => `$${v}`}
+  labelAlwaysOn
+  marks={[
+    { value: 0, label: '$0' },
+    { value: 500, label: '$500' },
+    { value: 1000, label: '$1000' },
+  ]}
+/>
+
+// RangeSlider para seleccionar intervalo
+<RangeSlider
+  value={priceRange}
+  onChange={setPriceRange}
+  min={0}
+  max={500}
+  onChangeEnd={(range) => fetchProducts(range)}
+/>
+```
+
+## Notas
+
+- Wrapper directo sobre `Slider` y `RangeSlider` de `@mantine/core` v9. Todas las props de Mantine son válidas.
+- `RangeSlider` recibe y emite `[number, number]` en lugar de `number`.
+- Usar `onChangeEnd` para operaciones costosas (fetch, cálculos) y `onChange` solo para actualizar UI.
+- `label={null}` desactiva el tooltip completamente.
diff --git a/frontend/functions/ui/slider.tsx b/frontend/functions/ui/slider.tsx
new file mode 100644
index 00000000..3caf9684
--- /dev/null
+++ b/frontend/functions/ui/slider.tsx
@@ -0,0 +1,16 @@
+import { Slider as MantineSlider, RangeSlider as MantineRangeSlider } from '@mantine/core'
+import type { SliderProps as MantineSliderProps, RangeSliderProps as MantineRangeSliderProps } from '@mantine/core'
+
+interface SliderProps extends MantineSliderProps {}
+interface RangeSliderProps extends MantineRangeSliderProps {}
+
+function Slider(props: SliderProps) {
+  return <MantineSlider {...props} />
+}
+
+function RangeSlider(props: RangeSliderProps) {
+  return <MantineRangeSlider {...props} />
+}
+
+export { Slider, RangeSlider }
+export type { SliderProps, RangeSliderProps }
diff --git a/frontend/functions/ui/sparkline.md b/frontend/functions/ui/sparkline.md
index aafced8d..aeea168f 100644
--- a/frontend/functions/ui/sparkline.md
+++ b/frontend/functions/ui/sparkline.md
@@ -8,7 +8,7 @@ purity: impure
 signature: "Sparkline(props: SparklineProps): JSX.Element"
 description: "Mini gráfico inline SVG puro (sin Recharts) con variantes line, area y bar. Para KPI cards y tablas."
 tags: [sparkline, chart, inline, svg, component, ui, visualization]
-uses_functions: [cn_ts_core]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
diff --git a/frontend/functions/ui/sparkline.tsx b/frontend/functions/ui/sparkline.tsx
index 75d09714..dc9ce9bf 100644
--- a/frontend/functions/ui/sparkline.tsx
+++ b/frontend/functions/ui/sparkline.tsx
@@ -1,40 +1,27 @@
 import * as React from 'react'
-import { cn } from '../core/cn'
+import { Sparkline as MantineSparkline } from '@mantine/charts'
 
 type SparklineVariant = 'line' | 'area' | 'bar'
 
-interface SparklineProps extends React.SVGAttributes<SVGSVGElement> {
+interface SparklineProps {
   data: number[]
   variant?: SparklineVariant
   color?: string
-  /** Per-bar colors for 'bar' variant. Cycles if shorter than data. */
   colors?: string[]
   width?: number
   height?: number
   strokeWidth?: number
   showLastPoint?: boolean
+  className?: string
 }
 
-function getPath(data: number[], width: number, height: number, padding: number = 2) {
-  if (data.length === 0) return { linePath: '', areaPath: '' }
-  const min = Math.min(...data)
-  const max = Math.max(...data)
-  const range = max - min || 1
-  const ew = width - padding * 2
-  const eh = height - padding * 2
-  const points = data.map((value, index) => ({
-    x: padding + (index / (data.length - 1)) * ew,
-    y: padding + eh - ((value - min) / range) * eh,
-  }))
-  const linePath = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ')
-  const areaPath = `${linePath} L ${points[points.length - 1].x} ${height - padding} L ${padding} ${height - padding} Z`
-  return { linePath, areaPath }
-}
-
-const Sparkline = React.forwardRef<SVGSVGElement, SparklineProps>(
-  ({ data, variant = 'line', color = 'currentColor', colors, width = 80, height = 24, strokeWidth = 1.5, showLastPoint = true, className, ...props }, ref) => {
-    if (data.length === 0) return <svg ref={ref} width={width} height={height} viewBox={`0 0 ${width} ${height}`} className={cn('text-primary', className)} {...props} />
+const Sparkline = React.forwardRef<HTMLDivElement, SparklineProps>(
+  ({ data, variant = 'line', color, colors, width = 80, height = 24, strokeWidth = 1.5, className, ...props }, ref) => {
+    if (data.length === 0) {
+      return <div ref={ref} style={{ width, height }} className={className} />
+    }
 
+    // Bar variant: use custom SVG (Mantine Sparkline only supports area)
     if (variant === 'bar') {
       const min = Math.min(...data, 0)
       const max = Math.max(...data)
@@ -42,31 +29,36 @@ const Sparkline = React.forwardRef<SVGSVGElement, SparklineProps>(
       const p = 2
       const eh = height - p * 2
       const bw = (width - p * 2) / data.length - 1
+      const barColor = color ?? 'currentColor'
       return (
-        <svg ref={ref} width={width} height={height} viewBox={`0 0 ${width} ${height}`} className={cn('text-primary', className)} {...props}>
-          {data.map((value, index) => {
-            const bh = ((value - min) / range) * eh
-            const x = p + index * ((width - p * 2) / data.length) + 0.5
-            const y = p + eh - bh
-            const barColor = colors ? colors[index % colors.length] : color
-            return <rect key={index} x={x} y={y} width={Math.max(bw, 1)} height={Math.max(bh, 1)} fill={barColor} rx={1} opacity={0.85} />
-          })}
-        </svg>
+        <div ref={ref} className={className} {...props}>
+          <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
+            {data.map((value, index) => {
+              const bh = ((value - min) / range) * eh
+              const x = p + index * ((width - p * 2) / data.length) + 0.5
+              const y = p + eh - bh
+              const fill = colors ? colors[index % colors.length] : barColor
+              return <rect key={index} x={x} y={y} width={Math.max(bw, 1)} height={Math.max(bh, 1)} fill={fill} rx={1} opacity={0.85} />
+            })}
+          </svg>
+        </div>
       )
     }
 
-    const { linePath, areaPath } = getPath(data, width, height)
-    const lastPoint = {
-      x: width - 2,
-      y: 2 + (height - 4) - ((data[data.length - 1] - Math.min(...data)) / (Math.max(...data) - Math.min(...data) || 1)) * (height - 4)
-    }
-
+    // Line/area: use Mantine Sparkline
     return (
-      <svg ref={ref} width={width} height={height} viewBox={`0 0 ${width} ${height}`} className={cn('text-primary', className)} {...props}>
-        {variant === 'area' && <path d={areaPath} fill={color} opacity={0.2} />}
-        <path d={linePath} fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" />
-        {showLastPoint && <circle cx={lastPoint.x} cy={lastPoint.y} r={2.5} fill={color} />}
-      </svg>
+      <div ref={ref} className={className} {...props}>
+        <MantineSparkline
+          data={data}
+          color={color ?? 'blue'}
+          w={width}
+          h={height}
+          strokeWidth={strokeWidth}
+          curveType="natural"
+          withGradient={variant === 'area'}
+          fillOpacity={variant === 'area' ? 0.3 : 0}
+        />
+      </div>
     )
   }
 )
diff --git a/frontend/functions/ui/stepper.md b/frontend/functions/ui/stepper.md
new file mode 100644
index 00000000..233f49b8
--- /dev/null
+++ b/frontend/functions/ui/stepper.md
@@ -0,0 +1,67 @@
+---
+name: stepper
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "FnStepper(props: FnStepperProps): JSX.Element"
+description: "Stepper de pasos con orientacion horizontal/vertical. Wrapper sobre Mantine Stepper."
+tags: [mantine, stepper, steps, wizard, component, ui]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core"]
+framework: react
+props:
+  - name: steps
+    type: "{ label: string; description?: string; icon?: ReactNode }[]"
+    required: true
+    description: "Definicion de cada paso del stepper"
+  - name: active
+    type: "number"
+    required: true
+    description: "Indice del paso activo (0-based)"
+  - name: onStepClick
+    type: "(step: number) => void"
+    required: false
+    description: "Callback al hacer click en un paso"
+  - name: orientation
+    type: "'horizontal' | 'vertical'"
+    required: false
+    description: "Orientacion del stepper, default horizontal"
+  - name: allowNextStepsSelect
+    type: "boolean"
+    required: false
+    description: "Permite seleccionar pasos futuros, default false"
+output: "Stepper con indicadores de paso, labels y descripciones opcionales"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/stepper.tsx"
+emits: []
+has_state: false
+variant: []
+---
+
+## Ejemplo
+
+```tsx
+import { FnStepper } from '@fn_library'
+
+<FnStepper
+  active={1}
+  onStepClick={setActive}
+  steps={[
+    { label: 'Configuracion' },
+    { label: 'Datos', description: 'Importar CSV' },
+    { label: 'Revision' },
+  ]}
+/>
+```
+
+## Notas
+
+Wrapper sobre Mantine `Stepper`. Recibe un array declarativo de pasos en vez de children manuales. Soporta iconos custom por paso.
diff --git a/frontend/functions/ui/stepper.tsx b/frontend/functions/ui/stepper.tsx
new file mode 100644
index 00000000..973a5ec0
--- /dev/null
+++ b/frontend/functions/ui/stepper.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react'
+import { Stepper } from '@mantine/core'
+
+interface StepDef {
+  label: string
+  description?: string
+  icon?: React.ReactNode
+}
+
+interface FnStepperProps {
+  steps: StepDef[]
+  active: number
+  onStepClick?: (step: number) => void
+  orientation?: 'horizontal' | 'vertical'
+  allowNextStepsSelect?: boolean
+}
+
+function FnStepper({
+  steps,
+  active,
+  onStepClick,
+  orientation = 'horizontal',
+  allowNextStepsSelect = false,
+}: FnStepperProps) {
+  return (
+    <Stepper
+      active={active}
+      onStepClick={onStepClick}
+      orientation={orientation}
+      allowNextStepsSelect={allowNextStepsSelect}
+    >
+      {steps.map((step, i) => (
+        <Stepper.Step
+          key={i}
+          label={step.label}
+          description={step.description}
+          icon={step.icon}
+        />
+      ))}
+    </Stepper>
+  )
+}
+
+export { FnStepper }
+export type { FnStepperProps, StepDef }
diff --git a/frontend/functions/ui/switch_toggle.md b/frontend/functions/ui/switch_toggle.md
index 4041dc94..0aac3aed 100644
--- a/frontend/functions/ui/switch_toggle.md
+++ b/frontend/functions/ui/switch_toggle.md
@@ -6,14 +6,14 @@ domain: ui
 version: "1.0.0"
 purity: impure
 signature: "SwitchToggle(props: SwitchToggleProps): JSX.Element"
-description: "Toggle on/off accesible con label opcional a izquierda o derecha. Base-UI Switch primitive."
-tags: [switch, toggle, component, ui, interactive, form, base-ui]
-uses_functions: [cn_ts_core]
+description: "Toggle on/off accesible con label opcional a izquierda o derecha. Mantine Switch."
+tags: [switch, toggle, component, ui, interactive, form, mantine]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: ["@base-ui/react/switch"]
+imports: ["@mantine/core"]
 output: "Componente SwitchToggle que renderiza switch on/off accesible con label opcional"
 tested: false
 tests: []
@@ -65,4 +65,4 @@ variant: []
 
 ## Notas
 
-Usa Base-UI Switch primitive. El thumb se traslada con translate-x via Tailwind. El id se genera con useId si no se provee para conectar el label.
+Usa Mantine Switch. Soporta labelPosition nativo de Mantine para posicionar el label a izquierda o derecha. El callback onCheckedChange se adapta desde el onChange nativo.
diff --git a/frontend/functions/ui/switch_toggle.tsx b/frontend/functions/ui/switch_toggle.tsx
index 7a2a9681..a0a7accc 100644
--- a/frontend/functions/ui/switch_toggle.tsx
+++ b/frontend/functions/ui/switch_toggle.tsx
@@ -1,64 +1,31 @@
-import * as React from "react"
-import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
-import { cn } from "../core/cn"
+import { Switch } from "@mantine/core"
 
-interface SwitchToggleProps extends SwitchPrimitive.Root.Props {
+interface SwitchToggleProps {
   label?: string
   labelPosition?: "left" | "right"
   className?: string
+  checked?: boolean
+  defaultChecked?: boolean
+  disabled?: boolean
+  onCheckedChange?: (checked: boolean) => void
+  id?: string
 }
 
-function SwitchToggle({ className, label, labelPosition = "right", id, ...props }: SwitchToggleProps) {
-  const internalId = React.useId()
-  const switchId = id ?? internalId
-
-  const switchEl = (
-    <SwitchPrimitive.Root
-      id={switchId}
-      data-slot="switch"
-      className={cn(
-        "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors outline-none",
-        "bg-input focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
-        "data-checked:bg-primary",
-        "disabled:pointer-events-none disabled:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      <SwitchPrimitive.Thumb
-        data-slot="switch-thumb"
-        className={cn(
-          "pointer-events-none block size-4 rounded-full bg-background shadow-sm ring-0 transition-transform",
-          "translate-x-0 data-checked:translate-x-4"
-        )}
-      />
-    </SwitchPrimitive.Root>
-  )
-
-  if (!label) return switchEl
-
+function SwitchToggle({ className, label, labelPosition = "right", id, checked, defaultChecked, disabled, onCheckedChange, ...props }: SwitchToggleProps) {
   return (
-    <div className="flex items-center gap-2">
-      {labelPosition === "left" && (
-        <label
-          htmlFor={switchId}
-          data-slot="switch-label"
-          className="text-sm font-medium leading-none cursor-pointer select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
-        >
-          {label}
-        </label>
-      )}
-      {switchEl}
-      {labelPosition === "right" && (
-        <label
-          htmlFor={switchId}
-          data-slot="switch-label"
-          className="text-sm font-medium leading-none cursor-pointer select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
-        >
-          {label}
-        </label>
-      )}
-    </div>
+    <Switch
+      id={id}
+      data-slot="switch"
+      label={label}
+      labelPosition={labelPosition}
+      checked={checked}
+      defaultChecked={defaultChecked}
+      disabled={disabled}
+      onChange={(event) => onCheckedChange?.(event.currentTarget.checked)}
+      className={className}
+      size="sm"
+      {...props}
+    />
   )
 }
 
diff --git a/frontend/functions/ui/tabs.md b/frontend/functions/ui/tabs.md
index 61bae4ca..03719cb2 100644
--- a/frontend/functions/ui/tabs.md
+++ b/frontend/functions/ui/tabs.md
@@ -6,14 +6,14 @@ domain: ui
 version: "1.0.0"
 purity: impure
 signature: "Tabs(props: TabsRootProps): JSX.Element"
-description: "Sistema de tabs con orientación horizontal/vertical, variantes default y line, y soporte para iconos. Base-UI primitive."
-tags: [tabs, navigation, component, ui, interactive]
-uses_functions: [cn_ts_core]
+description: "Sistema de tabs con orientacion horizontal/vertical, variantes default y line. Mantine Tabs."
+tags: [tabs, navigation, component, ui, interactive, mantine]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: ["@base-ui/react", class-variance-authority]
+imports: ["@mantine/core"]
 output: "Componente Tabs que renderiza sistema de navegación por tabs con orientación y variantes configurables"
 tested: false
 tests: []
diff --git a/frontend/functions/ui/tabs.tsx b/frontend/functions/ui/tabs.tsx
index 347e8bf0..e700a690 100644
--- a/frontend/functions/ui/tabs.tsx
+++ b/frontend/functions/ui/tabs.tsx
@@ -1,43 +1,55 @@
-import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "../core/cn"
+import * as React from "react"
+import { Tabs as MantineTabs } from "@mantine/core"
 
-function Tabs({ className, orientation = "horizontal", ...props }: TabsPrimitive.Root.Props) {
-  return (
-    <TabsPrimitive.Root data-slot="tabs" data-orientation={orientation} className={cn("group/tabs flex gap-2 data-horizontal:flex-col", className)} {...props} />
-  )
+interface TabsProps {
+  defaultValue?: string | null
+  value?: string | null
+  onTabChange?: (value: string | null) => void
+  orientation?: "horizontal" | "vertical"
+  variant?: "default" | "line"
+  className?: string
+  children?: React.ReactNode
 }
 
-const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
-  {
-    variants: {
-      variant: { default: "bg-muted", line: "gap-1 bg-transparent" },
-    },
-    defaultVariants: { variant: "default" },
-  }
-)
-
-function TabsList({ className, variant = "default", ...props }: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
-  return <TabsPrimitive.List data-slot="tabs-list" data-variant={variant} className={cn(tabsListVariants({ variant }), className)} {...props} />
-}
-
-function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+function Tabs({ className, orientation = "horizontal", variant = "default", defaultValue, value, onTabChange, children, ...props }: TabsProps) {
   return (
-    <TabsPrimitive.Tab
-      data-slot="tabs-trigger"
-      className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50",
-        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30",
-        className
-      )}
+    <MantineTabs
+      data-slot="tabs"
+      defaultValue={defaultValue}
+      value={value}
+      onChange={onTabChange}
+      orientation={orientation}
+      variant={variant === "line" ? "outline" : "default"}
+      className={className}
       {...props}
-    />
+    >
+      {children}
+    </MantineTabs>
   )
 }
 
-function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
-  return <TabsPrimitive.Panel data-slot="tabs-content" className={cn("flex-1 text-sm outline-none", className)} {...props} />
+function TabsList({ className, variant, children, ...props }: { className?: string; variant?: "default" | "line"; children?: React.ReactNode } & React.ComponentProps<typeof MantineTabs.List>) {
+  return (
+    <MantineTabs.List data-slot="tabs-list" className={className} {...props}>
+      {children}
+    </MantineTabs.List>
+  )
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
+function TabsTrigger({ className, value, children, disabled, ...props }: { className?: string; value: string; children?: React.ReactNode; disabled?: boolean }) {
+  return (
+    <MantineTabs.Tab data-slot="tabs-trigger" value={value} disabled={disabled} className={className} {...props}>
+      {children}
+    </MantineTabs.Tab>
+  )
+}
+
+function TabsContent({ className, value, children, ...props }: { className?: string; value: string; children?: React.ReactNode }) {
+  return (
+    <MantineTabs.Panel data-slot="tabs-content" value={value} className={className} {...props}>
+      {children}
+    </MantineTabs.Panel>
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/frontend/functions/ui/tags_input.md b/frontend/functions/ui/tags_input.md
new file mode 100644
index 00000000..1b4e0409
--- /dev/null
+++ b/frontend/functions/ui/tags_input.md
@@ -0,0 +1,97 @@
+---
+name: tags_input
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "TagsInput(props: TagsInputProps): JSX.Element"
+description: "Input de tags libre con sugerencias opcionales. Permite crear valores custom a diferencia de MultiSelect. Wrapper sobre Mantine TagsInput."
+tags: [tags, input, form, pills, component, ui, interactive, mantine]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core"]
+output: "Componente TagsInput que renderiza input de tags con creación libre y sugerencias"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/tags_input.tsx"
+props:
+  - name: data
+    type: "string[]"
+    required: false
+    description: "Lista de sugerencias para autocompletar"
+  - name: value
+    type: "string[]"
+    required: false
+    description: "Valor controlado: array de tags activos"
+  - name: onChange
+    type: "(value: string[]) => void"
+    required: false
+    description: "Callback cuando cambia la lista de tags"
+  - name: maxTags
+    type: "number"
+    required: false
+    description: "Número máximo de tags permitidos"
+  - name: allowDuplicates
+    type: "boolean"
+    required: false
+    description: "Permite tags duplicados. Por defecto false"
+  - name: splitChars
+    type: "string[]"
+    required: false
+    description: "Caracteres que dividen la entrada en tags. Por defecto [',']"
+  - name: clearable
+    type: "boolean"
+    required: false
+    description: "Muestra botón para limpiar todos los tags"
+  - name: placeholder
+    type: "string"
+    required: false
+    description: "Texto placeholder cuando no hay tags"
+  - name: label
+    type: "string"
+    required: false
+    description: "Etiqueta visible sobre el input"
+  - name: disabled
+    type: "boolean"
+    required: false
+    description: "Deshabilita el input"
+  - name: size
+    type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+    required: false
+    description: "Tamaño del componente"
+emits: [onChange]
+has_state: true
+framework: react
+---
+
+## Ejemplo
+
+```tsx
+import { TagsInput } from '@fn_library'
+
+// Tags libres sin sugerencias
+<TagsInput
+  label="Tecnologías"
+  placeholder="Añade una tecnología y presiona Enter"
+  onChange={(tags) => console.log(tags)}
+/>
+
+// Con sugerencias y límite de tags
+<TagsInput
+  label="Categorías"
+  placeholder="Selecciona o escribe"
+  data={['Frontend', 'Backend', 'DevOps', 'QA', 'Diseño']}
+  maxTags={3}
+  clearable
+  onChange={(tags) => setSelectedTags(tags)}
+/>
+```
+
+## Notas
+
+A diferencia de MultiSelect, TagsInput permite crear valores que no están en la lista `data`. El usuario escribe libremente y confirma con Enter o con los caracteres definidos en `splitChars`. Útil para campos de etiquetas, habilidades o keywords donde el conjunto no es cerrado.
diff --git a/frontend/functions/ui/tags_input.tsx b/frontend/functions/ui/tags_input.tsx
new file mode 100644
index 00000000..5bf87342
--- /dev/null
+++ b/frontend/functions/ui/tags_input.tsx
@@ -0,0 +1,10 @@
+import { TagsInput as MantineTagsInput, type TagsInputProps as MantineTagsInputProps } from '@mantine/core'
+
+interface TagsInputProps extends MantineTagsInputProps {}
+
+function TagsInput(props: TagsInputProps) {
+  return <MantineTagsInput {...props} />
+}
+
+export { TagsInput }
+export type { TagsInputProps }
diff --git a/frontend/functions/ui/textarea.md b/frontend/functions/ui/textarea.md
index e48acb55..b9162266 100644
--- a/frontend/functions/ui/textarea.md
+++ b/frontend/functions/ui/textarea.md
@@ -6,14 +6,14 @@ domain: ui
 version: "1.0.0"
 purity: impure
 signature: "Textarea(props: TextareaProps): JSX.Element"
-description: "Input multilinea accesible con auto-resize opcional. Patron identico a Input para consistencia de estilos."
-tags: [textarea, component, ui, interactive, form]
-uses_functions: [cn_ts_core]
+description: "Input multilinea accesible con auto-resize opcional. Mantine Textarea con autosize."
+tags: [textarea, component, ui, interactive, form, mantine]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: []
+imports: ["@mantine/core"]
 output: "Componente Textarea que renderiza input multilinea accesible con auto-resize opcional"
 tested: false
 tests: []
@@ -41,7 +41,7 @@ props:
     required: false
     description: "Clases CSS adicionales"
 emits: [onChange, onFocus, onBlur]
-has_state: true
+has_state: false
 framework: react
 variant: []
 ---
@@ -64,4 +64,4 @@ variant: []
 
 ## Notas
 
-Usa forwardRef para compatibilidad con form libraries. El auto-resize ajusta style.height en cada cambio — por eso requiere has_state: true. Aplica las mismas clases de foco y validacion que Input para consistencia visual.
+Usa Mantine Textarea con autosize nativo (reemplaza el auto-resize manual anterior). forwardRef mantenido para compatibilidad con form libraries.
diff --git a/frontend/functions/ui/textarea.tsx b/frontend/functions/ui/textarea.tsx
index 81ae9a80..e80f7ae5 100644
--- a/frontend/functions/ui/textarea.tsx
+++ b/frontend/functions/ui/textarea.tsx
@@ -1,47 +1,26 @@
-import * as React from "react"
-import { cn } from "../core/cn"
+import * as React from 'react'
+import { Textarea as MantineTextarea } from '@mantine/core'
 
-interface TextareaProps extends React.ComponentPropsWithoutRef<"textarea"> {
+interface TextareaProps extends Omit<React.ComponentProps<typeof MantineTextarea>, 'autosize'> {
   autoResize?: boolean
 }
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, autoResize = false, onChange, ...props }, ref) => {
-    const internalRef = React.useRef<HTMLTextAreaElement>(null)
-    const resolvedRef = (ref as React.RefObject<HTMLTextAreaElement>) ?? internalRef
-
-    const handleChange = React.useCallback(
-      (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-        if (autoResize && resolvedRef.current) {
-          resolvedRef.current.style.height = "auto"
-          resolvedRef.current.style.height = `${resolvedRef.current.scrollHeight}px`
-        }
-        onChange?.(e)
-      },
-      [autoResize, onChange, resolvedRef]
-    )
-
+  ({ className, autoResize = false, ...props }, ref) => {
     return (
-      <textarea
-        ref={resolvedRef}
+      <MantineTextarea
+        ref={ref}
         data-slot="textarea"
-        className={cn(
-          "min-h-[80px] w-full rounded-lg border border-input bg-transparent px-3 py-2 text-sm transition-colors outline-none",
-          "placeholder:text-muted-foreground",
-          "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
-          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50",
-          "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20",
-          "dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
-          autoResize && "resize-none overflow-hidden",
-          className
-        )}
-        onChange={handleChange}
+        autosize={autoResize}
+        minRows={autoResize ? 2 : undefined}
+        size="sm"
+        className={className}
         {...props}
       />
     )
   }
 )
-Textarea.displayName = "Textarea"
+Textarea.displayName = 'Textarea'
 
 export { Textarea }
 export type { TextareaProps }
diff --git a/frontend/functions/ui/theme_provider.md b/frontend/functions/ui/theme_provider.md
deleted file mode 100644
index 36563e0e..00000000
--- a/frontend/functions/ui/theme_provider.md
+++ /dev/null
@@ -1,66 +0,0 @@
----
-name: theme_provider
-kind: component
-lang: ts
-domain: ui
-version: "1.0.0"
-purity: impure
-signature: "ThemeProvider(props: { children: ReactNode; themes: Record<string, Theme>; defaultTheme?: string }): JSX.Element"
-description: "Provider de tema React con context, persistencia en localStorage, detección de preferencia del sistema y hook useTheme."
-tags: [theme, provider, context, hook, component, ui]
-uses_functions: [apply_theme_ts_ui]
-uses_types: [ThemeConfig_ts_ui]
-returns: []
-returns_optional: false
-error_type: ""
-imports: [react]
-output: "Componente ThemeProvider que renderiza context de tema con persistencia en localStorage y hook useTheme"
-tested: false
-tests: []
-test_file_path: ""
-file_path: "frontend/functions/ui/theme_provider.tsx"
-props:
-  - name: themes
-    type: "Record<string, Theme>"
-    required: true
-    description: "Mapa de temas disponibles"
-  - name: defaultTheme
-    type: "string"
-    required: false
-    description: "Nombre del tema por defecto"
-  - name: children
-    type: "ReactNode"
-    required: true
-    description: "Contenido de la app"
-emits: []
-has_state: true
-framework: react
-variant: [default]
-source_repo: "https://gitea-dgg044oo04woo4ggcsws4gk0.organic-machine.com/Bl4cksmith/Frontend_Library"
-source_license: "MIT"
-source_file: "frontend/src/hooks/use-theme.tsx"
----
-
-## Ejemplo
-
-```tsx
-import { ThemeProvider, useTheme } from './theme_provider'
-
-<ThemeProvider themes={allThemes} defaultTheme="dark">
-  <App />
-</ThemeProvider>
-
-// Dentro de un componente:
-function ThemeSwitcher() {
-  const { themeName, setTheme, themes } = useTheme()
-  return (
-    <select value={themeName} onChange={(e) => setTheme(e.target.value)}>
-      {Object.values(themes).map(t => <option key={t.name} value={t.name}>{t.label}</option>)}
-    </select>
-  )
-}
-```
-
-## Notas
-
-Detecta prefers-color-scheme automáticamente. Persiste elección en localStorage. Exporta ThemeProvider (componente) y useTheme (hook).
diff --git a/frontend/functions/ui/theme_provider.tsx b/frontend/functions/ui/theme_provider.tsx
deleted file mode 100644
index cfd2f9df..00000000
--- a/frontend/functions/ui/theme_provider.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { createContext, useCallback, useContext, useEffect, useState, type ReactNode } from 'react'
-
-interface ThemeColors {
-  [key: string]: string
-}
-
-interface Theme {
-  name: string
-  label: string
-  colors: ThemeColors
-}
-
-interface ThemeContextValue {
-  theme: Theme
-  themeName: string
-  setTheme: (name: string) => void
-  themes: Record<string, Theme>
-}
-
-const STORAGE_KEY = 'frontend-library-theme'
-const ThemeContext = createContext<ThemeContextValue | null>(null)
-
-function applyThemeColors(theme: Theme) {
-  const root = document.documentElement
-  const cssVarMap: Record<string, string> = {
-    background: '--background', foreground: '--foreground',
-    card: '--card', cardForeground: '--card-foreground',
-    popover: '--popover', popoverForeground: '--popover-foreground',
-    primary: '--primary', primaryForeground: '--primary-foreground',
-    secondary: '--secondary', secondaryForeground: '--secondary-foreground',
-    muted: '--muted', mutedForeground: '--muted-foreground',
-    accent: '--accent', accentForeground: '--accent-foreground',
-    destructive: '--destructive', destructiveForeground: '--destructive-foreground',
-    success: '--success', successForeground: '--success-foreground',
-    warning: '--warning', warningForeground: '--warning-foreground',
-    info: '--info', infoForeground: '--info-foreground',
-    surface: '--surface', surfaceHover: '--surface-hover', overlay: '--overlay',
-    border: '--border', input: '--input', ring: '--ring',
-    chart1: '--chart-1', chart2: '--chart-2', chart3: '--chart-3', chart4: '--chart-4', chart5: '--chart-5',
-    sidebar: '--sidebar', sidebarForeground: '--sidebar-foreground',
-    sidebarPrimary: '--sidebar-primary', sidebarPrimaryForeground: '--sidebar-primary-foreground',
-    sidebarAccent: '--sidebar-accent', sidebarAccentForeground: '--sidebar-accent-foreground',
-    sidebarBorder: '--sidebar-border', sidebarRing: '--sidebar-ring',
-  }
-  Object.entries(cssVarMap).forEach(([key, cssVar]) => {
-    if (theme.colors[key]) root.style.setProperty(cssVar, theme.colors[key])
-  })
-  if (theme.name === 'dark' || theme.name === 'midnight' || theme.name === 'sunset') {
-    root.classList.add('dark')
-  } else {
-    root.classList.remove('dark')
-  }
-}
-
-interface ThemeProviderProps {
-  children: ReactNode
-  themes: Record<string, Theme>
-  defaultTheme?: string
-}
-
-export function ThemeProvider({ children, themes, defaultTheme: initialTheme }: ThemeProviderProps) {
-  const [themeName, setThemeName] = useState<string>(() => {
-    if (initialTheme) return initialTheme
-    if (typeof window === 'undefined') return 'default'
-    const stored = localStorage.getItem(STORAGE_KEY)
-    if (stored && themes[stored]) return stored
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) return 'dark'
-    return 'default'
-  })
-
-  const theme = themes[themeName] ?? themes['default'] ?? Object.values(themes)[0]
-
-  const setTheme = useCallback((name: string) => {
-    if (themes[name]) {
-      setThemeName(name)
-      localStorage.setItem(STORAGE_KEY, name)
-    }
-  }, [themes])
-
-  useEffect(() => { applyThemeColors(theme) }, [theme])
-
-  useEffect(() => {
-    const mq = window.matchMedia('(prefers-color-scheme: dark)')
-    const handle = (e: MediaQueryListEvent) => {
-      if (!localStorage.getItem(STORAGE_KEY)) setThemeName(e.matches ? 'dark' : 'default')
-    }
-    mq.addEventListener('change', handle)
-    return () => mq.removeEventListener('change', handle)
-  }, [])
-
-  return <ThemeContext.Provider value={{ theme, themeName, setTheme, themes }}>{children}</ThemeContext.Provider>
-}
-
-export function useTheme() {
-  const ctx = useContext(ThemeContext)
-  if (!ctx) throw new Error('useTheme must be used within a ThemeProvider')
-  return ctx
-}
-
-export { ThemeContext }
-export type { ThemeContextValue, ThemeProviderProps, Theme, ThemeColors }
diff --git a/frontend/functions/ui/timeline.md b/frontend/functions/ui/timeline.md
new file mode 100644
index 00000000..bf949011
--- /dev/null
+++ b/frontend/functions/ui/timeline.md
@@ -0,0 +1,58 @@
+---
+name: timeline
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "FnTimeline(props: FnTimelineProps): JSX.Element"
+description: "Timeline vertical con items, iconos y colores. Wrapper sobre Mantine Timeline."
+tags: [mantine, timeline, history, events, component, ui]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core"]
+framework: react
+props:
+  - name: items
+    type: "{ title: string; description?: string; icon?: ReactNode; color?: string; time?: string }[]"
+    required: true
+    description: "Items de la timeline con titulo, descripcion, icono, color y timestamp"
+  - name: active
+    type: "number"
+    required: false
+    description: "Indice del item activo, default -1 (ninguno)"
+  - name: bulletSize
+    type: "number"
+    required: false
+    description: "Tamano del bullet en px, default 20"
+output: "Timeline vertical con bullets, titulos, timestamps y descripciones"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/timeline.tsx"
+emits: []
+has_state: false
+variant: []
+---
+
+## Ejemplo
+
+```tsx
+import { FnTimeline } from '@fn_library'
+
+<FnTimeline
+  active={1}
+  items={[
+    { title: 'Creado', time: '2024-01-01', icon: <IconCheck size={12} /> },
+    { title: 'En progreso', description: 'Pipeline ejecutando', color: 'blue' },
+    { title: 'Completado' },
+  ]}
+/>
+```
+
+## Notas
+
+Wrapper sobre Mantine `Timeline`. Recibe array declarativo de items. El `time` se muestra como texto dimmed debajo del titulo. Items despues de `active` se muestran como inactivos.
diff --git a/frontend/functions/ui/timeline.tsx b/frontend/functions/ui/timeline.tsx
new file mode 100644
index 00000000..b1f9b3c4
--- /dev/null
+++ b/frontend/functions/ui/timeline.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react'
+import { Timeline, Text } from '@mantine/core'
+
+interface TimelineItem {
+  title: string
+  description?: string
+  icon?: React.ReactNode
+  color?: string
+  time?: string
+}
+
+interface FnTimelineProps {
+  items: TimelineItem[]
+  active?: number
+  bulletSize?: number
+}
+
+function FnTimeline({
+  items,
+  active = -1,
+  bulletSize = 20,
+}: FnTimelineProps) {
+  return (
+    <Timeline active={active} bulletSize={bulletSize}>
+      {items.map((item, i) => (
+        <Timeline.Item
+          key={i}
+          title={item.title}
+          bullet={item.icon}
+          color={item.color}
+        >
+          {item.time && (
+            <Text size="xs" c="dimmed" mt={2}>{item.time}</Text>
+          )}
+          {item.description && (
+            <Text size="sm" mt={4}>{item.description}</Text>
+          )}
+        </Timeline.Item>
+      ))}
+    </Timeline>
+  )
+}
+
+export { FnTimeline }
+export type { FnTimelineProps, TimelineItem }
diff --git a/frontend/functions/ui/toast.md b/frontend/functions/ui/toast.md
index 876416f7..423800ba 100644
--- a/frontend/functions/ui/toast.md
+++ b/frontend/functions/ui/toast.md
@@ -7,13 +7,13 @@ version: "1.0.0"
 purity: impure
 signature: "Toast(props: ToastProps): JSX.Element"
 description: "Notificaciones temporales con variantes semanticas (success, error, warning, info), iconos automaticos, auto-dismiss y provider con hook useToast."
-tags: [toast, notification, alert, component, ui, interactive, cva]
-uses_functions: [cn_ts_core]
+tags: [toast, notification, alert, component, ui, interactive, mantine]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: ["class-variance-authority", "lucide-react"]
+imports: ["@mantine/notifications", "@mantine/core"]
 output: "Componente Toast que renderiza notificación temporal con variantes semánticas, auto-dismiss y hook useToast"
 tested: false
 tests: []
@@ -88,4 +88,4 @@ toast({
 
 ## Notas
 
-Arquitectura: Toast (componente visual puro), ToastViewport (contenedor posicionado fixed), ToastProvider (context + logica de estado), useToast (hook consumidor). Los iconos son automaticos segun variante: CheckCircle2 (success), AlertCircle (error), AlertTriangle (warning), Info (info). El border-l-4 diferencia visualmente cada variante. ToastProvider acepta position con 6 posiciones predefinidas.
+Migrado a @mantine/notifications. useToast() delega a notifications.show(). ToastProvider es un passthrough (Mantine maneja el estado globalmente via Notifications en mantine_provider). Toast puede usarse como componente inline con Paper. Variantes mapean a colores Mantine: success→teal, error→red, warning→yellow, info→blue.
diff --git a/frontend/functions/ui/toast.tsx b/frontend/functions/ui/toast.tsx
index d5cd5c66..722c6d8d 100644
--- a/frontend/functions/ui/toast.tsx
+++ b/frontend/functions/ui/toast.tsx
@@ -1,112 +1,58 @@
-"use client"
+import { notifications } from '@mantine/notifications'
+import { Paper, Text, Group, CloseButton } from '@mantine/core'
 
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { XIcon, CheckCircle2Icon, AlertCircleIcon, AlertTriangleIcon, InfoIcon } from "lucide-react"
-import { cn } from "../core/cn"
+type ToastVariant = 'default' | 'success' | 'error' | 'warning' | 'info'
 
-const toastVariants = cva(
-  "group/toast pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden rounded-xl border p-4 pr-8 shadow-lg transition-all",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground border-border",
-        success: "bg-background border-l-4 border-l-green-500 border-border text-foreground",
-        error: "bg-background border-l-4 border-l-destructive border-border text-foreground",
-        warning: "bg-background border-l-4 border-l-yellow-500 border-border text-foreground",
-        info: "bg-background border-l-4 border-l-blue-500 border-border text-foreground",
-      },
-    },
-    defaultVariants: { variant: "default" },
-  }
-)
-
-const variantIcons: Record<string, React.ReactNode> = {
-  success: <CheckCircle2Icon className="mt-0.5 size-4 shrink-0 text-green-500" />,
-  error: <AlertCircleIcon className="mt-0.5 size-4 shrink-0 text-destructive" />,
-  warning: <AlertTriangleIcon className="mt-0.5 size-4 shrink-0 text-yellow-500" />,
-  info: <InfoIcon className="mt-0.5 size-4 shrink-0 text-blue-500" />,
-}
-
-interface ToastProps
-  extends React.ComponentPropsWithoutRef<"div">,
-    VariantProps<typeof toastVariants> {
+interface ToastProps {
+  variant?: ToastVariant
   title?: string
   description?: string
   action?: React.ReactNode
   onClose?: () => void
+  className?: string
+  children?: React.ReactNode
 }
 
-const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
-  ({ className, variant = "default", title, description, action, onClose, children, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        data-slot="toast"
-        data-variant={variant}
-        role="alert"
-        aria-live="polite"
-        className={cn(toastVariants({ variant }), className)}
-        {...props}
-      >
-        {variant && variant !== "default" && variantIcons[variant]}
-        <div className="flex flex-1 flex-col gap-1">
-          {title && (
-            <div data-slot="toast-title" className="text-sm font-semibold leading-none">
-              {title}
-            </div>
-          )}
-          {description && (
-            <div data-slot="toast-description" className="text-sm text-muted-foreground">
-              {description}
-            </div>
-          )}
-          {children}
-          {action && <div data-slot="toast-action" className="mt-2">{action}</div>}
-        </div>
-        {onClose && (
-          <button
-            data-slot="toast-close"
-            onClick={onClose}
-            className="absolute top-2 right-2 inline-flex size-5 items-center justify-center rounded-md text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            aria-label="Close"
-          >
-            <XIcon className="size-3.5" />
-          </button>
-        )}
-      </div>
-    )
-  }
-)
-Toast.displayName = "Toast"
-
-interface ToastViewportProps extends React.ComponentPropsWithoutRef<"div"> {
-  position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"
+const variantColors: Record<ToastVariant, string | undefined> = {
+  default: undefined,
+  success: 'teal',
+  error: 'red',
+  warning: 'yellow',
+  info: 'blue',
 }
 
-const positionClasses: Record<NonNullable<ToastViewportProps["position"]>, string> = {
-  "top-left": "top-4 left-4",
-  "top-center": "top-4 left-1/2 -translate-x-1/2",
-  "top-right": "top-4 right-4",
-  "bottom-left": "bottom-4 left-4",
-  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
-  "bottom-right": "bottom-4 right-4",
-}
-
-function ToastViewport({ className, position = "bottom-right", ...props }: ToastViewportProps) {
+function Toast({ title, description, onClose, className }: ToastProps) {
   return (
-    <div
-      data-slot="toast-viewport"
-      className={cn(
-        "fixed z-[100] flex max-h-screen w-full max-w-sm flex-col gap-2 p-4",
-        positionClasses[position],
-        className
-      )}
-      {...props}
-    />
+    <Paper withBorder shadow="md" p="md" radius="md" className={className}>
+      <Group justify="space-between" align="flex-start">
+        <div>
+          {title && <Text size="sm" fw={600}>{title}</Text>}
+          {description && <Text size="sm" c="dimmed">{description}</Text>}
+        </div>
+        {onClose && <CloseButton size="sm" onClick={onClose} />}
+      </Group>
+    </Paper>
   )
 }
 
+const toastVariants = {
+  default: 'default',
+  success: 'success',
+  error: 'error',
+  warning: 'warning',
+  info: 'info',
+} as const
+
+interface ToastViewportProps {
+  position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
+  children?: React.ReactNode
+  className?: string
+}
+
+function ToastViewport({ children }: ToastViewportProps) {
+  return <>{children}</>
+}
+
 type ToastEntry = ToastProps & {
   id: string
   duration?: number
@@ -114,56 +60,37 @@ type ToastEntry = ToastProps & {
 
 interface ToastProviderContextValue {
   toasts: ToastEntry[]
-  toast: (props: Omit<ToastEntry, "id">) => string
+  toast: (props: Omit<ToastEntry, 'id'>) => string
   dismiss: (id: string) => void
   dismissAll: () => void
 }
 
-const ToastContext = React.createContext<ToastProviderContextValue | null>(null)
-
-function ToastProvider({ children, position = "bottom-right" }: { children: React.ReactNode; position?: ToastViewportProps["position"] }) {
-  const [toasts, setToasts] = React.useState<ToastEntry[]>([])
-
-  const dismiss = React.useCallback((id: string) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id))
-  }, [])
-
-  const dismissAll = React.useCallback(() => {
-    setToasts([])
-  }, [])
-
-  const toast = React.useCallback(
-    (props: Omit<ToastEntry, "id">) => {
-      const id = Math.random().toString(36).slice(2)
-      const duration = props.duration ?? 5000
-      setToasts((prev) => [...prev, { ...props, id }])
-      if (duration > 0) {
-        setTimeout(() => dismiss(id), duration)
-      }
-      return id
-    },
-    [dismiss]
-  )
-
-  return (
-    <ToastContext.Provider value={{ toasts, toast, dismiss, dismissAll }}>
-      {children}
-      <ToastViewport position={position}>
-        {toasts.map((t) => {
-          const { id, duration: _duration, ...rest } = t
-          return (
-            <Toast key={id} {...rest} onClose={() => dismiss(id)} />
-          )
-        })}
-      </ToastViewport>
-    </ToastContext.Provider>
-  )
+function ToastProvider({ children }: { children: React.ReactNode; position?: ToastViewportProps['position'] }) {
+  return <>{children}</>
 }
 
-function useToast() {
-  const ctx = React.useContext(ToastContext)
-  if (!ctx) throw new Error("useToast must be used within ToastProvider")
-  return ctx
+function useToast(): ToastProviderContextValue {
+  return {
+    toasts: [],
+    toast: (props: Omit<ToastEntry, 'id'>) => {
+      const id = Math.random().toString(36).slice(2)
+      notifications.show({
+        id,
+        title: props.title,
+        message: props.description ?? '',
+        color: variantColors[props.variant ?? 'default'],
+        autoClose: props.duration === 0 ? false : (props.duration ?? 5000),
+      })
+      return id
+    },
+    dismiss: (id: string) => {
+      notifications.hide(id)
+    },
+    dismissAll: () => {
+      notifications.cleanQueue()
+      notifications.clean()
+    },
+  }
 }
 
 export { Toast, ToastProvider, ToastViewport, toastVariants, useToast }
diff --git a/frontend/functions/ui/tooltip.md b/frontend/functions/ui/tooltip.md
index 4de4592e..a90ff0ff 100644
--- a/frontend/functions/ui/tooltip.md
+++ b/frontend/functions/ui/tooltip.md
@@ -6,15 +6,15 @@ domain: ui
 version: "1.0.0"
 purity: impure
 signature: "Tooltip(props: TooltipRootProps): JSX.Element"
-description: "Tooltip accesible con animaciones, posicionamiento automático y arrow. Base-UI primitive con delay configurable."
-tags: [tooltip, overlay, component, ui, help]
-uses_functions: [cn_ts_core]
+description: "Tooltip accesible con posicionamiento automático. Mantine Tooltip con delay configurable."
+tags: [tooltip, overlay, component, ui, help, mantine]
+uses_functions: []
 uses_types: []
 returns: []
 returns_optional: false
 error_type: ""
-imports: ["@base-ui/react", react]
-output: "Componente Tooltip que renderiza tooltip accesible con posicionamiento automático y delay configurable"
+imports: ["@mantine/core", react]
+output: "Componente Tooltip que renderiza tooltip accesible con posicionamiento automático y delay configurable via Mantine Tooltip"
 tested: false
 tests: []
 test_file_path: ""
@@ -47,6 +47,5 @@ source_file: "frontend/src/components/ui/tooltip.tsx"
 ## Notas
 
 Exporta 5 subcomponentes: TooltipProvider, Tooltip, TooltipTrigger, TooltipPortal, TooltipContent.
-TooltipProvider gestiona el delay global — envolver la app o sección con un único Provider.
-TooltipContent incluye Arrow con fill-primary automático.
-Depende de @base-ui/react — asegurarse de que está en package.json del frontend.
+TooltipProvider y Tooltip son wrappers de compatibilidad (Mantine gestiona delay internamente).
+TooltipPortal es un no-op mantenido por compatibilidad.
diff --git a/frontend/functions/ui/tooltip.tsx b/frontend/functions/ui/tooltip.tsx
index 8b8657d2..69be222f 100644
--- a/frontend/functions/ui/tooltip.tsx
+++ b/frontend/functions/ui/tooltip.tsx
@@ -1,45 +1,75 @@
-"use client"
+import * as React from 'react'
+import { Tooltip as MantineTooltip } from '@mantine/core'
 
-import * as React from "react"
-import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
-import { cn } from "../core/cn"
-
-function TooltipProvider({ delayDuration = 300, ...props }: { delayDuration?: number; children: React.ReactNode }) {
-  return <TooltipPrimitive.Provider delay={delayDuration} {...props} />
+function TooltipProvider({ delayDuration: _delayDuration = 300, children }: { delayDuration?: number; children: React.ReactNode }) {
+  return <>{children}</>
 }
 
-function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
-  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+const TooltipContext = React.createContext<{
+  label: React.ReactNode
+  setLabel: (label: React.ReactNode) => void
+  side: 'top' | 'right' | 'bottom' | 'left'
+  setSide: (side: 'top' | 'right' | 'bottom' | 'left') => void
+  offset: number
+  setOffset: (offset: number) => void
+}>({
+  label: '',
+  setLabel: () => {},
+  side: 'top',
+  setSide: () => {},
+  offset: 4,
+  setOffset: () => {},
+})
+
+interface TooltipProps {
+  children: React.ReactNode
+  delayDuration?: number
 }
 
-function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
-}
+function Tooltip({ children }: TooltipProps) {
+  const [label, setLabel] = React.useState<React.ReactNode>('')
+  const [side, setSide] = React.useState<'top' | 'right' | 'bottom' | 'left'>('top')
+  const [offset, setOffset] = React.useState(4)
 
-function TooltipPortal({ ...props }: TooltipPrimitive.Portal.Props) {
-  return <TooltipPrimitive.Portal data-slot="tooltip-portal" {...props} />
-}
-
-function TooltipContent({ className, sideOffset = 4, ...props }: TooltipPrimitive.Positioner.Props) {
   return (
-    <TooltipPortal>
-      <TooltipPrimitive.Positioner
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground",
-          "animate-in fade-in-0 zoom-in-95",
-          "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-          "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-          className
-        )}
-        {...props}
-      >
-        <TooltipPrimitive.Popup>{props.children}</TooltipPrimitive.Popup>
-        <TooltipPrimitive.Arrow className="fill-primary" />
-      </TooltipPrimitive.Positioner>
-    </TooltipPortal>
+    <TooltipContext.Provider value={{ label, setLabel, side, setSide, offset, setOffset }}>
+      {children}
+    </TooltipContext.Provider>
   )
 }
 
+function TooltipTrigger({ children, ...props }: React.ComponentProps<'button'>) {
+  const { label, side, offset } = React.useContext(TooltipContext)
+  return (
+    <MantineTooltip label={label} position={side} offset={offset} withArrow>
+      {React.isValidElement(children) ? (
+        React.cloneElement(children as React.ReactElement<any>, props)
+      ) : (
+        <button type="button" data-slot="tooltip-trigger" {...props}>{children}</button>
+      )}
+    </MantineTooltip>
+  )
+}
+
+function TooltipPortal({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
+}
+
+interface TooltipContentProps extends React.ComponentProps<'div'> {
+  sideOffset?: number
+  side?: 'top' | 'right' | 'bottom' | 'left'
+}
+
+function TooltipContent({ children, sideOffset, side = 'top' }: TooltipContentProps) {
+  const { setLabel, setSide, setOffset } = React.useContext(TooltipContext)
+
+  React.useEffect(() => {
+    setLabel(children)
+    setSide(side)
+    if (sideOffset !== undefined) setOffset(sideOffset)
+  }, [children, side, sideOffset, setLabel, setSide, setOffset])
+
+  return null
+}
+
 export { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger }
diff --git a/frontend/package.json b/frontend/package.json
index 2ccba2f8..3c143b8a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,36 +6,38 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview",
-    "add": "pnpm dlx shadcn@latest add"
+    "preview": "vite preview"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "packageManager": "pnpm@10.17.0",
   "dependencies": {
-    "@base-ui/react": "^1.3.0",
     "@fontsource-variable/geist": "^5.2.8",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
+    "@mantine/charts": "^9.0.0",
+    "@mantine/core": "^9.0.0",
+    "@mantine/dates": "^9.0.1",
+    "@mantine/dropzone": "^9.0.1",
+    "@mantine/form": "^9.0.0",
+    "@mantine/hooks": "^9.0.0",
+    "@mantine/notifications": "^9.0.0",
+    "@tabler/icons-react": "^3.41.1",
+    "dayjs": "^1.11.20",
     "graphology": "^0.26.0",
     "graphology-layout-forceatlas2": "^0.10.1",
     "graphology-types": "^0.24.8",
-    "lucide-react": "^1.7.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "recharts": "^3.8.1",
-    "shadcn": "^4.1.1",
-    "sigma": "^3.0.2",
-    "tailwind-merge": "^3.5.0",
-    "tw-animate-css": "^1.4.0"
+    "sigma": "^3.0.2"
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.2.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
-    "tailwindcss": "^4.2.2",
+    "postcss": "^8.5.8",
+    "postcss-preset-mantine": "^1.18.0",
+    "postcss-simple-vars": "^7.0.1",
     "tsx": "^4.21.0",
     "typescript": "^6.0.2",
     "vite": "^8.0.3"
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index a6c9a9b4..bbf90c5d 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -8,18 +8,36 @@ importers:
 
   .:
     dependencies:
-      '@base-ui/react':
-        specifier: ^1.3.0
-        version: 1.3.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@fontsource-variable/geist':
         specifier: ^5.2.8
         version: 5.2.8
-      class-variance-authority:
-        specifier: ^0.7.1
-        version: 0.7.1
-      clsx:
-        specifier: ^2.1.1
-        version: 2.1.1
+      '@mantine/charts':
+        specifier: ^9.0.0
+        version: 9.0.0(@mantine/core@9.0.0(@mantine/hooks@9.0.0(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(@mantine/hooks@9.0.0(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(recharts@3.8.1(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react-is@19.2.4)(react@19.2.4)(redux@5.0.1))
+      '@mantine/core':
+        specifier: ^9.0.0
+        version: 9.0.0(@mantine/hooks@9.0.0(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@mantine/dates':
+        specifier: ^9.0.1
+        version: 9.0.1(@mantine/core@9.0.0(@mantine/hooks@9.0.0(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(@mantine/hooks@9.0.0(react@19.2.4))(dayjs@1.11.20)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@mantine/dropzone':
+        specifier: ^9.0.1
+        version: 9.0.1(@mantine/core@9.0.0(@mantine/hooks@9.0.0(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(@mantine/hooks@9.0.0(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@mantine/form':
+        specifier: ^9.0.0
+        version: 9.0.0(react@19.2.4)
+      '@mantine/hooks':
+        specifier: ^9.0.0
+        version: 9.0.0(react@19.2.4)
+      '@mantine/notifications':
+        specifier: ^9.0.0
+        version: 9.0.0(@mantine/core@9.0.0(@mantine/hooks@9.0.0(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(@mantine/hooks@9.0.0(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@tabler/icons-react':
+        specifier: ^3.41.1
+        version: 3.41.1(react@19.2.4)
+      dayjs:
+        specifier: ^1.11.20
+        version: 1.11.20
       graphology:
         specifier: ^0.26.0
         version: 0.26.0(graphology-types@0.24.8)
@@ -29,9 +47,6 @@ importers:
       graphology-types:
         specifier: ^0.24.8
         version: 0.24.8
-      lucide-react:
-        specifier: ^1.7.0
-        version: 1.7.0(react@19.2.4)
       react:
         specifier: ^19.2.4
         version: 19.2.4
@@ -41,22 +56,10 @@ importers:
       recharts:
         specifier: ^3.8.1
         version: 3.8.1(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react-is@19.2.4)(react@19.2.4)(redux@5.0.1)
-      shadcn:
-        specifier: ^4.1.1
-        version: 4.1.1(typescript@6.0.2)
       sigma:
         specifier: ^3.0.2
         version: 3.0.2(graphology-types@0.24.8)
-      tailwind-merge:
-        specifier: ^3.5.0
-        version: 3.5.0
-      tw-animate-css:
-        specifier: ^1.4.0
-        version: 1.4.0
     devDependencies:
-      '@tailwindcss/vite':
-        specifier: ^4.2.2
-        version: 4.2.2(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0))
       '@types/react':
         specifier: ^19.2.14
         version: 19.2.14
@@ -65,10 +68,16 @@ importers:
         version: 19.2.3(@types/react@19.2.14)
       '@vitejs/plugin-react':
         specifier: ^6.0.1
-        version: 6.0.1(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0))
-      tailwindcss:
-        specifier: ^4.2.2
-        version: 4.2.2
+        version: 6.0.1(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(tsx@4.21.0))
+      postcss:
+        specifier: ^8.5.8
+        version: 8.5.8
+      postcss-preset-mantine:
+        specifier: ^1.18.0
+        version: 1.18.0(postcss@8.5.8)
+      postcss-simple-vars:
+        specifier: ^7.0.1
+        version: 7.0.1(postcss@8.5.8)
       tsx:
         specifier: ^4.21.0
         version: 4.21.0
@@ -77,174 +86,14 @@ importers:
         version: 6.0.2
       vite:
         specifier: ^8.0.3
-        version: 8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)
+        version: 8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(tsx@4.21.0)
 
 packages:
 
-  '@babel/code-frame@7.29.0':
-    resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/compat-data@7.29.0':
-    resolution: {integrity: sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/core@7.29.0':
-    resolution: {integrity: sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/generator@7.29.1':
-    resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-annotate-as-pure@7.27.3':
-    resolution: {integrity: sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-compilation-targets@7.28.6':
-    resolution: {integrity: sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-create-class-features-plugin@7.28.6':
-    resolution: {integrity: sha512-dTOdvsjnG3xNT9Y0AUg1wAl38y+4Rl4sf9caSQZOXdNqVn+H+HbbJ4IyyHaIqNR6SW9oJpA/RuRjsjCw2IdIow==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-
-  '@babel/helper-globals@7.28.0':
-    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-member-expression-to-functions@7.28.5':
-    resolution: {integrity: sha512-cwM7SBRZcPCLgl8a7cY0soT1SptSzAlMH39vwiRpOQkJlh53r5hdHwLSCZpQdVLT39sZt+CRpNwYG4Y2v77atg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-module-imports@7.28.6':
-    resolution: {integrity: sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-module-transforms@7.28.6':
-    resolution: {integrity: sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-
-  '@babel/helper-optimise-call-expression@7.27.1':
-    resolution: {integrity: sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-plugin-utils@7.28.6':
-    resolution: {integrity: sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-replace-supers@7.28.6':
-    resolution: {integrity: sha512-mq8e+laIk94/yFec3DxSjCRD2Z0TAjhVbEJY3UQrlwVo15Lmt7C2wAUbK4bjnTs4APkwsYLTahXRraQXhb1WCg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-
-  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
-    resolution: {integrity: sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-string-parser@7.27.1':
-    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-validator-identifier@7.28.5':
-    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-validator-option@7.27.1':
-    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helpers@7.29.2':
-    resolution: {integrity: sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/parser@7.29.2':
-    resolution: {integrity: sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-
-  '@babel/plugin-syntax-jsx@7.28.6':
-    resolution: {integrity: sha512-wgEmr06G6sIpqr8YDwA2dSRTE3bJ+V0IfpzfSY3Lfgd7YWOaAdlykvJi13ZKBt8cZHfgH1IXN+CL656W3uUa4w==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-syntax-typescript@7.28.6':
-    resolution: {integrity: sha512-+nDNmQye7nlnuuHDboPbGm00Vqg3oO8niRRL27/4LYHUsHYh0zJ1xWOz0uRwNFmM1Avzk8wZbc6rdiYhomzv/A==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-transform-modules-commonjs@7.28.6':
-    resolution: {integrity: sha512-jppVbf8IV9iWWwWTQIxJMAJCWBuuKx71475wHwYytrRGQ2CWiDvYlADQno3tcYpS/T2UUWFQp3nVtYfK/YBQrA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-transform-typescript@7.28.6':
-    resolution: {integrity: sha512-0YWL2RFxOqEm9Efk5PvreamxPME8OyY0wM5wh5lHjF+VtVhdneCWGzZeSqzOfiobVqQaNCd2z0tQvnI9DaPWPw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/preset-typescript@7.28.5':
-    resolution: {integrity: sha512-+bQy5WOI2V6LJZpPVxY+yp66XdZ2yifu0Mc1aP5CQKgjn4QM5IN2i5fAZ4xKop47pr8rpVhiAeu+nDQa12C8+g==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
   '@babel/runtime@7.29.2':
     resolution: {integrity: sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/template@7.28.6':
-    resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/traverse@7.29.0':
-    resolution: {integrity: sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/types@7.29.0':
-    resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
-    engines: {node: '>=6.9.0'}
-
-  '@base-ui/react@1.3.0':
-    resolution: {integrity: sha512-FwpKqZbPz14AITp1CVgf4AjhKPe1OeeVKSBMdgD10zbFlj3QSWelmtCMLi2+/PFZZcIm3l87G7rwtCZJwHyXWA==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      '@types/react': ^17 || ^18 || ^19
-      react: ^17 || ^18 || ^19
-      react-dom: ^17 || ^18 || ^19
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@base-ui/utils@0.2.6':
-    resolution: {integrity: sha512-yQ+qeuqohwhsNpoYDqqXaLllYAkPCP4vYdDrVo8FQXaAPfHWm1pG/Vm+jmGTA5JFS0BAIjookyapuJFY8F9PIw==}
-    peerDependencies:
-      '@types/react': ^17 || ^18 || ^19
-      react: ^17 || ^18 || ^19
-      react-dom: ^17 || ^18 || ^19
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@dotenvx/dotenvx@1.59.0':
-    resolution: {integrity: sha512-+LthcJBVj18x5B1Quua4XditjxYdafOmrXT6xxq+wnUldFQ41hfv/vrP/Z4CZkAk1OTdQSqgFIlVc/pUU+pIzQ==}
-    hasBin: true
-
-  '@ecies/ciphers@0.2.5':
-    resolution: {integrity: sha512-GalEZH4JgOMHYYcYmVqnFirFsjZHeoGMDt9IxEnM9F7GRUUyUksJ7Ou53L83WHJq3RWKD3AcBpo0iQh0oMpf8A==}
-    engines: {bun: '>=1', deno: '>=2', node: '>=16'}
-    peerDependencies:
-      '@noble/ciphers': ^1.0.0
-
   '@emnapi/core@1.9.1':
     resolution: {integrity: sha512-mukuNALVsoix/w1BJwFzwXBN/dHeejQtuVzcDsfOEsdpCumXb/E9j8w11h5S54tT1xhifGfbbSm/ICrObRb3KA==}
 
@@ -422,82 +271,73 @@ packages:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
+  '@floating-ui/react@0.27.19':
+    resolution: {integrity: sha512-31B8h5mm8YxotlE7/AU/PhNAl8eWxAmjL/v2QOxroDNkTFLk3Uu82u63N3b6TXa4EGJeeZLVcd/9AlNlVqzeog==}
+    peerDependencies:
+      react: '>=17.0.0'
+      react-dom: '>=17.0.0'
+
   '@floating-ui/utils@0.2.11':
     resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
 
   '@fontsource-variable/geist@5.2.8':
     resolution: {integrity: sha512-cJ6m9e+8MQ5dCYJsLylfZrgBh6KkG4bOLckB35Tr9J/EqdkEM6QllH5PxqP1dhTvFup+HtMRPuz9xOjxXJggxw==}
 
-  '@hono/node-server@1.19.11':
-    resolution: {integrity: sha512-dr8/3zEaB+p0D2n/IUrlPF1HZm586qgJNXK1a9fhg/PzdtkK7Ksd5l312tJX2yBuALqDYBlG20QEbayqPyxn+g==}
-    engines: {node: '>=18.14.1'}
+  '@mantine/charts@9.0.0':
+    resolution: {integrity: sha512-TnbjiT2tXZDAQWZrv/+Xu3JKYjPiTfO5jSIbcwnxZSVtLI+PIxA7zrSps+it/Nx3ch8GHpDizJ7UArC0UfmNkQ==}
     peerDependencies:
-      hono: ^4
+      '@mantine/core': 9.0.0
+      '@mantine/hooks': 9.0.0
+      react: ^19.2.0
+      react-dom: ^19.2.0
+      recharts: '>=3.2.1'
 
-  '@inquirer/ansi@1.0.2':
-    resolution: {integrity: sha512-S8qNSZiYzFd0wAcyG5AXCvUHC5Sr7xpZ9wZ2py9XR88jUz8wooStVx5M6dRzczbBWjic9NP7+rY0Xi7qqK/aMQ==}
-    engines: {node: '>=18'}
-
-  '@inquirer/confirm@5.1.21':
-    resolution: {integrity: sha512-KR8edRkIsUayMXV+o3Gv+q4jlhENF9nMYUZs9PA2HzrXeHI8M5uDag70U7RJn9yyiMZSbtF5/UexBtAVtZGSbQ==}
-    engines: {node: '>=18'}
+  '@mantine/core@9.0.0':
+    resolution: {integrity: sha512-GUUXlf+4uDpRu5iZ1PFy1NmgG7ttI+1I6VTw3v/b7N1jwOUhARwL1moGjPMjo3Eie3tHdVOCiVMYAvhlQ1GI5Q==}
     peerDependencies:
-      '@types/node': '>=18'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
+      '@mantine/hooks': 9.0.0
+      react: ^19.2.0
+      react-dom: ^19.2.0
 
-  '@inquirer/core@10.3.2':
-    resolution: {integrity: sha512-43RTuEbfP8MbKzedNqBrlhhNKVwoK//vUFNW3Q3vZ88BLcrs4kYpGg+B2mm5p2K/HfygoCxuKwJJiv8PbGmE0A==}
-    engines: {node: '>=18'}
+  '@mantine/dates@9.0.1':
+    resolution: {integrity: sha512-+zwqqQ4D2I8o/GiEStF66Mheo3abKmS0KaL3XDtDp1D7AVhKmSH3Rz27m48aqW/Kzqb2g2t3VgPzAkpuRsWdBA==}
     peerDependencies:
-      '@types/node': '>=18'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
+      '@mantine/core': 9.0.1
+      '@mantine/hooks': 9.0.1
+      dayjs: '>=1.0.0'
+      react: ^19.2.0
+      react-dom: ^19.2.0
 
-  '@inquirer/figures@1.0.15':
-    resolution: {integrity: sha512-t2IEY+unGHOzAaVM5Xx6DEWKeXlDDcNPeDyUpsRc6CUhBfU3VQOEl+Vssh7VNp1dR8MdUJBWhuObjXCsVpjN5g==}
-    engines: {node: '>=18'}
-
-  '@inquirer/type@3.0.10':
-    resolution: {integrity: sha512-BvziSRxfz5Ov8ch0z/n3oijRSEcEsHnhggm4xFZe93DHcUCTlutlq9Ox4SVENAfcRD22UQq7T/atg9Wr3k09eA==}
-    engines: {node: '>=18'}
+  '@mantine/dropzone@9.0.1':
+    resolution: {integrity: sha512-juUptJcKVaDaKMD1C0aliNM78E8w/fq1TILp0+/PcfaiFmMy7HzT/2KTuejd8e71R9kuLLK0PDv+Mk0mU67dvA==}
     peerDependencies:
-      '@types/node': '>=18'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
+      '@mantine/core': 9.0.1
+      '@mantine/hooks': 9.0.1
+      react: ^19.2.0
+      react-dom: ^19.2.0
 
-  '@jridgewell/gen-mapping@0.3.13':
-    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
-
-  '@jridgewell/remapping@2.3.5':
-    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
-
-  '@jridgewell/resolve-uri@3.1.2':
-    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
-    engines: {node: '>=6.0.0'}
-
-  '@jridgewell/sourcemap-codec@1.5.5':
-    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
-
-  '@jridgewell/trace-mapping@0.3.31':
-    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
-
-  '@modelcontextprotocol/sdk@1.28.0':
-    resolution: {integrity: sha512-gmloF+i+flI8ouQK7MWW4mOwuMh4RePBuPFAEPC6+pdqyWOUMDOixb6qZ69owLJpz6XmyllCouc4t8YWO+E2Nw==}
-    engines: {node: '>=18'}
+  '@mantine/form@9.0.0':
+    resolution: {integrity: sha512-13YUrYAyzvwwPQL5X+yMb0lbtiv2pfyrU/hvVWAitm5X7twuMYrHBlpci+umdKZnsrY6Q/6M5HHsToVOrZ6rvA==}
     peerDependencies:
-      '@cfworker/json-schema': ^4.1.1
-      zod: ^3.25 || ^4.0
-    peerDependenciesMeta:
-      '@cfworker/json-schema':
-        optional: true
+      react: ^19.2.0
 
-  '@mswjs/interceptors@0.41.3':
-    resolution: {integrity: sha512-cXu86tF4VQVfwz8W1SPbhoRyHJkti6mjH/XJIxp40jhO4j2k1m4KYrEykxqWPkFF3vrK4rgQppBh//AwyGSXPA==}
-    engines: {node: '>=18'}
+  '@mantine/hooks@9.0.0':
+    resolution: {integrity: sha512-TKcz+k0JH/jtblBfwOw/vXBX2EpJO66psJ5ZVmdDhwc6vbHDsvY6oYN8ynt9TfRn/eHZXsEmLPNj+wuGtWy4BA==}
+    peerDependencies:
+      react: ^19.2.0
+
+  '@mantine/notifications@9.0.0':
+    resolution: {integrity: sha512-BHln+CvmiQx59dMIzwxjLnXN3ongqRFHyox8DogSkMFwVfH76CTahTMz+1AA2fvkZOI0svsqR0zBZ/J7o3uUqw==}
+    peerDependencies:
+      '@mantine/core': 9.0.0
+      '@mantine/hooks': 9.0.0
+      react: ^19.2.0
+      react-dom: ^19.2.0
+
+  '@mantine/store@9.0.0':
+    resolution: {integrity: sha512-ts1cfBqJEASBNuZ3vzOGDLkfQjF9EDFqUUSOOqZRiwtwt3OyZojIxfWMBcATorH8UODM7dsUhfI82VbGUjZiJA==}
+    peerDependencies:
+      react: ^19.2.0
 
   '@napi-rs/wasm-runtime@1.1.2':
     resolution: {integrity: sha512-sNXv5oLJ7ob93xkZ1XnxisYhGYXfaG9f65/ZgYuAu3qt7b3NadcOEhLvx28hv31PgX8SZJRYrAIPQilQmFpLVw==}
@@ -505,39 +345,6 @@ packages:
       '@emnapi/core': ^1.7.1
       '@emnapi/runtime': ^1.7.1
 
-  '@noble/ciphers@1.3.0':
-    resolution: {integrity: sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==}
-    engines: {node: ^14.21.3 || >=16}
-
-  '@noble/curves@1.9.7':
-    resolution: {integrity: sha512-gbKGcRUYIjA3/zCCNaWDciTMFI0dCkvou3TL8Zmy5Nc7sJ47a0jtOeZoTaMxkuqRo9cRhjOdZJXegxYE5FN/xw==}
-    engines: {node: ^14.21.3 || >=16}
-
-  '@noble/hashes@1.8.0':
-    resolution: {integrity: sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==}
-    engines: {node: ^14.21.3 || >=16}
-
-  '@nodelib/fs.scandir@2.1.5':
-    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
-    engines: {node: '>= 8'}
-
-  '@nodelib/fs.stat@2.0.5':
-    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
-    engines: {node: '>= 8'}
-
-  '@nodelib/fs.walk@1.2.8':
-    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
-    engines: {node: '>= 8'}
-
-  '@open-draft/deferred-promise@2.2.0':
-    resolution: {integrity: sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==}
-
-  '@open-draft/logger@0.3.0':
-    resolution: {integrity: sha512-X2g45fzhxH238HKO4xbSr7+wBS8Fvw6ixhTDuvLd5mqh6bJJCFAPwU9mPDxbcrRtfxv4u5IHCEH77BmxvXmmxQ==}
-
-  '@open-draft/until@2.1.0':
-    resolution: {integrity: sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==}
-
   '@oxc-project/types@0.122.0':
     resolution: {integrity: sha512-oLAl5kBpV4w69UtFZ9xqcmTi+GENWOcPF7FCrczTiBbmC0ibXxCwyvZGbO39rCVEuLGAZM84DH0pUIyyv/YJzA==}
 
@@ -647,111 +454,19 @@ packages:
   '@rolldown/pluginutils@1.0.0-rc.7':
     resolution: {integrity: sha512-qujRfC8sFVInYSPPMLQByRh7zhwkGFS4+tyMQ83srV1qrxL4g8E2tyxVVyxd0+8QeBM1mIk9KbWxkegRr76XzA==}
 
-  '@sec-ant/readable-stream@0.4.1':
-    resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
-
-  '@sindresorhus/merge-streams@4.0.0':
-    resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
-    engines: {node: '>=18'}
-
   '@standard-schema/spec@1.1.0':
     resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
   '@standard-schema/utils@0.3.0':
     resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
 
-  '@tailwindcss/node@4.2.2':
-    resolution: {integrity: sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA==}
-
-  '@tailwindcss/oxide-android-arm64@4.2.2':
-    resolution: {integrity: sha512-dXGR1n+P3B6748jZO/SvHZq7qBOqqzQ+yFrXpoOWWALWndF9MoSKAT3Q0fYgAzYzGhxNYOoysRvYlpixRBBoDg==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [android]
-
-  '@tailwindcss/oxide-darwin-arm64@4.2.2':
-    resolution: {integrity: sha512-iq9Qjr6knfMpZHj55/37ouZeykwbDqF21gPFtfnhCCKGDcPI/21FKC9XdMO/XyBM7qKORx6UIhGgg6jLl7BZlg==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@tailwindcss/oxide-darwin-x64@4.2.2':
-    resolution: {integrity: sha512-BlR+2c3nzc8f2G639LpL89YY4bdcIdUmiOOkv2GQv4/4M0vJlpXEa0JXNHhCHU7VWOKWT/CjqHdTP8aUuDJkuw==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@tailwindcss/oxide-freebsd-x64@4.2.2':
-    resolution: {integrity: sha512-YUqUgrGMSu2CDO82hzlQ5qSb5xmx3RUrke/QgnoEx7KvmRJHQuZHZmZTLSuuHwFf0DJPybFMXMYf+WJdxHy/nQ==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2':
-    resolution: {integrity: sha512-FPdhvsW6g06T9BWT0qTwiVZYE2WIFo2dY5aCSpjG/S/u1tby+wXoslXS0kl3/KXnULlLr1E3NPRRw0g7t2kgaQ==}
-    engines: {node: '>= 20'}
-    cpu: [arm]
-    os: [linux]
-
-  '@tailwindcss/oxide-linux-arm64-gnu@4.2.2':
-    resolution: {integrity: sha512-4og1V+ftEPXGttOO7eCmW7VICmzzJWgMx+QXAJRAhjrSjumCwWqMfkDrNu1LXEQzNAwz28NCUpucgQPrR4S2yw==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@tailwindcss/oxide-linux-arm64-musl@4.2.2':
-    resolution: {integrity: sha512-oCfG/mS+/+XRlwNjnsNLVwnMWYH7tn/kYPsNPh+JSOMlnt93mYNCKHYzylRhI51X+TbR+ufNhhKKzm6QkqX8ag==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@tailwindcss/oxide-linux-x64-gnu@4.2.2':
-    resolution: {integrity: sha512-rTAGAkDgqbXHNp/xW0iugLVmX62wOp2PoE39BTCGKjv3Iocf6AFbRP/wZT/kuCxC9QBh9Pu8XPkv/zCZB2mcMg==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [linux]
-
-  '@tailwindcss/oxide-linux-x64-musl@4.2.2':
-    resolution: {integrity: sha512-XW3t3qwbIwiSyRCggeO2zxe3KWaEbM0/kW9e8+0XpBgyKU4ATYzcVSMKteZJ1iukJ3HgHBjbg9P5YPRCVUxlnQ==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [linux]
-
-  '@tailwindcss/oxide-wasm32-wasi@4.2.2':
-    resolution: {integrity: sha512-eKSztKsmEsn1O5lJ4ZAfyn41NfG7vzCg496YiGtMDV86jz1q/irhms5O0VrY6ZwTUkFy/EKG3RfWgxSI3VbZ8Q==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-    bundledDependencies:
-      - '@napi-rs/wasm-runtime'
-      - '@emnapi/core'
-      - '@emnapi/runtime'
-      - '@tybys/wasm-util'
-      - '@emnapi/wasi-threads'
-      - tslib
-
-  '@tailwindcss/oxide-win32-arm64-msvc@4.2.2':
-    resolution: {integrity: sha512-qPmaQM4iKu5mxpsrWZMOZRgZv1tOZpUm+zdhhQP0VhJfyGGO3aUKdbh3gDZc/dPLQwW4eSqWGrrcWNBZWUWaXQ==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@tailwindcss/oxide-win32-x64-msvc@4.2.2':
-    resolution: {integrity: sha512-1T/37VvI7WyH66b+vqHj/cLwnCxt7Qt3WFu5Q8hk65aOvlwAhs7rAp1VkulBJw/N4tMirXjVnylTR72uI0HGcA==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [win32]
-
-  '@tailwindcss/oxide@4.2.2':
-    resolution: {integrity: sha512-qEUA07+E5kehxYp9BVMpq9E8vnJuBHfJEC0vPC5e7iL/hw7HR61aDKoVoKzrG+QKp56vhNZe4qwkRmMC0zDLvg==}
-    engines: {node: '>= 20'}
-
-  '@tailwindcss/vite@4.2.2':
-    resolution: {integrity: sha512-mEiF5HO1QqCLXoNEfXVA1Tzo+cYsrqV7w9Juj2wdUFyW07JRenqMG225MvPwr3ZD9N1bFQj46X7r33iHxLUW0w==}
+  '@tabler/icons-react@3.41.1':
+    resolution: {integrity: sha512-kUgweE+DJtAlMZVIns1FTDdcbpRVnkK7ZpUOXmoxy3JAF0rSHj0TcP4VHF14+gMJGnF+psH2Zt26BLT6owetBA==}
     peerDependencies:
-      vite: ^5.2.0 || ^6 || ^7 || ^8
+      react: '>= 16'
 
-  '@ts-morph/common@0.27.0':
-    resolution: {integrity: sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ==}
+  '@tabler/icons@3.41.1':
+    resolution: {integrity: sha512-OaRnVbRmH2nHtFeg+RmMJ/7m2oBIF9XCJAUD5gQnMrpK9f05ydj8MZrAf3NZQqOXyxGN1UBL0D5IKLLEUfr74Q==}
 
   '@tybys/wasm-util@0.10.1':
     resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
@@ -791,15 +506,9 @@ packages:
   '@types/react@19.2.14':
     resolution: {integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==}
 
-  '@types/statuses@2.0.6':
-    resolution: {integrity: sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA==}
-
   '@types/use-sync-external-store@0.0.6':
     resolution: {integrity: sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==}
 
-  '@types/validate-npm-package-name@4.0.2':
-    resolution: {integrity: sha512-lrpDziQipxCEeK5kWxvljWYhUvOiB2A9izZd9B2AFarYAkqZshb4lPbRs7zKEic6eGtH8V/2qJW+dPp9OtF6bw==}
-
   '@vitejs/plugin-react@6.0.1':
     resolution: {integrity: sha512-l9X/E3cDb+xY3SWzlG1MOGt2usfEHGMNIaegaUGFsLkb3RCn/k8/TOXBcab+OndDI4TBtktT8/9BwwW8Vi9KUQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -813,178 +522,18 @@ packages:
       babel-plugin-react-compiler:
         optional: true
 
-  accepts@2.0.0:
-    resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
-    engines: {node: '>= 0.6'}
-
-  agent-base@7.1.4:
-    resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
-    engines: {node: '>= 14'}
-
-  ajv-formats@3.0.1:
-    resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
-    peerDependencies:
-      ajv: ^8.0.0
-    peerDependenciesMeta:
-      ajv:
-        optional: true
-
-  ajv@8.18.0:
-    resolution: {integrity: sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==}
-
-  ansi-regex@5.0.1:
-    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
-    engines: {node: '>=8'}
-
-  ansi-regex@6.2.2:
-    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
-    engines: {node: '>=12'}
-
-  ansi-styles@4.3.0:
-    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
-    engines: {node: '>=8'}
-
-  argparse@2.0.1:
-    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
-
-  ast-types@0.16.1:
-    resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
+  attr-accept@2.2.5:
+    resolution: {integrity: sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==}
     engines: {node: '>=4'}
 
-  balanced-match@4.0.4:
-    resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
-    engines: {node: 18 || 20 || >=22}
-
-  baseline-browser-mapping@2.10.12:
-    resolution: {integrity: sha512-qyq26DxfY4awP2gIRXhhLWfwzwI+N5Nxk6iQi8EFizIaWIjqicQTE4sLnZZVdeKPRcVNoJOkkpfzoIYuvCKaIQ==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-
-  body-parser@2.2.2:
-    resolution: {integrity: sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==}
-    engines: {node: '>=18'}
-
-  brace-expansion@5.0.5:
-    resolution: {integrity: sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==}
-    engines: {node: 18 || 20 || >=22}
-
-  braces@3.0.3:
-    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
-    engines: {node: '>=8'}
-
-  browserslist@4.28.1:
-    resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-
-  bundle-name@4.1.0:
-    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
-    engines: {node: '>=18'}
-
-  bytes@3.1.2:
-    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
-    engines: {node: '>= 0.8'}
-
-  call-bind-apply-helpers@1.0.2:
-    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
-    engines: {node: '>= 0.4'}
-
-  call-bound@1.0.4:
-    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
-    engines: {node: '>= 0.4'}
-
-  callsites@3.1.0:
-    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
-    engines: {node: '>=6'}
-
-  caniuse-lite@1.0.30001781:
-    resolution: {integrity: sha512-RdwNCyMsNBftLjW6w01z8bKEvT6e/5tpPVEgtn22TiLGlstHOVecsX2KHFkD5e/vRnIE4EGzpuIODb3mtswtkw==}
-
-  chalk@5.6.2:
-    resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==}
-    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
-
-  class-variance-authority@0.7.1:
-    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
-
-  cli-cursor@5.0.0:
-    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
-    engines: {node: '>=18'}
-
-  cli-spinners@2.9.2:
-    resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
-    engines: {node: '>=6'}
-
-  cli-width@4.1.0:
-    resolution: {integrity: sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==}
-    engines: {node: '>= 12'}
-
-  cliui@8.0.1:
-    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
-    engines: {node: '>=12'}
+  camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
 
   clsx@2.1.1:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
-  code-block-writer@13.0.3:
-    resolution: {integrity: sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg==}
-
-  color-convert@2.0.1:
-    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
-    engines: {node: '>=7.0.0'}
-
-  color-name@1.1.4:
-    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-
-  commander@11.1.0:
-    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
-    engines: {node: '>=16'}
-
-  commander@14.0.3:
-    resolution: {integrity: sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==}
-    engines: {node: '>=20'}
-
-  content-disposition@1.0.1:
-    resolution: {integrity: sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q==}
-    engines: {node: '>=18'}
-
-  content-type@1.0.5:
-    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
-    engines: {node: '>= 0.6'}
-
-  convert-source-map@2.0.0:
-    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
-
-  cookie-signature@1.2.2:
-    resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
-    engines: {node: '>=6.6.0'}
-
-  cookie@0.7.2:
-    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
-    engines: {node: '>= 0.6'}
-
-  cookie@1.1.1:
-    resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==}
-    engines: {node: '>=18'}
-
-  cors@2.8.6:
-    resolution: {integrity: sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==}
-    engines: {node: '>= 0.10'}
-
-  cosmiconfig@9.0.1:
-    resolution: {integrity: sha512-hr4ihw+DBqcvrsEDioRO31Z17x71pUYoNe/4h6Z0wB72p7MU7/9gH8Q3s12NFhHPfYBBOV3qyfUxmr/Yn3shnQ==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      typescript: '>=4.9.5'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  cross-spawn@7.0.6:
-    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
-    engines: {node: '>= 8'}
-
   cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -1037,108 +586,21 @@ packages:
     resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
     engines: {node: '>=12'}
 
-  data-uri-to-buffer@4.0.1:
-    resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
-    engines: {node: '>= 12'}
-
-  debug@4.4.3:
-    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
+  dayjs@1.11.20:
+    resolution: {integrity: sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ==}
 
   decimal.js-light@2.5.1:
     resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
 
-  dedent@1.7.2:
-    resolution: {integrity: sha512-WzMx3mW98SN+zn3hgemf4OzdmyNhhhKz5Ay0pUfQiMQ3e1g+xmTJWp/pKdwKVXhdSkAEGIIzqeuWrL3mV/AXbA==}
-    peerDependencies:
-      babel-plugin-macros: ^3.1.0
-    peerDependenciesMeta:
-      babel-plugin-macros:
-        optional: true
-
-  deepmerge@4.3.1:
-    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
-    engines: {node: '>=0.10.0'}
-
-  default-browser-id@5.0.1:
-    resolution: {integrity: sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==}
-    engines: {node: '>=18'}
-
-  default-browser@5.5.0:
-    resolution: {integrity: sha512-H9LMLr5zwIbSxrmvikGuI/5KGhZ8E2zH3stkMgM5LpOWDutGM2JZaj460Udnf1a+946zc7YBgrqEWwbk7zHvGw==}
-    engines: {node: '>=18'}
-
-  define-lazy-prop@3.0.0:
-    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
-    engines: {node: '>=12'}
-
-  depd@2.0.0:
-    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
-    engines: {node: '>= 0.8'}
-
   detect-libc@2.1.2:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
 
-  diff@8.0.4:
-    resolution: {integrity: sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==}
-    engines: {node: '>=0.3.1'}
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
-  dotenv@17.3.1:
-    resolution: {integrity: sha512-IO8C/dzEb6O3F9/twg6ZLXz164a2fhTnEWb95H23Dm4OuN+92NmEAlTrupP9VW6Jm3sO26tQlqyvyi4CsnY9GA==}
-    engines: {node: '>=12'}
-
-  dunder-proto@1.0.1:
-    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
-    engines: {node: '>= 0.4'}
-
-  eciesjs@0.4.18:
-    resolution: {integrity: sha512-wG99Zcfcys9fZux7Cft8BAX/YrOJLJSZ3jyYPfhZHqN2E+Ffx+QXBDsv3gubEgPtV6dTzJMSQUwk1H98/t/0wQ==}
-    engines: {bun: '>=1', deno: '>=2', node: '>=16'}
-
-  ee-first@1.1.1:
-    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
-
-  electron-to-chromium@1.5.328:
-    resolution: {integrity: sha512-QNQ5l45DzYytThO21403XN3FvK0hOkWDG8viNf6jqS42msJ8I4tGDSpBCgvDRRPnkffafiwAym2X2eHeGD2V0w==}
-
-  emoji-regex@10.6.0:
-    resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
-
-  emoji-regex@8.0.0:
-    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
-
-  encodeurl@2.0.0:
-    resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
-    engines: {node: '>= 0.8'}
-
-  enhanced-resolve@5.20.1:
-    resolution: {integrity: sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==}
-    engines: {node: '>=10.13.0'}
-
-  env-paths@2.2.1:
-    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
-    engines: {node: '>=6'}
-
-  error-ex@1.3.4:
-    resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
-
-  es-define-property@1.0.1:
-    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
-    engines: {node: '>= 0.4'}
-
-  es-errors@1.3.0:
-    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
-    engines: {node: '>= 0.4'}
-
-  es-object-atoms@1.1.1:
-    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
-    engines: {node: '>= 0.4'}
+  dom-helpers@5.2.1:
+    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
 
   es-toolkit@1.45.1:
     resolution: {integrity: sha512-/jhoOj/Fx+A+IIyDNOvO3TItGmlMKhtX8ISAHKE90c4b/k1tqaqEZ+uUqfpU8DMnW5cgNJv606zS55jGvza0Xw==}
@@ -1148,22 +610,6 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  escalade@3.2.0:
-    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
-    engines: {node: '>=6'}
-
-  escape-html@1.0.3:
-    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
-
-  esprima@4.0.1:
-    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
-    engines: {node: '>=4'}
-    hasBin: true
-
-  etag@1.8.1:
-    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
-    engines: {node: '>= 0.6'}
-
   eventemitter3@5.0.4:
     resolution: {integrity: sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==}
 
@@ -1171,45 +617,9 @@ packages:
     resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
     engines: {node: '>=0.8.x'}
 
-  eventsource-parser@3.0.6:
-    resolution: {integrity: sha512-Vo1ab+QXPzZ4tCa8SwIHJFaSzy4R6SHf7BY79rFBDf0idraZWAkYrDjDj8uWaSm3S2TK+hJ7/t1CEmZ7jXw+pg==}
-    engines: {node: '>=18.0.0'}
-
-  eventsource@3.0.7:
-    resolution: {integrity: sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==}
-    engines: {node: '>=18.0.0'}
-
-  execa@5.1.1:
-    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
-    engines: {node: '>=10'}
-
-  execa@9.6.1:
-    resolution: {integrity: sha512-9Be3ZoN4LmYR90tUoVu2te2BsbzHfhJyfEiAVfz7N5/zv+jduIfLrV2xdQXOHbaD6KgpGdO9PRPM1Y4Q9QkPkA==}
-    engines: {node: ^18.19.0 || >=20.5.0}
-
-  express-rate-limit@8.3.1:
-    resolution: {integrity: sha512-D1dKN+cmyPWuvB+G2SREQDzPY1agpBIcTa9sJxOPMCNeH3gwzhqJRDWCXW3gg0y//+LQ/8j52JbMROWyrKdMdw==}
-    engines: {node: '>= 16'}
-    peerDependencies:
-      express: '>= 4.11'
-
-  express@5.2.1:
-    resolution: {integrity: sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==}
-    engines: {node: '>= 18'}
-
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
-  fast-glob@3.3.3:
-    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
-    engines: {node: '>=8.6.0'}
-
-  fast-uri@3.1.0:
-    resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
-
-  fastq@1.20.1:
-    resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
-
   fdir@6.5.0:
     resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
     engines: {node: '>=12.0.0'}
@@ -1219,95 +629,22 @@ packages:
       picomatch:
         optional: true
 
-  fetch-blob@3.2.0:
-    resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
-    engines: {node: ^12.20 || >= 14.13}
-
-  figures@6.1.0:
-    resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
-    engines: {node: '>=18'}
-
-  fill-range@7.1.1:
-    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
-    engines: {node: '>=8'}
-
-  finalhandler@2.1.1:
-    resolution: {integrity: sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==}
-    engines: {node: '>= 18.0.0'}
-
-  formdata-polyfill@4.0.10:
-    resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
-    engines: {node: '>=12.20.0'}
-
-  forwarded@0.2.0:
-    resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
-    engines: {node: '>= 0.6'}
-
-  fresh@2.0.0:
-    resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
-    engines: {node: '>= 0.8'}
-
-  fs-extra@11.3.4:
-    resolution: {integrity: sha512-CTXd6rk/M3/ULNQj8FBqBWHYBVYybQ3VPBw0xGKFe3tuH7ytT6ACnvzpIQ3UZtB8yvUKC2cXn1a+x+5EVQLovA==}
-    engines: {node: '>=14.14'}
+  file-selector@2.1.2:
+    resolution: {integrity: sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==}
+    engines: {node: '>= 12'}
 
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
 
-  function-bind@1.1.2:
-    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
-
-  fuzzysort@3.1.0:
-    resolution: {integrity: sha512-sR9BNCjBg6LNgwvxlBd0sBABvQitkLzoVY9MYYROQVX/FvfJ4Mai9LsGhDgd8qYdds0bY77VzYd5iuB+v5rwQQ==}
-
-  gensync@1.0.0-beta.2:
-    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
-    engines: {node: '>=6.9.0'}
-
-  get-caller-file@2.0.5:
-    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
-    engines: {node: 6.* || 8.* || >= 10.*}
-
-  get-east-asian-width@1.5.0:
-    resolution: {integrity: sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA==}
-    engines: {node: '>=18'}
-
-  get-intrinsic@1.3.0:
-    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
-    engines: {node: '>= 0.4'}
-
-  get-own-enumerable-keys@1.0.0:
-    resolution: {integrity: sha512-PKsK2FSrQCyxcGHsGrLDcK0lx+0Ke+6e8KFFozA9/fIQLhQzPaRvJFdcz7+Axg3jUH/Mq+NI4xa5u/UT2tQskA==}
-    engines: {node: '>=14.16'}
-
-  get-proto@1.0.1:
-    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
-    engines: {node: '>= 0.4'}
-
-  get-stream@6.0.1:
-    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
-    engines: {node: '>=10'}
-
-  get-stream@9.0.1:
-    resolution: {integrity: sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==}
-    engines: {node: '>=18'}
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
 
   get-tsconfig@4.13.7:
     resolution: {integrity: sha512-7tN6rFgBlMgpBML5j8typ92BKFi2sFQvIdpAqLA2beia5avZDrMs0FLZiM5etShWq5irVyGcGMEA1jcDaK7A/Q==}
 
-  glob-parent@5.1.2:
-    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
-    engines: {node: '>= 6'}
-
-  gopd@1.2.0:
-    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
-    engines: {node: '>= 0.4'}
-
-  graceful-fs@4.2.11:
-    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
-
   graphology-layout-forceatlas2@0.10.1:
     resolution: {integrity: sha512-ogzBeF1FvWzjkikrIFwxhlZXvD2+wlY54lqhsrWprcdPjopM2J9HoMweUmIgwaTvY4bUYVimpSsOdvDv1gPRFQ==}
     peerDependencies:
@@ -1326,199 +663,26 @@ packages:
     peerDependencies:
       graphology-types: '>=0.24.0'
 
-  graphql@16.13.2:
-    resolution: {integrity: sha512-5bJ+nf/UCpAjHM8i06fl7eLyVC9iuNAjm9qzkiu2ZGhM0VscSvS6WDPfAwkdkBuoXGM9FJSbKl6wylMwP9Ktig==}
-    engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
-
-  has-symbols@1.1.0:
-    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
-    engines: {node: '>= 0.4'}
-
-  hasown@2.0.2:
-    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
-    engines: {node: '>= 0.4'}
-
-  headers-polyfill@4.0.3:
-    resolution: {integrity: sha512-IScLbePpkvO846sIwOtOTDjutRMWdXdJmXdMvk6gCBHxFO8d+QKOQedyZSxFTTFYRSmlgSTDtXqqq4pcenBXLQ==}
-
-  hono@4.12.9:
-    resolution: {integrity: sha512-wy3T8Zm2bsEvxKZM5w21VdHDDcwVS1yUFFY6i8UobSsKfFceT7TOwhbhfKsDyx7tYQlmRM5FLpIuYvNFyjctiA==}
-    engines: {node: '>=16.9.0'}
-
-  http-errors@2.0.1:
-    resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
-    engines: {node: '>= 0.8'}
-
-  https-proxy-agent@7.0.6:
-    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
-    engines: {node: '>= 14'}
-
-  human-signals@2.1.0:
-    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
-    engines: {node: '>=10.17.0'}
-
-  human-signals@8.0.1:
-    resolution: {integrity: sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ==}
-    engines: {node: '>=18.18.0'}
-
-  iconv-lite@0.7.2:
-    resolution: {integrity: sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==}
-    engines: {node: '>=0.10.0'}
-
-  ignore@5.3.2:
-    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
-    engines: {node: '>= 4'}
-
   immer@10.2.0:
     resolution: {integrity: sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==}
 
   immer@11.1.4:
     resolution: {integrity: sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw==}
 
-  import-fresh@3.3.1:
-    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
-    engines: {node: '>=6'}
-
-  inherits@2.0.4:
-    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
-
   internmap@2.0.3:
     resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
     engines: {node: '>=12'}
 
-  ip-address@10.1.0:
-    resolution: {integrity: sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q==}
-    engines: {node: '>= 12'}
-
-  ipaddr.js@1.9.1:
-    resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
-    engines: {node: '>= 0.10'}
-
-  is-arrayish@0.2.1:
-    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
-
-  is-docker@3.0.0:
-    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    hasBin: true
-
-  is-extglob@2.1.1:
-    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
-    engines: {node: '>=0.10.0'}
-
-  is-fullwidth-code-point@3.0.0:
-    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
-    engines: {node: '>=8'}
-
-  is-glob@4.0.3:
-    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
-    engines: {node: '>=0.10.0'}
-
-  is-in-ssh@1.0.0:
-    resolution: {integrity: sha512-jYa6Q9rH90kR1vKB6NM7qqd1mge3Fx4Dhw5TVlK1MUBqhEOuCagrEHMevNuCcbECmXZ0ThXkRm+Ymr51HwEPAw==}
-    engines: {node: '>=20'}
-
-  is-inside-container@1.0.0:
-    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
-    engines: {node: '>=14.16'}
-    hasBin: true
-
-  is-interactive@2.0.0:
-    resolution: {integrity: sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==}
-    engines: {node: '>=12'}
-
-  is-node-process@1.2.0:
-    resolution: {integrity: sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==}
-
-  is-number@7.0.0:
-    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
-    engines: {node: '>=0.12.0'}
-
-  is-obj@3.0.0:
-    resolution: {integrity: sha512-IlsXEHOjtKhpN8r/tRFj2nDyTmHvcfNeu/nrRIcXE17ROeatXchkojffa1SpdqW4cr/Fj6QkEf/Gn4zf6KKvEQ==}
-    engines: {node: '>=12'}
-
-  is-plain-obj@4.1.0:
-    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
-    engines: {node: '>=12'}
-
-  is-promise@4.0.0:
-    resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
-
-  is-regexp@3.1.0:
-    resolution: {integrity: sha512-rbku49cWloU5bSMI+zaRaXdQHXnthP6DZ/vLnfdSKyL4zUzuWnomtOEiZZOd+ioQ+avFo/qau3KPTc7Fjy1uPA==}
-    engines: {node: '>=12'}
-
-  is-stream@2.0.1:
-    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
-    engines: {node: '>=8'}
-
-  is-stream@4.0.1:
-    resolution: {integrity: sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==}
-    engines: {node: '>=18'}
-
-  is-unicode-supported@1.3.0:
-    resolution: {integrity: sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==}
-    engines: {node: '>=12'}
-
-  is-unicode-supported@2.1.0:
-    resolution: {integrity: sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==}
-    engines: {node: '>=18'}
-
-  is-wsl@3.1.1:
-    resolution: {integrity: sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==}
-    engines: {node: '>=16'}
-
-  isexe@2.0.0:
-    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
-
-  isexe@3.1.5:
-    resolution: {integrity: sha512-6B3tLtFqtQS4ekarvLVMZ+X+VlvQekbe4taUkf/rhVO3d/h0M2rfARm/pXLcPEsjjMsFgrFgSrhQIxcSVrBz8w==}
-    engines: {node: '>=18'}
-
   jiti@2.6.1:
     resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
     hasBin: true
 
-  jose@6.2.2:
-    resolution: {integrity: sha512-d7kPDd34KO/YnzaDOlikGpOurfF0ByC2sEV4cANCtdqLlTfBlw2p14O/5d/zv40gJPbIQxfES3nSx1/oYNyuZQ==}
-
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
-  js-yaml@4.1.1:
-    resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
-    hasBin: true
-
-  jsesc@3.1.0:
-    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
-    engines: {node: '>=6'}
-    hasBin: true
-
-  json-parse-even-better-errors@2.3.1:
-    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
-
-  json-schema-traverse@1.0.0:
-    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
-
-  json-schema-typed@8.0.2:
-    resolution: {integrity: sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA==}
-
-  json5@2.2.3:
-    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
-    engines: {node: '>=6'}
-    hasBin: true
-
-  jsonfile@6.2.0:
-    resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
-
-  kleur@3.0.3:
-    resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
-    engines: {node: '>=6'}
-
-  kleur@4.1.5:
-    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
-    engines: {node: '>=6'}
+  klona@2.0.6:
+    resolution: {integrity: sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==}
+    engines: {node: '>= 8'}
 
   lightningcss-android-arm64@1.32.0:
     resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
@@ -1590,249 +754,89 @@ packages:
     resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
     engines: {node: '>= 12.0.0'}
 
-  lines-and-columns@1.2.4:
-    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-
-  log-symbols@6.0.0:
-    resolution: {integrity: sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw==}
-    engines: {node: '>=18'}
-
-  lru-cache@5.1.1:
-    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
-
-  lucide-react@1.7.0:
-    resolution: {integrity: sha512-yI7BeItCLZJTXikmK4KNUGCKoGzSvbKlfCvw44bU4fXAL6v3gYS4uHD1jzsLkfwODYwI6Drw5Tu9Z5ulDe0TSg==}
-    peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
-  magic-string@0.30.21:
-    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
-
-  math-intrinsics@1.1.0:
-    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
-    engines: {node: '>= 0.4'}
-
-  media-typer@1.1.0:
-    resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
-    engines: {node: '>= 0.8'}
-
-  merge-descriptors@2.0.0:
-    resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
-    engines: {node: '>=18'}
-
-  merge-stream@2.0.0:
-    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
-
-  merge2@1.4.1:
-    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
-    engines: {node: '>= 8'}
-
-  micromatch@4.0.8:
-    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
-    engines: {node: '>=8.6'}
-
-  mime-db@1.54.0:
-    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
-    engines: {node: '>= 0.6'}
-
-  mime-types@3.0.2:
-    resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==}
-    engines: {node: '>=18'}
-
-  mimic-fn@2.1.0:
-    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
-    engines: {node: '>=6'}
-
-  mimic-function@5.0.1:
-    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
-    engines: {node: '>=18'}
-
-  minimatch@10.2.4:
-    resolution: {integrity: sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==}
-    engines: {node: 18 || 20 || >=22}
-
-  minimist@1.2.8:
-    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
-
-  ms@2.1.3:
-    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
-
-  msw@2.12.14:
-    resolution: {integrity: sha512-4KXa4nVBIBjbDbd7vfQNuQ25eFxug0aropCQFoI0JdOBuJWamkT1yLVIWReFI8SiTRc+H1hKzaNk+cLk2N9rtQ==}
-    engines: {node: '>=18'}
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
-    peerDependencies:
-      typescript: '>= 4.8.x'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  mute-stream@2.0.0:
-    resolution: {integrity: sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==}
-    engines: {node: ^18.17.0 || >=20.5.0}
 
   nanoid@3.3.11:
     resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  negotiator@1.0.0:
-    resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
-    engines: {node: '>= 0.6'}
-
-  node-domexception@1.0.0:
-    resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
-    engines: {node: '>=10.5.0'}
-    deprecated: Use your platform's native DOMException instead
-
-  node-fetch@3.3.2:
-    resolution: {integrity: sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
-  node-releases@2.0.36:
-    resolution: {integrity: sha512-TdC8FSgHz8Mwtw9g5L4gR/Sh9XhSP/0DEkQxfEFXOpiul5IiHgHan2VhYYb6agDSfp4KuvltmGApc8HMgUrIkA==}
-
-  npm-run-path@4.0.1:
-    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
-    engines: {node: '>=8'}
-
-  npm-run-path@6.0.0:
-    resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
-    engines: {node: '>=18'}
-
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
 
-  object-inspect@1.13.4:
-    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
-    engines: {node: '>= 0.4'}
-
-  object-treeify@1.1.33:
-    resolution: {integrity: sha512-EFVjAYfzWqWsBMRHPMAXLCDIJnpMhdWAqR7xG6M6a2cs6PMFpl/+Z20w9zDW4vkxOFfddegBKq9Rehd0bxWE7A==}
-    engines: {node: '>= 10'}
-
-  on-finished@2.4.1:
-    resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
-    engines: {node: '>= 0.8'}
-
-  once@1.4.0:
-    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
-
-  onetime@5.1.2:
-    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
-    engines: {node: '>=6'}
-
-  onetime@7.0.0:
-    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
-    engines: {node: '>=18'}
-
-  open@11.0.0:
-    resolution: {integrity: sha512-smsWv2LzFjP03xmvFoJ331ss6h+jixfA4UUV/Bsiyuu4YJPfN+FIQGOIiv4w9/+MoHkfkJ22UIaQWRVFRfH6Vw==}
-    engines: {node: '>=20'}
-
-  ora@8.2.0:
-    resolution: {integrity: sha512-weP+BZ8MVNnlCm8c0Qdc1WSWq4Qn7I+9CJGm7Qali6g44e/PUzbjNqJX5NJ9ljlNMosfJvg1fKEGILklK9cwnw==}
-    engines: {node: '>=18'}
-
-  outvariant@1.4.3:
-    resolution: {integrity: sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==}
-
-  parent-module@1.0.1:
-    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
-    engines: {node: '>=6'}
-
-  parse-json@5.2.0:
-    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
-    engines: {node: '>=8'}
-
-  parse-ms@4.0.0:
-    resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==}
-    engines: {node: '>=18'}
-
-  parseurl@1.3.3:
-    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
-    engines: {node: '>= 0.8'}
-
-  path-browserify@1.0.1:
-    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
-
-  path-key@3.1.1:
-    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
-    engines: {node: '>=8'}
-
-  path-key@4.0.0:
-    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
-    engines: {node: '>=12'}
-
-  path-to-regexp@6.3.0:
-    resolution: {integrity: sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==}
-
-  path-to-regexp@8.4.0:
-    resolution: {integrity: sha512-PuseHIvAnz3bjrM2rGJtSgo1zjgxapTLZ7x2pjhzWwlp4SJQgK3f3iZIQwkpEnBaKz6seKBADpM4B4ySkuYypg==}
-
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
-  picomatch@2.3.2:
-    resolution: {integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==}
-    engines: {node: '>=8.6'}
-
   picomatch@4.0.4:
     resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
     engines: {node: '>=12'}
 
-  pkce-challenge@5.0.1:
-    resolution: {integrity: sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ==}
-    engines: {node: '>=16.20.0'}
+  postcss-js@4.1.0:
+    resolution: {integrity: sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+
+  postcss-mixins@12.1.2:
+    resolution: {integrity: sha512-90pSxmZVfbX9e5xCv7tI5RV1mnjdf16y89CJKbf/hD7GyOz1FCxcYMl8ZYA8Hc56dbApTKKmU9HfvgfWdCxlwg==}
+    engines: {node: ^20.0 || ^22.0 || >=24.0}
+    peerDependencies:
+      postcss: ^8.2.14
+
+  postcss-nested@7.0.2:
+    resolution: {integrity: sha512-5osppouFc0VR9/VYzYxO03VaDa3e8F23Kfd6/9qcZTUI8P58GIYlArOET2Wq0ywSl2o2PjELhYOFI4W7l5QHKw==}
+    engines: {node: '>=18.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+
+  postcss-preset-mantine@1.18.0:
+    resolution: {integrity: sha512-sP6/s1oC7cOtBdl4mw/IRKmKvYTuzpRrH/vT6v9enMU/EQEQ31eQnHcWtFghOXLH87AAthjL/Q75rLmin1oZoA==}
+    peerDependencies:
+      postcss: '>=8.0.0'
 
   postcss-selector-parser@7.1.1:
     resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
     engines: {node: '>=4'}
 
+  postcss-simple-vars@7.0.1:
+    resolution: {integrity: sha512-5GLLXaS8qmzHMOjVxqkk1TZPf1jMqesiI7qLhnlyERalG0sMbHIbJqrcnrpmZdKCLglHnRHoEBB61RtGTsj++A==}
+    engines: {node: '>=14.0'}
+    peerDependencies:
+      postcss: ^8.2.1
+
   postcss@8.5.8:
     resolution: {integrity: sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==}
     engines: {node: ^10 || ^12 || >=14}
 
-  powershell-utils@0.1.0:
-    resolution: {integrity: sha512-dM0jVuXJPsDN6DvRpea484tCUaMiXWjuCn++HGTqUWzGDjv5tZkEZldAJ/UMlqRYGFrD/etByo4/xOuC/snX2A==}
-    engines: {node: '>=20'}
-
-  pretty-ms@9.3.0:
-    resolution: {integrity: sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==}
-    engines: {node: '>=18'}
-
-  prompts@2.4.2:
-    resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
-    engines: {node: '>= 6'}
-
-  proxy-addr@2.0.7:
-    resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
-    engines: {node: '>= 0.10'}
-
-  qs@6.15.0:
-    resolution: {integrity: sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==}
-    engines: {node: '>=0.6'}
-
-  queue-microtask@1.2.3:
-    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
-
-  range-parser@1.2.1:
-    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
-    engines: {node: '>= 0.6'}
-
-  raw-body@3.0.2:
-    resolution: {integrity: sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==}
-    engines: {node: '>= 0.10'}
+  prop-types@15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
   react-dom@19.2.4:
     resolution: {integrity: sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==}
     peerDependencies:
       react: ^19.2.4
 
+  react-dropzone@15.0.0:
+    resolution: {integrity: sha512-lGjYV/EoqEjEWPnmiSvH4v5IoIAwQM2W4Z1C0Q/Pw2xD0eVzKPS359BQTUMum+1fa0kH2nrKjuavmTPOGhpLPg==}
+    engines: {node: '>= 10.13'}
+    peerDependencies:
+      react: '>= 16.8 || 18.0.0'
+
+  react-is@16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+
   react-is@19.2.4:
     resolution: {integrity: sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA==}
 
+  react-number-format@5.4.5:
+    resolution: {integrity: sha512-y8O2yHHj3w0aE9XO8d2BCcUOOdQTRSVq+WIuMlLVucAm5XNjJAy+BoOJiuQMldVYVOKTMyvVNfnbl2Oqp+YxGw==}
+    peerDependencies:
+      react: ^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   react-redux@9.2.0:
     resolution: {integrity: sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==}
     peerDependencies:
@@ -1845,14 +849,46 @@ packages:
       redux:
         optional: true
 
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.7.2:
+    resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-style-singleton@2.2.3:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-transition-group@4.4.5:
+    resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
+    peerDependencies:
+      react: '>=16.6.0'
+      react-dom: '>=16.6.0'
+
   react@19.2.4:
     resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
     engines: {node: '>=0.10.0'}
 
-  recast@0.23.11:
-    resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
-    engines: {node: '>= 4'}
-
   recharts@3.8.1:
     resolution: {integrity: sha512-mwzmO1s9sFL0TduUpwndxCUNoXsBw3u3E/0+A+cLcrSfQitSG62L32N69GhqUrrT5qKcAE3pCGVINC6pqkBBQg==}
     engines: {node: '>=18'}
@@ -1869,163 +905,32 @@ packages:
   redux@5.0.1:
     resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==}
 
-  require-directory@2.1.1:
-    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
-    engines: {node: '>=0.10.0'}
-
-  require-from-string@2.0.2:
-    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
-    engines: {node: '>=0.10.0'}
-
   reselect@5.1.1:
     resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}
 
-  resolve-from@4.0.0:
-    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
-    engines: {node: '>=4'}
-
   resolve-pkg-maps@1.0.0:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
 
-  restore-cursor@5.1.0:
-    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
-    engines: {node: '>=18'}
-
-  rettime@0.10.1:
-    resolution: {integrity: sha512-uyDrIlUEH37cinabq0AX4QbgV4HbFZ/gqoiunWQ1UqBtRvTTytwhNYjE++pO/MjPTZL5KQCf2bEoJ/BJNVQ5Kw==}
-
-  reusify@1.1.0:
-    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
-    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
-
   rolldown@1.0.0-rc.12:
     resolution: {integrity: sha512-yP4USLIMYrwpPHEFB5JGH1uxhcslv6/hL0OyvTuY+3qlOSJvZ7ntYnoWpehBxufkgN0cvXxppuTu5hHa/zPh+A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
-  router@2.2.0:
-    resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
-    engines: {node: '>= 18'}
-
-  run-applescript@7.1.0:
-    resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
-    engines: {node: '>=18'}
-
-  run-parallel@1.2.0:
-    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
-
-  safer-buffer@2.1.2:
-    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
-
   scheduler@0.27.0:
     resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
-  semver@6.3.1:
-    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
-    hasBin: true
-
-  send@1.2.1:
-    resolution: {integrity: sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==}
-    engines: {node: '>= 18'}
-
-  serve-static@2.2.1:
-    resolution: {integrity: sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==}
-    engines: {node: '>= 18'}
-
-  setprototypeof@1.2.0:
-    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
-
-  shadcn@4.1.1:
-    resolution: {integrity: sha512-nBj+7LYC9kzV9v9QmRPpoOhfW4KctJVQejywdAt/K+K+z4RYlJOcO2a4AaF7elrRWkfCbgXeGK02liV0KB9HvQ==}
-    hasBin: true
-
-  shebang-command@2.0.0:
-    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
-    engines: {node: '>=8'}
-
-  shebang-regex@3.0.0:
-    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
-    engines: {node: '>=8'}
-
-  side-channel-list@1.0.0:
-    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
-    engines: {node: '>= 0.4'}
-
-  side-channel-map@1.0.1:
-    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
-    engines: {node: '>= 0.4'}
-
-  side-channel-weakmap@1.0.2:
-    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
-    engines: {node: '>= 0.4'}
-
-  side-channel@1.1.0:
-    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
-    engines: {node: '>= 0.4'}
-
   sigma@3.0.2:
     resolution: {integrity: sha512-/BUbeOwPGruiBOm0YQQ6ZMcLIZ6tf/W+Jcm7dxZyAX0tK3WP9/sq7/NAWBxPIxVahdGjCJoGwej0Gdrv0DxlQQ==}
 
-  signal-exit@3.0.7:
-    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
-
-  signal-exit@4.1.0:
-    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
-    engines: {node: '>=14'}
-
-  sisteransi@1.0.5:
-    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
-
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
-  source-map@0.6.1:
-    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
-    engines: {node: '>=0.10.0'}
-
-  statuses@2.0.2:
-    resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
-    engines: {node: '>= 0.8'}
-
-  stdin-discarder@0.2.2:
-    resolution: {integrity: sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ==}
-    engines: {node: '>=18'}
-
-  strict-event-emitter@0.5.1:
-    resolution: {integrity: sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==}
-
-  string-width@4.2.3:
-    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
-    engines: {node: '>=8'}
-
-  string-width@7.2.0:
-    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
-    engines: {node: '>=18'}
-
-  stringify-object@5.0.0:
-    resolution: {integrity: sha512-zaJYxz2FtcMb4f+g60KsRNFOpVMUyuJgA51Zi5Z1DOTC3S59+OQiVOzE9GZt0x72uBGWKsQIuBKeF9iusmKFsg==}
-    engines: {node: '>=14.16'}
-
-  strip-ansi@6.0.1:
-    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
-    engines: {node: '>=8'}
-
-  strip-ansi@7.2.0:
-    resolution: {integrity: sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==}
-    engines: {node: '>=12'}
-
-  strip-bom@3.0.0:
-    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
-    engines: {node: '>=4'}
-
-  strip-final-newline@2.0.0:
-    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
-    engines: {node: '>=6'}
-
-  strip-final-newline@4.0.0:
-    resolution: {integrity: sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==}
-    engines: {node: '>=18'}
+  sugarss@5.0.1:
+    resolution: {integrity: sha512-ctS5RYCBVvPoZAnzIaX5QSShK8ZiZxD5HUqSxlusvEMC+QZQIPCPOIJg6aceFX+K2rf4+SH89eu++h1Zmsr2nw==}
+    engines: {node: '>=18.0'}
+    peerDependencies:
+      postcss: ^8.3.3
 
   tabbable@6.4.0:
     resolution: {integrity: sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==}
@@ -2034,16 +939,6 @@ packages:
     resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
     engines: {node: '>=20'}
 
-  tailwind-merge@3.5.0:
-    resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
-
-  tailwindcss@4.2.2:
-    resolution: {integrity: sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==}
-
-  tapable@2.3.2:
-    resolution: {integrity: sha512-1MOpMXuhGzGL5TTCZFItxCc0AARf1EZFQkGqMm7ERKj8+Hgr5oLvJOVFcC+lRmR8hCe2S3jC4T5D7Vg/d7/fhA==}
-    engines: {node: '>=6'}
-
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
@@ -2051,32 +946,6 @@ packages:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
 
-  tldts-core@7.0.27:
-    resolution: {integrity: sha512-YQ7uPjgWUibIK6DW5lrKujGwUKhLevU4hcGbP5O6TcIUb+oTjJYJVWPS4nZsIHrEEEG6myk/oqAJUEQmpZrHsg==}
-
-  tldts@7.0.27:
-    resolution: {integrity: sha512-I4FZcVFcqCRuT0ph6dCDpPuO4Xgzvh+spkcTr1gK7peIvxWauoloVO0vuy1FQnijT63ss6AsHB6+OIM4aXHbPg==}
-    hasBin: true
-
-  to-regex-range@5.0.1:
-    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
-    engines: {node: '>=8.0'}
-
-  toidentifier@1.0.1:
-    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
-    engines: {node: '>=0.6'}
-
-  tough-cookie@6.0.1:
-    resolution: {integrity: sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw==}
-    engines: {node: '>=16'}
-
-  ts-morph@26.0.0:
-    resolution: {integrity: sha512-ztMO++owQnz8c/gIENcM9XfCEzgoGphTv+nKpYNM1bgsdOVC/jRZuEBf6N+mLLDNg68Kl+GgUZfOySaRiG1/Ug==}
-
-  tsconfig-paths@4.2.0:
-    resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
-    engines: {node: '>=6'}
-
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -2085,42 +954,34 @@ packages:
     engines: {node: '>=18.0.0'}
     hasBin: true
 
-  tw-animate-css@1.4.0:
-    resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
-
   type-fest@5.5.0:
     resolution: {integrity: sha512-PlBfpQwiUvGViBNX84Yxwjsdhd1TUlXr6zjX7eoirtCPIr08NAmxwa+fcYBTeRQxHo9YC9wwF3m9i700sHma8g==}
     engines: {node: '>=20'}
 
-  type-is@2.0.1:
-    resolution: {integrity: sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==}
-    engines: {node: '>= 0.6'}
-
   typescript@6.0.2:
     resolution: {integrity: sha512-bGdAIrZ0wiGDo5l8c++HWtbaNCWTS4UTv7RaTH/ThVIgjkveJt83m74bBHMJkuCbslY8ixgLBVZJIOiQlQTjfQ==}
     engines: {node: '>=14.17'}
     hasBin: true
 
-  unicorn-magic@0.3.0:
-    resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
-    engines: {node: '>=18'}
-
-  universalify@2.0.1:
-    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
-    engines: {node: '>= 10.0.0'}
-
-  unpipe@1.0.0:
-    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
-    engines: {node: '>= 0.8'}
-
-  until-async@3.0.2:
-    resolution: {integrity: sha512-IiSk4HlzAMqTUseHHe3VhIGyuFmN90zMTpD3Z3y8jeQbzLIq500MVM7Jq2vUAnTKAFPJrqwkzr6PoTcPhGcOiw==}
-
-  update-browserslist-db@1.2.3:
-    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
-    hasBin: true
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
     peerDependencies:
-      browserslist: '>= 4.21.0'
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
   use-sync-external-store@1.6.0:
     resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
@@ -2130,14 +991,6 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
-  validate-npm-package-name@7.0.2:
-    resolution: {integrity: sha512-hVDIBwsRruT73PbK7uP5ebUt+ezEtCmzZz3F59BSr2F6OVFnJ/6h8liuvdLrQ88Xmnk6/+xGGuq+pG9WwTuy3A==}
-    engines: {node: ^20.17.0 || >=22.9.0}
-
-  vary@1.1.2:
-    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
-    engines: {node: '>= 0.8'}
-
   victory-vendor@37.3.6:
     resolution: {integrity: sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==}
 
@@ -2184,296 +1037,10 @@ packages:
       yaml:
         optional: true
 
-  web-streams-polyfill@3.3.3:
-    resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==}
-    engines: {node: '>= 8'}
-
-  which@2.0.2:
-    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
-    engines: {node: '>= 8'}
-    hasBin: true
-
-  which@4.0.0:
-    resolution: {integrity: sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==}
-    engines: {node: ^16.13.0 || >=18.0.0}
-    hasBin: true
-
-  wrap-ansi@6.2.0:
-    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
-    engines: {node: '>=8'}
-
-  wrap-ansi@7.0.0:
-    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
-    engines: {node: '>=10'}
-
-  wrappy@1.0.2:
-    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
-
-  wsl-utils@0.3.1:
-    resolution: {integrity: sha512-g/eziiSUNBSsdDJtCLB8bdYEUMj4jR7AGeUo96p/3dTafgjHhpF4RiCFPiRILwjQoDXx5MqkBr4fwWtR3Ky4Wg==}
-    engines: {node: '>=20'}
-
-  y18n@5.0.8:
-    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
-    engines: {node: '>=10'}
-
-  yallist@3.1.1:
-    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
-
-  yargs-parser@21.1.1:
-    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
-    engines: {node: '>=12'}
-
-  yargs@17.7.2:
-    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
-    engines: {node: '>=12'}
-
-  yoctocolors-cjs@2.1.3:
-    resolution: {integrity: sha512-U/PBtDf35ff0D8X8D0jfdzHYEPFxAI7jJlxZXwCSez5M3190m+QobIfh+sWDWSHMCWWJN2AWamkegn6vr6YBTw==}
-    engines: {node: '>=18'}
-
-  yoctocolors@2.1.2:
-    resolution: {integrity: sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==}
-    engines: {node: '>=18'}
-
-  zod-to-json-schema@3.25.2:
-    resolution: {integrity: sha512-O/PgfnpT1xKSDeQYSCfRI5Gy3hPf91mKVDuYLUHZJMiDFptvP41MSnWofm8dnCm0256ZNfZIM7DSzuSMAFnjHA==}
-    peerDependencies:
-      zod: ^3.25.28 || ^4
-
-  zod@3.25.76:
-    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
-
 snapshots:
 
-  '@babel/code-frame@7.29.0':
-    dependencies:
-      '@babel/helper-validator-identifier': 7.28.5
-      js-tokens: 4.0.0
-      picocolors: 1.1.1
-
-  '@babel/compat-data@7.29.0': {}
-
-  '@babel/core@7.29.0':
-    dependencies:
-      '@babel/code-frame': 7.29.0
-      '@babel/generator': 7.29.1
-      '@babel/helper-compilation-targets': 7.28.6
-      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0)
-      '@babel/helpers': 7.29.2
-      '@babel/parser': 7.29.2
-      '@babel/template': 7.28.6
-      '@babel/traverse': 7.29.0
-      '@babel/types': 7.29.0
-      '@jridgewell/remapping': 2.3.5
-      convert-source-map: 2.0.0
-      debug: 4.4.3
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/generator@7.29.1':
-    dependencies:
-      '@babel/parser': 7.29.2
-      '@babel/types': 7.29.0
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
-      jsesc: 3.1.0
-
-  '@babel/helper-annotate-as-pure@7.27.3':
-    dependencies:
-      '@babel/types': 7.29.0
-
-  '@babel/helper-compilation-targets@7.28.6':
-    dependencies:
-      '@babel/compat-data': 7.29.0
-      '@babel/helper-validator-option': 7.27.1
-      browserslist: 4.28.1
-      lru-cache: 5.1.1
-      semver: 6.3.1
-
-  '@babel/helper-create-class-features-plugin@7.28.6(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-member-expression-to-functions': 7.28.5
-      '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/helper-replace-supers': 7.28.6(@babel/core@7.29.0)
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/traverse': 7.29.0
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-globals@7.28.0': {}
-
-  '@babel/helper-member-expression-to-functions@7.28.5':
-    dependencies:
-      '@babel/traverse': 7.29.0
-      '@babel/types': 7.29.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-module-imports@7.28.6':
-    dependencies:
-      '@babel/traverse': 7.29.0
-      '@babel/types': 7.29.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-module-transforms@7.28.6(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-module-imports': 7.28.6
-      '@babel/helper-validator-identifier': 7.28.5
-      '@babel/traverse': 7.29.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-optimise-call-expression@7.27.1':
-    dependencies:
-      '@babel/types': 7.29.0
-
-  '@babel/helper-plugin-utils@7.28.6': {}
-
-  '@babel/helper-replace-supers@7.28.6(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-member-expression-to-functions': 7.28.5
-      '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/traverse': 7.29.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
-    dependencies:
-      '@babel/traverse': 7.29.0
-      '@babel/types': 7.29.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-string-parser@7.27.1': {}
-
-  '@babel/helper-validator-identifier@7.28.5': {}
-
-  '@babel/helper-validator-option@7.27.1': {}
-
-  '@babel/helpers@7.29.2':
-    dependencies:
-      '@babel/template': 7.28.6
-      '@babel/types': 7.29.0
-
-  '@babel/parser@7.29.2':
-    dependencies:
-      '@babel/types': 7.29.0
-
-  '@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-transform-modules-commonjs@7.28.6(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0)
-      '@babel/helper-plugin-utils': 7.28.6
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/plugin-transform-typescript@7.28.6(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.29.0)
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/plugin-syntax-typescript': 7.28.6(@babel/core@7.29.0)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/preset-typescript@7.28.5(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-validator-option': 7.27.1
-      '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-modules-commonjs': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-typescript': 7.28.6(@babel/core@7.29.0)
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/runtime@7.29.2': {}
 
-  '@babel/template@7.28.6':
-    dependencies:
-      '@babel/code-frame': 7.29.0
-      '@babel/parser': 7.29.2
-      '@babel/types': 7.29.0
-
-  '@babel/traverse@7.29.0':
-    dependencies:
-      '@babel/code-frame': 7.29.0
-      '@babel/generator': 7.29.1
-      '@babel/helper-globals': 7.28.0
-      '@babel/parser': 7.29.2
-      '@babel/template': 7.28.6
-      '@babel/types': 7.29.0
-      debug: 4.4.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/types@7.29.0':
-    dependencies:
-      '@babel/helper-string-parser': 7.27.1
-      '@babel/helper-validator-identifier': 7.28.5
-
-  '@base-ui/react@1.3.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
-    dependencies:
-      '@babel/runtime': 7.29.2
-      '@base-ui/utils': 0.2.6(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@floating-ui/react-dom': 2.1.8(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@floating-ui/utils': 0.2.11
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-      tabbable: 6.4.0
-      use-sync-external-store: 1.6.0(react@19.2.4)
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  '@base-ui/utils@0.2.6(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
-    dependencies:
-      '@babel/runtime': 7.29.2
-      '@floating-ui/utils': 0.2.11
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-      reselect: 5.1.1
-      use-sync-external-store: 1.6.0(react@19.2.4)
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  '@dotenvx/dotenvx@1.59.0':
-    dependencies:
-      commander: 11.1.0
-      dotenv: 17.3.1
-      eciesjs: 0.4.18
-      execa: 5.1.1
-      fdir: 6.5.0(picomatch@4.0.4)
-      ignore: 5.3.2
-      object-treeify: 1.1.33
-      picomatch: 4.0.4
-      which: 4.0.0
-
-  '@ecies/ciphers@0.2.5(@noble/ciphers@1.3.0)':
-    dependencies:
-      '@noble/ciphers': 1.3.0
-
   '@emnapi/core@1.9.1':
     dependencies:
       '@emnapi/wasi-threads': 1.2.0
@@ -2583,85 +1150,79 @@ snapshots:
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
 
+  '@floating-ui/react@0.27.19(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.8(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@floating-ui/utils': 0.2.11
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      tabbable: 6.4.0
+
   '@floating-ui/utils@0.2.11': {}
 
   '@fontsource-variable/geist@5.2.8': {}
 
-  '@hono/node-server@1.19.11(hono@4.12.9)':
+  '@mantine/charts@9.0.0(@mantine/core@9.0.0(@mantine/hooks@9.0.0(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(@mantine/hooks@9.0.0(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(recharts@3.8.1(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react-is@19.2.4)(react@19.2.4)(redux@5.0.1))':
     dependencies:
-      hono: 4.12.9
+      '@mantine/core': 9.0.0(@mantine/hooks@9.0.0(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@mantine/hooks': 9.0.0(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      recharts: 3.8.1(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react-is@19.2.4)(react@19.2.4)(redux@5.0.1)
 
-  '@inquirer/ansi@1.0.2': {}
-
-  '@inquirer/confirm@5.1.21':
+  '@mantine/core@9.0.0(@mantine/hooks@9.0.0(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
     dependencies:
-      '@inquirer/core': 10.3.2
-      '@inquirer/type': 3.0.10
-
-  '@inquirer/core@10.3.2':
-    dependencies:
-      '@inquirer/ansi': 1.0.2
-      '@inquirer/figures': 1.0.15
-      '@inquirer/type': 3.0.10
-      cli-width: 4.1.0
-      mute-stream: 2.0.0
-      signal-exit: 4.1.0
-      wrap-ansi: 6.2.0
-      yoctocolors-cjs: 2.1.3
-
-  '@inquirer/figures@1.0.15': {}
-
-  '@inquirer/type@3.0.10': {}
-
-  '@jridgewell/gen-mapping@0.3.13':
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
-      '@jridgewell/trace-mapping': 0.3.31
-
-  '@jridgewell/remapping@2.3.5':
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
-
-  '@jridgewell/resolve-uri@3.1.2': {}
-
-  '@jridgewell/sourcemap-codec@1.5.5': {}
-
-  '@jridgewell/trace-mapping@0.3.31':
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.5
-
-  '@modelcontextprotocol/sdk@1.28.0(zod@3.25.76)':
-    dependencies:
-      '@hono/node-server': 1.19.11(hono@4.12.9)
-      ajv: 8.18.0
-      ajv-formats: 3.0.1(ajv@8.18.0)
-      content-type: 1.0.5
-      cors: 2.8.6
-      cross-spawn: 7.0.6
-      eventsource: 3.0.7
-      eventsource-parser: 3.0.6
-      express: 5.2.1
-      express-rate-limit: 8.3.1(express@5.2.1)
-      hono: 4.12.9
-      jose: 6.2.2
-      json-schema-typed: 8.0.2
-      pkce-challenge: 5.0.1
-      raw-body: 3.0.2
-      zod: 3.25.76
-      zod-to-json-schema: 3.25.2(zod@3.25.76)
+      '@floating-ui/react': 0.27.19(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@mantine/hooks': 9.0.0(react@19.2.4)
+      clsx: 2.1.1
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      react-number-format: 5.4.5(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.4)
+      type-fest: 5.5.0
     transitivePeerDependencies:
-      - supports-color
+      - '@types/react'
 
-  '@mswjs/interceptors@0.41.3':
+  '@mantine/dates@9.0.1(@mantine/core@9.0.0(@mantine/hooks@9.0.0(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(@mantine/hooks@9.0.0(react@19.2.4))(dayjs@1.11.20)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
     dependencies:
-      '@open-draft/deferred-promise': 2.2.0
-      '@open-draft/logger': 0.3.0
-      '@open-draft/until': 2.1.0
-      is-node-process: 1.2.0
-      outvariant: 1.4.3
-      strict-event-emitter: 0.5.1
+      '@mantine/core': 9.0.0(@mantine/hooks@9.0.0(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@mantine/hooks': 9.0.0(react@19.2.4)
+      clsx: 2.1.1
+      dayjs: 1.11.20
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
+  '@mantine/dropzone@9.0.1(@mantine/core@9.0.0(@mantine/hooks@9.0.0(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(@mantine/hooks@9.0.0(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@mantine/core': 9.0.0(@mantine/hooks@9.0.0(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@mantine/hooks': 9.0.0(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      react-dropzone: 15.0.0(react@19.2.4)
+
+  '@mantine/form@9.0.0(react@19.2.4)':
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      fast-deep-equal: 3.1.3
+      klona: 2.0.6
+      react: 19.2.4
+
+  '@mantine/hooks@9.0.0(react@19.2.4)':
+    dependencies:
+      react: 19.2.4
+
+  '@mantine/notifications@9.0.0(@mantine/core@9.0.0(@mantine/hooks@9.0.0(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(@mantine/hooks@9.0.0(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@mantine/core': 9.0.0(@mantine/hooks@9.0.0(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@mantine/hooks': 9.0.0(react@19.2.4)
+      '@mantine/store': 9.0.0(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      react-transition-group: 4.4.5(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+
+  '@mantine/store@9.0.0(react@19.2.4)':
+    dependencies:
+      react: 19.2.4
 
   '@napi-rs/wasm-runtime@1.1.2(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)':
     dependencies:
@@ -2670,35 +1231,6 @@ snapshots:
       '@tybys/wasm-util': 0.10.1
     optional: true
 
-  '@noble/ciphers@1.3.0': {}
-
-  '@noble/curves@1.9.7':
-    dependencies:
-      '@noble/hashes': 1.8.0
-
-  '@noble/hashes@1.8.0': {}
-
-  '@nodelib/fs.scandir@2.1.5':
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      run-parallel: 1.2.0
-
-  '@nodelib/fs.stat@2.0.5': {}
-
-  '@nodelib/fs.walk@1.2.8':
-    dependencies:
-      '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.20.1
-
-  '@open-draft/deferred-promise@2.2.0': {}
-
-  '@open-draft/logger@0.3.0':
-    dependencies:
-      is-node-process: 1.2.0
-      outvariant: 1.4.3
-
-  '@open-draft/until@2.1.0': {}
-
   '@oxc-project/types@0.122.0': {}
 
   '@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.2.4)(redux@5.0.1))(react@19.2.4)':
@@ -2767,87 +1299,16 @@ snapshots:
 
   '@rolldown/pluginutils@1.0.0-rc.7': {}
 
-  '@sec-ant/readable-stream@0.4.1': {}
-
-  '@sindresorhus/merge-streams@4.0.0': {}
-
   '@standard-schema/spec@1.1.0': {}
 
   '@standard-schema/utils@0.3.0': {}
 
-  '@tailwindcss/node@4.2.2':
+  '@tabler/icons-react@3.41.1(react@19.2.4)':
     dependencies:
-      '@jridgewell/remapping': 2.3.5
-      enhanced-resolve: 5.20.1
-      jiti: 2.6.1
-      lightningcss: 1.32.0
-      magic-string: 0.30.21
-      source-map-js: 1.2.1
-      tailwindcss: 4.2.2
+      '@tabler/icons': 3.41.1
+      react: 19.2.4
 
-  '@tailwindcss/oxide-android-arm64@4.2.2':
-    optional: true
-
-  '@tailwindcss/oxide-darwin-arm64@4.2.2':
-    optional: true
-
-  '@tailwindcss/oxide-darwin-x64@4.2.2':
-    optional: true
-
-  '@tailwindcss/oxide-freebsd-x64@4.2.2':
-    optional: true
-
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2':
-    optional: true
-
-  '@tailwindcss/oxide-linux-arm64-gnu@4.2.2':
-    optional: true
-
-  '@tailwindcss/oxide-linux-arm64-musl@4.2.2':
-    optional: true
-
-  '@tailwindcss/oxide-linux-x64-gnu@4.2.2':
-    optional: true
-
-  '@tailwindcss/oxide-linux-x64-musl@4.2.2':
-    optional: true
-
-  '@tailwindcss/oxide-wasm32-wasi@4.2.2':
-    optional: true
-
-  '@tailwindcss/oxide-win32-arm64-msvc@4.2.2':
-    optional: true
-
-  '@tailwindcss/oxide-win32-x64-msvc@4.2.2':
-    optional: true
-
-  '@tailwindcss/oxide@4.2.2':
-    optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.2.2
-      '@tailwindcss/oxide-darwin-arm64': 4.2.2
-      '@tailwindcss/oxide-darwin-x64': 4.2.2
-      '@tailwindcss/oxide-freebsd-x64': 4.2.2
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.2
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.2.2
-      '@tailwindcss/oxide-linux-arm64-musl': 4.2.2
-      '@tailwindcss/oxide-linux-x64-gnu': 4.2.2
-      '@tailwindcss/oxide-linux-x64-musl': 4.2.2
-      '@tailwindcss/oxide-wasm32-wasi': 4.2.2
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.2.2
-      '@tailwindcss/oxide-win32-x64-msvc': 4.2.2
-
-  '@tailwindcss/vite@4.2.2(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0))':
-    dependencies:
-      '@tailwindcss/node': 4.2.2
-      '@tailwindcss/oxide': 4.2.2
-      tailwindcss: 4.2.2
-      vite: 8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)
-
-  '@ts-morph/common@0.27.0':
-    dependencies:
-      fast-glob: 3.3.3
-      minimatch: 10.2.4
-      path-browserify: 1.0.1
+  '@tabler/icons@3.41.1': {}
 
   '@tybys/wasm-util@0.10.1':
     dependencies:
@@ -2886,169 +1347,19 @@ snapshots:
     dependencies:
       csstype: 3.2.3
 
-  '@types/statuses@2.0.6': {}
-
   '@types/use-sync-external-store@0.0.6': {}
 
-  '@types/validate-npm-package-name@4.0.2': {}
-
-  '@vitejs/plugin-react@6.0.1(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0))':
+  '@vitejs/plugin-react@6.0.1(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(tsx@4.21.0))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-rc.7
-      vite: 8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)
+      vite: 8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(tsx@4.21.0)
 
-  accepts@2.0.0:
-    dependencies:
-      mime-types: 3.0.2
-      negotiator: 1.0.0
+  attr-accept@2.2.5: {}
 
-  agent-base@7.1.4: {}
-
-  ajv-formats@3.0.1(ajv@8.18.0):
-    optionalDependencies:
-      ajv: 8.18.0
-
-  ajv@8.18.0:
-    dependencies:
-      fast-deep-equal: 3.1.3
-      fast-uri: 3.1.0
-      json-schema-traverse: 1.0.0
-      require-from-string: 2.0.2
-
-  ansi-regex@5.0.1: {}
-
-  ansi-regex@6.2.2: {}
-
-  ansi-styles@4.3.0:
-    dependencies:
-      color-convert: 2.0.1
-
-  argparse@2.0.1: {}
-
-  ast-types@0.16.1:
-    dependencies:
-      tslib: 2.8.1
-
-  balanced-match@4.0.4: {}
-
-  baseline-browser-mapping@2.10.12: {}
-
-  body-parser@2.2.2:
-    dependencies:
-      bytes: 3.1.2
-      content-type: 1.0.5
-      debug: 4.4.3
-      http-errors: 2.0.1
-      iconv-lite: 0.7.2
-      on-finished: 2.4.1
-      qs: 6.15.0
-      raw-body: 3.0.2
-      type-is: 2.0.1
-    transitivePeerDependencies:
-      - supports-color
-
-  brace-expansion@5.0.5:
-    dependencies:
-      balanced-match: 4.0.4
-
-  braces@3.0.3:
-    dependencies:
-      fill-range: 7.1.1
-
-  browserslist@4.28.1:
-    dependencies:
-      baseline-browser-mapping: 2.10.12
-      caniuse-lite: 1.0.30001781
-      electron-to-chromium: 1.5.328
-      node-releases: 2.0.36
-      update-browserslist-db: 1.2.3(browserslist@4.28.1)
-
-  bundle-name@4.1.0:
-    dependencies:
-      run-applescript: 7.1.0
-
-  bytes@3.1.2: {}
-
-  call-bind-apply-helpers@1.0.2:
-    dependencies:
-      es-errors: 1.3.0
-      function-bind: 1.1.2
-
-  call-bound@1.0.4:
-    dependencies:
-      call-bind-apply-helpers: 1.0.2
-      get-intrinsic: 1.3.0
-
-  callsites@3.1.0: {}
-
-  caniuse-lite@1.0.30001781: {}
-
-  chalk@5.6.2: {}
-
-  class-variance-authority@0.7.1:
-    dependencies:
-      clsx: 2.1.1
-
-  cli-cursor@5.0.0:
-    dependencies:
-      restore-cursor: 5.1.0
-
-  cli-spinners@2.9.2: {}
-
-  cli-width@4.1.0: {}
-
-  cliui@8.0.1:
-    dependencies:
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-      wrap-ansi: 7.0.0
+  camelcase-css@2.0.1: {}
 
   clsx@2.1.1: {}
 
-  code-block-writer@13.0.3: {}
-
-  color-convert@2.0.1:
-    dependencies:
-      color-name: 1.1.4
-
-  color-name@1.1.4: {}
-
-  commander@11.1.0: {}
-
-  commander@14.0.3: {}
-
-  content-disposition@1.0.1: {}
-
-  content-type@1.0.5: {}
-
-  convert-source-map@2.0.0: {}
-
-  cookie-signature@1.2.2: {}
-
-  cookie@0.7.2: {}
-
-  cookie@1.1.1: {}
-
-  cors@2.8.6:
-    dependencies:
-      object-assign: 4.1.1
-      vary: 1.1.2
-
-  cosmiconfig@9.0.1(typescript@6.0.2):
-    dependencies:
-      env-paths: 2.2.1
-      import-fresh: 3.3.1
-      js-yaml: 4.1.1
-      parse-json: 5.2.0
-    optionalDependencies:
-      typescript: 6.0.2
-
-  cross-spawn@7.0.6:
-    dependencies:
-      path-key: 3.1.1
-      shebang-command: 2.0.0
-      which: 2.0.2
-
   cssesc@3.0.0: {}
 
   csstype@3.2.3: {}
@@ -3091,76 +1402,18 @@ snapshots:
 
   d3-timer@3.0.1: {}
 
-  data-uri-to-buffer@4.0.1: {}
-
-  debug@4.4.3:
-    dependencies:
-      ms: 2.1.3
+  dayjs@1.11.20: {}
 
   decimal.js-light@2.5.1: {}
 
-  dedent@1.7.2: {}
-
-  deepmerge@4.3.1: {}
-
-  default-browser-id@5.0.1: {}
-
-  default-browser@5.5.0:
-    dependencies:
-      bundle-name: 4.1.0
-      default-browser-id: 5.0.1
-
-  define-lazy-prop@3.0.0: {}
-
-  depd@2.0.0: {}
-
   detect-libc@2.1.2: {}
 
-  diff@8.0.4: {}
+  detect-node-es@1.1.0: {}
 
-  dotenv@17.3.1: {}
-
-  dunder-proto@1.0.1:
+  dom-helpers@5.2.1:
     dependencies:
-      call-bind-apply-helpers: 1.0.2
-      es-errors: 1.3.0
-      gopd: 1.2.0
-
-  eciesjs@0.4.18:
-    dependencies:
-      '@ecies/ciphers': 0.2.5(@noble/ciphers@1.3.0)
-      '@noble/ciphers': 1.3.0
-      '@noble/curves': 1.9.7
-      '@noble/hashes': 1.8.0
-
-  ee-first@1.1.1: {}
-
-  electron-to-chromium@1.5.328: {}
-
-  emoji-regex@10.6.0: {}
-
-  emoji-regex@8.0.0: {}
-
-  encodeurl@2.0.0: {}
-
-  enhanced-resolve@5.20.1:
-    dependencies:
-      graceful-fs: 4.2.11
-      tapable: 2.3.2
-
-  env-paths@2.2.1: {}
-
-  error-ex@1.3.4:
-    dependencies:
-      is-arrayish: 0.2.1
-
-  es-define-property@1.0.1: {}
-
-  es-errors@1.3.0: {}
-
-  es-object-atoms@1.1.1:
-    dependencies:
-      es-errors: 1.3.0
+      '@babel/runtime': 7.29.2
+      csstype: 3.2.3
 
   es-toolkit@1.45.1: {}
 
@@ -3193,199 +1446,29 @@ snapshots:
       '@esbuild/win32-ia32': 0.27.4
       '@esbuild/win32-x64': 0.27.4
 
-  escalade@3.2.0: {}
-
-  escape-html@1.0.3: {}
-
-  esprima@4.0.1: {}
-
-  etag@1.8.1: {}
-
   eventemitter3@5.0.4: {}
 
   events@3.3.0: {}
 
-  eventsource-parser@3.0.6: {}
-
-  eventsource@3.0.7:
-    dependencies:
-      eventsource-parser: 3.0.6
-
-  execa@5.1.1:
-    dependencies:
-      cross-spawn: 7.0.6
-      get-stream: 6.0.1
-      human-signals: 2.1.0
-      is-stream: 2.0.1
-      merge-stream: 2.0.0
-      npm-run-path: 4.0.1
-      onetime: 5.1.2
-      signal-exit: 3.0.7
-      strip-final-newline: 2.0.0
-
-  execa@9.6.1:
-    dependencies:
-      '@sindresorhus/merge-streams': 4.0.0
-      cross-spawn: 7.0.6
-      figures: 6.1.0
-      get-stream: 9.0.1
-      human-signals: 8.0.1
-      is-plain-obj: 4.1.0
-      is-stream: 4.0.1
-      npm-run-path: 6.0.0
-      pretty-ms: 9.3.0
-      signal-exit: 4.1.0
-      strip-final-newline: 4.0.0
-      yoctocolors: 2.1.2
-
-  express-rate-limit@8.3.1(express@5.2.1):
-    dependencies:
-      express: 5.2.1
-      ip-address: 10.1.0
-
-  express@5.2.1:
-    dependencies:
-      accepts: 2.0.0
-      body-parser: 2.2.2
-      content-disposition: 1.0.1
-      content-type: 1.0.5
-      cookie: 0.7.2
-      cookie-signature: 1.2.2
-      debug: 4.4.3
-      depd: 2.0.0
-      encodeurl: 2.0.0
-      escape-html: 1.0.3
-      etag: 1.8.1
-      finalhandler: 2.1.1
-      fresh: 2.0.0
-      http-errors: 2.0.1
-      merge-descriptors: 2.0.0
-      mime-types: 3.0.2
-      on-finished: 2.4.1
-      once: 1.4.0
-      parseurl: 1.3.3
-      proxy-addr: 2.0.7
-      qs: 6.15.0
-      range-parser: 1.2.1
-      router: 2.2.0
-      send: 1.2.1
-      serve-static: 2.2.1
-      statuses: 2.0.2
-      type-is: 2.0.1
-      vary: 1.1.2
-    transitivePeerDependencies:
-      - supports-color
-
   fast-deep-equal@3.1.3: {}
 
-  fast-glob@3.3.3:
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.8
-
-  fast-uri@3.1.0: {}
-
-  fastq@1.20.1:
-    dependencies:
-      reusify: 1.1.0
-
   fdir@6.5.0(picomatch@4.0.4):
     optionalDependencies:
       picomatch: 4.0.4
 
-  fetch-blob@3.2.0:
+  file-selector@2.1.2:
     dependencies:
-      node-domexception: 1.0.0
-      web-streams-polyfill: 3.3.3
-
-  figures@6.1.0:
-    dependencies:
-      is-unicode-supported: 2.1.0
-
-  fill-range@7.1.1:
-    dependencies:
-      to-regex-range: 5.0.1
-
-  finalhandler@2.1.1:
-    dependencies:
-      debug: 4.4.3
-      encodeurl: 2.0.0
-      escape-html: 1.0.3
-      on-finished: 2.4.1
-      parseurl: 1.3.3
-      statuses: 2.0.2
-    transitivePeerDependencies:
-      - supports-color
-
-  formdata-polyfill@4.0.10:
-    dependencies:
-      fetch-blob: 3.2.0
-
-  forwarded@0.2.0: {}
-
-  fresh@2.0.0: {}
-
-  fs-extra@11.3.4:
-    dependencies:
-      graceful-fs: 4.2.11
-      jsonfile: 6.2.0
-      universalify: 2.0.1
+      tslib: 2.8.1
 
   fsevents@2.3.3:
     optional: true
 
-  function-bind@1.1.2: {}
-
-  fuzzysort@3.1.0: {}
-
-  gensync@1.0.0-beta.2: {}
-
-  get-caller-file@2.0.5: {}
-
-  get-east-asian-width@1.5.0: {}
-
-  get-intrinsic@1.3.0:
-    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
-
-  get-own-enumerable-keys@1.0.0: {}
-
-  get-proto@1.0.1:
-    dependencies:
-      dunder-proto: 1.0.1
-      es-object-atoms: 1.1.1
-
-  get-stream@6.0.1: {}
-
-  get-stream@9.0.1:
-    dependencies:
-      '@sec-ant/readable-stream': 0.4.1
-      is-stream: 4.0.1
+  get-nonce@1.0.1: {}
 
   get-tsconfig@4.13.7:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
-  glob-parent@5.1.2:
-    dependencies:
-      is-glob: 4.0.3
-
-  gopd@1.2.0: {}
-
-  graceful-fs@4.2.11: {}
-
   graphology-layout-forceatlas2@0.10.1(graphology-types@0.24.8):
     dependencies:
       graphology-types: 0.24.8
@@ -3402,137 +1485,18 @@ snapshots:
       events: 3.3.0
       graphology-types: 0.24.8
 
-  graphql@16.13.2: {}
-
-  has-symbols@1.1.0: {}
-
-  hasown@2.0.2:
-    dependencies:
-      function-bind: 1.1.2
-
-  headers-polyfill@4.0.3: {}
-
-  hono@4.12.9: {}
-
-  http-errors@2.0.1:
-    dependencies:
-      depd: 2.0.0
-      inherits: 2.0.4
-      setprototypeof: 1.2.0
-      statuses: 2.0.2
-      toidentifier: 1.0.1
-
-  https-proxy-agent@7.0.6:
-    dependencies:
-      agent-base: 7.1.4
-      debug: 4.4.3
-    transitivePeerDependencies:
-      - supports-color
-
-  human-signals@2.1.0: {}
-
-  human-signals@8.0.1: {}
-
-  iconv-lite@0.7.2:
-    dependencies:
-      safer-buffer: 2.1.2
-
-  ignore@5.3.2: {}
-
   immer@10.2.0: {}
 
   immer@11.1.4: {}
 
-  import-fresh@3.3.1:
-    dependencies:
-      parent-module: 1.0.1
-      resolve-from: 4.0.0
-
-  inherits@2.0.4: {}
-
   internmap@2.0.3: {}
 
-  ip-address@10.1.0: {}
-
-  ipaddr.js@1.9.1: {}
-
-  is-arrayish@0.2.1: {}
-
-  is-docker@3.0.0: {}
-
-  is-extglob@2.1.1: {}
-
-  is-fullwidth-code-point@3.0.0: {}
-
-  is-glob@4.0.3:
-    dependencies:
-      is-extglob: 2.1.1
-
-  is-in-ssh@1.0.0: {}
-
-  is-inside-container@1.0.0:
-    dependencies:
-      is-docker: 3.0.0
-
-  is-interactive@2.0.0: {}
-
-  is-node-process@1.2.0: {}
-
-  is-number@7.0.0: {}
-
-  is-obj@3.0.0: {}
-
-  is-plain-obj@4.1.0: {}
-
-  is-promise@4.0.0: {}
-
-  is-regexp@3.1.0: {}
-
-  is-stream@2.0.1: {}
-
-  is-stream@4.0.1: {}
-
-  is-unicode-supported@1.3.0: {}
-
-  is-unicode-supported@2.1.0: {}
-
-  is-wsl@3.1.1:
-    dependencies:
-      is-inside-container: 1.0.0
-
-  isexe@2.0.0: {}
-
-  isexe@3.1.5: {}
-
-  jiti@2.6.1: {}
-
-  jose@6.2.2: {}
+  jiti@2.6.1:
+    optional: true
 
   js-tokens@4.0.0: {}
 
-  js-yaml@4.1.1:
-    dependencies:
-      argparse: 2.0.1
-
-  jsesc@3.1.0: {}
-
-  json-parse-even-better-errors@2.3.1: {}
-
-  json-schema-traverse@1.0.0: {}
-
-  json-schema-typed@8.0.2: {}
-
-  json5@2.2.3: {}
-
-  jsonfile@6.2.0:
-    dependencies:
-      universalify: 2.0.1
-    optionalDependencies:
-      graceful-fs: 4.2.11
-
-  kleur@3.0.3: {}
-
-  kleur@4.1.5: {}
+  klona@2.0.6: {}
 
   lightningcss-android-arm64@1.32.0:
     optional: true
@@ -3583,235 +1547,84 @@ snapshots:
       lightningcss-win32-arm64-msvc: 1.32.0
       lightningcss-win32-x64-msvc: 1.32.0
 
-  lines-and-columns@1.2.4: {}
-
-  log-symbols@6.0.0:
+  loose-envify@1.4.0:
     dependencies:
-      chalk: 5.6.2
-      is-unicode-supported: 1.3.0
-
-  lru-cache@5.1.1:
-    dependencies:
-      yallist: 3.1.1
-
-  lucide-react@1.7.0(react@19.2.4):
-    dependencies:
-      react: 19.2.4
-
-  magic-string@0.30.21:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
-
-  math-intrinsics@1.1.0: {}
-
-  media-typer@1.1.0: {}
-
-  merge-descriptors@2.0.0: {}
-
-  merge-stream@2.0.0: {}
-
-  merge2@1.4.1: {}
-
-  micromatch@4.0.8:
-    dependencies:
-      braces: 3.0.3
-      picomatch: 2.3.2
-
-  mime-db@1.54.0: {}
-
-  mime-types@3.0.2:
-    dependencies:
-      mime-db: 1.54.0
-
-  mimic-fn@2.1.0: {}
-
-  mimic-function@5.0.1: {}
-
-  minimatch@10.2.4:
-    dependencies:
-      brace-expansion: 5.0.5
-
-  minimist@1.2.8: {}
-
-  ms@2.1.3: {}
-
-  msw@2.12.14(typescript@6.0.2):
-    dependencies:
-      '@inquirer/confirm': 5.1.21
-      '@mswjs/interceptors': 0.41.3
-      '@open-draft/deferred-promise': 2.2.0
-      '@types/statuses': 2.0.6
-      cookie: 1.1.1
-      graphql: 16.13.2
-      headers-polyfill: 4.0.3
-      is-node-process: 1.2.0
-      outvariant: 1.4.3
-      path-to-regexp: 6.3.0
-      picocolors: 1.1.1
-      rettime: 0.10.1
-      statuses: 2.0.2
-      strict-event-emitter: 0.5.1
-      tough-cookie: 6.0.1
-      type-fest: 5.5.0
-      until-async: 3.0.2
-      yargs: 17.7.2
-    optionalDependencies:
-      typescript: 6.0.2
-    transitivePeerDependencies:
-      - '@types/node'
-
-  mute-stream@2.0.0: {}
+      js-tokens: 4.0.0
 
   nanoid@3.3.11: {}
 
-  negotiator@1.0.0: {}
-
-  node-domexception@1.0.0: {}
-
-  node-fetch@3.3.2:
-    dependencies:
-      data-uri-to-buffer: 4.0.1
-      fetch-blob: 3.2.0
-      formdata-polyfill: 4.0.10
-
-  node-releases@2.0.36: {}
-
-  npm-run-path@4.0.1:
-    dependencies:
-      path-key: 3.1.1
-
-  npm-run-path@6.0.0:
-    dependencies:
-      path-key: 4.0.0
-      unicorn-magic: 0.3.0
-
   object-assign@4.1.1: {}
 
-  object-inspect@1.13.4: {}
-
-  object-treeify@1.1.33: {}
-
-  on-finished@2.4.1:
-    dependencies:
-      ee-first: 1.1.1
-
-  once@1.4.0:
-    dependencies:
-      wrappy: 1.0.2
-
-  onetime@5.1.2:
-    dependencies:
-      mimic-fn: 2.1.0
-
-  onetime@7.0.0:
-    dependencies:
-      mimic-function: 5.0.1
-
-  open@11.0.0:
-    dependencies:
-      default-browser: 5.5.0
-      define-lazy-prop: 3.0.0
-      is-in-ssh: 1.0.0
-      is-inside-container: 1.0.0
-      powershell-utils: 0.1.0
-      wsl-utils: 0.3.1
-
-  ora@8.2.0:
-    dependencies:
-      chalk: 5.6.2
-      cli-cursor: 5.0.0
-      cli-spinners: 2.9.2
-      is-interactive: 2.0.0
-      is-unicode-supported: 2.1.0
-      log-symbols: 6.0.0
-      stdin-discarder: 0.2.2
-      string-width: 7.2.0
-      strip-ansi: 7.2.0
-
-  outvariant@1.4.3: {}
-
-  parent-module@1.0.1:
-    dependencies:
-      callsites: 3.1.0
-
-  parse-json@5.2.0:
-    dependencies:
-      '@babel/code-frame': 7.29.0
-      error-ex: 1.3.4
-      json-parse-even-better-errors: 2.3.1
-      lines-and-columns: 1.2.4
-
-  parse-ms@4.0.0: {}
-
-  parseurl@1.3.3: {}
-
-  path-browserify@1.0.1: {}
-
-  path-key@3.1.1: {}
-
-  path-key@4.0.0: {}
-
-  path-to-regexp@6.3.0: {}
-
-  path-to-regexp@8.4.0: {}
-
   picocolors@1.1.1: {}
 
-  picomatch@2.3.2: {}
-
   picomatch@4.0.4: {}
 
-  pkce-challenge@5.0.1: {}
+  postcss-js@4.1.0(postcss@8.5.8):
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.5.8
+
+  postcss-mixins@12.1.2(postcss@8.5.8):
+    dependencies:
+      postcss: 8.5.8
+      postcss-js: 4.1.0(postcss@8.5.8)
+      postcss-simple-vars: 7.0.1(postcss@8.5.8)
+      sugarss: 5.0.1(postcss@8.5.8)
+      tinyglobby: 0.2.15
+
+  postcss-nested@7.0.2(postcss@8.5.8):
+    dependencies:
+      postcss: 8.5.8
+      postcss-selector-parser: 7.1.1
+
+  postcss-preset-mantine@1.18.0(postcss@8.5.8):
+    dependencies:
+      postcss: 8.5.8
+      postcss-mixins: 12.1.2(postcss@8.5.8)
+      postcss-nested: 7.0.2(postcss@8.5.8)
 
   postcss-selector-parser@7.1.1:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
+  postcss-simple-vars@7.0.1(postcss@8.5.8):
+    dependencies:
+      postcss: 8.5.8
+
   postcss@8.5.8:
     dependencies:
       nanoid: 3.3.11
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  powershell-utils@0.1.0: {}
-
-  pretty-ms@9.3.0:
+  prop-types@15.8.1:
     dependencies:
-      parse-ms: 4.0.0
-
-  prompts@2.4.2:
-    dependencies:
-      kleur: 3.0.3
-      sisteransi: 1.0.5
-
-  proxy-addr@2.0.7:
-    dependencies:
-      forwarded: 0.2.0
-      ipaddr.js: 1.9.1
-
-  qs@6.15.0:
-    dependencies:
-      side-channel: 1.1.0
-
-  queue-microtask@1.2.3: {}
-
-  range-parser@1.2.1: {}
-
-  raw-body@3.0.2:
-    dependencies:
-      bytes: 3.1.2
-      http-errors: 2.0.1
-      iconv-lite: 0.7.2
-      unpipe: 1.0.0
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
 
   react-dom@19.2.4(react@19.2.4):
     dependencies:
       react: 19.2.4
       scheduler: 0.27.0
 
+  react-dropzone@15.0.0(react@19.2.4):
+    dependencies:
+      attr-accept: 2.2.5
+      file-selector: 2.1.2
+      prop-types: 15.8.1
+      react: 19.2.4
+
+  react-is@16.13.1: {}
+
   react-is@19.2.4: {}
 
+  react-number-format@5.4.5(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
   react-redux@9.2.0(@types/react@19.2.14)(react@19.2.4)(redux@5.0.1):
     dependencies:
       '@types/use-sync-external-store': 0.0.6
@@ -3821,15 +1634,43 @@ snapshots:
       '@types/react': 19.2.14
       redux: 5.0.1
 
-  react@19.2.4: {}
-
-  recast@0.23.11:
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.14)(react@19.2.4):
     dependencies:
-      ast-types: 0.16.1
-      esprima: 4.0.1
-      source-map: 0.6.1
-      tiny-invariant: 1.3.3
+      react: 19.2.4
+      react-style-singleton: 2.2.3(@types/react@19.2.14)(react@19.2.4)
       tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  react-remove-scroll@2.7.2(@types/react@19.2.14)(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.14)(react@19.2.4)
+      react-style-singleton: 2.2.3(@types/react@19.2.14)(react@19.2.4)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@19.2.14)(react@19.2.4)
+      use-sidecar: 1.1.3(@types/react@19.2.14)(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  react-style-singleton@2.2.3(@types/react@19.2.14)(react@19.2.4):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 19.2.4
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  react-transition-group@4.4.5(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      '@babel/runtime': 7.29.2
+      dom-helpers: 5.2.1
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
+  react@19.2.4: {}
 
   recharts@3.8.1(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react-is@19.2.4)(react@19.2.4)(redux@5.0.1):
     dependencies:
@@ -3857,25 +1698,10 @@ snapshots:
 
   redux@5.0.1: {}
 
-  require-directory@2.1.1: {}
-
-  require-from-string@2.0.2: {}
-
   reselect@5.1.1: {}
 
-  resolve-from@4.0.0: {}
-
   resolve-pkg-maps@1.0.0: {}
 
-  restore-cursor@5.1.0:
-    dependencies:
-      onetime: 7.0.0
-      signal-exit: 4.1.0
-
-  rettime@0.10.1: {}
-
-  reusify@1.1.0: {}
-
   rolldown@1.0.0-rc.12(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1):
     dependencies:
       '@oxc-project/types': 0.122.0
@@ -3900,132 +1726,8 @@ snapshots:
       - '@emnapi/core'
       - '@emnapi/runtime'
 
-  router@2.2.0:
-    dependencies:
-      debug: 4.4.3
-      depd: 2.0.0
-      is-promise: 4.0.0
-      parseurl: 1.3.3
-      path-to-regexp: 8.4.0
-    transitivePeerDependencies:
-      - supports-color
-
-  run-applescript@7.1.0: {}
-
-  run-parallel@1.2.0:
-    dependencies:
-      queue-microtask: 1.2.3
-
-  safer-buffer@2.1.2: {}
-
   scheduler@0.27.0: {}
 
-  semver@6.3.1: {}
-
-  send@1.2.1:
-    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
-    transitivePeerDependencies:
-      - supports-color
-
-  serve-static@2.2.1:
-    dependencies:
-      encodeurl: 2.0.0
-      escape-html: 1.0.3
-      parseurl: 1.3.3
-      send: 1.2.1
-    transitivePeerDependencies:
-      - supports-color
-
-  setprototypeof@1.2.0: {}
-
-  shadcn@4.1.1(typescript@6.0.2):
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/parser': 7.29.2
-      '@babel/plugin-transform-typescript': 7.28.6(@babel/core@7.29.0)
-      '@babel/preset-typescript': 7.28.5(@babel/core@7.29.0)
-      '@dotenvx/dotenvx': 1.59.0
-      '@modelcontextprotocol/sdk': 1.28.0(zod@3.25.76)
-      '@types/validate-npm-package-name': 4.0.2
-      browserslist: 4.28.1
-      commander: 14.0.3
-      cosmiconfig: 9.0.1(typescript@6.0.2)
-      dedent: 1.7.2
-      deepmerge: 4.3.1
-      diff: 8.0.4
-      execa: 9.6.1
-      fast-glob: 3.3.3
-      fs-extra: 11.3.4
-      fuzzysort: 3.1.0
-      https-proxy-agent: 7.0.6
-      kleur: 4.1.5
-      msw: 2.12.14(typescript@6.0.2)
-      node-fetch: 3.3.2
-      open: 11.0.0
-      ora: 8.2.0
-      postcss: 8.5.8
-      postcss-selector-parser: 7.1.1
-      prompts: 2.4.2
-      recast: 0.23.11
-      stringify-object: 5.0.0
-      tailwind-merge: 3.5.0
-      ts-morph: 26.0.0
-      tsconfig-paths: 4.2.0
-      validate-npm-package-name: 7.0.2
-      zod: 3.25.76
-      zod-to-json-schema: 3.25.2(zod@3.25.76)
-    transitivePeerDependencies:
-      - '@cfworker/json-schema'
-      - '@types/node'
-      - babel-plugin-macros
-      - supports-color
-      - typescript
-
-  shebang-command@2.0.0:
-    dependencies:
-      shebang-regex: 3.0.0
-
-  shebang-regex@3.0.0: {}
-
-  side-channel-list@1.0.0:
-    dependencies:
-      es-errors: 1.3.0
-      object-inspect: 1.13.4
-
-  side-channel-map@1.0.1:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-      object-inspect: 1.13.4
-
-  side-channel-weakmap@1.0.2:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-      object-inspect: 1.13.4
-      side-channel-map: 1.0.1
-
-  side-channel@1.1.0:
-    dependencies:
-      es-errors: 1.3.0
-      object-inspect: 1.13.4
-      side-channel-list: 1.0.0
-      side-channel-map: 1.0.1
-      side-channel-weakmap: 1.0.2
-
   sigma@3.0.2(graphology-types@0.24.8):
     dependencies:
       events: 3.3.0
@@ -4033,64 +1735,16 @@ snapshots:
     transitivePeerDependencies:
       - graphology-types
 
-  signal-exit@3.0.7: {}
-
-  signal-exit@4.1.0: {}
-
-  sisteransi@1.0.5: {}
-
   source-map-js@1.2.1: {}
 
-  source-map@0.6.1: {}
-
-  statuses@2.0.2: {}
-
-  stdin-discarder@0.2.2: {}
-
-  strict-event-emitter@0.5.1: {}
-
-  string-width@4.2.3:
+  sugarss@5.0.1(postcss@8.5.8):
     dependencies:
-      emoji-regex: 8.0.0
-      is-fullwidth-code-point: 3.0.0
-      strip-ansi: 6.0.1
-
-  string-width@7.2.0:
-    dependencies:
-      emoji-regex: 10.6.0
-      get-east-asian-width: 1.5.0
-      strip-ansi: 7.2.0
-
-  stringify-object@5.0.0:
-    dependencies:
-      get-own-enumerable-keys: 1.0.0
-      is-obj: 3.0.0
-      is-regexp: 3.1.0
-
-  strip-ansi@6.0.1:
-    dependencies:
-      ansi-regex: 5.0.1
-
-  strip-ansi@7.2.0:
-    dependencies:
-      ansi-regex: 6.2.2
-
-  strip-bom@3.0.0: {}
-
-  strip-final-newline@2.0.0: {}
-
-  strip-final-newline@4.0.0: {}
+      postcss: 8.5.8
 
   tabbable@6.4.0: {}
 
   tagged-tag@1.0.0: {}
 
-  tailwind-merge@3.5.0: {}
-
-  tailwindcss@4.2.2: {}
-
-  tapable@2.3.2: {}
-
   tiny-invariant@1.3.3: {}
 
   tinyglobby@0.2.15:
@@ -4098,33 +1752,6 @@ snapshots:
       fdir: 6.5.0(picomatch@4.0.4)
       picomatch: 4.0.4
 
-  tldts-core@7.0.27: {}
-
-  tldts@7.0.27:
-    dependencies:
-      tldts-core: 7.0.27
-
-  to-regex-range@5.0.1:
-    dependencies:
-      is-number: 7.0.0
-
-  toidentifier@1.0.1: {}
-
-  tough-cookie@6.0.1:
-    dependencies:
-      tldts: 7.0.27
-
-  ts-morph@26.0.0:
-    dependencies:
-      '@ts-morph/common': 0.27.0
-      code-block-writer: 13.0.3
-
-  tsconfig-paths@4.2.0:
-    dependencies:
-      json5: 2.2.3
-      minimist: 1.2.8
-      strip-bom: 3.0.0
-
   tslib@2.8.1: {}
 
   tsx@4.21.0:
@@ -4134,33 +1761,26 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
-  tw-animate-css@1.4.0: {}
-
   type-fest@5.5.0:
     dependencies:
       tagged-tag: 1.0.0
 
-  type-is@2.0.1:
-    dependencies:
-      content-type: 1.0.5
-      media-typer: 1.1.0
-      mime-types: 3.0.2
-
   typescript@6.0.2: {}
 
-  unicorn-magic@0.3.0: {}
-
-  universalify@2.0.1: {}
-
-  unpipe@1.0.0: {}
-
-  until-async@3.0.2: {}
-
-  update-browserslist-db@1.2.3(browserslist@4.28.1):
+  use-callback-ref@1.3.3(@types/react@19.2.14)(react@19.2.4):
     dependencies:
-      browserslist: 4.28.1
-      escalade: 3.2.0
-      picocolors: 1.1.1
+      react: 19.2.4
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  use-sidecar@1.1.3(@types/react@19.2.14)(react@19.2.4):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 19.2.4
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.14
 
   use-sync-external-store@1.6.0(react@19.2.4):
     dependencies:
@@ -4168,10 +1788,6 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
-  validate-npm-package-name@7.0.2: {}
-
-  vary@1.1.2: {}
-
   victory-vendor@37.3.6:
     dependencies:
       '@types/d3-array': 3.2.2
@@ -4189,7 +1805,7 @@ snapshots:
       d3-time: 3.1.0
       d3-timer: 3.0.1
 
-  vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0):
+  vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(tsx@4.21.0):
     dependencies:
       lightningcss: 1.32.0
       picomatch: 4.0.4
@@ -4200,62 +1816,8 @@ snapshots:
       esbuild: 0.27.4
       fsevents: 2.3.3
       jiti: 2.6.1
+      sugarss: 5.0.1(postcss@8.5.8)
       tsx: 4.21.0
     transitivePeerDependencies:
       - '@emnapi/core'
       - '@emnapi/runtime'
-
-  web-streams-polyfill@3.3.3: {}
-
-  which@2.0.2:
-    dependencies:
-      isexe: 2.0.0
-
-  which@4.0.0:
-    dependencies:
-      isexe: 3.1.5
-
-  wrap-ansi@6.2.0:
-    dependencies:
-      ansi-styles: 4.3.0
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-
-  wrap-ansi@7.0.0:
-    dependencies:
-      ansi-styles: 4.3.0
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-
-  wrappy@1.0.2: {}
-
-  wsl-utils@0.3.1:
-    dependencies:
-      is-wsl: 3.1.1
-      powershell-utils: 0.1.0
-
-  y18n@5.0.8: {}
-
-  yallist@3.1.1: {}
-
-  yargs-parser@21.1.1: {}
-
-  yargs@17.7.2:
-    dependencies:
-      cliui: 8.0.1
-      escalade: 3.2.0
-      get-caller-file: 2.0.5
-      require-directory: 2.1.1
-      string-width: 4.2.3
-      y18n: 5.0.8
-      yargs-parser: 21.1.1
-
-  yoctocolors-cjs@2.1.3: {}
-
-  yoctocolors@2.1.2: {}
-
-  zod-to-json-schema@3.25.2(zod@3.25.76):
-    dependencies:
-      zod: 3.25.76
-
-  zod@3.25.76: {}
diff --git a/frontend/postcss.config.cjs b/frontend/postcss.config.cjs
new file mode 100644
index 00000000..bfba0ddf
--- /dev/null
+++ b/frontend/postcss.config.cjs
@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    'postcss-preset-mantine': {},
+    'postcss-simple-vars': {
+      variables: {
+        'mantine-breakpoint-xs': '36em',
+        'mantine-breakpoint-sm': '48em',
+        'mantine-breakpoint-md': '62em',
+        'mantine-breakpoint-lg': '75em',
+        'mantine-breakpoint-xl': '88em',
+      },
+    },
+  },
+};
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
deleted file mode 100644
index 444f4ef0..00000000
--- a/frontend/src/components/ui/button.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Button as ButtonPrimitive } from "@base-ui/react/button"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        outline:
-          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-        ghost:
-          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
-        destructive:
-          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default:
-          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-        icon: "size-8",
-        "icon-xs":
-          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm":
-          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
-        "icon-lg": "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  ...props
-}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
-  return (
-    <ButtonPrimitive
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }
diff --git a/frontend/src/globals.css b/frontend/src/globals.css
index fb3c7e98..7d96305e 100644
--- a/frontend/src/globals.css
+++ b/frontend/src/globals.css
@@ -1,130 +1,9 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-@import "shadcn/tailwind.css";
+@import "@mantine/core/styles.css";
+@import "@mantine/charts/styles.css";
+@import "@mantine/notifications/styles.css";
 @import "@fontsource-variable/geist";
 
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-    --font-heading: var(--font-sans);
-    --font-sans: 'Geist Variable', sans-serif;
-    --color-sidebar-ring: var(--sidebar-ring);
-    --color-sidebar-border: var(--sidebar-border);
-    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-    --color-sidebar-accent: var(--sidebar-accent);
-    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-    --color-sidebar-primary: var(--sidebar-primary);
-    --color-sidebar-foreground: var(--sidebar-foreground);
-    --color-sidebar: var(--sidebar);
-    --color-chart-5: var(--chart-5);
-    --color-chart-4: var(--chart-4);
-    --color-chart-3: var(--chart-3);
-    --color-chart-2: var(--chart-2);
-    --color-chart-1: var(--chart-1);
-    --color-ring: var(--ring);
-    --color-input: var(--input);
-    --color-border: var(--border);
-    --color-destructive: var(--destructive);
-    --color-accent-foreground: var(--accent-foreground);
-    --color-accent: var(--accent);
-    --color-muted-foreground: var(--muted-foreground);
-    --color-muted: var(--muted);
-    --color-secondary-foreground: var(--secondary-foreground);
-    --color-secondary: var(--secondary);
-    --color-primary-foreground: var(--primary-foreground);
-    --color-primary: var(--primary);
-    --color-popover-foreground: var(--popover-foreground);
-    --color-popover: var(--popover);
-    --color-card-foreground: var(--card-foreground);
-    --color-card: var(--card);
-    --color-foreground: var(--foreground);
-    --color-background: var(--background);
-    --radius-sm: calc(var(--radius) * 0.6);
-    --radius-md: calc(var(--radius) * 0.8);
-    --radius-lg: var(--radius);
-    --radius-xl: calc(var(--radius) * 1.4);
-    --radius-2xl: calc(var(--radius) * 1.8);
-    --radius-3xl: calc(var(--radius) * 2.2);
-    --radius-4xl: calc(var(--radius) * 2.6);
+body {
+  font-family: "Geist Variable", system-ui, -apple-system, sans-serif;
+  -webkit-font-smoothing: antialiased;
 }
-
-:root {
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0 0);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.205 0 0);
-    --primary-foreground: oklch(0.985 0 0);
-    --secondary: oklch(0.97 0 0);
-    --secondary-foreground: oklch(0.205 0 0);
-    --muted: oklch(0.97 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.97 0 0);
-    --accent-foreground: oklch(0.205 0 0);
-    --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
-    --chart-1: oklch(0.87 0 0);
-    --chart-2: oklch(0.556 0 0);
-    --chart-3: oklch(0.439 0 0);
-    --chart-4: oklch(0.371 0 0);
-    --chart-5: oklch(0.269 0 0);
-    --radius: 0.625rem;
-    --sidebar: oklch(0.985 0 0);
-    --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.205 0 0);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.97 0 0);
-    --sidebar-accent-foreground: oklch(0.205 0 0);
-    --sidebar-border: oklch(0.922 0 0);
-    --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.922 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-    --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
-    --chart-1: oklch(0.87 0 0);
-    --chart-2: oklch(0.556 0 0);
-    --chart-3: oklch(0.439 0 0);
-    --chart-4: oklch(0.371 0 0);
-    --chart-5: oklch(0.269 0 0);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.556 0 0);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-    }
-  body {
-    @apply bg-background text-foreground;
-    }
-  html {
-    @apply font-sans;
-    }
-}
\ No newline at end of file
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
deleted file mode 100644
index bd0c391d..00000000
--- a/frontend/src/lib/utils.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
diff --git a/frontend/types/core/component_variants.ts b/frontend/types/core/component_variants.ts
index 0a314379..61ee9279 100644
--- a/frontend/types/core/component_variants.ts
+++ b/frontend/types/core/component_variants.ts
@@ -1,10 +1,4 @@
-import { type VariantProps } from "class-variance-authority"
-
-export type { VariantProps }
-
 export interface ComponentBaseProps {
   className?: string
   children?: React.ReactNode
 }
-
-export type PropsWithVariants<V> = ComponentBaseProps & VariantProps<V>
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 90dac2e4..60b42530 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,13 +1,15 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
-import tailwindcss from "@tailwindcss/vite";
 import path from "path";
 
 export default defineConfig({
-  plugins: [react(), tailwindcss()],
+  plugins: [react()],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),
     },
   },
+  css: {
+    postcss: path.resolve(__dirname, "./postcss.config.cjs"),
+  },
 });