@innertia-solutions/innertia-nuxt 0.1.61 → 0.1.63

package/components/Kanban/Standard.vue

@@ -459,21 +459,37 @@ const onDragStart = (row, state) => {
 }
 const onDragOver = (e, state) => {
   e.preventDefault()
-  dragOverState.value = state
+  if (dragOverState.value !== state) dragOverState.value = state
   if (!props.reorderEndpoint) return
   if (dragOverIndex.value === null) dragOverIndex.value = columnRows.value[state]?.length ?? 0
 }
-const onDragLeave = () => { dragOverState.value = null; dragOverIndex.value = null }
+// Parpadeo: el drag nativo dispara `dragleave` al entrar a un hijo (tarjeta/placeholder).
+// Si limpiamos el estado ahí, el fondo de la columna + el placeholder parpadean. Solo
+// limpiamos cuando el cursor sale de verdad de la columna (relatedTarget fuera).
+const onDragLeave = (e) => {
+  if (e.currentTarget.contains(e.relatedTarget)) return
+  dragOverState.value = null
+  dragOverIndex.value = null
+}
+// Al terminar el arrastre (drop o cancelado) limpiar siempre el estado visual.
+const onDragEnd = () => {
+  dragOverState.value = null
+  dragOverIndex.value = null
+  draggedId.value = null
+  draggedFrom.value = null
+}
 
 // Llamado desde cada tarjeta: calcula si el cursor está en la mitad superior o inferior.
+// Solo escribe el índice si cambió (evita reactividad redundante = menos re-render/parpadeo).
 const onCardDragOver = (e, state, index) => {
   if (!props.reorderEndpoint) return
   e.preventDefault()
   e.stopPropagation()
-  dragOverState.value = state
+  if (dragOverState.value !== state) dragOverState.value = state
   const rect = e.currentTarget.getBoundingClientRect()
   const after = (e.clientY - rect.top) > rect.height / 2
-  dragOverIndex.value = after ? index + 1 : index
+  const next = after ? index + 1 : index
+  if (dragOverIndex.value !== next) dragOverIndex.value = next
 }
 
 const onDrop = async (targetState) => {
@@ -827,15 +843,17 @@ defineExpose({ reload: fetchAll, rows })
               <template v-for="(row, ci) in columnRows[state.key]" :key="row.id">
                 <div
                   v-if="reorderEndpoint && dragOverState === state.key && dragOverIndex === ci"
-                  class="rounded-card border-2 border-dashed border-primary/50 bg-primary/5 h-10"
+                  class="rounded-card border-2 border-dashed border-primary/50 bg-primary/5 h-10 pointer-events-none"
                 />
                 <div
                   draggable="true"
                   @dragstart="onDragStart(row, state.key)"
                   @dragover="onCardDragOver($event, state.key, ci)"
+                  @dragend="onDragEnd"
                   @click="handleCardClick(row)"
-                  class="bg-card border border-card-line rounded-card p-3 cursor-grab active:cursor-grabbing hover:border-primary/40 hover:shadow-sm transition-all select-none"
+                  class="bg-card border border-card-line rounded-card p-3 cursor-grab active:cursor-grabbing transition-colors select-none"
                   :class="[
+                    draggedId ? '' : 'hover:border-primary/40 hover:shadow-sm',
                     draggedId === row.id ? 'opacity-40' : '',
                     previewRow?.id === row.id ? 'ring-2 ring-primary/30' : '',
                   ]"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innertia-solutions/innertia-nuxt",
-  "version": "0.1.61",
+  "version": "0.1.63",
   "description": "Innertia Solutions — Nuxt layer unificada: core, auth, multitenancy, theme y app contexts",
   "keywords": [
     "nuxt",
@@ -54,7 +54,8 @@
     "tailwindcss": "^4.0.0",
     "uuid": "^13.0.0",
     "vanilla-calendar-pro": "^3.1.0",
-    "vue3-apexcharts": "^1.11.1"
+    "vue3-apexcharts": "^1.11.1",
+    "iron-webcrypto": "^1.2.1"
   },
   "scripts": {
     "test": "vitest run"

package/server/utils/session.ts

@@ -1,5 +1,15 @@
-import { useSession } from 'h3'
+import { getCookie, setCookie, deleteCookie } from 'h3'
 import type { H3Event } from 'h3'
+import { seal, unseal, defaults as ironDefaults } from 'iron-webcrypto'
+
+// Sesión httpOnly sellada con iron (el token nunca llega al JS del browser).
+//
+// IMPORTANTE: NO usamos `useSession` de h3. Su `getSession` bajo la concurrencia de
+// Nitro devolvía sesión vacía en ~60% de requests paralelos y, peor, REESCRIBÍA la
+// cookie vacía cuando el unseal fallaba (envenenaba la sesión → logout aleatorio).
+// iron (seal/unseal) es concurrency-safe por sí solo (probado 40× paralelo sin fallos);
+// el bug vivía en la maquinaria de useSession. Acá hacemos lectura PURA: getCookie +
+// unseal, sin tocar la cookie en fallo. Escritura explícita solo en login/logout/context.
 
 export const SESSION_COOKIE = 'innertia_session'
 
@@ -8,7 +18,7 @@ export interface SessionData {
   currentContext?: string
 }
 
-/** Opciones de la sesión sellada. Pura y testeable. */
+/** Opciones de cookie sellada. `sessionOptions` se conserva para los tests (pura). */
 export function sessionOptions(password: string, opts: { secure?: boolean } = {}) {
   if (!password || password.length < 32) {
     throw new Error('[innertia-auth] NUXT_SESSION_PASSWORD debe tener ≥32 caracteres')
@@ -26,28 +36,45 @@ export function sessionOptions(password: string, opts: { secure?: boolean } = {}
   }
 }
 
-// Secure cookie en qa/prod (HTTPS); en dev local (http) debe ir sin Secure o el
-// browser la descarta silenciosamente → logout loop.
-function secureCookie(): boolean {
-  return process.env.NODE_ENV !== 'development'
+function password(event: H3Event): string {
+  const p = useRuntimeConfig(event).session.password
+  if (!p || p.length < 32) {
+    throw new Error('[innertia-auth] NUXT_SESSION_PASSWORD debe tener ≥32 caracteres')
+  }
+  return p
 }
 
-function password(event: H3Event): string {
-  // runtimeConfig.session.password (privado), llenado desde NUXT_SESSION_PASSWORD.
-  return useRuntimeConfig(event).session.password
+// Secure en qa/prod (HTTPS); en dev local (http) sin Secure o el browser la descarta.
+function secureCookie(): boolean {
+  return process.env.NODE_ENV !== 'development'
 }
 
+/** Lectura PURA: getCookie + iron unseal. Nunca reescribe la cookie (ni en fallo). */
 export async function readSession(event: H3Event): Promise<SessionData> {
-  const s = await useSession<SessionData>(event, sessionOptions(password(event), { secure: secureCookie() }))
-  return s.data
+  const raw = getCookie(event, SESSION_COOKIE)
+  if (!raw) return {}
+  try {
+    const d = (await unseal(globalThis.crypto as Crypto, raw, password(event), ironDefaults)) as any
+    if (!d || typeof d !== 'object') return {}
+    // Compat: sesiones viejas selladas por useSession envuelven en {id,createdAt,data}.
+    return (d.data && typeof d.data === 'object') ? d.data : d
+  } catch {
+    return {}
+  }
 }
 
+/** Sella {token, currentContext} y setea la cookie httpOnly. */
 export async function writeSession(event: H3Event, data: SessionData): Promise<void> {
-  const s = await useSession<SessionData>(event, sessionOptions(password(event), { secure: secureCookie() }))
-  await s.update(data)
+  const sealed = await seal(globalThis.crypto as Crypto, data, password(event), ironDefaults)
+  setCookie(event, SESSION_COOKIE, sealed, {
+    httpOnly: true,
+    sameSite: 'lax',
+    secure: secureCookie(),
+    path: '/',
+    maxAge: 60 * 60 * 24 * 7,
+  })
 }
 
 export async function clearSession(event: H3Event): Promise<void> {
-  const s = await useSession<SessionData>(event, sessionOptions(password(event), { secure: secureCookie() }))
-  await s.clear()
+  deleteCookie(event, SESSION_COOKIE, { path: '/' })
 }