qapture2 0.2.0 → 0.2.2

package/README.md

@@ -7,7 +7,7 @@ A human tester walks your live web app, annotates elements or regions (auto-scre
 No model is bundled. No API keys. No network calls. The widget is 100% client-side and keyless; notes live in the tester's browser (IndexedDB) until they export. The CLI scaffolder is deterministic and AI-free. **The AI is yours.**
 
 ```bash
-npm install qapture
+npm install qapture2
 ```
 
 ---
@@ -32,8 +32,8 @@ npm install qapture
 ### React (any)
 
 ```tsx
-import { Qapture } from 'qapture';
-import type { QaConfig } from 'qapture';
+import { Qapture } from 'qapture2';
+import type { QaConfig } from 'qapture2';
 
 const config: QaConfig = {
   namespace: 'my-app',
@@ -57,11 +57,11 @@ function App() {
 
 ### Next.js App Router
 
-`qapture/next` re-exports the same component but ships with a `'use client'` directive prepended to its bundle output — no extra wrapper file needed:
+`qapture2/next` re-exports the same component but ships with a `'use client'` directive prepended to its bundle output — no extra wrapper file needed:
 
 ```tsx
 // app/layout.tsx
-import { Qapture } from 'qapture/next';
+import { Qapture } from 'qapture2/next';
 import config from '../qa.config';
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
@@ -78,10 +78,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 
 ### Standalone (non-React)
 
-For apps without React — plain HTML, Vue, Svelte, Astro islands, etc. Use the imperative `initQaStudio()` from `qapture/standalone`:
+For apps without React — plain HTML, Vue, Svelte, Astro islands, etc. Use the imperative `initQaStudio()` from `qapture2/standalone`:
 
 ```js
-import { initQaStudio } from 'qapture/standalone';
+import { initQaStudio } from 'qapture2/standalone';
 
 const instance = initQaStudio({ namespace: 'my-app', brand: { label: 'My App' } });
 
@@ -295,8 +295,8 @@ The preamble degrades gracefully — sections with no data are marked `(not prov
 The CLI scaffolds `qa.config`, the agent skill, and `AGENTS.md` into any repository. It is **deterministic, AI-free, and network-free** — no model call, no network request, no `require()`-ing of target project files.
 
 ```bash
-npx qapture init [target-dir] [--force]
-npx qapture version
+npx qapture2 init [target-dir] [--force]
+npx qapture2 version
 ```
 
 `target-dir` defaults to the current directory. `--force` overwrites existing `qa.config.*` and `qa.preamble.md` (SKILL.md is always refreshed regardless).
@@ -343,7 +343,7 @@ The **hotkey** (default: `Shift+Alt+Q`) toggles the panel open/closed regardless
 
 - **Peer dependencies:** React >= 18, ReactDOM >= 18.
 - **SSR-safe:** `Qapture`, `initQaStudio()`, and `<qapture-widget>` all guard `typeof window` and return no-ops on the server. Nothing is rendered server-side.
-- **Next.js App Router:** use `qapture/next` (which has `'use client'` baked into its bundle output) rather than `qapture` directly. This prevents the "attempted to call a Client Component from the Server" error.
+- **Next.js App Router:** use `qapture2/next` (which has `'use client'` baked into its bundle output) rather than `qapture2` directly. This prevents the "attempted to call a Client Component from the Server" error.
 - **Node >= 18** required for the CLI.
 - Heavy dependencies (`jszip`, `html2canvas`) are loaded as **lazy code-split chunks** — they do not affect initial page load and are only fetched when the user triggers a capture or export action.
 
@@ -361,7 +361,7 @@ The **hotkey** (default: `Shift+Alt+Q`) toggles the panel open/closed regardless
 
 - **html2canvas captures the visible light DOM only.** Content inside *other* custom elements that have their own shadow roots (not qapture's own) will not appear in screenshots. This is a limitation of html2canvas, not qapture.
 - **`position: fixed` may shift on transformed ancestors.** If any ancestor of `document.body` has a CSS `transform`, `perspective`, or `will-change` property applied, `position: fixed` elements — including the QA panel — may be offset from their expected position. This is standard CSS containment behaviour.
-- **Next.js App Router requires `qapture/next`.** Importing from `qapture` in a Server Component context will produce a "use client" error. Use the `/next` entry point.
+- **Next.js App Router requires `qapture2/next`.** Importing from `qapture2` in a Server Component context will produce a "use client" error. Use the `/next` entry point.
 - **Config changes after mount are ignored.** `<Qapture>` mounts once on first render (`useEffect` with `[]` deps) and ignores subsequent prop changes. To apply a new config, destroy the instance and remount.
 - **One instance per page.** Calling `initQaStudio()` or rendering `<Qapture>` multiple times without calling `destroy()` first will append multiple widget hosts to `<body>`.
 
@@ -381,7 +381,7 @@ See [SECURITY.md](./SECURITY.md) for the full security model and vulnerability r
 ## Uninstall
 
 1. Remove `<Qapture />` (or `initQaStudio()` calls) from your codebase.
-2. Uninstall the package: `npm uninstall qapture`.
+2. Uninstall the package: `npm uninstall qapture2`.
 3. Optionally delete the IndexedDB left behind — open the browser console on your app's origin and run:
 
 ```js

package/dist/{chunk-OPZF4IVW.js → chunk-L6VS36GE.js}

@@ -1,4 +1,4 @@
-import React, { createContext, useEffect, Component, useState, useCallback, useReducer, useContext, useRef, useLayoutEffect } from 'react';
+import React, { createContext, useEffect, Component, useState, useCallback, useRef, useReducer, useContext, useLayoutEffect } from 'react';
 import ReactDOM from 'react-dom/client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -1563,28 +1563,165 @@ function Icon({
 function renderSvgElement(tag, attrs, key) {
   return React.createElement(tag, { key, ...attrs });
 }
+function isCoarsePointer() {
+  if (typeof window === "undefined") return false;
+  try {
+    if (window.matchMedia && window.matchMedia("(pointer: coarse)").matches) return true;
+  } catch {
+  }
+  return typeof navigator !== "undefined" && (navigator.maxTouchPoints || 0) > 0;
+}
+function useCoarsePointer() {
+  const [coarse, setCoarse] = useState(() => isCoarsePointer());
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mq = window.matchMedia("(pointer: coarse)");
+    const on = () => setCoarse(isCoarsePointer());
+    if (mq.addEventListener) mq.addEventListener("change", on);
+    else if (mq.addListener) mq.addListener(on);
+    return () => {
+      if (mq.removeEventListener) mq.removeEventListener("change", on);
+      else if (mq.removeListener) mq.removeListener(on);
+    };
+  }, []);
+  return coarse;
+}
+var DEFAULT_LEFT = "calc(1.25rem + env(safe-area-inset-left))";
+var DEFAULT_BOTTOM = "calc(5rem + env(safe-area-inset-bottom))";
+var FAB_SIZE_PX = 56;
+var EDGE_MARGIN = 12;
+var DRAG_THRESHOLD = 8;
+var FAB_POS_KEY = "qapture:fabpos";
+function isFabPos(v) {
+  if (!v || typeof v !== "object") return false;
+  const o = v;
+  return typeof o.left === "number" && Number.isFinite(o.left) && typeof o.bottom === "number" && Number.isFinite(o.bottom);
+}
+function loadFabPos() {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.localStorage.getItem(FAB_POS_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    return isFabPos(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+function saveFabPos(pos) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(FAB_POS_KEY, JSON.stringify(pos));
+  } catch {
+  }
+}
+function clampNum(v, lo, hi) {
+  return Math.min(Math.max(v, lo), hi);
+}
+function clampFabPos(p, w = FAB_SIZE_PX, h = FAB_SIZE_PX) {
+  if (typeof window === "undefined") return p;
+  const maxLeft = Math.max(EDGE_MARGIN, window.innerWidth - w - EDGE_MARGIN);
+  const maxBottom = Math.max(EDGE_MARGIN, window.innerHeight - h - EDGE_MARGIN);
+  return {
+    left: clampNum(p.left, EDGE_MARGIN, maxLeft),
+    bottom: clampNum(p.bottom, EDGE_MARGIN, maxBottom)
+  };
+}
 function QaFab() {
   const { isOpen, setIsOpen, notes, captureActive, theme } = useQa();
+  const coarse = useCoarsePointer();
+  const [pos, setPos] = useState(() => loadFabPos());
+  const dragRef = useRef(null);
+  const didDragRef = useRef(false);
   if (captureActive) return null;
+  const onPointerDown = (e) => {
+    if (dragRef.current) return;
+    didDragRef.current = false;
+    const target = e.currentTarget;
+    const rect = target.getBoundingClientRect();
+    dragRef.current = {
+      pointerId: e.pointerId,
+      startX: e.clientX,
+      startY: e.clientY,
+      startLeft: rect.left,
+      startBottom: window.innerHeight - rect.bottom,
+      width: rect.width,
+      height: rect.height,
+      dragging: false
+    };
+    try {
+      target.setPointerCapture(e.pointerId);
+    } catch {
+    }
+  };
+  const onPointerMove = (e) => {
+    const d = dragRef.current;
+    if (!d || d.pointerId !== e.pointerId) return;
+    const dx = e.clientX - d.startX;
+    const dy = e.clientY - d.startY;
+    if (!d.dragging) {
+      if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+      d.dragging = true;
+    }
+    setPos(clampFabPos({ left: d.startLeft + dx, bottom: d.startBottom - dy }, d.width, d.height));
+  };
+  const endDrag = (e) => {
+    const d = dragRef.current;
+    if (!d || d.pointerId !== e.pointerId) return null;
+    try {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+    dragRef.current = null;
+    return d;
+  };
+  const onPointerUp = (e) => {
+    const d = endDrag(e);
+    if (!d) return;
+    if (d.dragging) {
+      const dx = e.clientX - d.startX;
+      const dy = e.clientY - d.startY;
+      const next = clampFabPos({ left: d.startLeft + dx, bottom: d.startBottom - dy }, d.width, d.height);
+      setPos(next);
+      saveFabPos(next);
+      didDragRef.current = true;
+    }
+  };
+  const onPointerCancel = (e) => {
+    endDrag(e);
+  };
+  const handleClick = () => {
+    if (didDragRef.current) {
+      didDragRef.current = false;
+      return;
+    }
+    setIsOpen(!isOpen);
+  };
+  const applied = coarse && pos ? clampFabPos(pos) : null;
+  const fabStyle = {
+    left: applied ? `${applied.left}px` : DEFAULT_LEFT,
+    bottom: applied ? `${applied.bottom}px` : DEFAULT_BOTTOM,
+    width: "3.5rem",
+    height: "3.5rem",
+    backgroundImage: `linear-gradient(135deg, ${theme.primary}, ${theme.accent})`,
+    boxShadow: "0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04), 0 0 0 2px rgba(255,255,255,0.7)",
+    zIndex: 9990
+  };
   return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
       "data-qa-overlay": "true",
       dir: "ltr",
-      onClick: () => setIsOpen(!isOpen),
+      onClick: handleClick,
+      onPointerDown: coarse ? onPointerDown : void 0,
+      onPointerMove: coarse ? onPointerMove : void 0,
+      onPointerUp: coarse ? onPointerUp : void 0,
+      onPointerCancel: coarse ? onPointerCancel : void 0,
       "aria-label": "Qapture \u2014 testing notes",
       title: "Qapture",
-      className: "qa-fixed qa-flex qa-items-center qa-justify-center qa-rounded-full qa-text-white qa-print-hidden qa-fab-btn",
-      style: {
-        left: "calc(1.25rem + env(safe-area-inset-left))",
-        bottom: "calc(5rem + env(safe-area-inset-bottom))",
-        width: "3.5rem",
-        height: "3.5rem",
-        backgroundImage: `linear-gradient(135deg, ${theme.primary}, ${theme.accent})`,
-        boxShadow: "0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04), 0 0 0 2px rgba(255,255,255,0.7)",
-        zIndex: 9990
-      },
+      className: `qa-fixed qa-flex qa-items-center qa-justify-center qa-rounded-full qa-text-white qa-print-hidden qa-fab-btn${coarse ? " qa-touch-none" : ""}`,
+      style: fabStyle,
       children: [
         !isOpen && /* @__PURE__ */ jsx(
           "span",
@@ -2547,6 +2684,20 @@ function panelReducer(state, action) {
       return state;
   }
 }
+var KEYBOARD_OVERLAP_THRESHOLD = 120;
+var KEYBOARD_LIFT_GAP = 12;
+var NON_TEXT_INPUT_TYPES = /* @__PURE__ */ new Set([
+  "checkbox",
+  "radio",
+  "range",
+  "button",
+  "submit",
+  "reset",
+  "color",
+  "file",
+  "image"
+]);
+var PANEL_TRANSITION_WITH_LIFT = "opacity 200ms cubic-bezier(0.4,0,0.2,1), transform 200ms cubic-bezier(0.4,0,0.2,1), bottom 200ms cubic-bezier(0.4,0,0.2,1)";
 function QaPanel() {
   const {
     isOpen,
@@ -2612,6 +2763,61 @@ function QaPanel() {
     mql.addListener(handleChange);
     return () => mql.removeListener(handleChange);
   }, []);
+  const coarse = useCoarsePointer();
+  const panelRef = useRef(null);
+  const [keyboardLift, setKeyboardLift] = useState(0);
+  const computeKeyboardLift = useCallback(() => {
+    try {
+      if (!coarse || isIpadLandscape) return 0;
+      if (typeof window === "undefined") return 0;
+      const vv = window.visualViewport;
+      if (!vv) return 0;
+      const overlap = Math.max(0, window.innerHeight - vv.height - vv.offsetTop);
+      if (overlap <= KEYBOARD_OVERLAP_THRESHOLD) return 0;
+      const panel = panelRef.current;
+      if (!panel) return 0;
+      const root = panel.getRootNode();
+      const active = root.activeElement;
+      if (!active || !panel.contains(active)) return 0;
+      const tag = active.tagName;
+      if (tag === "TEXTAREA") return Math.round(overlap) + KEYBOARD_LIFT_GAP;
+      if (tag === "INPUT" && !NON_TEXT_INPUT_TYPES.has(active.type)) {
+        return Math.round(overlap) + KEYBOARD_LIFT_GAP;
+      }
+      return 0;
+    } catch {
+      return 0;
+    }
+  }, [coarse, isIpadLandscape]);
+  useEffect(() => {
+    if (!coarse) return void 0;
+    if (typeof window === "undefined" || typeof document === "undefined") return void 0;
+    const vv = window.visualViewport;
+    if (!vv) return void 0;
+    let closeTimer;
+    const recompute = () => setKeyboardLift(computeKeyboardLift());
+    const recomputeSoon = () => {
+      if (closeTimer !== void 0) clearTimeout(closeTimer);
+      closeTimer = setTimeout(recompute, 80);
+    };
+    recompute();
+    vv.addEventListener("resize", recompute);
+    vv.addEventListener("scroll", recompute);
+    document.addEventListener("focusin", recompute);
+    document.addEventListener("focusout", recomputeSoon);
+    return () => {
+      if (closeTimer !== void 0) clearTimeout(closeTimer);
+      vv.removeEventListener("resize", recompute);
+      vv.removeEventListener("scroll", recompute);
+      document.removeEventListener("focusin", recompute);
+      document.removeEventListener("focusout", recomputeSoon);
+    };
+  }, [coarse, computeKeyboardLift]);
+  useEffect(() => {
+    if (!isOpen) setKeyboardLift(0);
+  }, [isOpen]);
+  const keyboardLiftActive = coarse && !isIpadLandscape;
+  const appliedKeyboardLift = keyboardLiftActive ? keyboardLift : 0;
   if (phase === "hidden") return null;
   const openNaming = () => {
     setFilename(todayName());
@@ -2622,9 +2828,12 @@ function QaPanel() {
     void exportZip(filename);
   };
   const namingCoverage = naming ? computeCoverage(journey, guideChecked) : null;
+  const restBottomRem = dir === "rtl" ? "9rem" : "8.75rem";
+  const panelBottom = isIpadLandscape ? "0" : appliedKeyboardLift > 0 ? `calc(${restBottomRem} + env(safe-area-inset-bottom) + ${appliedKeyboardLift}px)` : `calc(${restBottomRem} + env(safe-area-inset-bottom))`;
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: panelRef,
       "data-qa-overlay": "true",
       dir,
       onTransitionEnd: handleTransitionEnd,
@@ -2635,7 +2844,7 @@ function QaPanel() {
         left: isIpadLandscape ? "auto" : "calc(1rem + env(safe-area-inset-left))",
         right: isIpadLandscape ? "0" : void 0,
         top: isIpadLandscape ? "0" : void 0,
-        bottom: isIpadLandscape ? "0" : dir === "rtl" ? "calc(9rem + env(safe-area-inset-bottom))" : "calc(8.75rem + env(safe-area-inset-bottom))",
+        bottom: panelBottom,
         height: isIpadLandscape ? "100dvh" : void 0,
         width: isIpadLandscape ? "min(92vw, 420px)" : void 0,
         // qa-max-h-74vh (class) would otherwise cap the sheet well short of
@@ -2645,7 +2854,12 @@ function QaPanel() {
         background: theme.surface,
         borderColor: `${theme.primary}22`,
         fontFamily: lang === "ar" ? "'Tajawal', sans-serif" : "'Nunito', system-ui, sans-serif",
-        zIndex: 9990
+        zIndex: 9990,
+        // Keyboard-avoidance lift (coarse/touch only — see effect above).
+        // undefined ⇒ !keyboardLiftActive, so desktop and the iPad-landscape
+        // side-sheet render this property exactly as before (the class's own
+        // opacity/transform transition applies, untouched).
+        transition: keyboardLiftActive ? PANEL_TRANSITION_WITH_LIFT : void 0
       },
       children: [
         /* @__PURE__ */ jsxs(
@@ -3029,29 +3243,6 @@ function getStableSelector(el) {
   }
   return nthOfTypePath(el);
 }
-function isCoarsePointer() {
-  if (typeof window === "undefined") return false;
-  try {
-    if (window.matchMedia && window.matchMedia("(pointer: coarse)").matches) return true;
-  } catch {
-  }
-  return typeof navigator !== "undefined" && (navigator.maxTouchPoints || 0) > 0;
-}
-function useCoarsePointer() {
-  const [coarse, setCoarse] = useState(() => isCoarsePointer());
-  useEffect(() => {
-    if (typeof window === "undefined" || !window.matchMedia) return;
-    const mq = window.matchMedia("(pointer: coarse)");
-    const on = () => setCoarse(isCoarsePointer());
-    if (mq.addEventListener) mq.addEventListener("change", on);
-    else if (mq.addListener) mq.addListener(on);
-    return () => {
-      if (mq.removeEventListener) mq.removeEventListener("change", on);
-      else if (mq.removeListener) mq.removeListener(on);
-    };
-  }, []);
-  return coarse;
-}
 
 // src/lib/scrollLock.ts
 var locked = false;
@@ -3073,7 +3264,7 @@ function unlockPageScroll() {
   if (document.body) document.body.style.overflow = prevBodyOverflow;
   locked = false;
 }
-var DRAG_THRESHOLD = 6;
+var DRAG_THRESHOLD2 = 6;
 var TOUCH_DRAG_THRESHOLD = 12;
 var MIN_REGION_SIZE = 8;
 var REGION_HANDLES = [
@@ -3196,7 +3387,7 @@ function CaptureMode() {
     activePointerId.current = null;
     const d = dragRef.current;
     dragRef.current = null;
-    const threshold = pointerKind.current === "mouse" ? DRAG_THRESHOLD : TOUCH_DRAG_THRESHOLD;
+    const threshold = pointerKind.current === "mouse" ? DRAG_THRESHOLD2 : TOUCH_DRAG_THRESHOLD;
     const moved = d !== null && Math.hypot(e.clientX - d.x0, e.clientY - d.y0) > threshold;
     scrollSnap.current = { x: window.scrollX, y: window.scrollY };
     if (moved && d) {
@@ -3819,5 +4010,5 @@ function Qapture({ config }) {
 }
 
 export { Qapture, initQaStudio };
-//# sourceMappingURL=chunk-OPZF4IVW.js.map
-//# sourceMappingURL=chunk-OPZF4IVW.js.map
+//# sourceMappingURL=chunk-L6VS36GE.js.map
+//# sourceMappingURL=chunk-L6VS36GE.js.map

package/dist/{chunk-CJQHPDT7.cjs → chunk-PBXQDL7C.cjs}

@@ -1570,28 +1570,165 @@ function Icon({
 function renderSvgElement(tag, attrs, key) {
   return React__default.default.createElement(tag, { key, ...attrs });
 }
+function isCoarsePointer() {
+  if (typeof window === "undefined") return false;
+  try {
+    if (window.matchMedia && window.matchMedia("(pointer: coarse)").matches) return true;
+  } catch {
+  }
+  return typeof navigator !== "undefined" && (navigator.maxTouchPoints || 0) > 0;
+}
+function useCoarsePointer() {
+  const [coarse, setCoarse] = React.useState(() => isCoarsePointer());
+  React.useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mq = window.matchMedia("(pointer: coarse)");
+    const on = () => setCoarse(isCoarsePointer());
+    if (mq.addEventListener) mq.addEventListener("change", on);
+    else if (mq.addListener) mq.addListener(on);
+    return () => {
+      if (mq.removeEventListener) mq.removeEventListener("change", on);
+      else if (mq.removeListener) mq.removeListener(on);
+    };
+  }, []);
+  return coarse;
+}
+var DEFAULT_LEFT = "calc(1.25rem + env(safe-area-inset-left))";
+var DEFAULT_BOTTOM = "calc(5rem + env(safe-area-inset-bottom))";
+var FAB_SIZE_PX = 56;
+var EDGE_MARGIN = 12;
+var DRAG_THRESHOLD = 8;
+var FAB_POS_KEY = "qapture:fabpos";
+function isFabPos(v) {
+  if (!v || typeof v !== "object") return false;
+  const o = v;
+  return typeof o.left === "number" && Number.isFinite(o.left) && typeof o.bottom === "number" && Number.isFinite(o.bottom);
+}
+function loadFabPos() {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.localStorage.getItem(FAB_POS_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    return isFabPos(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+function saveFabPos(pos) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(FAB_POS_KEY, JSON.stringify(pos));
+  } catch {
+  }
+}
+function clampNum(v, lo, hi) {
+  return Math.min(Math.max(v, lo), hi);
+}
+function clampFabPos(p, w = FAB_SIZE_PX, h = FAB_SIZE_PX) {
+  if (typeof window === "undefined") return p;
+  const maxLeft = Math.max(EDGE_MARGIN, window.innerWidth - w - EDGE_MARGIN);
+  const maxBottom = Math.max(EDGE_MARGIN, window.innerHeight - h - EDGE_MARGIN);
+  return {
+    left: clampNum(p.left, EDGE_MARGIN, maxLeft),
+    bottom: clampNum(p.bottom, EDGE_MARGIN, maxBottom)
+  };
+}
 function QaFab() {
   const { isOpen, setIsOpen, notes, captureActive, theme } = useQa();
+  const coarse = useCoarsePointer();
+  const [pos, setPos] = React.useState(() => loadFabPos());
+  const dragRef = React.useRef(null);
+  const didDragRef = React.useRef(false);
   if (captureActive) return null;
+  const onPointerDown = (e) => {
+    if (dragRef.current) return;
+    didDragRef.current = false;
+    const target = e.currentTarget;
+    const rect = target.getBoundingClientRect();
+    dragRef.current = {
+      pointerId: e.pointerId,
+      startX: e.clientX,
+      startY: e.clientY,
+      startLeft: rect.left,
+      startBottom: window.innerHeight - rect.bottom,
+      width: rect.width,
+      height: rect.height,
+      dragging: false
+    };
+    try {
+      target.setPointerCapture(e.pointerId);
+    } catch {
+    }
+  };
+  const onPointerMove = (e) => {
+    const d = dragRef.current;
+    if (!d || d.pointerId !== e.pointerId) return;
+    const dx = e.clientX - d.startX;
+    const dy = e.clientY - d.startY;
+    if (!d.dragging) {
+      if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+      d.dragging = true;
+    }
+    setPos(clampFabPos({ left: d.startLeft + dx, bottom: d.startBottom - dy }, d.width, d.height));
+  };
+  const endDrag = (e) => {
+    const d = dragRef.current;
+    if (!d || d.pointerId !== e.pointerId) return null;
+    try {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+    dragRef.current = null;
+    return d;
+  };
+  const onPointerUp = (e) => {
+    const d = endDrag(e);
+    if (!d) return;
+    if (d.dragging) {
+      const dx = e.clientX - d.startX;
+      const dy = e.clientY - d.startY;
+      const next = clampFabPos({ left: d.startLeft + dx, bottom: d.startBottom - dy }, d.width, d.height);
+      setPos(next);
+      saveFabPos(next);
+      didDragRef.current = true;
+    }
+  };
+  const onPointerCancel = (e) => {
+    endDrag(e);
+  };
+  const handleClick = () => {
+    if (didDragRef.current) {
+      didDragRef.current = false;
+      return;
+    }
+    setIsOpen(!isOpen);
+  };
+  const applied = coarse && pos ? clampFabPos(pos) : null;
+  const fabStyle = {
+    left: applied ? `${applied.left}px` : DEFAULT_LEFT,
+    bottom: applied ? `${applied.bottom}px` : DEFAULT_BOTTOM,
+    width: "3.5rem",
+    height: "3.5rem",
+    backgroundImage: `linear-gradient(135deg, ${theme.primary}, ${theme.accent})`,
+    boxShadow: "0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04), 0 0 0 2px rgba(255,255,255,0.7)",
+    zIndex: 9990
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
       type: "button",
       "data-qa-overlay": "true",
       dir: "ltr",
-      onClick: () => setIsOpen(!isOpen),
+      onClick: handleClick,
+      onPointerDown: coarse ? onPointerDown : void 0,
+      onPointerMove: coarse ? onPointerMove : void 0,
+      onPointerUp: coarse ? onPointerUp : void 0,
+      onPointerCancel: coarse ? onPointerCancel : void 0,
       "aria-label": "Qapture \u2014 testing notes",
       title: "Qapture",
-      className: "qa-fixed qa-flex qa-items-center qa-justify-center qa-rounded-full qa-text-white qa-print-hidden qa-fab-btn",
-      style: {
-        left: "calc(1.25rem + env(safe-area-inset-left))",
-        bottom: "calc(5rem + env(safe-area-inset-bottom))",
-        width: "3.5rem",
-        height: "3.5rem",
-        backgroundImage: `linear-gradient(135deg, ${theme.primary}, ${theme.accent})`,
-        boxShadow: "0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04), 0 0 0 2px rgba(255,255,255,0.7)",
-        zIndex: 9990
-      },
+      className: `qa-fixed qa-flex qa-items-center qa-justify-center qa-rounded-full qa-text-white qa-print-hidden qa-fab-btn${coarse ? " qa-touch-none" : ""}`,
+      style: fabStyle,
       children: [
         !isOpen && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
@@ -2554,6 +2691,20 @@ function panelReducer(state, action) {
       return state;
   }
 }
+var KEYBOARD_OVERLAP_THRESHOLD = 120;
+var KEYBOARD_LIFT_GAP = 12;
+var NON_TEXT_INPUT_TYPES = /* @__PURE__ */ new Set([
+  "checkbox",
+  "radio",
+  "range",
+  "button",
+  "submit",
+  "reset",
+  "color",
+  "file",
+  "image"
+]);
+var PANEL_TRANSITION_WITH_LIFT = "opacity 200ms cubic-bezier(0.4,0,0.2,1), transform 200ms cubic-bezier(0.4,0,0.2,1), bottom 200ms cubic-bezier(0.4,0,0.2,1)";
 function QaPanel() {
   const {
     isOpen,
@@ -2619,6 +2770,61 @@ function QaPanel() {
     mql.addListener(handleChange);
     return () => mql.removeListener(handleChange);
   }, []);
+  const coarse = useCoarsePointer();
+  const panelRef = React.useRef(null);
+  const [keyboardLift, setKeyboardLift] = React.useState(0);
+  const computeKeyboardLift = React.useCallback(() => {
+    try {
+      if (!coarse || isIpadLandscape) return 0;
+      if (typeof window === "undefined") return 0;
+      const vv = window.visualViewport;
+      if (!vv) return 0;
+      const overlap = Math.max(0, window.innerHeight - vv.height - vv.offsetTop);
+      if (overlap <= KEYBOARD_OVERLAP_THRESHOLD) return 0;
+      const panel = panelRef.current;
+      if (!panel) return 0;
+      const root = panel.getRootNode();
+      const active = root.activeElement;
+      if (!active || !panel.contains(active)) return 0;
+      const tag = active.tagName;
+      if (tag === "TEXTAREA") return Math.round(overlap) + KEYBOARD_LIFT_GAP;
+      if (tag === "INPUT" && !NON_TEXT_INPUT_TYPES.has(active.type)) {
+        return Math.round(overlap) + KEYBOARD_LIFT_GAP;
+      }
+      return 0;
+    } catch {
+      return 0;
+    }
+  }, [coarse, isIpadLandscape]);
+  React.useEffect(() => {
+    if (!coarse) return void 0;
+    if (typeof window === "undefined" || typeof document === "undefined") return void 0;
+    const vv = window.visualViewport;
+    if (!vv) return void 0;
+    let closeTimer;
+    const recompute = () => setKeyboardLift(computeKeyboardLift());
+    const recomputeSoon = () => {
+      if (closeTimer !== void 0) clearTimeout(closeTimer);
+      closeTimer = setTimeout(recompute, 80);
+    };
+    recompute();
+    vv.addEventListener("resize", recompute);
+    vv.addEventListener("scroll", recompute);
+    document.addEventListener("focusin", recompute);
+    document.addEventListener("focusout", recomputeSoon);
+    return () => {
+      if (closeTimer !== void 0) clearTimeout(closeTimer);
+      vv.removeEventListener("resize", recompute);
+      vv.removeEventListener("scroll", recompute);
+      document.removeEventListener("focusin", recompute);
+      document.removeEventListener("focusout", recomputeSoon);
+    };
+  }, [coarse, computeKeyboardLift]);
+  React.useEffect(() => {
+    if (!isOpen) setKeyboardLift(0);
+  }, [isOpen]);
+  const keyboardLiftActive = coarse && !isIpadLandscape;
+  const appliedKeyboardLift = keyboardLiftActive ? keyboardLift : 0;
   if (phase === "hidden") return null;
   const openNaming = () => {
     setFilename(todayName());
@@ -2629,9 +2835,12 @@ function QaPanel() {
     void exportZip(filename);
   };
   const namingCoverage = naming ? computeCoverage(journey, guideChecked) : null;
+  const restBottomRem = dir === "rtl" ? "9rem" : "8.75rem";
+  const panelBottom = isIpadLandscape ? "0" : appliedKeyboardLift > 0 ? `calc(${restBottomRem} + env(safe-area-inset-bottom) + ${appliedKeyboardLift}px)` : `calc(${restBottomRem} + env(safe-area-inset-bottom))`;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
+      ref: panelRef,
       "data-qa-overlay": "true",
       dir,
       onTransitionEnd: handleTransitionEnd,
@@ -2642,7 +2851,7 @@ function QaPanel() {
         left: isIpadLandscape ? "auto" : "calc(1rem + env(safe-area-inset-left))",
         right: isIpadLandscape ? "0" : void 0,
         top: isIpadLandscape ? "0" : void 0,
-        bottom: isIpadLandscape ? "0" : dir === "rtl" ? "calc(9rem + env(safe-area-inset-bottom))" : "calc(8.75rem + env(safe-area-inset-bottom))",
+        bottom: panelBottom,
         height: isIpadLandscape ? "100dvh" : void 0,
         width: isIpadLandscape ? "min(92vw, 420px)" : void 0,
         // qa-max-h-74vh (class) would otherwise cap the sheet well short of
@@ -2652,7 +2861,12 @@ function QaPanel() {
         background: theme.surface,
         borderColor: `${theme.primary}22`,
         fontFamily: lang === "ar" ? "'Tajawal', sans-serif" : "'Nunito', system-ui, sans-serif",
-        zIndex: 9990
+        zIndex: 9990,
+        // Keyboard-avoidance lift (coarse/touch only — see effect above).
+        // undefined ⇒ !keyboardLiftActive, so desktop and the iPad-landscape
+        // side-sheet render this property exactly as before (the class's own
+        // opacity/transform transition applies, untouched).
+        transition: keyboardLiftActive ? PANEL_TRANSITION_WITH_LIFT : void 0
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3036,29 +3250,6 @@ function getStableSelector(el) {
   }
   return nthOfTypePath(el);
 }
-function isCoarsePointer() {
-  if (typeof window === "undefined") return false;
-  try {
-    if (window.matchMedia && window.matchMedia("(pointer: coarse)").matches) return true;
-  } catch {
-  }
-  return typeof navigator !== "undefined" && (navigator.maxTouchPoints || 0) > 0;
-}
-function useCoarsePointer() {
-  const [coarse, setCoarse] = React.useState(() => isCoarsePointer());
-  React.useEffect(() => {
-    if (typeof window === "undefined" || !window.matchMedia) return;
-    const mq = window.matchMedia("(pointer: coarse)");
-    const on = () => setCoarse(isCoarsePointer());
-    if (mq.addEventListener) mq.addEventListener("change", on);
-    else if (mq.addListener) mq.addListener(on);
-    return () => {
-      if (mq.removeEventListener) mq.removeEventListener("change", on);
-      else if (mq.removeListener) mq.removeListener(on);
-    };
-  }, []);
-  return coarse;
-}
 
 // src/lib/scrollLock.ts
 var locked = false;
@@ -3080,7 +3271,7 @@ function unlockPageScroll() {
   if (document.body) document.body.style.overflow = prevBodyOverflow;
   locked = false;
 }
-var DRAG_THRESHOLD = 6;
+var DRAG_THRESHOLD2 = 6;
 var TOUCH_DRAG_THRESHOLD = 12;
 var MIN_REGION_SIZE = 8;
 var REGION_HANDLES = [
@@ -3203,7 +3394,7 @@ function CaptureMode() {
     activePointerId.current = null;
     const d = dragRef.current;
     dragRef.current = null;
-    const threshold = pointerKind.current === "mouse" ? DRAG_THRESHOLD : TOUCH_DRAG_THRESHOLD;
+    const threshold = pointerKind.current === "mouse" ? DRAG_THRESHOLD2 : TOUCH_DRAG_THRESHOLD;
     const moved = d !== null && Math.hypot(e.clientX - d.x0, e.clientY - d.y0) > threshold;
     scrollSnap.current = { x: window.scrollX, y: window.scrollY };
     if (moved && d) {
@@ -3827,5 +4018,5 @@ function Qapture({ config }) {
 
 exports.Qapture = Qapture;
 exports.initQaStudio = initQaStudio;
-//# sourceMappingURL=chunk-CJQHPDT7.cjs.map
-//# sourceMappingURL=chunk-CJQHPDT7.cjs.map
+//# sourceMappingURL=chunk-PBXQDL7C.cjs.map
+//# sourceMappingURL=chunk-PBXQDL7C.cjs.map

package/dist/index.cjs

@@ -1,20 +1,20 @@
 'use strict';
 
-var chunkCJQHPDT7_cjs = require('./chunk-CJQHPDT7.cjs');
+var chunkPBXQDL7C_cjs = require('./chunk-PBXQDL7C.cjs');
 
 
 
 Object.defineProperty(exports, "QaStudio", {
   enumerable: true,
-  get: function () { return chunkCJQHPDT7_cjs.Qapture; }
+  get: function () { return chunkPBXQDL7C_cjs.Qapture; }
 });
 Object.defineProperty(exports, "Qapture", {
   enumerable: true,
-  get: function () { return chunkCJQHPDT7_cjs.Qapture; }
+  get: function () { return chunkPBXQDL7C_cjs.Qapture; }
 });
 Object.defineProperty(exports, "initQaStudio", {
   enumerable: true,
-  get: function () { return chunkCJQHPDT7_cjs.initQaStudio; }
+  get: function () { return chunkPBXQDL7C_cjs.initQaStudio; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -1,3 +1,3 @@
-export { Qapture as QaStudio, Qapture, initQaStudio } from './chunk-OPZF4IVW.js';
+export { Qapture as QaStudio, Qapture, initQaStudio } from './chunk-L6VS36GE.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/next.cjs

@@ -1,21 +1,21 @@
 "use client";
 'use strict';
 
-var chunkCJQHPDT7_cjs = require('./chunk-CJQHPDT7.cjs');
+var chunkPBXQDL7C_cjs = require('./chunk-PBXQDL7C.cjs');
 
 
 
 Object.defineProperty(exports, "QaStudio", {
   enumerable: true,
-  get: function () { return chunkCJQHPDT7_cjs.Qapture; }
+  get: function () { return chunkPBXQDL7C_cjs.Qapture; }
 });
 Object.defineProperty(exports, "Qapture", {
   enumerable: true,
-  get: function () { return chunkCJQHPDT7_cjs.Qapture; }
+  get: function () { return chunkPBXQDL7C_cjs.Qapture; }
 });
 Object.defineProperty(exports, "initQaStudio", {
   enumerable: true,
-  get: function () { return chunkCJQHPDT7_cjs.initQaStudio; }
+  get: function () { return chunkPBXQDL7C_cjs.initQaStudio; }
 });
 //# sourceMappingURL=next.cjs.map
 //# sourceMappingURL=next.cjs.map

package/dist/next.js

@@ -1,4 +1,4 @@
 "use client";
-export { Qapture as QaStudio, Qapture, initQaStudio } from './chunk-OPZF4IVW.js';
+export { Qapture as QaStudio, Qapture, initQaStudio } from './chunk-L6VS36GE.js';
 //# sourceMappingURL=next.js.map
 //# sourceMappingURL=next.js.map

package/dist/standalone.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkCJQHPDT7_cjs = require('./chunk-CJQHPDT7.cjs');
+var chunkPBXQDL7C_cjs = require('./chunk-PBXQDL7C.cjs');
 
 // src/standalone.ts
 if (typeof window !== "undefined" && typeof customElements !== "undefined" && !customElements.get("qapture-widget")) {
@@ -33,7 +33,7 @@ if (typeof window !== "undefined" && typeof customElements !== "undefined" && !c
 
 Object.defineProperty(exports, "initQaStudio", {
   enumerable: true,
-  get: function () { return chunkCJQHPDT7_cjs.initQaStudio; }
+  get: function () { return chunkPBXQDL7C_cjs.initQaStudio; }
 });
 //# sourceMappingURL=standalone.cjs.map
 //# sourceMappingURL=standalone.cjs.map

package/dist/standalone.js

@@ -1,4 +1,4 @@
-export { initQaStudio } from './chunk-OPZF4IVW.js';
+export { initQaStudio } from './chunk-L6VS36GE.js';
 
 // src/standalone.ts
 if (typeof window !== "undefined" && typeof customElements !== "undefined" && !customElements.get("qapture-widget")) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qapture2",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Drop-in, AI-aware in-browser QA capture widget. A tester annotates the live app (element/region + auto-screenshot + note), tracks a graded testing journey, and exports a ZIP your own coding agent reads. Ships zero AI.",
   "type": "module",
   "license": "MIT",
@@ -55,7 +55,7 @@
     "./package.json": "./package.json"
   },
   "bin": {
-    "qapture": "./dist/bin/init.cjs"
+    "qapture2": "dist/bin/init.cjs"
   },
   "repository": {
     "type": "git",