beez-ui 0.9.1 → 0.11.0

package/CHANGELOG.md

@@ -4,6 +4,20 @@ Todos los cambios relevantes de beez-ui se documentan en este archivo con el for
 
 ## [Unreleased]
 
+## [0.11.0] - 2026-10-03
+
+- 859b7a6 agrega mejoras al sidebar y persistencia de estado
+
+## [0.10.0] - 2026-10-03
+
+- 6769ea7 agrega funcionalidad de persistencia y animación al sidebar
+- 3a84ef1 agrega actualización de la dependencia «beez-rp» a la versión 0.6.1
+- 2723ab1 Bump beez-rp to 0.6.0 (#4)
+- 811829a update «beez-rp» dependency to version 0.5.0
+- ab5c997 build: bump beez-rp to 0.4.0
+- d267b0b add checks configuration to prevent redundant validation before version bump
+- 041a0f8 Migrate linting from ESLint to oxlint (#3)
+
 ## [0.9.1] - 2026-09-27
 
 ### Added

package/README.md

@@ -80,7 +80,7 @@ siguen los tokens de [beui motion](https://beui.dev/components/motion):
 - `Dialog` y `AlertDialog` suben con spring; `Sheet` entra desde su borde con spring
   y sale con la curva de cajón (0.24 s), sin demorar la siguiente interacción.
 - `GlideSlot` desliza el indicador activo entre ítems como un `layoutId` compartido:
-  la pestaña activa de `Tabs` (fondo o subrayado), el ítem activo de `SidebarMenu`, la
+  la pestaña activa de `Tabs` (fondo o subrayado), la
   página actual de `PaginationContent`, y al navegar con teclado el ítem resaltado de
   `DropdownMenu` y `Select` y la sugerencia activa de `FilterQueryBar`. Con el puntero,
   esos resaltados lo siguen al instante: el propio puntero ya marca la posición.
@@ -91,6 +91,10 @@ siguen los tokens de [beui motion](https://beui.dev/components/motion):
   (grupos y columnas) giran en lugar de cambiar de ícono; CSS define el ángulo final.
 - Las opciones del `Select` entran escalonadas con blur (las primeras 10; el resto
   solo se desvanece) y los checks de ítems de `Select` y `DropdownMenu` aparecen con pop.
+- `Sidebar` sigue a [beui animated sidebar](https://beui.dev/components/motion/animated-sidebar):
+  el ancho cambia con un spring entre el panel y el riel de íconos, las etiquetas se
+  desvanecen al colapsar, una píldora compartida sigue al ítem activo y al hovereado, los
+  submenús se despliegan escalonados y en pantallas chicas se abre como hoja con foco atrapado.
 - El ícono de `AnimatedThemeToggler` cambia con blur y escala; el botón de cierre de
   `Dialog` aparece con un pop demorado.
 - El contenido de `Tabs` entra con un desplazamiento de 4 px y `Alert` entra con blur.
@@ -158,7 +162,7 @@ Next y TanStack Router son peers opcionales aislados en sus entrypoints. El prov
 
 - Tema: `AnimatedThemeToggler` y `ThemedToaster` consumen el contexto compartido. Sus props explícitas de tema siguen disponibles para usos controlados.
 - Navegación: `PaginationNext`, `PaginationPrevious` y `PaginationLink` usan anclas nativas. El prop opcional `component` admite el adaptador del router que elija la app. Sin proveedor usa el elemento nativo; con el proveedor de Next usa su navegación cliente.
-- Sidebar: `defaultOpen` y el modo controlado conservan la semántica de LaTribu. `storageKey` activa opcionalmente persistencia local segura tras hidratar, sin cambiar la cookie pública `sidebar_state` ni sus siete días de duración.
+- Sidebar: en `SidebarProvider`, `defaultOpen` y el modo controlado conservan la semántica de LaTribu. Los ítems con `href` navegan con el adaptador de router del proveedor. `storageKey` activa opcionalmente persistencia local segura tras hidratar, sin cambiar la cookie pública `sidebar_state` ni sus siete días de duración; `cookieName` y `cookieMaxAge` la reemplazan cuando la app ya lee su propia cookie en el servidor. Para el contenido propio: `SidebarBrandButton` arma la fila de marca (sirve como `DropdownMenuTrigger asChild`), `SidebarLabel` saca del riel de íconos el texto que solo tiene sentido expandido, `useSidebarPanel()` expone `collapsed` y `AccountMenu` con `triggerVariant="sidebar"` se reduce solo al avatar. No dependas de los atributos `data-*` internos del sidebar: pueden cambiar entre versiones.
 - Formularios y tablas: el consumidor provee sus datos, validaciones y callbacks. No se importan servicios, modelos de negocio ni endpoints de agenda-mensual.
 
 ## Componentes incorporados desde agenda-mensual
@@ -222,11 +226,11 @@ pnpm build
 pnpm release:prepare
 ```
 
-`pnpm build` genera las declaraciones con TypeScript 7, JavaScript con Oxc/React Compiler y CSS con el CLI de Tailwind. `pnpm check` ejecuta ESLint 10, los typechecks separados de código y tests con TypeScript 7, y Vitest 5. `tests/tsconfig.json` incorpora los matchers de Testing Library y los tipos de Vite sin incluirlos en el código de producción. `test:browser` verifica una app React/Vite nativa y una app Next real en Chromium y WebKit, tanto en desktop como en móvil. Los tests unitarios importan los archivos compilados. Los consumidores de navegador no instalan plugins de Tailwind, y una prueba adicional sirve el tarball por HTTP sin procesadores CSS para verificar estilos computados y carga de fuentes. Una prueba adicional instala el tarball en un consumidor aislado sin Next y verifica render, filtrado y declaraciones públicas.
+`pnpm build` genera las declaraciones con TypeScript 7, JavaScript con Oxc/React Compiler y CSS con el CLI de Tailwind. `pnpm check` ejecuta oxlint (configurado en `.oxlintrc.json`), los typechecks separados de código y tests con TypeScript 7, y Vitest 5. `tests/tsconfig.json` incorpora los matchers de Testing Library y los tipos de Vite sin incluirlos en el código de producción. `test:browser` verifica una app React/Vite nativa y una app Next real en Chromium y WebKit, tanto en desktop como en móvil. Los tests unitarios importan los archivos compilados. Los consumidores de navegador no instalan plugins de Tailwind, y una prueba adicional sirve el tarball por HTTP sin procesadores CSS para verificar estilos computados y carga de fuentes. Una prueba adicional instala el tarball en un consumidor aislado sin Next y verifica render, filtrado y declaraciones públicas.
 
 Los tests resuelven `beez-ui`, `beez-ui/next`, `beez-ui/tanstack` y `beez-ui/hooks` mediante rutas explícitas a las declaraciones compiladas en `tests/tsconfig.json`. Ejecutar `pnpm build` después de clonar o si falta `dist`; los comandos de validación completos ya lo hacen. Si el editor conserva diagnósticos anteriores después del build, reiniciar su servidor de TypeScript.
 
-El compilador `tsc` es TypeScript 7. Para `typescript-eslint`, se mantiene la [API de compatibilidad oficial de TypeScript 6](https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/#running-side-by-side-with-typescript-6.0) mediante un alias; no reemplaza el compilador de los typechecks.
+El compilador `tsc` es TypeScript 7. El paquete `typescript` apunta a la [API de compatibilidad oficial de TypeScript 6](https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/#running-side-by-side-with-typescript-6.0) mediante un alias, porque el plugin de docgen de Storybook lo declara como dependencia peer; no reemplaza el compilador de los typechecks. El lint no depende de él: oxlint analiza TypeScript sin el compilador.
 
 ## Crear y publicar una versión
 

package/dist/components/account-menu.d.ts

@@ -10,7 +10,7 @@ export interface AccountMenuLabels {
 export interface AccountMenuClassNames {
     trigger?: string;
     triggerAvatar?: string;
-    /** Name and email block of the `sidebar` trigger, for example to hide it in a collapsed sidebar. */
+    /** Name and email block of the `sidebar` trigger; it already leaves the icon rail of a collapsed `Sidebar`. */
     triggerText?: string;
     triggerName?: string;
     triggerEmail?: string;
@@ -40,7 +40,10 @@ export interface AccountMenuProps {
     onSignIn?: () => void;
     /** Navigates to a sign-in page through the configured router adapter instead of calling `onSignIn`. */
     signInHref?: string;
-    /** `avatar` shows only the avatar; `sidebar` also shows name, email and a chevron. */
+    /**
+     * `avatar` shows only the avatar; `sidebar` also shows name, email and a chevron, and inside the
+     * icon rail of a collapsed `Sidebar` shrinks to the centered avatar.
+     */
     triggerVariant?: "avatar" | "sidebar";
     /** Adds a connected/disconnected badge to the avatar and greys it out while signed out. */
     showStatusBadge?: boolean;

package/dist/components/account-menu.js

@@ -6,6 +6,7 @@ import { getNameInitials } from "../lib/name-initials.js";
 import { Avatar, AvatarBadge, AvatarFallback, AvatarImage } from "./avatar.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "./dropdown-menu.js";
 import { Link } from "./link.js";
+import { useOptionalSidebarPanel } from "./sidebar-panel-context.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ACCOUNT_MENU_DEFAULT_LABELS = {
@@ -105,7 +106,7 @@ function AccountAvatar(t0) {
 * @returns The trigger and its menu.
 */
 export function AccountMenu(t0) {
-	const $ = _c(79);
+	const $ = _c(80);
 	const { name, email, status, image: t1, avatarFallback, onSignOut, signOutDisabled: t2, onSignIn, signInHref, triggerVariant: t3, showStatusBadge: t4, tooltipLabel, labels, classNames, align: t5, side: t6, sideOffset: t7, children } = t0;
 	const image = t1 === undefined ? null : t1;
 	const signOutDisabled = t2 === undefined ? false : t2;
@@ -158,34 +159,38 @@ export function AccountMenu(t0) {
 		t10 = $[11];
 	}
 	const avatarProps = t10;
+	const sidebarPanel = useOptionalSidebarPanel();
+	const showsSidebarIdentity = triggerVariant === "sidebar" && !sidebarPanel?.collapsed;
 	const t11 = resolvedLabels.trigger;
 	const t12 = triggerVariant === "sidebar" && "w-full min-w-0 gap-2.5 rounded-lg p-1.5 text-left";
-	const t13 = classNames?.trigger;
-	let t14;
-	if ($[12] !== t12 || $[13] !== t13) {
-		t14 = cn("inline-flex items-center rounded-full outline-none [-webkit-tap-highlight-color:transparent] transition-[box-shadow,opacity,transform] hover:opacity-90 active:scale-[0.96] focus-visible:shadow-[0_0_0_2px_var(--background),0_0_0_4px_var(--ring)] data-[state=open]:shadow-[0_0_0_2px_var(--background),0_0_0_4px_var(--ring)]", t12, t13);
+	const t13 = triggerVariant === "sidebar" && !showsSidebarIdentity && "justify-center gap-0";
+	const t14 = classNames?.trigger;
+	let t15;
+	if ($[12] !== t12 || $[13] !== t13 || $[14] !== t14) {
+		t15 = cn("inline-flex items-center rounded-full outline-none [-webkit-tap-highlight-color:transparent] transition-[box-shadow,opacity,transform] hover:opacity-90 active:scale-[0.96] focus-visible:shadow-[0_0_0_2px_var(--background),0_0_0_4px_var(--ring)] data-[state=open]:shadow-[0_0_0_2px_var(--background),0_0_0_4px_var(--ring)]", t12, t13, t14);
 		$[12] = t12;
 		$[13] = t13;
 		$[14] = t14;
+		$[15] = t15;
 	} else {
-		t14 = $[14];
+		t15 = $[15];
 	}
-	const t15 = classNames?.triggerAvatar;
-	let t16;
-	if ($[15] !== avatarProps || $[16] !== t15) {
-		t16 = /* @__PURE__ */ _jsx(AccountAvatar, {
+	const t16 = classNames?.triggerAvatar;
+	let t17;
+	if ($[16] !== avatarProps || $[17] !== t16) {
+		t17 = /* @__PURE__ */ _jsx(AccountAvatar, {
 			...avatarProps,
-			className: t15
+			className: t16
 		});
-		$[15] = avatarProps;
-		$[16] = t15;
+		$[16] = avatarProps;
 		$[17] = t16;
+		$[18] = t17;
 	} else {
-		t16 = $[17];
+		t17 = $[18];
 	}
-	let t17;
-	if ($[18] !== classNames?.triggerChevron || $[19] !== classNames?.triggerEmail || $[20] !== classNames?.triggerName || $[21] !== classNames?.triggerText || $[22] !== email || $[23] !== name || $[24] !== triggerVariant) {
-		t17 = triggerVariant === "sidebar" ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsxs("span", {
+	let t18;
+	if ($[19] !== classNames?.triggerChevron || $[20] !== classNames?.triggerEmail || $[21] !== classNames?.triggerName || $[22] !== classNames?.triggerText || $[23] !== email || $[24] !== name || $[25] !== showsSidebarIdentity) {
+		t18 = showsSidebarIdentity ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsxs("span", {
 			className: cn("grid min-w-0 flex-1", classNames?.triggerText),
 			children: [/* @__PURE__ */ _jsx("span", {
 				className: cn("truncate text-sm font-semibold", classNames?.triggerName),
@@ -198,142 +203,142 @@ export function AccountMenu(t0) {
 			"aria-hidden": "true",
 			className: cn("size-4 shrink-0 text-muted-foreground", classNames?.triggerChevron)
 		})] }) : null;
-		$[18] = classNames?.triggerChevron;
-		$[19] = classNames?.triggerEmail;
-		$[20] = classNames?.triggerName;
-		$[21] = classNames?.triggerText;
-		$[22] = email;
-		$[23] = name;
-		$[24] = triggerVariant;
-		$[25] = t17;
+		$[19] = classNames?.triggerChevron;
+		$[20] = classNames?.triggerEmail;
+		$[21] = classNames?.triggerName;
+		$[22] = classNames?.triggerText;
+		$[23] = email;
+		$[24] = name;
+		$[25] = showsSidebarIdentity;
+		$[26] = t18;
 	} else {
-		t17 = $[25];
+		t18 = $[26];
 	}
-	let t18;
-	if ($[26] !== resolvedLabels.trigger || $[27] !== t14 || $[28] !== t16 || $[29] !== t17 || $[30] !== triggerVariant) {
+	let t19;
+	if ($[27] !== resolvedLabels.trigger || $[28] !== t15 || $[29] !== t17 || $[30] !== t18 || $[31] !== triggerVariant) {
 		const triggerButton = /* @__PURE__ */ _jsxs("button", {
 			"data-slot": "account-menu-trigger",
 			"data-variant": triggerVariant,
 			"aria-label": t11,
 			type: "button",
-			className: t14,
-			children: [t16, t17]
+			className: t15,
+			children: [t17, t18]
 		});
-		t18 = /* @__PURE__ */ _jsx(DropdownMenuTrigger, {
+		t19 = /* @__PURE__ */ _jsx(DropdownMenuTrigger, {
 			asChild: true,
 			children: triggerButton
 		});
-		$[26] = resolvedLabels.trigger;
-		$[27] = t14;
-		$[28] = t16;
+		$[27] = resolvedLabels.trigger;
+		$[28] = t15;
 		$[29] = t17;
-		$[30] = triggerVariant;
-		$[31] = t18;
+		$[30] = t18;
+		$[31] = triggerVariant;
+		$[32] = t19;
 	} else {
-		t18 = $[31];
+		t19 = $[32];
 	}
-	const trigger = t18;
-	let t19;
-	if ($[32] !== tooltipLabel || $[33] !== trigger) {
-		t19 = tooltipLabel ? /* @__PURE__ */ _jsx(TooltipTrigger, {
+	const trigger = t19;
+	let t20;
+	if ($[33] !== tooltipLabel || $[34] !== trigger) {
+		t20 = tooltipLabel ? /* @__PURE__ */ _jsx(TooltipTrigger, {
 			asChild: true,
 			children: trigger
 		}) : trigger;
-		$[32] = tooltipLabel;
-		$[33] = trigger;
-		$[34] = t19;
+		$[33] = tooltipLabel;
+		$[34] = trigger;
+		$[35] = t20;
 	} else {
-		t19 = $[34];
+		t20 = $[35];
 	}
-	const t20 = classNames?.content;
-	let t21;
-	if ($[35] !== t20) {
-		t21 = cn("min-w-56", t20);
-		$[35] = t20;
+	const t21 = classNames?.content;
+	let t22;
+	if ($[36] !== t21) {
+		t22 = cn("min-w-56", t21);
 		$[36] = t21;
+		$[37] = t22;
 	} else {
-		t21 = $[36];
+		t22 = $[37];
 	}
-	const t22 = classNames?.header;
-	let t23;
-	if ($[37] !== t22) {
-		t23 = cn("grid grid-cols-[auto_minmax(0,1fr)] items-center gap-2.5 px-2 py-1.5", t22);
-		$[37] = t22;
+	const t23 = classNames?.header;
+	let t24;
+	if ($[38] !== t23) {
+		t24 = cn("grid grid-cols-[auto_minmax(0,1fr)] items-center gap-2.5 px-2 py-1.5", t23);
 		$[38] = t23;
+		$[39] = t24;
 	} else {
-		t23 = $[38];
+		t24 = $[39];
 	}
-	const t24 = classNames?.headerAvatar;
-	let t25;
-	if ($[39] !== avatarProps || $[40] !== t24) {
-		t25 = /* @__PURE__ */ _jsx(AccountAvatar, {
+	const t25 = classNames?.headerAvatar;
+	let t26;
+	if ($[40] !== avatarProps || $[41] !== t25) {
+		t26 = /* @__PURE__ */ _jsx(AccountAvatar, {
 			...avatarProps,
 			isDecorative: true,
-			className: t24
+			className: t25
 		});
-		$[39] = avatarProps;
-		$[40] = t24;
+		$[40] = avatarProps;
 		$[41] = t25;
+		$[42] = t26;
 	} else {
-		t25 = $[41];
+		t26 = $[42];
 	}
-	let t26;
-	if ($[42] !== name) {
-		t26 = /* @__PURE__ */ _jsx("span", {
+	let t27;
+	if ($[43] !== name) {
+		t27 = /* @__PURE__ */ _jsx("span", {
 			className: "truncate text-sm leading-tight font-semibold",
 			children: name
 		});
-		$[42] = name;
-		$[43] = t26;
+		$[43] = name;
+		$[44] = t27;
 	} else {
-		t26 = $[43];
+		t27 = $[44];
 	}
-	let t27;
-	if ($[44] !== email) {
-		t27 = /* @__PURE__ */ _jsx("span", {
+	let t28;
+	if ($[45] !== email) {
+		t28 = /* @__PURE__ */ _jsx("span", {
 			className: "truncate text-xs leading-tight text-muted-foreground",
 			children: email
 		});
-		$[44] = email;
-		$[45] = t27;
+		$[45] = email;
+		$[46] = t28;
 	} else {
-		t27 = $[45];
+		t28 = $[46];
 	}
-	let t28;
-	if ($[46] !== t26 || $[47] !== t27) {
-		t28 = /* @__PURE__ */ _jsxs("span", {
+	let t29;
+	if ($[47] !== t27 || $[48] !== t28) {
+		t29 = /* @__PURE__ */ _jsxs("span", {
 			className: "grid min-w-0 gap-px",
-			children: [t26, t27]
+			children: [t27, t28]
 		});
-		$[46] = t26;
 		$[47] = t27;
 		$[48] = t28;
+		$[49] = t29;
 	} else {
-		t28 = $[48];
+		t29 = $[49];
 	}
-	let t29;
-	if ($[49] !== t23 || $[50] !== t25 || $[51] !== t28) {
-		t29 = /* @__PURE__ */ _jsxs("div", {
-			className: t23,
-			children: [t25, t28]
+	let t30;
+	if ($[50] !== t24 || $[51] !== t26 || $[52] !== t29) {
+		t30 = /* @__PURE__ */ _jsxs("div", {
+			className: t24,
+			children: [t26, t29]
 		});
-		$[49] = t23;
-		$[50] = t25;
-		$[51] = t28;
+		$[50] = t24;
+		$[51] = t26;
 		$[52] = t29;
-	} else {
-		t29 = $[52];
-	}
-	let t30;
-	if ($[53] === Symbol.for("react.memo_cache_sentinel")) {
-		t30 = /* @__PURE__ */ _jsx(DropdownMenuSeparator, {});
 		$[53] = t30;
 	} else {
 		t30 = $[53];
 	}
 	let t31;
-	if ($[54] !== classNames?.item || $[55] !== isAuthenticated || $[56] !== onSignIn || $[57] !== onSignOut || $[58] !== resolvedLabels.signIn || $[59] !== resolvedLabels.signOut || $[60] !== signInHref || $[61] !== signOutDisabled) {
-		t31 = isAuthenticated ? /* @__PURE__ */ _jsxs(DropdownMenuItem, {
+	if ($[54] === Symbol.for("react.memo_cache_sentinel")) {
+		t31 = /* @__PURE__ */ _jsx(DropdownMenuSeparator, {});
+		$[54] = t31;
+	} else {
+		t31 = $[54];
+	}
+	let t32;
+	if ($[55] !== classNames?.item || $[56] !== isAuthenticated || $[57] !== onSignIn || $[58] !== onSignOut || $[59] !== resolvedLabels.signIn || $[60] !== resolvedLabels.signOut || $[61] !== signInHref || $[62] !== signOutDisabled) {
+		t32 = isAuthenticated ? /* @__PURE__ */ _jsxs(DropdownMenuItem, {
 			className: classNames?.item,
 			disabled: signOutDisabled,
 			onSelect: () => void onSignOut(),
@@ -350,77 +355,77 @@ export function AccountMenu(t0) {
 			onSelect: () => onSignIn?.(),
 			children: [/* @__PURE__ */ _jsx(LogInIcon, { "aria-hidden": "true" }), resolvedLabels.signIn]
 		});
-		$[54] = classNames?.item;
-		$[55] = isAuthenticated;
-		$[56] = onSignIn;
-		$[57] = onSignOut;
-		$[58] = resolvedLabels.signIn;
-		$[59] = resolvedLabels.signOut;
-		$[60] = signInHref;
-		$[61] = signOutDisabled;
-		$[62] = t31;
+		$[55] = classNames?.item;
+		$[56] = isAuthenticated;
+		$[57] = onSignIn;
+		$[58] = onSignOut;
+		$[59] = resolvedLabels.signIn;
+		$[60] = resolvedLabels.signOut;
+		$[61] = signInHref;
+		$[62] = signOutDisabled;
+		$[63] = t32;
 	} else {
-		t31 = $[62];
+		t32 = $[63];
 	}
-	let t32;
-	if ($[63] !== align || $[64] !== children || $[65] !== side || $[66] !== sideOffset || $[67] !== t21 || $[68] !== t29 || $[69] !== t31) {
-		t32 = /* @__PURE__ */ _jsxs(DropdownMenuContent, {
+	let t33;
+	if ($[64] !== align || $[65] !== children || $[66] !== side || $[67] !== sideOffset || $[68] !== t22 || $[69] !== t30 || $[70] !== t32) {
+		t33 = /* @__PURE__ */ _jsxs(DropdownMenuContent, {
 			"data-slot": "account-menu-content",
 			align,
 			side,
 			sideOffset,
-			className: t21,
+			className: t22,
 			children: [
-				t29,
 				t30,
+				t31,
 				children,
-				t31
+				t32
 			]
 		});
-		$[63] = align;
-		$[64] = children;
-		$[65] = side;
-		$[66] = sideOffset;
-		$[67] = t21;
-		$[68] = t29;
-		$[69] = t31;
+		$[64] = align;
+		$[65] = children;
+		$[66] = side;
+		$[67] = sideOffset;
+		$[68] = t22;
+		$[69] = t30;
 		$[70] = t32;
+		$[71] = t33;
 	} else {
-		t32 = $[70];
+		t33 = $[71];
 	}
-	let t33;
-	if ($[71] !== t19 || $[72] !== t32) {
-		t33 = /* @__PURE__ */ _jsxs(DropdownMenu, { children: [t19, t32] });
-		$[71] = t19;
-		$[72] = t32;
+	let t34;
+	if ($[72] !== t20 || $[73] !== t33) {
+		t34 = /* @__PURE__ */ _jsxs(DropdownMenu, { children: [t20, t33] });
+		$[72] = t20;
 		$[73] = t33;
+		$[74] = t34;
 	} else {
-		t33 = $[73];
+		t34 = $[74];
 	}
-	const menu = t33;
+	const menu = t34;
 	if (!tooltipLabel) {
 		return menu;
 	}
-	let t34;
-	if ($[74] !== tooltipLabel) {
-		t34 = /* @__PURE__ */ _jsx(TooltipContent, {
+	let t35;
+	if ($[75] !== tooltipLabel) {
+		t35 = /* @__PURE__ */ _jsx(TooltipContent, {
 			side: "bottom",
 			sideOffset: 8,
 			children: tooltipLabel
 		});
-		$[74] = tooltipLabel;
-		$[75] = t34;
+		$[75] = tooltipLabel;
+		$[76] = t35;
 	} else {
-		t34 = $[75];
+		t35 = $[76];
 	}
-	let t35;
-	if ($[76] !== menu || $[77] !== t34) {
-		t35 = /* @__PURE__ */ _jsxs(Tooltip, { children: [menu, t34] });
-		$[76] = menu;
-		$[77] = t34;
+	let t36;
+	if ($[77] !== menu || $[78] !== t35) {
+		t36 = /* @__PURE__ */ _jsxs(Tooltip, { children: [menu, t35] });
+		$[77] = menu;
 		$[78] = t35;
+		$[79] = t36;
 	} else {
-		t35 = $[78];
+		t36 = $[79];
 	}
-	return t35;
+	return t36;
 }

package/dist/components/presence-swap.d.ts

@@ -1,5 +1,5 @@
 /** Cross-fades between states of the same region, such as idle, loading and result. */
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 declare const PRESENCE_SWAP_ELEMENTS: {
     readonly div: import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>;
     readonly span: import("motion/react").ForwardRefComponent<HTMLSpanElement, import("motion/react").HTMLMotionProps<"span">>;

package/dist/components/presence-swap.js

@@ -1,5 +1,7 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
+/** Cross-fades between states of the same region, such as idle, loading and result. */
+import { useState } from "react";
 import { AnimatePresence, motion, useIsPresent } from "motion/react";
 import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { cn } from "../lib/utils.js";
@@ -20,8 +22,12 @@ function PresenceSwapItem(t0) {
 	const { as, className, children } = t0;
 	const MotionElement = PRESENCE_SWAP_ELEMENTS[as];
 	const isPresent = useIsPresent();
+	const [isMountedExiting] = useState(!isPresent);
 	const shouldReduceMotion = usePrefersReducedMotion();
 	const distance = shouldReduceMotion ? 0 : MOTION_CONTENT_DISTANCE;
+	if (isMountedExiting) {
+		return null;
+	}
 	const t1 = isPresent ? undefined : true;
 	const t2 = !isPresent || undefined;
 	let t3;
@@ -98,6 +104,47 @@ function PresenceSwapItem(t0) {
 	return t8;
 }
 /**
+* Gives every key change its own presence key. Motion keeps the exit bookkeeping of a key that
+* already left, so a reused key (loading → error → loading) mounted already exiting would have
+* its removal ignored and stall a `wait` swap forever.
+* @param presenceKey - Key identifying the current state.
+* @returns A key that is never reused within this swap.
+*/
+function usePresenceSwapKey(presenceKey) {
+	const $ = _c(5);
+	let t0;
+	if ($[0] !== presenceKey) {
+		t0 = {
+			presenceKey,
+			generation: 0
+		};
+		$[0] = presenceKey;
+		$[1] = t0;
+	} else {
+		t0 = $[1];
+	}
+	const [current, setCurrent] = useState(t0);
+	if (current.presenceKey !== presenceKey) {
+		const t1 = current.generation + 1;
+		let t2;
+		if ($[2] !== presenceKey || $[3] !== t1) {
+			t2 = {
+				presenceKey,
+				generation: t1
+			};
+			$[2] = presenceKey;
+			$[3] = t1;
+			$[4] = t2;
+		} else {
+			t2 = $[4];
+		}
+		const next = t2;
+		setCurrent(next);
+		return `${next.generation}:${presenceKey}`;
+	}
+	return `${current.generation}:${presenceKey}`;
+}
+/**
 * Swaps keyed content with a short lift-and-fade; the first render is not animated.
 * @param props - Key identifying the current state and its content.
 * @returns The animated content.
@@ -107,6 +154,7 @@ export function PresenceSwap(t0) {
 	const { presenceKey, children, as: t1, className, mode: t2 } = t0;
 	const as = t1 === undefined ? "div" : t1;
 	const mode = t2 === undefined ? "wait" : t2;
+	const itemKey = usePresenceSwapKey(presenceKey);
 	const t3 = as === "span" && "inline-flex items-center";
 	let t4;
 	if ($[0] !== className || $[1] !== t3) {
@@ -118,15 +166,15 @@ export function PresenceSwap(t0) {
 		t4 = $[2];
 	}
 	let t5;
-	if ($[3] !== as || $[4] !== children || $[5] !== presenceKey || $[6] !== t4) {
+	if ($[3] !== as || $[4] !== children || $[5] !== itemKey || $[6] !== t4) {
 		t5 = /* @__PURE__ */ _jsx(PresenceSwapItem, {
 			as,
 			className: t4,
 			children
-		}, presenceKey);
+		}, itemKey);
 		$[3] = as;
 		$[4] = children;
-		$[5] = presenceKey;
+		$[5] = itemKey;
 		$[6] = t4;
 		$[7] = t5;
 	} else {

package/dist/components/sidebar-panel-context.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Internal: panel state shared by the sidebar parts and by components that adapt to the icon rail
+ * (such as `AccountMenu`), kept apart so they can read it without importing the sidebar itself.
+ */
+import * as React from "react";
+export type SidebarPanelState = {
+    /** Whether the desktop sidebar is shrunk to its icon rail; always false in the mobile sheet. */
+    collapsed: boolean;
+    collapsible: "offcanvas" | "icon" | "none";
+    side: "left" | "right";
+};
+export declare const SidebarPanelContext: React.Context<SidebarPanelState | null>;
+/**
+ * Reads the panel state when rendered inside a `Sidebar`, and `null` anywhere else.
+ * @returns The panel state, or `null` outside a sidebar.
+ */
+export declare function useOptionalSidebarPanel(): SidebarPanelState | null;

package/dist/components/sidebar-panel-context.js

@@ -0,0 +1,14 @@
+"use client";
+/**
+* Internal: panel state shared by the sidebar parts and by components that adapt to the icon rail
+* (such as `AccountMenu`), kept apart so they can read it without importing the sidebar itself.
+*/
+import * as React from "react";
+export const SidebarPanelContext = React.createContext(null);
+/**
+* Reads the panel state when rendered inside a `Sidebar`, and `null` anywhere else.
+* @returns The panel state, or `null` outside a sidebar.
+*/
+export function useOptionalSidebarPanel() {
+	return React.use(SidebarPanelContext);
+}