initial: mirror of @fn_library from fn_registry

75 components + DESIGN_SYSTEM.md + sync script.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

components/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".