@doscientos/ui 0.1.33 → 0.1.34

package/README.md

@@ -76,7 +76,19 @@ Las primitivas de composición no conocen rutas, entidades ni transporte: cada f
 ## Estado asíncrono, errores y copia
 
 - `useAsyncAction(action)` evita dobles ejecuciones mientras está pendiente y devuelve `run`, `status`, `isPending`, `data`, `error` y `reset`.
+- `reset` no cancela peticiones y no oculta una operación pendiente. Cada ejecución
+  limpia el resultado anterior para que un fallo no presente datos de un éxito antiguo.
+- `useAutosave` serializa las escrituras de una instancia para que una petición
+  antigua no termine sobrescribiendo la siguiente. `saveNow` cancela el debounce
+  pendiente y fuerza un guardado explícito; los errores quedan en `status`/`error`.
+  Usa datos inmutables y una instancia por documento (remonta con `key` al cambiar
+  de entidad). El servidor todavía necesita control de versión para varios usuarios
+  o pestañas; un timeout no prueba que una escritura remota no se haya confirmado.
+  Al desmontar se descartan guardados en cola, no se cancelan escrituras ya enviadas.
 - `ErrorBoundary` aporta fallback recuperable, `resetKeys` y `onError`; `AsyncBoundary` combina error boundary con `Suspense`.
+- `fallback={null}` oculta el contenido explícitamente. Los errores lanzados que no
+  sean instancias de `Error` se normalizan. No sustituye los errores de loaders,
+  promesas o eventos: esos se gestionan en el router o en la acción correspondiente.
 - `ErrorState` es el fallback visual componible. La aplicación inyecta su acción de reintento, no el paquete.
 - `useClipboard` y `CopyButton` resuelven copia, feedback y errores sin acoplarse a Sileo; usa `onCopied` u `onCopyError` para analytics/toasts de producto.
 
@@ -91,9 +103,21 @@ router.replace(`?${next}`)
 
 No añadas hooks de Next, React Router ni TanStack Router al paquete. Las stories documentan componentes visuales; los hooks y utilidades puras se documentan aquí y se cubren con pruebas unitarias.
 
+## Contratos de estilos y navegación
+
+- Los slots composables de Combobox conservan tanto clases estáticas como funciones
+  `className(state)` de React Aria, combinándolas con los estilos base.
+- `Pagination` normaliza página y vecinos; `siblingCount` se limita a 0–10 para no
+  generar listas de botones sin límite. Estado visual y `aria-current` coinciden.
+- Para que los overlays portaled hereden la marca y el tema, aplica los tokens y
+  `.dark` en la raíz del documento, no solo en un contenedor del contenido.
+- No hay integración con un router implícita: la aplicación configura navegación
+  SPA mediante las APIs del router o del proveedor de React Aria según corresponda.
+
 ## Desarrollo
 
-- `pnpm test`: pruebas unitarias y de renderizado.
+- `pnpm quality`: formato, lint, tipos y tests; es el control del paquete en CI.
+- `pnpm test`: pruebas del contrato de empaquetado, unitarias y de renderizado.
 - `pnpm test:storybook`: renderizado, accesibilidad e interacciones de todas las stories en Chromium.
 - `pnpm typecheck`: contrato TypeScript.
 - `pnpm build`: distribución JS, tipos y CSS Tailwind compilado.

package/dist/index.cjs

@@ -314,6 +314,7 @@ function useAsyncAction(action) {
       pendingRef.current = true;
       setStatus("pending");
       setError(null);
+      setData(null);
       try {
         const result = await action(...args);
         setData(result);
@@ -330,6 +331,7 @@ function useAsyncAction(action) {
     [action]
   );
   const reset = (0, import_react.useCallback)(() => {
+    if (pendingRef.current) return;
     setData(null);
     setError(null);
     setStatus("idle");
@@ -352,24 +354,45 @@ function useAutosave({
   const saveRef = (0, import_react2.useRef)(onSave);
   const serializeRef = (0, import_react2.useRef)(serialize);
   const latestSaveId = (0, import_react2.useRef)(0);
+  const queue = (0, import_react2.useRef)(Promise.resolve());
+  const queuedCount = (0, import_react2.useRef)(0);
+  const timeoutRef = (0, import_react2.useRef)(void 0);
+  const mounted = (0, import_react2.useRef)(true);
+  (0, import_react2.useEffect)(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      clearTimeout(timeoutRef.current);
+    };
+  }, []);
   (0, import_react2.useEffect)(() => {
     saveRef.current = onSave;
     serializeRef.current = serialize;
   }, [onSave, serialize]);
-  const save = (0, import_react2.useCallback)(async (value) => {
+  const save = (0, import_react2.useCallback)((value, force = false) => {
+    clearTimeout(timeoutRef.current);
     const saveId = ++latestSaveId.current;
+    const snapshot = serializeRef.current(value);
+    const write = saveRef.current;
+    queuedCount.current += 1;
     setStatus("saving");
     setError(null);
-    try {
-      await saveRef.current(value);
-      if (saveId !== latestSaveId.current) return;
-      lastSaved.current = serializeRef.current(value);
-      setStatus("saved");
-    } catch (cause) {
-      if (saveId !== latestSaveId.current) return;
-      setError(cause instanceof Error ? cause : new Error("No se pudo guardar."));
-      setStatus("error");
-    }
+    const pending = queue.current.then(async () => {
+      try {
+        if (!mounted.current) return;
+        if (force || lastSaved.current !== snapshot) await write(value);
+        lastSaved.current = snapshot;
+        if (mounted.current && saveId === latestSaveId.current) setStatus("saved");
+      } catch (cause) {
+        if (!mounted.current || saveId !== latestSaveId.current) return;
+        setError(cause instanceof Error ? cause : new Error("No se pudo guardar."));
+        setStatus("error");
+      } finally {
+        queuedCount.current -= 1;
+      }
+    });
+    queue.current = pending;
+    return pending;
   }, []);
   (0, import_react2.useEffect)(() => {
     if (!enabled) return;
@@ -378,11 +401,11 @@ function useAutosave({
       lastSaved.current = snapshot;
       return;
     }
-    if (snapshot === lastSaved.current) return;
-    const timeout = window.setTimeout(() => void save(data), debounceMs);
-    return () => window.clearTimeout(timeout);
+    if (snapshot === lastSaved.current && queuedCount.current === 0) return;
+    timeoutRef.current = setTimeout(() => void save(data), debounceMs);
+    return () => clearTimeout(timeoutRef.current);
   }, [data, debounceMs, enabled, save]);
-  return { status, error, saveNow: () => save(data) };
+  return { status, error, saveNow: () => save(data, true) };
 }
 
 // src/hooks/use-clipboard.ts
@@ -1783,10 +1806,10 @@ function ComboboxContent({ className, ...props }) {
     import_react_aria_components9.Popover,
     {
       "data-slot": "combobox-content",
-      className: cn(
+      className: (state) => cn(
         floatingSurfaceClassName,
         "max-h-72 w-(--trigger-width) overflow-hidden rounded-xl border border-border bg-background p-1.5 text-foreground",
-        className
+        typeof className === "function" ? className(state) : className
       ),
       ...props
     }
@@ -1801,7 +1824,10 @@ function ComboboxList({
     import_react_aria_components9.ListBox,
     {
       "data-slot": "combobox-list",
-      className: cn("max-h-64 overflow-y-auto", className),
+      className: (state) => cn(
+        "max-h-64 overflow-y-auto",
+        typeof className === "function" ? className(state) : className
+      ),
       renderEmptyState: emptyState ? () => emptyState : void 0,
       ...props
     }
@@ -1816,9 +1842,9 @@ function ComboboxItem({
     import_react_aria_components9.ListBoxItem,
     {
       "data-slot": "combobox-item",
-      className: cn(
+      className: (state) => cn(
         "flex w-full cursor-default items-center justify-between rounded-md px-2 py-2 text-sm outline-none transition-colors data-focused:bg-muted data-focused:text-foreground data-hovered:bg-muted data-disabled:pointer-events-none data-disabled:opacity-50",
-        className
+        typeof className === "function" ? className(state) : className
       ),
       ...props,
       children
@@ -1893,7 +1919,10 @@ function AutocompleteCombobox({
     import_react_aria_components9.ComboBox,
     {
       ...props,
-      className: cn("group/combobox flex w-full flex-col gap-1.5", className),
+      className: (state) => cn(
+        "group/combobox flex w-full flex-col gap-1.5",
+        typeof className === "function" ? className(state) : className
+      ),
       items: filteredItems,
       selectedKey,
       inputValue,
@@ -2721,16 +2750,19 @@ function ErrorStateActions({ className, ...props }) {
 
 // src/ui/error-boundary/error-boundary.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
+function normalizeError(cause) {
+  return cause instanceof Error ? cause : new Error("No se pudo renderizar este contenido.", { cause });
+}
 function changedResetKeys(previous = [], next = []) {
   return previous.length !== next.length || previous.some((value, index) => !Object.is(value, next[index]));
 }
 var Boundary = class extends import_react9.Component {
   state = { error: null };
   static getDerivedStateFromError(error) {
-    return { error };
+    return { error: normalizeError(error) };
   }
   componentDidCatch(error, info) {
-    this.props.onError?.(error, info);
+    this.props.onError?.(this.state.error ?? normalizeError(error), info);
   }
   componentDidUpdate(previousProps) {
     if (this.state.error && changedResetKeys(previousProps.resetKeys, this.props.resetKeys))
@@ -2742,7 +2774,7 @@ var Boundary = class extends import_react9.Component {
     if (!this.state.error) return children;
     if (typeof fallback === "function")
       return fallback({ error: this.state.error, reset: this.reset });
-    if (fallback) return fallback;
+    if (fallback !== void 0) return fallback;
     return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(ErrorState, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ErrorStateIcon, {}),
       /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ErrorStateTitle, { children: "No se pudo cargar este contenido" }),
@@ -3808,16 +3840,17 @@ var import_lucide_react12 = require("lucide-react");
 var React6 = __toESM(require("react"), 1);
 var import_jsx_runtime47 = require("react/jsx-runtime");
 function visiblePages(page, pageCount, siblingCount) {
+  const siblings = Number.isFinite(siblingCount) ? Math.min(10, Math.max(0, Math.floor(siblingCount))) : 1;
   return [
     .../* @__PURE__ */ new Set([
       1,
-      ...Array.from({ length: siblingCount * 2 + 1 }, (_, index) => page - siblingCount + index),
+      ...Array.from({ length: siblings * 2 + 1 }, (_, index) => page - siblings + index),
       pageCount
     ])
   ].filter((item) => item >= 1 && item <= pageCount).sort((left, right) => left - right);
 }
 function normalizedPageCount(pageCount) {
-  return Number.isFinite(pageCount) ? Math.max(0, Math.floor(pageCount)) : 0;
+  return Number.isFinite(pageCount) ? Math.min(Number.MAX_SAFE_INTEGER, Math.max(0, Math.floor(pageCount))) : 0;
 }
 function normalizedPage(page, pageCount) {
   if (!Number.isFinite(page)) return 1;
@@ -3866,7 +3899,7 @@ function Pagination({
                   "aria-label": `P\xE1gina ${item}`,
                   onPress: () => onPageChange(item),
                   size: "icon",
-                  variant: item === page ? "secondary" : "ghost",
+                  variant: item === currentPage ? "secondary" : "ghost",
                   children: item
                 }
               )