Universal preview bubble + natural-sized alts popover

- Preview popover on every char key press, exactly anchor-key-wide
- Alts popover transforms from the preview on long-press (same DOM
  node). #positionPopover clears opposite-mode inline size each run
  so a stale preview width doesn't pin the alts box at key width
  while its buttons lay out their natural sum and overflow
- Alts popover uses natural flex sizing (no JS minWidth, no per-alt
  width overrides); .popover justify-content: center keeps content
  centered even when it's narrower than the anchor
- Simple preview path is gated to key.action.kind === "char" so
  space, return, backspace, shift, layer, and globe keys no longer
  surface a redundant preview

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: chapterjason

src/keyboard/element.ts

@@ -494,11 +494,14 @@ export class VirtualKeyboard extends HTMLElement {
     const hasAlts = !!(key.alternates && key.alternates.length > 0);
     if (hasAlts) {
       this.#onPointerDown(e, key, btn);
-    } else if (isRepeatableKey(key)) {
+      return;
+    }
+    if (key.action.kind === "char") {
       this.#showSimplePreview(key, btn, e.pointerId);
+    }
+    if (isRepeatableKey(key)) {
       this.#startRepeat(key, e.pointerId);
     } else {
-      this.#showSimplePreview(key, btn, e.pointerId);
       this.#handle(key);
     }
   }
@@ -750,6 +753,11 @@ export class VirtualKeyboard extends HTMLElement {
 
   #positionPopover(popover: HTMLElement, anchor: HTMLButtonElement): void {
     const anchorRect = anchor.getBoundingClientRect();
+    if (popover.classList.contains("preview")) {
+      popover.style.width = `${anchorRect.width}px`;
+    } else {
+      popover.style.width = "";
+    }
 
     const margin = 4;
     const vw = document.documentElement.clientWidth;

src/keyboard/virtual-keyboard.scss

@@ -130,6 +130,7 @@
   position: fixed;
   z-index: 10;
   display: flex;
+  justify-content: center;
   gap: 4px;
   padding: 6px;
   background: var(--vk-key-bg);
@@ -138,7 +139,9 @@
   pointer-events: none;
 
   &.preview {
-    padding: 6px 10px;
+    padding: 0;
+    box-sizing: border-box;
+    overflow: hidden;
   }
 }
 
@@ -164,11 +167,11 @@
 }
 
 .preview-key {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
+  width: 100%;
   height: var(--vk-key-height);
-  padding: 0 14px;
   font-family: inherit;
   font-size: 28px;
   font-weight: 500;