@innertia-solutions/innertia-nuxt 0.1.1

package/.github/workflows/auto-publish.yml

@@ -0,0 +1,64 @@
+name: Auto Publish
+
+on:
+  push:
+    branches: [main]
+    paths-ignore:
+      - '**.md'
+      - '.github/**'
+
+jobs:
+  publish:
+    if: github.actor != 'github-actions[bot]'
+    runs-on: ubuntu-latest
+    environment: NPM
+    permissions:
+      contents: write
+      id-token: write
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: 'https://registry.npmjs.org'
+
+      - run: pnpm install --no-frozen-lockfile
+
+      - name: Configure git
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+
+      - name: Bump and publish
+        id: publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: |
+          npm version patch --no-git-tag-version
+          PKG_NAME=$(node -p "require('./package.json').name")
+          VERSION=$(node -p "require('./package.json').version")
+
+          if npm view "$PKG_NAME@$VERSION" version 2>/dev/null | grep -q "$VERSION"; then
+            echo "⚠  $PKG_NAME@$VERSION already published — keeping version bump, skipping publish"
+          else
+            npm publish --access public --provenance
+            echo "✓ $PKG_NAME@$VERSION"
+          fi
+
+          echo "pkg_name=$PKG_NAME" >> $GITHUB_OUTPUT
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+
+      - name: Commit version bump
+        run: |
+          git add package.json pnpm-lock.yaml || git add package.json
+          git commit -m "chore: release ${{ steps.publish.outputs.pkg_name }}@${{ steps.publish.outputs.version }}"
+          git push

package/.github/workflows/release.yml

@@ -0,0 +1,59 @@
+name: Release (manual)
+
+on:
+  workflow_dispatch:
+    inputs:
+      bump:
+        description: 'Version bump'
+        required: true
+        type: choice
+        options:
+          - patch
+          - minor
+          - major
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    environment: NPM
+    permissions:
+      contents: write
+      id-token: write
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: 'https://registry.npmjs.org'
+
+      - run: pnpm install --no-frozen-lockfile
+
+      - name: Configure git
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+
+      - name: Bump, publish, tag
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: |
+          npm version ${{ inputs.bump }} --no-git-tag-version
+          PKG_NAME=$(node -p "require('./package.json').name")
+          VERSION=$(node -p "require('./package.json').version")
+          TAG="v${VERSION}"
+
+          npm publish --access public --provenance
+
+          git add package.json pnpm-lock.yaml || git add package.json
+          git commit -m "chore: release ${PKG_NAME}@${VERSION}"
+          git tag "$TAG"
+          git push
+          git push --tags

package/README.md

@@ -0,0 +1,60 @@
+# @innertia-solutions/innertia-nuxt
+
+Capa Nuxt unificada de Innertia Solutions. Provee en un solo paquete:
+
+- **Core** — composables base (useApi, useDate, useDevice, useDownload, useRealtime, etc.) + plugin pusher + SEO
+- **App** — auth (JWT), contextos, permisos, vue-query, stores de notifications/auth, middlewares `auth`/`guest`
+- **Saas** — multitenancy por subdomain (`X-Tenant` header, validación de tenant, store de tenant)
+- **Spark** — design system: components, layouts, theme Tailwind, Preline, Tabler icons
+- **Contexts** — apps multi-contexto (backoffice/teacher/technician...), mobile guard configurable
+
+## Uso
+
+```bash
+pnpm add @innertia-solutions/innertia-nuxt
+```
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  extends: ['@innertia-solutions/innertia-nuxt'],
+  css: ['@innertia-solutions/innertia-nuxt/spark.css'],
+
+  appConfig: {
+    innertia: {
+      mode: 'saas', // 'saas' (default) | 'app'
+
+      apps: {
+        backoffice: {
+          path: '/backoffice',
+          context: 'backoffice',
+          label: 'Backoffice',
+          icon: 'IconBuildingSkyscraper',
+          loginPath: '/backoffice/login',
+          home: '/backoffice',
+          mobile: { mode: 'block' },
+        },
+        // ...más contextos
+      },
+
+      mobile: { breakpoint: 1024, rememberChoice: true },
+    },
+
+    spark: { theme: 'default' },
+  },
+})
+```
+
+## Modos
+
+| Modo | Subdomain detection | Tenant validation | X-Tenant header | Auth | Apps |
+|---|---|---|---|---|---|
+| `saas` (default) | ✅ | ✅ | ✅ | ✅ | ✅ |
+| `app` | ❌ | ❌ | ❌ | ✅ | ✅ |
+
+## CI
+
+- **Push a `main`** → `auto-publish.yml` bumpea patch y publica automáticamente.
+- **Workflow `release.yml` manual** → permite elegir bump (patch/minor/major).
+
+Requiere `NPM_TOKEN` configurado en environment `NPM` del repo.

package/app.config.ts

@@ -0,0 +1,70 @@
+// Defaults para `appConfig.innertia`. Los productos sobreescriben esto en su nuxt.config.ts:
+//
+//   appConfig: {
+//     innertia: {
+//       apps: { backoffice: {...}, technician: {...} },
+//       mobile: { breakpoint: 1024 },
+//     },
+//   }
+//
+// Si el producto no declara `apps`, el feature de contextos queda inactivo
+// (middleware no redirige, picker no se muestra).
+export default defineAppConfig({
+  innertia: {
+    /**
+     * Modo de operación:
+     *   - 'saas' → multi-tenant. Activa detect-subdomain, validate-tenant y X-Tenant header.
+     *              Default por compatibilidad con productos existentes.
+     *   - 'app'  → single-tenant / app interna. No detecta subdomain ni inyecta tenant header.
+     *              Auth y contextos siguen funcionando igual que en saas.
+     */
+    mode: 'saas' as InnertiaMode,
+
+    /**
+     * Declaración de "apps" (contextos) del producto.
+     * Cada app define un prefijo de URL que mapea a un contexto del backend
+     * (matching con `availableContexts` que devuelve `auth/me`).
+     */
+    apps: {} as Record<string, AppDefinition>,
+
+    /**
+     * Política mobile global. Se aplica si una `app` no tiene `mobile.mode` propio.
+     */
+    mobile: {
+      /** Threshold de viewport en px para considerar mobile (default 1024 = Tailwind `lg`). */
+      breakpoint: 1024,
+      /** Persistir elección del picker en cookie. */
+      rememberChoice: true,
+    },
+  },
+})
+
+// ─── Tipos públicos ──────────────────────────────────────────────────────────
+// Re-exportados desde acá para que cualquier composable / componente los importe.
+
+export type InnertiaMode = 'saas' | 'app'
+
+export type AppMobileMode = 'allow' | 'block' | 'redirect'
+
+export interface AppDefinition {
+  /** Prefijo de URL — la ruta debe empezar con esto para considerarse "dentro" del app. */
+  path: string
+  /** Clave del contexto que matchea con `availableContexts` del backend. */
+  context: string
+  /** Label visible en pickers, dropdowns, etc. */
+  label: string
+  /** Descripción opcional para el picker mobile. */
+  description?: string
+  /** Nombre del icono de @tabler/icons-vue (sin "Icon"). */
+  icon?: string
+  /** Ruta de login del app. */
+  loginPath: string
+  /** Ruta home (post-login). */
+  home: string
+  /** Política de uso en mobile. */
+  mobile: {
+    mode: AppMobileMode
+    /** Solo si mode === 'redirect' — adónde mandar desde mobile. */
+    redirectTo?: string
+  }
+}

package/components/Admin/Base.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+const props = defineProps<{
+  floating?: boolean
+  user?: { name?: string; email?: string } | null
+  menuSize?: string
+}>()
+
+const emit = defineEmits<{ logout: [] }>()
+
+const isOpen = ref(false)
+const open  = () => { isOpen.value = true }
+const close = () => { isOpen.value = false }
+
+provide('spark:sidebar', { isOpen, open, close })
+
+const userInitial = computed(() =>
+  props.user?.name?.charAt(0).toUpperCase() ?? props.user?.email?.charAt(0).toUpperCase() ?? 'U'
+)
+
+const config = useRuntimeConfig()
+const appEnv = config.public.appEnv as string | undefined
+
+const envLabel = computed(() => {
+  switch (appEnv) {
+    case 'local':      return 'Entorno local'
+    case 'dev':        return 'Entorno dev'
+    case 'staging':    return 'Staging'
+    case 'production': return null
+    default:           return appEnv ?? null
+  }
+})
+</script>
+
+<template>
+  <div class="bg-background-1 min-h-screen">
+
+    <!-- Mobile backdrop -->
+    <Transition
+      enter-from-class="opacity-0" enter-active-class="transition-opacity duration-300"
+      leave-to-class="opacity-0"   leave-active-class="transition-opacity duration-300"
+    >
+      <div v-if="isOpen" class="lg:hidden fixed inset-0 z-50 bg-black/40 backdrop-blur-sm" @click="close" />
+    </Transition>
+
+    <!-- Sidebar -->
+    <aside
+      tabindex="-1"
+      aria-label="Sidebar"
+      :class="[
+        'fixed inset-y-0 start-0 z-60 w-65',
+        'transition-transform duration-300 lg:translate-x-0',
+        isOpen ? 'translate-x-0' : 'max-lg:-translate-x-full',
+        floating ? 'p-3' : '',
+      ]"
+    >
+      <div
+        :class="[
+          'flex flex-col h-full',
+          floating
+            ? 'bg-sidebar rounded-2xl border border-sidebar-line shadow-sm overflow-hidden'
+            : 'bg-sidebar border-e border-sidebar-line',
+        ]"
+      >
+        <!-- Logo + mobile close -->
+        <header class="flex items-center gap-x-1 px-3 pt-4 pb-5 shrink-0">
+          <div class="flex-1 min-w-0">
+            <slot name="logo" />
+          </div>
+          <button
+            type="button"
+            class="lg:hidden size-7 inline-flex justify-center items-center rounded-lg text-muted-foreground hover:bg-muted-hover transition-colors"
+            @click="close"
+          >
+            <svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </header>
+
+        <!-- Search -->
+        <div v-if="$slots.search" class="px-3 pb-2 shrink-0">
+          <slot name="search" />
+        </div>
+
+        <!-- Nav menu (scrollable) -->
+        <div
+          :class="[
+            'flex-1 min-h-0 overflow-y-auto',
+            '[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
+            menuSize ?? 'text-sm',
+          ]"
+        >
+          <slot name="menu" />
+        </div>
+
+        <!-- User footer -->
+        <div class="shrink-0 border-t border-sidebar-line px-3 pt-5 pb-3 space-y-2">
+
+          <!-- Controls slot (dark mode, notifications, etc.) -->
+          <div v-if="$slots['user-controls']" class="flex items-center gap-x-1.5">
+            <slot name="user-controls" />
+          </div>
+
+          <!-- User info + logout -->
+          <div v-if="user" class="flex items-center gap-x-3">
+            <div class="size-9 rounded-lg bg-primary flex items-center justify-center text-primary-foreground text-sm font-bold shrink-0 select-none">
+              {{ userInitial }}
+            </div>
+            <div class="flex-1 min-w-0">
+              <p class="text-sm font-semibold text-foreground truncate">{{ user.name ?? user.email }}</p>
+              <p v-if="user.name && user.email" class="text-xs text-muted-foreground truncate">{{ user.email }}</p>
+            </div>
+            <button
+              type="button"
+              class="size-7 inline-flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors shrink-0"
+              title="Cerrar sesión"
+              @click="emit('logout')"
+            >
+              <svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M18 9l3 3m0 0l-3 3m3-3H9" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- Env / extra slot -->
+          <slot name="user-footer" />
+        </div>
+
+        <!-- Environment banner — full width, outside the padded footer -->
+        <div v-if="envLabel" class="shrink-0 flex items-center justify-center gap-x-2 py-2 bg-amber-400/15 border-t border-amber-400/30">
+          <span class="size-1.5 rounded-full bg-amber-400 shrink-0"></span>
+          <span class="text-[11px] font-semibold text-amber-600 dark:text-amber-400 uppercase tracking-wide">{{ envLabel }}</span>
+        </div>
+
+      </div>
+    </aside>
+
+    <!-- Main content -->
+    <div class="lg:ps-65 p-3">
+      <slot />
+    </div>
+
+  </div>
+</template>

package/components/Admin/Header.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string
+}>()
+
+const sidebar = inject('spark:sidebar', null) as any
+</script>
+
+<template>
+  <header class="sticky top-0 z-40 bg-card border-b border-card-line px-4 lg:px-6 h-14 flex items-center gap-x-3">
+    <!-- Hamburger mobile -->
+    <button type="button"
+      class="lg:hidden size-8 flex items-center justify-center text-muted-foreground hover:text-foreground"
+      @click="sidebar?.open()">
+      <svg class="size-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+      </svg>
+    </button>
+
+    <!-- Left slot -->
+    <div class="flex-1 flex items-center gap-x-3">
+      <slot name="left">
+        <span v-if="title" class="text-sm font-medium text-foreground">{{ title }}</span>
+      </slot>
+    </div>
+
+    <!-- Right slot -->
+    <div class="flex items-center gap-x-2">
+      <slot name="right" />
+    </div>
+  </header>
+</template>

package/components/Admin/Page.vue

@@ -0,0 +1,65 @@
+<script setup>
+import * as TablerIcons from '@tabler/icons-vue'
+
+const props = defineProps({
+  title:       { type: String,  default: '' },
+  description: { type: String,  default: '' },
+  icon:        { type: String,  default: '' },
+  color:       { type: String,  default: 'slate' },
+})
+
+const slots = useSlots()
+
+const iconComponent = computed(() => props.icon ? TablerIcons[props.icon] ?? null : null)
+
+const iconColorClass = computed(() => ({
+  slate:  'bg-surface text-muted-foreground-1',
+  blue:   'bg-blue-100   dark:bg-blue-900/30  text-blue-600   dark:text-blue-400',
+  green:  'bg-green-100  dark:bg-green-900/30 text-green-600  dark:text-green-400',
+  amber:  'bg-amber-100  dark:bg-amber-900/30 text-amber-600  dark:text-amber-400',
+  red:    'bg-red-100    dark:bg-red-900/30   text-red-600    dark:text-red-400',
+  purple: 'bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400',
+  rose:   'bg-rose-100   dark:bg-rose-900/30  text-rose-600   dark:text-rose-400',
+  gray:   'bg-surface text-muted-foreground-1',
+}[props.color] ?? 'bg-surface text-muted-foreground-1'))
+</script>
+
+<template>
+  <div class="relative space-y-2">
+
+    <!-- Page header card -->
+    <div v-if="title" class="sticky top-0 z-20 -mx-3 -mt-3 px-3 pt-3 bg-background-1">
+    <div v-if="$slots.breadcrumb" class="flex items-center gap-x-1 px-1 pt-2 pb-0.5">
+      <slot name="breadcrumb" />
+    </div>
+    <div class="flex items-center justify-between bg-card border border-card-line rounded-2xl shadow-sm px-4 py-3">
+      <div class="flex items-center gap-x-4 min-w-0">
+        <div v-if="iconComponent" class="shrink-0 size-10 rounded-xl flex items-center justify-center border border-current/15" :class="iconColorClass">
+          <component :is="iconComponent" class="size-5" stroke="1.5" />
+        </div>
+        <div class="min-w-0">
+          <div class="flex items-baseline gap-x-2 flex-wrap">
+            <h1 class="text-lg font-semibold text-foreground">{{ title }}</h1>
+            <template v-if="description">
+              <span class="size-1 rounded-full bg-surface-1 shrink-0 self-center hidden sm:block" />
+              <p class="text-sm text-muted-foreground">{{ description }}</p>
+            </template>
+          </div>
+        </div>
+      </div>
+      <div v-if="$slots.actions" class="flex items-center gap-x-2 shrink-0 ms-4">
+        <slot name="actions" />
+      </div>
+    </div>
+    </div>
+
+    <!-- Tabs -->
+    <div v-if="$slots.tabs">
+      <slot name="tabs" :color="color" />
+    </div>
+
+    <!-- Page content -->
+    <div class="relative"><slot /></div>
+
+  </div>
+</template>

package/components/Admin/PageHeader.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  description?: string
+}>()
+</script>
+
+<template>
+  <div class="sticky top-0 z-20 -mx-3 -mt-3 px-3 pt-3 bg-background-1">
+  <div class="flex items-center justify-between bg-card border border-card-line rounded-2xl shadow-sm px-4 py-3">
+    <div class="flex items-center gap-x-4">
+      <slot name="icon" />
+      <div>
+        <div class="flex items-baseline gap-x-2">
+          <h1 class="text-lg font-semibold text-foreground">{{ title }}</h1>
+          <template v-if="description">
+            <span class="size-1 rounded-full bg-surface-1 shrink-0 self-center"></span>
+            <p class="text-sm text-muted-foreground">{{ description }}</p>
+          </template>
+        </div>
+        <div v-if="$slots.breadcrumb" class="flex items-center gap-x-1 mt-0.5">
+          <slot name="breadcrumb" />
+        </div>
+      </div>
+    </div>
+    <div class="flex items-center gap-x-2">
+      <slot name="actions" />
+    </div>
+  </div>
+  </div>
+</template>

package/components/App/Button.vue

@@ -0,0 +1,59 @@
+<script setup>
+const props = defineProps({
+  text: { type: String, required: true },
+  size: { type: String, default: "sm", validator: (v) => ["xs","sm","md","lg"].includes(v) },
+  class: { type: String, default: "" },
+  iconClass: { type: String, default: "" },
+  textClass: { type: String, default: "" },
+  outline: { type: Boolean, default: false },
+  severity: { type: String, default: "secondary", validator: (v) => ["primary","secondary","success","danger","warning","info"].includes(v) },
+  icon: { type: [Object, Function], default: null },
+  iconPosition: { type: String, default: "left", validator: (v) => ["left","right"].includes(v) },
+  loading: { type: Boolean, default: false },
+  loadingText: { type: String, default: "Cargando..." },
+  disabled: { type: Boolean, default: false },
+  type: { type: String, default: "button", validator: (v) => ["button","link"].includes(v) },
+  link: { type: String, default: "" },
+  variant: { type: String, default: "default", validator: (v) => ["default","dropdown"].includes(v) },
+})
+
+const sizeClasses = computed(() => ({ xs:"py-0.5 px-2 text-xs font-light", sm:"py-1 px-2.5 text-sm font-light", md:"py-2.5 px-3 text-sm font-light", lg:"py-3 px-4 text-base font-light" }[props.size] || "py-1 px-2.5 text-sm font-light"))
+const iconSizeClasses = computed(() => ({ xs:"size-2", sm:"size-3", md:"size-4", lg:"size-5" }[props.size] || "size-3"))
+
+const severityClasses = computed(() => {
+  if (props.variant === "dropdown") {
+    const d = { primary: "text-primary hover:bg-primary/10", secondary:"text-foreground hover:bg-muted-hover", success:"text-emerald-600 hover:bg-emerald-50 dark:text-emerald-400 dark:hover:bg-emerald-900/20", danger:"text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20", warning:"text-yellow-600 hover:bg-yellow-50 dark:text-yellow-400 dark:hover:bg-yellow-900/20", info:"text-cyan-600 hover:bg-cyan-50 dark:text-cyan-400 dark:hover:bg-cyan-900/20" }
+    return d[props.severity] || d.secondary
+  }
+  const base = "rounded-lg border transition-colors"
+  const v = { primary: "border-primary bg-primary/10 text-primary hover:bg-primary/20 dark:bg-primary/15 dark:hover:bg-primary/25", secondary:"border-slate-300 bg-slate-50 text-slate-700 hover:bg-muted-hover dark:border-card-line dark:bg-card dark:text-muted-foreground-1 dark:hover:bg-muted-hover", success:"border-emerald-600 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-500 dark:bg-emerald-900/20 dark:text-emerald-300 dark:hover:bg-emerald-900/35", danger:"border-red-600 bg-red-50 text-red-700 hover:bg-red-100 dark:border-red-500 dark:bg-red-900/20 dark:text-red-300 dark:hover:bg-red-900/35", warning:"border-yellow-600 bg-yellow-50 text-yellow-700 hover:bg-yellow-100 dark:border-yellow-500 dark:bg-yellow-900/20 dark:text-yellow-300 dark:hover:bg-yellow-900/35", info:"border-cyan-600 bg-cyan-50 text-cyan-700 hover:bg-cyan-100 dark:border-cyan-500 dark:bg-cyan-900/20 dark:text-cyan-300 dark:hover:bg-cyan-900/35" }
+  return `${base} ${v[props.severity] || v.primary}`
+})
+
+const buttonClasses = computed(() => {
+  if (props.variant === "dropdown") {
+    const dis = props.type === "button" ? "disabled:opacity-50 disabled:pointer-events-none" : isDisabled.value ? "opacity-50 pointer-events-none" : ""
+    return `w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm transition-colors text-left ${severityClasses.value} ${dis} focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/40 dark:focus:ring-offset-gray-800 ${props.class}`
+  }
+  const dis = props.type === "button" ? "disabled:opacity-50 disabled:pointer-events-none" : isDisabled.value ? "opacity-50 pointer-events-none" : ""
+  const cursor = props.type === "link" ? "cursor-pointer" : ""
+  return `${sizeClasses.value} ${severityClasses.value} ${dis} focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-primary/40 dark:focus:ring-offset-gray-800 ${cursor} inline-flex justify-center items-center gap-x-2 whitespace-nowrap ${props.class}`
+})
+
+const displayText = computed(() => props.loading ? props.loadingText : props.text)
+const isDisabled = computed(() => props.disabled || props.loading)
+</script>
+<template>
+  <NuxtLink v-if="type === 'link'" :to="link" :class="buttonClasses">
+    <div v-if="loading" :class="`animate-spin border-[2.5px] border-t-transparent rounded-full ${iconSizeClasses}`" :style="`border-color: currentColor; border-top-color: transparent`" role="status" />
+    <component v-else-if="icon && iconPosition === 'left'" :is="icon" :class="variant === 'dropdown' ? 'size-4 shrink-0' : `${iconSizeClasses} ${iconClass}`" />
+    <slot><span :class="textClass">{{ displayText }}</span></slot>
+    <component v-if="!loading && icon && iconPosition === 'right'" :is="icon" :class="variant === 'dropdown' ? 'size-4 shrink-0' : `${iconSizeClasses} ${iconClass}`" />
+  </NuxtLink>
+  <button v-else :disabled="isDisabled" :class="buttonClasses" type="button">
+    <div v-if="loading" :class="`animate-spin border-[2.5px] border-t-transparent rounded-full ${iconSizeClasses}`" :style="`border-color: currentColor; border-top-color: transparent`" role="status" />
+    <component v-else-if="icon && iconPosition === 'left'" :is="icon" :class="variant === 'dropdown' ? 'size-4 shrink-0' : `${iconSizeClasses} ${iconClass}`" />
+    <slot><span :class="textClass">{{ displayText }}</span></slot>
+    <component v-if="!loading && icon && iconPosition === 'right'" :is="icon" :class="variant === 'dropdown' ? 'size-4 shrink-0' : `${iconSizeClasses} ${iconClass}`" />
+  </button>
+</template>

package/components/App/DevEnvironmentBar.vue

@@ -0,0 +1,43 @@
+<script setup>
+const props = defineProps({ sidebar: { type: Boolean, default: false } })
+
+const config = useRuntimeConfig()
+const appEnv = config.public.appEnv
+
+const isVisible = computed(() => appEnv && appEnv !== 'production')
+
+useHead({
+  htmlAttrs: { class: (!props.sidebar && isVisible.value) ? 'has-env-bar' : '' },
+  style: [{ children: (!props.sidebar && isVisible.value) ? ':root { --env-bar-height: 1.5rem; }' : ':root { --env-bar-height: 0px; }' }],
+})
+
+const envColor = computed(() => {
+  const env = appEnv.toLowerCase()
+  if (env === 'staging') return props.sidebar ? 'bg-amber-50 text-amber-600 border border-amber-200 dark:bg-amber-500/10 dark:text-amber-400 dark:border-amber-500/30' : 'bg-amber-500 text-white'
+  if (env === 'local' || env === 'dev') return props.sidebar ? 'bg-blue-50 text-blue-600 border border-blue-200 dark:bg-blue-500/10 dark:text-blue-400 dark:border-blue-500/30' : 'bg-blue-600 text-white'
+  return props.sidebar ? 'bg-red-50 text-red-600 border border-red-200 dark:bg-red-500/10 dark:text-red-400 dark:border-red-500/30' : 'bg-red-600 text-white'
+})
+</script>
+
+<template>
+  <!-- Sidebar inline variant -->
+  <div v-if="isVisible && sidebar"
+    :class="['w-full rounded-lg px-3 py-1.5 flex items-center justify-center gap-x-1.5 select-none', envColor]"
+  >
+    <span class="text-[9px] font-black tracking-widest uppercase">ENTORNO: {{ appEnv }}</span>
+  </div>
+
+  <!-- Full-width fixed bar -->
+  <div v-else-if="isVisible && !sidebar"
+    class="fixed bottom-0 left-0 right-0 z-[100] h-6 overflow-hidden select-none pointer-events-none"
+  >
+    <div
+      class="flex items-center justify-center w-full h-full text-[10px] font-bold tracking-widest uppercase opacity-90 shadow-lg border-t border-white/10"
+      :class="envColor"
+    >
+      <span class="mr-2">━━━━━</span>
+      ENTORNO: {{ appEnv }}
+      <span class="ml-2">━━━━━</span>
+    </div>
+  </div>
+</template>