@innertia-solutions/innertia-nuxt 0.1.1 → 0.1.3

package/README.md

@@ -24,6 +24,10 @@ export default defineNuxtConfig({
     innertia: {
       mode: 'saas', // 'saas' (default) | 'app'
 
+      branding: { name: 'MyApp', version: '1.0.0' },
+      colors: { primary: 'violet', secondary: 'slate' },
+      darkTone: 'slate',  // 'neutral' (default) | 'slate' | 'gray' | 'zinc' | 'stone'
+
       apps: {
         backoffice: {
           path: '/backoffice',

package/app.config.ts

@@ -20,6 +20,76 @@ export default defineAppConfig({
      */
     mode: 'saas' as InnertiaMode,
 
+    /**
+     * Branding del producto (nombre + versión). Los logos viven en `/public/isologo-light.png`
+     * y `/public/isologo-dark.png` de cada producto — la librería los referencia por path fijo.
+     */
+    branding: {
+      name: 'Innertia',
+      version: '1.0.0',
+    },
+
+    /**
+     * Colores primario y secundario. Acepta:
+     *   - Nombre de color de Tailwind (string): 'violet', 'indigo', 'emerald', etc.
+     *   - Scale custom (object): { 50: '#f5f3ff', ..., 950: '#2e1065' }
+     *
+     * El plugin `colors` aplica estos valores a las CSS vars `--primary-{50..950}`
+     * y `--secondary-{50..950}` en SSR y cliente.
+     */
+    colors: {
+      primary: 'blue' as ColorOption,
+      secondary: 'slate' as ColorOption,
+    },
+
+    /**
+     * Tono neutral usado en modo dark (backgrounds, borders, surfaces).
+     * Cambia el "feel" del modo oscuro sin tocar el color de marca.
+     *
+     *   - 'neutral' (default) → gris puro, neutral
+     *   - 'slate'             → gris con leve tinte azul (más frío)
+     *   - 'gray'              → gris levemente más cálido que slate
+     *   - 'zinc'              → gris cálido
+     *   - 'stone'             → gris muy cálido (con tinte tierra)
+     */
+    darkTone: 'neutral' as DarkTone,
+
+    /**
+     * Contenido del panel marketing del layout `auth`. Si no se declara, el panel queda vacío.
+     */
+    marketing: {
+      /** Palabras del typewriter. Vacío = sin typewriter (muestra heading estático). */
+      words: [] as string[],
+      /** Tagline mostrada después del typewriter. Soporta `\n` para saltos de línea. */
+      tagline: '',
+      /** Descripción debajo del tagline. */
+      description: '',
+      /** Footer con lista de items (ej. normas, certificaciones, integraciones). */
+      footer: {
+        title: '',
+        items: [] as string[],
+        description: '',
+      },
+    },
+
+    /**
+     * Proveedores OAuth para modo `app`. En modo `saas` se ignora — la lista viene
+     * de `tenantStore.config.oauth` que se carga por SSR desde el backend.
+     */
+    oauth: [] as OAuthProvider[],
+
+    /**
+     * Items principales del menú del layout `backoffice`.
+     * Cada item: { label, icon ('IconName' de @tabler/icons-vue), route, pattern? }.
+     */
+    menu: [] as MenuItem[],
+
+    /**
+     * Items secundarios del menú backoffice (apps / módulos). Renderizan junto a `menu`
+     * pero permiten diferenciar visualmente en el futuro (ej. sub-secciones modulares).
+     */
+    menuApps: [] as MenuItem[],
+
     /**
      * Declaración de "apps" (contextos) del producto.
      * Cada app define un prefijo de URL que mapea a un contexto del backend
@@ -46,6 +116,26 @@ export type InnertiaMode = 'saas' | 'app'
 
 export type AppMobileMode = 'allow' | 'block' | 'redirect'
 
+/** Color: nombre de paleta Tailwind o scale custom 50→950. */
+export type ColorScale = Partial<Record<50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950, string>>
+export type ColorOption = string | ColorScale
+
+/** Tono neutral usado en modo dark — debe ser una paleta gris de Tailwind. */
+export type DarkTone = 'neutral' | 'slate' | 'gray' | 'zinc' | 'stone'
+
+/** Proveedor OAuth — slug del provider (matchea con backend SocialAuthController). */
+export type OAuthProvider = 'google' | 'microsoft' | 'apple' | 'github'
+
+/** Item de menú del layout backoffice. */
+export interface MenuItem {
+  label: string
+  /** Nombre de icono de @tabler/icons-vue (con prefijo Icon). Ej: 'IconHome'. */
+  icon: string
+  route: string
+  /** Pattern (glob style con `*`) para resaltar item activo. Si no se pasa, usa route. */
+  pattern?: string
+}
+
 export interface AppDefinition {
   /** Prefijo de URL — la ruta debe empezar con esto para considerarse "dentro" del app. */
   path: string

package/components/Auth/LoginForm.vue

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+/**
+ * Formulario de login estándar reutilizable.
+ *
+ * - Email + password + botón ingresar
+ * - Botones OAuth dinámicos según tenant (saas) o appConfig (app)
+ * - Banner de modo demo si tenant.config.demo está presente
+ * - Cross-links a otros contextos mobile-friendly (configurable via prop)
+ *
+ * Uso:
+ *   <AuthLoginForm context="backoffice" />
+ */
+import { IconBrandGoogle, IconBrandWindows, IconBrandApple, IconBrandGithub, IconArrowRight, IconEye, IconEyeOff } from '@tabler/icons-vue'
+import type { OAuthProvider } from '../../app.config'
+
+const props = defineProps<{
+  /** Contexto del backend al que el form hace login (ej. 'backoffice', 'technician'). */
+  context: string
+  /** Título del form. */
+  title?: string
+  /** Subtítulo / descripción. */
+  description?: string
+  /** Mostrar cross-links a otros apps mobile-friendly. */
+  showCrossLinks?: boolean
+}>()
+
+const heading = computed(() => props.title ?? 'Bienvenido de nuevo')
+const subheading = computed(() => props.description ?? 'Ingresa tus credenciales para acceder a tu espacio de trabajo.')
+
+const { performLogin, getOauthRedirectUrl } = useAuth()
+const config = useRuntimeConfig()
+
+// ── Demo credentials & OAuth providers (vienen del tenant config en saas, del appConfig en app) ──
+const { hasTenant, isApp } = useInnertiaMode()
+const appConfig = useAppConfig()
+const tenantStore = hasTenant() ? useTenantStore() : null
+
+const demo = computed<{ email?: string; password?: string } | null>(() => {
+  if (tenantStore) return (tenantStore as any).config?.demo ?? null
+  return null
+})
+
+const oauthProviders = computed<OAuthProvider[]>(() => {
+  if (tenantStore) {
+    const fromTenant = (tenantStore as any).config?.oauth as OAuthProvider[] | undefined
+    return Array.isArray(fromTenant) ? fromTenant : []
+  }
+  return (appConfig.innertia?.oauth ?? []) as OAuthProvider[]
+})
+
+const oauthIcon = (provider: OAuthProvider) => ({
+  google:    IconBrandGoogle,
+  microsoft: IconBrandWindows,
+  apple:     IconBrandApple,
+  github:    IconBrandGithub,
+}[provider])
+
+const oauthLabel = (provider: OAuthProvider) => ({
+  google:    'Google',
+  microsoft: 'Microsoft',
+  apple:     'Apple',
+  github:    'GitHub',
+}[provider])
+
+// ── Form state ─────────────────────────────────────────────────────────────
+const form = useForm({
+  email:    { value: demo.value?.email    ?? '', rules: ['required', 'email'] },
+  password: { value: demo.value?.password ?? '', rules: ['required', { name: 'min', arg: 8 }] },
+})
+
+const processing = ref(false)
+const showPassword = ref(false)
+
+async function handleSubmit() {
+  if (!form.validate()) return
+  processing.value = true
+  try {
+    const data = await performLogin(props.context, form.values.email, form.values.password)
+    if (data?.requires_password_change) {
+      await navigateTo(`/${props.context}/auth/change-password`)
+    } else {
+      await navigateTo(config.public.homePath || `/${props.context}`)
+    }
+  } catch (e: any) {
+    form.addError('password', e?.data?.message ?? 'Credenciales incorrectas.')
+  } finally {
+    processing.value = false
+  }
+}
+
+async function handleOauth(provider: OAuthProvider) {
+  try {
+    const url = await getOauthRedirectUrl(props.context, provider)
+    if (url) window.location.href = url
+  } catch (e: any) {
+    form.addError('email', e?.data?.message ?? `Error al iniciar sesión con ${oauthLabel(provider)}.`)
+  }
+}
+
+// ── Cross-links a otros contextos mobile-friendly (opcional) ───────────────
+const { isMobile } = useMobileGuard()
+const { all } = useApp()
+const otherMobileApps = computed(() => {
+  if (!props.showCrossLinks) return []
+  return all.value.filter((a: any) => a.path !== `/${props.context}` && a.mobile?.mode === 'allow')
+})
+</script>
+
+<template>
+  <div class="space-y-6">
+    <!-- Heading -->
+    <div>
+      <h1 class="text-2xl font-bold text-slate-900 dark:text-white">{{ heading }}</h1>
+      <p class="mt-1.5 text-sm text-slate-500 dark:text-slate-400">{{ subheading }}</p>
+    </div>
+
+    <!-- OAuth providers (dinámicos según tenant/app config) -->
+    <div v-if="oauthProviders.length > 0" class="space-y-3">
+      <div :class="oauthProviders.length === 1 ? '' : 'grid grid-cols-2 gap-3'">
+        <button
+          v-for="provider in oauthProviders"
+          :key="provider"
+          type="button"
+          @click="handleOauth(provider)"
+          class="inline-flex items-center justify-center gap-2 rounded-lg border border-slate-200 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 shadow-xs hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-200 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700 transition-colors"
+        >
+          <component :is="oauthIcon(provider)" class="size-4 shrink-0" />
+          {{ oauthLabel(provider) }}
+        </button>
+      </div>
+      <div class="relative">
+        <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-slate-200 dark:border-slate-700" /></div>
+        <div class="relative flex justify-center"><span class="bg-white dark:bg-slate-900 px-3 text-xs text-slate-400">O continúa con tu correo</span></div>
+      </div>
+    </div>
+
+    <!-- Demo banner -->
+    <div v-if="demo" class="flex items-start gap-2.5 rounded-lg border border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-900/20 px-3.5 py-3">
+      <svg class="shrink-0 mt-0.5 size-4 text-amber-600 dark:text-amber-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line x1="12" x2="12.01" y1="16" y2="16" />
+      </svg>
+      <div>
+        <p class="text-xs font-semibold text-amber-700 dark:text-amber-400">Modo demo</p>
+        <p class="text-xs text-amber-600 dark:text-amber-500 mt-0.5">Credenciales precargadas. Haz clic en <strong>Ingresar</strong> para explorar.</p>
+      </div>
+    </div>
+
+    <!-- Form -->
+    <form class="space-y-4" @submit.prevent="handleSubmit" novalidate>
+      <div>
+        <label class="block mb-2 text-sm font-medium text-slate-800 dark:text-white">Correo electrónico</label>
+        <input
+          v-model="form.values.email"
+          type="email"
+          :disabled="processing"
+          autocomplete="email"
+          placeholder="tu@correo.com"
+          @blur="form.validate('email')"
+          class="py-2.5 px-3 block w-full border rounded-lg sm:text-sm placeholder:text-slate-400 focus:ring-1 disabled:opacity-50 dark:bg-transparent dark:text-slate-300"
+          :class="form.errors.email?.length ? 'border-red-400 focus:border-red-400 focus:ring-red-400' : 'border-slate-200 focus:border-primary focus:ring-primary dark:border-slate-700'"
+        />
+        <p v-if="form.errors.email?.length" class="mt-1.5 text-xs text-red-500">{{ form.errors.email[0] }}</p>
+      </div>
+
+      <div>
+        <div class="flex justify-between items-center mb-2">
+          <label class="text-sm font-medium text-slate-800 dark:text-white">Contraseña</label>
+          <NuxtLink :to="`/${context}/auth/forgot-password`" class="text-xs text-primary hover:underline">
+            ¿Olvidaste tu contraseña?
+          </NuxtLink>
+        </div>
+        <div class="relative">
+          <input
+            v-model="form.values.password"
+            :type="showPassword ? 'text' : 'password'"
+            :disabled="processing"
+            autocomplete="current-password"
+            placeholder="••••••••"
+            @blur="form.validate('password')"
+            class="py-2.5 px-3 block w-full border rounded-lg sm:text-sm placeholder:text-slate-400 focus:ring-1 disabled:opacity-50 dark:bg-transparent dark:text-slate-300"
+            :class="form.errors.password?.length ? 'border-red-400 focus:border-red-400 focus:ring-red-400' : 'border-slate-200 focus:border-primary focus:ring-primary dark:border-slate-700'"
+          />
+          <button
+            type="button"
+            tabindex="-1"
+            @click="showPassword = !showPassword"
+            class="absolute inset-y-0 end-0 flex items-center px-3 cursor-pointer text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"
+          >
+            <IconEyeOff v-if="showPassword" class="size-4" />
+            <IconEye v-else class="size-4" />
+          </button>
+        </div>
+        <p v-if="form.errors.password?.length" class="mt-1.5 text-xs text-red-500">{{ form.errors.password[0] }}</p>
+      </div>
+
+      <button
+        type="submit"
+        :disabled="processing"
+        class="py-2.5 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-primary hover:bg-primary-hover text-white disabled:opacity-50"
+      >
+        <span v-if="processing" class="animate-spin inline-block size-4 border-[2px] border-t-transparent border-white rounded-full" />
+        <span v-else class="flex items-center gap-x-2">
+          Ingresar
+          <IconArrowRight class="size-4" />
+        </span>
+      </button>
+    </form>
+
+    <!-- Cross-links a otros contextos mobile-friendly -->
+    <div v-if="isMobile && otherMobileApps.length > 0" class="space-y-2 pt-2">
+      <div class="relative py-1">
+        <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-slate-200 dark:border-slate-700" /></div>
+        <div class="relative flex justify-center"><span class="bg-white dark:bg-slate-900 px-3 text-[11px] uppercase tracking-wider text-slate-400">o</span></div>
+      </div>
+      <NuxtLink
+        v-for="other in otherMobileApps"
+        :key="other.path"
+        :to="other.loginPath"
+        class="w-full inline-flex items-center justify-center gap-2 py-2.5 px-3 rounded-lg border border-primary-200 dark:border-primary-800 bg-primary-50 dark:bg-primary-900/20 text-sm font-medium text-primary-700 dark:text-primary-300 hover:bg-primary-100 dark:hover:bg-primary-900/40 transition-colors"
+      >
+        Entrar como {{ other.label }}
+      </NuxtLink>
+    </div>
+  </div>
+</template>

package/components/Auth/MarketingPanel.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+/**
+ * Panel marketing del auth layout — typewriter + tagline + footer con items.
+ *
+ * Lee contenido desde `appConfig.innertia.marketing`. Si no hay contenido configurado,
+ * renderiza vacío para que el producto pueda llenarlo via slots del layout o no mostrarlo.
+ *
+ * Colores: usa --primary (configurable via appConfig.innertia.colors.primary).
+ */
+
+const appConfig = useAppConfig()
+const marketing = computed(() => appConfig.innertia?.marketing ?? {
+  words: [],
+  tagline: '',
+  description: '',
+  footer: { title: '', items: [], description: '' },
+})
+
+const hasContent = computed(() =>
+  (marketing.value.words ?? []).length > 0 ||
+  !!marketing.value.tagline ||
+  !!marketing.value.description ||
+  !!marketing.value.footer?.title
+)
+
+// ── Typewriter ─────────────────────────────────────────────────────────────
+const typed = ref('')
+const cursor = ref(true)
+let wordIdx = 0
+let charIdx = 0
+let deleting = false
+let typeTimeout: ReturnType<typeof setTimeout> | null = null
+let cursorInterval: ReturnType<typeof setInterval> | null = null
+
+function typeStep() {
+  const words = marketing.value.words ?? []
+  if (words.length === 0) return
+
+  const word = words[wordIdx]
+  if (!deleting) {
+    charIdx++
+    typed.value = word.slice(0, charIdx)
+    if (charIdx === word.length) {
+      deleting = true
+      typeTimeout = setTimeout(typeStep, 1600)
+      return
+    }
+    typeTimeout = setTimeout(typeStep, 90)
+  } else {
+    charIdx--
+    typed.value = word.slice(0, charIdx)
+    if (charIdx === 0) {
+      deleting = false
+      wordIdx = (wordIdx + 1) % words.length
+      typeTimeout = setTimeout(typeStep, 300)
+      return
+    }
+    typeTimeout = setTimeout(typeStep, 50)
+  }
+}
+
+onMounted(() => {
+  if ((marketing.value.words ?? []).length > 0) {
+    typeStep()
+    cursorInterval = setInterval(() => { cursor.value = !cursor.value }, 530)
+  }
+})
+
+onUnmounted(() => {
+  if (typeTimeout) clearTimeout(typeTimeout)
+  if (cursorInterval) clearInterval(cursorInterval)
+})
+
+// ── Mouse glow ─────────────────────────────────────────────────────────────
+const mouseX = ref(50)
+const mouseY = ref(50)
+const glowVisible = ref(false)
+
+function onMouseMove(e: MouseEvent) {
+  const target = e.currentTarget as HTMLElement
+  const rect = target.getBoundingClientRect()
+  mouseX.value = ((e.clientX - rect.left) / rect.width) * 100
+  mouseY.value = ((e.clientY - rect.top) / rect.height) * 100
+  glowVisible.value = true
+}
+
+function onMouseLeave() {
+  glowVisible.value = false
+}
+
+const dotMaskStyle = computed(() => ({
+  opacity: glowVisible.value ? 1 : 0,
+  backgroundImage: 'radial-gradient(circle, var(--primary-300, rgba(196,181,253,0.55)) 1.5px, transparent 1.5px)',
+  backgroundSize: '22px 22px',
+  WebkitMaskImage: `radial-gradient(circle 180px at ${mouseX.value}% ${mouseY.value}%, black 0%, transparent 70%)`,
+  maskImage: `radial-gradient(circle 180px at ${mouseX.value}% ${mouseY.value}%, black 0%, transparent 70%)`,
+  transition: 'opacity 0.5s ease',
+}))
+
+// Tagline puede tener \n para saltos de línea
+const taglineLines = computed(() => (marketing.value.tagline ?? '').split('\n'))
+</script>
+
+<template>
+  <div
+    class="hidden lg:flex lg:w-[42%] xl:w-[38%] bg-primary-50 dark:bg-slate-950 flex-col justify-between p-10 relative overflow-hidden shrink-0"
+    @mousemove="onMouseMove"
+    @mouseleave="onMouseLeave"
+  >
+    <!-- Decoración de fondo -->
+    <div class="absolute inset-0 pointer-events-none">
+      <!-- Cuadrícula de puntos base — light mode -->
+      <div
+        class="absolute inset-0 dark:hidden"
+        :style="{
+          backgroundImage: 'radial-gradient(circle, var(--primary-900, rgba(76,29,149,0.5)) 1px, transparent 1px)',
+          backgroundSize: '22px 22px',
+          opacity: 0.18,
+        }"
+      />
+      <!-- Cuadrícula de puntos base — dark mode -->
+      <div
+        class="absolute inset-0 hidden dark:block"
+        style="background-image: radial-gradient(circle, rgba(255,255,255,0.5) 1px, transparent 1px); background-size: 22px 22px; opacity: 0.18;"
+      />
+
+      <!-- Cuadrícula brillante enmascarada al cursor -->
+      <div class="absolute inset-0" :style="dotMaskStyle" />
+
+      <!-- Blobs estáticos -->
+      <div class="absolute -top-32 -left-32 size-96 rounded-full bg-primary-400/25 dark:bg-primary-600/10 blur-3xl" />
+      <div class="absolute bottom-0 right-0 size-80 rounded-full bg-primary-500/20 dark:bg-primary-800/10 blur-3xl" />
+    </div>
+
+    <!-- Logo (slot opcional, default: logos del /public del producto) -->
+    <div class="relative z-10">
+      <slot name="logo">
+        <img src="/isologo-light.png" :alt="appConfig.innertia?.branding?.name ?? 'Logo'" class="h-8 dark:hidden" />
+        <img src="/isologo-dark.png" :alt="appConfig.innertia?.branding?.name ?? 'Logo'" class="h-8 hidden dark:block" />
+      </slot>
+    </div>
+
+    <!-- Tagline + typewriter -->
+    <div v-if="hasContent" class="relative z-10 space-y-5">
+      <h2 class="text-4xl xl:text-5xl font-bold text-slate-900 dark:text-white leading-snug">
+        <template v-if="(marketing.words ?? []).length > 0">
+          <span class="text-primary-700 dark:text-primary-300">
+            {{ typed }}<span
+              :class="cursor ? 'opacity-60' : 'opacity-0'"
+              class="inline-block w-px h-[0.85em] bg-primary-700/60 dark:bg-primary-300/60 align-middle ml-0.5 transition-opacity duration-100"
+            />
+          </span><br />
+        </template>
+        <template v-for="(line, i) in taglineLines" :key="i">
+          {{ line }}<br v-if="i < taglineLines.length - 1" />
+        </template>
+      </h2>
+      <p v-if="marketing.description" class="text-slate-700 dark:text-slate-400 text-sm leading-relaxed max-w-xs">
+        {{ marketing.description }}
+      </p>
+    </div>
+
+    <!-- Footer items -->
+    <div v-if="marketing.footer?.title || (marketing.footer?.items ?? []).length > 0" class="relative z-10 space-y-3">
+      <p v-if="marketing.footer.title" class="text-xs font-medium text-slate-600 dark:text-slate-500 uppercase tracking-widest">
+        {{ marketing.footer.title }}
+      </p>
+      <div v-if="(marketing.footer.items ?? []).length > 0" class="flex flex-wrap items-center gap-2">
+        <span
+          v-for="item in marketing.footer.items"
+          :key="item"
+          class="inline-flex items-center rounded-md border border-slate-900/10 bg-white/40 px-2.5 py-1 text-xs font-medium text-slate-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400"
+        >{{ item }}</span>
+      </div>
+      <p v-if="marketing.footer.description" class="text-xs text-slate-600 dark:text-slate-600 leading-relaxed">
+        {{ marketing.footer.description }}
+      </p>
+    </div>
+  </div>
+</template>

package/layouts/auth.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+/**
+ * Layout para flujos de autenticación (login, recovery, register).
+ *
+ * Estructura:
+ *   [Panel marketing (lg+ only)] [Form area: header (theme switch) | slot | footer (© + version)]
+ *
+ * Configurable via:
+ *   - `appConfig.innertia.branding.name` y `branding.version` (footer)
+ *   - `appConfig.innertia.marketing.*` (panel izquierdo — typewriter, tagline, footer)
+ *   - `appConfig.innertia.colors.primary` (color de acentos)
+ *
+ * Slots disponibles:
+ *   - `marketing` — sobreescribe el panel izquierdo entero
+ *   - `logo`      — sobreescribe el logo del topbar mobile (default: /isologo-{light,dark}.png)
+ *   - default     — contenido del formulario (login/recovery/register)
+ */
+
+onMounted(() => {
+  if (typeof sessionStorage !== 'undefined') sessionStorage.removeItem('auth-entered')
+})
+
+const appConfig = useAppConfig()
+const branding = computed(() => appConfig.innertia?.branding ?? { name: 'Innertia', version: '' })
+</script>
+
+<template>
+  <div class="min-h-screen flex bg-white dark:bg-slate-900">
+
+    <!-- ── Columna izquierda: marketing panel ─────────────────────────────── -->
+    <slot name="marketing">
+      <AuthMarketingPanel />
+    </slot>
+
+    <!-- ── Columna derecha: formulario ────────────────────────────────────── -->
+    <div class="flex flex-1 flex-col">
+
+      <!-- Barra superior -->
+      <div class="relative flex items-center justify-end px-6 pt-5">
+        <!-- Logo centrado en mobile (oculto en lg+) -->
+        <div class="lg:hidden absolute inset-x-0 px-6 flex justify-center pointer-events-none">
+          <div class="w-full max-w-sm flex">
+            <NuxtLink to="/" class="pointer-events-auto">
+              <slot name="logo">
+                <img src="/isologo-light.png" :alt="branding.name" class="h-7 dark:hidden" />
+                <img src="/isologo-dark.png" :alt="branding.name" class="h-7 hidden dark:block" />
+              </slot>
+            </NuxtLink>
+          </div>
+        </div>
+        <AppSwitchColorTheme />
+      </div>
+
+      <!-- Contenido del formulario -->
+      <div class="flex flex-1 items-center justify-center px-6 py-10">
+        <div class="w-full max-w-sm">
+          <Transition name="auth-content" mode="out-in">
+            <slot />
+          </Transition>
+        </div>
+      </div>
+
+      <!-- Pie de página: © {nombre} - v{version} -->
+      <div class="flex items-center justify-end gap-x-2 px-6 pb-5">
+        <span class="text-xs text-slate-400 dark:text-slate-600">
+          © {{ new Date().getFullYear() }} {{ branding.name }}
+        </span>
+        <template v-if="branding.version">
+          <span class="text-xs text-slate-300 dark:text-slate-700">-</span>
+          <span class="text-xs text-slate-400 dark:text-slate-600">v{{ branding.version }}</span>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.auth-content-enter-active,
+.auth-content-leave-active {
+  transition: opacity 200ms ease, transform 200ms ease;
+}
+.auth-content-enter-from,
+.auth-content-leave-to {
+  opacity: 0;
+  transform: translateY(6px);
+}
+</style>

package/layouts/backoffice.vue

@@ -0,0 +1,209 @@
+<script setup lang="ts">
+/**
+ * Layout backoffice estándar — topbar oscuro con logo + menú + user dropdown.
+ *
+ * Configurable via `appConfig.innertia.menu` (items principales) y
+ * `appConfig.innertia.menuApps` (apps secundarias, opcional para layouts dobles).
+ *
+ * Slots disponibles:
+ *   - `search` — contenido del centro del topbar (ej. buscador AI). Default: vacío.
+ *   - `logo`   — sobreescribe el logo. Default: /isologo-{light,dark}.png + link a home del primer contexto.
+ *   - default  — contenido principal de la página.
+ */
+import * as icons from '@tabler/icons-vue'
+
+interface MenuItem {
+  label: string
+  icon: string
+  route: string
+  pattern?: string
+}
+
+const { logout } = useAuth()
+const authStore = useAuthStore()
+const { isDark, toggle } = useTheme()
+const { docked } = useDockedPreviews()
+const route = useRoute()
+const appConfig = useAppConfig()
+
+const branding = computed(() => appConfig.innertia?.branding ?? { name: 'Innertia' })
+const menuItems = computed<MenuItem[]>(() => (appConfig.innertia?.menu ?? []) as MenuItem[])
+const menuApps  = computed<MenuItem[]>(() => (appConfig.innertia?.menuApps ?? []) as MenuItem[])
+
+const matchPattern = (pattern: string | undefined, fallback: string) => {
+  const p = pattern || fallback
+  if (!p) return false
+  const regex = new RegExp('^' + p.replace(/\*/g, '.*') + '$')
+  return regex.test(route.path)
+}
+
+const mobileOpen = ref(false)
+watch(() => route.path, () => { mobileOpen.value = false })
+
+const userInitial = computed(() =>
+  (authStore.user as any)?.name?.charAt(0)?.toUpperCase()
+  ?? (authStore.user as any)?.email?.charAt(0)?.toUpperCase()
+  ?? 'U'
+)
+
+// Default home — primer item del menu o '/'
+const homeRoute = computed(() => menuItems.value[0]?.route ?? '/')
+</script>
+
+<template>
+  <div class="relative bg-background min-h-screen">
+    <!-- Dot pattern background -->
+    <div
+      class="fixed inset-0 pointer-events-none dark:hidden"
+      style="background-image: radial-gradient(circle, rgba(0,0,0,0.07) 1px, transparent 1px); background-size: 20px 20px; opacity: 0.5;"
+    />
+    <div
+      class="fixed inset-0 pointer-events-none hidden dark:block"
+      style="background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 20px 20px;"
+    />
+
+    <!-- ========== HEADER ========== -->
+    <header class="flex flex-col z-50 sticky top-0">
+
+      <!-- Top bar -->
+      <div class="relative overflow-hidden bg-navbar-inverse border-b border-navbar-divider">
+        <div class="max-w-[85rem] flex justify-between lg:grid lg:grid-cols-3 basis-full items-center w-full mx-auto py-1.5 px-4 sm:px-6 lg:px-8">
+
+          <!-- Left: Logo + mobile hamburger -->
+          <div class="flex items-center gap-x-3">
+            <slot name="logo">
+              <NuxtLink :to="homeRoute" class="flex-none ml-1">
+                <img src="/isologo-light.png" class="h-6 w-auto dark:hidden" :alt="branding.name" />
+                <img src="/isologo-dark.png" class="h-6 w-auto hidden dark:block" :alt="branding.name" />
+              </NuxtLink>
+            </slot>
+            <button
+              type="button"
+              class="lg:hidden inline-flex justify-center items-center size-9 rounded-lg text-foreground-inverse hover:bg-plain/10 focus:outline-hidden"
+              @click="mobileOpen = !mobileOpen"
+              :aria-expanded="mobileOpen"
+              aria-label="Toggle navigation"
+            >
+              <icons.IconMenu2 v-if="!mobileOpen" class="size-4 shrink-0" />
+              <icons.IconX v-else class="size-4 shrink-0" />
+            </button>
+          </div>
+
+          <!-- Center: slot custom (ej. buscador AI) -->
+          <div class="hidden lg:flex justify-center">
+            <slot name="search" />
+          </div>
+
+          <!-- Right: theme toggle + alerts + user -->
+          <div class="flex items-center justify-end gap-x-1">
+
+            <button
+              type="button"
+              class="inline-flex justify-center items-center size-9 rounded-full text-foreground-inverse hover:bg-plain/10 focus:outline-hidden"
+              @click="toggle"
+              :title="isDark ? 'Modo claro' : 'Modo oscuro'"
+            >
+              <icons.IconSun v-if="isDark" class="size-4 shrink-0" />
+              <icons.IconMoon v-else class="size-4 shrink-0" />
+            </button>
+
+            <slot name="topbar-actions" />
+
+            <div class="hidden sm:block w-px h-6 bg-navbar-divider/20 mx-1" />
+
+            <!-- User dropdown -->
+            <div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
+              <button
+                type="button"
+                class="inline-flex shrink-0 items-center rounded-full focus:outline-hidden"
+                aria-haspopup="menu"
+                aria-label="Cuenta"
+              >
+                <div class="size-9 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-sm font-bold select-none">
+                  {{ userInitial }}
+                </div>
+              </button>
+
+              <div
+                class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] opacity-0 hidden z-20 bg-dropdown border border-dropdown-line rounded-xl shadow-xl"
+                role="menu"
+              >
+                <div class="p-1 border-b border-dropdown-divider">
+                  <div class="py-2 px-3 flex items-center gap-x-3">
+                    <div class="size-8 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-sm font-bold shrink-0">
+                      {{ userInitial }}
+                    </div>
+                    <div class="grow min-w-0">
+                      <p class="text-sm font-semibold text-foreground truncate">
+                        {{ (authStore.user as any)?.name ?? (authStore.user as any)?.email }}
+                      </p>
+                      <p v-if="(authStore.user as any)?.name && (authStore.user as any)?.email" class="text-xs text-muted-foreground truncate">
+                        {{ (authStore.user as any).email }}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                <div class="p-1">
+                  <button
+                    type="button"
+                    class="w-full flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden"
+                    @click="logout"
+                  >
+                    <icons.IconLogout class="shrink-0 size-4" />
+                    Cerrar sesión
+                  </button>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </div>
+
+      <!-- Secondary navbar (menu items + app items) -->
+      <nav v-if="menuItems.length > 0 || menuApps.length > 0" class="bg-navbar border-b border-navbar-line">
+        <div class="max-w-[85rem] w-full mx-auto px-4 sm:px-6 lg:px-8">
+          <div
+            class="overflow-hidden transition-all duration-300 lg:block"
+            :class="mobileOpen ? 'block' : 'hidden'"
+          >
+            <div class="flex flex-col lg:flex-row lg:items-center lg:gap-x-1 py-1.5 space-y-0.5 lg:space-y-0">
+              <NuxtLink
+                v-for="item in menuItems"
+                :key="item.route"
+                :to="item.route"
+                class="py-1.5 px-2.5 flex items-center gap-x-2 text-[13px] text-nowrap text-navbar-nav-foreground rounded-lg hover:bg-navbar-nav-hover focus:outline-hidden"
+                :class="{ 'bg-navbar-nav-active': matchPattern(item.pattern, item.route) }"
+              >
+                <component :is="(icons as any)[item.icon]" class="shrink-0 size-4" />
+                {{ item.label }}
+              </NuxtLink>
+              <NuxtLink
+                v-for="item in menuApps"
+                :key="item.route"
+                :to="item.route"
+                class="py-1.5 px-2.5 flex items-center gap-x-2 text-[13px] text-nowrap text-navbar-nav-foreground rounded-lg hover:bg-navbar-nav-hover focus:outline-hidden"
+                :class="{ 'bg-navbar-nav-active': matchPattern(item.pattern, item.route + '/*') }"
+              >
+                <component :is="(icons as any)[item.icon]" class="shrink-0 size-4" />
+                {{ item.label }}
+              </NuxtLink>
+            </div>
+          </div>
+        </div>
+      </nav>
+
+    </header>
+
+    <!-- Main content -->
+    <main
+      class="max-w-[85rem] w-full mx-auto px-4 sm:px-6 lg:px-8 py-4 transition-[padding]"
+      :class="docked.length ? 'pb-20' : ''"
+    >
+      <slot />
+    </main>
+
+    <!-- Preview dock (previews minimizados de tablas) -->
+    <AppPreviewDock />
+  </div>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innertia-solutions/innertia-nuxt",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Innertia Solutions — Nuxt layer unificada: core, auth, multitenancy, theme y app contexts",
   "keywords": [
     "nuxt",

package/plugins/colors.ts

@@ -0,0 +1,145 @@
+import type { ColorOption, ColorScale, DarkTone } from '../app.config'
+
+const SCALE_LEVELS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const
+
+/**
+ * Aplica las CSS vars de theming desde `appConfig.innertia`:
+ *   - `colors.primary` y `colors.secondary` → --primary-{50..950}, --secondary-{50..950}
+ *   - `darkTone` → reemplaza el neutral default en modo dark (backgrounds, borders, surfaces)
+ *
+ * Funciona en SSR (inyecta <style> en head) y cliente.
+ *
+ * colors acepta:
+ *   - Nombre Tailwind: 'violet' → mapea a var(--color-violet-50..950)
+ *   - Scale custom: { 50: '#f5f3ff', ..., 950: '#2e1065' }
+ *
+ * darkTone acepta:
+ *   'neutral' | 'slate' | 'gray' | 'zinc' | 'stone'
+ */
+export default defineNuxtPlugin(() => {
+  const appConfig = useAppConfig()
+  const colors = appConfig.innertia?.colors as { primary?: ColorOption; secondary?: ColorOption } | undefined
+  const darkTone = appConfig.innertia?.darkTone as DarkTone | undefined
+
+  const css: string[] = []
+
+  if (colors) css.push(buildColorCSS(colors))
+  // Solo aplicar override si el producto eligió algo distinto del default
+  if (darkTone && darkTone !== 'neutral') css.push(buildDarkToneCSS(darkTone))
+
+  if (css.length === 0) return
+
+  useHead({
+    style: [
+      {
+        id: 'innertia-colors',
+        children: css.join('\n'),
+      },
+    ],
+  })
+})
+
+function buildColorCSS(colors: { primary?: ColorOption; secondary?: ColorOption }): string {
+  const lines: string[] = [':root {']
+
+  if (colors.primary !== undefined) {
+    lines.push(...buildRoleVars('primary', colors.primary))
+  }
+  if (colors.secondary !== undefined) {
+    lines.push(...buildRoleVars('secondary', colors.secondary))
+  }
+
+  lines.push('}')
+  return lines.join('\n')
+}
+
+/**
+ * Genera overrides para modo dark reemplazando el `neutral` default por el tono elegido.
+ * Cubre backgrounds, foregrounds, borders, layers, surfaces y cards — todos los lugares
+ * donde el theme.css base usa `--color-neutral-*` en `.dark`.
+ *
+ * Por especificidad, `.dark` aquí gana sobre `.dark` en theme.css porque se inyecta
+ * después en el head (last-declared wins).
+ */
+function buildDarkToneCSS(tone: DarkTone): string {
+  return `.dark {
+  --background: var(--color-${tone}-800);
+  --background-1: var(--color-${tone}-900);
+  --background-2: var(--color-${tone}-900);
+  --background-plain: var(--color-${tone}-950);
+  --foreground: var(--color-${tone}-200);
+  --foreground-inverse: var(--color-white);
+  --inverse: var(--color-${tone}-950);
+  --border: var(--color-${tone}-700);
+  --border-line-1: var(--color-${tone}-800);
+  --border-line-2: var(--color-${tone}-700);
+  --border-line-3: var(--color-${tone}-600);
+  --layer: var(--color-${tone}-800);
+  --layer-line: var(--color-${tone}-700);
+  --layer-hover: var(--color-${tone}-700);
+  --layer-focus: var(--color-${tone}-700);
+  --layer-active: var(--color-${tone}-700);
+  --surface: var(--color-${tone}-700);
+  --surface-1: var(--color-${tone}-600);
+  --surface-2: var(--color-${tone}-500);
+  --surface-3: var(--color-${tone}-600);
+  --muted: var(--color-${tone}-700);
+  --muted-foreground: var(--color-${tone}-400);
+  --muted-foreground-1: var(--color-${tone}-300);
+  --muted-hover: var(--color-${tone}-600);
+  --card: var(--color-${tone}-800);
+  --card-line: var(--color-${tone}-700);
+  --card-divider: var(--color-${tone}-700);
+  --card-header: var(--color-${tone}-700);
+  --card-footer: var(--color-${tone}-700);
+  --dropdown: var(--color-${tone}-800);
+  --dropdown-line: var(--color-${tone}-700);
+  --dropdown-divider: var(--color-${tone}-700);
+  --dropdown-item-hover: var(--color-${tone}-700);
+  --dropdown-item-foreground: var(--color-${tone}-200);
+  --tooltip: var(--color-${tone}-100);
+  --tooltip-foreground: var(--color-${tone}-900);
+  --navbar: var(--color-${tone}-900);
+  --navbar-line: var(--color-${tone}-800);
+  --navbar-divider: var(--color-${tone}-800);
+  --navbar-nav-foreground: var(--color-${tone}-300);
+  --navbar-nav-hover: var(--color-${tone}-800);
+  --navbar-nav-active: var(--color-${tone}-700);
+  --sidebar: var(--color-${tone}-900);
+  --sidebar-line: var(--color-${tone}-800);
+}`
+}
+
+function buildRoleVars(role: 'primary' | 'secondary', value: ColorOption): string[] {
+  const out: string[] = []
+
+  if (typeof value === 'string') {
+    // Tailwind color name → referenciar las vars que Tailwind ya define
+    const tone = value
+    for (const lvl of SCALE_LEVELS) {
+      out.push(`  --${role}-${lvl}: var(--color-${tone}-${lvl});`)
+    }
+    // Semantic tokens — niveles default 600 (base), 700 (hover/focus/active)
+    out.push(`  --${role}: var(--color-${tone}-600);`)
+    out.push(`  --${role}-hover: var(--color-${tone}-700);`)
+    out.push(`  --${role}-focus: var(--color-${tone}-700);`)
+    out.push(`  --${role}-active: var(--color-${tone}-800);`)
+    out.push(`  --${role}-checked: var(--color-${tone}-600);`)
+    out.push(`  --${role}-foreground: #ffffff;`)
+  } else {
+    // Scale custom — usar los valores explícitos
+    const scale = value as ColorScale
+    for (const lvl of SCALE_LEVELS) {
+      const hex = scale[lvl]
+      if (hex) out.push(`  --${role}-${lvl}: ${hex};`)
+    }
+    if (scale[600]) out.push(`  --${role}: ${scale[600]};`)
+    if (scale[700]) out.push(`  --${role}-hover: ${scale[700]};`)
+    if (scale[700]) out.push(`  --${role}-focus: ${scale[700]};`)
+    if (scale[800]) out.push(`  --${role}-active: ${scale[800]};`)
+    if (scale[600]) out.push(`  --${role}-checked: ${scale[600]};`)
+    out.push(`  --${role}-foreground: #ffffff;`)
+  }
+
+  return out
+}