@eduardoalvarez/arrecife 0.4.0 → 0.5.0

package/dist/index.d.cts

@@ -32,16 +32,25 @@ import '@radix-ui/react-label';
  * El plegable. Lo pedían dos proyectos: el FAQ del portafolio y el temario de
  * cursos, que es literalmente una lista de secciones que se abren.
  *
- * NO se anima la altura, que es lo primero que hace todo el mundo con este
- * componente. Radix publica `--radix-accordion-content-height` justo para eso y
- * aquí no se usa: el sistema no anima posición ni tamaño, y un panel que crece
- * a 200ms es exactamente el desplazamiento que las tarjetas, los menús y los
- * modales ya evitan. El panel aparece donde va a quedarse.
+ * La altura SÍ se anima, y es la cuarta excepción declarada del sistema.
  *
- * Lo único que se mueve es el galón, y se mueve porque `rotate` bajo
- * `transition-standard` NO transiciona: la utilidad solo cubre color y borde,
- * así que el giro es instantáneo aunque la clase esté puesta. Es el mismo trato
- * que recibe el ancho de `Progress`.
+ * Merece explicarse, porque la regla general es la contraria y este componente
+ * nació sin animar citándola. La diferencia es que aquí no APARECE nada: se
+ * abre un hueco, y todo lo que hay debajo del acordeón se desplaza. Sin
+ * transición ese desplazamiento es un salto, y quien acaba de pulsar pierde el
+ * sitio en la página — que es justo el daño que la regla «nada de movimiento»
+ * existe para evitar. Es la misma categoría que el panel lateral, la segunda
+ * excepción, y no la de una animación de entrada.
+ *
+ * Va detrás de `motion-safe`, dura `--duration-standard` y usa
+ * `--ease-standard`, así que no estrena un tiempo ni una curva. Quien pidió
+ * menos movimiento sigue viendo el panel aparecer donde va a quedarse.
+ *
+ * Ver `docs/decisiones.md` § 20.
+ *
+ * El galón, en cambio, gira sin transición: `transition-standard` solo cubre
+ * color y borde, así que `rotate` salta aunque la clase esté puesta. Es el mismo
+ * trato que recibe el ancho de `Progress`.
  *
  * La división entre items es `hairline`, no `border`: es una separación de
  * lectura, no el borde de un control.
@@ -183,6 +192,40 @@ declare function Avatar({ className, size, ...props }: AvatarProps): react.JSX.E
 declare function AvatarImage({ className, ...props }: ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>): react.JSX.Element;
 /** Iniciales mientras la imagen carga, o cuando no hay imagen. */
 declare function AvatarFallback({ className, ...props }: ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>): react.JSX.Element;
+type AvatarUploadProps = Omit<ComponentPropsWithoutRef<'div'>, 'onSelect' | 'children'> & VariantProps<typeof avatar> & {
+    /** La imagen actual, ya subida. La previsualización local la gana mientras dure. */
+    src?: string | undefined;
+    /** Iniciales mientras no hay imagen. */
+    fallback?: ReactNode;
+    /** Se dispara con el archivo elegido. La subida la hace el proyecto. */
+    onSelectFile?: ((archivo: File) => void) | undefined;
+    /** Qué acepta el diálogo del sistema. */
+    accept?: string;
+    /** Nombre accesible del control. Es lo único que lo nombra: no hay texto visible. */
+    label?: string;
+    disabled?: boolean | undefined;
+};
+/**
+ * El avatar que se puede cambiar. `Avatar` muestra; este además deja elegir.
+ *
+ * Es presentacional, como `NewsletterForm`: emite `onSelectFile` con el `File` y
+ * ahí se acaba su trabajo. La subida no entra —cada proyecto tiene su
+ * almacenamiento y su endpoint— y un componente que hiciera el `POST` sería
+ * infraestructura, que es el tercer criterio de entrada y el que más se salta.
+ *
+ * La previsualización es LOCAL y no espera a que la subida termine. Es la
+ * diferencia entre un control que responde y uno que parece roto: entre elegir
+ * el archivo y que el servidor devuelva la URL pueden pasar segundos, y sin
+ * previa el avatar se queda con la foto vieja como si no hubiera pasado nada.
+ * El `objectURL` se revoca al cambiar y al desmontar; no revocarlo es una fuga
+ * de memoria que no da la cara hasta la décima foto.
+ *
+ * El control es un `<label>` con un `<input type="file">` oculto dentro, no un
+ * `<button>` que dispara un click sintético. El input real trae el diálogo del
+ * sistema, el arrastrar-y-soltar del navegador y el foco por teclado; el botón
+ * falso hay que reconstruirlo entero y siempre falta algo.
+ */
+declare function AvatarUpload({ src, fallback, onSelectFile, accept, label, size, disabled, className, ...props }: AvatarUploadProps): react.JSX.Element;
 
 /**
  * TRES familias de etiqueta, no una.
@@ -560,17 +603,11 @@ type TextareaProps = ComponentPropsWithoutRef<'textarea'> & {
 };
 declare function Textarea({ className, invalid, ...props }: TextareaProps): react.JSX.Element;
 
-declare const ToastProvider: react.FC<ToastPrimitive.ToastProviderProps>;
 declare const ToastAction: react.ForwardRefExoticComponent<ToastPrimitive.ToastActionProps & react.RefAttributes<HTMLButtonElement>>;
-declare function ToastViewport({ className, ...props }: ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport>): react.JSX.Element;
 declare const toast$1: (props?: ({
     variant?: "error" | "success" | "neutral" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ToastProps = ComponentPropsWithoutRef<typeof ToastPrimitive.Root> & VariantProps<typeof toast$1>;
-/** Sin deslizamiento de entrada: el aviso aparece donde va a quedarse. */
-declare function Toast({ className, variant, children, ...props }: ToastProps): react.JSX.Element;
-declare function ToastTitle({ className, ...props }: ComponentPropsWithoutRef<typeof ToastPrimitive.Title>): react.JSX.Element;
-declare function ToastDescription({ className, ...props }: ComponentPropsWithoutRef<typeof ToastPrimitive.Description>): react.JSX.Element;
 
 /**
  * La cara imperativa del `Toast` de Radix: `toast('Guardado')` desde cualquier
@@ -870,6 +907,53 @@ type EmptyStateProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {
 };
 declare function EmptyState({ expresion, title, description, action, basePath, className, ...props }: EmptyStateProps): react.JSX.Element;
 
+/**
+ * El calendario con eventos: verlos, crearlos, editarlos y borrarlos.
+ *
+ * `Calendar` es la primitiva y sigue siendo una rejilla de fechas: sirve para
+ * ELEGIR un día y no sabe nada de contenido. Esto es la agenda, y por eso vive
+ * en `components/` y no al lado de aquella — tiene estado, tiene formulario y
+ * codifica cómo se ve un día con cosas dentro.
+ *
+ * Es presentacional, como el resto de la librería: recibe `events` y emite
+ * `onCreateEvent`, `onUpdateEvent` y `onDeleteEvent`. No guarda nada, no llama a
+ * ninguna API y no genera ids — el id lo pone quien persiste, porque es quien
+ * sabe si viene de una base de datos o de un fichero.
+ *
+ * DOS COLUMNAS y no un popover sobre el día. El popover es lo que hace todo el
+ * mundo y esconde el contenido detrás de un clic: con la lista al lado, un mes
+ * con quince eventos se lee de un vistazo y el día seleccionado no tapa la
+ * rejilla. En pantalla estrecha se apilan.
+ *
+ * El borrado pasa por `AlertDialog` y no por un botón directo. Es exactamente el
+ * caso para el que existe: una acción destructiva sin deshacer.
+ */
+type EventoCalendario = {
+    /** Lo pone el proyecto. La librería nunca lo inventa. */
+    id: string;
+    /** Cuándo empieza, con hora. */
+    start: Date;
+    title: string;
+    /** `warm` cuando el evento es el problema, igual que en `Stat`. */
+    tone?: 'accent' | 'warm' | undefined;
+};
+type EventCalendarProps = Omit<ComponentPropsWithoutRef<'div'>, 'onSelect' | 'children'> & {
+    events: readonly EventoCalendario[];
+    /** Sin él, la agenda es de solo lectura y no se pinta el formulario. */
+    onCreateEvent?: ((evento: Omit<EventoCalendario, 'id'>) => void) | undefined;
+    onUpdateEvent?: ((evento: EventoCalendario) => void) | undefined;
+    onDeleteEvent?: ((id: string) => void) | undefined;
+    /** Día seleccionado, si el proyecto lo controla. Sin él, empieza en hoy. */
+    selected?: Date | undefined;
+    onSelectDay?: ((dia: Date) => void) | undefined;
+    /** Encabezado del panel. Por defecto, `es` de date-fns, como `Calendar`. */
+    formatDay?: ((dia: Date) => string) | undefined;
+    formatTime?: ((fecha: Date) => string) | undefined;
+    /** Texto del panel cuando el día elegido no tiene nada. */
+    emptyMessage?: ReactNode;
+};
+declare function EventCalendar({ events, onCreateEvent, onUpdateEvent, onDeleteEvent, selected, onSelectDay, formatDay, formatTime, emptyMessage, className, ...props }: EventCalendarProps): react.JSX.Element;
+
 /**
  * El pie, y la firma CLI del sitio: `$ cd ~/eduardoalvarez.dev/2026`.
  *
@@ -981,11 +1065,17 @@ declare function LinkRow({ name, description, icon, external, className, ...prop
  * Renderiza `<header>` colgando directamente del `body`, así que ES el landmark
  * `banner` del sitio. Por eso `PageHeader` va dentro de `<main>` y no es
  * landmark: dos banners en una página son un fallo de accesibilidad.
+ *
+ * Los items van a la DERECHA, pegados a las acciones, no a continuación de la
+ * marca. Con la marca a la izquierda y los items justo detrás, el bloque de
+ * navegación queda flotando en medio de la barra y el ojo tiene que cruzar el
+ * hueco dos veces: una para leer la marca y otra para volver a buscar la
+ * sección. Agrupados a la derecha, marca y navegación son dos anclas y no tres.
  */
 type NavProps = ComponentPropsWithoutRef<'header'> & {
     /** El logo, a la izquierda. */
     brand?: ReactNode;
-    /** Los items de sección, en el centro. */
+    /** Los items de sección. Van a la derecha, pegados a `actions`. */
     children?: ReactNode;
     /** Acciones a la derecha: conversión, cambio de tema, buscar. */
     actions?: ReactNode;
@@ -1004,6 +1094,13 @@ type NavItemProps = ComponentPropsWithoutRef<'a'> & {
  * no una convención que haya que recordar en cinco proyectos. Va `aria-hidden`,
  * así que un lector de pantalla anuncia «artículos» y no «punto barra
  * artículos».
+ *
+ * La sección actual va entre CORCHETES además de en bioluz y subrayada. No es
+ * decoración: el subrayado y el color son la misma señal —«esto destaca»— y en
+ * una barra de seis items en mono, a 13px, esa señal se lee peor de lo que
+ * parece en una maqueta. Los corchetes son la forma en que una terminal marca la
+ * ruta activa, así que dicen «estás aquí» sin depender de que se distinga el
+ * color. Van `aria-hidden`, porque quien escucha ya tiene `aria-current`.
  */
 declare function NavItem({ active, asChild, className, children, ...props }: NavItemProps): react.JSX.Element;
 
@@ -1176,6 +1273,11 @@ declare function SidebarNav({ title, version, branch, children, className, ...pr
  * es un dato; un 0 de design systems es el problema del que trata la charla.
  * Por eso `tone` no es una paleta abierta — son dos valores y significan cosas
  * distintas.
+ *
+ * El orden de lectura es icono + título, el número grande, y la bajada debajo.
+ * El número va en MEDIO y no al final a propósito: es lo que se viene a leer, y
+ * una bajada de dos líneas entre el título y la cifra la entierra. Arriba queda
+ * de qué va, en medio cuánto, y abajo el matiz que solo lee quien se para.
  */
 type StatProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {
     /** El número, ya formateado. La librería no impone locale. */
@@ -1186,8 +1288,18 @@ type StatProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {
     tone?: 'neutral' | 'alerta';
     /** Con `progress`, la métrica se lee como avance y añade la barra. */
     progress?: number | undefined;
+    /**
+     * Glifo al lado del título, a 1em. Hereda `currentColor`, así que sigue al
+     * tono del título y no hay que teñirlo aparte.
+     */
+    icon?: ReactNode;
+    /**
+     * La bajada: el matiz que el número solo no da. «12 aplicaciones» no dice si
+     * son muchas, y aquí es donde se dice.
+     */
+    description?: ReactNode;
 };
-declare function Stat({ value, label, tone, progress, className, ...props }: StatProps): react.JSX.Element;
+declare function Stat({ value, label, tone, progress, icon, description, className, ...props }: StatProps): react.JSX.Element;
 
 type TalkCardProps = Omit<TarjetaProps, 'children' | 'title'> & {
     title: ReactNode;
@@ -1324,4 +1436,4 @@ declare namespace social {
   export { social_Correo as Correo, social_Discord as Discord, social_GitHub as GitHub, social_Instagram as Instagram, social_LinkedIn as LinkedIn, social_Rss as Rss, social_X as X, social_YouTube as YouTube };
 }
 
-export { Accordion, AccordionContent, AccordionItem, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, type AlertProps, ArticleCard, type ArticleCardProps, AudioPlayer, type AudioPlayerMode, type AudioPlayerProps, AuthorCard, type AuthorCardProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarProps, Cara, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryBadge, type CategoryBadgeProps, Checkbox, type CheckboxProps, Code, CodeBlock, type CodeBlockProps, type CodeProps, CourseCard, type CourseCardProps, DateField, type DateFieldProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type Entrada, Footer, FooterLink, type FooterLinkProps, type FooterProps, HOVER_TARJETA, Hero, type HeroProps, Input, type InputProps, LinkRow, type LinkRowProps, MetricBadge, type MetricBadgeProps, type Migaja, Nav, NavItem, type NavItemProps, type NavProps, NewsletterForm, type NewsletterFormProps, type NewsletterState, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, Pose, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type Red, SUPERFICIE_TARJETA, ScrollingProgressBar, type ScrollingProgressBarProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarNavProps, Skeleton, type SkeletonProps, Stat, type StatProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, type TableOfContentsProps, TableRow, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, TalkCard, type TalkCardProps, Tema, Text, type TextProps, Textarea, type TextareaProps, ThemeToggle, type ThemeToggleProps, Toast, ToastAction, ToastDescription, type ToastOptions, type ToastProps, ToastProvider, ToastTitle, type ToastVariant, ToastViewport, Toaster, type ToasterProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alert as alertVariants, avatar as avatarVariants, badge as badgeVariants, button as buttonVariants, categoria as categoryBadgeVariants, cn, social, texto as textVariants, toast, useTema };
+export { Accordion, AccordionContent, AccordionItem, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, type AlertProps, ArticleCard, type ArticleCardProps, AudioPlayer, type AudioPlayerMode, type AudioPlayerProps, AuthorCard, type AuthorCardProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, AvatarUpload, type AvatarUploadProps, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarProps, Cara, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryBadge, type CategoryBadgeProps, Checkbox, type CheckboxProps, Code, CodeBlock, type CodeBlockProps, type CodeProps, CourseCard, type CourseCardProps, DateField, type DateFieldProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type Entrada, EventCalendar, type EventCalendarProps, type EventoCalendario, Footer, FooterLink, type FooterLinkProps, type FooterProps, HOVER_TARJETA, Hero, type HeroProps, Input, type InputProps, LinkRow, type LinkRowProps, MetricBadge, type MetricBadgeProps, type Migaja, Nav, NavItem, type NavItemProps, type NavProps, NewsletterForm, type NewsletterFormProps, type NewsletterState, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, Pose, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type Red, SUPERFICIE_TARJETA, ScrollingProgressBar, type ScrollingProgressBarProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarNavProps, Skeleton, type SkeletonProps, Stat, type StatProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, type TableOfContentsProps, TableRow, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, TalkCard, type TalkCardProps, Tema, Text, type TextProps, Textarea, type TextareaProps, ThemeToggle, type ThemeToggleProps, ToastAction, type ToastOptions, type ToastVariant, Toaster, type ToasterProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alert as alertVariants, avatar as avatarVariants, badge as badgeVariants, button as buttonVariants, categoria as categoryBadgeVariants, cn, social, texto as textVariants, toast, useTema };

package/dist/index.d.ts

@@ -32,16 +32,25 @@ import '@radix-ui/react-label';
  * El plegable. Lo pedían dos proyectos: el FAQ del portafolio y el temario de
  * cursos, que es literalmente una lista de secciones que se abren.
  *
- * NO se anima la altura, que es lo primero que hace todo el mundo con este
- * componente. Radix publica `--radix-accordion-content-height` justo para eso y
- * aquí no se usa: el sistema no anima posición ni tamaño, y un panel que crece
- * a 200ms es exactamente el desplazamiento que las tarjetas, los menús y los
- * modales ya evitan. El panel aparece donde va a quedarse.
+ * La altura SÍ se anima, y es la cuarta excepción declarada del sistema.
  *
- * Lo único que se mueve es el galón, y se mueve porque `rotate` bajo
- * `transition-standard` NO transiciona: la utilidad solo cubre color y borde,
- * así que el giro es instantáneo aunque la clase esté puesta. Es el mismo trato
- * que recibe el ancho de `Progress`.
+ * Merece explicarse, porque la regla general es la contraria y este componente
+ * nació sin animar citándola. La diferencia es que aquí no APARECE nada: se
+ * abre un hueco, y todo lo que hay debajo del acordeón se desplaza. Sin
+ * transición ese desplazamiento es un salto, y quien acaba de pulsar pierde el
+ * sitio en la página — que es justo el daño que la regla «nada de movimiento»
+ * existe para evitar. Es la misma categoría que el panel lateral, la segunda
+ * excepción, y no la de una animación de entrada.
+ *
+ * Va detrás de `motion-safe`, dura `--duration-standard` y usa
+ * `--ease-standard`, así que no estrena un tiempo ni una curva. Quien pidió
+ * menos movimiento sigue viendo el panel aparecer donde va a quedarse.
+ *
+ * Ver `docs/decisiones.md` § 20.
+ *
+ * El galón, en cambio, gira sin transición: `transition-standard` solo cubre
+ * color y borde, así que `rotate` salta aunque la clase esté puesta. Es el mismo
+ * trato que recibe el ancho de `Progress`.
  *
  * La división entre items es `hairline`, no `border`: es una separación de
  * lectura, no el borde de un control.
@@ -183,6 +192,40 @@ declare function Avatar({ className, size, ...props }: AvatarProps): react.JSX.E
 declare function AvatarImage({ className, ...props }: ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>): react.JSX.Element;
 /** Iniciales mientras la imagen carga, o cuando no hay imagen. */
 declare function AvatarFallback({ className, ...props }: ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>): react.JSX.Element;
+type AvatarUploadProps = Omit<ComponentPropsWithoutRef<'div'>, 'onSelect' | 'children'> & VariantProps<typeof avatar> & {
+    /** La imagen actual, ya subida. La previsualización local la gana mientras dure. */
+    src?: string | undefined;
+    /** Iniciales mientras no hay imagen. */
+    fallback?: ReactNode;
+    /** Se dispara con el archivo elegido. La subida la hace el proyecto. */
+    onSelectFile?: ((archivo: File) => void) | undefined;
+    /** Qué acepta el diálogo del sistema. */
+    accept?: string;
+    /** Nombre accesible del control. Es lo único que lo nombra: no hay texto visible. */
+    label?: string;
+    disabled?: boolean | undefined;
+};
+/**
+ * El avatar que se puede cambiar. `Avatar` muestra; este además deja elegir.
+ *
+ * Es presentacional, como `NewsletterForm`: emite `onSelectFile` con el `File` y
+ * ahí se acaba su trabajo. La subida no entra —cada proyecto tiene su
+ * almacenamiento y su endpoint— y un componente que hiciera el `POST` sería
+ * infraestructura, que es el tercer criterio de entrada y el que más se salta.
+ *
+ * La previsualización es LOCAL y no espera a que la subida termine. Es la
+ * diferencia entre un control que responde y uno que parece roto: entre elegir
+ * el archivo y que el servidor devuelva la URL pueden pasar segundos, y sin
+ * previa el avatar se queda con la foto vieja como si no hubiera pasado nada.
+ * El `objectURL` se revoca al cambiar y al desmontar; no revocarlo es una fuga
+ * de memoria que no da la cara hasta la décima foto.
+ *
+ * El control es un `<label>` con un `<input type="file">` oculto dentro, no un
+ * `<button>` que dispara un click sintético. El input real trae el diálogo del
+ * sistema, el arrastrar-y-soltar del navegador y el foco por teclado; el botón
+ * falso hay que reconstruirlo entero y siempre falta algo.
+ */
+declare function AvatarUpload({ src, fallback, onSelectFile, accept, label, size, disabled, className, ...props }: AvatarUploadProps): react.JSX.Element;
 
 /**
  * TRES familias de etiqueta, no una.
@@ -560,17 +603,11 @@ type TextareaProps = ComponentPropsWithoutRef<'textarea'> & {
 };
 declare function Textarea({ className, invalid, ...props }: TextareaProps): react.JSX.Element;
 
-declare const ToastProvider: react.FC<ToastPrimitive.ToastProviderProps>;
 declare const ToastAction: react.ForwardRefExoticComponent<ToastPrimitive.ToastActionProps & react.RefAttributes<HTMLButtonElement>>;
-declare function ToastViewport({ className, ...props }: ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport>): react.JSX.Element;
 declare const toast$1: (props?: ({
     variant?: "error" | "success" | "neutral" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ToastProps = ComponentPropsWithoutRef<typeof ToastPrimitive.Root> & VariantProps<typeof toast$1>;
-/** Sin deslizamiento de entrada: el aviso aparece donde va a quedarse. */
-declare function Toast({ className, variant, children, ...props }: ToastProps): react.JSX.Element;
-declare function ToastTitle({ className, ...props }: ComponentPropsWithoutRef<typeof ToastPrimitive.Title>): react.JSX.Element;
-declare function ToastDescription({ className, ...props }: ComponentPropsWithoutRef<typeof ToastPrimitive.Description>): react.JSX.Element;
 
 /**
  * La cara imperativa del `Toast` de Radix: `toast('Guardado')` desde cualquier
@@ -870,6 +907,53 @@ type EmptyStateProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {
 };
 declare function EmptyState({ expresion, title, description, action, basePath, className, ...props }: EmptyStateProps): react.JSX.Element;
 
+/**
+ * El calendario con eventos: verlos, crearlos, editarlos y borrarlos.
+ *
+ * `Calendar` es la primitiva y sigue siendo una rejilla de fechas: sirve para
+ * ELEGIR un día y no sabe nada de contenido. Esto es la agenda, y por eso vive
+ * en `components/` y no al lado de aquella — tiene estado, tiene formulario y
+ * codifica cómo se ve un día con cosas dentro.
+ *
+ * Es presentacional, como el resto de la librería: recibe `events` y emite
+ * `onCreateEvent`, `onUpdateEvent` y `onDeleteEvent`. No guarda nada, no llama a
+ * ninguna API y no genera ids — el id lo pone quien persiste, porque es quien
+ * sabe si viene de una base de datos o de un fichero.
+ *
+ * DOS COLUMNAS y no un popover sobre el día. El popover es lo que hace todo el
+ * mundo y esconde el contenido detrás de un clic: con la lista al lado, un mes
+ * con quince eventos se lee de un vistazo y el día seleccionado no tapa la
+ * rejilla. En pantalla estrecha se apilan.
+ *
+ * El borrado pasa por `AlertDialog` y no por un botón directo. Es exactamente el
+ * caso para el que existe: una acción destructiva sin deshacer.
+ */
+type EventoCalendario = {
+    /** Lo pone el proyecto. La librería nunca lo inventa. */
+    id: string;
+    /** Cuándo empieza, con hora. */
+    start: Date;
+    title: string;
+    /** `warm` cuando el evento es el problema, igual que en `Stat`. */
+    tone?: 'accent' | 'warm' | undefined;
+};
+type EventCalendarProps = Omit<ComponentPropsWithoutRef<'div'>, 'onSelect' | 'children'> & {
+    events: readonly EventoCalendario[];
+    /** Sin él, la agenda es de solo lectura y no se pinta el formulario. */
+    onCreateEvent?: ((evento: Omit<EventoCalendario, 'id'>) => void) | undefined;
+    onUpdateEvent?: ((evento: EventoCalendario) => void) | undefined;
+    onDeleteEvent?: ((id: string) => void) | undefined;
+    /** Día seleccionado, si el proyecto lo controla. Sin él, empieza en hoy. */
+    selected?: Date | undefined;
+    onSelectDay?: ((dia: Date) => void) | undefined;
+    /** Encabezado del panel. Por defecto, `es` de date-fns, como `Calendar`. */
+    formatDay?: ((dia: Date) => string) | undefined;
+    formatTime?: ((fecha: Date) => string) | undefined;
+    /** Texto del panel cuando el día elegido no tiene nada. */
+    emptyMessage?: ReactNode;
+};
+declare function EventCalendar({ events, onCreateEvent, onUpdateEvent, onDeleteEvent, selected, onSelectDay, formatDay, formatTime, emptyMessage, className, ...props }: EventCalendarProps): react.JSX.Element;
+
 /**
  * El pie, y la firma CLI del sitio: `$ cd ~/eduardoalvarez.dev/2026`.
  *
@@ -981,11 +1065,17 @@ declare function LinkRow({ name, description, icon, external, className, ...prop
  * Renderiza `<header>` colgando directamente del `body`, así que ES el landmark
  * `banner` del sitio. Por eso `PageHeader` va dentro de `<main>` y no es
  * landmark: dos banners en una página son un fallo de accesibilidad.
+ *
+ * Los items van a la DERECHA, pegados a las acciones, no a continuación de la
+ * marca. Con la marca a la izquierda y los items justo detrás, el bloque de
+ * navegación queda flotando en medio de la barra y el ojo tiene que cruzar el
+ * hueco dos veces: una para leer la marca y otra para volver a buscar la
+ * sección. Agrupados a la derecha, marca y navegación son dos anclas y no tres.
  */
 type NavProps = ComponentPropsWithoutRef<'header'> & {
     /** El logo, a la izquierda. */
     brand?: ReactNode;
-    /** Los items de sección, en el centro. */
+    /** Los items de sección. Van a la derecha, pegados a `actions`. */
     children?: ReactNode;
     /** Acciones a la derecha: conversión, cambio de tema, buscar. */
     actions?: ReactNode;
@@ -1004,6 +1094,13 @@ type NavItemProps = ComponentPropsWithoutRef<'a'> & {
  * no una convención que haya que recordar en cinco proyectos. Va `aria-hidden`,
  * así que un lector de pantalla anuncia «artículos» y no «punto barra
  * artículos».
+ *
+ * La sección actual va entre CORCHETES además de en bioluz y subrayada. No es
+ * decoración: el subrayado y el color son la misma señal —«esto destaca»— y en
+ * una barra de seis items en mono, a 13px, esa señal se lee peor de lo que
+ * parece en una maqueta. Los corchetes son la forma en que una terminal marca la
+ * ruta activa, así que dicen «estás aquí» sin depender de que se distinga el
+ * color. Van `aria-hidden`, porque quien escucha ya tiene `aria-current`.
  */
 declare function NavItem({ active, asChild, className, children, ...props }: NavItemProps): react.JSX.Element;
 
@@ -1176,6 +1273,11 @@ declare function SidebarNav({ title, version, branch, children, className, ...pr
  * es un dato; un 0 de design systems es el problema del que trata la charla.
  * Por eso `tone` no es una paleta abierta — son dos valores y significan cosas
  * distintas.
+ *
+ * El orden de lectura es icono + título, el número grande, y la bajada debajo.
+ * El número va en MEDIO y no al final a propósito: es lo que se viene a leer, y
+ * una bajada de dos líneas entre el título y la cifra la entierra. Arriba queda
+ * de qué va, en medio cuánto, y abajo el matiz que solo lee quien se para.
  */
 type StatProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {
     /** El número, ya formateado. La librería no impone locale. */
@@ -1186,8 +1288,18 @@ type StatProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {
     tone?: 'neutral' | 'alerta';
     /** Con `progress`, la métrica se lee como avance y añade la barra. */
     progress?: number | undefined;
+    /**
+     * Glifo al lado del título, a 1em. Hereda `currentColor`, así que sigue al
+     * tono del título y no hay que teñirlo aparte.
+     */
+    icon?: ReactNode;
+    /**
+     * La bajada: el matiz que el número solo no da. «12 aplicaciones» no dice si
+     * son muchas, y aquí es donde se dice.
+     */
+    description?: ReactNode;
 };
-declare function Stat({ value, label, tone, progress, className, ...props }: StatProps): react.JSX.Element;
+declare function Stat({ value, label, tone, progress, icon, description, className, ...props }: StatProps): react.JSX.Element;
 
 type TalkCardProps = Omit<TarjetaProps, 'children' | 'title'> & {
     title: ReactNode;
@@ -1324,4 +1436,4 @@ declare namespace social {
   export { social_Correo as Correo, social_Discord as Discord, social_GitHub as GitHub, social_Instagram as Instagram, social_LinkedIn as LinkedIn, social_Rss as Rss, social_X as X, social_YouTube as YouTube };
 }
 
-export { Accordion, AccordionContent, AccordionItem, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, type AlertProps, ArticleCard, type ArticleCardProps, AudioPlayer, type AudioPlayerMode, type AudioPlayerProps, AuthorCard, type AuthorCardProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarProps, Cara, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryBadge, type CategoryBadgeProps, Checkbox, type CheckboxProps, Code, CodeBlock, type CodeBlockProps, type CodeProps, CourseCard, type CourseCardProps, DateField, type DateFieldProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type Entrada, Footer, FooterLink, type FooterLinkProps, type FooterProps, HOVER_TARJETA, Hero, type HeroProps, Input, type InputProps, LinkRow, type LinkRowProps, MetricBadge, type MetricBadgeProps, type Migaja, Nav, NavItem, type NavItemProps, type NavProps, NewsletterForm, type NewsletterFormProps, type NewsletterState, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, Pose, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type Red, SUPERFICIE_TARJETA, ScrollingProgressBar, type ScrollingProgressBarProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarNavProps, Skeleton, type SkeletonProps, Stat, type StatProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, type TableOfContentsProps, TableRow, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, TalkCard, type TalkCardProps, Tema, Text, type TextProps, Textarea, type TextareaProps, ThemeToggle, type ThemeToggleProps, Toast, ToastAction, ToastDescription, type ToastOptions, type ToastProps, ToastProvider, ToastTitle, type ToastVariant, ToastViewport, Toaster, type ToasterProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alert as alertVariants, avatar as avatarVariants, badge as badgeVariants, button as buttonVariants, categoria as categoryBadgeVariants, cn, social, texto as textVariants, toast, useTema };
+export { Accordion, AccordionContent, AccordionItem, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, type AlertProps, ArticleCard, type ArticleCardProps, AudioPlayer, type AudioPlayerMode, type AudioPlayerProps, AuthorCard, type AuthorCardProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, AvatarUpload, type AvatarUploadProps, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarProps, Cara, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryBadge, type CategoryBadgeProps, Checkbox, type CheckboxProps, Code, CodeBlock, type CodeBlockProps, type CodeProps, CourseCard, type CourseCardProps, DateField, type DateFieldProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type Entrada, EventCalendar, type EventCalendarProps, type EventoCalendario, Footer, FooterLink, type FooterLinkProps, type FooterProps, HOVER_TARJETA, Hero, type HeroProps, Input, type InputProps, LinkRow, type LinkRowProps, MetricBadge, type MetricBadgeProps, type Migaja, Nav, NavItem, type NavItemProps, type NavProps, NewsletterForm, type NewsletterFormProps, type NewsletterState, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, Pose, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type Red, SUPERFICIE_TARJETA, ScrollingProgressBar, type ScrollingProgressBarProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarNavProps, Skeleton, type SkeletonProps, Stat, type StatProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, type TableOfContentsProps, TableRow, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, TalkCard, type TalkCardProps, Tema, Text, type TextProps, Textarea, type TextareaProps, ThemeToggle, type ThemeToggleProps, ToastAction, type ToastOptions, type ToastVariant, Toaster, type ToasterProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alert as alertVariants, avatar as avatarVariants, badge as badgeVariants, button as buttonVariants, categoria as categoryBadgeVariants, cn, social, texto as textVariants, toast, useTema };