fix: lift modifier state to MobileTerminalWrapper for virtual keyboard integration

- Remove useSpecialKeys hook state, export pure utility functions instead
- MobileTerminalWrapper now owns activeModifier state
- SpecialKeysStrip and SpecialKeysPanel receive modifier via props
- TerminalComponent applies modifier to virtual keyboard input via activeModifier prop
- Modifier now works with both special keys AND virtual keyboard input
- Modifier clears after any key press (special or virtual keyboard)

apps/web/src/components/special-keys-panel.tsx

@@ -1,11 +1,13 @@
 import React from "react";
-import { useSpecialKeys, type SpecialKey } from "../hooks/use-special-keys";
+import { getSequenceWithModifier, type SpecialKey, type ModifierKey } from "../hooks/use-special-keys";
 
 interface SpecialKeysPanelProps {
   onSend: (data: string) => void;
   isOpen: boolean;
   onClose: () => void;
   onKeepFocus?: () => void;
+  activeModifier: ModifierKey | null;
+  onModifierChange: (modifier: ModifierKey | null) => void;
 }
 
 const EXPANDED_KEYS: { key: SpecialKey; label: string }[] = [
@@ -38,14 +40,22 @@ export const SpecialKeysPanel: React.FC<SpecialKeysPanelProps> = ({
   isOpen,
   onClose,
   onKeepFocus,
+  activeModifier,
+  onModifierChange,
 }) => {
-  const { sendKey, clearModifier } = useSpecialKeys({ onSend });
-
   if (!isOpen) return null;
 
   const handlePointerDown = (e: React.PointerEvent, key: SpecialKey) => {
     e.preventDefault();
-    sendKey(key);
+
+    const result = getSequenceWithModifier(key, activeModifier);
+    if (result) {
+      onSend(result.sequence);
+      if (result.clearModifier) {
+        onModifierChange(null);
+      }
+    }
+
     onClose();
     // Always refocus terminal after sending
     requestAnimationFrame(() => {
@@ -55,7 +65,7 @@ export const SpecialKeysPanel: React.FC<SpecialKeysPanelProps> = ({
 
   const handleOverlayPointerDown = (e: React.PointerEvent) => {
     e.preventDefault();
-    clearModifier();
+    onModifierChange(null);
     onClose();
     requestAnimationFrame(() => {
       onKeepFocus?.();