beez-ui 0.8.1 → 0.9.0

package/CHANGELOG.md

@@ -4,6 +4,32 @@ Todos los cambios relevantes de beez-ui se documentan en este archivo con el for
 
 ## [Unreleased]
 
+## [0.9.0] - 2026-09-27
+
+### Added
+
+- `ReactionButton` acepta `activeColor` para elegir el color del ícono activo (por defecto, el color destructivo).
+- Entrypoint `beez-ui/hooks` con los hooks de uso general: `useIsMobile`, `useIsHydrated`, `useViewerTimeZone`, `usePrefersReducedMotion`, `useHorizontalSwipe` y `resolveHorizontalSwipe`.
+- `FilterPresetsBar` y `FilterPresetSaveButton` para guardar, aplicar, editar y borrar consultas con nombre de `FilterQueryBar`, con `parseFilterPresets` para validar las que la app restaura de su almacenamiento.
+
+### Changed
+
+- `useIsHydrated`, `useViewerTimeZone`, `usePrefersReducedMotion`, `useHorizontalSwipe`, `resolveHorizontalSwipe` y `HORIZONTAL_SWIPE_DIRECTION` se importan desde `beez-ui/hooks` en lugar de la raíz; `useIsMobile` sigue también en la raíz.
+
+### Removed
+
+- Se retiran `EmptyState`, `ErrorState`, `BouncingDotsLoader` e `InfoPopover`: son envoltorios simples que cada app mantiene con su propio diseño.
+- `getNameInitials` deja de ser público.
+- Se retiran componentes atados a un solo producto que llegaron en 0.8.0: `ExternalBrowserHandoff`, `OpenInBrowserCta`, `detectInAppBrowser`, `buildExternalBrowserUrl`, `NotificationBell`, `NotificationPanel`, `MonthGrid`, `MonthCalendarHeader`, `PwaUpdateControl` y `ConfirmDeleteButton`. Quien los use debe mantener su propia versión.
+- Se retiran los helpers `createMonthGridDays`, `splitCalendarWeeks`, `groupItemsByDateKey`, `shiftMonthKey`, `useMonthTransitionDirection`, `useMinuteClock`, `advanceMinuteClockTo`, `navigateToUrl`, `reloadCurrentPage`, `replaceCurrentUrlSearchParams` y `replaceCurrentUrlSearchParamValues`.
+- Se retira el entrypoint opcional `beez-ui/emoji-picker` y la dependencia opcional `emoji-picker-react`.
+
+## [0.8.2] - 2026-09-27
+
+### Fixed
+
+- Con movimiento reducido, `PresenceSwap`, `AnimatedListItem` y `AnimatedCollapse` conservan un fundido breve en lugar de cambiar sin transición; `PresenceSwap` ya no queda trabado en el estado anterior cuando su contenido cambia varias veces seguidas (por ejemplo, error → cargando → cargado).
+
 ## [0.8.1] - 2026-09-27
 
 ### Changed

package/README.md

@@ -173,19 +173,21 @@ Los componentes compartidos conservan el tema de LaTribu. Se incorporaron atribu
 
 ## Componentes de producto reutilizables
 
-Provienen de las carpetas de producto de LaTribu y agenda-mensual y quedaron desacoplados de su dominio: reciben datos ya resueltos y textos por props, con valores por defecto en español.
+Provienen de las carpetas de producto de LaTribu y agenda-mensual y quedaron desacoplados de su dominio: reciben datos ya resueltos y textos por props, con valores por defecto en español. Solo se incorporan piezas genéricas que no fijan decisiones de un producto y que no son una composición trivial de primitivas existentes; los flujos propios de una app (notificaciones, calendarios de eventos, handoff de navegadores internos, actualización de PWA) y los envoltorios simples (estados vacío y de error, loaders, popovers de ayuda) se mantienen en esa app.
 
 - Movimiento: `PresenceSwap`, `AnimatedCount`, `AnimatedCollapse` y `AnimatedListItem`. Los tokens que usa la biblioteca se exportan desde la raíz y desde `beez-ui/motion-tokens`, así las apps animan sus superficies con las mismas curvas y springs en lugar de copiarlos.
-- Feedback: `BouncingDotsLoader`, `ProgressRing`, `EmptyState`, `ErrorState`, `InfoPopover`, `ConfirmDeleteButton` y `ReactionButton`. El loader y la entrada del título de `MonthCalendarHeader` usan keyframes CSS porque se renderizan en el servidor; el fallback de movimiento reducido los detiene.
-- Cuenta y sesión: `AccountMenu` (inicio de sesión mediante `signInHref` o `onSignIn`), `OpenInBrowserCta`, `ExternalBrowserHandoff` y los helpers `detectInAppBrowser` y `buildExternalBrowserUrl`.
+- Indicadores: `ProgressRing` y `ReactionButton`. El color del ícono activo de la reacción se configura con `activeColor`.
+- Cuenta: `AccountMenu`, con inicio de sesión mediante `signInHref` o `onSignIn`.
 - Contenido: `RichTextContent`, `RichMarkdownContent`, `RichLinkEditor` y `useRichLinkEditor`. Solo interpretan links en markdown, URLs sueltas, listas y negrita; el HTML del contenido nunca se renderiza como markup.
-- Notificaciones: `NotificationBell` y `NotificationPanel` reciben `NotificationPanelItem` (`id`, `title`, `detail`, `sentAtLabel`, `href`, `isUnread`); la app traduce sus notificaciones a ese formato. Con `surface="responsive"` se renderizan el popover y el sheet hasta hidratar, y después solo el que corresponde al viewport.
-- Calendario: `MonthGrid` y `MonthCalendarHeader` trabajan con claves `YYYY-MM` y `YYYY-MM-DD` sin zona horaria; la app decide en qué zona convierte cada instante en día. La navegación acepta `href` (link del router) o `onSelect`.
+- Filtros guardados: `FilterPresetsBar` y `FilterPresetSaveButton` guardan, aplican, editan y borran consultas con nombre de `FilterQueryBar`. La app decide dónde persistirlas; `parseFilterPresets` valida lo que vuelve del almacenamiento.
 - Archivos: `FileUpload`, `FileUploadDropZone`, `FileUploadList` y `FileUploadItem` validan tipo y tamaño, pero no suben archivos: el progreso y los errores los informa la app.
-- PWA: `PwaUpdateControl` aparece solo cuando hay un service worker en espera y le envía `{ type: "SKIP_WAITING" }` (configurable con `skipWaitingMessage`).
-- Hooks y utilidades: `useIsHydrated`, `useMinuteClock`, `useViewerTimeZone`, `useHorizontalSwipe`, `usePrefersReducedMotion`, `formatFileSize`, `copyTextToClipboard`, `getNameInitials`, búsqueda difusa y helpers de URL.
+- Utilidades: `formatFileSize`, `copyTextToClipboard` y búsqueda difusa.
 
-`EmojiPicker` vive en el entrypoint opcional `beez-ui/emoji-picker` para no sumar `emoji-picker-react` a quien no lo usa. Hay que instalarlo como dependencia de la app (`pnpm add emoji-picker-react`); la librería se carga recién al abrir el selector, nunca durante el render del servidor.
+Los hooks de uso general se importan desde `beez-ui/hooks`: `useIsMobile`, `useIsHydrated`, `useViewerTimeZone`, `usePrefersReducedMotion` y `useHorizontalSwipe` (con `resolveHorizontalSwipe`). `useIsMobile` también sigue disponible desde la raíz.
+
+```tsx
+import { useIsHydrated } from "beez-ui/hooks";
+```
 
 ## React Compiler
 
@@ -222,7 +224,7 @@ 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.
 
-Los tests resuelven `beez-ui`, `beez-ui/next`, `beez-ui/tanstack` y `beez-ui/emoji-picker` 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.
+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.
 

package/dist/components/animated-collapse.js

@@ -17,8 +17,14 @@ const COLLAPSE_TRANSITION = {
 		ease: MOTION_EASE
 	}
 };
-/** Reduced motion keeps the open/closed contract but applies it instantly. */
-const INSTANT_TRANSITION = { duration: 0 };
+/** Reduced motion applies the height at once but keeps the short fade, so exits always settle. */
+const REDUCED_MOTION_COLLAPSE_TRANSITION = {
+	height: { duration: 0 },
+	opacity: {
+		duration: MOTION_TIMING.panel,
+		ease: MOTION_EASE
+	}
+};
 /**
 * Renders `children` only while `isOpen`, animating height and opacity.
 * Keep padding inside `children`: the animated wrapper collapses to zero height.
@@ -50,7 +56,7 @@ export function AnimatedCollapse(t0) {
 				height: 0,
 				opacity: 0
 			},
-			transition: shouldReduceMotion ? INSTANT_TRANSITION : COLLAPSE_TRANSITION,
+			transition: shouldReduceMotion ? REDUCED_MOTION_COLLAPSE_TRANSITION : COLLAPSE_TRANSITION,
 			onAnimationStart: () => setIsSettled(false),
 			onAnimationComplete: () => setIsSettled(true),
 			children

package/dist/components/animated-list-item.js

@@ -19,8 +19,6 @@ const LIST_ITEM_EXIT_TRANSITION = {
 	duration: MOTION_TIMING.exit,
 	ease: MOTION_EASE
 };
-/** Reduced motion keeps enter/exit semantics (inert while leaving) but without travel or delay. */
-const INSTANT_TRANSITION = { duration: 0 };
 /**
 * Wrap the list in `<AnimatePresence initial={false}>` so only items added after the
 * first render animate in, and removed items animate out before leaving the DOM.
@@ -30,7 +28,7 @@ const INSTANT_TRANSITION = { duration: 0 };
 * @returns The animated item.
 */
 export function AnimatedListItem(t0) {
-	const $ = _c(22);
+	const $ = _c(24);
 	let children;
 	let className;
 	let elementProps;
@@ -56,6 +54,8 @@ export function AnimatedListItem(t0) {
 	const MotionElement = ANIMATED_LIST_ITEM_ELEMENTS[as];
 	const isPresent = useIsPresent();
 	const shouldReduceMotion = usePrefersReducedMotion();
+	const distance = shouldReduceMotion ? 0 : MOTION_LIST_ITEM_DISTANCE;
+	const enterScale = shouldReduceMotion ? 1 : MOTION_ITEM_ENTER_SCALE;
 	const t3 = isPresent ? elementProps["aria-hidden"] : true;
 	const t4 = !isPresent || undefined;
 	let t5;
@@ -68,41 +68,44 @@ export function AnimatedListItem(t0) {
 	}
 	const t6 = layout && !shouldReduceMotion ? "position" : false;
 	let t7;
-	let t8;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[8] !== distance || $[9] !== enterScale) {
 		t7 = {
 			opacity: 0,
-			y: MOTION_LIST_ITEM_DISTANCE,
-			scale: MOTION_ITEM_ENTER_SCALE
+			y: distance,
+			scale: enterScale
 		};
+		$[8] = distance;
+		$[9] = enterScale;
+		$[10] = t7;
+	} else {
+		t7 = $[10];
+	}
+	let t8;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
 		t8 = {
 			opacity: 1,
 			y: 0,
 			scale: 1
 		};
-		$[8] = t7;
-		$[9] = t8;
+		$[11] = t8;
 	} else {
-		t7 = $[8];
-		t8 = $[9];
+		t8 = $[11];
 	}
-	const t9 = shouldReduceMotion ? INSTANT_TRANSITION : LIST_ITEM_EXIT_TRANSITION;
-	let t10;
-	if ($[10] !== t9) {
-		t10 = {
+	let t9;
+	if ($[12] !== enterScale) {
+		t9 = {
 			opacity: 0,
-			scale: MOTION_ITEM_ENTER_SCALE,
-			transition: t9
+			scale: enterScale,
+			transition: LIST_ITEM_EXIT_TRANSITION
 		};
-		$[10] = t9;
-		$[11] = t10;
+		$[12] = enterScale;
+		$[13] = t9;
 	} else {
-		t10 = $[11];
+		t9 = $[13];
 	}
-	const t11 = shouldReduceMotion ? INSTANT_TRANSITION : LIST_ITEM_TRANSITION;
-	let t12;
-	if ($[12] !== MotionElement || $[13] !== children || $[14] !== elementProps || $[15] !== t10 || $[16] !== t11 || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 || $[20] !== t6) {
-		t12 = /* @__PURE__ */ _jsx(MotionElement, {
+	let t10;
+	if ($[14] !== MotionElement || $[15] !== children || $[16] !== elementProps || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 || $[20] !== t6 || $[21] !== t7 || $[22] !== t9) {
+		t10 = /* @__PURE__ */ _jsx(MotionElement, {
 			"data-slot": "animated-list-item",
 			...elementProps,
 			"aria-hidden": t3,
@@ -111,22 +114,22 @@ export function AnimatedListItem(t0) {
 			layout: t6,
 			initial: t7,
 			animate: t8,
-			exit: t10,
-			transition: t11,
+			exit: t9,
+			transition: LIST_ITEM_TRANSITION,
 			children
 		});
-		$[12] = MotionElement;
-		$[13] = children;
-		$[14] = elementProps;
-		$[15] = t10;
-		$[16] = t11;
+		$[14] = MotionElement;
+		$[15] = children;
+		$[16] = elementProps;
 		$[17] = t3;
 		$[18] = t4;
 		$[19] = t5;
 		$[20] = t6;
-		$[21] = t12;
+		$[21] = t7;
+		$[22] = t9;
+		$[23] = t10;
 	} else {
-		t12 = $[21];
+		t10 = $[23];
 	}
-	return t12;
+	return t10;
 }

package/dist/components/filter-presets-bar.d.ts

@@ -0,0 +1,71 @@
+import type { FilterQualifierConfig } from "./filter-query-grammar.js";
+/** A named, reusable query of the filter bar. */
+export interface FilterPreset {
+    name: string;
+    query: string;
+}
+/**
+ * Validates presets restored from untrusted storage, trimming names and queries and dropping
+ * malformed or empty entries.
+ * @param value - Parsed stored value, such as the result of `JSON.parse`.
+ * @returns The valid presets, or an empty list when the value is not a list.
+ */
+export declare function parseFilterPresets(value: unknown): FilterPreset[];
+export interface FilterPresetLabels {
+    saveAction: string;
+    saveConfirm: string;
+    saveConfirmAriaLabel: string;
+    presetName: string;
+    presetNamePlaceholder: string;
+    presetQuery: string;
+    presetQueryPlaceholder: string;
+    savedPresets: string;
+    editConfirmAriaLabel: string;
+    cancel: string;
+    delete: string;
+    emptyNameError: string;
+    emptyCurrentQueryError: string;
+    emptyPresetQueryError: string;
+    duplicateNameError: string;
+    applyPresetAriaLabel: (presetName: string) => string;
+    editPresetAriaLabel: (presetName: string) => string;
+    deletePresetAriaLabel: (presetName: string) => string;
+    deleteConfirmation: (presetName: string) => string;
+}
+export declare const FILTER_PRESET_DEFAULT_LABELS: FilterPresetLabels;
+export interface FilterPresetSaveButtonProps {
+    /** Whether the filter bar currently has a query worth saving. */
+    canSaveCurrentQuery: boolean;
+    /** Saves the current query under the given name. Returns `false` when there is no query to save. */
+    onSaveCurrentQuery: (presetName: string) => boolean;
+    labels?: Partial<FilterPresetLabels>;
+}
+/**
+ * Compact icon button that saves the current query as a named preset. Fits the action slot of
+ * the filter bar input.
+ * @param props - Save availability, save callback and optional labels.
+ * @returns The button and its naming popover.
+ */
+export declare function FilterPresetSaveButton({ canSaveCurrentQuery, onSaveCurrentQuery, labels }: FilterPresetSaveButtonProps): import("react").JSX.Element;
+export interface FilterPresetsBarProps {
+    presets: readonly FilterPreset[];
+    /** Qualifiers of the filter bar, offered as suggestions while editing a preset query. */
+    queryFilterConfigs: FilterQualifierConfig[];
+    onApplyPreset: (preset: FilterPreset) => void;
+    onDeletePreset: (presetName: string) => void;
+    /** Replaces the preset named `originalName` with the given name and query. */
+    onUpdatePreset: (update: {
+        name: string;
+        originalName: string;
+        query: string;
+    }) => void;
+    labels?: Partial<FilterPresetLabels>;
+    className?: string;
+}
+/**
+ * Renders one chip per saved preset: its name applies it, the pencil edits its name and query,
+ * and the cross deletes it after a confirmation. Renders nothing without presets.
+ * @param props - Presets, filter configs, callbacks and optional labels.
+ * @returns The presets row, or nothing.
+ */
+export declare function FilterPresetsBar({ presets, queryFilterConfigs, onApplyPreset, onDeletePreset, onUpdatePreset, labels, className, }: FilterPresetsBarProps): import("react").JSX.Element | null;