fix(app-mode): address CR review majors (batch 3/3)

Accessibility:
- style.css: keyboard focus indicator was killed by `outline: none`
  on `:focus`. Restore a visible 2px outline on `:focus-visible` for
  inputs / textareas / pill widgets so keyboard users see the active
  control (WCAG 2.4.7).

Correctness:
- BuilderBackdrop pan: add `e.preventDefault()` on pointerdown,
  wrap `setPointerCapture` in try/catch, release the capture on
  endDrag, and abandon on window blur — matches LayoutView's pan
  hardening so a pan can't get stuck waiting for a pointerup.
- AppBuilder.nodeToDisplayTuple: string-normalize both sides of the
  selectedOutputs match, mirroring the other handlers in this file.
  After save/load the same logical NodeId can flip primitive type;
  strict equality made already-selected outputs render as
  unselected and re-exposed the add button.

Architecture (Command-pattern):
- appModeStore: add toggleSelectedInput / toggleSelectedOutput /
  removeSelectedOutput helpers as the single entry points for
  selection mutations.
- AppBuilder: route handleClick + the add/remove overlay buttons
  through those store helpers instead of pushing/splicing the
  arrays directly. Drops the now-unused `remove` import.

Documented follow-up:
- AppOutput RAF loop: comment notes that mounting is already gated
  by `isSelectOutputsMode`; centralizing into a shared per-canvas
  RAF dispatcher across all AppInput/AppOutput instances is the
  right architectural fix but is out of scope for this PR.

src/assets/css/style.css

@@ -97,7 +97,9 @@
   background-color: rgb(255 255 255 / 0.1);
 }
 
-/* Active border lifts from 0.08 → 0.18 (perceptible, not loud). */
+/* Active border lifts from 0.08 → 0.18 (perceptible, not loud). The
+   `outline: none` is mouse-focus only — keyboard focus restores a
+   high-contrast outline below (WCAG 2.4.7 / a11y). */
 :is(.floating-panel, .app-chrome) textarea:focus,
 :is(.floating-panel, .app-chrome) input:focus,
 :is(.floating-panel, .app-chrome)
@@ -106,10 +108,14 @@
   outline: none;
   box-shadow: none;
 }
+
+/* Restore a visible focus indicator for keyboard navigation. */
 :is(.floating-panel, .app-chrome) textarea:focus-visible,
-:is(.floating-panel, .app-chrome) input:focus-visible {
-  outline: none;
-  box-shadow: none;
+:is(.floating-panel, .app-chrome) input:focus-visible,
+:is(.floating-panel, .app-chrome)
+  .bg-component-node-widget-background:has(:focus-visible) {
+  outline: 2px solid rgb(255 255 255 / 0.7);
+  outline-offset: 1px;
 }
 
 /* NodeWidgets' wrapper-level focus-within:ring leaked past the inner

src/components/builder/AppBuilder.vue

@@ -9,7 +9,6 @@
  * Gated on `isSelectMode` (only inputs + outputs) and skipped when Vue
  * nodes are enabled — Vue nodes handle their own click selection.
  */
-import { remove } from 'es-toolkit'
 import { computed, ref, toValue } from 'vue'
 import type { MaybeRef } from 'vue'
 
@@ -114,11 +113,7 @@ function handleClick(e: MouseEvent) {
     if (!isSelectOutputsMode.value) return
     if (!node.constructor.nodeData?.output_node)
       return canvasInteractions.forwardEventToCanvas(e)
-    const index = appModeStore.selectedOutputs.findIndex(
-      (id) => String(id) === String(node.id)
-    )
-    if (index === -1) appModeStore.selectedOutputs.push(node.id)
-    else appModeStore.selectedOutputs.splice(index, 1)
+    appModeStore.toggleSelectedOutput(node.id)
     return
   }
   if (!isSelectInputsMode.value || widget.options.canvasOnly) return
@@ -127,21 +122,20 @@ function handleClick(e: MouseEvent) {
   const storeName = isPromotedWidgetView(widget)
     ? widget.sourceWidgetName
     : widget.name
-  const index = appModeStore.selectedInputs.findIndex(
-    ([nodeId, widgetName]) =>
-      String(storeId) === String(nodeId) && storeName === widgetName
-  )
-  if (index === -1) appModeStore.selectedInputs.push([storeId, storeName])
-  else appModeStore.selectedInputs.splice(index, 1)
+  appModeStore.toggleSelectedInput(storeId, storeName)
 }
 
 function nodeToDisplayTuple(
   n: LGraphNode
 ): [NodeId, MaybeRef<BoundStyle> | undefined, boolean] {
+  // String-normalize both sides — NodeId is `string | number` and the
+  // same logical ID can flip primitive type across save/load (the
+  // reason handleClick + the remove handler also do this).
+  const sid = String(n.id)
   return [
     n.id,
     getBounding(n.id),
-    appModeStore.selectedOutputs.some((id) => n.id === id)
+    appModeStore.selectedOutputs.some((id) => String(id) === sid)
   ]
 }
 
@@ -251,12 +245,7 @@ const renderedInputCandidates = computed(() => {
                   'size-full cursor-pointer rounded-lg p-2',
                   'bg-(--color-app-mode-active-temp)'
                 ]"
-                @click.stop="
-                  remove(
-                    appModeStore.selectedOutputs,
-                    (k) => String(k) === String(key)
-                  )
-                "
+                @click.stop="appModeStore.removeSelectedOutput(key)"
                 @pointerdown.stop
               >
                 <!-- Inline SVG (see AppInput.vue for rationale) so we
@@ -282,7 +271,7 @@ const renderedInputCandidates = computed(() => {
                   'bg-component-node-background',
                   'ring-4 ring-(--color-app-mode-active-temp-half) ring-inset'
                 ]"
-                @click.stop="appModeStore.selectedOutputs.push(key)"
+                @click.stop="appModeStore.toggleSelectedOutput(key)"
                 @pointerdown.stop
               />
             </div>

src/components/builder/BuilderBackdrop.vue

@@ -6,9 +6,9 @@
  * Shares `appModeStore.viewport*` with App Mode so zoom level
  * survives a round trip.
  */
-import { useEventListener } from '@vueuse/core'
+import { useEventListener, useWindowFocus } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import { computed, useTemplateRef } from 'vue'
+import { computed, useTemplateRef, watch } from 'vue'
 
 import { useAppMode } from '@/composables/useAppMode'
 import LinearPreview from '@/renderer/extensions/linearMode/LinearPreview.vue'
@@ -40,6 +40,7 @@ let dragging = false
 
 function handlePointerDown(e: PointerEvent) {
   if (e.button !== 0 && e.button !== 1) return
+  e.preventDefault()
   dragStart = { x: e.clientX, y: e.clientY, pointerId: e.pointerId }
 }
 
@@ -49,19 +50,37 @@ useEventListener(window, 'pointermove', (e: PointerEvent) => {
     const dx = e.clientX - dragStart.x
     const dy = e.clientY - dragStart.y
     if (dx * dx + dy * dy < DRAG_THRESHOLD_PX * DRAG_THRESHOLD_PX) return
-    bgRef.value?.setPointerCapture(dragStart.pointerId)
+    try {
+      bgRef.value?.setPointerCapture(dragStart.pointerId)
+    } catch {
+      // Some browsers reject capture on non-primary pointers.
+    }
     dragging = true
   }
   appModeStore.panBy(e.movementX, e.movementY)
 })
 
 function endDrag() {
+  if (dragStart && dragging) {
+    try {
+      bgRef.value?.releasePointerCapture(dragStart.pointerId)
+    } catch {
+      // pointer may already be released
+    }
+  }
   dragStart = null
   dragging = false
 }
 useEventListener(window, 'pointerup', endDrag)
 useEventListener(window, 'pointercancel', endDrag)
 
+// Abandon on window blur so a pan can't get stuck waiting for a
+// pointerup that never arrives (alt-tab, OS modal).
+const focused = useWindowFocus()
+watch(focused, (nowFocused) => {
+  if (!nowFocused && dragStart !== null) endDrag()
+})
+
 const workspaceTransform = computed(
   () =>
     `translate(${viewportOffsetX.value}px, ${viewportOffsetY.value}px) ` +

src/renderer/extensions/linearMode/AppOutput.vue

@@ -18,6 +18,15 @@ const isPromoted = computed(() =>
 // applied as a CSS transform on TransformPane and doesn't fire the
 // built-in resize/scroll/mutation observers, so a RAF loop keeps the
 // teleported ring glued to the node as the canvas transforms.
+//
+// Bounded by mount: AppOutput only renders while `isSelectOutputsMode`
+// is true (see LGraphNode.vue), so the loop is scoped to the outputs-
+// selection step rather than running for the lifetime of the page.
+//
+// Known follow-up (CR): with many output nodes visible at once, every
+// instance runs its own RAF callback. Centralizing into a shared
+// dispatcher (one loop driving all AppInput/AppOutput updates) would
+// reduce per-frame work — out of scope for this PR.
 const wrapperRef = useTemplateRef<HTMLElement>('wrapper')
 const { top, left, width, height, update } = useElementBounding(wrapperRef)
 useRafFn(update, { immediate: true })

src/stores/appModeStore.ts

@@ -283,6 +283,34 @@ export const useAppModeStore = defineStore('appMode', () => {
     if (index !== -1) selectedInputs.value.splice(index, 1)
   }
 
+  // Toggle helpers — single entry points for selection mutations so
+  // callers (AppBuilder click handlers, AppInput / AppOutput overlays)
+  // don't manipulate the arrays directly. Keeps the surface aligned
+  // with the repo's command-pattern guidance and gives us a single
+  // place to add undo / replay later.
+  function toggleSelectedOutput(id: NodeId) {
+    const index = selectedOutputs.value.findIndex(
+      (k) => String(k) === String(id)
+    )
+    if (index === -1) selectedOutputs.value.push(id)
+    else selectedOutputs.value.splice(index, 1)
+  }
+
+  function removeSelectedOutput(id: NodeId) {
+    const index = selectedOutputs.value.findIndex(
+      (k) => String(k) === String(id)
+    )
+    if (index !== -1) selectedOutputs.value.splice(index, 1)
+  }
+
+  function toggleSelectedInput(nodeId: NodeId, widgetName: string) {
+    const index = selectedInputs.value.findIndex(
+      ([id, name]) => String(id) === String(nodeId) && name === widgetName
+    )
+    if (index === -1) selectedInputs.value.push([nodeId, widgetName])
+    else selectedInputs.value.splice(index, 1)
+  }
+
   function updateInputConfig(
     nodeId: NodeId,
     widgetName: string,
@@ -308,11 +336,14 @@ export const useAppModeStore = defineStore('appMode', () => {
     panBy,
     pruneLinearData,
     removeSelectedInput,
+    removeSelectedOutput,
     resetSelectedToWorkflow,
     resetView,
     selectedInputs,
     selectedOutputs,
     showVueNodeSwitchPopup,
+    toggleSelectedInput,
+    toggleSelectedOutput,
     updateInputConfig,
     viewportOffsetX,
     viewportOffsetY,