@eduardoalvarez/arrecife 0.6.0 → 0.7.0

package/dist/index.cjs

@@ -283,6 +283,30 @@ var spacing = {
 var size = {
   /** Navigation bar height. */
   nav: 64,
+  /**
+   * The bar when it shares the screen with a sidebar.
+   *
+   * It is not «a smaller bar because it looks better». At 64 the header of an
+   * app shell competes with the rail beside it for the same corner, and the two
+   * together eat the top of the content area. 56 is what `cursos` had arrived at
+   * on its own, and it is the same reasoning as `control.iconSm`: the one admin
+   * app of the five is denser than the four reading sites. See
+   * `docs/decisions.md` § 30.
+   */
+  navCompact: 56,
+  /**
+   * The admin sidebar, and the rail it collapses to.
+   *
+   * They are tokens and not the consumer's `w-*` because a collapsible sidebar
+   * has to know BOTH: the layout beside it reserves one of the two, and two
+   * numbers written by hand in two files drift the first time one of them moves.
+   * A sidebar that never collapses is still just a box the layout sizes.
+   *
+   * 56 is the rail: `navCompact`'s height, so a panel's bar and its rail meet in
+   * a square corner instead of a step.
+   */
+  sidebar: 256,
+  sidebarRail: 56,
   /** Reading column width. */
   content: 760,
   /** Maximum page width. */
@@ -315,9 +339,9 @@ var gradient = {
     og: `linear-gradient(145deg, ${dark.background} 55%, ${deep} 100%)`
   },
   light: {
-    hero: `linear-gradient(160deg, ${light.background} 60%, ${light.surfaceRaised} 100%)`,
-    section: `linear-gradient(150deg, ${light.surface} 0%, ${light.surfaceRaised} 100%)`,
-    og: `linear-gradient(145deg, ${light.background} 55%, ${light.surfaceRaised} 100%)`
+    hero: `linear-gradient(160deg, ${light.background} 60%, ${light.surface} 100%)`,
+    section: `linear-gradient(150deg, ${light.surface} 0%, ${light.background} 100%)`,
+    og: `linear-gradient(145deg, ${light.background} 55%, ${light.surface} 100%)`
   }
 };
 var shadow = {
@@ -452,7 +476,7 @@ var button = classVarianceAuthority.cva(
     "inline-flex cursor-pointer items-center justify-center gap-step-xs whitespace-nowrap select-none",
     "rounded-control font-sans font-medium",
     "transition-standard",
-    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+    "focus-ring",
     "disabled:pointer-events-none disabled:opacity-50",
     "[&_svg]:shrink-0"
   ],
@@ -463,7 +487,10 @@ var button = classVarianceAuthority.cva(
           "bg-accent text-accent-on hover:bg-accent-hover",
           "light:bg-brand-hull light:text-accent-on light:hover:bg-text-secondary"
         ],
-        conversion: "bg-warm text-warm-on hover:bg-warm-hover",
+        // The one control whose focus ring is not biolume. It is the system's
+        // only sand fill, and a biolume ring three pixels off a sand button puts
+        // both of the brand's accents in the same glance. See `decisions.md` § 37.
+        conversion: "bg-warm text-warm-on hover:bg-warm-hover focus-ring-warm",
         secondary: [
           "border-hairline-hover border bg-transparent text-text-primary",
           "hover:border-accent hover:text-accent"
@@ -621,7 +648,7 @@ var CARD = [
   "group block cursor-pointer",
   CARD_SURFACE,
   CARD_HOVER,
-  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+  "focus-ring"
 ];
 var kebab = (name) => name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
 var scales = Object.keys(typeScale);
@@ -786,7 +813,7 @@ function AccordionTrigger({
         "font-sans text-lead font-medium text-text-primary",
         "transition-standard",
         "hover:text-accent",
-        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "focus-ring",
         "disabled:pointer-events-none disabled:opacity-50",
         "[&[data-state=open]>svg]:rotate-180",
         className
@@ -1022,7 +1049,7 @@ function AvatarUpload({
           "transition-standard hover:text-accent hover:border-accent",
           // Focus lives on the input, which is hidden: without this, tabbing to
           // the control shows up nowhere.
-          "has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-accent",
+          "has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-3 has-[:focus-visible]:outline-accent",
           disabled && "pointer-events-none opacity-50"
         ),
         children: [
@@ -1111,14 +1138,14 @@ function Calendar({
     "rounded-chip inline-flex items-center justify-center",
     "transition-standard cursor-pointer",
     "hover:bg-surface-raised",
-    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+    "focus-ring",
     "disabled:pointer-events-none disabled:opacity-50"
   ].join(" ");
   const navigation = [
     "size-8 rounded-chip inline-flex items-center justify-center",
     "text-text-secondary transition-standard cursor-pointer",
     "hover:bg-surface-raised hover:text-text-primary",
-    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+    "focus-ring",
     "disabled:pointer-events-none disabled:opacity-50"
   ].join(" ");
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1237,7 +1264,7 @@ function Checkbox({ className, ...props }) {
         "rounded-chip border-border bg-surface size-5 shrink-0 cursor-pointer border",
         "text-accent-on transition-standard",
         "hover:border-hairline-hover",
-        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "focus-ring",
         "disabled:pointer-events-none disabled:opacity-50",
         "data-[state=checked]:border-accent data-[state=checked]:bg-accent",
         "data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent",
@@ -1280,7 +1307,7 @@ function DateField({
         "font-mono text-ui text-text-primary",
         "transition-standard",
         "hover:border-hairline-hover",
-        "focus-visible:border-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "focus-visible:border-accent focus-ring",
         "disabled:pointer-events-none disabled:opacity-50",
         "data-[invalid]:border-error data-[invalid]:focus-visible:outline-error",
         // The native indicator inherits the active theme's scheme.
@@ -1334,7 +1361,7 @@ function DialogContent({
                 "rounded-chip text-text-muted absolute top-4 right-4 flex size-8 cursor-pointer items-center justify-center",
                 "transition-standard",
                 "hover:bg-surface-raised hover:text-text-primary",
-                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+                "focus-ring"
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(Close, {})
             }
@@ -1483,7 +1510,7 @@ function Input({ className, invalid = false, ...props }) {
         "font-sans text-ui text-text-primary placeholder:text-text-muted",
         "transition-standard",
         "hover:border-hairline-hover",
-        "focus-visible:border-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "focus-visible:border-accent focus-ring",
         "disabled:pointer-events-none disabled:opacity-50",
         "data-[invalid]:border-error data-[invalid]:focus-visible:outline-error",
         "file:mr-step-sm file:border-0 file:bg-transparent file:font-sans file:text-label file:text-text-secondary",
@@ -1533,7 +1560,7 @@ function PaginationLink({ className, isActive = false, ...props }) {
         "font-sans text-ui text-text-secondary",
         "transition-standard",
         "hover:bg-surface hover:text-text-primary",
-        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "focus-ring",
         isActive && "bg-surface-raised text-text-primary",
         className
       ),
@@ -1548,7 +1575,7 @@ function PaginationPrevious({ className, ...props }) {
   ] });
 }
 function PaginationNext({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(PaginationLink, { "aria-label": "P\xE1gina next", className: cn("gap-step-xs", className), ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(PaginationLink, { "aria-label": "P\xE1gina siguiente", className: cn("gap-step-xs", className), ...props, children: [
     "Siguiente",
     /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, {})
   ] });
@@ -1618,7 +1645,7 @@ function RadioGroupItem({ className, ...props }) {
         "rounded-pill border-border bg-surface size-5 shrink-0 cursor-pointer border",
         "transition-standard",
         "hover:border-hairline-hover",
-        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "focus-ring",
         "disabled:pointer-events-none disabled:opacity-50",
         "data-[state=checked]:border-accent",
         className
@@ -1645,7 +1672,7 @@ function SelectTrigger({
         "font-sans text-ui text-text-primary",
         "transition-standard",
         "hover:border-hairline-hover",
-        "focus-visible:border-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "focus-visible:border-accent focus-ring",
         "disabled:pointer-events-none disabled:opacity-50",
         "data-[placeholder]:text-text-muted",
         className
@@ -1795,7 +1822,7 @@ function SheetContent({ className, side, children, ...props }) {
             "rounded-chip text-text-muted absolute top-4 right-4 flex size-8 cursor-pointer items-center justify-center",
             "transition-standard",
             "hover:bg-surface-raised hover:text-text-primary",
-            "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+            "focus-ring"
           ),
           children: /* @__PURE__ */ jsxRuntime.jsx(Close, {})
         }
@@ -1870,7 +1897,7 @@ function Switch({ className, ...props }) {
         "rounded-pill border-border bg-surface-raised inline-flex h-6 w-11 shrink-0 cursor-pointer items-center border",
         "transition-standard",
         "hover:border-hairline-hover",
-        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "focus-ring",
         "disabled:pointer-events-none disabled:opacity-50",
         "data-[state=checked]:border-accent data-[state=checked]:bg-accent",
         className
@@ -1971,7 +1998,7 @@ function TabsTrigger({
         "font-sans text-label text-text-secondary",
         "transition-standard",
         "hover:text-text-primary",
-        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "focus-ring",
         "disabled:pointer-events-none disabled:opacity-50",
         "data-[state=active]:bg-surface-raised data-[state=active]:text-text-primary",
         className
@@ -1988,7 +2015,7 @@ function TabsContent({
     TabsPrimitive__namespace.Content,
     {
       className: cn(
-        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "focus-ring",
         className
       ),
       ...props
@@ -2007,7 +2034,7 @@ function Textarea({ className, invalid = false, ...props }) {
         "font-sans text-ui text-text-primary placeholder:text-text-muted",
         "transition-standard",
         "hover:border-hairline-hover",
-        "focus-visible:border-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "focus-visible:border-accent focus-ring",
         "disabled:pointer-events-none disabled:opacity-50",
         "data-[invalid]:border-error data-[invalid]:focus-visible:outline-error",
         className
@@ -2062,7 +2089,7 @@ function Toast({ className, variant, children, ...props }) {
           "rounded-chip text-text-muted absolute top-3 right-3 flex size-7 cursor-pointer items-center justify-center",
           "transition-standard",
           "hover:bg-surface-raised hover:text-text-primary",
-          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+          "focus-ring"
         ),
         children: /* @__PURE__ */ jsxRuntime.jsx(Close, {})
       }
@@ -2304,21 +2331,21 @@ function ProgressBar({
     }
   );
 }
-var CONTROL = "rounded-chip transition-standard cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent";
+var CONTROL = "rounded-chip transition-standard cursor-pointer focus-ring";
 function SkipButton({
-  segundos,
+  seconds,
   className,
   size: size2,
-  onSaltar
+  onSkip
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       type: "button",
-      onClick: () => onSaltar(segundos),
+      onClick: () => onSkip(seconds),
       className: cn("text-text-muted hover:text-text-primary", CONTROL, className),
-      "aria-label": segundos < 0 ? "Retroceder 15 segundos" : "Adelantar 15 segundos",
-      children: segundos < 0 ? /* @__PURE__ */ jsxRuntime.jsx(GoBackSeconds, { className: size2 }) : /* @__PURE__ */ jsxRuntime.jsx(AdvanceSeconds, { className: size2 })
+      "aria-label": seconds < 0 ? "Retroceder 15 segundos" : "Adelantar 15 segundos",
+      children: seconds < 0 ? /* @__PURE__ */ jsxRuntime.jsx(GoBackSeconds, { className: size2 }) : /* @__PURE__ */ jsxRuntime.jsx(AdvanceSeconds, { className: size2 })
     }
   );
 }
@@ -2350,8 +2377,8 @@ function SpeedButton({
 function Volume({
   size: size2,
   width,
-  silenciado,
-  volumen,
+  muted,
+  volume,
   onMute,
   onVolumeChange
 }) {
@@ -2362,8 +2389,8 @@ function Volume({
         type: "button",
         onClick: onMute,
         className: cn("text-text-muted hover:text-text-primary p-1", CONTROL),
-        "aria-label": silenciado ? "Activar sonido" : "Silenciar",
-        children: silenciado || volumen === 0 ? /* @__PURE__ */ jsxRuntime.jsx(VolumeMuted, { className: size2 }) : /* @__PURE__ */ jsxRuntime.jsx(VolumeOn, { className: size2 })
+        "aria-label": muted ? "Activar sonido" : "Silenciar",
+        children: muted || volume === 0 ? /* @__PURE__ */ jsxRuntime.jsx(VolumeMuted, { className: size2 }) : /* @__PURE__ */ jsxRuntime.jsx(VolumeOn, { className: size2 })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -2373,20 +2400,20 @@ function Volume({
         min: "0",
         max: "1",
         step: "0.1",
-        value: silenciado ? 0 : volumen,
+        value: muted ? 0 : volume,
         onChange: onVolumeChange,
         className: cn(
           "bg-surface-raised rounded-pill h-1 cursor-pointer appearance-none",
           "[accent-color:var(--color-accent)]",
           width
         ),
-        "aria-label": "Volume"
+        "aria-label": "Volumen"
       }
     )
   ] });
 }
-function PlayIcon({ className, cargando, error, playing }) {
-  if (cargando) return /* @__PURE__ */ jsxRuntime.jsx(Spinner, { className: cn("motion-safe:animate-spin", className) });
+function PlayIcon({ className, loading, error, playing }) {
+  if (loading) return /* @__PURE__ */ jsxRuntime.jsx(Spinner, { className: cn("motion-safe:animate-spin", className) });
   if (error) return /* @__PURE__ */ jsxRuntime.jsx(Retry, { className });
   if (playing) return /* @__PURE__ */ jsxRuntime.jsx(Pause, { className });
   return /* @__PURE__ */ jsxRuntime.jsx(Play, { className });
@@ -2406,7 +2433,7 @@ function PlayButton({
       onClick: onToggle,
       className: cn(
         "text-accent-on transition-standard cursor-pointer",
-        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "focus-ring",
         state.error ? "bg-error hover:bg-error/80" : "bg-accent hover:bg-accent-hover",
         className
       ),
@@ -2575,7 +2602,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
   );
   const progress = duration > 0 ? currentTime / duration * 100 : 0;
   const playLabel = hasError ? "Reintentar" : isPlaying ? "Pausar" : "Reproducir";
-  const playState = { cargando: isLoading, error: hasError, playing: isPlaying };
+  const playState = { loading: isLoading, error: hasError, playing: isPlaying };
   const pointer = {
     onPointerDown: handlePointerDown,
     onPointerMove: handlePointerMove,
@@ -2616,7 +2643,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SkipButton, { segundos: -15, className: "p-1.5", size: "w-5 h-5", onSaltar: skip }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkipButton, { seconds: -15, className: "p-1.5", size: "w-5 h-5", onSkip: skip }),
             /* @__PURE__ */ jsxRuntime.jsx(
               PlayButton,
               {
@@ -2627,7 +2654,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
                 ...playState
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(SkipButton, { segundos: 15, className: "p-1.5", size: "w-5 h-5", onSaltar: skip }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkipButton, { seconds: 15, className: "p-1.5", size: "w-5 h-5", onSkip: skip }),
             /* @__PURE__ */ jsxRuntime.jsx(
               SpeedButton,
               {
@@ -2656,7 +2683,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-step-md", children: /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { height: "h-1.5", knob: 14, progress, ...pointer }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SkipButton, { segundos: -15, className: "p-2", size: "w-6 h-6", onSaltar: skip }),
+          /* @__PURE__ */ jsxRuntime.jsx(SkipButton, { seconds: -15, className: "p-2", size: "w-6 h-6", onSkip: skip }),
           /* @__PURE__ */ jsxRuntime.jsx(
             PlayButton,
             {
@@ -2668,7 +2695,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
               ...playState
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(SkipButton, { segundos: 15, className: "p-2", size: "w-6 h-6", onSaltar: skip }),
+          /* @__PURE__ */ jsxRuntime.jsx(SkipButton, { seconds: 15, className: "p-2", size: "w-6 h-6", onSkip: skip }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm ml-auto flex items-center", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               SpeedButton,
@@ -2683,8 +2710,8 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
               {
                 size: "w-4 h-4",
                 width: "w-16",
-                silenciado: isMuted,
-                volumen: volume,
+                muted: isMuted,
+                volume,
                 onMute: toggleMute,
                 onVolumeChange: handleVolumeChange
               }
@@ -2706,7 +2733,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SkipButton, { segundos: -15, className: "p-1.5", size: "w-5 h-5", onSaltar: skip }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkipButton, { seconds: -15, className: "p-1.5", size: "w-5 h-5", onSkip: skip }),
             /* @__PURE__ */ jsxRuntime.jsx(
               PlayButton,
               {
@@ -2717,7 +2744,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
                 ...playState
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(SkipButton, { segundos: 15, className: "p-1.5", size: "w-5 h-5", onSaltar: skip })
+            /* @__PURE__ */ jsxRuntime.jsx(SkipButton, { seconds: 15, className: "p-1.5", size: "w-5 h-5", onSkip: skip })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             SpeedButton,
@@ -2742,7 +2769,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs flex items-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SkipButton, { segundos: -15, className: "p-2", size: "w-5 h-5", onSaltar: skip }),
+        /* @__PURE__ */ jsxRuntime.jsx(SkipButton, { seconds: -15, className: "p-2", size: "w-5 h-5", onSkip: skip }),
         /* @__PURE__ */ jsxRuntime.jsx(
           PlayButton,
           {
@@ -2753,7 +2780,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
             ...playState
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(SkipButton, { segundos: 15, className: "p-2", size: "w-5 h-5", onSaltar: skip })
+        /* @__PURE__ */ jsxRuntime.jsx(SkipButton, { seconds: 15, className: "p-2", size: "w-5 h-5", onSkip: skip })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex items-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -2769,8 +2796,8 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
           {
             size: "w-5 h-5",
             width: "w-20",
-            silenciado: isMuted,
-            volumen: volume,
+            muted: isMuted,
+            volume,
             onMute: toggleMute,
             onVolumeChange: handleVolumeChange
           }
@@ -2796,7 +2823,7 @@ function Blockquote({ children, author, source, className, ...props }) {
     }
   );
 }
-var LINK = "transition-standard hover:text-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent rounded-chip cursor-pointer";
+var LINK = "transition-standard hover:text-accent focus-ring rounded-chip cursor-pointer";
 function Breadcrumb({
   items,
   homeHref = "/",
@@ -2857,7 +2884,7 @@ function CodeBlock({ children, language, copyText, className, ...props }) {
                 "gap-step-xs rounded-chip flex items-center px-2 py-1",
                 "text-label font-mono text-text-muted cursor-pointer",
                 "transition-standard hover:bg-surface hover:text-text-primary",
-                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+                "focus-ring"
               ),
               children: [
                 copiado ? /* @__PURE__ */ jsxRuntime.jsx(Check, { className: "text-accent" }) : /* @__PURE__ */ jsxRuntime.jsx(Copy, {}),
@@ -2967,20 +2994,32 @@ function MascotFace({
   );
 }
 var FACE = "w-[66px] max-w-none";
-function EmptyState({
-  expression,
-  title,
-  description,
-  action,
-  basePath,
-  className,
-  ...props
-}) {
+function EmptyState(props) {
+  if (props.variant === "inline") {
+    const { variant: variant2, title: title2, description: description2, action: action2, icon, className: className2, ...rest2 } = props;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "py-step-lg px-step-md gap-step-xs flex flex-col items-center text-center",
+          className2
+        ),
+        ...rest2,
+        children: [
+          icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-muted shrink-0", children: icon }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", tone: "muted", as: "p", className: "max-w-measure", children: title2 }),
+          description2 ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "label", tone: "muted", as: "p", className: "max-w-measure font-normal", children: description2 }) : null,
+          action2 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-step-xs", children: action2 }) : null
+        ]
+      }
+    );
+  }
+  const { variant, title, description, action, expression, basePath, className, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cn(CARD_SURFACE, "p-step-lg gap-step-sm flex flex-col items-center text-center", className),
-      ...props,
+      ...rest,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(MascotFace, { expression, className: FACE, basePath }),
         /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", as: "p", className: "font-medium", children: title }),
@@ -3169,7 +3208,7 @@ function EventCalendar({
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex flex-wrap items-center", children: [
               /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", size: "sm", children: editing ? "Guardar" : "A\xF1adir" }),
-              editing ? /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "tertiary", size: "sm", onClick: cancel, children: "./cancel" }) : null
+              editing ? /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "tertiary", size: "sm", onClick: cancel, children: "./cancelar" }) : null
             ] })
           ] }) : null
         ]
@@ -3215,7 +3254,7 @@ function Footer({
           "aria-label": socialLink.label,
           className: cn(
             "text-text-muted hover:text-accent transition-standard block cursor-pointer text-[19px]",
-            "rounded-chip focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+            "rounded-chip focus-ring"
           ),
           children: socialLink.icon
         }
@@ -3238,7 +3277,7 @@ function FooterLink({ asChild = false, className, ...props }) {
     {
       className: cn(
         "font-mono text-meta text-text-secondary hover:text-accent transition-standard cursor-pointer",
-        "rounded-chip focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "rounded-chip focus-ring",
         className
       ),
       ...props
@@ -3351,7 +3390,7 @@ function LinkRow({
     }
   );
 }
-function Nav({ brand: brand2, children, actions, className, ...props }) {
+function Nav({ brand: brand2, children, actions, size: size2 = "default", className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "header",
     {
@@ -3364,14 +3403,23 @@ function Nav({ brand: brand2, children, actions, className, ...props }) {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-wide px-step-md h-nav gap-step-lg mx-auto flex items-center", children: [
-        brand2 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: brand2 }) : null,
-        children ? /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Principal", className: "ml-auto min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "gap-step-md flex items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-text-muted font-mono text-meta select-none", children: "~/" }),
-          children
-        ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
-        actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-step-sm flex shrink-0 items-center", children: actions }) : null
-      ] })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "max-w-wide px-step-md gap-step-lg mx-auto flex items-center",
+            size2 === "compact" ? "h-nav-compact" : "h-nav"
+          ),
+          children: [
+            brand2 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: brand2 }) : null,
+            children ? /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Principal", className: "ml-auto min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "gap-step-md flex items-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-text-muted font-mono text-meta select-none", children: "~/" }),
+              children
+            ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+            actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-step-sm flex shrink-0 items-center", children: actions }) : null
+          ]
+        }
+      )
     }
   );
 }
@@ -3383,7 +3431,7 @@ function NavItem({ active = false, asChild = false, className, children, ...prop
       "aria-current": active ? "page" : void 0,
       className: cn(
         "font-mono text-meta transition-standard cursor-pointer",
-        "rounded-chip focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "rounded-chip focus-ring",
         active ? "text-accent underline decoration-1 underline-offset-4" : "text-text-secondary hover:text-accent",
         className
       ),
@@ -3402,14 +3450,14 @@ function NewsletterForm({
   description,
   state = "idle",
   onSubmitEmail,
-  successMessage = "Ya est\xE1s dentro. Te llega un email cada dos semanas, y nada m\xE1s.",
-  errorMessage = "No se pudo suscribir ese email. Rev\xEDsalo y vuelve a intentar.",
+  successMessage = "Ya est\xE1s dentro. Te llega un correo cada dos semanas, y nada m\xE1s.",
+  errorMessage = "No se pudo suscribir ese correo. Rev\xEDsalo y vuelve a intentar.",
   disclaimer,
   expression,
   basePath,
   submitLabel = "Suscribirme",
   placeholder = "tu@email.dev",
-  fieldLabel = "Email electr\xF3nico",
+  fieldLabel = "Correo electr\xF3nico",
   nameField = false,
   nameLabel = "Nombre",
   namePlaceholder = "C\xF3mo te llamas",
@@ -3605,23 +3653,27 @@ function ScrollingProgressBar({
     }
   );
 }
+var Collapsed = react.createContext(false);
 function SidebarItem({
   active = false,
   asChild = false,
   badge: badge2,
+  icon,
   className,
   children,
   ...props
 }) {
   const Root18 = asChild ? reactSlot.Slot : "a";
+  const collapsed = react.useContext(Collapsed);
   return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
     Root18,
     {
       "aria-current": active ? "page" : void 0,
       className: cn(
         "rounded-chip px-step-sm gap-step-xs flex cursor-pointer items-center py-1.5",
+        collapsed && "justify-center",
         "font-mono text-meta transition-standard",
-        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "focus-ring",
         // The active item is `surfaceRaised` with primary ink, same as
         // `TabsTrigger`. NOT biolume: `tokens.ts` says so explicitly — light
         // accent passes over background and over surface, but over
@@ -3633,15 +3685,57 @@ function SidebarItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: active ? "text-accent" : "text-text-muted", children: "\u25B8" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children }),
-        badge2 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-muted shrink-0", children: badge2 }) : null
+        icon ? (
+          // A shade bigger than the 13px mono label, which is what keeps it
+          // reading as a glyph rather than as a character in the word.
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-body shrink-0", children: icon })
+        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: active ? "text-accent" : "text-text-muted", children: "\u25B8" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: collapsed ? "sr-only" : "min-w-0 flex-1 truncate", children }),
+        badge2 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-text-muted", collapsed ? "sr-only" : "shrink-0"), children: badge2 }) : null
       ]
     }
   ) });
 }
+function SidebarGroup({ label, children, className, ...props }) {
+  const id = react.useId();
+  const collapsed = react.useContext(Collapsed);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "li",
+    {
+      className: cn(
+        "mt-step-md first:mt-0",
+        // In a rail the label has nowhere to go, so the block becomes a rule.
+        // The label itself stays in the accessibility tree naming the list.
+        collapsed && "border-hairline pt-step-md mt-step-sm border-t first:border-t-0",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Text,
+          {
+            variant: "meta",
+            tone: "muted",
+            as: "p",
+            id,
+            className: collapsed ? "sr-only" : "px-step-sm pb-step-xs",
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { "aria-labelledby": id, className: "gap-0.5 flex flex-col", children })
+      ]
+    }
+  );
+}
 function SidebarNav({
   title,
+  brand: brand2,
+  mark,
+  user,
+  collapsed = false,
+  onCollapsedChange,
+  collapseLabel = "Plegar el panel",
+  expandLabel = "Desplegar el panel",
   version,
   branch,
   children,
@@ -3649,26 +3743,85 @@ function SidebarNav({
   ...props
 }) {
   const footer = [version, branch].filter(Boolean);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const top = collapsed ? mark : brand2;
+  return /* @__PURE__ */ jsxRuntime.jsx(Collapsed.Provider, { value: collapsed, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "nav",
     {
       "aria-label": typeof title === "string" ? title : "Administraci\xF3n",
       className: cn(
         "border-hairline bg-surface p-step-sm gap-step-sm flex h-full flex-col border-r",
+        // The width is the component's only when it can collapse: the layout
+        // beside it has to reserve one of the two, and it cannot know which.
+        // It does NOT transition. The system's only transition animates colour
+        // and border, and a rail that slides is the entrance animation this
+        // library does not have — same call as the `Switch` knob, which changes
+        // position without moving.
+        onCollapsedChange && (collapsed ? "w-sidebar-rail" : "w-sidebar"),
         className
       ),
       ...props,
       children: [
-        title ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", className: "px-step-sm", children: title }) : null,
+        top || onCollapsedChange ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "border-hairline px-step-sm pb-step-sm mb-step-xs gap-step-xs flex items-center border-b",
+              collapsed ? "justify-center" : "justify-between"
+            ),
+            children: [
+              top ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0", children: top }) : null,
+              onCollapsedChange ? /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onCollapsedChange(!collapsed),
+                  "aria-expanded": !collapsed,
+                  "aria-label": collapsed ? expandLabel : collapseLabel,
+                  className: cn(
+                    "rounded-chip transition-standard shrink-0 cursor-pointer p-1",
+                    "text-text-muted hover:text-text-primary hover:bg-surface-raised",
+                    "focus-ring"
+                  ),
+                  children: collapsed ? /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, {}) : /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft, {})
+                }
+              ) : null
+            ]
+          }
+        ) : null,
+        title && !collapsed ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", className: "px-step-sm", children: title }) : null,
         /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "gap-0.5 flex flex-1 flex-col", children }),
-        footer.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "meta", tone: "muted", as: "p", className: "border-hairline px-step-sm pt-step-sm border-t", children: footer.map((p, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-          i > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: " \xB7 " }) : null,
-          p
-        ] }, i)) }) : null
+        user ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "border-hairline px-step-sm pt-step-sm border-t",
+              collapsed && "flex justify-center"
+            ),
+            children: user
+          }
+        ) : null,
+        footer.length > 0 && !collapsed ? /* @__PURE__ */ jsxRuntime.jsx(
+          Text,
+          {
+            variant: "meta",
+            tone: "muted",
+            as: "p",
+            className: cn("px-step-sm", user ? "" : "border-hairline pt-step-sm border-t"),
+            children: footer.map((p, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              i > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: " \xB7 " }) : null,
+              p
+            ] }, i))
+          }
+        ) : null
       ]
     }
-  );
+  ) });
 }
+var DELTA = {
+  up: { glyph: ChevronUp, label: "sube" },
+  down: { glyph: ChevronDown, label: "baja" },
+  flat: { glyph: Minus, label: "sin cambio" }
+};
 function Stat({
   value,
   label,
@@ -3676,30 +3829,52 @@ function Stat({
   progress,
   icon,
   description,
+  delta,
+  spark,
   className,
   ...props
 }) {
+  const DeltaGlyph = delta ? DELTA[delta.direction].glyph : null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(CARD_SURFACE, "p-step-lg gap-step-xs flex flex-col", className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "eyebrow", tone: "muted", as: "p", className: "gap-step-xs flex items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex items-start justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", className: "min-w-0", children: label }),
       icon ? (
         // `aria-hidden` is not needed: the system's glyphs already carry it.
-        // What IS needed is that it does not shrink next to a long title,
-        // because a squashed icon reads as a different icon.
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: icon })
-      ) : null,
-      label
+        // The circle is a SURFACE — the tint at 10 %, same as an alert's — and
+        // the colour stays on the glyph, which is § 4b and also what keeps it
+        // on the 3:1 graphical threshold instead of text's 4.5.
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "size-control-icon-sm text-ui flex shrink-0 items-center justify-center rounded-full",
+              tone === "neutral" ? "bg-accent/10 text-accent" : "bg-warm/10 text-warm"
+            ),
+            children: icon
+          }
+        )
+      ) : null
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "stat", as: "p", tone: tone === "alerta" ? "warm" : "accent", children: value }),
+    /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "stat", as: "p", tone: tone === "neutral" ? "primary" : "warm", children: value }),
+    delta && DeltaGlyph ? /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "label", tone: "secondary", as: "p", className: "gap-step-xs flex items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sr-only", children: [
+        DELTA[delta.direction].label,
+        " "
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(DeltaGlyph, { className: "shrink-0" }),
+      delta.value
+    ] }) : null,
     description ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", tone: "secondary", as: "p", children: description }) : null,
     typeof progress === "number" ? /* @__PURE__ */ jsxRuntime.jsx(
       Progress,
       {
         value: progress,
-        tone: tone === "alerta" ? "warm" : "accent",
+        tone: tone === "neutral" ? "accent" : "warm",
         label: `${label}: ${progress}%`,
         className: "mt-step-sm"
       }
-    ) : null
+    ) : null,
+    spark ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto pt-step-md", children: spark }) : null
   ] });
 }
 function TalkCard({
@@ -3761,7 +3936,7 @@ function TalkCard({
   return /* @__PURE__ */ jsxRuntime.jsx(CardShell, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("article", { className: "gap-step-sm flex h-full flex-col", children: body }) });
 }
 function ThemeToggle({
-  label = "Cambiar de theme",
+  label = "Cambiar de tema",
   onThemeChange,
   variant = "secondary",
   size: size2 = "icon",
@@ -3805,7 +3980,7 @@ function TableOfContents({
       const classes = cn(
         "px-step-sm -ml-px block border-l",
         "font-sans text-label transition-standard",
-        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "focus-ring",
         "cursor-pointer",
         item2.nested && "pl-step-lg",
         "border-transparent text-text-secondary hover:text-text-primary",
@@ -3875,7 +4050,7 @@ function Logo({
   ] });
 }
 
-// src/lib/social.tsx
+// src/social/index.tsx
 var social_exports = {};
 __export(social_exports, {
   Discord: () => Discord,
@@ -4056,6 +4231,7 @@ exports.SheetFooter = SheetFooter;
 exports.SheetHeader = SheetHeader;
 exports.SheetTitle = SheetTitle;
 exports.SheetTrigger = SheetTrigger;
+exports.SidebarGroup = SidebarGroup;
 exports.SidebarItem = SidebarItem;
 exports.SidebarNav = SidebarNav;
 exports.Skeleton = Skeleton;