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

package/dist/index.d.cts

@@ -302,6 +302,38 @@ declare function selectTestsForExport(tests: TestWithDetails[], mode: ExportMode
  */
 declare function isLocalHost(hostname: string): boolean;
 
+/**
+ * Geometry helpers for the draggable recording widget (spec 007).
+ * Pure functions — no DOM — so the drag/clamp/expansion logic is unit-testable
+ * without real layout (jsdom returns 0-sized rects).
+ */
+type ExpandDirection = 'up-left' | 'up-right' | 'down-left' | 'down-right';
+interface Point {
+    x: number;
+    y: number;
+}
+/** Toggle radius (44/2) + small gap, so the toggle never touches the edge. */
+declare const TOGGLE_MARGIN = 30;
+/** Pixels the pointer must travel before a press becomes a drag (vs a click). */
+declare const DRAG_THRESHOLD = 5;
+/**
+ * Toggle-centre offset inside the 190×190 widget box, per expansion direction.
+ * The toggle sits at the box corner nearest the screen edge so the arc always
+ * expands toward the viewport interior (and stays inside the box / on screen).
+ */
+declare function boxOffsetForDirection(dir: ExpandDirection): Point;
+/** Clamps the toggle-centre so the toggle button stays fully on screen. */
+declare function clampTogglePosition(x: number, y: number, vw: number, vh: number, margin?: number): Point;
+/**
+ * Chooses the radial expansion direction so the menu opens toward the centre of
+ * the viewport (top half → expand down; left half → expand right).
+ */
+declare function resolveExpandDirection(x: number, y: number, vw: number, vh: number): ExpandDirection;
+/** Default toggle-centre (bottom-right corner), matching the original CSS anchor. */
+declare function defaultTogglePosition(vw: number, vh: number): Point;
+/** Box top-left for a given (clamped) toggle-centre and direction. */
+declare function boxTopLeftFor(toggleCentre: Point, dir: ExpandDirection): Point;
+
 declare class SelectorPickerElement extends HTMLElement {
     targetElement: HTMLElement | null;
     recording: RecordingService;
@@ -427,6 +459,7 @@ declare class ConfigurationElement extends HTMLElement {
     onAdvancedHttpConfigChange(checked: boolean): void;
     onStartHiddenChange(checked: boolean): Promise<void>;
     onResumeTtlChange(minutes: number): Promise<void>;
+    onResetWidgetPosition(): void;
     onSmartSelectorChange(enabled: boolean): Promise<void>;
     onSelectorStrategyChange(strategy: SelectorStrategy): Promise<void>;
     changeFolder(): Promise<void>;
@@ -549,6 +582,13 @@ declare class LibE2eRecorderElement extends HTMLElement {
     private sessionUnsub?;
     private sessionSaveTimer?;
     private controlFirstTimeData;
+    private togglePos;
+    private expandDir;
+    private dragState?;
+    private suppressNextToggleClick;
+    private widgetPointerMove?;
+    private widgetPointerUp?;
+    private widgetResize?;
     private _previsualizerRef;
     private httpMonitor?;
     private smartSelectorEnabled;
@@ -595,6 +635,15 @@ declare class LibE2eRecorderElement extends HTMLElement {
     resumeSession(): void;
     /** Discard the persisted live session (breadcrumb + DB record). */
     discardSession(): void;
+    /** Loads a previously saved widget position and applies it. */
+    private initWidgetPosition;
+    /** Positions the `.widget` box from the (clamped) toggle centre and orients the arc. */
+    private applyWidgetPosition;
+    private beginWidgetDrag;
+    private onWidgetPointerMove;
+    private onWidgetPointerUp;
+    /** Resets the widget to its default corner and clears the saved position. */
+    resetWidgetPosition(): void;
     toggle(): void;
     togglePause(): void;
     setLanguage(lang?: string): void;
@@ -623,6 +672,6 @@ declare class LibE2eRecorderElement extends HTMLElement {
     private render;
 }
 
-declare const VERSION = "0.5.0";
+declare const VERSION = "0.6.0";
 
-export { ACTIVE_SESSION_BREADCRUMB_KEY, type ActiveSessionState, AdvancedTestEditorElement, AdvancedTestTransformationService, ConfigurationElement, type DBSchema, type DBStore, type DBStoreIndex, DB_SCHEMA, DB_STORE_NAMES, DEFAULT_RESUME_TTL_MINUTES, type DirectoryNode, type ExportMode, type ExportSelectionOptions, type FileNode, FilePreviewElement, HttpMonitor, INPUT_TYPES, type InputType, LIB_E2E_CYPRESS_FOR_DUMMYS_SWAL2_STYLES, LOCALE_BY_LANG, type Lang, LibE2eRecorderElement, PersistenceService, RESUME_TTL_CONFIG_KEY, RecordingService, SCROLLBAR_STYLES, SUPPORTED_LANGS, SaveTestElement, SelectorPickerElement, type SelectorStrategy, Subject, type TestDetail, TestEditorElement, TestPrevisualizerElement, type TestWithDetails, TransformationService, TranslationService, VERSION, advancedTestTransformationService, generateAlias, injectStyles, isLang, isLocalHost, localeForLang, makeModalResizable, makeSwalDraggable, makeSwalDraggableByContentId, persistenceService, selectTestsForExport, setSwal2DataCyAttribute, showToast, transformationService, translationService };
+export { ACTIVE_SESSION_BREADCRUMB_KEY, type ActiveSessionState, AdvancedTestEditorElement, AdvancedTestTransformationService, ConfigurationElement, type DBSchema, type DBStore, type DBStoreIndex, DB_SCHEMA, DB_STORE_NAMES, DEFAULT_RESUME_TTL_MINUTES, DRAG_THRESHOLD, type DirectoryNode, type ExpandDirection, type ExportMode, type ExportSelectionOptions, type FileNode, FilePreviewElement, HttpMonitor, INPUT_TYPES, type InputType, LIB_E2E_CYPRESS_FOR_DUMMYS_SWAL2_STYLES, LOCALE_BY_LANG, type Lang, LibE2eRecorderElement, PersistenceService, type Point, RESUME_TTL_CONFIG_KEY, RecordingService, SCROLLBAR_STYLES, SUPPORTED_LANGS, SaveTestElement, SelectorPickerElement, type SelectorStrategy, Subject, TOGGLE_MARGIN, type TestDetail, TestEditorElement, TestPrevisualizerElement, type TestWithDetails, TransformationService, TranslationService, VERSION, advancedTestTransformationService, boxOffsetForDirection, boxTopLeftFor, clampTogglePosition, defaultTogglePosition, generateAlias, injectStyles, isLang, isLocalHost, localeForLang, makeModalResizable, makeSwalDraggable, makeSwalDraggableByContentId, persistenceService, resolveExpandDirection, selectTestsForExport, setSwal2DataCyAttribute, showToast, transformationService, translationService };

package/dist/index.d.ts

@@ -302,6 +302,38 @@ declare function selectTestsForExport(tests: TestWithDetails[], mode: ExportMode
  */
 declare function isLocalHost(hostname: string): boolean;
 
+/**
+ * Geometry helpers for the draggable recording widget (spec 007).
+ * Pure functions — no DOM — so the drag/clamp/expansion logic is unit-testable
+ * without real layout (jsdom returns 0-sized rects).
+ */
+type ExpandDirection = 'up-left' | 'up-right' | 'down-left' | 'down-right';
+interface Point {
+    x: number;
+    y: number;
+}
+/** Toggle radius (44/2) + small gap, so the toggle never touches the edge. */
+declare const TOGGLE_MARGIN = 30;
+/** Pixels the pointer must travel before a press becomes a drag (vs a click). */
+declare const DRAG_THRESHOLD = 5;
+/**
+ * Toggle-centre offset inside the 190×190 widget box, per expansion direction.
+ * The toggle sits at the box corner nearest the screen edge so the arc always
+ * expands toward the viewport interior (and stays inside the box / on screen).
+ */
+declare function boxOffsetForDirection(dir: ExpandDirection): Point;
+/** Clamps the toggle-centre so the toggle button stays fully on screen. */
+declare function clampTogglePosition(x: number, y: number, vw: number, vh: number, margin?: number): Point;
+/**
+ * Chooses the radial expansion direction so the menu opens toward the centre of
+ * the viewport (top half → expand down; left half → expand right).
+ */
+declare function resolveExpandDirection(x: number, y: number, vw: number, vh: number): ExpandDirection;
+/** Default toggle-centre (bottom-right corner), matching the original CSS anchor. */
+declare function defaultTogglePosition(vw: number, vh: number): Point;
+/** Box top-left for a given (clamped) toggle-centre and direction. */
+declare function boxTopLeftFor(toggleCentre: Point, dir: ExpandDirection): Point;
+
 declare class SelectorPickerElement extends HTMLElement {
     targetElement: HTMLElement | null;
     recording: RecordingService;
@@ -427,6 +459,7 @@ declare class ConfigurationElement extends HTMLElement {
     onAdvancedHttpConfigChange(checked: boolean): void;
     onStartHiddenChange(checked: boolean): Promise<void>;
     onResumeTtlChange(minutes: number): Promise<void>;
+    onResetWidgetPosition(): void;
     onSmartSelectorChange(enabled: boolean): Promise<void>;
     onSelectorStrategyChange(strategy: SelectorStrategy): Promise<void>;
     changeFolder(): Promise<void>;
@@ -549,6 +582,13 @@ declare class LibE2eRecorderElement extends HTMLElement {
     private sessionUnsub?;
     private sessionSaveTimer?;
     private controlFirstTimeData;
+    private togglePos;
+    private expandDir;
+    private dragState?;
+    private suppressNextToggleClick;
+    private widgetPointerMove?;
+    private widgetPointerUp?;
+    private widgetResize?;
     private _previsualizerRef;
     private httpMonitor?;
     private smartSelectorEnabled;
@@ -595,6 +635,15 @@ declare class LibE2eRecorderElement extends HTMLElement {
     resumeSession(): void;
     /** Discard the persisted live session (breadcrumb + DB record). */
     discardSession(): void;
+    /** Loads a previously saved widget position and applies it. */
+    private initWidgetPosition;
+    /** Positions the `.widget` box from the (clamped) toggle centre and orients the arc. */
+    private applyWidgetPosition;
+    private beginWidgetDrag;
+    private onWidgetPointerMove;
+    private onWidgetPointerUp;
+    /** Resets the widget to its default corner and clears the saved position. */
+    resetWidgetPosition(): void;
     toggle(): void;
     togglePause(): void;
     setLanguage(lang?: string): void;
@@ -623,6 +672,6 @@ declare class LibE2eRecorderElement extends HTMLElement {
     private render;
 }
 
-declare const VERSION = "0.5.0";
+declare const VERSION = "0.6.0";
 
-export { ACTIVE_SESSION_BREADCRUMB_KEY, type ActiveSessionState, AdvancedTestEditorElement, AdvancedTestTransformationService, ConfigurationElement, type DBSchema, type DBStore, type DBStoreIndex, DB_SCHEMA, DB_STORE_NAMES, DEFAULT_RESUME_TTL_MINUTES, type DirectoryNode, type ExportMode, type ExportSelectionOptions, type FileNode, FilePreviewElement, HttpMonitor, INPUT_TYPES, type InputType, LIB_E2E_CYPRESS_FOR_DUMMYS_SWAL2_STYLES, LOCALE_BY_LANG, type Lang, LibE2eRecorderElement, PersistenceService, RESUME_TTL_CONFIG_KEY, RecordingService, SCROLLBAR_STYLES, SUPPORTED_LANGS, SaveTestElement, SelectorPickerElement, type SelectorStrategy, Subject, type TestDetail, TestEditorElement, TestPrevisualizerElement, type TestWithDetails, TransformationService, TranslationService, VERSION, advancedTestTransformationService, generateAlias, injectStyles, isLang, isLocalHost, localeForLang, makeModalResizable, makeSwalDraggable, makeSwalDraggableByContentId, persistenceService, selectTestsForExport, setSwal2DataCyAttribute, showToast, transformationService, translationService };
+export { ACTIVE_SESSION_BREADCRUMB_KEY, type ActiveSessionState, AdvancedTestEditorElement, AdvancedTestTransformationService, ConfigurationElement, type DBSchema, type DBStore, type DBStoreIndex, DB_SCHEMA, DB_STORE_NAMES, DEFAULT_RESUME_TTL_MINUTES, DRAG_THRESHOLD, type DirectoryNode, type ExpandDirection, type ExportMode, type ExportSelectionOptions, type FileNode, FilePreviewElement, HttpMonitor, INPUT_TYPES, type InputType, LIB_E2E_CYPRESS_FOR_DUMMYS_SWAL2_STYLES, LOCALE_BY_LANG, type Lang, LibE2eRecorderElement, PersistenceService, type Point, RESUME_TTL_CONFIG_KEY, RecordingService, SCROLLBAR_STYLES, SUPPORTED_LANGS, SaveTestElement, SelectorPickerElement, type SelectorStrategy, Subject, TOGGLE_MARGIN, type TestDetail, TestEditorElement, TestPrevisualizerElement, type TestWithDetails, TransformationService, TranslationService, VERSION, advancedTestTransformationService, boxOffsetForDirection, boxTopLeftFor, clampTogglePosition, defaultTogglePosition, generateAlias, injectStyles, isLang, isLocalHost, localeForLang, makeModalResizable, makeSwalDraggable, makeSwalDraggableByContentId, persistenceService, resolveExpandDirection, selectTestsForExport, setSwal2DataCyAttribute, showToast, transformationService, translationService };

package/dist/index.js

@@ -204,7 +204,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",
@@ -400,7 +404,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",
@@ -596,7 +604,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",
@@ -792,7 +804,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",
@@ -988,7 +1004,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",
@@ -2258,6 +2278,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/components/test-previsualizer/test-previsualizer.styles.ts
 var TEST_PREVISUALIZER_STYLES = `
   :host { display: flex; flex-direction: column; flex: 1; min-height: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #e6edf3; overflow: hidden; }
@@ -3358,6 +3409,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>
@@ -3498,6 +3558,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" });
@@ -3633,6 +3697,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)
@@ -4595,15 +4660,37 @@ if (!customElements.get("file-preview")) {
 import Swal from "sweetalert2";
 
 // 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;
@@ -4612,6 +4699,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;
     }
 
@@ -4624,7 +4713,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;
@@ -4637,7 +4727,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); }
@@ -4668,11 +4758,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;
@@ -4694,12 +4779,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;
@@ -4719,14 +4803,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; }
@@ -4739,31 +4815,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 {
@@ -4830,6 +4901,14 @@ 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;
@@ -4873,8 +4952,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;
@@ -4887,6 +4973,9 @@ 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();
   }
@@ -5073,6 +5162,63 @@ 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) {
+    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();
   }
@@ -5389,6 +5535,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;
@@ -5542,12 +5689,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")) {
@@ -5555,7 +5711,7 @@ if (!customElements.get("lib-e2e-recorder")) {
 }
 
 // src/index.ts
-var VERSION = "0.5.0";
+var VERSION = "0.6.0";
 export {
   ACTIVE_SESSION_BREADCRUMB_KEY,
   AdvancedTestEditorElement,
@@ -5564,6 +5720,7 @@ export {
   DB_SCHEMA,
   DB_STORE_NAMES,
   DEFAULT_RESUME_TTL_MINUTES,
+  DRAG_THRESHOLD,
   FilePreviewElement,
   HttpMonitor,
   INPUT_TYPES,
@@ -5578,12 +5735,17 @@ export {
   SaveTestElement,
   SelectorPickerElement,
   Subject,
+  TOGGLE_MARGIN,
   TestEditorElement,
   TestPrevisualizerElement,
   TransformationService,
   TranslationService,
   VERSION,
   advancedTestTransformationService,
+  boxOffsetForDirection,
+  boxTopLeftFor,
+  clampTogglePosition,
+  defaultTogglePosition,
   generateAlias,
   injectStyles,
   isLang,
@@ -5593,6 +5755,7 @@ export {
   makeSwalDraggable,
   makeSwalDraggableByContentId,
   persistenceService,
+  resolveExpandDirection,
   selectTestsForExport,
   setSwal2DataCyAttribute,
   showToast,