@innertia-solutions/innertia-nuxt 0.1.1

package/components/TableExportable.vue

@@ -0,0 +1,172 @@
+<script setup>
+import {
+  IconFileTypeXls,
+  IconFileTypeCsv,
+  IconFileTypePdf,
+  IconCodeDots,
+  IconDownload,
+} from '@tabler/icons-vue'
+
+const props = defineProps({
+  tableRef: { type: Object, default: null },
+  name:     { type: String, default: 'export' },
+  columns:  { type: Array,  default: () => [] },
+})
+
+const isOpen          = ref(false)
+const format          = ref('xlsx')
+const filename        = ref(props.name)
+const selectedColumns = ref([])
+
+watch(() => props.columns, (cols) => { selectedColumns.value = cols.map(c => c.key) }, { immediate: true })
+watch(() => props.name, (v) => { filename.value = v })
+
+const toggleColumn = (key) => {
+  const idx = selectedColumns.value.indexOf(key)
+  if (idx >= 0) selectedColumns.value.splice(idx, 1)
+  else selectedColumns.value.push(key)
+}
+const allSelected = computed(() => selectedColumns.value.length === props.columns.length)
+const toggleAll   = () => {
+  selectedColumns.value = allSelected.value ? [] : props.columns.map(c => c.key)
+}
+
+const formats = [
+  { value: 'xlsx', label: 'Excel' },
+  { value: 'csv',  label: 'CSV'   },
+  { value: 'pdf',  label: 'PDF'   },
+  { value: 'json', label: 'JSON'  },
+]
+
+const doExport = () => {
+  props.tableRef?.exportTable(format.value, true, true, selectedColumns.value)
+  isOpen.value = false
+}
+
+const panelRef   = ref(null)
+const triggerRef = ref(null)
+
+const onOutsideClick = (e) => {
+  if (
+    panelRef.value   && !panelRef.value.contains(e.target) &&
+    triggerRef.value && !triggerRef.value.contains(e.target)
+  ) {
+    isOpen.value = false
+  }
+}
+
+watch(isOpen, (v) => {
+  if (v) document.addEventListener('mousedown', onOutsideClick)
+  else   document.removeEventListener('mousedown', onOutsideClick)
+})
+
+defineExpose({ open: () => { isOpen.value = true } })
+</script>
+
+<template>
+  <div class="relative">
+
+    <!-- Trigger — icon-only, igual al botón de columnas -->
+    <button
+      ref="triggerRef"
+      type="button"
+      @click="isOpen = !isOpen"
+      title="Exportar"
+      :class="[
+        'p-1.5 inline-flex items-center justify-center rounded-lg border transition-colors',
+        isOpen
+          ? 'border-primary/40 bg-primary/10 text-primary'
+          : 'border-transparent text-muted-foreground hover:border-card-line hover:bg-muted-hover hover:text-foreground'
+      ]"
+    >
+      <IconDownload class="size-4" stroke="1.5" />
+    </button>
+
+    <Transition
+      enter-active-class="transition ease-out duration-150"
+      enter-from-class="opacity-0 translate-y-1 scale-95"
+      enter-to-class="opacity-100 translate-y-0 scale-100"
+      leave-active-class="transition ease-in duration-100"
+      leave-from-class="opacity-100 translate-y-0 scale-100"
+      leave-to-class="opacity-0 translate-y-1 scale-95"
+    >
+      <div
+        v-if="isOpen"
+        ref="panelRef"
+        class="absolute top-full right-0 z-50 mt-1.5 bg-dropdown border border-dropdown-line rounded-xl shadow-2xl p-3 w-64"
+      >
+        <p class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest mb-3 px-1">Exportar</p>
+
+        <!-- Format -->
+        <div class="grid grid-cols-4 gap-1.5 mb-3">
+          <button
+            v-for="f in formats"
+            :key="f.value"
+            type="button"
+            @click="format = f.value"
+            :class="[
+              'flex flex-col items-center gap-1 py-2 rounded-lg border text-xs font-medium transition-colors',
+              format === f.value
+                ? 'border-primary/40 bg-primary/10 text-primary'
+                : 'border-card-line text-muted-foreground-1 hover:bg-muted-hover'
+            ]"
+          >
+            <IconFileTypeXls v-if="f.value === 'xlsx'" class="size-4" stroke="1.5" />
+            <IconFileTypeCsv v-else-if="f.value === 'csv'" class="size-4" stroke="1.5" />
+            <IconFileTypePdf v-else-if="f.value === 'pdf'" class="size-4" stroke="1.5" />
+            <IconCodeDots    v-else                         class="size-4" stroke="1.5" />
+            {{ f.label }}
+          </button>
+        </div>
+
+        <!-- Filename -->
+        <div class="mb-3 px-1">
+          <label class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest block mb-1.5">Archivo</label>
+          <div class="flex items-center gap-1.5">
+            <input
+              v-model="filename"
+              type="text"
+              class="flex-1 rounded-lg border border-card-line bg-card text-foreground py-1.5 px-2.5 text-xs focus:outline-none focus:ring-1 focus:ring-primary/50 min-w-0"
+            />
+            <span class="text-xs text-muted-foreground shrink-0">.{{ format }}</span>
+          </div>
+        </div>
+
+        <!-- Columns -->
+        <div v-if="columns.length > 0" class="mb-3 px-1">
+          <div class="flex items-center justify-between mb-1.5">
+            <label class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">Columnas</label>
+            <button type="button" @click="toggleAll" class="text-[10px] text-primary hover:underline">
+              {{ allSelected ? 'Ninguna' : 'Todas' }}
+            </button>
+          </div>
+          <div class="max-h-32 overflow-y-auto space-y-0.5">
+            <label
+              v-for="col in columns"
+              :key="col.key"
+              class="flex items-center gap-2 py-1 px-1.5 rounded-lg hover:bg-muted-hover cursor-pointer"
+            >
+              <input
+                type="checkbox"
+                :checked="selectedColumns.includes(col.key)"
+                @change="toggleColumn(col.key)"
+                class="rounded border-card-line bg-surface shrink-0 cursor-pointer text-primary"
+              />
+              <span class="text-xs text-foreground truncate">{{ col.label }}</span>
+            </label>
+          </div>
+        </div>
+
+        <!-- Export button -->
+        <button
+          type="button"
+          @click="doExport"
+          class="w-full py-1.5 px-3 rounded-lg bg-primary hover:bg-primary/90 text-white text-sm font-medium transition-colors inline-flex items-center justify-center gap-2"
+        >
+          <IconDownload class="size-4" stroke="1.5" />
+          Exportar
+        </button>
+      </div>
+    </Transition>
+  </div>
+</template>

package/components/TableFilter.vue

@@ -0,0 +1,93 @@
+<script setup>
+const props = defineProps({
+  modelValue: { type: Object, default: () => ({}) },
+  columns:    { type: Array,  required: true },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const filterableColumns = computed(() => props.columns.filter(c => c.filterType))
+
+const localFilters = ref({ ...props.modelValue })
+
+watch(() => props.modelValue, (v) => {
+  localFilters.value = { ...v }
+}, { deep: true })
+
+const updateFilter = (key, value) => {
+  localFilters.value[key] = value || null
+  emit('update:modelValue', { ...localFilters.value })
+}
+
+const clearAll = () => {
+  localFilters.value = {}
+  emit('update:modelValue', {})
+}
+
+const activeCount = computed(() =>
+  Object.values(localFilters.value).filter(v => v !== null && v !== undefined && v !== '').length
+)
+</script>
+
+<template>
+  <div class="space-y-3">
+    <template v-for="col in filterableColumns" :key="col.key">
+
+      <!-- text -->
+      <div v-if="col.filterType === 'text'">
+        <label class="block text-xs font-medium text-muted-foreground mb-1">{{ col.label }}</label>
+        <input
+          type="text"
+          :value="localFilters[col.key] ?? ''"
+          @input="updateFilter(col.key, $event.target.value)"
+          :placeholder="`Filtrar ${col.label.toLowerCase()}...`"
+          class="w-full rounded-lg border border-card-line bg-card text-foreground py-1.5 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+        />
+      </div>
+
+      <!-- select -->
+      <div v-else-if="col.filterType === 'select'">
+        <Forms.Select
+          :model-value="localFilters[col.key] ?? ''"
+          @update:model-value="updateFilter(col.key, $event)"
+          :options="[{ value: '', label: 'Todos' }, ...(col.filterOptions ?? [])]"
+          :label="col.label"
+        />
+      </div>
+
+      <!-- daterange -->
+      <div v-else-if="col.filterType === 'daterange'">
+        <label class="block text-xs font-medium text-muted-foreground mb-1">{{ col.label }}</label>
+        <div class="flex items-center gap-1.5">
+          <input
+            type="date"
+            :value="localFilters[col.key]?.from ?? ''"
+            @change="updateFilter(col.key, { ...localFilters[col.key], from: $event.target.value || null })"
+            class="flex-1 rounded-lg border border-card-line bg-card text-foreground py-1.5 px-2 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+          />
+          <span class="text-slate-400 text-xs shrink-0">—</span>
+          <input
+            type="date"
+            :value="localFilters[col.key]?.to ?? ''"
+            @change="updateFilter(col.key, { ...localFilters[col.key], to: $event.target.value || null })"
+            class="flex-1 rounded-lg border border-card-line bg-card text-foreground py-1.5 px-2 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+          />
+        </div>
+      </div>
+
+    </template>
+
+    <div class="pt-2 border-t border-card-line">
+      <button
+        v-if="activeCount > 0"
+        type="button"
+        @click="clearAll"
+        class="w-full py-1.5 px-3 text-sm text-rose-600 dark:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-500/10 rounded-lg transition-colors flex items-center justify-center gap-1.5"
+      >
+        <svg class="size-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+        Limpiar filtros
+      </button>
+      <p v-else class="text-xs text-center text-muted-foreground py-0.5">Sin filtros activos</p>
+    </div>
+  </div>
+</template>

package/components/Toast/Alert.vue

@@ -0,0 +1,113 @@
+<template>
+  <div
+    class="max-w-xs relative bg-card border border-card-line rounded-xl shadow-lg p-4 pr-10 flex items-start overflow-hidden"
+    :class="{
+      'border-green-200': toast.severity === 'success',
+      'border-red-200': toast.severity === 'danger',
+      'border-yellow-200': toast.severity === 'warning',
+      'border-blue-200': toast.severity === 'info',
+    }"
+    role="alert"
+  >
+    <div class="mr-3 mt-1">
+      <i v-if="toast.icon" :class="toast.icon + ' text-gray-400 text-xl'" />
+    </div>
+    <div class="flex-1 mt-1">
+      <h3 v-if="toast.title" class="font-semibold text-sm text-gray-800">
+        {{ toast.title }}
+      </h3>
+      <div class="text-sm dark:text-white text-gray-600" v-html="toast.message"></div>
+    </div>
+    <button
+      class="ml-3 text-gray-400 hover:text-gray-700 absolute top-2 right-2"
+      @click="$emit('close')"
+    >
+      <span class="sr-only">Cerrar</span>
+      <svg
+        class="size-4"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M18 6 6 18" />
+        <path d="m6 6 12 12" />
+      </svg>
+    </button>
+    
+    <!-- Barra de progreso temporal -->
+    <div 
+      v-if="toast.duration && toast.duration > 0"
+      class="absolute bottom-0 left-0 w-full h-1 bg-card-line"
+    >
+      <div
+        class="h-full bg-gradient-to-r"
+        :class="{
+          'from-green-400 to-green-600': toast.severity === 'success',
+          'from-red-400 to-red-600': toast.severity === 'danger',
+          'from-yellow-400 to-yellow-600': toast.severity === 'warning',
+          'from-blue-400 to-blue-600': toast.severity === 'info',
+        }"
+        :style="{ width: progressWidth + '%' }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps({ toast: Object });
+
+const progressWidth = ref(100)
+const startTime = ref(null)
+let animationFrame = null
+
+// Computed para detectar cambios en duration
+const duration = computed(() => props.toast?.duration || 0)
+
+// Función para actualizar el progreso
+const updateProgress = () => {
+  if (!startTime.value || duration.value <= 0) {
+    progressWidth.value = 100
+    return
+  }
+
+  const elapsed = Date.now() - startTime.value
+  const remaining = Math.max(0, duration.value - elapsed)
+  progressWidth.value = (remaining / duration.value) * 100
+
+  if (remaining > 0) {
+    animationFrame = requestAnimationFrame(updateProgress)
+  }
+}
+
+// Watch para reiniciar cuando cambie el duration
+watch(duration, (newDuration) => {
+  if (animationFrame) {
+    cancelAnimationFrame(animationFrame)
+  }
+  
+  if (newDuration && newDuration > 0) {
+    startTime.value = Date.now()
+    updateProgress()
+  } else {
+    progressWidth.value = 100
+  }
+}, { immediate: true })
+
+onMounted(() => {
+  if (duration.value > 0) {
+    startTime.value = Date.now()
+    updateProgress()
+  }
+})
+
+onUnmounted(() => {
+  if (animationFrame) {
+    cancelAnimationFrame(animationFrame)
+  }
+})
+</script>

package/components/Toast/Container.vue

@@ -0,0 +1,34 @@
+<script setup>
+const toastStore = useToastStore()
+
+const positions = [
+  'top-left', 'top-center', 'top-right',
+  'bottom-left', 'bottom-center', 'bottom-right',
+]
+
+const positionClass = {
+  'top-left':      'top-4 left-4',
+  'top-center':    'top-4 left-1/2 -translate-x-1/2',
+  'top-right':     'top-4 right-4',
+  'bottom-left':   'bottom-4 left-4',
+  'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',
+  'bottom-right':  'bottom-4 right-4',
+}
+</script>
+
+<template>
+  <template v-for="pos in positions" :key="pos">
+    <div
+      v-if="toastStore.toasts[pos]?.length"
+      class="fixed z-50 flex flex-col gap-2"
+      :class="positionClass[pos]"
+    >
+      <ToastAlert
+        v-for="toast in toastStore.toasts[pos]"
+        :key="toast.id"
+        :toast="toast"
+        @close="toastStore.remove(toast.id)"
+      />
+    </div>
+  </template>
+</template>

package/components/Toast/Notification.vue

@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="max-w-xs bg-white border border-gray-200 rounded-xl shadow-lg p-4 flex"
+    role="alert"
+  >
+    <div class="shrink-0">
+      <svg
+        class="size-5 text-gray-600 mt-1"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+        <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+      </svg>
+    </div>
+    <div class="ms-4">
+      <h3 v-if="toast.title" class="text-gray-800 font-semibold">
+        {{ toast.title }}
+      </h3>
+      <div class="mt-1 text-sm text-gray-600" v-html="toast.message"></div>
+      <div v-if="toast.actions" class="mt-4">
+        <div class="flex gap-x-3">
+          <button
+            v-for="(action, i) in toast.actions"
+            :key="i"
+            @click="action.onClick"
+            class="text-blue-600 decoration-2 hover:underline font-medium text-sm focus:outline-hidden focus:underline"
+          >
+            {{ action.label }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+defineProps({ toast: Object });
+</script>

package/components/Toast/Process.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    class="max-w-xs relative bg-white border border-gray-200 rounded-xl shadow-lg"
+    role="alert"
+  >
+    <div class="flex gap-x-3 p-4">
+      <div class="shrink-0">
+        <span
+          class="m-1 inline-flex justify-center items-center size-8 rounded-full bg-gray-100 text-gray-800"
+        >
+          <svg
+            class="shrink-0 size-4"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path
+              d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"
+            />
+            <path d="M12 12v9" />
+            <path d="m16 16-4-4-4 4" />
+          </svg>
+        </span>
+        <button
+          class="absolute top-3 end-3 inline-flex shrink-0 justify-center items-center size-5 rounded-lg text-gray-800 opacity-50 hover:opacity-100 focus:outline-hidden focus:opacity-100"
+          @click="$emit('close')"
+          aria-label="Close"
+        >
+          <span class="sr-only">Close</span>
+          <svg
+            class="shrink-0 size-4"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M18 6 6 18" />
+            <path d="m6 6 12 12" />
+          </svg>
+        </button>
+      </div>
+      <div class="grow me-5">
+        <h3 v-if="toast.title" class="text-gray-800 font-medium text-sm">
+          {{ toast.title }}
+        </h3>
+        <div
+          v-if="toast.progress !== undefined"
+          class="mt-2 flex flex-col gap-x-3"
+        >
+          <span class="block mb-1.5 text-xs text-gray-500">{{
+            toast.progressLabel
+          }}</span>
+          <div
+            class="flex w-full h-1 bg-gray-200 rounded-full overflow-hidden"
+            role="progressbar"
+            :aria-valuenow="toast.progress"
+            aria-valuemin="0"
+            aria-valuemax="100"
+          >
+            <div
+              class="flex flex-col justify-center overflow-hidden bg-blue-600 text-xs text-white text-center whitespace-nowrap"
+              :style="{ width: toast.progress + '%' }"
+            ></div>
+          </div>
+        </div>
+        <div
+          v-else
+          class="mt-2 text-sm text-gray-600"
+          v-html="toast.message"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+defineProps({ toast: Object });
+</script>

package/composables/useApi.js

@@ -0,0 +1,95 @@
+// useRequestInterceptors auto-imported from nuxt-core
+// useAuthStore auto-imported from this package
+
+export function useApi() {
+  const config = useRuntimeConfig()
+  // On the server, use the private internal URL (e.g. http://api:80) because relative URLs
+  // don't resolve in Node.js. On the client, use the public apiBaseUrl (/api proxy).
+  const baseUrl = import.meta.server
+    ? (config.apiInternalUrl || config.public.apiBaseUrl || '/api')
+    : (config.public.apiBaseUrl || '/api')
+  const loginPath = config.public.loginPath || '/login'
+
+  const { run, add } = useRequestInterceptors()
+
+  function serializeParams(obj, prefix = '') {
+    const parts = []
+    for (const [key, val] of Object.entries(obj)) {
+      if (val === null || val === undefined) continue
+      const fullKey = prefix ? `${prefix}[${key}]` : key
+      if (Array.isArray(val)) {
+        val.forEach((item, i) => {
+          if (item !== null && typeof item === 'object') {
+            parts.push(...serializeParams(item, `${fullKey}[${i}]`).split('&').filter(Boolean))
+          } else {
+            parts.push(`${encodeURIComponent(`${fullKey}[${i}]`)}=${encodeURIComponent(item)}`)
+          }
+        })
+      } else if (typeof val === 'object') {
+        parts.push(serializeParams(val, fullKey))
+      } else {
+        parts.push(`${encodeURIComponent(fullKey)}=${encodeURIComponent(val)}`)
+      }
+    }
+    return parts.join('&')
+  }
+
+  async function makeRequest(method, path, body = null, options = {}) {
+    const headers = {
+      'Content-Type': 'application/json',
+      'Accept': 'application/json',
+      'X-Innertia-Source': import.meta.server ? 'ssr' : 'client',
+    }
+    run(headers, options)
+
+    const cleanPath = path.startsWith('/') ? path.slice(1) : path
+    let url = `${baseUrl}/${cleanPath}`
+
+    if (options.params && Object.keys(options.params).length) {
+      const qs = serializeParams(options.params)
+      if (qs) url += '?' + qs
+    }
+
+    const fetchOptions = { method, headers }
+    if (body !== null) fetchOptions.body = JSON.stringify(body)
+
+    const response = await fetch(url, fetchOptions)
+
+    if (response.status === 401) {
+      const authStore = useAuthStore()
+      authStore.logout()
+      await navigateTo(loginPath)
+      return null
+    }
+
+    const contentType = response.headers.get('content-type') ?? ''
+    const data = contentType.includes('application/json') ? await response.json() : await response.text()
+
+    if (!response.ok) {
+      const err = new Error(`API error ${response.status}`)
+      err.status = response.status
+      err.data = data
+      throw err
+    }
+
+    return data
+  }
+
+  const get    = (path, options = {}) => makeRequest('GET',    path, null, options)
+  const post   = (path, body, options = {}) => makeRequest('POST',   path, body, options)
+  const put    = (path, body, options = {}) => makeRequest('PUT',    path, body, options)
+  const patch  = (path, body, options = {}) => makeRequest('PATCH',  path, body, options)
+  const del    = (path, options = {}) => makeRequest('DELETE', path, null, options)
+
+  // *Sync aliases — same methods, named for clarity in call sites
+  const getSync    = get
+  const postSync   = post
+  const putSync    = put
+  const patchSync  = patch
+  const deleteSync = del
+
+  /** Shortcut to add an interceptor from a composable or plugin */
+  const addInterceptor = (fn) => add(fn)
+
+  return { get, post, put, patch, delete: del, getSync, postSync, putSync, patchSync, deleteSync, addInterceptor }
+}

package/composables/useApp.ts

@@ -0,0 +1,46 @@
+import type { AppDefinition } from '../app.config'
+
+/**
+ * Devuelve metadata del app actual + listas filtradas por permisos del usuario.
+ * Lee la declaración de apps desde `appConfig.innertia.apps` (configurable por
+ * el producto en su `nuxt.config.ts`).
+ *
+ * Uso típico:
+ *   const { current, accessible } = useApp()
+ *   <h1>Estás en: {{ current?.label }}</h1>
+ */
+export function useApp() {
+  const route = useRoute()
+  const authStore = useAuthStore()
+  const appConfig = useAppConfig()
+
+  /** Diccionario de apps declarados por el producto. */
+  const apps = computed<Record<string, AppDefinition>>(() =>
+    (appConfig.innertia?.apps ?? {}) as Record<string, AppDefinition>
+  )
+
+  /** Todos los apps declarados, en orden de declaración. */
+  const all = computed<AppDefinition[]>(() => Object.values(apps.value))
+
+  /** App actual, determinado por el prefijo de la ruta. `null` si la URL no cae en ningún app. */
+  const current = computed<AppDefinition | null>(() => {
+    return all.value.find(app =>
+      route.path === app.path || route.path.startsWith(app.path + '/')
+    ) ?? null
+  })
+
+  /** Apps a los que el usuario autenticado tiene acceso (filtrado por `availableContexts`). */
+  const accessible = computed<AppDefinition[]>(() => {
+    const ctxs = (authStore.availableContexts ?? []) as string[]
+    return all.value.filter(app => ctxs.includes(app.context))
+  })
+
+  /** Helper: ¿el usuario puede acceder a este app? */
+  function canAccess(appKey: string): boolean {
+    const app = apps.value[appKey]
+    if (!app) return false
+    return ((authStore.availableContexts ?? []) as string[]).includes(app.context)
+  }
+
+  return { current, all, accessible, canAccess, apps }
+}