saltfish 0.3.9 → 0.3.11

package/dist/saltfish-playlist-player.es.js

@@ -6610,23 +6610,44 @@ class CursorManager {
         will-change: transform;
         transform: var(--sf-cursor-transform, translate(0, 0));
         opacity: var(--sf-cursor-opacity, 1);
+        /* Defensive styles to prevent host page CSS interference */
+        margin: 0;
+        padding: 0;
+        border: 0;
+        box-sizing: content-box;
+        line-height: 0;
+        font-size: 0;
+        vertical-align: baseline;
+        overflow: visible;
       }
 
       .sf-cursor--visible {
         display: block;
       }
 
+      .sf-cursor svg {
+        display: block;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        border: 0;
+      }
+
       .sf-selection {
         position: fixed;
         pointer-events: none;
         display: none;
         z-index: 9999998;
+        top: 0;
+        left: 0;
         border: 2px solid var(--sf-selection-color, #ff7614);
         background: var(--sf-selection-bg-color, rgba(255, 118, 20, 0.1));
-        left: var(--sf-selection-left, 0);
-        top: var(--sf-selection-top, 0);
         width: var(--sf-selection-width, 0);
         height: var(--sf-selection-height, 0);
+        transform: var(--sf-selection-transform, translate(0, 0));
+        will-change: transform;
+        box-sizing: border-box;
       }
 
       .sf-selection--visible {
@@ -6707,8 +6728,7 @@ class CursorManager {
       const top = Math.floor(targetRect.top - padding);
       const width = Math.ceil(targetRect.width + padding * 2);
       const height = Math.ceil(targetRect.height + padding * 2);
-      this.selectionElement.style.setProperty("--sf-selection-left", `${left}px`);
-      this.selectionElement.style.setProperty("--sf-selection-top", `${top}px`);
+      this.selectionElement.style.setProperty("--sf-selection-transform", `translate(${left}px, ${top}px)`);
       this.selectionElement.style.setProperty("--sf-selection-width", `${width}px`);
       this.selectionElement.style.setProperty("--sf-selection-height", `${height}px`);
       this.dragStartX = left;
@@ -6938,8 +6958,7 @@ class CursorManager {
       this.dragStartY,
       currentY - this.SELECTION_VERTICAL_OFFSET
     ));
-    this.selectionElement.style.setProperty("--sf-selection-left", `${left}px`);
-    this.selectionElement.style.setProperty("--sf-selection-top", `${top}px`);
+    this.selectionElement.style.setProperty("--sf-selection-transform", `translate(${left}px, ${top}px)`);
     this.selectionElement.style.setProperty("--sf-selection-width", `${width}px`);
     this.selectionElement.style.setProperty("--sf-selection-height", `${height}px`);
     this.selectionElement.classList.add("sf-selection--visible");
@@ -7001,8 +7020,7 @@ class CursorManager {
       this.cursor.style.setProperty("--sf-cursor-opacity", "0.9");
     }
     if (this.selectionElement) {
-      this.selectionElement.style.setProperty("--sf-selection-left", `${this.dragStartX}px`);
-      this.selectionElement.style.setProperty("--sf-selection-top", `${this.dragStartY}px`);
+      this.selectionElement.style.setProperty("--sf-selection-transform", `translate(${this.dragStartX}px, ${this.dragStartY}px)`);
       this.selectionElement.style.setProperty("--sf-selection-width", "0px");
       this.selectionElement.style.setProperty("--sf-selection-height", "0px");
       this.selectionElement.classList.add("sf-selection--visible");
@@ -11225,7 +11243,7 @@ const SaltfishPlayer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.de
   __proto__: null,
   SaltfishPlayer
 }, Symbol.toStringTag, { value: "Module" }));
-const version = "0.3.9";
+const version = "0.3.11";
 const packageJson = {
   version
 };