@edc-motor/ui 0.4.8 → 0.4.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "description": "EdC Motor — componentes públicos Vue 3 + tokens SCSS para webs de juegos de mesa (paquete fuente: lo compila el consumidor con Vite)",
   "license": "GPL-3.0-only",
   "type": "module",

package/scss/components/_app-right-sidebar.scss

@@ -0,0 +1,112 @@
+@use "tokens" as *;
+
+// Barra lateral derecha contextual de la web pública (AppRightSidebar.vue):
+// cada vista la registra con useAppRightSidebar() y App.vue la monta una vez
+// dentro de .site-main (flex row con .site-content). El cascarón fija
+// --app-right-sidebar-top a la altura de su cabecera fija; sin fijarla, la
+// barra arranca en el borde superior.
+
+.app-right-sidebar {
+  position: sticky;
+  top: 0;
+  align-self: flex-start;
+  height: 100dvh;
+  width: 320px;
+  flex-shrink: 0;
+  padding-top: var(--app-right-sidebar-top, 0px);
+  background: $surface;
+  border-left: 1px solid $border;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: width 0.2s ease, transform 0.25s ease;
+
+  &--collapsed {
+    width: 0;
+    border-left: 0;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: $space-2;
+    height: 48px;
+    padding: 0 $space-2 0 $space-4;
+    border-bottom: 1px solid $border;
+    flex-shrink: 0;
+  }
+
+  &__title {
+    flex: 1;
+    font-size: $fs-14;
+    font-weight: $k-fw-semibold;
+    color: $text-1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // Cerrar como el action-button del modal: sin caja, acento al hover.
+  &__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: none;
+    background: none;
+    color: $text-2;
+    cursor: pointer;
+    border-radius: $radius-sm;
+    transition: background-color 0.15s ease, color 0.15s ease;
+
+    &:hover {
+      color: $accent-500;
+      background: color-mix(in srgb, $accent-500 12%, transparent);
+    }
+  }
+
+  &__body {
+    flex: 1;
+    overflow-y: auto;
+    padding: $space-4;
+  }
+
+  // El contenido registrado (selects de filtros…) se apila a una columna.
+  #app-right-sidebar-target {
+    display: grid;
+    gap: $space-3;
+  }
+
+  // Modo drawer (por debajo del umbral del componente): superpuesto al
+  // contenido, bajo la cabecera, con telón y cierre por click fuera/Escape.
+  &--drawer {
+    position: fixed;
+    top: var(--app-right-sidebar-top, 0px);
+    right: 0;
+    bottom: 0;
+    // El align-self: flex-start del modo columna aplica aquí como alineación
+    // de caja posicionada y encogería el alto al contenido en vez de
+    // estirarlo hasta bottom: 0.
+    align-self: auto;
+    height: auto;
+    padding-top: 0;
+    z-index: 60; // por encima de la cabecera fija (50)
+    width: min(320px, 100vw);
+    transform: translateX(100%);
+
+    &.app-right-sidebar--drawer-open {
+      transform: translateX(0);
+    }
+  }
+}
+
+.app-right-sidebar-overlay {
+  position: fixed;
+  top: var(--app-right-sidebar-top, 0px);
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgb(0 0 0 / 40%);
+  z-index: 55;
+}

package/scss/components/_base-select.scss

@@ -25,6 +25,9 @@
     &.is-placeholder { color: $input-placeholder; }
   }
 
+  // Posición base (fallback sin Popover API): absoluto bajo el trigger. Al
+  // abrir, useDropdownPanel lo promociona a la top layer (popover) y lo ancla
+  // por coordenadas fijas: dentro de modales no lo recorta ningún overflow.
   &__panel {
     position: absolute;
     top: calc(100% + #{$space-1});

package/scss/components/_index-toolbar.scss

@@ -2,7 +2,7 @@
 
 // Barra de los index (IndexToolbar.vue). El propio toolbar es el contenedor
 // de las queries: por debajo de $bp-sm de ancho REAL de la barra, la búsqueda
-// pasa a su fila y debajo toggles + botón se reparten el ancho.
+// pasa a su fila y los toggles se reparten el ancho debajo.
 .index-toolbar {
   container-type: inline-size;
   margin-bottom: $space-4;
@@ -56,42 +56,8 @@
     flex-shrink: 0;
   }
 
-  &__filters {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: $space-2;
-    height: $input-height;
-    padding: 0 $space-3;
-    background: $input-bg;
-    border: 1px solid $input-border;
-    border-radius: $input-radius;
-    color: $text-2;
-    font-family: $k-font-sans;
-    font-size: $fs-14;
-    cursor: pointer;
-    transition: border-color 0.15s ease, color 0.15s ease;
-
-    &:hover { border-color: $input-border-hover; color: $text-1; }
-  }
-
-  &__badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 18px;
-    height: 18px;
-    padding: 0 5px;
-    border-radius: $radius-pill;
-    background: $accent-500;
-    color: #fff;
-    font-size: $fs-11;
-    font-weight: $k-fw-semibold;
-    line-height: 1;
-  }
-
-  // Estrecho: la búsqueda ocupa su fila; debajo, toggles y botón se
-  // reparten el ancho proporcionalmente.
+  // Estrecho: la búsqueda ocupa su fila; debajo, los toggles se reparten
+  // el ancho proporcionalmente.
   @container (max-width: #{$bp-sm - 1px}) {
     &__inner { flex-wrap: wrap; }
     &__search { flex: 1 1 100%; }

package/scss/components/_index.scss

@@ -8,7 +8,7 @@
 @use "search-select";
 @use "sort-toggles";
 @use "index-toolbar";
-@use "filters-modal";
+@use "app-right-sidebar";
 @use "blocks";
 @use "block-related";
 @use "preview-grid";

package/scss/components/_search-select.scss

@@ -46,6 +46,9 @@
 
   &.is-open &__chevron { transform: rotate(180deg); }
 
+  // Posición base (fallback sin Popover API): absoluto bajo el trigger. Al
+  // abrir, useDropdownPanel lo promociona a la top layer (popover) y lo ancla
+  // por coordenadas fijas: dentro de modales no lo recorta ningún overflow.
   &__dropdown {
     position: absolute;
     top: calc(100% + #{$space-1});

package/src/components/AppRightSidebar.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted } from 'vue'
+import { X } from '@lucide/vue'
+import { useAppRightSidebar } from '../composables/useAppRightSidebar'
+
+// Barra lateral derecha contextual de la web pública (misma mecánica que la
+// RightSidebar del admin-kit): cada vista la activa con
+// useAppRightSidebar().useRegister(titulo) y teletransporta su contenido
+// (típicamente sus selects de filtros) a #app-right-sidebar-target. En ancho
+// es una columna pegajosa junto al contenido; por debajo de
+// OVERLAY_BREAKPOINT pasa a drawer superpuesto con cierre por click fuera y
+// Escape. Se abre/cierra con el botón (Funnel) del header, que llama a
+// useAppRightSidebar().toggle(). La monta App.vue una vez, dentro de
+// .site-main; el cascarón fija --app-right-sidebar-top a la altura de su
+// cabecera fija.
+// Agnóstica de i18n (DC-29): textos por prop, defaults en castellano.
+
+const props = withDefaults(
+  defineProps<{
+    closeLabel?: string
+    /** Título por defecto si la vista registra sin título. */
+    fallbackTitle?: string
+  }>(),
+  { closeLabel: 'Cerrar el panel', fallbackTitle: 'Filtros' },
+)
+
+const { hasContent, collapsed, mobileOpen, overlay, title, isOpen, toggle, closeMobile } =
+  useAppRightSidebar()
+
+// Por debajo de este ancho la barra se superpone (drawer) en vez de ocupar
+// columna: coincide con el corte móvil del header público (900px).
+const OVERLAY_BREAKPOINT = 900
+
+function checkOverlay() {
+  overlay.value = window.innerWidth < OVERLAY_BREAKPOINT
+  if (!overlay.value) mobileOpen.value = false
+}
+
+// En el drawer, Escape cierra (el click fuera lo cubre el telón).
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape' && overlay.value && mobileOpen.value) closeMobile()
+}
+
+onMounted(() => {
+  checkOverlay()
+  window.addEventListener('resize', checkOverlay)
+  window.addEventListener('keydown', onKeydown)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', checkOverlay)
+  window.removeEventListener('keydown', onKeydown)
+})
+
+const panelTitle = computed(() => title.value || props.fallbackTitle)
+
+function handleClose(e: MouseEvent) {
+  // Evita dejar el foco dentro de un subárbol inert.
+  ;(e.currentTarget as HTMLElement | null)?.blur()
+  toggle()
+}
+</script>
+
+<template>
+  <div
+    v-if="overlay && hasContent && mobileOpen"
+    class="app-right-sidebar-overlay"
+    @click="closeMobile"
+  />
+
+  <aside
+    v-show="hasContent"
+    class="app-right-sidebar"
+    :class="{
+      'app-right-sidebar--collapsed': collapsed && !overlay,
+      'app-right-sidebar--drawer': overlay,
+      'app-right-sidebar--drawer-open': overlay && mobileOpen,
+    }"
+    :inert="!isOpen"
+  >
+    <div class="app-right-sidebar__header">
+      <span class="app-right-sidebar__title">{{ panelTitle }}</span>
+      <button
+        type="button"
+        class="app-right-sidebar__close"
+        :aria-label="closeLabel"
+        @click="handleClose"
+      >
+        <X :size="18" />
+      </button>
+    </div>
+
+    <div class="app-right-sidebar__body">
+      <div id="app-right-sidebar-target" />
+    </div>
+  </aside>
+</template>

package/src/components/BaseSelect.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
+import { useDropdownPanel } from '../composables/useDropdownPanel'
 
 // Select de formulario (portado de kontuan). Dropdown personalizado (botón
 // trigger + panel de opciones) con la MISMA API que el <select> nativo al que
 // sustituye: el trigger reutiliza el aspecto de .form-field__select y el
 // panel, la estética del SearchSelect. Teclado completo (flechas, Enter,
-// Escape, Home/End) y cierre por mousedown exterior.
+// Escape, Home/End) y cierre por mousedown exterior. El panel abierto vuela
+// a la top layer (useDropdownPanel): dentro de un modal se superpone sin
+// recortarse ni deformar el modal.
 //
 // Compatibilidad con el nativo:
 // - El valor viaja como en el DOM: se emite String(option.value) y la opción
@@ -44,6 +47,9 @@ const panelId = `${selectId}-panel`
 const open = ref(false)
 const highlighted = ref(0)
 const root = ref<HTMLElement | null>(null)
+const panel = ref<HTMLElement | null>(null)
+
+useDropdownPanel(root, panel, open)
 
 const selectedIndex = computed(() =>
   props.options.findIndex((o) => String(o.value) === String(props.modelValue)),
@@ -103,7 +109,10 @@ function onKeydown(e: KeyboardEvent) {
 
   switch (e.key) {
     case 'Escape':
+      // Escape con el panel abierto cierra SOLO el panel (que no llegue al
+      // listener global de un modal contenedor y lo cierre también).
       e.preventDefault()
+      e.stopPropagation()
       close()
       break
     case 'ArrowDown':
@@ -166,7 +175,14 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', onOutside))
         </span>
       </button>
 
-      <ul v-if="open" :id="panelId" class="base-select__panel" role="listbox">
+      <ul
+        v-if="open"
+        :id="panelId"
+        ref="panel"
+        class="base-select__panel"
+        popover="manual"
+        role="listbox"
+      >
         <li
           v-for="(option, index) in options"
           :id="optionId(index)"

package/src/components/IndexToolbar.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { Funnel, Search } from '@lucide/vue'
+import { Search } from '@lucide/vue'
 import SortToggles, { type SortValue } from './SortToggles.vue'
 
 // Barra unificada de los index (admin y web pública): búsqueda (lupa a la
-// derecha, como el FilterBar del admin-kit), toggles de ordenación y botón
-// "Filtros" con badge de filtros activos (emite `open-filters`; el modal lo
-// pone el consumidor). En ancho es una fila [búsqueda][toggles][botón]; en
-// estrecho (container query propia) la búsqueda ocupa su fila y debajo se
-// reparten el ancho los toggles y el botón.
+// derecha, como el FilterBar del admin-kit) y toggles de ordenación. Los
+// filtros del listado viven en la barra derecha (RightSidebar del admin /
+// AppRightSidebar de la web), no aquí. En ancho es una fila
+// [búsqueda][toggles]; en estrecho (container query propia) la búsqueda
+// ocupa su fila y los toggles pasan debajo.
 // La búsqueda emite INMEDIATO (como FilterBar): el debounce va fuera.
 // Agnóstico de i18n (DC-29): textos por prop, defaults en castellano.
 
@@ -16,9 +16,6 @@ withDefaults(
     modelValue: string
     sort?: SortValue
     searchPlaceholder?: string
-    filtersLabel?: string
-    activeCount?: number
-    showFilters?: boolean
     showSort?: boolean
     latestLabel?: string
     oldestLabel?: string
@@ -28,9 +25,6 @@ withDefaults(
   {
     sort: 'latest',
     searchPlaceholder: 'Buscar…',
-    filtersLabel: 'Filtros',
-    activeCount: 0,
-    showFilters: false,
     showSort: true,
     latestLabel: undefined,
     oldestLabel: undefined,
@@ -42,7 +36,6 @@ withDefaults(
 const emit = defineEmits<{
   'update:modelValue': [value: string]
   'update:sort': [value: SortValue]
-  'open-filters': []
 }>()
 </script>
 
@@ -60,9 +53,8 @@ const emit = defineEmits<{
         <Search :size="16" class="index-toolbar__search-icon" />
       </div>
 
-      <div class="index-toolbar__actions">
+      <div v-if="showSort" class="index-toolbar__actions">
         <SortToggles
-          v-if="showSort"
           :model-value="sort"
           class="index-toolbar__sort"
           :latest-label="latestLabel"
@@ -71,16 +63,6 @@ const emit = defineEmits<{
           :name-desc-label="nameDescLabel"
           @update:model-value="(v) => emit('update:sort', v)"
         />
-        <button
-          v-if="showFilters"
-          type="button"
-          class="index-toolbar__filters"
-          @click="emit('open-filters')"
-        >
-          <Funnel :size="16" />
-          <span class="index-toolbar__filters-text">{{ filtersLabel }}</span>
-          <span v-if="activeCount > 0" class="index-toolbar__badge">{{ activeCount }}</span>
-        </button>
       </div>
     </div>
   </div>

package/src/components/SearchSelect.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 import { Check, ChevronDown } from '@lucide/vue'
+import { useDropdownPanel } from '../composables/useDropdownPanel'
 
 // Select con buscador (combobox de selección ÚNICA): cerrado ocupa una
 // línea; al desplegar muestra un input de búsqueda y las opciones filtradas
@@ -8,7 +9,9 @@ import { Check, ChevronDown } from '@lucide/vue'
 // TagCombobox de kontuan (multi-etiquetas), del que hereda el teclado
 // (flechas + Enter + Escape) y el cierre por mousedown exterior. El filtrado
 // lo hace el PADRE (evento `search`, con debounce aquí): en cliente o contra
-// el servidor, y con `canLoadMore` pagina.
+// el servidor, y con `canLoadMore` pagina. El desplegable abierto vuela a la
+// top layer (useDropdownPanel): dentro de un modal se superpone sin
+// recortarse ni deformar el modal.
 // Agnóstico de i18n (DC-29): textos por prop, defaults en castellano.
 
 export interface SearchSelectOption {
@@ -47,6 +50,9 @@ const query = ref('')
 const highlighted = ref(0)
 const root = ref<HTMLElement | null>(null)
 const input = ref<HTMLInputElement | null>(null)
+const dropdown = ref<HTMLElement | null>(null)
+
+useDropdownPanel(root, dropdown, open)
 
 const selectedLabel = computed(
   () => props.options.find((o) => o.id === props.modelValue)?.label ?? '',
@@ -95,6 +101,9 @@ watch(
 
 function onKeydown(e: KeyboardEvent) {
   if (e.key === 'Escape') {
+    // Cierra SOLO el desplegable (que no llegue al listener global de un
+    // modal contenedor y lo cierre también).
+    e.stopPropagation()
     close()
     return
   }
@@ -136,7 +145,7 @@ onBeforeUnmount(() => {
       <ChevronDown :size="16" class="search-select__chevron" />
     </button>
 
-    <div v-if="open" class="search-select__dropdown">
+    <div v-if="open" ref="dropdown" class="search-select__dropdown" popover="manual">
       <input
         ref="input"
         v-model="query"

package/src/composables/useAppRightSidebar.ts

@@ -0,0 +1,101 @@
+import { computed, onBeforeUnmount, ref } from 'vue'
+
+/**
+ * Barra lateral derecha contextual de la web pública, por vista (misma
+ * mecánica que el useRightSidebar del admin-kit, patrón kontuan).
+ *
+ * Estado singleton a nivel de módulo (como useToast/useConfirm: los juegos
+ * consumen el paquete como fuente con `optimizeDeps.exclude` para que solo
+ * exista una copia):
+ *   - escritorio: columna junto al contenido cuando la vista actual registra
+ *     contenido; se puede plegar con `collapsed`.
+ *   - estrecho: oculta; entra como drawer superpuesto cuando `mobileOpen`.
+ *
+ * El botón del header (Funnel) llama a `toggle()`, que despliega/pliega según
+ * el modo; `overlay` lo mantiene el componente AppRightSidebar con el ancho.
+ *
+ * La propiedad se rastrea con un token opaco para que el `unregister` de una
+ * vista saliente nunca borre el contenido cuando otra vista ya ha registrado
+ * el suyo (en un cambio de ruta, el setup nuevo corre antes que el
+ * onUnmounted viejo).
+ */
+const hasContent = ref(false)
+const collapsed = ref(false)
+const mobileOpen = ref(false)
+const overlay = ref(false)
+const title = ref<string>('')
+
+let ownerToken: symbol | null = null
+
+export type AppRightSidebarToken = symbol
+
+export function useAppRightSidebar() {
+  /** Visible ahora mismo (columna desplegada o drawer abierto). */
+  const isOpen = computed(() => (overlay.value ? mobileOpen.value : !collapsed.value))
+
+  function toggleCollapsed() {
+    collapsed.value = !collapsed.value
+  }
+  function openMobile() {
+    mobileOpen.value = true
+  }
+  function closeMobile() {
+    mobileOpen.value = false
+  }
+  function toggleMobile() {
+    mobileOpen.value = !mobileOpen.value
+  }
+
+  /** Abre/cierra según el modo: el botón del header no distingue anchos. */
+  function toggle() {
+    if (overlay.value) toggleMobile()
+    else toggleCollapsed()
+  }
+
+  /** Muestra la barra esté donde esté (despliega en ancho, abre en estrecho). */
+  function reveal() {
+    collapsed.value = false
+    mobileOpen.value = true
+  }
+
+  function register(panelTitle = '', token?: AppRightSidebarToken): AppRightSidebarToken {
+    const owned = token ?? Symbol('app-right-sidebar-owner')
+    ownerToken = owned
+    hasContent.value = true
+    title.value = panelTitle
+    return owned
+  }
+
+  /** Limpia el contenido solo si quien llama sigue siendo el dueño. */
+  function unregister(token?: AppRightSidebarToken) {
+    if (token !== undefined && token !== ownerToken) return
+    ownerToken = null
+    hasContent.value = false
+    title.value = ''
+    mobileOpen.value = false
+  }
+
+  function useRegister(panelTitle = ''): AppRightSidebarToken {
+    const token = register(panelTitle)
+    onBeforeUnmount(() => unregister(token))
+    return token
+  }
+
+  return {
+    hasContent,
+    collapsed,
+    mobileOpen,
+    overlay,
+    title,
+    isOpen,
+    toggleCollapsed,
+    openMobile,
+    closeMobile,
+    toggleMobile,
+    toggle,
+    reveal,
+    register,
+    unregister,
+    useRegister,
+  }
+}

package/src/composables/useDropdownPanel.ts

@@ -0,0 +1,66 @@
+import { onBeforeUnmount, watch, type Ref } from 'vue'
+
+/**
+ * Panel flotante de los dropdowns (BaseSelect, SearchSelect).
+ *
+ * Con `position: absolute`, dentro de un modal el panel queda recortado por
+ * el `overflow` del cuerpo (.modal__body) y además le añade scroll fantasma:
+ * el scrollbar cambia el ancho interior y dispara reflows (con container
+ * queries, hasta cambia la rejilla). El arreglo: al abrir, el panel se
+ * promociona a la TOP LAYER del navegador con el atributo `popover` — se
+ * superpone a cualquier overflow/z-index sin tocar el layout — y, como la
+ * top layer posiciona respecto al viewport, se ancla por coordenadas fijas
+ * al trigger y se reancla en cada scroll/resize (sigue pegado al trigger
+ * también al scrollear la página o el propio modal).
+ *
+ * Sin soporte de popover no hace nada: sigue actuando el CSS `absolute` de
+ * siempre (correcto fuera de modales).
+ */
+export function useDropdownPanel(
+  anchor: Ref<HTMLElement | null>,
+  panel: Ref<HTMLElement | null>,
+  open: Ref<boolean>,
+) {
+  const GAP = 4 // $space-1: aire entre trigger y panel, como el CSS absolute
+
+  /** Ancla el panel bajo el trigger (o encima, si abajo no cabe y arriba sí). */
+  function place() {
+    const a = anchor.value
+    const p = panel.value
+    if (!a || !p) return
+    const r = a.getBoundingClientRect()
+    p.style.width = `${r.width}px`
+    p.style.left = `${r.left}px`
+    const height = p.offsetHeight
+    const below = window.innerHeight - r.bottom - GAP
+    const openUp = height > below && r.top > window.innerHeight - r.bottom
+    p.style.top = openUp ? `${Math.max(r.top - GAP - height, GAP)}px` : `${r.bottom + GAP}px`
+  }
+
+  function show() {
+    const p = panel.value
+    if (!p || typeof p.showPopover !== 'function') return
+    // Neutraliza los estilos UA de [popover] que el CSS del componente no pisa.
+    p.style.position = 'fixed'
+    p.style.margin = '0'
+    p.style.inset = 'auto'
+    if (!p.matches(':popover-open')) p.showPopover()
+    place()
+    window.addEventListener('scroll', place, { capture: true, passive: true })
+    window.addEventListener('resize', place)
+  }
+
+  function hide() {
+    window.removeEventListener('scroll', place, true)
+    window.removeEventListener('resize', place)
+    // El v-if del consumidor desmonta el panel (y eso ya lo saca de la top
+    // layer); hidePopover solo si sigue vivo y abierto.
+    const p = panel.value
+    if (p?.isConnected && p.matches(':popover-open')) p.hidePopover()
+  }
+
+  // flush post: al abrir, el panel ya está en el DOM cuando se promociona
+  // (y antes del nextTick del consumidor: el focus del buscador funciona).
+  watch(open, (value) => (value ? show() : hide()), { flush: 'post' })
+  onBeforeUnmount(hide)
+}

package/src/index.ts

@@ -23,9 +23,12 @@ export { default as ImageUpload } from './components/ImageUpload.vue'
 export { default as FontUpload } from './components/FontUpload.vue'
 export { default as BaseModal } from './components/BaseModal.vue'
 export { default as EditModal } from './components/EditModal.vue'
-export { default as FiltersModal } from './components/FiltersModal.vue'
 export { default as SortToggles, type SortValue } from './components/SortToggles.vue'
 export { default as IndexToolbar } from './components/IndexToolbar.vue'
+// Barra derecha contextual de la web pública (filtros de los index): App.vue
+// la monta junto al contenido; cada vista la activa con useAppRightSidebar()
+// y Teleport a #app-right-sidebar-target.
+export { default as AppRightSidebar } from './components/AppRightSidebar.vue'
 export { default as BaseTabs } from './components/BaseTabs.vue'
 export { default as BaseToast } from './components/BaseToast.vue'
 export { default as ToastContainer } from './components/ToastContainer.vue'
@@ -39,6 +42,7 @@ export { useToast, type Toast } from './composables/useToast'
 export { useConfirm, type ConfirmOptions } from './composables/useConfirm'
 export { useTheme, type ThemeMode } from './composables/useTheme'
 export { useHead, type HeadInput } from './composables/useHead'
+export { useAppRightSidebar, type AppRightSidebarToken } from './composables/useAppRightSidebar'
 
 // Bloques de presentación del CRM (doc 03).
 export * from './blocks'

package/scss/components/_filters-modal.scss

@@ -1,21 +0,0 @@
-@use "tokens" as *;
-
-// Modal de filtros (FiltersModal.vue): el wrapper es contenedor y el grid
-// del cuerpo suma columnas según el ancho REAL del modal (1 → 2 → 3).
-.filters-modal {
-  container-type: inline-size;
-
-  &__grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: $space-4;
-
-    > * { min-width: 0; } // cada campo a ancho completo de su celda
-
-    @container (min-width: 460px) { grid-template-columns: repeat(2, 1fr); }
-    @container (min-width: 700px) { grid-template-columns: repeat(3, 1fr); }
-  }
-
-  // "Quitar filtros" a la izquierda del pie (el pie alinea a la derecha).
-  &__clear { margin-right: auto; }
-}

package/src/components/FiltersModal.vue

@@ -1,63 +0,0 @@
-<script setup lang="ts">
-import { FunnelX, X } from '@lucide/vue'
-import BaseModal from './BaseModal.vue'
-import BaseButton from './BaseButton.vue'
-
-// Modal de filtros de los index: BaseModal (overlay, Escape, click fuera,
-// aria-modal) SIN semántica de guardar — los campos del slot aplican en vivo
-// (v-model directo desde el consumidor). El cuerpo es un grid que suma
-// columnas según el ancho del propio modal (container queries). El pie trae
-// "Quitar filtros" (emit `clear`, solo con activeCount > 0) y "Cerrar".
-// Agnóstico de i18n (DC-29): textos por prop, defaults en castellano.
-
-withDefaults(
-  defineProps<{
-    modelValue: boolean
-    title?: string
-    size?: 'sm' | 'md' | 'lg'
-    activeCount?: number
-    clearLabel?: string
-    closeLabel?: string
-  }>(),
-  {
-    title: 'Filtros',
-    size: 'md',
-    activeCount: 0,
-    clearLabel: 'Quitar filtros',
-    closeLabel: 'Cerrar',
-  },
-)
-
-const emit = defineEmits<{ 'update:modelValue': [boolean]; clear: [] }>()
-</script>
-
-<template>
-  <BaseModal
-    :model-value="modelValue"
-    :title="title"
-    :size="size"
-    :close-label="closeLabel"
-    @update:model-value="(v) => emit('update:modelValue', v)"
-  >
-    <div class="filters-modal">
-      <div class="filters-modal__grid"><slot /></div>
-    </div>
-
-    <template #footer>
-      <BaseButton
-        v-if="activeCount > 0"
-        variant="secondary"
-        type="button"
-        class="filters-modal__clear"
-        @click="emit('clear')"
-      >
-        <template #icon><FunnelX :size="16" /></template>
-        {{ clearLabel }}
-      </BaseButton>
-      <BaseButton variant="primary" type="button" @click="emit('update:modelValue', false)">
-        <template #icon><X :size="16" /></template>
-        {{ closeLabel }}
-      </BaseButton>
-    </template>
-  </BaseModal>
-</template>