fdd69ce1b5
- fix: login disconnect — verify session before WebSocket connect - fix: 403 on app install — distinguish CSRF vs RBAC errors, only retry CSRF - fix: health monitor now watches ALL containers (removed skip list for backend services like nbxplorer, databases, UI containers) - fix: server.get-state added to CSRF-exempt list (read-only) - fix: ISO build includes container-specs.sh and lib/common.sh in rootfs so reconcile actually works on fresh installs - fix: gamepad nav — improved Server tab zone nav, focus styles, autofocus - chore: move L484 web-only apps to Services tab - chore: install store for cross-view install tracking Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
672 lines
27 KiB
TypeScript
672 lines
27 KiB
TypeScript
/**
|
|
* Controller / gamepad navigation for Archipelago.
|
|
*
|
|
* Navigation model (from the design spec):
|
|
*
|
|
* SIDEBAR (vertical list):
|
|
* Up/Down = move between items, wraps top↔bottom, auto-navigates
|
|
* Right = jump to first container in main content
|
|
* Left = does nothing
|
|
*
|
|
* MAIN CONTENT (container tile grid):
|
|
* Arrows = move between containers spatially (the red tile grid)
|
|
* Enter = trigger container's primary action (navigate link / launch)
|
|
* Escape = back to sidebar
|
|
* Left from leftmost container = back to sidebar
|
|
*
|
|
* INSIDE CONTAINER (yellow inner controls — entered via second Enter):
|
|
* Arrows = move between inner controls spatially
|
|
* Escape = exit back to the container tile
|
|
* Cannot move to other containers without exiting first
|
|
*
|
|
* TEXT INPUTS:
|
|
* Up/Down = exit field, navigate to nearest element
|
|
* Enter = submit (click next button)
|
|
* Left/Right = cursor movement (stay in field)
|
|
*/
|
|
|
|
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { useControllerStore } from '@/stores/controller'
|
|
import { useSpotlightStore } from '@/stores/spotlight'
|
|
import { useCLIStore } from '@/stores/cli'
|
|
import { useAppLauncherStore } from '@/stores/appLauncher'
|
|
import { playNavSound } from '@/composables/useNavSounds'
|
|
|
|
// ─── Element Queries ────────────────────────────────────────────
|
|
|
|
const FOCUSABLE_SELECTOR = [
|
|
'a[href]',
|
|
'button:not([disabled])',
|
|
'input:not([disabled])',
|
|
'select:not([disabled])',
|
|
'textarea:not([disabled])',
|
|
'[tabindex]:not([tabindex="-1"])',
|
|
'[data-controller-focus]',
|
|
'[data-controller-container]',
|
|
].join(', ')
|
|
|
|
function getFocusableElements(root: Document | HTMLElement = document): HTMLElement[] {
|
|
return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(
|
|
el =>
|
|
!el.hasAttribute('disabled') &&
|
|
el.offsetParent !== null &&
|
|
!el.hasAttribute('data-controller-ignore') &&
|
|
!el.closest('[data-controller-ignore]')
|
|
)
|
|
}
|
|
|
|
/** Sidebar items */
|
|
function getSidebarElements(): HTMLElement[] {
|
|
const zone = document.querySelector('[data-controller-zone="sidebar"]') as HTMLElement | null
|
|
return zone ? getFocusableElements(zone) : []
|
|
}
|
|
|
|
/** Main zone containers only — the [C] tile grid */
|
|
function getContainers(): HTMLElement[] {
|
|
const zone = document.querySelector('[data-controller-zone="main"]') as HTMLElement | null
|
|
if (!zone) return []
|
|
return Array.from(zone.querySelectorAll<HTMLElement>('[data-controller-container]')).filter(
|
|
el => el.offsetParent !== null
|
|
)
|
|
}
|
|
|
|
/** Nav bar items [N] — focusable elements in main zone that are NOT inside any container
|
|
* (mode-switcher buttons, tab buttons, search inputs above the grid) */
|
|
function getNavBarItems(): HTMLElement[] {
|
|
const zone = document.querySelector('[data-controller-zone="main"]') as HTMLElement | null
|
|
if (!zone) return []
|
|
return getFocusableElements(zone).filter(el =>
|
|
!el.hasAttribute('data-controller-container') &&
|
|
!el.closest('[data-controller-container]')
|
|
)
|
|
}
|
|
|
|
function isNavBarItem(el: HTMLElement | null): boolean {
|
|
if (!el) return false
|
|
return isInZone(el, 'main') &&
|
|
!el.hasAttribute('data-controller-container') &&
|
|
!el.closest('[data-controller-container]')
|
|
}
|
|
|
|
/** Inner focusables within a container (buttons, links — not the container itself) */
|
|
function getInnerFocusables(container: HTMLElement): HTMLElement[] {
|
|
return getFocusableElements(container).filter(
|
|
el => el !== container && !el.hasAttribute('data-controller-container')
|
|
)
|
|
}
|
|
|
|
function isInZone(el: HTMLElement | null, zone: 'sidebar' | 'main'): boolean {
|
|
if (!el) return false
|
|
return !!el.closest(`[data-controller-zone="${zone}"]`)
|
|
}
|
|
|
|
function isInsideContainer(el: HTMLElement | null): boolean {
|
|
if (!el) return false
|
|
const container = el.closest('[data-controller-container]')
|
|
return !!container && container !== el
|
|
}
|
|
|
|
function isContainer(el: HTMLElement | null): boolean {
|
|
return !!el?.hasAttribute('data-controller-container')
|
|
}
|
|
|
|
// ─── Spatial Navigation ─────────────────────────────────────────
|
|
|
|
function findNearestInDirection(
|
|
from: HTMLElement,
|
|
candidates: HTMLElement[],
|
|
direction: 'up' | 'down' | 'left' | 'right'
|
|
): HTMLElement | null {
|
|
const fromRect = from.getBoundingClientRect()
|
|
const fromCX = fromRect.left + fromRect.width / 2
|
|
const fromCY = fromRect.top + fromRect.height / 2
|
|
const threshold = 50
|
|
|
|
const filtered = candidates.filter(el => {
|
|
if (el === from) return false
|
|
const r = el.getBoundingClientRect()
|
|
switch (direction) {
|
|
case 'left': return r.right <= fromRect.left + threshold
|
|
case 'right': return r.left >= fromRect.right - threshold
|
|
case 'up': return r.bottom <= fromRect.top + threshold
|
|
case 'down': return r.top >= fromRect.bottom - threshold
|
|
}
|
|
})
|
|
|
|
if (!filtered.length) return null
|
|
|
|
const scored = filtered.map(el => {
|
|
const r = el.getBoundingClientRect()
|
|
const cx = r.left + r.width / 2
|
|
const cy = r.top + r.height / 2
|
|
const isVertical = direction === 'up' || direction === 'down'
|
|
const overlap = isVertical
|
|
? Math.max(0, Math.min(fromRect.right, r.right) - Math.max(fromRect.left, r.left))
|
|
: Math.max(0, Math.min(fromRect.bottom, r.bottom) - Math.max(fromRect.top, r.top))
|
|
const dist = isVertical ? Math.abs(cy - fromCY) : Math.abs(cx - fromCX)
|
|
return { el, overlap, dist }
|
|
})
|
|
|
|
scored.sort((a, b) => {
|
|
const isVertical = direction === 'up' || direction === 'down'
|
|
// For vertical nav: prefer closest element first, use overlap as tiebreaker.
|
|
// This prevents a distant full-width element from winning over a closer narrow one.
|
|
if (isVertical) {
|
|
// Both have overlap — prefer closer distance
|
|
if (a.overlap > 0 && b.overlap > 0) {
|
|
if (a.dist !== b.dist) return a.dist - b.dist
|
|
if (b.overlap !== a.overlap) return b.overlap - a.overlap
|
|
return a.el.getBoundingClientRect().left - b.el.getBoundingClientRect().left
|
|
}
|
|
// One has overlap, the other doesn't — prefer the one with overlap
|
|
if (a.overlap !== b.overlap) return b.overlap - a.overlap
|
|
return a.dist - b.dist
|
|
}
|
|
// Horizontal: overlap first (same row), then distance
|
|
if (b.overlap !== a.overlap) return b.overlap - a.overlap
|
|
return a.dist - b.dist
|
|
})
|
|
|
|
return scored[0]?.el ?? null
|
|
}
|
|
|
|
// ─── Focus Memory ───────────────────────────────────────────────
|
|
|
|
const zoneFocusMemory = new Map<string, HTMLElement>()
|
|
|
|
function rememberFocus(zone: string, el: HTMLElement) {
|
|
zoneFocusMemory.set(zone, el)
|
|
}
|
|
|
|
function recallFocus(zone: string): HTMLElement | null {
|
|
const el = zoneFocusMemory.get(zone)
|
|
if (!el) return null
|
|
if (document.contains(el) && el.offsetParent !== null) return el
|
|
zoneFocusMemory.delete(zone)
|
|
return null
|
|
}
|
|
|
|
// ─── Focus Helper ───────────────────────────────────────────────
|
|
|
|
function focusEl(el: HTMLElement, sound: 'move' | 'action' | 'back' = 'move') {
|
|
playNavSound(sound)
|
|
el.focus({ preventScroll: true })
|
|
el.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
|
|
}
|
|
|
|
// ─── Main Composable ────────────────────────────────────────────
|
|
|
|
export function useControllerNav(containerRef?: { value: HTMLElement | null }) {
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const store = useControllerStore()
|
|
const isControllerActive = ref(false)
|
|
const gamepadCount = ref(0)
|
|
|
|
watch([isControllerActive, gamepadCount], () => {
|
|
store.setActive(isControllerActive.value)
|
|
store.setGamepadCount(gamepadCount.value)
|
|
}, { immediate: true })
|
|
|
|
let keyNavTimeout: ReturnType<typeof setTimeout> | null = null
|
|
let pollIntervalId: ReturnType<typeof setInterval> | null = null
|
|
|
|
function checkGamepads() {
|
|
const gamepads = navigator.getGamepads?.()
|
|
const count = gamepads ? Array.from(gamepads).filter(g => g?.connected).length : 0
|
|
if (count !== gamepadCount.value) {
|
|
gamepadCount.value = count
|
|
isControllerActive.value = count > 0
|
|
}
|
|
}
|
|
|
|
// ─── Keyboard Handler ───────────────────────────────────────
|
|
|
|
function handleKeyDown(e: KeyboardEvent) {
|
|
const navKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Enter', 'Escape']
|
|
if (!navKeys.includes(e.key)) return
|
|
|
|
const target = e.target as HTMLElement
|
|
const activeEl = document.activeElement as HTMLElement
|
|
|
|
// ── TEXT INPUT HANDLING ──────────────────────────────────
|
|
if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
|
|
if (e.key === 'Enter' && target.tagName === 'INPUT' && (target as HTMLInputElement).type !== 'submit') {
|
|
// Enter in input: click next button (submit pattern)
|
|
e.preventDefault()
|
|
const all = getFocusableElements(containerRef?.value ?? document)
|
|
const idx = all.indexOf(target)
|
|
const next = idx >= 0 ? all[idx + 1] : undefined
|
|
if (next && (next.tagName === 'BUTTON' || next.getAttribute('role') === 'button')) {
|
|
next.focus()
|
|
next.click()
|
|
} else if (next) {
|
|
next.focus()
|
|
}
|
|
return
|
|
}
|
|
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
|
|
// Up/Down: exit field, navigate spatially
|
|
e.preventDefault()
|
|
const dir = e.key === 'ArrowDown' ? 'down' as const : 'up' as const
|
|
const all = getFocusableElements(containerRef?.value ?? document)
|
|
const candidates = all.filter(el => el !== target)
|
|
const nearest = findNearestInDirection(target, candidates, dir)
|
|
if (nearest) {
|
|
focusEl(nearest)
|
|
} else {
|
|
// Spatial nav failed — try containers directly (e.g. search bar → first container)
|
|
const containers = getContainers()
|
|
const containerNearest = containers.length
|
|
? findNearestInDirection(target, containers, dir)
|
|
: null
|
|
if (containerNearest) {
|
|
focusEl(containerNearest)
|
|
} else {
|
|
// Last fallback: tab order
|
|
const idx = all.indexOf(target)
|
|
const fallback = dir === 'down' ? all[idx + 1] : all[idx - 1]
|
|
if (fallback) focusEl(fallback)
|
|
}
|
|
}
|
|
return
|
|
}
|
|
// Left/Right: cursor movement in field, but exit at edges
|
|
if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
|
|
const input = target as HTMLInputElement
|
|
const atStart = input.selectionStart === 0 && input.selectionEnd === 0
|
|
const atEnd = input.selectionStart === (input.value?.length ?? 0)
|
|
if ((e.key === 'ArrowLeft' && atStart) || (e.key === 'ArrowRight' && atEnd)) {
|
|
e.preventDefault()
|
|
const dir = e.key === 'ArrowLeft' ? 'left' as const : 'right' as const
|
|
const all = getFocusableElements(containerRef?.value ?? document)
|
|
const candidates = all.filter(el => el !== target)
|
|
const nearest = findNearestInDirection(target, candidates, dir)
|
|
if (nearest) focusEl(nearest)
|
|
}
|
|
return
|
|
}
|
|
// Other keys (Escape): handled below.
|
|
if (e.key !== 'Escape') return
|
|
}
|
|
|
|
// ── CLOSE OVERLAYS (Escape) ─────────────────────────────
|
|
if (e.key === 'Escape') {
|
|
if (useAppLauncherStore().isOpen) { useAppLauncherStore().close(); e.preventDefault(); return }
|
|
if (useSpotlightStore().isOpen) { useSpotlightStore().close(); e.preventDefault(); return }
|
|
if (useCLIStore().isOpen) { useCLIStore().close(); e.preventDefault(); return }
|
|
|
|
// Inside container inner controls → exit to container
|
|
if (isInsideContainer(activeEl)) {
|
|
const container = activeEl.closest('[data-controller-container]') as HTMLElement | null
|
|
if (container && container.tabIndex >= 0) {
|
|
focusEl(container, 'back')
|
|
e.preventDefault()
|
|
return
|
|
}
|
|
}
|
|
|
|
// On a container or anywhere in main → go to sidebar
|
|
if (isInZone(activeEl, 'main')) {
|
|
const sidebar = getSidebarElements()
|
|
const sidebarZone = document.querySelector('[data-controller-zone="sidebar"]')
|
|
const activeTab = sidebarZone?.querySelector<HTMLElement>('.nav-tab-active')
|
|
const target = activeTab ?? sidebar[0]
|
|
if (target) {
|
|
rememberFocus('main', activeEl)
|
|
focusEl(target, 'back')
|
|
e.preventDefault()
|
|
}
|
|
return
|
|
}
|
|
|
|
// Detail pages: go back
|
|
if (/\/apps\/[^/]+$|\/marketplace\/[^/]+$|\/cloud\/[^/]+$/.test(route.path)) {
|
|
playNavSound('back')
|
|
window.history.back()
|
|
e.preventDefault()
|
|
}
|
|
return
|
|
}
|
|
|
|
// ── ENTER ───────────────────────────────────────────────
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault()
|
|
|
|
if (isContainer(activeEl)) {
|
|
// Prioritised action: install button
|
|
if (activeEl.hasAttribute('data-controller-install')) {
|
|
const btn = activeEl.querySelector<HTMLButtonElement>('[data-controller-install-btn]:not([disabled])')
|
|
if (btn) { playNavSound('action'); btn.click(); return }
|
|
}
|
|
// Prioritised action: launch button
|
|
if (activeEl.hasAttribute('data-controller-launch')) {
|
|
const btn = activeEl.querySelector<HTMLButtonElement>('[data-controller-launch-btn]:not([disabled])')
|
|
if (btn) { playNavSound('action'); btn.click(); return }
|
|
}
|
|
// Primary link (e.g. dashboard cards with a[href])
|
|
const primaryLink = activeEl.querySelector<HTMLElement>('a[href]')
|
|
if (primaryLink) {
|
|
playNavSound('action')
|
|
primaryLink.click()
|
|
return
|
|
}
|
|
// Fallback: first non-disabled action button (skip uninstall/delete buttons)
|
|
const inner = getInnerFocusables(activeEl)
|
|
const actionBtn = inner.find(el =>
|
|
(el.tagName === 'BUTTON' || el.getAttribute('role') === 'button') &&
|
|
!el.getAttribute('aria-label')?.toLowerCase().includes('uninstall') &&
|
|
!el.closest('[class*="absolute top"]')
|
|
) ?? inner[0]
|
|
if (actionBtn) {
|
|
focusEl(actionBtn, 'action')
|
|
return
|
|
}
|
|
// Last resort: click the container itself (triggers goToApp on AppCard)
|
|
playNavSound('action')
|
|
activeEl.click()
|
|
return
|
|
}
|
|
|
|
// Regular element: click it
|
|
if (activeEl) {
|
|
playNavSound('action')
|
|
activeEl.click()
|
|
}
|
|
return
|
|
}
|
|
|
|
// ── ARROW KEYS ──────────────────────────────────────────
|
|
if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) return
|
|
e.preventDefault()
|
|
|
|
// Mark controller as active
|
|
isControllerActive.value = true
|
|
if (keyNavTimeout) clearTimeout(keyNavTimeout)
|
|
keyNavTimeout = setTimeout(() => { isControllerActive.value = gamepadCount.value > 0 }, 3000)
|
|
|
|
const dir = e.key === 'ArrowLeft' ? 'left' as const
|
|
: e.key === 'ArrowRight' ? 'right' as const
|
|
: e.key === 'ArrowUp' ? 'up' as const
|
|
: 'down' as const
|
|
|
|
// ── SIDEBAR ─────────────────────────────────────────────
|
|
if (isInZone(activeEl, 'sidebar')) {
|
|
const items = getSidebarElements()
|
|
const idx = items.indexOf(activeEl)
|
|
|
|
if (dir === 'up' || dir === 'down') {
|
|
// Linear wrap
|
|
if (idx < 0) return
|
|
const nextIdx = dir === 'down'
|
|
? (idx >= items.length - 1 ? 0 : idx + 1)
|
|
: (idx <= 0 ? items.length - 1 : idx - 1)
|
|
const next = items[nextIdx]
|
|
if (next && next !== activeEl) {
|
|
focusEl(next)
|
|
// Auto-navigate sidebar links (not buttons — Logout etc. require Enter)
|
|
if (next.tagName === 'A') {
|
|
const href = (next as HTMLAnchorElement).getAttribute('href')
|
|
if (href?.startsWith('/')) router.push(href).catch(() => {})
|
|
}
|
|
}
|
|
return
|
|
}
|
|
|
|
if (dir === 'right') {
|
|
// Jump to first container in main
|
|
rememberFocus('sidebar', activeEl)
|
|
const remembered = recallFocus('main')
|
|
// Only use remembered if it's a container (not a nav bar button)
|
|
const target = (remembered && isContainer(remembered)) ? remembered : null
|
|
const containers = getContainers()
|
|
const dest = target ?? containers[0]
|
|
if (dest) {
|
|
focusEl(dest)
|
|
} else {
|
|
// Containers not rendered yet (route transition / animation in progress)
|
|
// Poll until they appear, up to 1s
|
|
let attempts = 0
|
|
const poll = setInterval(() => {
|
|
attempts++
|
|
const retryContainers = getContainers()
|
|
if (retryContainers[0]) {
|
|
clearInterval(poll)
|
|
focusEl(retryContainers[0])
|
|
} else if (attempts >= 10) {
|
|
clearInterval(poll)
|
|
// No containers on this page (e.g. Settings) — focus first focusable element
|
|
const z = document.querySelector('[data-controller-zone="main"]') as HTMLElement | null
|
|
if (z) { const f = getFocusableElements(z); if (f[0]) focusEl(f[0]) }
|
|
}
|
|
}, 100)
|
|
}
|
|
return
|
|
}
|
|
|
|
// Left from sidebar: does nothing
|
|
return
|
|
}
|
|
|
|
// ── INSIDE CONTAINER (inner controls) ───────────────────
|
|
if (isInsideContainer(activeEl)) {
|
|
const container = activeEl.closest('[data-controller-container]') as HTMLElement
|
|
const inner = getInnerFocusables(container)
|
|
const next = findNearestInDirection(activeEl, inner, dir)
|
|
if (next) focusEl(next)
|
|
// Can't leave container via arrows — must use Escape
|
|
return
|
|
}
|
|
|
|
// ── NAV BAR [N] — secondary controls above the grid ────
|
|
if (isNavBarItem(activeEl)) {
|
|
const navItems = getNavBarItems()
|
|
|
|
if (dir === 'left' || dir === 'right') {
|
|
// Spatial nav between nav bar items
|
|
const next = findNearestInDirection(activeEl, navItems, dir)
|
|
if (next) { focusEl(next); return }
|
|
// Left from leftmost nav item → sidebar
|
|
if (dir === 'left') {
|
|
const sidebarZone = document.querySelector('[data-controller-zone="sidebar"]')
|
|
const activeTab = sidebarZone?.querySelector<HTMLElement>('.nav-tab-active')
|
|
const target = activeTab ?? getSidebarElements()[0]
|
|
if (target) focusEl(target)
|
|
}
|
|
return
|
|
}
|
|
|
|
if (dir === 'down') {
|
|
// Down from nav bar → jump to containers (remember tab for Up return)
|
|
rememberFocus('navBar', activeEl)
|
|
const containers = getContainers()
|
|
const nearest = findNearestInDirection(activeEl, containers, 'down')
|
|
if (nearest) { rememberFocus('main', nearest); focusEl(nearest); return }
|
|
// Fallback: just focus first container
|
|
if (containers[0]) { rememberFocus('main', containers[0]); focusEl(containers[0]); return }
|
|
// Containers not rendered yet — poll until they appear
|
|
let attempts = 0
|
|
const poll = setInterval(() => {
|
|
attempts++
|
|
const retryContainers = getContainers()
|
|
if (retryContainers[0]) {
|
|
clearInterval(poll)
|
|
rememberFocus('main', retryContainers[0])
|
|
focusEl(retryContainers[0])
|
|
} else if (attempts >= 10) {
|
|
clearInterval(poll)
|
|
}
|
|
}, 100)
|
|
return
|
|
}
|
|
|
|
// Up from nav bar → nothing (use Escape to go to sidebar)
|
|
return
|
|
}
|
|
|
|
// ── MAIN ZONE: CONTAINER TILE GRID [C] ──────────────────
|
|
if (isInZone(activeEl, 'main')) {
|
|
const containers = getContainers()
|
|
|
|
// Try spatial nav to another container
|
|
const next = findNearestInDirection(activeEl, containers, dir)
|
|
if (next) {
|
|
rememberFocus('main', next)
|
|
focusEl(next)
|
|
return
|
|
}
|
|
|
|
// Up from top-row container → nav bar, or previous focusable (linear pages like Settings)
|
|
if (dir === 'up') {
|
|
const remembered = recallFocus('navBar')
|
|
if (remembered) { focusEl(remembered); return }
|
|
const navItems = getNavBarItems()
|
|
if (navItems.length) {
|
|
const nearest = findNearestInDirection(activeEl, navItems, 'up')
|
|
if (nearest) { focusEl(nearest); return }
|
|
const first = navItems[0]
|
|
if (first) { focusEl(first); return }
|
|
}
|
|
// No nav bar items — try any focusable element above (linear page nav)
|
|
const zone = document.querySelector('[data-controller-zone="main"]') as HTMLElement | null
|
|
if (zone) {
|
|
const allFocusable = getFocusableElements(zone).filter(el =>
|
|
el.hasAttribute('data-controller-container') ||
|
|
!el.closest('[data-controller-container]')
|
|
)
|
|
const above = findNearestInDirection(activeEl, allFocusable, 'up')
|
|
if (above) { rememberFocus('main', above); focusEl(above) }
|
|
}
|
|
return
|
|
}
|
|
|
|
// Left from leftmost container → sidebar
|
|
if (dir === 'left') {
|
|
rememberFocus('main', activeEl)
|
|
const remembered = recallFocus('sidebar')
|
|
const sidebarZone = document.querySelector('[data-controller-zone="sidebar"]')
|
|
const activeTab = sidebarZone?.querySelector<HTMLElement>('.nav-tab-active')
|
|
const target = remembered ?? activeTab ?? getSidebarElements()[0]
|
|
if (target) focusEl(target)
|
|
return
|
|
}
|
|
|
|
// At grid edges: try containers + nav bar items as fallback
|
|
// (prevents dead ends, but never jumps into container inner controls)
|
|
if (dir === 'down' || dir === 'right') {
|
|
const zone = document.querySelector('[data-controller-zone="main"]') as HTMLElement | null
|
|
if (zone) {
|
|
const allFocusable = getFocusableElements(zone).filter(el =>
|
|
el.hasAttribute('data-controller-container') ||
|
|
!el.closest('[data-controller-container]')
|
|
)
|
|
const fallback = findNearestInDirection(activeEl, allFocusable, dir)
|
|
if (fallback) {
|
|
rememberFocus('main', fallback)
|
|
focusEl(fallback)
|
|
}
|
|
}
|
|
}
|
|
return
|
|
}
|
|
|
|
// ── FALLBACK: unhandled focusable element ───────────────
|
|
// Covers standalone buttons/links in empty/error states, modals, etc.
|
|
// that aren't inside a recognized zone or container.
|
|
if (dir === 'left') {
|
|
const sidebar = getSidebarElements()
|
|
const sidebarZone = document.querySelector('[data-controller-zone="sidebar"]')
|
|
const activeTab = sidebarZone?.querySelector<HTMLElement>('.nav-tab-active')
|
|
const target = activeTab ?? sidebar[0]
|
|
if (target) { rememberFocus('main', activeEl); focusEl(target) }
|
|
} else {
|
|
// Exclude container inner buttons to prevent focus getting lost
|
|
const all = getFocusableElements().filter(el =>
|
|
el.hasAttribute('data-controller-container') ||
|
|
!el.closest('[data-controller-container]')
|
|
)
|
|
const next = findNearestInDirection(activeEl, all, dir)
|
|
if (next) focusEl(next)
|
|
}
|
|
}
|
|
|
|
// ─── Gamepad Detection ──────────────────────────────────────
|
|
|
|
function handleGamepadConnected() {
|
|
const gamepads = navigator.getGamepads?.()
|
|
gamepadCount.value = gamepads ? Array.from(gamepads).filter(g => g?.connected).length : 1
|
|
isControllerActive.value = true
|
|
}
|
|
|
|
function handleGamepadDisconnected() {
|
|
const gamepads = navigator.getGamepads?.()
|
|
gamepadCount.value = gamepads ? Array.from(gamepads).filter(g => g?.connected).length : 0
|
|
isControllerActive.value = gamepadCount.value > 0
|
|
}
|
|
|
|
// ─── Scroll Support ────────────────────────────────────────
|
|
|
|
function handleWheel(e: WheelEvent) {
|
|
const active = document.activeElement as HTMLElement | null
|
|
if (!active) return
|
|
let p = active.parentElement
|
|
while (p) {
|
|
const style = getComputedStyle(p)
|
|
if ((style.overflowY === 'auto' || style.overflowY === 'scroll') && p.scrollHeight > p.clientHeight) {
|
|
if (e.deltaY !== 0) { p.scrollTop += e.deltaY; e.preventDefault() }
|
|
return
|
|
}
|
|
p = p.parentElement
|
|
}
|
|
}
|
|
|
|
// ─── Auto-Focus on Route Change ────────────────────────────
|
|
|
|
function autoFocusMain() {
|
|
const active = document.activeElement as HTMLElement | null
|
|
// Don't steal focus from inputs, modals, or sidebar
|
|
if (active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA')) return
|
|
if (document.querySelector('[role="dialog"]')) return
|
|
if (isInZone(active, 'sidebar')) return
|
|
|
|
requestAnimationFrame(() => {
|
|
// Re-check sidebar after RAF — user may still be navigating
|
|
if (isInZone(document.activeElement as HTMLElement, 'sidebar')) return
|
|
const remembered = recallFocus('main')
|
|
if (remembered) { remembered.focus({ preventScroll: true }); return }
|
|
const containers = getContainers()
|
|
if (containers[0]) containers[0].focus({ preventScroll: true })
|
|
})
|
|
}
|
|
|
|
watch(() => route.path, () => {
|
|
zoneFocusMemory.delete('main')
|
|
zoneFocusMemory.delete('navBar')
|
|
setTimeout(autoFocusMain, 150)
|
|
})
|
|
|
|
// ─── Lifecycle ─────────────────────────────────────────────
|
|
|
|
onMounted(() => {
|
|
checkGamepads()
|
|
window.addEventListener('keydown', handleKeyDown, true)
|
|
window.addEventListener('wheel', handleWheel, { passive: false })
|
|
window.addEventListener('gamepadconnected', handleGamepadConnected)
|
|
window.addEventListener('gamepaddisconnected', handleGamepadDisconnected)
|
|
pollIntervalId = setInterval(() => checkGamepads(), 500)
|
|
setTimeout(autoFocusMain, 300)
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('keydown', handleKeyDown, true)
|
|
window.removeEventListener('wheel', handleWheel)
|
|
window.removeEventListener('gamepadconnected', handleGamepadConnected)
|
|
window.removeEventListener('gamepaddisconnected', handleGamepadDisconnected)
|
|
if (pollIntervalId) clearInterval(pollIntervalId)
|
|
if (keyNavTimeout) clearTimeout(keyNavTimeout)
|
|
})
|
|
|
|
return { isControllerActive, gamepadCount }
|
|
}
|