david c28a5e02c3 feat: add RdxContextPanel and related tests for context management

feat: implement RdxEditor components including layout, section, and sticky footer with tests

feat: introduce RdxFormGrid for form layout management

feat: create RdxPage components for structured page layout with actions and headers

feat: add RdxRowActions for handling row-level actions with dropdown support

2026-08-11 00:01:33 +02:00

2.1 KiB

Raw Blame History

Foundations Rdx

Estado

Este documento define las foundations estructurales iniciales del sistema visual Rdx.

El documento canónico de contexto global es:

visual-system-design.md

Espaciado de página

mobile:
  padding 4

desktop:
  padding 6

Referencia inicial:

px-4 py-4
md:px-6 md:py-6

Se aplica en RdxPageContainer.

Uso correcto:

usarlo como padding principal de página;
no anidarlo dentro de otro contenedor que ya aporte el mismo padding estructural;
si el shell ya aplica padding equivalente, el consumidor debe evitar duplicarlo.

Ritmo vertical

compact:
  gap 4

default:
  gap 6

relaxed:
  gap 8

No se fija gap-12 como foundation general.

Se aplica en RdxPageStack.

Anchuras

full:
  w-full

wide:
  max-w-screen-2xl mx-auto

content:
  max-w-5xl mx-auto

Uso recomendado:

full: listados, tablas, editores complejos, pantallas documentales;
wide: detalles o páginas amplias centradas;
content: editores simples y formularios de una columna lógica.

Superficies

contenido principal:
  plano

secciones:
  separadas por espacio o divisores

aside:
  puede usar paneles

tabla/editor de líneas:
  puede usar superficie independiente

card:
  excepción, no default

Reglas:

no usar card como solución por defecto para toda la página;
evitar card dentro de card;
preferir espacio, jerarquía tipográfica y divisores.

Sombras

página:
  sin sombra

secciones:
  sin sombra

panel contextual:
  sombra suave opcional

sticky header/footer:
  preferir borde
  usar sombra mínima solo cuando sea necesaria

Tema

Uso obligatorio de tokens semánticos:

bg-background
text-foreground
bg-muted
text-muted-foreground
border-border
bg-primary
text-primary-foreground
bg-destructive
text-destructive-foreground