@usero/sdk 1.1.12 → 1.1.13

package/dist/plugins/user-test.cjs

@@ -293,19 +293,77 @@ async function postNoteWithRetry(apiUrl, sessionId, atMs, text, logger) {
 }
 
 // src/plugins/user-test/ui.ts
+var KEYBOARD_OPEN_MIN_INSET_PX = 80;
+function computeKeyboardInset(innerHeight, viewportHeight, viewportOffsetTop) {
+  return Math.max(0, Math.round(innerHeight - (viewportHeight + viewportOffsetTop)));
+}
+function installKeyboardInsetWatcher(anchor) {
+  const viewport = window.visualViewport;
+  if (!viewport) return null;
+  let rafId = 0;
+  let lastInset = -1;
+  let resizeSeen = false;
+  const apply = () => {
+    rafId = 0;
+    const fromResize = resizeSeen;
+    resizeSeen = false;
+    const inset = computeKeyboardInset(window.innerHeight, viewport.height, viewport.offsetTop);
+    if (inset === lastInset) return;
+    lastInset = inset;
+    anchor.setAttribute("data-vv-scrolling", fromResize ? "false" : "true");
+    anchor.style.setProperty("--keyboard-inset", `${inset}px`);
+    anchor.style.setProperty("--vv-height", `${Math.round(viewport.height)}px`);
+    anchor.setAttribute("data-keyboard-open", inset >= KEYBOARD_OPEN_MIN_INSET_PX ? "true" : "false");
+  };
+  const schedule = () => {
+    if (rafId === 0) rafId = window.requestAnimationFrame(apply);
+  };
+  const onResize = () => {
+    resizeSeen = true;
+    schedule();
+  };
+  const onScroll = () => {
+    schedule();
+  };
+  viewport.addEventListener("resize", onResize);
+  viewport.addEventListener("scroll", onScroll);
+  resizeSeen = true;
+  apply();
+  return () => {
+    viewport.removeEventListener("resize", onResize);
+    viewport.removeEventListener("scroll", onScroll);
+    if (rafId !== 0) window.cancelAnimationFrame(rafId);
+  };
+}
 function buildIndicator(host, store, callbacks) {
   const root = host.attachShadow({ mode: "open" });
   const style = document.createElement("style");
   style.textContent = `
 		:host { all: initial; }
 		.anchor {
+			/* --keyboard-inset is the height of the mobile soft keyboard, written by
+			   the visualViewport watcher (0 when closed / unsupported). position:fixed
+			   anchors to the LAYOUT viewport, which the keyboard does not shrink, so
+			   without this the open keyboard covers the bar and task panel entirely. */
+			--keyboard-inset: 0px;
 			position: fixed;
-			bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
+			bottom: calc(env(safe-area-inset-bottom, 0px) + 16px + var(--keyboard-inset));
 			left: 50%; transform: translateX(-50%);
 			display: flex; flex-direction: column; align-items: center; gap: 8px;
 			z-index: 2147483646; max-width: calc(100vw - 32px);
 			font: 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
 			color: #fff;
+			/* Eased only for keyboard show/hide; scroll ticks suppress it below. */
+			transition: bottom 0.18s ease-out;
+		}
+		/* While the visual viewport is being panned (URL bar collapse, pinch,
+		   keyboard-driven scroll) the inset must track 1:1, animating every tick
+		   reads as lag. The watcher flips this attribute per update source. */
+		.anchor[data-vv-scrolling="true"] { transition: none; }
+		/* Keyboard open: the keyboard covers the home-indicator zone, so the
+		   safe-area + 16px margin is dead space. Tuck in to an 8px gap instead. */
+		.anchor[data-keyboard-open="true"] {
+			bottom: calc(var(--keyboard-inset) + 8px);
 		}
 		.bar {
 			display: inline-flex; align-items: center; gap: 6px;
@@ -328,6 +386,16 @@ function buildIndicator(host, store, callbacks) {
 			width: max-content; overflow-y: auto;
 		}
 		.panel[hidden] { display: none; }
+		/* Compact state while the keyboard is up: 60vh is measured against the
+		   LAYOUT viewport and can exceed the visible strip above the keyboard,
+		   clipping the instructions. Cap against the VISUAL viewport height
+		   (--vv-height, written by the watcher) minus the bar's footprint, with a
+		   96px floor so at least a couple of lines stay readable and scrollable.
+		   Slightly tighter padding to make the most of the scarce space. */
+		.anchor[data-keyboard-open="true"] .panel {
+			max-height: min(480px, max(96px, calc(var(--vv-height, 100vh) - 96px)));
+			padding: 10px 12px 10px 8px;
+		}
 		.panel ol { margin: 0; padding-left: 26px; }
 		.panel li { margin: 0 0 8px; }
 		.panel li:last-child { margin: 0; }
@@ -763,10 +831,12 @@ function buildIndicator(host, store, callbacks) {
 			.dot { animation: none; }
 			.toast, .note-popover, .resume-toast { animation: none; }
 			.resume-toast[data-leaving="true"] { opacity: 0; }
+			.anchor { transition: none; }
 		}
 	`;
   const anchor = document.createElement("div");
   anchor.className = "anchor";
+  store.keyboardWatcherCleanup = installKeyboardInsetWatcher(anchor);
   const panel = document.createElement("div");
   panel.className = "panel";
   panel.hidden = true;
@@ -1923,6 +1993,7 @@ function userTest(options = {}) {
         tasksPanelOpen: readTasksPanelOpen(),
         outsidePointerHandler: null,
         keydownHandler: null,
+        keyboardWatcherCleanup: null,
         hasMicPermission: false,
         micAcquiring: true,
         micFailReason: null,
@@ -2129,6 +2200,10 @@ function userTest(options = {}) {
         document.removeEventListener("keydown", store.keydownHandler);
         store.keydownHandler = null;
       }
+      if (store.keyboardWatcherCleanup) {
+        store.keyboardWatcherCleanup();
+        store.keyboardWatcherCleanup = null;
+      }
       for (const id of store.muteToastTimers) {
         try {
           window.clearTimeout(id);
@@ -2158,6 +2233,7 @@ var __test__ = {
   classifyChunkResponse,
   handleSessionClosed,
   micChipState,
+  computeKeyboardInset,
   isStreamSilent,
   rmsDbFromSamples,
   SILENCE_RMS_DB_THRESHOLD,