From b54839ee7442e83c2b372ecac7b3e18520e01d23 Mon Sep 17 00:00:00 2001
From: DerEchteAlec <bycraky@gmail.com>
Date: Wed, 12 Aug 2026 18:59:33 +0200
Subject: [PATCH] FIX - make phone input and overlays CEF safe

---
 frontend/src/components/AppIcon.vue           |  62 +++++++---
 frontend/src/components/DarkChatSelect.vue    |   5 +-
 frontend/src/components/EasyShareSheet.vue    |  30 +++--
 frontend/src/components/SpringboardWidget.vue |  62 +++++++---
 .../src/components/SpringboardWidgetGrid.vue  |   3 +
 .../components/citymarkt/CityMarktSelect.vue  |   3 +
 frontend/src/utils/homeLayout.test.ts         |  10 ++
 frontend/src/utils/homeLayout.ts              |  30 +++++
 frontend/src/utils/keyboard.test.ts           |  98 +++++++++++++++
 frontend/src/utils/keyboard.ts                |  47 ++++++++
 frontend/src/utils/musicEscape.test.ts        |  38 ++++++
 frontend/src/utils/musicEscape.ts             |  22 ++++
 frontend/src/utils/widgetLayout.test.ts       |  16 +++
 frontend/src/utils/widgetLayout.ts            |  27 +++++
 frontend/src/views/SpringboardView.vue        |  30 +++++
 frontend/src/views/apps/BankingApp.vue        | 113 +++++++++++++-----
 frontend/src/views/apps/CompaniesApp.vue      |   3 +-
 frontend/src/views/apps/CrewLinkApp.vue       |  37 +++++-
 frontend/src/views/apps/DarkChatApp.vue       |   5 +-
 frontend/src/views/apps/FeatherApp.vue        | 101 +++++++++++++++-
 frontend/src/views/apps/FlareApp.vue          |  20 +++-
 frontend/src/views/apps/MapApp.vue            |   3 +-
 frontend/src/views/apps/MessagesApp.vue       |   3 +-
 frontend/src/views/apps/MusicApp.vue          |  74 ++++++++----
 24 files changed, 730 insertions(+), 112 deletions(-)
 create mode 100644 frontend/src/utils/keyboard.test.ts
 create mode 100644 frontend/src/utils/keyboard.ts
 create mode 100644 frontend/src/utils/musicEscape.test.ts
 create mode 100644 frontend/src/utils/musicEscape.ts

diff --git a/frontend/src/components/AppIcon.vue b/frontend/src/components/AppIcon.vue
index 17fb331..8e2da12 100644
--- a/frontend/src/components/AppIcon.vue
+++ b/frontend/src/components/AppIcon.vue
@@ -12,6 +12,10 @@ import { useMarketplaceStore } from '@/stores/marketplace'
 import { useDarkChatStore } from '@/stores/darkchat'
 import { usePhoneStore } from '@/stores/phone'
 import type { PhoneAppDefinition } from '@/types/apps'
+import {
+  reorderDirectionFromKeyboard,
+  type ReorderDirection,
+} from '@/utils/keyboard'
 
 const props = withDefaults(
   defineProps<{
@@ -33,6 +37,7 @@ const emit = defineEmits<{
   dragstart: [event: PointerEvent]
   edit: []
   remove: []
+  reorder: [direction: ReorderDirection]
 }>()
 
 const phone = usePhoneStore()
@@ -65,6 +70,8 @@ const suppressClick = ref(false)
 let holdTimer: number | undefined
 let calendarTimer: number | undefined
 let pointerStart = { x: 0, y: 0 }
+let pointerTarget: HTMLElement | null = null
+let pointerId: number | null = null
 
 watch(
   () => props.app.iconImage,
@@ -135,6 +142,9 @@ function clearHold(): void {
 
 function onPointerDown(event: PointerEvent): void {
   if (props.compact || event.button !== 0) return
+  pointerTarget = event.currentTarget as HTMLElement
+  pointerId = event.pointerId
+  pointerTarget.setPointerCapture(pointerId)
   pointerStart = { x: event.clientX, y: event.clientY }
   clearHold()
   if (props.editMode) {
@@ -173,35 +183,48 @@ function beginPointerDrag(event: PointerEvent): void {
       .closest<HTMLElement>('.springboard-page')
       ?.getBoundingClientRect().width ?? 0
   isDragging.value = true
-  window.addEventListener('pointermove', onPointerMove)
-  window.addEventListener('pointerup', onPointerUp)
-  window.addEventListener('pointercancel', cancelPointerDrag)
   emit('dragstart', event)
 }
 
 function onPointerUp(event: PointerEvent): void {
   clearHold()
-  if (!isDragging.value) return
-  suppressClick.value = true
-  emit('dragend', event)
-  isDragging.value = false
-  dragOffset.value = { x: 0, y: 0 }
-  removeDragListeners()
+  if (isDragging.value) {
+    suppressClick.value = true
+    emit('dragend', event)
+    isDragging.value = false
+    dragOffset.value = { x: 0, y: 0 }
+  }
+  releasePointerCapture()
 }
 
 function cancelPointerDrag(): void {
   clearHold()
-  if (!isDragging.value) return
+  const wasDragging = isDragging.value
   isDragging.value = false
   dragOffset.value = { x: 0, y: 0 }
-  removeDragListeners()
-  emit('dragcancel')
+  releasePointerCapture()
+  if (wasDragging) emit('dragcancel')
 }
 
-function removeDragListeners(): void {
-  window.removeEventListener('pointermove', onPointerMove)
-  window.removeEventListener('pointerup', onPointerUp)
-  window.removeEventListener('pointercancel', cancelPointerDrag)
+function releasePointerCapture(): void {
+  if (
+    pointerTarget &&
+    pointerId !== null &&
+    pointerTarget.hasPointerCapture(pointerId)
+  ) {
+    pointerTarget.releasePointerCapture(pointerId)
+  }
+  pointerTarget = null
+  pointerId = null
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  if (!props.editMode) return
+  const direction = reorderDirectionFromKeyboard(event)
+  if (!direction) return
+  event.preventDefault()
+  event.stopPropagation()
+  emit('reorder', direction)
 }
 
 onMounted(() => {
@@ -214,7 +237,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
   clearHold()
   if (calendarTimer !== undefined) window.clearInterval(calendarTimer)
-  removeDragListeners()
+  releasePointerCapture()
 })
 </script>
 
@@ -234,10 +257,15 @@ onBeforeUnmount(() => {
       type="button"
       :aria-label="getPhoneAppLabel(app, phone.t)"
       :aria-disabled="!app.route"
+      :aria-keyshortcuts="
+        editMode ? 'ArrowLeft ArrowRight ArrowUp ArrowDown' : undefined
+      "
       @click="launch"
       @contextmenu.prevent
+      @keydown="onKeydown"
       @pointercancel="cancelPointerDrag"
       @pointerdown="onPointerDown"
+      @lostpointercapture="cancelPointerDrag"
       @pointerleave="isDragging || clearHold()"
       @pointermove="onPointerMove"
       @pointerup="onPointerUp"
diff --git a/frontend/src/components/DarkChatSelect.vue b/frontend/src/components/DarkChatSelect.vue
index 804ae57..baa33d1 100644
--- a/frontend/src/components/DarkChatSelect.vue
+++ b/frontend/src/components/DarkChatSelect.vue
@@ -35,7 +35,10 @@ function closeFromOutside(event: PointerEvent): void {
 }
 
 function closeFromEscape(event: KeyboardEvent): void {
-  if (event.key === 'Escape') opened.value = false
+  if (event.key !== 'Escape' || !opened.value) return
+  event.preventDefault()
+  event.stopPropagation()
+  opened.value = false
 }
 
 onMounted(() => {
diff --git a/frontend/src/components/EasyShareSheet.vue b/frontend/src/components/EasyShareSheet.vue
index 9e83d30..48da343 100644
--- a/frontend/src/components/EasyShareSheet.vue
+++ b/frontend/src/components/EasyShareSheet.vue
@@ -9,7 +9,7 @@ import {
   UserRound,
   X,
 } from 'lucide-vue-next'
-import { computed, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { getPhoneApp, getPhoneAppLabel } from '@/config/apps'
@@ -30,6 +30,7 @@ import {
   easyShareDestinationAppIds,
   openEasySharePayload,
 } from '@/utils/easyshare'
+import { consumeEscape } from '@/utils/keyboard'
 
 const phone = usePhoneStore()
 const appStore = useAppStoreStore()
@@ -113,11 +114,8 @@ const shareApps = computed(() =>
       return app ? [{ app, id }] : []
     }),
 )
-const sheetStyle = computed(() => ({
-  transform: easyShare.opened
-    ? `translateY(calc(-100% + ${dragOffset.value}px))`
-    : undefined,
-  transitionDuration: dragging.value ? '0ms' : undefined,
+const hostStyle = computed(() => ({
+  '--easyshare-drag-offset': `${dragOffset.value}px`,
 }))
 
 function label(key: string, params?: Record<string, string>): string {
@@ -155,6 +153,11 @@ function close(): void {
   easyShare.close()
 }
 
+function onKeydown(event: KeyboardEvent): void {
+  if (!easyShare.opened || !consumeEscape(event)) return
+  close()
+}
+
 function beginDrag(event: PointerEvent): void {
   if (!easyShare.opened || event.button !== 0) return
   dragPointerId = event.pointerId
@@ -240,17 +243,22 @@ async function openTransfer(transfer: EasyShareTransfer): Promise<void> {
   close()
   await openEasySharePayload(router, transfer.payload)
 }
+
+onMounted(() => window.addEventListener('keydown', onKeydown, true))
+onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown, true))
 </script>
 
 <template>
   <div
     class="easyshare-host"
-    :class="{ 'easyshare-host--opened': easyShare.opened }"
+    :class="{
+      'easyshare-host--dragging': dragging,
+      'easyshare-host--opened': easyShare.opened,
+    }"
+    :style="hostStyle"
   >
     <k-sheet
       :opened="easyShare.opened"
-      class="easyshare-sheet"
-      :style="sheetStyle"
       @backdropclick="close"
     >
       <div class="easyshare-panel">
@@ -407,7 +415,9 @@ async function openTransfer(transfer: EasyShareTransfer): Promise<void> {
 </template>
 
 <style scoped>
-.easyshare-host{position:absolute;z-index:95;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;transform:translateZ(0)}.easyshare-host--opened{pointer-events:auto}.easyshare-sheet{z-index:9500;width:100%;max-width:none}.easyshare-panel{position:relative;max-height:78cqh;overflow:hidden;padding:8px 14px calc(18px + var(--k-safe-area-bottom));border-radius:30px 30px 0 0;color:var(--easyshare-text,#f7f7f7);background:color-mix(in srgb,var(--k-ios-dark-surface-1,#1c1c1e) 92%,transparent);backdrop-filter:blur(32px) saturate(1.45);-webkit-backdrop-filter:blur(32px) saturate(1.45)}.phone-app--light .easyshare-panel{--easyshare-text:#171719;background:color-mix(in srgb,#f2f2f7 93%,transparent)}.easyshare-grabber{width:38px;height:5px;margin:0 auto 10px;border-radius:999px;background:#8e8e9390;cursor:grab;touch-action:none}.easyshare-grabber:active{cursor:grabbing}.easyshare-header{display:grid;grid-template-columns:54px 1fr;align-items:center;gap:11px;padding:5px 2px 14px;border-bottom:1px solid #8e8e9345}.easyshare-header>img,.easyshare-header__fallback{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;object-fit:cover;background:#0a84ff;color:white}.easyshare-header div{min-width:0}.easyshare-header small,.easyshare-header strong,.easyshare-header p{display:block;overflow:hidden;margin:0;text-overflow:ellipsis;white-space:nowrap}.easyshare-header small{font-size:11px;color:#8e8e93}.easyshare-header strong{font-size:17px}.easyshare-header p{margin-top:2px;font-size:12px;color:#a1a1a6}.easyshare-row{display:flex;gap:12px;overflow-x:auto;padding:16px 2px;scrollbar-width:none}.easyshare-row::-webkit-scrollbar{display:none}.easyshare-row+.easyshare-row{border-top:1px solid #8e8e9345}.easyshare-row--people{min-height:114px;align-items:flex-start}.easyshare-person,.easyshare-action{width:68px;flex:0 0 68px;display:flex;flex-direction:column;align-items:center;gap:7px;color:inherit;text-align:center}.easyshare-person{min-height:98px;gap:14px}.easyshare-person small,.easyshare-action small{position:relative;z-index:3;display:-webkit-box;width:72px;max-height:26px;min-height:26px;overflow:hidden;font-size:11px;line-height:13px;text-overflow:ellipsis;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2}.easyshare-avatar{position:relative;isolation:isolate;width:58px;height:58px;flex:0 0 58px;border-radius:50%;display:grid;place-items:center;overflow:visible;background:linear-gradient(145deg,#6e6e73,#2c2c2e);color:white}.easyshare-avatar>img{position:absolute;z-index:0;inset:0;display:block;width:58px;height:58px;max-width:none;border-radius:50%;clip-path:circle(50% at 50% 50%);object-fit:cover}.easyshare-avatar>b{position:relative;z-index:1;font-size:17px}.easyshare-avatar>i{position:absolute;z-index:2;right:-2px;bottom:-2px;width:20px;height:20px;border:2px solid #1c1c1e;border-radius:7px;display:grid;place-items:center;overflow:hidden;background:#34c759;color:white}.easyshare-avatar>i img{width:100%;height:100%;object-fit:cover}.easyshare-action__icon,.easyshare-action__app{width:57px;height:57px;border-radius:15px;display:grid;place-items:center;background:#ffffff20}.easyshare-action__icon svg{width:27px}.easyshare-action__icon--nearby{background:radial-gradient(circle at 50% 70%,#0a84ff 0 15%,#142d59 16% 29%,#0a84ff 30% 35%,#101722 36%);color:white}.easyshare-action__app img{width:100%;height:100%;border-radius:inherit;object-fit:cover}.easyshare-detail{min-height:245px;max-height:56cqh;overflow-y:auto;padding-top:8px}.easyshare-detail__toolbar{height:37px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.easyshare-detail__toolbar>:last-child{justify-self:end}.easyshare-visibility{display:flex;align-items:center;gap:8px;margin:8px 0 12px;padding:10px 12px;border-radius:14px;background:#ffffff14}.easyshare-visibility select{min-width:0;flex:1;border:0;color:inherit;background:transparent;text-align:right}.easyshare-incoming,.easyshare-transfer{display:grid!important;grid-template-columns:auto 1fr;align-items:center;gap:10px;margin:10px 0;padding:12px!important;border-radius:18px!important}.easyshare-incoming div,.easyshare-transfer div{min-width:0}.easyshare-incoming small,.easyshare-transfer small{display:block;color:#a1a1a6}.easyshare-incoming__actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}.easyshare-incoming__actions :deep(.button){margin:0}.easyshare-transfer{grid-template-columns:1fr auto}.easyshare-progress{grid-column:1/-1;height:6px;overflow:hidden;border-radius:999px;background:#8e8e9340}.easyshare-progress i{display:block;height:100%;border-radius:inherit;background:#0a84ff;transition:width .25s ease}.easyshare-targets{display:grid;gap:7px}.easyshare-targets button,.easyshare-history article{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;padding:9px 10px;border-radius:14px;color:inherit;background:#ffffff10;text-align:left}.easyshare-targets button>span,.easyshare-history article>span{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:#0a84ff;color:white}.easyshare-targets strong,.easyshare-targets small,.easyshare-history strong,.easyshare-history small{display:block}.easyshare-targets small,.easyshare-history small{color:#a1a1a6;font-size:11px}.easyshare-history{display:grid;gap:7px;padding-top:8px}.easyshare-empty,.easyshare-loading{padding:35px 10px;text-align:center;color:#8e8e93}.easyshare-feedback{margin:8px 0 0;text-align:center;color:#0a84ff;font-size:12px}
+.easyshare-host{position:absolute;z-index:95;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;transform:translateZ(0)}.easyshare-host--opened{pointer-events:auto}.easyshare-panel{position:relative;max-height:78cqh;overflow:hidden;padding:8px 14px calc(18px + var(--k-safe-area-bottom));border-radius:30px 30px 0 0;color:var(--easyshare-text,#f7f7f7);background:color-mix(in srgb,var(--k-ios-dark-surface-1,#1c1c1e) 92%,transparent);backdrop-filter:blur(32px) saturate(1.45);-webkit-backdrop-filter:blur(32px) saturate(1.45)}.phone-app--light .easyshare-panel{--easyshare-text:#171719;background:color-mix(in srgb,#f2f2f7 93%,transparent)}.easyshare-grabber{width:38px;height:5px;margin:0 auto 10px;border-radius:999px;background:#8e8e9390;cursor:grab;touch-action:none}.easyshare-grabber:active{cursor:grabbing}.easyshare-header{display:grid;grid-template-columns:54px 1fr;align-items:center;gap:11px;padding:5px 2px 14px;border-bottom:1px solid #8e8e9345}.easyshare-header>img,.easyshare-header__fallback{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;object-fit:cover;background:#0a84ff;color:white}.easyshare-header div{min-width:0}.easyshare-header small,.easyshare-header strong,.easyshare-header p{display:block;overflow:hidden;margin:0;text-overflow:ellipsis;white-space:nowrap}.easyshare-header small{font-size:11px;color:#8e8e93}.easyshare-header strong{font-size:17px}.easyshare-header p{margin-top:2px;font-size:12px;color:#a1a1a6}.easyshare-row{display:flex;gap:12px;overflow-x:auto;padding:16px 2px;scrollbar-width:none}.easyshare-row::-webkit-scrollbar{display:none}.easyshare-row+.easyshare-row{border-top:1px solid #8e8e9345}.easyshare-row--people{min-height:114px;align-items:flex-start}.easyshare-person,.easyshare-action{width:68px;flex:0 0 68px;display:flex;flex-direction:column;align-items:center;gap:7px;color:inherit;text-align:center}.easyshare-person{min-height:98px;gap:14px}.easyshare-person small,.easyshare-action small{position:relative;z-index:3;display:-webkit-box;width:72px;max-height:26px;min-height:26px;overflow:hidden;font-size:11px;line-height:13px;text-overflow:ellipsis;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2}.easyshare-avatar{position:relative;isolation:isolate;width:58px;height:58px;flex:0 0 58px;border-radius:50%;display:grid;place-items:center;overflow:visible;background:linear-gradient(145deg,#6e6e73,#2c2c2e);color:white}.easyshare-avatar>img{position:absolute;z-index:0;inset:0;display:block;width:58px;height:58px;max-width:none;border-radius:50%;clip-path:circle(50% at 50% 50%);object-fit:cover}.easyshare-avatar>b{position:relative;z-index:1;font-size:17px}.easyshare-avatar>i{position:absolute;z-index:2;right:-2px;bottom:-2px;width:20px;height:20px;border:2px solid #1c1c1e;border-radius:7px;display:grid;place-items:center;overflow:hidden;background:#34c759;color:white}.easyshare-avatar>i img{width:100%;height:100%;object-fit:cover}.easyshare-action__icon,.easyshare-action__app{width:57px;height:57px;border-radius:15px;display:grid;place-items:center;background:#ffffff20}.easyshare-action__icon svg{width:27px}.easyshare-action__icon--nearby{background:radial-gradient(circle at 50% 70%,#0a84ff 0 15%,#142d59 16% 29%,#0a84ff 30% 35%,#101722 36%);color:white}.easyshare-action__app img{width:100%;height:100%;border-radius:inherit;object-fit:cover}.easyshare-detail{min-height:245px;max-height:56cqh;overflow-y:auto;padding-top:8px}.easyshare-detail__toolbar{height:37px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.easyshare-detail__toolbar>:last-child{justify-self:end}.easyshare-visibility{display:flex;align-items:center;gap:8px;margin:8px 0 12px;padding:10px 12px;border-radius:14px;background:#ffffff14}.easyshare-visibility select{min-width:0;flex:1;border:0;color:inherit;background:transparent;text-align:right}.easyshare-incoming,.easyshare-transfer{display:grid!important;grid-template-columns:auto 1fr;align-items:center;gap:10px;margin:10px 0;padding:12px!important;border-radius:18px!important}.easyshare-incoming div,.easyshare-transfer div{min-width:0}.easyshare-incoming small,.easyshare-transfer small{display:block;color:#a1a1a6}.easyshare-incoming__actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}.easyshare-incoming__actions :deep(.button){margin:0}.easyshare-transfer{grid-template-columns:1fr auto}.easyshare-progress{grid-column:1/-1;height:6px;overflow:hidden;border-radius:999px;background:#8e8e9340}.easyshare-progress i{display:block;height:100%;border-radius:inherit;background:#0a84ff;transition:width .25s ease}.easyshare-targets{display:grid;gap:7px}.easyshare-targets button,.easyshare-history article{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;padding:9px 10px;border-radius:14px;color:inherit;background:#ffffff10;text-align:left}.easyshare-targets button>span,.easyshare-history article>span{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:#0a84ff;color:white}.easyshare-targets strong,.easyshare-targets small,.easyshare-history strong,.easyshare-history small{display:block}.easyshare-targets small,.easyshare-history small{color:#a1a1a6;font-size:11px}.easyshare-history{display:grid;gap:7px;padding-top:8px}.easyshare-empty,.easyshare-loading{padding:35px 10px;text-align:center;color:#8e8e93}.easyshare-feedback{margin:8px 0 0;text-align:center;color:#0a84ff;font-size:12px}
+.easyshare-host :deep(.k-sheet){z-index:9500;width:100%;max-width:none}.easyshare-host--opened :deep(.k-sheet){transform:translateY(calc(-100% + var(--easyshare-drag-offset,0px)))}.easyshare-host--dragging :deep(.k-sheet){transition-duration:0ms}.easyshare-panel{max-height:645px;background:rgb(28 28 30 / 92%)}.phone-app--light .easyshare-panel{background:rgb(242 242 247 / 93%)}.easyshare-detail{max-height:463px}.easyshare-targets button>div,.easyshare-history article>div{min-width:0}.easyshare-targets strong,.easyshare-targets small,.easyshare-history strong,.easyshare-history small{overflow-wrap:anywhere}
+@supports (container-type: size){.easyshare-panel{max-height:78cqh}.easyshare-detail{max-height:56cqh}}
 .easyshare-action__icon--nearby {
   position: relative;
   overflow: hidden;
diff --git a/frontend/src/components/SpringboardWidget.vue b/frontend/src/components/SpringboardWidget.vue
index f851a42..a69d3d1 100644
--- a/frontend/src/components/SpringboardWidget.vue
+++ b/frontend/src/components/SpringboardWidget.vue
@@ -31,6 +31,10 @@ import { useCallsStore } from '@/stores/calls'
 import { useMessagesStore } from '@/stores/messages'
 import { usePhoneStore } from '@/stores/phone'
 import type { WidgetInstance } from '@/types/widgets'
+import {
+  reorderDirectionFromKeyboard,
+  type ReorderDirection,
+} from '@/utils/keyboard'
 import type { WeatherConditionId } from '@/types/weather'
 import { WIDGET_SPANS } from '@/utils/widgetLayout'
 
@@ -50,6 +54,7 @@ const emit = defineEmits<{
   dragstart: [event: PointerEvent]
   menu: []
   remove: []
+  reorder: [direction: ReorderDirection]
 }>()
 
 const phone = usePhoneStore()
@@ -68,6 +73,8 @@ let holdTimer: number | undefined
 let pointerStart = { x: 0, y: 0 }
 let dragStartPage = 0
 let dragPageWidth = 0
+let pointerTarget: HTMLElement | null = null
+let pointerId: number | null = null
 
 const weatherIcons: Record<WeatherConditionId, Component> = {
   sunny: Sun,
@@ -173,6 +180,9 @@ function onPointerDown(event: PointerEvent): void {
   ) {
     return
   }
+  pointerTarget = event.currentTarget as HTMLElement
+  pointerId = event.pointerId
+  pointerTarget.setPointerCapture(pointerId)
   pointerStart = { x: event.clientX, y: event.clientY }
   clearHold()
   if (props.editMode) {
@@ -210,35 +220,48 @@ function beginDrag(event: PointerEvent): void {
       .closest<HTMLElement>('.springboard-page')
       ?.getBoundingClientRect().width ?? 0
   isDragging.value = true
-  window.addEventListener('pointermove', onPointerMove)
-  window.addEventListener('pointerup', onPointerUp)
-  window.addEventListener('pointercancel', cancelDrag)
   emit('dragstart', event)
 }
 
 function onPointerUp(event: PointerEvent): void {
   clearHold()
-  if (!isDragging.value) return
-  suppressClick.value = true
-  emit('dragend', event)
-  isDragging.value = false
-  dragOffset.value = { x: 0, y: 0 }
-  removeDragListeners()
+  if (isDragging.value) {
+    suppressClick.value = true
+    emit('dragend', event)
+    isDragging.value = false
+    dragOffset.value = { x: 0, y: 0 }
+  }
+  releasePointerCapture()
 }
 
 function cancelDrag(): void {
   clearHold()
-  if (!isDragging.value) return
+  const wasDragging = isDragging.value
   isDragging.value = false
   dragOffset.value = { x: 0, y: 0 }
-  removeDragListeners()
-  emit('dragcancel')
+  releasePointerCapture()
+  if (wasDragging) emit('dragcancel')
 }
 
-function removeDragListeners(): void {
-  window.removeEventListener('pointermove', onPointerMove)
-  window.removeEventListener('pointerup', onPointerUp)
-  window.removeEventListener('pointercancel', cancelDrag)
+function releasePointerCapture(): void {
+  if (
+    pointerTarget &&
+    pointerId !== null &&
+    pointerTarget.hasPointerCapture(pointerId)
+  ) {
+    pointerTarget.releasePointerCapture(pointerId)
+  }
+  pointerTarget = null
+  pointerId = null
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  if (!props.editMode) return
+  const direction = reorderDirectionFromKeyboard(event)
+  if (!direction) return
+  event.preventDefault()
+  event.stopPropagation()
+  emit('reorder', direction)
 }
 
 function openWidget(): void {
@@ -276,7 +299,7 @@ async function messageContact(phoneNumber: string): Promise<void> {
 
 onBeforeUnmount(() => {
   clearHold()
-  removeDragListeners()
+  releasePointerCapture()
 })
 </script>
 
@@ -300,9 +323,14 @@ onBeforeUnmount(() => {
       :class="`home-widget--${instance.kind}`"
       role="button"
       tabindex="0"
+      :aria-keyshortcuts="
+        editMode ? 'ArrowLeft ArrowRight ArrowUp ArrowDown' : undefined
+      "
       @click="openWidget"
       @contextmenu.prevent
+      @keydown="onKeydown"
       @keydown.enter="openWidget"
+      @lostpointercapture="cancelDrag"
       @pointercancel="cancelDrag"
       @pointerdown="onPointerDown"
       @pointerleave="isDragging || clearHold()"
diff --git a/frontend/src/components/SpringboardWidgetGrid.vue b/frontend/src/components/SpringboardWidgetGrid.vue
index 70bd954..a11399e 100644
--- a/frontend/src/components/SpringboardWidgetGrid.vue
+++ b/frontend/src/components/SpringboardWidgetGrid.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue'
 
 import SpringboardWidget from '@/components/SpringboardWidget.vue'
 import { useWidgetsStore } from '@/stores/widgets'
+import type { ReorderDirection } from '@/utils/keyboard'
 import { WIDGET_HOME_ROWS, WIDGET_PAGE_ROWS } from '@/utils/widgetLayout'
 
 const props = defineProps<{
@@ -17,6 +18,7 @@ const emit = defineEmits<{
   dragstart: [id: string, event: PointerEvent]
   menu: [id: string]
   remove: [id: string]
+  reorder: [id: string, direction: ReorderDirection]
 }>()
 const widgets = useWidgetsStore()
 const rows = computed(() =>
@@ -51,6 +53,7 @@ const instances = computed(() =>
       @dragstart="emit('dragstart', instance.id, $event)"
       @menu="emit('menu', instance.id)"
       @remove="emit('remove', instance.id)"
+      @reorder="emit('reorder', instance.id, $event)"
     />
   </div>
 </template>
diff --git a/frontend/src/components/citymarkt/CityMarktSelect.vue b/frontend/src/components/citymarkt/CityMarktSelect.vue
index c673714..4df61b7 100644
--- a/frontend/src/components/citymarkt/CityMarktSelect.vue
+++ b/frontend/src/components/citymarkt/CityMarktSelect.vue
@@ -41,6 +41,9 @@ function select(value: string): void {
 
 function handleKeydown(event: KeyboardEvent): void {
   if (event.key === 'Escape') {
+    if (!isOpen.value) return
+    event.preventDefault()
+    event.stopPropagation()
     isOpen.value = false
     return
   }
diff --git a/frontend/src/utils/homeLayout.test.ts b/frontend/src/utils/homeLayout.test.ts
index 72602c6..e0767f8 100644
--- a/frontend/src/utils/homeLayout.test.ts
+++ b/frontend/src/utils/homeLayout.test.ts
@@ -5,6 +5,7 @@ import {
   createDefaultHomeLayout,
   deleteHomePage,
   HOME_GRID_PAGE_SIZE,
+  homeKeyboardTarget,
   MAX_HOME_GRID_PAGES,
   moveHomeApp,
   parseHomeLayout,
@@ -134,6 +135,15 @@ describe('home layout', () => {
     expect(moved.grid[4]).toBe('notes')
   })
 
+  it('provides bounded keyboard reorder targets without wrapping rows', () => {
+    expect(homeKeyboardTarget(defaults, 'grid', 1, 'right')).toBe(2)
+    expect(homeKeyboardTarget(defaults, 'grid', 3, 'right')).toBeNull()
+    expect(homeKeyboardTarget(defaults, 'grid', 0, 'up')).toBeNull()
+    expect(homeKeyboardTarget(defaults, 'grid', 0, 'down')).toBe(4)
+    expect(homeKeyboardTarget(defaults, 'dock', 1, 'left')).toBe(0)
+    expect(homeKeyboardTarget(defaults, 'dock', 1, 'down')).toBeNull()
+  })
+
   it('shifts occupied grid slots instead of replacing their apps', () => {
     const reordered = moveHomeApp(defaults, 'grid', 2, 'grid', 0)
     expect(reordered.grid.slice(0, 5)).toEqual([
diff --git a/frontend/src/utils/homeLayout.ts b/frontend/src/utils/homeLayout.ts
index 01bb146..6f01235 100644
--- a/frontend/src/utils/homeLayout.ts
+++ b/frontend/src/utils/homeLayout.ts
@@ -1,6 +1,8 @@
 import type { LaunchablePhoneAppId } from '@/types/apps'
+import type { ReorderDirection } from '@/utils/keyboard'
 
 export const HOME_DOCK_CAPACITY = 4
+export const HOME_GRID_COLUMNS = 4
 export const HOME_GRID_PAGE_SIZE = 20
 export const MAX_HOME_GRID_PAGES = 5
 
@@ -304,3 +306,31 @@ export function moveHomeApp(
   source[sourceIndex] = insertIntoSlot(target, targetIndex, appId)
   return next
 }
+
+export function homeKeyboardTarget(
+  layout: HomeLayout,
+  area: HomeArea,
+  sourceIndex: number,
+  direction: ReorderDirection,
+): number | null {
+  const source = layout[area]
+  if (!source[sourceIndex]) return null
+
+  if (area === 'dock') {
+    if (direction !== 'left' && direction !== 'right') return null
+    const targetIndex = sourceIndex + (direction === 'left' ? -1 : 1)
+    return targetIndex >= 0 && targetIndex < source.length ? targetIndex : null
+  }
+
+  const column = sourceIndex % HOME_GRID_COLUMNS
+  if (direction === 'left' && column === 0) return null
+  if (direction === 'right' && column === HOME_GRID_COLUMNS - 1) return null
+  const deltas: Record<ReorderDirection, number> = {
+    down: HOME_GRID_COLUMNS,
+    left: -1,
+    right: 1,
+    up: -HOME_GRID_COLUMNS,
+  }
+  const targetIndex = sourceIndex + deltas[direction]
+  return targetIndex >= 0 && targetIndex < source.length ? targetIndex : null
+}
diff --git a/frontend/src/utils/keyboard.test.ts b/frontend/src/utils/keyboard.test.ts
new file mode 100644
index 0000000..f6b1df9
--- /dev/null
+++ b/frontend/src/utils/keyboard.test.ts
@@ -0,0 +1,98 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import {
+  consumeEscape,
+  handleEnterAction,
+  reorderDirectionFromKeyboard,
+} from '@/utils/keyboard'
+
+describe('keyboard interaction', () => {
+  it('does not submit while an IME composition is active', () => {
+    const action = vi.fn()
+    const preventDefault = vi.fn()
+
+    expect(
+      handleEnterAction({ isComposing: true, preventDefault }, action),
+    ).toBe(false)
+    expect(action).not.toHaveBeenCalled()
+    expect(preventDefault).not.toHaveBeenCalled()
+  })
+
+  it('prevents the completed Enter key and runs its action once', () => {
+    const action = vi.fn()
+    const preventDefault = vi.fn()
+
+    expect(
+      handleEnterAction({ isComposing: false, preventDefault }, action),
+    ).toBe(true)
+    expect(preventDefault).toHaveBeenCalledOnce()
+    expect(action).toHaveBeenCalledOnce()
+  })
+
+  it('consumes only an unhandled Escape outside IME composition', () => {
+    const preventDefault = vi.fn()
+    const stopImmediatePropagation = vi.fn()
+
+    expect(
+      consumeEscape({
+        defaultPrevented: false,
+        isComposing: false,
+        key: 'Escape',
+        preventDefault,
+        stopImmediatePropagation,
+      }),
+    ).toBe(true)
+    expect(preventDefault).toHaveBeenCalledOnce()
+    expect(stopImmediatePropagation).toHaveBeenCalledOnce()
+
+    expect(
+      consumeEscape({
+        defaultPrevented: false,
+        isComposing: true,
+        key: 'Escape',
+        preventDefault,
+        stopImmediatePropagation,
+      }),
+    ).toBe(false)
+  })
+
+  it('blocks a second Escape owner on the same event target', () => {
+    const target = new EventTarget()
+    const rootHandler = vi.fn()
+    target.addEventListener('keydown', (event) => {
+      consumeEscape(event as KeyboardEvent)
+    })
+    target.addEventListener('keydown', rootHandler)
+    const event = new Event('keydown', { cancelable: true })
+    Object.defineProperties(event, {
+      isComposing: { value: false },
+      key: { value: 'Escape' },
+    })
+
+    target.dispatchEvent(event)
+
+    expect(event.defaultPrevented).toBe(true)
+    expect(rootHandler).not.toHaveBeenCalled()
+  })
+
+  it('maps only unmodified arrow keys to reorder directions', () => {
+    expect(
+      reorderDirectionFromKeyboard({
+        altKey: false,
+        ctrlKey: false,
+        isComposing: false,
+        key: 'ArrowLeft',
+        metaKey: false,
+      }),
+    ).toBe('left')
+    expect(
+      reorderDirectionFromKeyboard({
+        altKey: false,
+        ctrlKey: true,
+        isComposing: false,
+        key: 'ArrowLeft',
+        metaKey: false,
+      }),
+    ).toBeNull()
+  })
+})
diff --git a/frontend/src/utils/keyboard.ts b/frontend/src/utils/keyboard.ts
new file mode 100644
index 0000000..7d0cbbc
--- /dev/null
+++ b/frontend/src/utils/keyboard.ts
@@ -0,0 +1,47 @@
+export type ReorderDirection = 'down' | 'left' | 'right' | 'up'
+
+export function consumeEscape(
+  event: Pick<
+    KeyboardEvent,
+    | 'defaultPrevented'
+    | 'isComposing'
+    | 'key'
+    | 'preventDefault'
+    | 'stopImmediatePropagation'
+  >,
+): boolean {
+  if (event.key !== 'Escape' || event.isComposing || event.defaultPrevented) {
+    return false
+  }
+  event.preventDefault()
+  event.stopImmediatePropagation()
+  return true
+}
+
+export function handleEnterAction(
+  event: Pick<KeyboardEvent, 'isComposing' | 'preventDefault'>,
+  action: () => unknown,
+): boolean {
+  if (event.isComposing) return false
+  event.preventDefault()
+  void action()
+  return true
+}
+
+export function reorderDirectionFromKeyboard(
+  event: Pick<
+    KeyboardEvent,
+    'altKey' | 'ctrlKey' | 'isComposing' | 'key' | 'metaKey'
+  >,
+): ReorderDirection | null {
+  if (event.isComposing || event.altKey || event.ctrlKey || event.metaKey) {
+    return null
+  }
+  const directions: Partial<Record<string, ReorderDirection>> = {
+    ArrowDown: 'down',
+    ArrowLeft: 'left',
+    ArrowRight: 'right',
+    ArrowUp: 'up',
+  }
+  return directions[event.key] ?? null
+}
diff --git a/frontend/src/utils/musicEscape.test.ts b/frontend/src/utils/musicEscape.test.ts
new file mode 100644
index 0000000..47111f2
--- /dev/null
+++ b/frontend/src/utils/musicEscape.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest'
+
+import { musicEscapeLayer } from '@/utils/musicEscape'
+
+const closedState = {
+  actionMenuOpened: false,
+  activeSheet: false,
+  addMenuOpened: false,
+  confirmDeletePlaylist: false,
+  confirmRemoveTrack: false,
+  playerOpened: false,
+}
+
+describe('music Escape ownership', () => {
+  it('owns Escape while either music popover is open', () => {
+    expect(
+      musicEscapeLayer({ ...closedState, addMenuOpened: true }),
+    ).toBe('menu')
+    expect(
+      musicEscapeLayer({ ...closedState, actionMenuOpened: true }),
+    ).toBe('menu')
+  })
+
+  it('keeps a real form sheet above menus and the player', () => {
+    expect(
+      musicEscapeLayer({
+        ...closedState,
+        activeSheet: true,
+        addMenuOpened: true,
+        playerOpened: true,
+      }),
+    ).toBe('sheet')
+  })
+
+  it('does not claim Escape with no music overlay open', () => {
+    expect(musicEscapeLayer(closedState)).toBeNull()
+  })
+})
diff --git a/frontend/src/utils/musicEscape.ts b/frontend/src/utils/musicEscape.ts
new file mode 100644
index 0000000..b6afd04
--- /dev/null
+++ b/frontend/src/utils/musicEscape.ts
@@ -0,0 +1,22 @@
+export type MusicEscapeLayer =
+  | 'delete-playlist-confirmation'
+  | 'menu'
+  | 'player'
+  | 'remove-track-confirmation'
+  | 'sheet'
+
+export function musicEscapeLayer(state: {
+  actionMenuOpened: boolean
+  activeSheet: boolean
+  addMenuOpened: boolean
+  confirmDeletePlaylist: boolean
+  confirmRemoveTrack: boolean
+  playerOpened: boolean
+}): MusicEscapeLayer | null {
+  if (state.confirmRemoveTrack) return 'remove-track-confirmation'
+  if (state.confirmDeletePlaylist) return 'delete-playlist-confirmation'
+  if (state.activeSheet) return 'sheet'
+  if (state.addMenuOpened || state.actionMenuOpened) return 'menu'
+  if (state.playerOpened) return 'player'
+  return null
+}
diff --git a/frontend/src/utils/widgetLayout.test.ts b/frontend/src/utils/widgetLayout.test.ts
index aac1d6f..38f80a3 100644
--- a/frontend/src/utils/widgetLayout.test.ts
+++ b/frontend/src/utils/widgetLayout.test.ts
@@ -9,6 +9,7 @@ import {
   removeWidget,
   resizeWidget,
   widgetOccupiedCells,
+  widgetKeyboardTarget,
 } from '@/utils/widgetLayout'
 
 describe('widget layout', () => {
@@ -47,6 +48,21 @@ describe('widget layout', () => {
     expect(next.instances).toHaveLength(layout.instances.length)
   })
 
+  it('provides bounded keyboard targets for each widget size', () => {
+    const layout = createDefaultWidgetLayout()
+    const clock = layout.instances.find(
+      (instance) => instance.id === 'home-clock',
+    )!
+    const music = layout.instances.find(
+      (instance) => instance.id === 'home-music',
+    )!
+
+    expect(widgetKeyboardTarget(clock, 'right')).toEqual({ column: 1, row: 0 })
+    expect(widgetKeyboardTarget(clock, 'up')).toBeNull()
+    expect(widgetKeyboardTarget(music, 'right')).toBeNull()
+    expect(widgetKeyboardTarget(music, 'down')).toEqual({ column: 0, row: 3 })
+  })
+
   it('allows a small widget in the center with app cells on both sides', () => {
     const layout = createDefaultWidgetLayout()
     const moved = moveWidget(layout, 'home-clock', 2, 1, 1)
diff --git a/frontend/src/utils/widgetLayout.ts b/frontend/src/utils/widgetLayout.ts
index 71182be..5b6dc54 100644
--- a/frontend/src/utils/widgetLayout.ts
+++ b/frontend/src/utils/widgetLayout.ts
@@ -6,6 +6,7 @@ import type {
   WidgetSettings,
   WidgetSize,
 } from '@/types/widgets'
+import type { ReorderDirection } from '@/utils/keyboard'
 
 export const WIDGET_GRID_COLUMNS = 4
 export const WIDGET_HOME_ROWS = 5
@@ -296,6 +297,32 @@ export function moveWidget(
   return { instances: placed, version: 1 }
 }
 
+export function widgetKeyboardTarget(
+  instance: WidgetInstance,
+  direction: ReorderDirection,
+): { column: number; row: number } | null {
+  const span = WIDGET_SPANS[instance.size]
+  const maximumColumn = WIDGET_GRID_COLUMNS - span.columns
+  const maximumRow = rowsForPage(instance.page) - span.rows
+  const target = {
+    column:
+      instance.column +
+      (direction === 'left' ? -1 : direction === 'right' ? 1 : 0),
+    row:
+      instance.row +
+      (direction === 'up' ? -1 : direction === 'down' ? 1 : 0),
+  }
+  if (
+    target.column < 0 ||
+    target.column > maximumColumn ||
+    target.row < 0 ||
+    target.row > maximumRow
+  ) {
+    return null
+  }
+  return target
+}
+
 export function resizeWidget(
   layout: WidgetLayout,
   id: string,
diff --git a/frontend/src/views/SpringboardView.vue b/frontend/src/views/SpringboardView.vue
index aa02bf4..65331af 100644
--- a/frontend/src/views/SpringboardView.vue
+++ b/frontend/src/views/SpringboardView.vue
@@ -17,13 +17,16 @@ import type { WidgetKind, WidgetSettings, WidgetSize } from '@/types/widgets'
 import {
   deleteHomePage as previewHomePageDelete,
   HOME_GRID_PAGE_SIZE,
+  homeKeyboardTarget,
   MAX_HOME_GRID_PAGES,
   type HomeArea,
 } from '@/utils/homeLayout'
+import type { ReorderDirection } from '@/utils/keyboard'
 import {
   deleteWidgetPage as previewWidgetPageDelete,
   moveWidget as previewWidgetMove,
   WIDGET_GRID_COLUMNS,
+  widgetKeyboardTarget,
   widgetOccupiedCells,
 } from '@/utils/widgetLayout'
 
@@ -515,6 +518,14 @@ function stopWidgetDrag(): void {
   clearWidgetDragPreview()
 }
 
+function reorderWidget(id: string, direction: ReorderDirection): void {
+  const instance = widgets.layout.instances.find((widget) => widget.id === id)
+  if (!instance) return
+  const target = widgetKeyboardTarget(instance, direction)
+  if (!target) return
+  widgets.move(id, instance.page, target.column, target.row)
+}
+
 function removeWidget(id: string): void {
   widgets.remove(id)
   if (widgetActionId.value === id) widgetActionId.value = null
@@ -620,6 +631,21 @@ function stopHomeDrag(): void {
   draggingHomeApp.value = null
 }
 
+function reorderHomeApp(
+  area: HomeArea,
+  sourceIndex: number,
+  direction: ReorderDirection,
+): void {
+  const targetIndex = homeKeyboardTarget(
+    appStore.homeLayout,
+    area,
+    sourceIndex,
+    direction,
+  )
+  if (targetIndex === null) return
+  appStore.moveHomeApp(area, sourceIndex, area, targetIndex)
+}
+
 async function addHomePage(): Promise<void> {
   if (addingHomePage.value) return
   addingHomePage.value = true
@@ -704,6 +730,7 @@ watch(isEditablePage, (visible) => {
             @dragstart="startWidgetDrag"
             @menu="openWidgetMenu"
             @remove="removeWidget"
+            @reorder="reorderWidget"
           />
         </div>
       </section>
@@ -725,6 +752,7 @@ watch(isEditablePage, (visible) => {
           @dragstart="startWidgetDrag"
           @menu="openWidgetMenu"
           @remove="removeWidget"
+          @reorder="reorderWidget"
         />
         <TransitionGroup
           :name="
@@ -750,6 +778,7 @@ watch(isEditablePage, (visible) => {
               @dragstart="startHomeDrag('grid', cell.sourceIndex)"
               @edit="enterEditMode"
               @remove="removeHomeApp(cell.app.id)"
+              @reorder="reorderHomeApp('grid', cell.sourceIndex, $event)"
             />
             <div
               v-else
@@ -946,6 +975,7 @@ watch(isEditablePage, (visible) => {
             @dragstart="startHomeDrag('dock', appIndex)"
             @edit="enterEditMode"
             @remove="removeHomeApp(app.id)"
+            @reorder="reorderHomeApp('dock', appIndex, $event)"
           />
           <div
             v-else
diff --git a/frontend/src/views/apps/BankingApp.vue b/frontend/src/views/apps/BankingApp.vue
index 46c4ce4..25b4c9a 100644
--- a/frontend/src/views/apps/BankingApp.vue
+++ b/frontend/src/views/apps/BankingApp.vue
@@ -40,6 +40,7 @@ import type {
   BankingTransactionKind,
 } from '@/types/banking'
 import type { PhoneContact } from '@/types/phone'
+import { handleEnterAction } from '@/utils/keyboard'
 import { formatPhoneNumber, normalizePhoneNumber } from '@/utils/phone'
 
 type BankingTab = 'home' | 'activity'
@@ -153,7 +154,9 @@ function closeAction(): void {
 
 function updateTarget(event: Event): void {
   if (!(event.target instanceof HTMLInputElement)) {
-    console.error('[banking] Phone number input emitted without an input target.')
+    console.error(
+      '[banking] Phone number input emitted without an input target.',
+    )
     return
   }
   target.value = event.target.value
@@ -163,7 +166,9 @@ function updateTarget(event: Event): void {
 function selectContact(contact: PhoneContact): void {
   target.value = contact.phone_number
   formError.value = ''
-  void nextTick(() => document.getElementById('banking-transfer-amount')?.focus())
+  void nextTick(() =>
+    document.getElementById('banking-transfer-amount')?.focus(),
+  )
 }
 
 function updateAmount(event: Event): void {
@@ -237,6 +242,7 @@ function focusableSheetElements(): HTMLElement[] {
 function handleSheetKeydown(event: KeyboardEvent): void {
   if (event.key === 'Escape') {
     event.preventDefault()
+    event.stopPropagation()
     closeAction()
     return
   }
@@ -258,6 +264,15 @@ function handleSheetKeydown(event: KeyboardEvent): void {
   }
 }
 
+function handleWindowKeydown(event: KeyboardEvent): void {
+  if (event.key !== 'Escape' || !action.value || event.defaultPrevented) {
+    return
+  }
+  event.preventDefault()
+  event.stopImmediatePropagation()
+  closeAction()
+}
+
 function errorMessage(code: string): string {
   return phone.t(`Apps.banking.errors.${code}`) ===
     `Apps.banking.errors.${code}`
@@ -268,9 +283,8 @@ function errorMessage(code: string): string {
 async function submitAction(): Promise<void> {
   if (!action.value) return
   const parsedAmount = Number(amount.value)
-  const phoneNumber = action.value === 'transfer'
-    ? normalizePhoneNumber(target.value)
-    : undefined
+  const phoneNumber =
+    action.value === 'transfer' ? normalizePhoneNumber(target.value) : undefined
   if (
     !Number.isSafeInteger(parsedAmount) ||
     parsedAmount <= 0 ||
@@ -291,13 +305,17 @@ async function submitAction(): Promise<void> {
   action.value = null
 }
 
-onMounted(() => void banking.load())
+onMounted(() => {
+  window.addEventListener('keydown', handleWindowKeydown)
+  void banking.load()
+})
 
 watch(action, async (currentAction) => {
   if (currentAction) {
-    previousFocus = document.activeElement instanceof HTMLElement
-      ? document.activeElement
-      : null
+    previousFocus =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null
     await nextTick()
     document.getElementById('banking-transfer-target')?.focus()
     return
@@ -307,6 +325,7 @@ watch(action, async (currentAction) => {
 })
 
 onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handleWindowKeydown)
   if (wheelRefreshTimeout) clearTimeout(wheelRefreshTimeout)
   previousFocus?.focus()
 })
@@ -379,12 +398,17 @@ onBeforeUnmount(() => {
           </div>
           <strong>{{ formatMoney(banking.overview.bank) }}</strong>
           <div class="banking-balance__trend">
-            <span>{{ formatMoney(totals.incoming - totals.outgoing, true) }}</span>
+            <span>{{
+              formatMoney(totals.incoming - totals.outgoing, true)
+            }}</span>
             {{ phone.t('Apps.banking.recentPeriod') }}
           </div>
         </k-glass>
 
-        <section class="banking-actions" :aria-label="phone.t('Apps.banking.actions')">
+        <section
+          class="banking-actions"
+          :aria-label="phone.t('Apps.banking.actions')"
+        >
           <k-glass
             component="button"
             type="button"
@@ -435,17 +459,27 @@ onBeforeUnmount(() => {
           >
             <k-list inset strong class="banking-transaction-list">
               <k-list-item
-              v-for="transaction in banking.overview.transactions.slice(0, 5)"
-              :key="transaction.id"
+                v-for="transaction in banking.overview.transactions.slice(0, 5)"
+                :key="transaction.id"
                 :subtitle="formatDate(transaction.createdAt)"
                 :title="transactionTitle(transaction)"
               >
                 <template #media>
-                  <component :is="transactionIcons[transaction.kind]" :size="17" />
+                  <component
+                    :is="transactionIcons[transaction.kind]"
+                    :size="17"
+                  />
                 </template>
                 <template #after>
                   <b :class="{ 'is-incoming': isIncoming(transaction.kind) }">
-                    {{ formatMoney(isIncoming(transaction.kind) ? transaction.amount : -transaction.amount, true) }}
+                    {{
+                      formatMoney(
+                        isIncoming(transaction.kind)
+                          ? transaction.amount
+                          : -transaction.amount,
+                        true,
+                      )
+                    }}
                   </b>
                 </template>
               </k-list-item>
@@ -460,13 +494,18 @@ onBeforeUnmount(() => {
       <template v-else>
         <section class="banking-activity-hero">
           <span>{{ phone.t('Apps.banking.activity') }}</span>
-          <strong>{{ formatMoney(totals.incoming - totals.outgoing, true) }}</strong>
+          <strong>{{
+            formatMoney(totals.incoming - totals.outgoing, true)
+          }}</strong>
           <small>{{ phone.t('Apps.banking.recentPeriod') }}</small>
         </section>
 
         <k-card :content-wrap="false" class="banking-card banking-chart-card">
           <div class="banking-chart-legend">
-            <span><i class="is-incoming"></i>{{ phone.t('Apps.banking.incoming') }}</span>
+            <span
+              ><i class="is-incoming"></i
+              >{{ phone.t('Apps.banking.incoming') }}</span
+            >
             <span><i></i>{{ phone.t('Apps.banking.outgoing') }}</span>
           </div>
           <div class="banking-chart">
@@ -475,14 +514,19 @@ onBeforeUnmount(() => {
               :key="day.date.getTime()"
               class="banking-chart__day"
               role="img"
-              :aria-label="phone.t('Apps.banking.chartDaySummary', {
-                day: day.label,
-                incoming: formatMoney(day.incoming),
-                outgoing: formatMoney(day.outgoing),
-              })"
+              :aria-label="
+                phone.t('Apps.banking.chartDaySummary', {
+                  day: day.label,
+                  incoming: formatMoney(day.incoming),
+                  outgoing: formatMoney(day.outgoing),
+                })
+              "
             >
               <div>
-                <i class="is-incoming" :style="{ height: `${day.incomingHeight}%` }"></i>
+                <i
+                  class="is-incoming"
+                  :style="{ height: `${day.incomingHeight}%` }"
+                ></i>
                 <i :style="{ height: `${day.outgoingHeight}%` }"></i>
               </div>
               <span>{{ day.label }}</span>
@@ -494,7 +538,10 @@ onBeforeUnmount(() => {
           <div class="banking-section-title">
             <h2>{{ phone.t('Apps.banking.allTransactions') }}</h2>
           </div>
-          <k-card :content-wrap="false" class="banking-card banking-transaction-card">
+          <k-card
+            :content-wrap="false"
+            class="banking-card banking-transaction-card"
+          >
             <k-list inset strong class="banking-transaction-list">
               <k-list-item
                 v-for="transaction in banking.overview.transactions"
@@ -503,11 +550,21 @@ onBeforeUnmount(() => {
                 :title="transactionTitle(transaction)"
               >
                 <template #media>
-                  <component :is="transactionIcons[transaction.kind]" :size="17" />
+                  <component
+                    :is="transactionIcons[transaction.kind]"
+                    :size="17"
+                  />
                 </template>
                 <template #after>
                   <b :class="{ 'is-incoming': isIncoming(transaction.kind) }">
-                    {{ formatMoney(isIncoming(transaction.kind) ? transaction.amount : -transaction.amount, true) }}
+                    {{
+                      formatMoney(
+                        isIncoming(transaction.kind)
+                          ? transaction.amount
+                          : -transaction.amount,
+                        true,
+                      )
+                    }}
                   </b>
                 </template>
               </k-list-item>
@@ -553,7 +610,7 @@ onBeforeUnmount(() => {
       </k-toolbar-pane>
     </k-tabbar>
 
-    <k-sheet :opened="Boolean(action)" class="banking-sheet" @backdropclick="closeAction">
+    <k-sheet :opened="Boolean(action)" @backdropclick="closeAction">
       <section
         v-if="action"
         class="banking-sheet__content"
@@ -600,7 +657,7 @@ onBeforeUnmount(() => {
             type="number"
             :value="amount"
             @input="updateAmount"
-            @keydown.enter="submitAction"
+            @keydown.enter="handleEnterAction($event, submitAction)"
           />
         </k-list>
         <div class="banking-contact-picker">
diff --git a/frontend/src/views/apps/CompaniesApp.vue b/frontend/src/views/apps/CompaniesApp.vue
index 42cfe1a..66c8cf7 100644
--- a/frontend/src/views/apps/CompaniesApp.vue
+++ b/frontend/src/views/apps/CompaniesApp.vue
@@ -94,6 +94,7 @@ import type {
   CompanySummary,
 } from '@/types/companies'
 import type { PhoneMedia } from '@/types/media'
+import { handleEnterAction } from '@/utils/keyboard'
 import { nuiCall } from '@/utils/nui'
 
 type CompaniesTab = 'directory' | 'requests' | 'work'
@@ -1764,7 +1765,7 @@ onBeforeUnmount(() => {
           :placeholder="phone.t('Apps.companies.requests.replyPlaceholder')"
           :value="threadDraft"
           @input="threadDraft = messagebarValue($event)"
-          @keydown.enter.exact.prevent="sendThreadMessage"
+          @keydown.enter.exact="handleEnterAction($event, sendThreadMessage)"
         >
           <template #right>
             <k-toolbar-pane class="ios:h-10">
diff --git a/frontend/src/views/apps/CrewLinkApp.vue b/frontend/src/views/apps/CrewLinkApp.vue
index 9680cd4..bc9962f 100644
--- a/frontend/src/views/apps/CrewLinkApp.vue
+++ b/frontend/src/views/apps/CrewLinkApp.vue
@@ -82,6 +82,7 @@ import type {
 } from '@/types/crewlink'
 import { copyText } from '@/utils/clipboard'
 import { easyShareCrewLinkInviteCode } from '@/utils/easyshare'
+import { consumeEscape, handleEnterAction } from '@/utils/keyboard'
 import { nuiCall } from '@/utils/nui'
 import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 
@@ -699,7 +700,30 @@ function onCrewLinkMessage(event: MessageEvent): void {
   if (event.data?.type === 'crewlink:changed') void crew.bootstrap()
 }
 
+function onKeydown(event: KeyboardEvent): void {
+  if (
+    !confirmAction.value &&
+    !sheet.value &&
+    !selectedMember.value &&
+    !selectedPing.value
+  ) {
+    return
+  }
+  if (!consumeEscape(event)) return
+
+  if (confirmAction.value) {
+    cancelConfirmation()
+  } else if (sheet.value) {
+    closeSheet()
+  } else if (selectedMember.value) {
+    selectedMember.value = null
+  } else {
+    selectedPing.value = null
+  }
+}
+
 onMounted(async () => {
+  window.addEventListener('keydown', onKeydown, true)
   await crew.bootstrap()
   username.value = crew.profile?.username ?? ''
   openSharedInvite()
@@ -713,6 +737,7 @@ onBeforeUnmount(() => {
   if (liveTimer) window.clearInterval(liveTimer)
   if (toastTimer) window.clearTimeout(toastTimer)
   if (pointerFrame) cancelAnimationFrame(pointerFrame)
+  window.removeEventListener('keydown', onKeydown, true)
   window.removeEventListener('message', onCrewLinkMessage)
 })
 </script>
@@ -756,7 +781,7 @@ onBeforeUnmount(() => {
             maxlength="20"
             outline
             @input="updateValue('username', $event)"
-            @keydown.enter="createProfile"
+            @keydown.enter="handleEnterAction($event, createProfile)"
           />
         </k-list>
         <p v-if="formError" class="crewlink-error" role="alert">{{ formError }}</p>
@@ -1036,7 +1061,7 @@ onBeforeUnmount(() => {
       </k-tabbar>
     </template>
 
-    <k-sheet :opened="Boolean(sheet)" class="crewlink-sheet" @backdropclick="closeSheet">
+    <k-sheet :opened="Boolean(sheet)" @backdropclick="closeSheet">
       <section v-if="sheet" class="crewlink-sheet__content" role="dialog" aria-modal="true">
         <k-link component="button" class="crewlink-sheet__close" :link-props="{ type: 'button' }" :aria-label="phone.t('Common.close')" @click="closeSheet"><X /></k-link>
 
@@ -1051,7 +1076,7 @@ onBeforeUnmount(() => {
 
         <template v-else-if="sheet === 'join-group'">
           <span class="crewlink-sheet__icon"><UserPlus /></span><h2>{{ t('joinWithCode') }}</h2><p>{{ t('joinWithCodeBody') }}</p>
-          <k-list inset strong class="crewlink-form-list"><k-list-input input-id="crewlink-invite-code" :label="t('inviteCode')" :placeholder="t('inviteCodePlaceholder')" :value="inviteCode" maxlength="8" outline @input="updateValue('inviteCode', $event)" @keydown.enter="joinGroup" /></k-list>
+          <k-list inset strong class="crewlink-form-list"><k-list-input input-id="crewlink-invite-code" :label="t('inviteCode')" :placeholder="t('inviteCodePlaceholder')" :value="inviteCode" maxlength="8" outline @input="updateValue('inviteCode', $event)" @keydown.enter="handleEnterAction($event, joinGroup)" /></k-list>
           <p v-if="formError" class="crewlink-error">{{ formError }}</p>
           <k-button large rounded :disabled="crew.isLoading" @click="joinGroup">{{ t('joinCrew') }}</k-button>
           <template v-if="crew.invitations.length">
@@ -1143,13 +1168,13 @@ onBeforeUnmount(() => {
 
         <template v-else-if="sheet === 'member' && !selectedMember && crew.profile">
           <span class="crewlink-sheet__icon"><UserRound /></span><h2>{{ t('editUsername') }}</h2><p>{{ t('editUsernameBody') }}</p>
-          <k-list inset strong class="crewlink-form-list"><k-list-input input-id="crewlink-edit-username" :label="t('username')" :value="username" maxlength="20" outline @input="updateValue('username', $event)" @keydown.enter="saveProfile" /></k-list>
+          <k-list inset strong class="crewlink-form-list"><k-list-input input-id="crewlink-edit-username" :label="t('username')" :value="username" maxlength="20" outline @input="updateValue('username', $event)" @keydown.enter="handleEnterAction($event, saveProfile)" /></k-list>
           <p v-if="formError" class="crewlink-error">{{ formError }}</p><k-button large rounded @click="saveProfile">{{ phone.t('Common.save') }}</k-button>
         </template>
       </section>
     </k-sheet>
 
-    <k-sheet :opened="Boolean(selectedMember && !sheet)" class="crewlink-sheet" @backdropclick="selectedMember = null">
+    <k-sheet :opened="Boolean(selectedMember && !sheet)" @backdropclick="selectedMember = null">
       <section v-if="selectedMember" class="crewlink-sheet__content crewlink-member-preview">
         <k-link component="button" class="crewlink-sheet__close" :link-props="{ type: 'button' }" @click="selectedMember = null"><X /></k-link>
         <span class="crewlink-sheet__avatar" :style="{ '--crew': activeColour }">{{ memberInitials(selectedMember) }}</span><h2>@{{ selectedMember.username }}</h2><p>{{ roleLabel(selectedMember.role) }} · {{ memberStatus(selectedMember) }}</p>
@@ -1157,7 +1182,7 @@ onBeforeUnmount(() => {
       </section>
     </k-sheet>
 
-    <k-sheet :opened="Boolean(selectedPing)" class="crewlink-sheet" @backdropclick="selectedPing = null">
+    <k-sheet :opened="Boolean(selectedPing)" @backdropclick="selectedPing = null">
       <section v-if="selectedPing" class="crewlink-sheet__content crewlink-member-preview">
         <k-link component="button" class="crewlink-sheet__close" :link-props="{ type: 'button' }" @click="selectedPing = null"><X /></k-link>
         <span class="crewlink-sheet__icon" :style="{ background: pingColours[selectedPing.type] }"><component :is="pingIcons[selectedPing.type]" /></span><small>{{ t(`pingTypes.${selectedPing.type}`) }}</small><h2>{{ selectedPing.label }}</h2><p>{{ t('sharedBy', { username: selectedPing.creatorUsername }) }} · {{ expiresIn(selectedPing.expiresAt) }}</p>
diff --git a/frontend/src/views/apps/DarkChatApp.vue b/frontend/src/views/apps/DarkChatApp.vue
index 65f4301..664cca8 100644
--- a/frontend/src/views/apps/DarkChatApp.vue
+++ b/frontend/src/views/apps/DarkChatApp.vue
@@ -68,6 +68,7 @@ import type { EasySharePayload } from '@/types/easyshare'
 import type { MediaType, PhoneMedia } from '@/types/media'
 import { copyText } from '@/utils/clipboard'
 import { parseDatabaseDate, type DatabaseDateValue } from '@/utils/date'
+import { handleEnterAction } from '@/utils/keyboard'
 
 const VOICE_MAX_DURATION_MS = 60_000
 const VOICE_MAX_BYTES = 270_000
@@ -2332,7 +2333,7 @@ onBeforeUnmount(() => {
               clear-button
               @input="setIdentifier"
               @clear="identifier = ''"
-              @keydown.enter.prevent="requestStart()"
+              @keydown.enter="handleEnterAction($event, requestStart)"
           /></k-list>
           <k-button
             large
@@ -2601,7 +2602,7 @@ onBeforeUnmount(() => {
           :placeholder="t('message')"
           :colors="darkMessagebarColors"
           @input="setDraft"
-          @keydown.enter.exact.prevent="sendText"
+          @keydown.enter.exact="handleEnterAction($event, sendText)"
         >
           <template #left
             ><k-link
diff --git a/frontend/src/views/apps/FeatherApp.vue b/frontend/src/views/apps/FeatherApp.vue
index 21c05b7..dbfa5ea 100644
--- a/frontend/src/views/apps/FeatherApp.vue
+++ b/frontend/src/views/apps/FeatherApp.vue
@@ -279,9 +279,17 @@ function moveMediaPreview(direction: number): void {
 
 function handleMediaPreviewKeydown(event: KeyboardEvent): void {
   if (!mediaPreview.value) return
-  if (event.key === 'Escape') closeMediaPreview()
-  if (event.key === 'ArrowLeft') moveMediaPreview(-1)
-  if (event.key === 'ArrowRight') moveMediaPreview(1)
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    event.stopImmediatePropagation()
+    closeMediaPreview()
+  } else if (event.key === 'ArrowLeft') {
+    event.preventDefault()
+    moveMediaPreview(-1)
+  } else if (event.key === 'ArrowRight') {
+    event.preventDefault()
+    moveMediaPreview(1)
+  }
 }
 
 function toast(path: string): void {
@@ -731,11 +739,11 @@ watch(
 onBeforeUnmount(() => {
   if (exploreSearchTimer !== undefined) window.clearTimeout(exploreSearchTimer)
   if (networkSearchTimer !== undefined) window.clearTimeout(networkSearchTimer)
-  window.removeEventListener('keydown', handleMediaPreviewKeydown)
+  window.removeEventListener('keydown', handleMediaPreviewKeydown, true)
 })
 
 onMounted(async () => {
-  window.addEventListener('keydown', handleMediaPreviewKeydown)
+  window.addEventListener('keydown', handleMediaPreviewKeydown, true)
   const selection =
     messageMedia.consumeMany<ComposerContext>('feather:composer')
   const profileSelection =
@@ -4929,4 +4937,87 @@ onMounted(async () => {
   color: inherit;
   background: var(--feather-panel);
 }
+@supports not (color: color-mix(in srgb, white, black)) {
+  .feather-navbar {
+    --k-navbar-bg-color: rgb(255 255 255 / 91%);
+    border-bottom-color: rgb(127 127 127 / 18%);
+  }
+  :global(.dark) .feather-navbar {
+    --k-navbar-bg-color: rgb(9 13 18 / 91%);
+  }
+  .dark.feather-app .feather-navbar {
+    --k-navbar-bg-color: rgb(0 0 0 / 90%);
+    background: rgb(0 0 0 / 88%);
+  }
+  .feather-app--active .feather-navbar {
+    --k-navbar-bg-color: rgb(18 23 27 / 91%);
+    background: rgb(18 23 27 / 88%);
+  }
+  .feather-app--active.feather-app--light .feather-navbar {
+    --k-navbar-bg-color: rgb(251 251 246 / 91%);
+    background: rgb(251 251 246 / 88%);
+  }
+  .feather-feed-tabs,
+  .feather-explore-head,
+  .feather-activity-head,
+  .feather-trend,
+  .feather-composer__tools,
+  .feather-section-title,
+  .feather-profile,
+  .feather-profile-tabs,
+  .feather-activity,
+  .feather-person {
+    border-color: rgb(127 127 127 / 18%);
+  }
+  .feather-trend:active,
+  .feather-profile__stats button,
+  .feather-report select,
+  .feather-report textarea,
+  .feather-app--active .feather-explore-search :deep(form) {
+    background: rgb(127 127 127 / 7%);
+  }
+  .feather-profile__stats button:active,
+  .feather-thread-reply__comment-target,
+  .feather-thread-title span,
+  .feather-app--active .feather-profile__stats span,
+  .feather-composer-media > header > span,
+  .feather-composer-media > header > b,
+  .feather-app--active .feather-follow-button--pending:hover,
+  .feather-app--active :deep(.feather-follow:hover),
+  .feather-composer-media__actions button:not(:disabled):hover {
+    background: rgb(29 155 240 / 13%);
+  }
+  .feather-report select,
+  .feather-report textarea,
+  .feather-app--active .feather-follow-button--following {
+    border-color: rgb(127 127 127 / 24%);
+  }
+  .feather-app--active :deep(.feather-post-glass),
+  .feather-network-list,
+  .feather-app--active .feather-thread-reply,
+  .feather-profile-suggestion,
+  .feather-edit__identity,
+  .feather-edit__photo,
+  .feather-edit__fields,
+  .feather-connections__tabs,
+  .feather-connections__list {
+    background: var(--feather-panel);
+  }
+  .feather-network-person__bio {
+    color: var(--feather-muted);
+  }
+  .feather-network-person__avatar .feather-avatar,
+  .feather-app--active .feather-follow-button--pending,
+  .feather-app--active .feather-profile__actions :deep(.k-button),
+  .feather-edit__photo-actions :deep(.k-button) {
+    border-color: var(--feather-blue);
+  }
+  .feather-compose-fab,
+  .feather-edit__avatar {
+    border-color: #70c5fa;
+  }
+  .feather-connections__remove {
+    border-color: #f04f65;
+  }
+}
 </style>
diff --git a/frontend/src/views/apps/FlareApp.vue b/frontend/src/views/apps/FlareApp.vue
index 6eda1a4..f7dbca5 100644
--- a/frontend/src/views/apps/FlareApp.vue
+++ b/frontend/src/views/apps/FlareApp.vue
@@ -85,6 +85,7 @@ import type { PhoneMedia } from '@/types/media'
 import type { EasySharePayload } from '@/types/easyshare'
 import type { GifSearchResult, SmsAttachmentType } from '@/types/messages'
 import { parseDatabaseDate, type DatabaseDateValue } from '@/utils/date'
+import { handleEnterAction } from '@/utils/keyboard'
 
 type FlareTab = 'discover' | 'explore' | 'likes' | 'matches' | 'profile'
 type ExploreMode = 'all' | 'dates' | 'friends' | 'longTerm'
@@ -1145,7 +1146,7 @@ onBeforeUnmount(() => {
         :value="draft"
         :disabled="flare.sending"
         @input="draft = eventValue($event)"
-        @keydown.enter.exact.prevent="sendMessage"
+        @keydown.enter.exact="handleEnterAction($event, sendMessage)"
       >
         <template #left>
           <k-toolbar-pane class="ios:h-10 messages-messagebar__tools">
@@ -1861,7 +1862,7 @@ onBeforeUnmount(() => {
         :aria-modal="choiceOpened ? 'true' : undefined"
         aria-labelledby="flare-choice-sheet-title"
         :inert="!choiceOpened"
-        @keydown.esc="closeChoice"
+        @keydown.esc.stop.prevent="closeChoice"
       >
         <span class="flare-choice-sheet__grabber" aria-hidden="true" />
         <header class="flare-choice-sheet__header">
@@ -3097,4 +3098,19 @@ onBeforeUnmount(() => {
 :global(.phone-app.dark .flare-action) {
   box-shadow: none;
 }
+@supports not (color: color-mix(in srgb, white, black)) {
+  .flare-navbar {
+    border-bottom-color: rgb(127 127 127 / 18%);
+  }
+  .flare-photo-slot {
+    background: rgb(127 127 127 / 18%);
+  }
+  .flare-photo-grid :deep(.flare-photo-add) {
+    border-color: rgb(127 127 127 / 44%);
+    background: var(--flare-surface);
+  }
+  .flare-choice-sheet__grabber {
+    background: rgb(127 127 127 / 38%);
+  }
+}
 </style>
diff --git a/frontend/src/views/apps/MapApp.vue b/frontend/src/views/apps/MapApp.vue
index 5c6cd23..2667c65 100644
--- a/frontend/src/views/apps/MapApp.vue
+++ b/frontend/src/views/apps/MapApp.vue
@@ -36,6 +36,7 @@ import { useMapStore } from '@/stores/map'
 import { useEasyShareStore } from '@/stores/easyshare'
 import { usePhoneStore } from '@/stores/phone'
 import type { MapMarker, MapMarkerColor } from '@/types/map'
+import { handleEnterAction } from '@/utils/keyboard'
 import { nuiCall, type NuiResponse } from '@/utils/nui'
 
 type MapStyle = 'default' | 'satellite' | 'atlas' | 'roads'
@@ -656,7 +657,7 @@ onBeforeUnmount(() => {
             maxlength="40"
             outline
             @input="updateMarkerLabel"
-            @keydown.enter="saveMarker"
+            @keydown.enter="handleEnterAction($event, saveMarker)"
           />
         </k-list>
         <span class="map-marker-sheet__label">{{
diff --git a/frontend/src/views/apps/MessagesApp.vue b/frontend/src/views/apps/MessagesApp.vue
index d401732..bae7e1f 100644
--- a/frontend/src/views/apps/MessagesApp.vue
+++ b/frontend/src/views/apps/MessagesApp.vue
@@ -54,6 +54,7 @@ import { useMessagesStore } from '@/stores/messages'
 import { useMessageMediaStore } from '@/stores/messageMedia'
 import { usePhoneStore } from '@/stores/phone'
 import { parseDatabaseDate, type DatabaseDateValue } from '@/utils/date'
+import { handleEnterAction } from '@/utils/keyboard'
 import { sortContactsByMessageRecency } from '@/utils/messages'
 import type {
   GifSearchResult,
@@ -1496,7 +1497,7 @@ onBeforeUnmount(() => {
       :value="draft"
       :disabled="sending"
       @input="draft = eventValue($event)"
-      @keydown.enter.exact.prevent="sendTextMessage"
+      @keydown.enter.exact="handleEnterAction($event, sendTextMessage)"
     >
       <template #left>
         <k-toolbar-pane class="ios:h-10 messages-messagebar__tools">
diff --git a/frontend/src/views/apps/MusicApp.vue b/frontend/src/views/apps/MusicApp.vue
index 1ac9a67..5de0de9 100644
--- a/frontend/src/views/apps/MusicApp.vue
+++ b/frontend/src/views/apps/MusicApp.vue
@@ -53,6 +53,8 @@ import { useEasyShareStore } from '@/stores/easyshare'
 import { usePhoneStore } from '@/stores/phone'
 import type { MusicPlaylist, MusicTrack } from '@/types/music'
 import { easyShareMusicTarget } from '@/utils/easyshare'
+import { consumeEscape, handleEnterAction } from '@/utils/keyboard'
+import { musicEscapeLayer } from '@/utils/musicEscape'
 
 type MusicTab = 'library' | 'playlists' | 'search'
 type MusicSheet =
@@ -498,6 +500,31 @@ function updateVolume(event: Event): void {
   music.setVolume(Number(eventValue(event)) / 100)
 }
 
+function onKeydown(event: KeyboardEvent): void {
+  const layer = musicEscapeLayer({
+    actionMenuOpened: actionMenuOpened.value,
+    activeSheet: Boolean(activeSheet.value),
+    addMenuOpened: addMenuOpened.value,
+    confirmDeletePlaylist: confirmDeletePlaylist.value,
+    confirmRemoveTrack: confirmRemoveTrack.value,
+    playerOpened: playerOpened.value,
+  })
+  if (!layer) return
+  if (!consumeEscape(event)) return
+
+  if (layer === 'remove-track-confirmation') {
+    cancelRemoveTrack()
+  } else if (layer === 'delete-playlist-confirmation') {
+    confirmDeletePlaylist.value = false
+  } else if (layer === 'sheet') {
+    closeSheet()
+  } else if (layer === 'menu') {
+    dismissMenus()
+  } else if (layer === 'player') {
+    playerOpened.value = false
+  }
+}
+
 watch(
   () => music.playlists,
   () => {
@@ -510,6 +537,7 @@ watch(
 )
 
 onMounted(async () => {
+  window.addEventListener('keydown', onKeydown, true)
   await music.load()
   const target = easyShareMusicTarget(
     route.query.easyShareKind,
@@ -531,6 +559,7 @@ onMounted(async () => {
 
 onBeforeUnmount(() => {
   if (playerPickerTimer !== null) window.clearTimeout(playerPickerTimer)
+  window.removeEventListener('keydown', onKeydown, true)
 })
 </script>
 
@@ -1061,12 +1090,12 @@ onBeforeUnmount(() => {
       </k-list>
     </section>
 
-    <k-sheet
-      :opened="Boolean(activeSheet)"
-      class="music-form-sheet"
-      @backdropclick="closeSheet"
-    >
-      <section class="music-sheet-content">
+    <div class="music-form-sheet">
+      <k-sheet
+        :opened="Boolean(activeSheet)"
+        @backdropclick="closeSheet"
+      >
+        <section class="music-sheet-content">
         <header>
           <k-link component="button" @click="closeSheet">{{
             phone.t(
@@ -1089,7 +1118,7 @@ onBeforeUnmount(() => {
               type="url"
               :value="youtubeUrl"
               @input="youtubeUrl = eventValue($event)"
-              @keydown.enter="submitYouTube"
+              @keydown.enter="handleEnterAction($event, submitYouTube)"
             />
             <k-list-input
               :label="phone.t('Apps.music.youtubeTitle')"
@@ -1098,7 +1127,7 @@ onBeforeUnmount(() => {
               :placeholder="phone.t('Apps.music.youtubeTitlePlaceholder')"
               :value="youtubeTitle"
               @input="youtubeTitle = eventValue($event)"
-              @keydown.enter="submitYouTube"
+              @keydown.enter="handleEnterAction($event, submitYouTube)"
             />
             <k-list-input
               :label="phone.t('Apps.music.youtubeArtist')"
@@ -1107,7 +1136,7 @@ onBeforeUnmount(() => {
               :placeholder="phone.t('Apps.music.youtubeArtistPlaceholder')"
               :value="youtubeArtist"
               @input="youtubeArtist = eventValue($event)"
-              @keydown.enter="submitYouTube"
+              @keydown.enter="handleEnterAction($event, submitYouTube)"
             />
           </k-list>
           <p v-if="music.error" class="music-form-error" role="alert">
@@ -1256,7 +1285,7 @@ onBeforeUnmount(() => {
               :placeholder="phone.t('Apps.music.playlistPlaceholder')"
               :value="playlistName"
               @input="playlistName = eventValue($event)"
-              @keydown.enter="submitPlaylist"
+              @keydown.enter="handleEnterAction($event, submitPlaylist)"
             />
           </k-list>
           <p v-if="music.error" class="music-form-error" role="alert">
@@ -1272,15 +1301,16 @@ onBeforeUnmount(() => {
             <template v-else>{{ phone.t('Common.save') }}</template>
           </k-button>
         </template>
-      </section>
-    </k-sheet>
+        </section>
+      </k-sheet>
+    </div>
 
-    <k-sheet
-      :opened="playerOpened"
-      class="music-player-sheet"
-      @backdropclick="playerOpened = false"
-    >
-      <section v-if="music.currentTrack" class="music-player">
+    <div class="music-player-sheet">
+      <k-sheet
+        :opened="playerOpened"
+        @backdropclick="playerOpened = false"
+      >
+        <section v-if="music.currentTrack" class="music-player">
         <header>
           <k-link
             component="button"
@@ -1383,8 +1413,9 @@ onBeforeUnmount(() => {
         <p v-if="music.playbackError" class="music-player-error">
           {{ phone.t('Apps.music.errors.playback_failed') }}
         </p>
-      </section>
-    </k-sheet>
+        </section>
+      </k-sheet>
+    </div>
 
     <k-dialog
       :opened="confirmRemoveTrack"
@@ -1874,6 +1905,7 @@ onBeforeUnmount(() => {
 .music-form-sheet,
 .music-player-sheet {
   --music-accent: #fa2d48;
+  display: contents;
   color: var(--music-label);
 }
 
@@ -1985,7 +2017,7 @@ onBeforeUnmount(() => {
   color: #ff453a !important;
 }
 
-.music-player-sheet {
+.music-player-sheet :deep(.k-sheet) {
   background: rgb(22 22 25 / 96%) !important;
 }