lib-e2e-cypress-for-dummys-ts 0.5.0 → 0.6.1

package/README.md

@@ -361,6 +361,23 @@ Stopping a recording (save **or** discard) ends the session, so a finished recor
 
 ---
 
+### Moving the widget (draggable)
+
+If the floating widget covers a control you need, **drag the record button (⏺/⏹)**
+to move the whole widget anywhere on screen. Press-and-move to drag; a plain click
+still starts/stops recording (a ~5 px threshold tells the two apart).
+
+The radial menu **expands toward the centre of the screen**, so the action buttons
+stay fully visible wherever you drop it, and the position is **remembered** across
+reloads (and app crossings). Reset it to the default corner from **⚙️ Config →
+🧲 Widget position → Reset position**, or programmatically:
+
+```typescript
+recorder.resetWidgetPosition();
+```
+
+---
+
 ### Keyboard shortcuts
 
 | Shortcut | Action |
@@ -535,6 +552,9 @@ class LibE2eRecorderElement extends HTMLElement {
   hasActiveSession(): boolean;            // is a recording session persisted/active?
   resumeSession(): void;                  // rehydrate the persisted session
   discardSession(): void;                 // drop the persisted session
+
+  // Draggable widget
+  resetWidgetPosition(): void;            // move the widget back to its default corner
 }
 ```
 

package/dist/index.cjs

@@ -467,6 +467,7 @@ __export(index_exports, {
   DB_SCHEMA: () => DB_SCHEMA,
   DB_STORE_NAMES: () => DB_STORE_NAMES,
   DEFAULT_RESUME_TTL_MINUTES: () => DEFAULT_RESUME_TTL_MINUTES,
+  DRAG_THRESHOLD: () => DRAG_THRESHOLD,
   FilePreviewElement: () => FilePreviewElement,
   HttpMonitor: () => HttpMonitor,
   INPUT_TYPES: () => INPUT_TYPES,
@@ -481,12 +482,17 @@ __export(index_exports, {
   SaveTestElement: () => SaveTestElement,
   SelectorPickerElement: () => SelectorPickerElement,
   Subject: () => Subject,
+  TOGGLE_MARGIN: () => TOGGLE_MARGIN,
   TestEditorElement: () => TestEditorElement,
   TestPrevisualizerElement: () => TestPrevisualizerElement,
   TransformationService: () => TransformationService,
   TranslationService: () => TranslationService,
   VERSION: () => VERSION,
   advancedTestTransformationService: () => advancedTestTransformationService,
+  boxOffsetForDirection: () => boxOffsetForDirection,
+  boxTopLeftFor: () => boxTopLeftFor,
+  clampTogglePosition: () => clampTogglePosition,
+  defaultTogglePosition: () => defaultTogglePosition,
   generateAlias: () => generateAlias,
   injectStyles: () => injectStyles,
   isLang: () => isLang,
@@ -496,6 +502,7 @@ __export(index_exports, {
   makeSwalDraggable: () => makeSwalDraggable,
   makeSwalDraggableByContentId: () => makeSwalDraggableByContentId,
   persistenceService: () => persistenceService,
+  resolveExpandDirection: () => resolveExpandDirection,
   selectTestsForExport: () => selectTestsForExport,
   setSwal2DataCyAttribute: () => setSwal2DataCyAttribute,
   showToast: () => showToast,
@@ -703,7 +710,11 @@ var I18N_ES = {
     START_HIDDEN_SUB: "El widget arranca invisible. Usa Ctrl+Shift+E para mostrarlo u ocultarlo.",
     RESUME_TTL_SECTION: "\u23F1 Continuidad de grabaci\xF3n",
     RESUME_TTL_LABEL: "Reanudar sin preguntar (minutos)",
-    RESUME_TTL_HINT: "Si recargas o cambias de proyecto, una grabaci\xF3n activa se reanuda sin preguntar dentro de este margen. Pasado ese tiempo, te preguntar\xE1 si continuar o descartar."
+    RESUME_TTL_HINT: "Si recargas o cambias de proyecto, una grabaci\xF3n activa se reanuda sin preguntar dentro de este margen. Pasado ese tiempo, te preguntar\xE1 si continuar o descartar.",
+    WIDGET_POSITION_SECTION: "\u{1F9F2} Posici\xF3n del widget",
+    WIDGET_POSITION_HINT: "Arrastra el bot\xF3n de grabar para moverlo donde no estorbe. Se recuerda su posici\xF3n.",
+    WIDGET_POSITION_RESET_BTN: "\u21BA Restablecer posici\xF3n",
+    WIDGET_POSITION_RESET_DONE: "\u2713 Posici\xF3n restablecida"
   },
   SELECTOR_PICKER: {
     TITLE: "Selecciona un elemento del DOM",
@@ -899,7 +910,11 @@ var I18N_EN = {
     START_HIDDEN_SUB: "The widget starts invisible. Use Ctrl+Shift+E to show or hide it.",
     RESUME_TTL_SECTION: "\u23F1 Recording continuity",
     RESUME_TTL_LABEL: "Resume without asking (minutes)",
-    RESUME_TTL_HINT: "If you reload or switch projects, an active recording resumes without asking within this window. After that, you will be asked to continue or discard."
+    RESUME_TTL_HINT: "If you reload or switch projects, an active recording resumes without asking within this window. After that, you will be asked to continue or discard.",
+    WIDGET_POSITION_SECTION: "\u{1F9F2} Widget position",
+    WIDGET_POSITION_HINT: "Drag the record button to move it out of the way. Its position is remembered.",
+    WIDGET_POSITION_RESET_BTN: "\u21BA Reset position",
+    WIDGET_POSITION_RESET_DONE: "\u2713 Position reset"
   },
   SELECTOR_PICKER: {
     TITLE: "Select a DOM element",
@@ -1095,7 +1110,11 @@ var I18N_FR = {
     START_HIDDEN_SUB: "Le widget d\xE9marre invisible. Utilisez Ctrl+Shift+E pour l'afficher ou le masquer.",
     RESUME_TTL_SECTION: "\u23F1 Continuit\xE9 d'enregistrement",
     RESUME_TTL_LABEL: "Reprendre sans demander (minutes)",
-    RESUME_TTL_HINT: "Si vous rechargez ou changez de projet, un enregistrement actif reprend sans demander dans ce d\xE9lai. Au-del\xE0, il vous demandera de continuer ou d'ignorer."
+    RESUME_TTL_HINT: "Si vous rechargez ou changez de projet, un enregistrement actif reprend sans demander dans ce d\xE9lai. Au-del\xE0, il vous demandera de continuer ou d'ignorer.",
+    WIDGET_POSITION_SECTION: "\u{1F9F2} Position du widget",
+    WIDGET_POSITION_HINT: "Fais glisser le bouton d'enregistrement pour le d\xE9placer. Sa position est m\xE9moris\xE9e.",
+    WIDGET_POSITION_RESET_BTN: "\u21BA R\xE9initialiser la position",
+    WIDGET_POSITION_RESET_DONE: "\u2713 Position r\xE9initialis\xE9e"
   },
   SELECTOR_PICKER: {
     TITLE: "S\xE9lectionnez un \xE9l\xE9ment du DOM",
@@ -1291,7 +1310,11 @@ var I18N_IT = {
     START_HIDDEN_SUB: "Il widget si avvia invisibile. Usa Ctrl+Shift+E per mostrarlo o nasconderlo.",
     RESUME_TTL_SECTION: "\u23F1 Continuit\xE0 di registrazione",
     RESUME_TTL_LABEL: "Riprendi senza chiedere (minuti)",
-    RESUME_TTL_HINT: "Se ricarichi o cambi progetto, una registrazione attiva riprende senza chiedere entro questo intervallo. Trascorso, ti chieder\xE0 se continuare o annullare."
+    RESUME_TTL_HINT: "Se ricarichi o cambi progetto, una registrazione attiva riprende senza chiedere entro questo intervallo. Trascorso, ti chieder\xE0 se continuare o annullare.",
+    WIDGET_POSITION_SECTION: "\u{1F9F2} Posizione del widget",
+    WIDGET_POSITION_HINT: "Trascina il pulsante di registrazione per spostarlo. La posizione viene ricordata.",
+    WIDGET_POSITION_RESET_BTN: "\u21BA Reimposta posizione",
+    WIDGET_POSITION_RESET_DONE: "\u2713 Posizione reimpostata"
   },
   SELECTOR_PICKER: {
     TITLE: "Seleziona un elemento DOM",
@@ -1487,7 +1510,11 @@ var I18N_DE = {
     START_HIDDEN_SUB: "Das Widget startet unsichtbar. Verwenden Sie Ctrl+Shift+E zum Ein-/Ausblenden.",
     RESUME_TTL_SECTION: "\u23F1 Aufzeichnungskontinuit\xE4t",
     RESUME_TTL_LABEL: "Ohne Nachfrage fortsetzen (Minuten)",
-    RESUME_TTL_HINT: "Wenn Sie neu laden oder das Projekt wechseln, wird eine aktive Aufzeichnung innerhalb dieses Zeitfensters ohne Nachfrage fortgesetzt. Danach werden Sie gefragt, ob fortsetzen oder verwerfen."
+    RESUME_TTL_HINT: "Wenn Sie neu laden oder das Projekt wechseln, wird eine aktive Aufzeichnung innerhalb dieses Zeitfensters ohne Nachfrage fortgesetzt. Danach werden Sie gefragt, ob fortsetzen oder verwerfen.",
+    WIDGET_POSITION_SECTION: "\u{1F9F2} Widget-Position",
+    WIDGET_POSITION_HINT: "Ziehe den Aufnahme-Button, um ihn aus dem Weg zu schieben. Die Position wird gespeichert.",
+    WIDGET_POSITION_RESET_BTN: "\u21BA Position zur\xFCcksetzen",
+    WIDGET_POSITION_RESET_DONE: "\u2713 Position zur\xFCckgesetzt"
   },
   SELECTOR_PICKER: {
     TITLE: "DOM-Element ausw\xE4hlen",
@@ -1840,7 +1867,7 @@ var RecordingService = class {
     this.interceptors$.next([...ints.slice(0, index), ...ints.slice(index + 1)]);
   }
   registerInterceptor(method, url, alias) {
-    if (this.isPaused$.getValue()) return;
+    if (!this.isRecording$.getValue() || this.isPaused$.getValue()) return;
     const command = `cy.intercept('${method}', '${this.urlToWildcard(url, method)}').as('${alias}')`;
     const current = this.interceptors$.getValue();
     if (!current.includes(command)) {
@@ -2758,6 +2785,37 @@ function isLocalHost(hostname) {
   return h === "localhost" || h.endsWith(".localhost") || h === "127.0.0.1" || h === "::1" || h === "0.0.0.0";
 }
 
+// src/utils/widget-position.utils.ts
+var TOGGLE_MARGIN = 30;
+var DRAG_THRESHOLD = 5;
+var DEFAULT_EDGE_OFFSET = 46;
+function boxOffsetForDirection(dir) {
+  return {
+    x: dir.endsWith("left") ? 144 : 46,
+    y: dir.startsWith("up") ? 144 : 46
+  };
+}
+function clampTogglePosition(x, y, vw, vh, margin = TOGGLE_MARGIN) {
+  const maxX = Math.max(margin, vw - margin);
+  const maxY = Math.max(margin, vh - margin);
+  return {
+    x: Math.min(Math.max(x, margin), maxX),
+    y: Math.min(Math.max(y, margin), maxY)
+  };
+}
+function resolveExpandDirection(x, y, vw, vh) {
+  const vertical = y < vh / 2 ? "down" : "up";
+  const horizontal = x < vw / 2 ? "right" : "left";
+  return `${vertical}-${horizontal}`;
+}
+function defaultTogglePosition(vw, vh) {
+  return { x: vw - DEFAULT_EDGE_OFFSET, y: vh - DEFAULT_EDGE_OFFSET };
+}
+function boxTopLeftFor(toggleCentre, dir) {
+  const off = boxOffsetForDirection(dir);
+  return { x: toggleCentre.x - off.x, y: toggleCentre.y - off.y };
+}
+
 // src/index.ts
 init_selector_picker();
 
@@ -3868,6 +3926,15 @@ function renderConfiguration(state, t) {
         </label>
       </div>
 
+      <!-- Widget position (draggable widget) -->
+      <div class="card">
+        <div class="card-hd">${t("CONFIG.WIDGET_POSITION_SECTION")}</div>
+        <div class="check-sub" style="margin-bottom:10px">${t("CONFIG.WIDGET_POSITION_HINT")}</div>
+        <div class="btn-row">
+          <button id="btn-reset-position">${t("CONFIG.WIDGET_POSITION_RESET_BTN")}</button>
+        </div>
+      </div>
+
       <!-- Recording continuity (cross-app resume TTL) -->
       <div class="card">
         <div class="card-hd">${t("CONFIG.RESUME_TTL_SECTION")}</div>
@@ -4008,6 +4075,10 @@ var ConfigurationElement = class extends HTMLElement {
     await this.persistence.setConfig({ [RESUME_TTL_CONFIG_KEY]: safe });
     this.render();
   }
+  onResetWidgetPosition() {
+    this.dispatchEvent(new CustomEvent("resetwidgetposition", { bubbles: true, composed: true }));
+    showToast(this.t("CONFIG.WIDGET_POSITION_RESET_DONE"));
+  }
   async onSmartSelectorChange(enabled) {
     this.smartSelectorEnabled = enabled;
     await this.persistence.setConfig({ smartSelectorEnabled: enabled ? "true" : "false" });
@@ -4143,6 +4214,7 @@ var ConfigurationElement = class extends HTMLElement {
       "change",
       (e) => this.onResumeTtlChange(Number(e.target.value))
     );
+    this.shadow.getElementById("btn-reset-position")?.addEventListener("click", () => this.onResetWidgetPosition());
     this.shadow.getElementById("selector-strategy").addEventListener(
       "change",
       (e) => this.onSelectorStrategyChange(e.target.value)
@@ -5107,15 +5179,37 @@ if (!customElements.get("file-preview")) {
 var import_sweetalert2 = __toESM(require("sweetalert2"), 1);
 
 // src/components/lib-e2e-recorder/lib-e2e-recorder.styles.ts
+var DIRECTIONS = ["up-left", "up-right", "down-left", "down-right"];
+function directionBlocks() {
+  return DIRECTIONS.map((dir) => {
+    const sx = dir.endsWith("left") ? -1 : 1;
+    const sy = dir.startsWith("up") ? -1 : 1;
+    const tv = dir.startsWith("up") ? "bottom" : "top";
+    const th = dir.endsWith("left") ? "right" : "left";
+    const ov = tv === "bottom" ? "top" : "bottom";
+    const oh = th === "right" ? "left" : "right";
+    const sel = `.widget[data-expand="${dir}"]`;
+    const labelGeneral = `${sel} .btn-action::after { ${oh}: calc(100% + 9px); ${th}: auto; top: 50%; bottom: auto; transform: translateY(-50%); }`;
+    const labelEnds = `${sel} .btn-action[data-n="1"]::after, ${sel} .btn-action[data-n="4"]::after { ${ov}: calc(100% + 9px); ${tv}: auto; left: 50%; right: auto; transform: translateX(-50%); }`;
+    return `
+      ${sel} { --sx: ${sx}; --sy: ${sy}; }
+      ${sel} .btn-toggle { ${tv}: 24px; ${th}: 24px; ${ov}: auto; ${oh}: auto; }
+      ${sel} .btn-pause  { ${tv}: 78px; ${th}: 24px; ${ov}: auto; ${oh}: auto; }
+      ${sel} .btn-action { ${tv}: 28px; ${th}: 28px; ${ov}: auto; ${oh}: auto; }
+      ${labelGeneral}
+      ${labelEnds}
+    `;
+  }).join("\n");
+}
 function getRecorderStyles(rec, paused) {
   return `
     :host { all: initial; }
     *, *::before, *::after { box-sizing: border-box; }
 
     /*
-     * Invisible 190\xD7190 hit area anchored at bottom-right.
-     * Keeps :hover alive while the cursor travels from the
-     * toggle to any of the radial action buttons.
+     * Invisible 190\xD7190 hit area. Position (left/top) is set from JS so the
+     * widget can be dragged; --sx/--sy + data-expand orient the radial menu so
+     * it always expands toward the viewport interior. Defaults to bottom-right.
      */
     .widget {
       position: fixed;
@@ -5124,6 +5218,8 @@ function getRecorderStyles(rec, paused) {
       width: 190px;
       height: 190px;
       z-index: 2147483647;
+      --sx: -1;
+      --sy: -1;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     }
 
@@ -5136,7 +5232,8 @@ function getRecorderStyles(rec, paused) {
       height: 44px;
       border-radius: 50%;
       border: none;
-      cursor: pointer;
+      cursor: grab;
+      touch-action: none;
       font-size: 19px;
       background: ${rec ? "linear-gradient(135deg,#f85149 0%,#da3633 100%)" : "linear-gradient(135deg,#2f81f7 0%,#1f6feb 100%)"};
       color: #fff;
@@ -5149,7 +5246,7 @@ function getRecorderStyles(rec, paused) {
       ${rec ? "animation: toggle-pulse 2s ease-in-out infinite;" : ""}
     }
     .btn-toggle:hover  { transform: scale(1.1); }
-    .btn-toggle:active { transform: scale(0.93); }
+    .btn-toggle:active { transform: scale(0.93); cursor: grabbing; }
 
     @keyframes toggle-pulse {
       0%,100% { box-shadow: 0 4px 20px rgba(248,81,73,.55),0 0 0 4px rgba(248,81,73,.13); }
@@ -5180,11 +5277,6 @@ function getRecorderStyles(rec, paused) {
     .btn-pause:active { transform: scale(0.93); }
 
     /* \u2500\u2500 Action buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-    /*
-     * All three start centered on the toggle button
-     * (toggle center = bottom:46px right:46px from widget edge;
-     *  button half = 18px \u2192 bottom:28px right:28px).
-     */
     .btn-action {
       position: absolute;
       bottom: 28px;
@@ -5206,12 +5298,11 @@ function getRecorderStyles(rec, paused) {
       opacity: 0;
       transform: scale(0.35);
       pointer-events: none;
-      /* Collapse: fast, no spring */
       transition: opacity .15s, transform .18s ease-in,
                   background .15s, color .12s, box-shadow .15s;
     }
 
-    /* Label to the left of each button */
+    /* Label chip */
     .btn-action::after {
       content: attr(data-label);
       position: absolute;
@@ -5231,14 +5322,6 @@ function getRecorderStyles(rec, paused) {
       border: 1px solid rgba(48,54,61,.8);
       box-shadow: 0 2px 8px rgba(0,0,0,.35);
     }
-    /* Button 1 (top) \u2014 label above instead of left to avoid overlap with btn 2 */
-    .btn-action[data-n="1"]::after {
-      right: auto;
-      left: 50%;
-      top: auto;
-      bottom: calc(100% + 9px);
-      transform: translateX(-50%);
-    }
     .btn-action:hover::after   { opacity: 1; }
     .btn-action:hover          { background: #21262d; color: #e6edf3; }
     .btn-action:active         { background: #30363d !important; }
@@ -5251,31 +5334,26 @@ function getRecorderStyles(rec, paused) {
                   background .15s, color .12s, box-shadow .15s;
     }
 
-    /* Arc positions \u2014 4 buttons, 30\xB0 spacing, radius 90px */
-    .widget:hover .btn-action[data-n="1"] {   /* 0\xB0  \u2014 straight up   */
-      transform: translateY(-90px) scale(1);
+    /* Arc positions \u2014 signs come from --sx/--sy (data-expand) */
+    .widget:hover .btn-action[data-n="1"] {   /* vertical extreme */
+      transform: translateY(calc(var(--sy) * 90px)) scale(1);
       transition-delay: .03s;
     }
-    .widget:hover .btn-action[data-n="2"] {   /* 30\xB0 \u2014 upper-left    */
-      transform: translate(-45px,-78px) scale(1);
+    .widget:hover .btn-action[data-n="2"] {   /* diagonal near-vertical */
+      transform: translate(calc(var(--sx) * 45px), calc(var(--sy) * 78px)) scale(1);
       transition-delay: .07s;
     }
-    .widget:hover .btn-action[data-n="3"] {   /* 60\xB0 \u2014 left-upper    */
-      transform: translate(-78px,-45px) scale(1);
+    .widget:hover .btn-action[data-n="3"] {   /* diagonal near-horizontal */
+      transform: translate(calc(var(--sx) * 78px), calc(var(--sy) * 45px)) scale(1);
       transition-delay: .11s;
     }
-    .widget:hover .btn-action[data-n="4"] {   /* 90\xB0 \u2014 straight left */
-      transform: translateX(-90px) scale(1);
+    .widget:hover .btn-action[data-n="4"] {   /* horizontal extreme */
+      transform: translateX(calc(var(--sx) * 90px)) scale(1);
       transition-delay: .15s;
     }
-    /* Button 4 (pure left) \u2014 label above to avoid going off-screen */
-    .btn-action[data-n="4"]::after {
-      right: auto;
-      left: 50%;
-      top: auto;
-      bottom: calc(100% + 9px);
-      transform: translateX(-50%);
-    }
+
+    /* Per-direction anchors + label sides */
+    ${directionBlocks()}
 
     /* \u2500\u2500 REC / PAUSED badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
     .rec-badge {
@@ -5342,9 +5420,18 @@ var LibE2eRecorderElement = class extends HTMLElement {
   sessionUnsub;
   sessionSaveTimer;
   controlFirstTimeData = true;
+  // ── draggable widget (spec 007) ──
+  togglePos = null;
+  expandDir = "up-left";
+  dragState;
+  suppressNextToggleClick = false;
+  widgetPointerMove;
+  widgetPointerUp;
+  widgetResize;
   _previsualizerRef = null;
   httpMonitor;
   smartSelectorEnabled = true;
+  _needsRecordingRebuild = false;
   recording;
   persistence;
   translation;
@@ -5370,7 +5457,10 @@ var LibE2eRecorderElement = class extends HTMLElement {
     if (!this.getAttribute("data-cy")) {
       this.setAttribute("data-cy", "lib-e2e-cypress-for-dummys");
     }
-    if (!this.recording) this.recording = new RecordingService();
+    if (!this.recording || this._needsRecordingRebuild) {
+      this.recording = new RecordingService();
+      this._needsRecordingRebuild = false;
+    }
     if (!this.persistence) this.persistence = new PersistenceService();
     if (!this.translation) this.translation = new TranslationService();
     this.httpMonitor = new HttpMonitor(this.recording);
@@ -5385,8 +5475,15 @@ var LibE2eRecorderElement = class extends HTMLElement {
     this.render();
     this.initVisibility();
     this.initSessionContinuity();
+    this.initWidgetPosition();
     this.keydownHandler = (e) => this.handleKeyboardEvent(e);
     window.addEventListener("keydown", this.keydownHandler);
+    this.widgetPointerMove = (e) => this.onWidgetPointerMove(e);
+    this.widgetPointerUp = () => this.onWidgetPointerUp();
+    this.widgetResize = () => this.applyWidgetPosition();
+    window.addEventListener("pointermove", this.widgetPointerMove);
+    window.addEventListener("pointerup", this.widgetPointerUp);
+    window.addEventListener("resize", this.widgetResize);
   }
   disconnectedCallback() {
     if (this._isDisabled) return;
@@ -5399,8 +5496,12 @@ var LibE2eRecorderElement = class extends HTMLElement {
     this.selectorNotFoundUnsub?.();
     this.langUnsub?.();
     this.sessionUnsub?.();
+    if (this.widgetPointerMove) window.removeEventListener("pointermove", this.widgetPointerMove);
+    if (this.widgetPointerUp) window.removeEventListener("pointerup", this.widgetPointerUp);
+    if (this.widgetResize) window.removeEventListener("resize", this.widgetResize);
     this.httpMonitor?.uninstall();
     this.recording.destroy();
+    this._needsRecordingRebuild = true;
   }
   async initHttpConfig() {
     const config = await this.persistence.getConfig("extendedHttpCommands");
@@ -5585,6 +5686,64 @@ var LibE2eRecorderElement = class extends HTMLElement {
   discardSession() {
     this.clearSessionPersistence();
   }
+  // ── draggable widget (spec 007) ────────────────────────────────────────────
+  /** Loads a previously saved widget position and applies it. */
+  async initWidgetPosition() {
+    const config = await this.persistence.getGeneralConfig();
+    const pos = config?.["widgetPosition"];
+    if (pos && typeof pos.x === "number" && typeof pos.y === "number") {
+      this.togglePos = { x: pos.x, y: pos.y };
+    }
+    this.applyWidgetPosition();
+  }
+  /** Positions the `.widget` box from the (clamped) toggle centre and orients the arc. */
+  applyWidgetPosition() {
+    const widget = this.shadow.querySelector(".widget");
+    if (!widget) return;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const centre = this.togglePos ?? defaultTogglePosition(vw, vh);
+    const clamped = clampTogglePosition(centre.x, centre.y, vw, vh);
+    this.expandDir = resolveExpandDirection(clamped.x, clamped.y, vw, vh);
+    const topLeft = boxTopLeftFor(clamped, this.expandDir);
+    widget.style.left = `${topLeft.x}px`;
+    widget.style.top = `${topLeft.y}px`;
+    widget.style.right = "auto";
+    widget.style.bottom = "auto";
+    widget.setAttribute("data-expand", this.expandDir);
+  }
+  beginWidgetDrag(e) {
+    this.suppressNextToggleClick = false;
+    const origin = this.togglePos ?? defaultTogglePosition(window.innerWidth, window.innerHeight);
+    this.dragState = { startX: e.clientX, startY: e.clientY, origX: origin.x, origY: origin.y, moved: false };
+  }
+  onWidgetPointerMove(e) {
+    if (!this.dragState) return;
+    const dx = e.clientX - this.dragState.startX;
+    const dy = e.clientY - this.dragState.startY;
+    if (!this.dragState.moved && Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+    this.dragState.moved = true;
+    this.togglePos = { x: this.dragState.origX + dx, y: this.dragState.origY + dy };
+    this.applyWidgetPosition();
+  }
+  onWidgetPointerUp() {
+    if (!this.dragState) return;
+    const moved = this.dragState.moved;
+    this.dragState = void 0;
+    if (!moved || !this.togglePos) return;
+    this.suppressNextToggleClick = true;
+    const clamped = clampTogglePosition(this.togglePos.x, this.togglePos.y, window.innerWidth, window.innerHeight);
+    this.togglePos = clamped;
+    this.persistence.setConfig({ widgetPosition: clamped }).catch(() => {
+    });
+  }
+  /** Resets the widget to its default corner and clears the saved position. */
+  resetWidgetPosition() {
+    this.togglePos = null;
+    this.persistence.setConfig({ widgetPosition: null }).catch(() => {
+    });
+    this.applyWidgetPosition();
+  }
   toggle() {
     this.recording.toggleRecording();
   }
@@ -5802,7 +5961,9 @@ cypress/         <span style="color:#484f58">${this.translation.translate("RECOR
             const type = document.getElementById("assert-type").value;
             const val = document.getElementById("assert-value").value.trim();
             if (!sel) return;
-            const cmd = NO_VALUE_ASSERTIONS.has(type) || !val ? `cy.get('${sel}').should('${type}')` : `cy.get('${sel}').should('${type}', '${val}')`;
+            const s = escapeSingleQuotes(sel);
+            const v = escapeSingleQuotes(val);
+            const cmd = NO_VALUE_ASSERTIONS.has(type) || !val ? `cy.get('${s}').should('${type}')` : `cy.get('${s}').should('${type}', '${v}')`;
             this.recording.appendCommand(cmd);
             document.getElementById("assert-selector").value = "";
             document.getElementById("assert-value").value = "";
@@ -5901,6 +6062,7 @@ cypress/         <span style="color:#484f58">${this.translation.translate("RECOR
             this.isVisible = !e.detail;
             this.style.display = this.isVisible ? "" : "none";
           });
+          child.addEventListener("resetwidgetposition", () => this.resetWidgetPosition());
         },
         willClose: () => {
           this.isSettingsDialogOpen = false;
@@ -6054,12 +6216,21 @@ cypress/         <span style="color:#484f58">${this.translation.translate("RECOR
     const paused = this.isPaused;
     this.style.display = this.isVisible ? "" : "none";
     this.shadow.innerHTML = `<style>${getRecorderStyles(rec, paused)}</style>${renderRecorderWidget(rec, paused, this.translation.translate.bind(this.translation))}`;
-    this.shadow.querySelector('[data-action="toggle"]')?.addEventListener("click", () => this.toggle());
+    const toggleBtn = this.shadow.querySelector('[data-action="toggle"]');
+    toggleBtn?.addEventListener("click", () => {
+      if (this.suppressNextToggleClick) {
+        this.suppressNextToggleClick = false;
+        return;
+      }
+      this.toggle();
+    });
+    toggleBtn?.addEventListener("pointerdown", (e) => this.beginWidgetDrag(e));
     this.shadow.querySelector('[data-action="pause"]')?.addEventListener("click", () => this.togglePause());
     this.shadow.querySelector('[data-action="tests"]')?.addEventListener("click", () => this.showSavedTestsDialog());
     this.shadow.querySelector('[data-action="commands"]')?.addEventListener("click", () => this.showCommandsDialog());
     this.shadow.querySelector('[data-action="config"]')?.addEventListener("click", () => this.showSettingsDialog());
     this.shadow.querySelector('[data-action="browse"]')?.addEventListener("click", () => this.showAdvancedEditorDialog());
+    this.applyWidgetPosition();
   }
 };
 if (!customElements.get("lib-e2e-recorder")) {
@@ -6067,7 +6238,7 @@ if (!customElements.get("lib-e2e-recorder")) {
 }
 
 // src/index.ts
-var VERSION = "0.5.0";
+var VERSION = "0.6.1";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ACTIVE_SESSION_BREADCRUMB_KEY,
@@ -6077,6 +6248,7 @@ var VERSION = "0.5.0";
   DB_SCHEMA,
   DB_STORE_NAMES,
   DEFAULT_RESUME_TTL_MINUTES,
+  DRAG_THRESHOLD,
   FilePreviewElement,
   HttpMonitor,
   INPUT_TYPES,
@@ -6091,12 +6263,17 @@ var VERSION = "0.5.0";
   SaveTestElement,
   SelectorPickerElement,
   Subject,
+  TOGGLE_MARGIN,
   TestEditorElement,
   TestPrevisualizerElement,
   TransformationService,
   TranslationService,
   VERSION,
   advancedTestTransformationService,
+  boxOffsetForDirection,
+  boxTopLeftFor,
+  clampTogglePosition,
+  defaultTogglePosition,
   generateAlias,
   injectStyles,
   isLang,
@@ -6106,6 +6283,7 @@ var VERSION = "0.5.0";
   makeSwalDraggable,
   makeSwalDraggableByContentId,
   persistenceService,
+  resolveExpandDirection,
   selectTestsForExport,
   setSwal2DataCyAttribute,
   showToast,