create-lexy 0.6.1 → 0.6.3

package/templates/ai/pautas/patrones-de-codigo.md

@@ -0,0 +1,234 @@
+# Patrones de código de componentes
+
+Patrones que mantienen legible y mantenible el código React de un proyecto Lexy: composición antes que props-monolito, estado de formulario consolidado, constantes tipadas fuera del JSX y convenciones de assets y fuentes. Nacen de la auditoría de desarrollo del bootstrap (junio 2026).
+
+Esta pauta responde *cómo se escribe el código*; para *cuándo usar qué componente*
+usa [buenas-practicas.md](buenas-practicas.md), y para *valores* (espaciado, color,
+densidad) usa [sistema-visual.md](sistema-visual.md).
+
+---
+
+## 1. Composición antes que props-monolito (compound components)
+
+Un componente que recibe decenas de props para dibujar sus partes internas
+ensucia el JSX y lo vuelve ilegible. La regla Lexy: **las partes visibles se
+componen como hijos; las props configuran comportamiento, no contenido**.
+
+- Los componentes del registry ya son compuestos: úsalos así. `Card` se arma con
+  `CardHeader`/`CardTitle`/`CardContent`/`CardFooter`; `Dialog` con
+  `DialogTrigger`/`DialogContent`; `Sidebar` con `SidebarProvider`/`SidebarInset`/
+  `SidebarTrigger`; `Tabs` con `TabsList`/`TabsTrigger`/`TabsContent`.
+- Cuando crees un componente propio con más de una zona visible (encabezado,
+  cuerpo, acciones), expón subcomponentes en lugar de props tipo `tituloX`,
+  `mostrarY` o `renderZ`.
+
+Anti-patrón:
+
+```tsx
+<CasoResumen
+  titulo="Caso 2024-113"
+  estado="activo"
+  mostrarAcciones
+  textoAccionPrimaria="Archivar"
+  onAccionPrimaria={onArchivar}
+  piePersonalizado={renderPie()}
+/>
+```
+
+Correcto:
+
+```tsx
+<CasoResumen densidad="compacta">
+  <CasoResumen.Header>
+    <CasoResumen.Titulo>Caso 2024-113</CasoResumen.Titulo>
+    <Badge variant="outline">Activo</Badge>
+  </CasoResumen.Header>
+  <CasoResumen.Body>…</CasoResumen.Body>
+  <CasoResumen.Footer>
+    <Button variant="outline" onClick={onArchivar}>
+      Archivar
+    </Button>
+  </CasoResumen.Footer>
+</CasoResumen>
+```
+
+### El mecanismo: contexto compartido + dot notation
+
+El patrón de referencia (la `Table` del CLI Lexy de desarrollo, con variantes
+`normal`/`basic`/`striped` y `stickyHeader`) tiene tres piezas:
+
+1. **Un Context propio del componente** guarda las decisiones que comparten todas
+   sus partes (variante, columnas, densidad); el padre lo provee una sola vez.
+2. **Los subcomponentes se cuelgan del padre** (`Table.Header = function Header`)
+   y leen ese contexto con `useContext`, en vez de recibir las mismas props
+   repetidas en cada nivel.
+3. **El consumidor solo compone** (`<Table.Header>`, `<Table.Row>`,
+   `<Table.Cell>`); el estilo por variante se resuelve adentro del componente,
+   no en el JSX de la pantalla.
+
+```tsx
+import { createContext, useContext, type ReactNode } from "react";
+
+type Densidad = "normal" | "compacta";
+
+const CasoResumenContext = createContext<{ densidad: Densidad }>({
+  densidad: "normal",
+});
+
+export function CasoResumen({
+  children,
+  densidad = "normal",
+}: {
+  children: ReactNode;
+  densidad?: Densidad;
+}) {
+  const ctx = { densidad };
+  return (
+    <CasoResumenContext.Provider value={ctx}>
+      <section className="rounded-md border border-border bg-card">
+        {children}
+      </section>
+    </CasoResumenContext.Provider>
+  );
+}
+
+CasoResumen.Header = function Header({ children }: { children: ReactNode }) {
+  const { densidad } = useContext(CasoResumenContext);
+  return (
+    <header className={densidad === "compacta" ? "px-4 py-2" : "px-6 py-4"}>
+      {children}
+    </header>
+  );
+};
+```
+
+- La variante o densidad se pasa **una sola vez** al padre y todas las partes se
+  ajustan solas: nada de `variantHeader`, `variantRow` ni props espejo.
+- Los estilos internos usan **tokens semánticos** (`bg-card`, `border-border`,
+  `text-muted-foreground`), nunca colores crudos.
+- Las excepciones data-driven del sistema (`AppSidebar`, `AppHeaderBar`,
+  `AppDialog`, `AppAccordion`) existen para casos estándar de alto nivel; no
+  repliques ese patrón en componentes nuevos sin necesidad real.
+
+## 2. Estado consolidado: nada de `useState` en cascada
+
+Varios `useState` que pertenecen al mismo rol (los campos de un formulario, los
+filtros de una tabla) fragmentan el estado, multiplican re-renders y hacen
+ilegible el componente.
+
+**Regla: tres o más `useState` del mismo dominio → un solo objeto de estado o un
+custom hook.**
+
+Anti-patrón:
+
+```tsx
+const [nombre, setNombre] = useState("");
+const [rut, setRut] = useState("");
+const [email, setEmail] = useState("");
+const [telefono, setTelefono] = useState("");
+const [comuna, setComuna] = useState("");
+```
+
+Correcto:
+
+```tsx
+type FormState = {
+  nombre: string;
+  rut: string;
+  email: string;
+  telefono: string;
+  comuna: string;
+};
+
+const FORM_INICIAL: FormState = {
+  nombre: "",
+  rut: "",
+  email: "",
+  telefono: "",
+  comuna: "",
+};
+
+const [form, setForm] = useState<FormState>(FORM_INICIAL);
+
+const setCampo = <K extends keyof FormState>(campo: K, valor: FormState[K]) =>
+  setForm((prev) => ({ ...prev, [campo]: valor }));
+```
+
+- Si la lógica se repite en más de una pantalla, extráela a un custom hook
+  (`useFormulario`, `useFiltros`) en la ruta de hooks del proyecto.
+- El estado local y el de URL siguen siendo lo primero (ver
+  [buenas-practicas.md](buenas-practicas.md)); esta regla es sobre la *forma* del
+  estado, no sobre dónde vive.
+
+## 3. Constantes tipadas fuera del JSX
+
+Las listas de opciones, catálogos y textos estructurales no se declaran inline en
+el JSX ni se re-tipean en cada uso. Viven en un `constants.ts` junto al feature
+(o en `src/shared/constants.ts` si son transversales), con un tipo estandarizado:
+
+```ts
+// constants.ts
+import type { Decision } from "./types";
+
+export type Opcion = {
+  value: Decision;
+  label: string;
+  descripcion?: string;
+};
+
+export const OPCIONES: Opcion[] = [
+  { value: "aprobar", label: "Aprobar", descripcion: "Continúa el flujo" },
+  { value: "rechazar", label: "Rechazar", descripcion: "Cierra el caso" },
+];
+```
+
+El componente solo consume:
+
+```tsx
+<RadioGroup>
+  {OPCIONES.map((opcion) => (
+    <RadioGroupItem key={opcion.value} value={opcion.value}>
+      {opcion.label}
+    </RadioGroupItem>
+  ))}
+</RadioGroup>
+```
+
+- `value` sale de un tipo de dominio (`Decision`), nunca `string` suelto; `label`
+  y `descripcion` son presentación.
+- Si el dato participa de la experiencia (visible, editable, calculado o
+  filtrable), su tipo nace del **contrato de datos del prototipo**, no de una
+  constante ad hoc.
+
+## 4. Assets: dónde viven y cómo se importan
+
+- **Arquitectura layer**: assets compartidos en `src/assets/`.
+- **Arquitectura feature**: los assets de un feature viven junto al feature; los
+  transversales, en `src/shared/assets/`.
+- **Siempre imports estáticos** (`import logo from "./assets/logo.svg"`), nunca
+  rutas string armadas en runtime: el import estático permite al bundler
+  optimizar, versionar y eliminar lo no usado (tree-shaking).
+- Lo que no pasa por el bundler (favicon, fuentes) vive en `public/`.
+
+## 5. Fuentes autoalojadas, no CDN
+
+Decisión de sistema: **Geist Sans y Geist Mono se sirven desde `public/fonts/`**,
+no desde Google Fonts ni otro CDN.
+
+Razones: sin dependencia de terceros ni fuga de IPs de usuarios hacia Google
+(privacidad), latencia estable y funcionamiento sin conexión o en intranet. El scaffold ya deja las fuentes y su
+licencia en `public/fonts/`; no agregues `<link>` a fonts.googleapis.com.
+
+## 6. Bundle de producción
+
+El `vite.config.ts` del scaffold ya trae la política de build; no la elimines:
+
+- `minify: "terser"` con `drop_console`/`drop_debugger`: nada de `console.*` ni
+  `debugger` en producción.
+- **Code splitting por grupos de vendor** (`rolldownOptions.output.codeSplitting`):
+  separa `node_modules` en bundles temáticos (react-core, router, query, state,
+  utils, ui, radix, icons, vendor) con `minSize` 20000, para carga diferida y
+  mejor caché entre deploys.
+
+Si agregas una dependencia pesada nueva, evalúa darle un grupo propio en la misma
+configuración antes de dejarla caer al grupo `vendor` genérico.

package/templates/ai/pautas/recetas-layout.md

@@ -0,0 +1,419 @@
+# Recetas de layout Lexy
+
+Composiciones canónicas listas para adaptar. Cada receta indica para qué **mundo**
+es (cliente o CRM), qué componentes del registry usa y el patrón. Úsalas como punto
+de partida; no como plantilla rígida que se pega sin pensar la tarea real.
+
+## Antes de copiar
+
+- **Las recetas 1–5 y 7 existen como blocks instalables**: `npx create-lexy add
+  intake-wizard | confirmacion | login | crm-desk | crm-detalle-caso | crm-app-layout`
+  instala la vista en tu proyecto con todos sus componentes resueltos — parte de ahí
+  y edítala con libertad en vez de copiar el código de esta pauta.
+- **Si copias a mano, instala los componentes primero.** Cada componente de la receta
+  debe estar en tu proyecto: `npx create-lexy add button input label …` (resuelve
+  dependencias internas solo).
+- **Imports locales.** Los ejemplos usan el deletreo de la arquitectura *layer*
+  (`@/components/base/X`); en *feature* es `@/shared/components/base/X`. El patrón exacto
+  de tu proyecto está en `componentImportPattern` de `ai/lexy-ai-manifest.json` — síguelo.
+- Aplica densidad y tokens según [sistema-visual.md](sistema-visual.md) y las reglas de [buenas-practicas.md](buenas-practicas.md).
+
+---
+
+## Shell de página y degradación móvil
+
+Toda vista se envuelve en el mismo shell: ancho máximo, centrada, márgenes
+laterales que respiran según dispositivo. Los tokens ya existen — háblalos:
+
+```tsx
+<div className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
+  {/* contenido de la vista */}
+</div>
+```
+
+El contrato responsive es **móvil = <768px** (`--breakpoint-md` en el theme;
+en JS, `useIsMobile` del registry). Ninguna receta se entrega «solo
+desktop»: cada una define qué colapsa (pauta buenas-practicas.md §5).
+
+| Receta | Degradación móvil |
+| --- | --- |
+| 1. Intake / wizard | Móvil primero. Bajo `sm` las acciones apilan full-width, CTA primero. |
+| 2. Confirmación | CTA full-width bajo `sm`. |
+| 3. Login | Móvil primero (columna `max-w-sm`), sin cambios. |
+| 4. Desk con tabla | La tabla densa pasa a **lista** (`md:hidden` / `hidden md:block`); la toolbar apila y la búsqueda es full-width. |
+| 5. Detalle de caso | Las columnas apilan bajo `lg` (`flex-col lg:flex-row`): contexto arriba, trabajo debajo. |
+| 7. Layout de aplicación | El sidebar se vuelve `Sheet` (lo hace el componente) y un header solo-móvil expone `SidebarTrigger`. |
+
+Al degradar: no escondas acciones frecuentes (esconde detalle secundario),
+target táctil ≥44px (`size="default"` en touch), y revisa en Storybook con
+el viewport «Móvil (375px)» antes de entregar. `pnpm lint:responsive`
+fiscaliza que ningún block quede desktop-only.
+
+## 1. Cliente — Intake / ficha web (paso de wizard)
+
+**Mundo:** cliente. **Patrón:** un paso enfocado, columna angosta, calma, CTA al final.
+**Componentes:** `Progress`, `Input`, `Label`, `Button`, `Textarea`.
+
+```tsx
+import { Button } from "@/components/base/Button";
+import { Input } from "@/components/base/Input";
+import { Label } from "@/components/base/Label";
+import { Progress } from "@/components/base/Progress";
+
+export function IntakeDatosPersonales() {
+  return (
+    <main className='mx-auto w-full max-w-xl px-4 py-10'>
+      <div className='mb-8'>
+        <p className='mb-2 type-supporting text-muted-foreground'>Paso 2 de 4</p>
+        <Progress value={50} aria-label='Avance del formulario' />
+      </div>
+
+      <header className='mb-6'>
+        <h1 className='type-page-title text-foreground'>Cuéntanos tus datos</h1>
+        <p className='mt-2 type-body text-muted-foreground'>
+          Usaremos esta información para preparar la primera revisión de tu caso.
+        </p>
+      </header>
+
+      <form className='space-y-5'>
+        <fieldset className='space-y-5 border-0 p-0'>
+          <legend className='sr-only'>Datos personales</legend>
+
+          <div className='space-y-2'>
+            <Label htmlFor='nombre'>Nombre completo</Label>
+            <Input id='nombre' name='nombre' placeholder='Escribe tu nombre' />
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='correo'>Correo</Label>
+            <Input id='correo' name='correo' type='email' placeholder='tu@correo.cl' />
+            <p className='type-meta text-muted-foreground'>
+              Te escribiremos solo para avanzar con tu caso.
+            </p>
+          </div>
+        </fieldset>
+
+        <div className='flex items-center justify-between pt-2'>
+          <Button type='button' variant='ghost'>Volver</Button>
+          <Button type='submit'>Guardar y continuar</Button>
+        </div>
+      </form>
+    </main>
+  );
+}
+```
+
+**Evita:** hero comercial, eyebrow decorativo, una card por campo, mostrar los 4 pasos
+en una sola pantalla.
+
+---
+
+## 2. Cliente — Confirmación / éxito
+
+**Mundo:** cliente. **Patrón:** celebra breve, di qué pasa ahora y dónde seguir.
+**Componentes:** `Button` (e icono de lucide).
+
+```tsx
+import { CheckCircle2 } from "lucide-react";
+import { Button } from "@/components/base/Button";
+
+export function EnvioConfirmado() {
+  return (
+    <main className='mx-auto flex min-h-[60vh] w-full max-w-md flex-col items-center justify-center px-4 text-center'>
+      <span className='mb-4 flex size-12 items-center justify-center rounded-full bg-success/10'>
+        <CheckCircle2 className='size-6 text-success' aria-hidden />
+      </span>
+      <h1 className='type-page-title text-foreground'>
+        ¡Enviamos tus documentos!
+      </h1>
+      <p className='mt-2 type-body text-muted-foreground'>
+        El equipo legal los está revisando. Podrás seguir su estado en la pestaña
+        «Enviados» y te avisaremos si falta algo.
+      </p>
+      <Button className='mt-6'>Volver al inicio</Button>
+    </main>
+  );
+}
+```
+
+---
+
+## 3. Cliente — Acceso (login)
+
+**Mundo:** cliente. **Patrón:** una sola tarea, foco único, ayuda contextual breve.
+**Componentes:** `Card`, `Input`, `Label`, `Button`, `Logo`.
+
+```tsx
+import { Button } from "@/components/base/Button";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/base/Card";
+import { Input } from "@/components/base/Input";
+import { Label } from "@/components/base/Label";
+
+export function Login() {
+  return (
+    <main className='flex min-h-screen items-center justify-center bg-background px-4'>
+      <Card className='w-full max-w-sm'>
+        <CardHeader>
+          <CardTitle>Ingresa a Lexy</CardTitle>
+          <CardDescription>Te acompañamos con tu caso desde aquí.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form className='space-y-4'>
+            <div className='space-y-2'>
+              <Label htmlFor='email'>Correo</Label>
+              <Input id='email' type='email' placeholder='tu@correo.cl' />
+            </div>
+            <div className='space-y-2'>
+              <Label htmlFor='pass'>Contraseña</Label>
+              <Input id='pass' type='password' placeholder='Ingresa tu contraseña' />
+            </div>
+            <Button type='submit' className='w-full'>Entrar</Button>
+          </form>
+        </CardContent>
+      </Card>
+    </main>
+  );
+}
+```
+
+---
+
+## 4. CRM — Desk con tabla y acciones
+
+**Mundo:** CRM. **Patrón:** ancho completo, toolbar con búsqueda y acción primaria,
+tabla densa y escaneable con estado por fila, paginación al pie cuando hay más
+registros de los que caben. **Componentes:** `Searchbox` (o `Input`), `Button`,
+`Table`, `StatusDot`, `Tag`, `Pagination`.
+
+```tsx
+import { Plus } from "lucide-react";
+import { Button } from "@/components/base/Button";
+import { Input } from "@/components/base/Input";
+import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/base/Pagination";
+import { StatusDot } from "@/components/base/StatusDot";
+import { Table } from "@/components/base/Table";
+
+export function CasosDesk() {
+  return (
+    <main className='w-full p-4'>
+      <header className='mb-4 flex items-center justify-between gap-4'>
+        <div>
+          <h1 className='type-subsection-title text-foreground'>Casos</h1>
+          <p className='type-supporting text-muted-foreground'>24 activos · 3 vencen hoy</p>
+        </div>
+        <div className='flex items-center gap-2'>
+          <Input className='h-9 w-64' placeholder='Buscar por cliente o RUT' aria-label='Buscar casos' />
+          <Button size='sm'>
+            <Plus /> Nuevo caso
+          </Button>
+        </div>
+      </header>
+
+      <Table columns='2fr 1.5fr 1fr 1fr' stickyHeader>
+        <Table.Header>
+          <Table.Cell>Cliente</Table.Cell>
+          <Table.Cell>Materia</Table.Cell>
+          <Table.Cell>Estado</Table.Cell>
+          <Table.Cell>Plazo</Table.Cell>
+        </Table.Header>
+        <Table.Content>
+          <Table.Row onClick={() => {}}>
+            <Table.Cell className='type-item-title text-foreground'>María Pérez</Table.Cell>
+            <Table.Cell>Despido</Table.Cell>
+            <Table.Cell><StatusDot tone='warning'>En revisión</StatusDot></Table.Cell>
+            <Table.Cell className='type-data text-warning-strong'>Vence hoy</Table.Cell>
+          </Table.Row>
+          <Table.Row onClick={() => {}}>
+            <Table.Cell className='type-item-title text-foreground'>Juan Soto</Table.Cell>
+            <Table.Cell>Deuda</Table.Cell>
+            <Table.Cell><StatusDot tone='success'>Al día</StatusDot></Table.Cell>
+            <Table.Cell className='type-data text-muted-foreground'>12 días</Table.Cell>
+          </Table.Row>
+        </Table.Content>
+      </Table>
+
+      <footer className='mt-4 flex items-center justify-between'>
+        <p className='type-supporting text-muted-foreground'>Mostrando 1–20 de 64 casos</p>
+        <Pagination className='mx-0 w-auto justify-end'>
+          <PaginationContent>
+            <PaginationItem><PaginationPrevious href='#' /></PaginationItem>
+            <PaginationItem><PaginationLink href='#' isActive>1</PaginationLink></PaginationItem>
+            <PaginationItem><PaginationLink href='#'>2</PaginationLink></PaginationItem>
+            <PaginationItem><PaginationLink href='#'>3</PaginationLink></PaginationItem>
+            <PaginationItem><PaginationNext href='#' /></PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      </footer>
+    </main>
+  );
+}
+```
+
+**Evita:** envolver cada fila en una card, espaciado de cliente, color como único
+signo de estado (por eso `StatusDot` lleva texto), y listas de cientos de filas
+sin `Pagination`.
+
+---
+
+## 5. CRM — Detalle de caso (master-detail)
+
+**Mundo:** CRM. **Patrón:** contexto a la izquierda, trabajo al centro, acciones a la
+mano. La información que se consulta junta vive junta. **Componentes:** `Tabs`,
+`Button`, `Separator`, `Tag`, `Avatar`.
+
+```tsx
+import { Button } from "@/components/base/Button";
+import { Separator } from "@/components/base/Separator";
+import { Tag } from "@/components/base/Tag";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/base/Tabs";
+
+export function CasoDetalle() {
+  return (
+    <main className='flex w-full gap-4 p-4'>
+      <aside className='w-72 shrink-0 space-y-4'>
+        <div>
+          <h1 className='type-item-title text-foreground'>María Pérez</h1>
+          <p className='type-supporting text-muted-foreground'>Caso #1042 · Despido</p>
+        </div>
+        <Tag tone='warning'>En revisión</Tag>
+        <Separator />
+        <dl className='space-y-2 type-supporting'>
+          <div className='flex justify-between'>
+            <dt className='text-muted-foreground'>Abogado</dt>
+            <dd className='text-foreground'>C. Rivera</dd>
+          </div>
+          <div className='flex justify-between'>
+            <dt className='text-muted-foreground'>Plazo</dt>
+            <dd className='text-warning'>Vence hoy</dd>
+          </div>
+        </dl>
+      </aside>
+
+      <section className='min-w-0 flex-1'>
+        <div className='mb-3 flex items-center justify-between'>
+          <h2 className='type-section-title text-foreground'>Gestiones</h2>
+          <Button size='sm'>Nueva gestión</Button>
+        </div>
+        <Tabs defaultValue='actividad'>
+          <TabsList>
+            <TabsTrigger value='actividad'>Actividad</TabsTrigger>
+            <TabsTrigger value='documentos'>Documentos</TabsTrigger>
+            <TabsTrigger value='notas'>Notas</TabsTrigger>
+          </TabsList>
+          <TabsContent value='actividad'>{/* timeline */}</TabsContent>
+          <TabsContent value='documentos'>{/* lista */}</TabsContent>
+          <TabsContent value='notas'>{/* notas */}</TabsContent>
+        </Tabs>
+      </section>
+    </main>
+  );
+}
+```
+
+---
+
+## 6. Estados de datos: loading, empty, error
+
+**Mundo:** ambos (obligatorio en toda vista con datos). **Patrón:** nunca dejes una
+vista en blanco mientras carga ni un vacío sin salida. **Componentes:** `Skeleton`
+(layout conocido) o `Spinner` (espera puntual), `Empty`, `Button`.
+
+```tsx
+import { FolderOpen } from "lucide-react";
+import { Button } from "@/components/base/Button";
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/base/Empty";
+import { Skeleton } from "@/components/base/Skeleton";
+
+function ListaLoading() {
+  // Skeleton con la forma del contenido real. Usa Spinner solo para esperas
+  // puntuales sin layout (p. ej. dentro de un botón al enviar).
+  return (
+    <div className='space-y-3' aria-busy='true' aria-live='polite'>
+      {Array.from({ length: 5 }).map((_, i) => (
+        <Skeleton key={i} className='h-12 w-full' />
+      ))}
+    </div>
+  );
+}
+
+function ListaVacia() {
+  return (
+    <Empty>
+      <EmptyHeader>
+        <EmptyMedia variant='icon'>
+          <FolderOpen className='size-6' aria-hidden />
+        </EmptyMedia>
+        <EmptyTitle>Aún no hay casos</EmptyTitle>
+        <EmptyDescription>Cuando crees un caso, aparecerá aquí.</EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button size='sm'>Crear primer caso</Button>
+      </EmptyContent>
+    </Empty>
+  );
+}
+
+function ListaError({ onRetry }: { onRetry: () => void }) {
+  return (
+    <Empty>
+      <EmptyHeader>
+        <EmptyTitle>No pudimos cargar los casos</EmptyTitle>
+        <EmptyDescription>Revisa tu conexión e inténtalo de nuevo.</EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button size='sm' variant='outline' onClick={onRetry}>
+          Reintentar
+        </Button>
+      </EmptyContent>
+    </Empty>
+  );
+}
+```
+
+**Regla:** cada vista que trae datos resuelve los cuatro estados —loading, vacío,
+error y contenido—. El éxito puntual (guardado, envío) se comunica con `Toast`.
+
+---
+
+## 7. CRM — Layout de aplicación (sidebar + contenido)
+
+**Mundo:** CRM. **Patrón:** estructura persistente de la app interna: navegación
+lateral colapsable data-driven y área de trabajo. Las vistas de las recetas 4 y 5
+viven dentro de `SidebarInset`. **Componentes:** `SidebarProvider`, `AppSidebar`,
+`SidebarInset`, `Logo`.
+
+```tsx
+import { FolderKanban, Inbox, Settings } from "lucide-react";
+import { AppSidebar } from "@/components/base/AppSidebar";
+import { Logo } from "@/components/base/Logo";
+import { SidebarInset, SidebarProvider } from "@/components/base/Sidebar";
+
+export function AppLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <SidebarProvider>
+      <AppSidebar
+        logo={<Logo layout='horizontal' />}
+        groups={[
+          {
+            label: "Trabajo",
+            items: [
+              { title: "Casos", icon: FolderKanban, url: "/casos", isActive: true },
+              { title: "Bandeja", icon: Inbox, url: "/bandeja" },
+            ],
+          },
+          {
+            label: "Sistema",
+            items: [{ title: "Configuración", icon: Settings, url: "/config" }],
+          },
+        ]}
+      />
+      <SidebarInset>{children}</SidebarInset>
+    </SidebarProvider>
+  );
+}
+```
+
+**Reglas:** la navegación va data-driven con `AppSidebar` (lee `AppSidebar.md`
+antes de usarla; no compongas a mano las primitivas de `Sidebar`). **Evita:**
+usar este layout en pantallas de cliente sin panel lateral (ahí va
+`AppHeaderBar` + secciones) y duplicar el logo dentro del contenido.