fn_registry/.claude/rules/frontend_theming.md

En todos los frontends se usan los componentes de @fn_library (alias a frontend/functions/ui/) antes que elementos HTML nativos o librerias externas.

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.

AppShell.Navbar / AppShell.Aside (gotchas v9):

• NO override position via style (ej. style={{ position: "relative" }}). Mantine aplica position: fixed con CSS class; si lo pisas, el slot cae al flow normal y empuja el resto del layout abajo (root altura 2x).
• Para anclar children position: absolute (drag handle, badge flotante), el position: fixed del propio slot ya actua como containing block — no necesitas relative.
• Por defecto el navbar empuja el main (anade padding-inline-start: navbar-width). Para overlay (navbar tapa main):

  <AppShell styles={{ main: { paddingInlineStart: 0 } }}>
  

  Idem paddingInlineEnd: 0 para aside overlay.
• Si quieres backdrop dimming + click-outside-close: usa <Drawer position="left"> en lugar de AppShell.Navbar.
• Memoizar configs: header/navbar/aside/styles aceptan objetos. Si el componente padre se re-renderiza cada N (tick, ws, etc.), los objetos literales se recrean y Mantine regenera el <style> inline. Wrap con useMemo([deps]):

  const navbarCfg = useMemo(() => ({ width, breakpoint: "md", collapsed: { ... } }), [width, navOpen]);
  <AppShell navbar={navbarCfg} ...>