@innertia-solutions/innertia-nuxt 0.1.10 → 0.1.12

package/components/Forms/DatePicker.vue

@@ -180,76 +180,101 @@ const clear = () => {
 <template>
   <div class="relative w-full">
     <div class="relative group">
-      <div class="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-3.5">
-        <IconCalendar class="size-4 text-gray-400 group-focus-within:text-blue-500 transition-colors" />
-      </div>
-
       <input
         ref="inputEl"
         type="text"
         :value="internalValue"
         :disabled="disabled"
         :placeholder="placeholder"
-        class="w-full py-2 ps-10 pe-10 border border-gray-300 rounded-lg text-sm dark:bg-card dark:border-card-line dark:text-white disabled:opacity-50 disabled:pointer-events-none cursor-pointer focus:border-blue-500 focus:ring-blue-500/20 outline-none transition-all block"
+        class="innertia-field pe-10 cursor-pointer"
         readonly
       />
 
-      <!-- Clear button -->
+      <!-- Clear button (cuando hay valor) o ícono calendario (cuando está vacío) — ambos a la derecha -->
       <button
         v-if="clearable && internalValue && !disabled"
         @click.stop="clear"
         type="button"
-        class="absolute inset-y-0 end-0 flex items-center z-20 pe-3 text-gray-400 hover:text-red-500 transition-colors focus:outline-none"
+        class="absolute inset-y-0 end-0 flex items-center z-20 pe-3 text-muted-foreground hover:text-destructive transition-colors focus:outline-none"
       >
         <IconX class="size-4" />
       </button>
+      <div
+        v-else
+        class="absolute inset-y-0 end-0 flex items-center pointer-events-none z-20 pe-3"
+      >
+        <IconCalendar class="size-4 text-muted-foreground-2 group-focus-within:text-primary transition-colors" />
+      </div>
     </div>
   </div>
 </template>
 
 <style>
 /*
-  Vanilla Calendar v3 compiles Tailwind classes directly into its themes.
-  We override the selected date and hover backgrounds for Light and Dark modes.
-*/
-
-/* LIGHT MODE OVERRIDES */
-[data-vc-theme=light] .vc-months__month[data-vc-months-month-selected],
-[data-vc-theme=light] .vc-years__year[data-vc-years-year-selected],
-[data-vc-theme=light] .vc-date[data-vc-date-selected=middle][data-vc-date-selected] .vc-date__btn,
-[data-vc-theme=light] .vc-date[data-vc-date-selected] .vc-date__btn {
-  background-color: #2563eb !important; /* blue-600 */
-  color: #ffffff !important;
+ * Vanilla Calendar v3 compila Tailwind directo en sus themes. Overridemos
+ * solo los acentos del brand color para que sigan los tokens del DS.
+ *
+ * Light y dark usan las mismas variables — `--color-primary` ya cambia
+ * automáticamente entre claro/oscuro a través de la cascada del tema.
+ *
+ * Las clases de selected / today / hover aplican tanto en
+ * `[data-vc-theme=light]` como `[data-vc-theme=dark]`.
+ */
+
+/* Día seleccionado / mes seleccionado / año seleccionado */
+.vc-months__month[data-vc-months-month-selected],
+.vc-years__year[data-vc-years-year-selected],
+.vc-date[data-vc-date-selected=middle][data-vc-date-selected] .vc-date__btn,
+.vc-date[data-vc-date-selected] .vc-date__btn {
+  background-color: var(--color-primary) !important;
+  color: var(--color-primary-foreground) !important;
+  border-radius: var(--radius-control) !important;
 }
 
-[data-vc-theme=light] .vc-months__month[data-vc-months-month-selected]:hover,
-[data-vc-theme=light] .vc-years__year[data-vc-years-year-selected]:hover,
-[data-vc-theme=light] .vc-date[data-vc-date-selected=middle][data-vc-date-selected] .vc-date__btn:hover,
-[data-vc-theme=light] .vc-date[data-vc-date-selected] .vc-date__btn:hover {
-  background-color: #1d4ed8 !important; /* blue-700 */
+.vc-months__month[data-vc-months-month-selected]:hover,
+.vc-years__year[data-vc-years-year-selected]:hover,
+.vc-date[data-vc-date-selected=middle][data-vc-date-selected] .vc-date__btn:hover,
+.vc-date[data-vc-date-selected] .vc-date__btn:hover {
+  background-color: var(--color-primary-hover) !important;
 }
 
-[data-vc-theme=light] .vc-date[data-vc-date-today] .vc-date__btn {
-  color: #2563eb !important;
+/* Hoy (sin seleccionar): color del texto en brand */
+.vc-date[data-vc-date-today] .vc-date__btn {
+  color: var(--color-primary) !important;
+  font-weight: 600;
 }
 
-/* DARK MODE OVERRIDES */
-[data-vc-theme=dark] .vc-months__month[data-vc-months-month-selected],
-[data-vc-theme=dark] .vc-years__year[data-vc-years-year-selected],
-[data-vc-theme=dark] .vc-date[data-vc-date-selected=middle][data-vc-date-selected] .vc-date__btn,
-[data-vc-theme=dark] .vc-date[data-vc-date-selected] .vc-date__btn {
-  background-color: #3b82f6 !important; /* blue-500 */
-  color: #ffffff !important;
+/* Hover de cualquier día (no seleccionado) */
+.vc-date:not([data-vc-date-selected]) .vc-date__btn:hover,
+.vc-months__month:not([data-vc-months-month-selected]):hover,
+.vc-years__year:not([data-vc-years-year-selected]):hover {
+  background-color: var(--color-muted-hover) !important;
+  border-radius: var(--radius-control) !important;
+}
+
+/* Días del mes anterior / siguiente — más opacos */
+.vc-date[data-vc-date-month=prev] .vc-date__btn,
+.vc-date[data-vc-date-month=next] .vc-date__btn {
+  color: var(--color-muted-foreground-2) !important;
+}
+
+/* Botones de navegación (mes anterior / siguiente) */
+.vc-arrow {
+  color: var(--color-foreground) !important;
+}
+.vc-arrow:hover {
+  background-color: var(--color-muted-hover) !important;
+  border-radius: var(--radius-control) !important;
 }
 
-[data-vc-theme=dark] .vc-months__month[data-vc-months-month-selected]:hover,
-[data-vc-theme=dark] .vc-years__year[data-vc-years-year-selected]:hover,
-[data-vc-theme=dark] .vc-date[data-vc-date-selected=middle][data-vc-date-selected] .vc-date__btn:hover,
-[data-vc-theme=dark] .vc-date[data-vc-date-selected] .vc-date__btn:hover {
-  background-color: #2563eb !important; /* blue-600 */
+/* Header del mes/año en el centro */
+.vc-month,
+.vc-year {
+  color: var(--color-foreground) !important;
 }
 
-[data-vc-theme=dark] .vc-date[data-vc-date-today] .vc-date__btn {
-  color: #3b82f6 !important;
+/* Nombres de los días (Lun, Mar, …) */
+.vc-week__day {
+  color: var(--color-muted-foreground) !important;
 }
 </style>

package/components/Forms/Input.vue

@@ -10,6 +10,7 @@ const props = defineProps<{
   label?: string
   hint?: string
   iconLeft?: object | Function | null
+  iconRight?: object | Function | null
   autocomplete?: string
   size?: 'sm' | 'md'
 }>()
@@ -24,7 +25,7 @@ const inputType = computed(() => {
 })
 
 const baseClasses = computed(() =>
-  `${props.size === 'sm' ? 'py-1.5' : 'py-2'} px-3 block w-full rounded-lg text-sm text-slate-800 border border-card-line focus:ring-0 focus:border-gray-400 focus:outline-none disabled:opacity-50 dark:bg-transparent dark:text-muted-foreground-1 transition-colors placeholder:text-muted-foreground dark:placeholder:text-muted-foreground`
+  `innertia-field${props.size === 'sm' ? ' innertia-field-sm' : ''}`
 )
 </script>
 
@@ -49,11 +50,16 @@ const baseClasses = computed(() =>
         :class="[
           baseClasses,
           iconLeft ? 'ps-9' : '',
-          type === 'password' ? 'pe-10' : '',
+          (iconRight || type === 'password') ? 'pe-10' : '',
           error ? '!border-red-400 dark:!border-red-500' : '',
         ]"
       />
 
+      <!-- Ícono derecho (no se renderiza si type=password — ahí va el toggle) -->
+      <div v-if="iconRight && type !== 'password'" class="absolute inset-y-0 end-0 flex items-center pe-3 pointer-events-none text-muted-foreground">
+        <component :is="iconRight" class="size-4" />
+      </div>
+
       <!-- Toggle contraseña -->
       <button
         v-if="type === 'password'"

package/components/Forms/Select.vue

@@ -16,24 +16,43 @@ const emit = defineEmits<{
 
 const selectRef = ref<HTMLSelectElement | null>(null)
 
-const reinitHsSelect = async () => {
+/**
+ * Init Preline HSSelect una sola vez después del mount.
+ * No destruimos ni re-inicializamos en cambios de options — para forzar
+ * un re-mount limpio, el consumer puede cambiar el `:key` del componente.
+ *
+ * Si Preline aún no está disponible (plugin carga async), esperamos.
+ */
+const initHsSelect = async () => {
   await nextTick()
   const el = selectRef.value
   if (!el) return
 
-  const instance = (window as any).HSSelect?.getInstance?.(el)
-  if (instance?.destroy) instance.destroy()
+  const tryInit = (attempts = 0) => {
+    const HSSelect = (window as any).HSSelect
+    if (!HSSelect) {
+      if (attempts < 20) {
+        // Re-intentar hasta 20 frames (~330ms) esperando que cargue el plugin
+        requestAnimationFrame(() => tryInit(attempts + 1))
+      }
+      return
+    }
 
-  new (window as any).HSSelect(el)
-}
+    // Evitar doble init si ya hay una instancia registrada
+    if (HSSelect.getInstance?.(el)) return
+
+    try {
+      new HSSelect(el)
+    } catch (e) {
+      console.warn('[FormsSelect] HSSelect init falló:', e)
+    }
+  }
 
-// Re-initialize when options change (async load)
-watch(() => props.options, async () => {
-  await reinitHsSelect()
-}, { deep: true })
+  tryInit()
+}
 
 onMounted(() => {
-  reinitHsSelect()
+  initHsSelect()
 })
 
 const handleChange = (e: Event) => {
@@ -53,7 +72,7 @@ const handleChange = (e: Event) => {
     <!-- Select (HSSelect) -->
     <ClientOnly>
       <template #fallback>
-        <div class="h-[38px] bg-surface animate-pulse rounded-lg" />
+        <div class="innertia-field bg-surface animate-pulse" />
       </template>
 
       <div :class="['relative', error ? 'select-error' : '']">
@@ -66,9 +85,9 @@ const handleChange = (e: Event) => {
           data-hs-select='{
             "placeholder": "Seleccionar...",
             "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
-            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 ps-4 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-card border border-card-line rounded-lg text-start text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:text-muted-foreground-1 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-blue-600",
-            "dropdownClasses": "mt-1 z-50 w-full max-h-72 p-1 space-y-0.5 bg-dropdown border border-dropdown-line rounded-lg overflow-hidden overflow-y-auto shadow-lg",
-            "optionClasses": "py-2 px-4 w-full text-sm text-foreground cursor-pointer hover:bg-muted-hover rounded-lg focus:outline-hidden focus:bg-muted-hover dark:bg-card",
+            "toggleClasses": "innertia-field hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 aria-expanded:!rounded-b-none aria-expanded:!border-b-transparent relative pe-9 flex gap-x-2 items-center text-nowrap cursor-pointer text-start",
+            "dropdownClasses": "-mt-px z-50 w-full max-h-72 py-1 bg-[color:var(--field-dropdown-bg)] border border-[color:var(--field-border)] rounded-b-control overflow-hidden overflow-y-auto shadow-lg",
+            "optionClasses": "py-2 px-3 w-full text-sm text-foreground cursor-pointer bg-transparent hover:bg-muted-hover focus:outline-hidden focus:bg-muted-hover",
             "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-blue-600 dark:text-blue-500\" 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\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>"
           }'
         >
@@ -84,17 +103,34 @@ const handleChange = (e: Event) => {
       </div>
     </ClientOnly>
 
-    <!-- Error -->
-    <p v-if="error" class="text-xs text-red-500 dark:text-red-400">{{ error }}</p>
+    <!-- Error message -->
+    <p v-if="error" class="text-xs text-red-500">{{ error }}</p>
 
     <!-- Hint -->
     <p v-else-if="hint" class="text-xs text-muted-foreground">{{ hint }}</p>
   </div>
 </template>
 
-<style scoped>
-/* Apply error border to the HSSelect toggle button when in error state */
-.select-error :deep(button[aria-expanded]) {
-  border-color: rgb(248 113 113) !important; /* red-400 */
+<style>
+/*
+ * Preline HSSelect: cuando el dropdown está abierto, el trigger pierde
+ * sus esquinas inferiores y el borde inferior se vuelve invisible para
+ * fusionarse visualmente con el dropdown panel.
+ *
+ * Estilos globales (sin scoped) porque el HSSelect inyecta DOM fuera
+ * del componente Vue (button generado, no del template).
+ */
+.hs-select [aria-expanded="true"].innertia-field {
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  border-bottom-color: transparent !important;
+}
+
+/* Pegar el dropdown al trigger eliminando cualquier offset/margen que
+ * Preline pueda inyectar. Target amplio: cualquier div con la clase
+ * `rounded-b-control` dentro del wrapper `.hs-select`. */
+.hs-select div[class*="rounded-b-control"] {
+  top: 100% !important;
+  margin-top: -1px !important;
 }
 </style>

package/components/Forms/SelectServer.vue

@@ -20,6 +20,8 @@ const props = defineProps({
   multiple: { type: Boolean, default: false },
   searchable: { type: Boolean, default: true },
   disabled: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+  name: { type: String, default: "" },
   clearable: { type: Boolean, default: false },
   searchPlaceholder: { type: String, default: "Buscar..." },
   minSearchLength: { type: Number, default: 0 },
@@ -336,23 +338,22 @@ const validationClasses = computed(() => {
 
 // Combined select classes
 const selectClasses = computed(() => {
-  let base, focus, disabled;
-
-  base =
-    "relative w-full rounded-lg border bg-card transition-colors cursor-pointer text-foreground";
-
-  if (props.multiple && props.tagsMode) {
-    base += " px-3 pe-8 min-h-[2.375rem] flex items-center flex-wrap text-nowrap";
-    focus = "focus:outline-none focus:border-gray-400";
-  } else {
-    focus = "focus:outline-none focus:ring-0 focus:border-gray-400";
-  }
-
-  disabled = props.disabled || props.loading ? "opacity-50 cursor-not-allowed" : "";
-
-  const sizeClass = props.multiple && props.tagsMode ? "" : sizeClasses.value;
-
-  return `${base} ${sizeClass} ${validationClasses.value} ${focus} ${disabled} ${props.class}`;
+  // Apariencia unificada con el resto de los fields del DS.
+  // En modo tags-multiple desactivamos la altura fija porque el control crece
+  // según la cantidad de chips seleccionados.
+  const base = props.multiple && props.tagsMode
+    ? "innertia-field relative cursor-pointer text-start !ps-3.5 !pe-9 flex items-center flex-wrap gap-2 text-nowrap !h-auto min-h-[var(--field-height)] py-2.5"
+    : "innertia-field relative cursor-pointer text-start pe-9 flex items-center gap-x-2";
+
+  // Cuando el dropdown está abierto, el trigger se "funde" visualmente con
+  // el panel: deja de redondear sus esquinas inferiores y queda como una sola pieza.
+  const openStyles = isOpen.value
+    ? "!rounded-b-none border-b-transparent"
+    : "";
+
+  const disabled = props.disabled || props.loading ? "opacity-50 cursor-not-allowed" : "";
+
+  return `${base} ${openStyles} ${validationClasses.value} ${disabled} ${props.class ?? ""}`;
 });
 
 // Filtered options — backend does the filtering, serverOptions IS the filteredOptions
@@ -403,8 +404,9 @@ const selectOption = (option) => {
   if (option.disabled) return;
 
   if (props.multiple) {
+    const target = getOptionValue(option);
     const index = selectedOptions.value.findIndex(
-      (opt) => opt.id === option.id
+      (opt) => getOptionValue(opt) === target
     );
     if (index > -1) {
       selectedOptions.value.splice(index, 1);
@@ -428,7 +430,8 @@ const selectOption = (option) => {
 
 const removeTag = (option) => {
   if (props.disabled) return;
-  const index = selectedOptions.value.findIndex((opt) => opt.id === option.id);
+  const target = getOptionValue(option);
+  const index = selectedOptions.value.findIndex((opt) => getOptionValue(opt) === target);
   if (index > -1) {
     selectedOptions.value.splice(index, 1);
     localValue.value = selectedOptions.value.map((opt) => getOptionValue(opt));
@@ -443,7 +446,8 @@ const clearSelection = () => {
 };
 
 const isOptionSelected = (option) => {
-  return selectedOptions.value.some((opt) => opt.id === option.id);
+  const target = getOptionValue(option);
+  return selectedOptions.value.some((opt) => getOptionValue(opt) === target);
 };
 
 // Keyboard navigation
@@ -524,27 +528,28 @@ onMounted(() => {
       <!-- Selected values display -->
       <div v-else class="flex items-center justify-between w-full">
         <!-- Tags mode for multiple selection -->
-        <div v-if="multiple && tagsMode && selectedOptions.length" class="flex flex-wrap items-center gap-1 flex-1">
+        <div v-if="multiple && tagsMode && selectedOptions.length" class="flex flex-wrap items-center gap-1.5 flex-1">
           <div v-for="option in selectedOptions" :key="option.id"
-            class="flex flex-nowrap items-center relative z-10 bg-card border border-card-line rounded-full p-1 m-1">
+            class="inline-flex items-center gap-1.5 bg-muted border border-[color:var(--field-border)] rounded-badge ps-2.5 pe-1 py-1 text-xs leading-none">
             <!-- Avatar/Icon -->
-            <div v-if="option.avatar || option.icon" class="size-6 me-1">
+            <div v-if="option.avatar || option.icon" class="size-4">
               <img v-if="option.avatar" :src="option.avatar" :alt="getOptionLabel(option)"
-                class="inline-block rounded-full size-6" />
-              <div v-else-if="option.icon" v-html="option.icon" class="size-6"></div>
+                class="inline-block rounded-avatar size-4" />
+              <div v-else-if="option.icon" v-html="option.icon" class="size-4"></div>
             </div>
 
             <!-- Label -->
-            <div class="whitespace-nowrap text-foreground text-sm pl-1.5">
+            <span class="whitespace-nowrap text-foreground">
               <slot name="tag" :option="option">
                 {{ getOptionLabel(option) }}
               </slot>
-            </div>
+            </span>
 
             <!-- Remove button -->
             <button type="button" v-if="!disabled" @click.stop="removeTag(option)"
-              class="inline-flex shrink-0 justify-center items-center size-5 ms-2 rounded-full text-foreground bg-surface-1 hover:bg-surface-1 focus:outline-none focus:ring-2 focus:ring-gray-400 text-sm cursor-pointer">
-              <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+              class="inline-flex shrink-0 justify-center items-center size-4 rounded-badge text-muted-foreground hover:text-foreground focus:outline-none focus-visible:outline-none cursor-pointer"
+              tabindex="-1">
+              <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" 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" />
@@ -592,12 +597,12 @@ onMounted(() => {
       enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75"
       leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
       <div v-show="isOpen" ref="optionsListRef" @scroll="handleScroll"
-        class="absolute z-50 w-full mt-1 bg-dropdown border border-dropdown-line rounded-xl shadow-xl max-h-60 overflow-auto">
+        class="absolute z-50 w-full -mt-px bg-[color:var(--field-dropdown-bg)] border border-[color:var(--field-border)] rounded-b-control shadow-lg max-h-60 overflow-auto">
         <!-- Search input -->
         <div v-if="searchable" class="p-2 border-b border-card-line relative">
           <input type="text" :value="searchQuery" :placeholder="searchPlaceholder" @input="handleSearchInput"
             @keydown.enter.prevent
-            class="w-full px-3 py-2.5 pr-8 border border-card-line rounded-lg focus:outline-none focus:ring-0 focus:border-gray-400 dark:bg-surface dark:text-white text-sm transition-colors" />
+            class="innertia-field innertia-field-sm pe-8" />
           <button type="button" v-if="searchQuery" @click.prevent="clearSearch"
             class="absolute top-1/2 right-4 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
             <svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -635,7 +640,7 @@ onMounted(() => {
             <!-- Multiple selection checkbox -->
             <div v-if="multiple" class="mr-2">
               <div :class="[
-                'w-4 h-4 rounded-lg border-2 flex items-center justify-center',
+                'w-4 h-4 rounded-control border-2 flex items-center justify-center',
                 isOptionSelected(option)
                   ? 'bg-slate-600 border-slate-600 text-white'
                   : 'border-card-line',
@@ -652,7 +657,7 @@ onMounted(() => {
             <div class="flex items-center flex-1">
               <!-- Avatar/Icon -->
               <div v-if="option.avatar || option.icon" class="mr-3">
-                <img v-if="option.avatar" :src="option.avatar" :alt="option.label" class="w-6 h-6 rounded-full" />
+                <img v-if="option.avatar" :src="option.avatar" :alt="option.label" class="w-6 h-6 rounded-avatar" />
                 <component v-else-if="option.icon" :is="option.icon" class="w-5 h-5 text-gray-500" />
               </div>
 
@@ -702,7 +707,7 @@ onMounted(() => {
         <!-- No data message -->
         <div v-else-if="!serverOptions.length && !isFetching" class="px-3 py-8 text-center">
           <div class="flex flex-col items-center gap-y-2">
-            <div class="size-10 rounded-full bg-muted flex items-center justify-center">
+            <div class="size-10 rounded-avatar bg-muted flex items-center justify-center">
               <svg class="size-5 text-muted-foreground-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                 stroke-width="1.5" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round"

package/components/MobileBlocker.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { IconDeviceDesktop, IconArrowRight, IconCopy, IconCheck } from '@tabler/icons-vue'
-import type { AppDefinition } from '~/configs/apps'
+import type { ContextDefinition } from '~/configs/apps'
 
 const props = defineProps<{
-  /** App al que se intentó acceder (para el copy contextual). */
-  blockedApp?: AppDefinition | null
-  /** App mobile-friendly al que el usuario puede continuar (opcional). */
-  fallbackApp?: AppDefinition | null
+  /** Context al que se intentó acceder (para el copy contextual). */
+  blockedApp?: ContextDefinition | null
+  /** Context mobile-friendly al que el usuario puede continuar (opcional). */
+  fallbackApp?: ContextDefinition | null
 }>()
 
 const route = useRoute()

package/components/MobileLoginPicker.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import * as TablerIcons from '@tabler/icons-vue'
 import { IconArrowRight } from '@tabler/icons-vue'
-import type { AppDefinition } from '~/configs/apps'
+import type { ContextDefinition } from '~/configs/apps'
 
 const props = defineProps<{
-  /** Apps a mostrar como opciones de login. */
-  options: AppDefinition[]
+  /** Contexts a mostrar como opciones de login. */
+  options: ContextDefinition[]
   /** Título personalizable. */
   title?: string
 }>()
 
 const emit = defineEmits<{
-  /** Emitido cuando el usuario elige un app — el padre se encarga de navegar y recordar la elección. */
-  pick: [app: AppDefinition]
+  /** Emitido cuando el usuario elige un context — el padre se encarga de navegar y recordar la elección. */
+  pick: [context: ContextDefinition]
 }>()
 
 const heading = computed(() => props.title ?? '¿Cómo quieres ingresar?')
@@ -46,25 +46,25 @@ function resolveIcon(name?: string) {
         <!-- Opciones -->
         <div class="space-y-3">
           <button
-            v-for="app in options"
-            :key="app.path"
+            v-for="context in options"
+            :key="context.path"
             type="button"
             class="group w-full flex items-center gap-4 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 px-4 py-4 text-left hover:border-violet-300 dark:hover:border-violet-700 hover:bg-violet-50/50 dark:hover:bg-violet-900/10 transition-colors"
-            @click="emit('pick', app)"
+            @click="emit('pick', context)"
           >
             <div class="shrink-0 size-11 rounded-xl bg-violet-100 dark:bg-violet-900/30 flex items-center justify-center group-hover:bg-violet-200 dark:group-hover:bg-violet-900/50 transition-colors">
               <component
-                v-if="resolveIcon(app.icon)"
-                :is="resolveIcon(app.icon)"
+                v-if="resolveIcon(context.icon)"
+                :is="resolveIcon(context.icon)"
                 class="size-5 text-violet-600 dark:text-violet-400"
               />
             </div>
             <div class="flex-1 min-w-0">
               <div class="text-base font-semibold text-slate-900 dark:text-white">
-                {{ app.label }}
+                {{ context.label }}
               </div>
-              <div v-if="app.description" class="text-xs text-slate-500 dark:text-slate-400 mt-0.5 line-clamp-2">
-                {{ app.description }}
+              <div v-if="context.description" class="text-xs text-slate-500 dark:text-slate-400 mt-0.5 line-clamp-2">
+                {{ context.description }}
               </div>
             </div>
             <IconArrowRight class="shrink-0 size-5 text-slate-400 group-hover:text-violet-600 dark:group-hover:text-violet-400 transition-colors" />

package/components/Organization/Picker.vue

@@ -10,12 +10,12 @@
  */
 import { IconBuildingSkyscraper, IconArrowRight } from '@tabler/icons-vue'
 
-const { current: currentApp } = useApp()
+const { current: currentContext } = useContext()
 const { available, switchTo } = useOrganization()
 
 const title = computed(() =>
-  currentApp.value
-    ? `Elige una organización para continuar en ${currentApp.value.label}`
+  currentContext.value
+    ? `Elige una organización para continuar en ${currentContext.value.label}`
     : 'Elige una organización'
 )
 

package/components/PermissionsTree.vue

@@ -133,17 +133,17 @@ function groupSelectedCount(group) {
 
     <!-- Search -->
     <div class="relative">
-      <IconSearch class="absolute left-2.5 top-1/2 -translate-y-1/2 size-3 text-slate-400 pointer-events-none" />
+      <IconSearch class="absolute right-2.5 top-1/2 -translate-y-1/2 size-3 text-muted-foreground pointer-events-none" />
       <input
         v-model="search"
-        type="search"
+        type="text"
         placeholder="Buscar permiso…"
-        class="w-full pl-7 pr-3 py-1.5 text-xs bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-md text-slate-700 dark:text-slate-300 placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-blue-500/40 focus:border-blue-400"
+        class="innertia-field innertia-field-sm pe-7"
       />
     </div>
 
     <!-- Tree -->
-    <div class="rounded-md border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 overflow-hidden text-sm">
+    <div class="rounded-card border border-card-line bg-card overflow-hidden text-sm">
 
       <div v-if="visibleApps.length === 0" class="px-3 py-6 text-center text-xs text-slate-400 dark:text-slate-500">
         {{ search ? 'Sin resultados.' : readonly ? 'Sin permisos asignados.' : 'Sin permisos disponibles.' }}

package/components/Table/Database.vue

@@ -82,19 +82,19 @@ defineExpose({ reload })
 <template>
   <div class="flex flex-col gap-3">
     <div v-if="showSearch" class="relative max-w-sm">
-      <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
-        <IconSearch class="size-4 text-slate-400" stroke="1.5" />
+      <div class="absolute inset-y-0 end-0 flex items-center pe-3 pointer-events-none">
+        <IconSearch class="size-4 text-muted-foreground" stroke="1.5" />
       </div>
       <input
         v-model="search"
-        type="search"
+        type="text"
         :placeholder="searchPlaceholder"
-        class="block w-full rounded-lg border border-card-line bg-card text-foreground py-1.5 ps-9 pe-4 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+        class="innertia-field innertia-field-sm pe-9"
       />
     </div>
 
     <!-- Dense table wrapper — override Table's default padding with compact styles -->
-    <div class="overflow-x-auto border border-card-line rounded-xl">
+    <div class="overflow-x-auto border border-card-line rounded-card">
       <Table
         ref="tableRef"
         :endpoint="endpoint"