@edc-motor/ui 0.5.20 → 0.5.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.5.20",
+  "version": "0.5.22",
   "description": "EdC Motor — componentes públicos Vue 3 + tokens SCSS para webs de juegos de mesa (paquete fuente: lo compila el consumidor con Vite)",
   "license": "GPL-3.0-only",
   "type": "module",

package/src/index.ts

@@ -62,6 +62,8 @@ export {
   type SplashRouterLike,
 } from './lib/splash'
 export { readCache, writeCache } from './lib/localCache'
+export { createSwrGet, type SwrGetter } from './lib/swr'
+export { isStandalonePwa } from './lib/standalone'
 export { useToast, type Toast } from './composables/useToast'
 export { useConfirm, type ConfirmOptions } from './composables/useConfirm'
 export { useTheme, type ThemeMode } from './composables/useTheme'

package/src/lib/splash.ts

@@ -33,6 +33,16 @@ import type { AxiosInstance } from 'axios'
 const SPLASH_ID = 'edc-splash'
 const DONE_CLASS = 'edc-splash--done'
 
+// Peticiones DE FONDO: con `edcBackground: true` en el config de axios, la
+// petición no cuenta para el velo — es relleno o refresco (catálogos con su
+// propia presentación de carga, revalidaciones SWR, sondeos), no «la página
+// aún no puede pintarse». Así el velo queda solo para las cargas de página.
+declare module 'axios' {
+  interface AxiosRequestConfig {
+    edcBackground?: boolean
+  }
+}
+
 export interface WatchSplashOptions {
   /** Cliente(s) axios cuyas peticiones marcan el arranque (createApi). */
   api?: AxiosInstance | AxiosInstance[]
@@ -114,17 +124,19 @@ export function watchSplash(options: WatchSplashOptions = {}): void {
 
   for (const api of apis) {
     api.interceptors.request.use((config) => {
-      inflight++
-      clearTimeout(quietTimer)
+      if (!config.edcBackground) {
+        inflight++
+        clearTimeout(quietTimer)
+      }
       return config
     })
     api.interceptors.response.use(
       (response) => {
-        if (--inflight <= 0) armQuiet()
+        if (!response.config.edcBackground && --inflight <= 0) armQuiet()
         return response
       },
-      (error) => {
-        if (--inflight <= 0) armQuiet()
+      (error: { config?: { edcBackground?: boolean } }) => {
+        if (!error?.config?.edcBackground && --inflight <= 0) armQuiet()
         return Promise.reject(error)
       },
     )
@@ -150,7 +162,9 @@ export function setupNavigationSplash(
   if (typeof document === 'undefined') return
   if (!splashEl()) return
 
-  const showDelayMs = options.showDelayMs ?? 120
+  // 250 ms: una API razonable responde antes y el velo ni aparece; por
+  // debajo saltaba en CADA navegación de producción (feo y alarmante).
+  const showDelayMs = options.showDelayMs ?? 250
   const maxWaitMs = options.maxWaitMs ?? 8000
 
   let navPending = false

package/src/lib/standalone.ts

@@ -0,0 +1,18 @@
+// ¿Corre la web como PWA INSTALADA (ventana propia, sin pestañas ni barra)?
+// Importa para los PDFs: en la app instalada no hay «pestaña nueva» ni visor
+// con controles — navegar a un PDF inline deja la ventana en blanco sin
+// escape mientras bajan decenas de MB. En standalone se sirve la descarga
+// nativa (Content-Disposition: attachment): el gestor de descargas del
+// sistema da progreso y la app sigue viva.
+export function isStandalonePwa(): boolean {
+  if (typeof window === 'undefined') return false
+  // display-mode cubre Chrome/Edge/Android; navigator.standalone es el
+  // equivalente histórico de iOS Safari.
+  return (
+    window.matchMedia('(display-mode: standalone)').matches ||
+    window.matchMedia('(display-mode: minimal-ui)').matches ||
+    window.matchMedia('(display-mode: fullscreen)').matches ||
+    ('standalone' in window.navigator &&
+      Boolean((window.navigator as { standalone?: boolean }).standalone))
+  )
+}

package/src/lib/swr.ts

@@ -0,0 +1,73 @@
+import type { AxiosInstance, AxiosRequestConfig } from 'axios'
+
+// Caché SWR en MEMORIA para los GET de contenido de la web pública
+// (stale-while-revalidate): la primera visita a una URL espera a la red
+// (y el velo de navegación puede aparecer); las siguientes se sirven de la
+// memoria AL INSTANTE — sin velo, sin negro — mientras una revalidación DE
+// FONDO (edcBackground: no cuenta para el velo) trae lo fresco y solo
+// re-aplica si algo cambió. La memoria vive lo que la pestaña: nada que
+// invalidar entre sesiones.
+//
+// Uso: const swrGet = createSwrGet(api)  // una vez, junto al cliente
+//      await swrGet<Payload>('/pages/home', undefined, (data) => { ... })
+// El callback puede llegar DOS veces (caché y luego fresco): debe ser
+// idempotente y, si la vista pudo cambiar mientras tanto (requestId),
+// comprobar dentro que sigue vigente.
+
+export interface SwrGetter {
+  <T>(
+    url: string,
+    config: AxiosRequestConfig | undefined,
+    onData: (data: T, fresh: boolean) => void,
+  ): Promise<void>
+  /** Vacía la memoria (p. ej. al cerrar sesión, si el contenido depende de ella). */
+  clear(): void
+}
+
+export function createSwrGet(api: AxiosInstance): SwrGetter {
+  const memory = new Map<string, unknown>()
+
+  // La clave incluye los params por defecto del cliente (el `?locale` que
+  // inyecta el store de locales) además de los de la petición: la misma URL
+  // en otro idioma es OTRA entrada.
+  function keyFor(url: string, config?: AxiosRequestConfig): string {
+    const params: Record<string, unknown> = {
+      ...(api.defaults.params as Record<string, unknown> | undefined),
+      ...(config?.params as Record<string, unknown> | undefined),
+    }
+    const query = Object.keys(params)
+      .sort()
+      .map((k) => `${k}=${JSON.stringify(params[k])}`)
+      .join('&')
+    return `${url}?${query}`
+  }
+
+  async function run<T>(
+    url: string,
+    config: AxiosRequestConfig | undefined,
+    onData: (data: T, fresh: boolean) => void,
+  ): Promise<void> {
+    const key = keyFor(url, config)
+    if (memory.has(key)) {
+      const cached = memory.get(key) as T
+      onData(cached, false)
+      void api
+        .get<T>(url, { ...config, edcBackground: true })
+        .then(({ data }) => {
+          memory.set(key, data)
+          if (JSON.stringify(data) !== JSON.stringify(cached)) onData(data, true)
+        })
+        .catch(() => {
+          // la revalidación es oportunista: si falla, se queda lo cacheado
+        })
+      return
+    }
+    const { data } = await api.get<T>(url, config)
+    memory.set(key, data)
+    onData(data, true)
+  }
+
+  const getter = run as SwrGetter
+  getter.clear = () => memory.clear()
+  return getter
+}