@surdeddd/bottom-sheet 0.14.0 → 0.20.0

package/dist/vue.cjs

@@ -317,6 +317,11 @@ var SnapResolver = class {
     this.raw = raw;
     this.recompute();
   }
+  setMode(mode) {
+    if (mode === this.mode) return;
+    this.mode = mode;
+    this.recompute();
+  }
   setAllowedIds(ids) {
     this.allowedIds = ids;
     this.rangeCache = null;
@@ -900,6 +905,11 @@ var ScrimController = class {
     if (this.isDestroyed()) return;
     this.applyScrimStyles({ interactive });
   }
+  setSheetMode(mode) {
+    if (this.isDestroyed() || mode === this.mode) return;
+    this.mode = mode;
+    this.invalidateOpacityCache();
+  }
   setScrimMode(mode, applySize) {
     if (this.isDestroyed()) return;
     if (mode === this.scrimMode) return;
@@ -1822,6 +1832,7 @@ var installGestures = (handle, mode, callbacks, options = {}) => {
   let activePointerId = null;
   let activePointerType = "touch";
   let startCoord = 0;
+  let startCross = 0;
   let lastCoord = 0;
   let pendingStart = false;
   const VELOCITY_WINDOW_MS = (kind) => kind === "mouse" ? 160 : 120;
@@ -1830,6 +1841,7 @@ var installGestures = (handle, mode, callbacks, options = {}) => {
   const axis = isAxisVertical(mode) ? "Y" : "X";
   const sign = mode === "bottom" || mode === "right" ? -1 : 1;
   const coordOf = (e) => axis === "Y" ? e.clientY : e.clientX;
+  const crossOf = (e) => axis === "Y" ? e.clientX : e.clientY;
   const capture = (pointerId) => {
     try {
       handle.setPointerCapture(pointerId);
@@ -1848,6 +1860,7 @@ var installGestures = (handle, mode, callbacks, options = {}) => {
     activePointerId = e.pointerId;
     activePointerType = e.pointerType || "touch";
     startCoord = coordOf(e);
+    startCross = crossOf(e);
     lastCoord = startCoord;
     samples.reset();
     samples.push(e.timeStamp, startCoord);
@@ -1864,7 +1877,7 @@ var installGestures = (handle, mode, callbacks, options = {}) => {
     const rawDelta = coord - startCoord;
     const delta = rawDelta * sign;
     if (pendingStart) {
-      const verdict = options.deferStart(e, delta);
+      const verdict = options.deferStart(e, delta, crossOf(e) - startCross);
       if (verdict === false) {
         releaseTracking();
         return;
@@ -2082,12 +2095,45 @@ function isDragAllowedFrom(target, mode) {
 var CONTENT_DRAG_SLOP = 6;
 function decideContentGesture(input) {
   const slop = input.slop ?? CONTENT_DRAG_SLOP;
+  const cross = input.crossDelta ?? 0;
+  const sharesScrollAxis = input.sharesScrollAxis ?? true;
+  if (!sharesScrollAxis) {
+    if (Math.abs(input.delta) < slop && Math.abs(cross) < slop) return "pending";
+    if (Math.abs(input.delta) <= Math.abs(cross)) return "scroll";
+    return "drag";
+  }
   if (Math.abs(input.delta) < slop) return "pending";
   if (input.scrollTop > 0) return "scroll";
   if (input.delta > 0 && input.atMaxSnap) return "scroll";
   return "drag";
 }
 
+// src/core/primitives/logical-mode.ts
+var isLogicalMode = (mode) => mode === "start" || mode === "end";
+var readDirection = (el) => {
+  if (!el) return "ltr";
+  if (typeof getComputedStyle === "function") {
+    try {
+      if (getComputedStyle(el).direction === "rtl") return "rtl";
+    } catch {
+    }
+  }
+  try {
+    const marked = el.closest?.("[dir]");
+    if (marked) {
+      return marked.getAttribute("dir")?.toLowerCase() === "rtl" ? "rtl" : "ltr";
+    }
+  } catch {
+  }
+  return "ltr";
+};
+var resolveMode = (mode, el) => {
+  if (!isLogicalMode(mode)) return mode;
+  const rtl = readDirection(el) === "rtl";
+  if (mode === "start") return rtl ? "right" : "left";
+  return rtl ? "left" : "right";
+};
+
 // src/core/primitives/touch-scroll-guard.ts
 function installTouchScrollGuard(surface, isDragging) {
   const onTouchMove = (e) => {
@@ -2450,7 +2496,7 @@ function resolveEngineOptions(opts, extras) {
     }
   }
   return {
-    mode: opts.mode ?? "bottom",
+    mode: resolveMode(opts.mode ?? "bottom", opts.element),
     flickVelocity: opts.flickVelocity ?? DEFAULT_FLICK_VELOCITY,
     dragThreshold: opts.dragThreshold ?? DEFAULT_DRAG_THRESHOLD,
     dragFrom: opts.dragFrom ?? (opts.handle ? "handle" : "sheet"),
@@ -2554,6 +2600,7 @@ var BottomSheetCore = class {
     __publicField(this, "disableDragFlag");
     __publicField(this, "closeOnRouteChange");
     __publicField(this, "maxHeight");
+    __publicField(this, "maxHeightDeps");
     __publicField(this, "snapPointsRaw");
     __publicField(this, "snaps");
     __publicField(this, "activeId");
@@ -2561,6 +2608,7 @@ var BottomSheetCore = class {
     __publicField(this, "gesture");
     __publicField(this, "contentGesture");
     __publicField(this, "detachSheetGesture", null);
+    __publicField(this, "detachSliderKeyboard", null);
     __publicField(this, "rootEl", null);
     __publicField(this, "destroyed", false);
     __publicField(this, "restClosed", false);
@@ -2612,6 +2660,7 @@ var BottomSheetCore = class {
     this.screenComponent = opts.scrim ?? opts.screenComponent;
     this.scrimParent = this.screenComponent?.parentElement ?? null;
     this.mode = resolved.mode;
+    this.element.dataset.mode = this.mode;
     this.transformTemplate = buildTransformTemplate(this.mode);
     this.aria = new AriaSliderWriter(this.handle, this.mode);
     this.flickVelocity = resolved.flickVelocity;
@@ -2678,7 +2727,7 @@ var BottomSheetCore = class {
     auditVhUsage(this.snapPointsRaw);
     this.auditDuplicateSnapIds(this.snapPointsRaw);
     this.rootEl = this.element.closest(".bs-root");
-    this.maxHeight = createMaxHeightController({
+    this.maxHeightDeps = {
       element: this.element,
       mode: this.mode,
       getMaxAxisSize: () => this.snaps.getMaxAxisSize(),
@@ -2686,7 +2735,8 @@ var BottomSheetCore = class {
         this.snaps.setMaxAxisSize(size);
       },
       recompute: () => this.recompute()
-    });
+    };
+    this.maxHeight = createMaxHeightController(this.maxHeightDeps);
     this.fitDeps = {
       element: this.element,
       scrollContainer: this.scrollContainer,
@@ -3020,6 +3070,37 @@ var BottomSheetCore = class {
   getDragFrom() {
     return this.dragFromMode;
   }
+  setMode(mode) {
+    if (this.destroyed) return;
+    const next = resolveMode(mode, this.element);
+    if (next === this.mode) return;
+    const wasVertical = this.mode === "bottom" || this.mode === "top";
+    const nowVertical = next === "bottom" || next === "top";
+    this.gesture?.forceClearDragState();
+    this.detachSheetGesture?.();
+    this.animation.cancel();
+    this.element.style.removeProperty(layoutAxis(this.mode));
+    this.mode = next;
+    this.element.dataset.mode = next;
+    this.transformTemplate = buildTransformTemplate(next);
+    this.maxHeightDeps.mode = next;
+    this.fitDeps.mode = next;
+    this.snaps.setMode(next);
+    this.scrim.setSheetMode(next);
+    if (wasVertical !== nowVertical) {
+      this.aria = new AriaSliderWriter(this.handle, next);
+    }
+    this.detachSliderKeyboard?.();
+    this.mountSliderKeyboard();
+    this.mountSheetGesture();
+    this.recompute();
+    const active = this.snaps.findById(this.activeId);
+    if (active) this.applySize(active.size);
+    this.updateAriaSlider();
+  }
+  getMode() {
+    return this.mode;
+  }
   isTop() {
     return this.isTopSheet;
   }
@@ -3368,7 +3449,7 @@ var BottomSheetCore = class {
     const point = this.snapPointsRaw.find((p) => p.id === this.activeId);
     return point?.dragFromContent ?? this.dragFromContentDefault;
   }
-  decideContentDrag(surface, e, delta) {
+  decideContentDrag(surface, e, delta, crossDelta) {
     if (this.destroyed) return false;
     if (e.pointerType === "mouse") return false;
     if (this.gesture?.isDragging) return false;
@@ -3376,6 +3457,8 @@ var BottomSheetCore = class {
     if (!isDragAllowedFrom(e.target, "sheet")) return false;
     const decision = decideContentGesture({
       delta,
+      crossDelta,
+      sharesScrollAxis: this.mode === "bottom" || this.mode === "top",
       scrollTop: surface.scrollTop,
       atMaxSnap: this.size >= this.getAllowedRange().max - 0.5
     });
@@ -3388,7 +3471,7 @@ var BottomSheetCore = class {
     const controller = new GestureController(
       this.buildGestureDeps(surface, {
         manageTouchAction: false,
-        deferStart: (e, delta) => this.decideContentDrag(surface, e, delta)
+        deferStart: (e, delta, crossDelta) => this.decideContentDrag(surface, e, delta, crossDelta)
       })
     );
     this.contentGesture = controller;
@@ -3514,7 +3597,11 @@ var BottomSheetCore = class {
         );
       }
     }
-    this.teardowns.add(installSliderKeyboard({
+    this.mountSliderKeyboard();
+    this.scrim.attach();
+  }
+  mountSliderKeyboard() {
+    const detach = installSliderKeyboard({
       handle: this.handle,
       mode: this.mode,
       isDestroyed: () => this.destroyed,
@@ -3523,8 +3610,12 @@ var BottomSheetCore = class {
       snapTo: (id) => {
         void this.snapTo(id);
       }
-    }));
-    this.scrim.attach();
+    });
+    this.detachSliderKeyboard = detach;
+    this.teardowns.add(() => {
+      this.detachSliderKeyboard?.();
+      this.detachSliderKeyboard = null;
+    });
   }
   settleAfterDrag(delta, velocity, kind = "touch") {
     const signal = this.newCycle();

package/dist/vue.js

@@ -315,6 +315,11 @@ var SnapResolver = class {
     this.raw = raw;
     this.recompute();
   }
+  setMode(mode) {
+    if (mode === this.mode) return;
+    this.mode = mode;
+    this.recompute();
+  }
   setAllowedIds(ids) {
     this.allowedIds = ids;
     this.rangeCache = null;
@@ -898,6 +903,11 @@ var ScrimController = class {
     if (this.isDestroyed()) return;
     this.applyScrimStyles({ interactive });
   }
+  setSheetMode(mode) {
+    if (this.isDestroyed() || mode === this.mode) return;
+    this.mode = mode;
+    this.invalidateOpacityCache();
+  }
   setScrimMode(mode, applySize) {
     if (this.isDestroyed()) return;
     if (mode === this.scrimMode) return;
@@ -1820,6 +1830,7 @@ var installGestures = (handle, mode, callbacks, options = {}) => {
   let activePointerId = null;
   let activePointerType = "touch";
   let startCoord = 0;
+  let startCross = 0;
   let lastCoord = 0;
   let pendingStart = false;
   const VELOCITY_WINDOW_MS = (kind) => kind === "mouse" ? 160 : 120;
@@ -1828,6 +1839,7 @@ var installGestures = (handle, mode, callbacks, options = {}) => {
   const axis = isAxisVertical(mode) ? "Y" : "X";
   const sign = mode === "bottom" || mode === "right" ? -1 : 1;
   const coordOf = (e) => axis === "Y" ? e.clientY : e.clientX;
+  const crossOf = (e) => axis === "Y" ? e.clientX : e.clientY;
   const capture = (pointerId) => {
     try {
       handle.setPointerCapture(pointerId);
@@ -1846,6 +1858,7 @@ var installGestures = (handle, mode, callbacks, options = {}) => {
     activePointerId = e.pointerId;
     activePointerType = e.pointerType || "touch";
     startCoord = coordOf(e);
+    startCross = crossOf(e);
     lastCoord = startCoord;
     samples.reset();
     samples.push(e.timeStamp, startCoord);
@@ -1862,7 +1875,7 @@ var installGestures = (handle, mode, callbacks, options = {}) => {
     const rawDelta = coord - startCoord;
     const delta = rawDelta * sign;
     if (pendingStart) {
-      const verdict = options.deferStart(e, delta);
+      const verdict = options.deferStart(e, delta, crossOf(e) - startCross);
       if (verdict === false) {
         releaseTracking();
         return;
@@ -2080,12 +2093,45 @@ function isDragAllowedFrom(target, mode) {
 var CONTENT_DRAG_SLOP = 6;
 function decideContentGesture(input) {
   const slop = input.slop ?? CONTENT_DRAG_SLOP;
+  const cross = input.crossDelta ?? 0;
+  const sharesScrollAxis = input.sharesScrollAxis ?? true;
+  if (!sharesScrollAxis) {
+    if (Math.abs(input.delta) < slop && Math.abs(cross) < slop) return "pending";
+    if (Math.abs(input.delta) <= Math.abs(cross)) return "scroll";
+    return "drag";
+  }
   if (Math.abs(input.delta) < slop) return "pending";
   if (input.scrollTop > 0) return "scroll";
   if (input.delta > 0 && input.atMaxSnap) return "scroll";
   return "drag";
 }
 
+// src/core/primitives/logical-mode.ts
+var isLogicalMode = (mode) => mode === "start" || mode === "end";
+var readDirection = (el) => {
+  if (!el) return "ltr";
+  if (typeof getComputedStyle === "function") {
+    try {
+      if (getComputedStyle(el).direction === "rtl") return "rtl";
+    } catch {
+    }
+  }
+  try {
+    const marked = el.closest?.("[dir]");
+    if (marked) {
+      return marked.getAttribute("dir")?.toLowerCase() === "rtl" ? "rtl" : "ltr";
+    }
+  } catch {
+  }
+  return "ltr";
+};
+var resolveMode = (mode, el) => {
+  if (!isLogicalMode(mode)) return mode;
+  const rtl = readDirection(el) === "rtl";
+  if (mode === "start") return rtl ? "right" : "left";
+  return rtl ? "left" : "right";
+};
+
 // src/core/primitives/touch-scroll-guard.ts
 function installTouchScrollGuard(surface, isDragging) {
   const onTouchMove = (e) => {
@@ -2448,7 +2494,7 @@ function resolveEngineOptions(opts, extras) {
     }
   }
   return {
-    mode: opts.mode ?? "bottom",
+    mode: resolveMode(opts.mode ?? "bottom", opts.element),
     flickVelocity: opts.flickVelocity ?? DEFAULT_FLICK_VELOCITY,
     dragThreshold: opts.dragThreshold ?? DEFAULT_DRAG_THRESHOLD,
     dragFrom: opts.dragFrom ?? (opts.handle ? "handle" : "sheet"),
@@ -2552,6 +2598,7 @@ var BottomSheetCore = class {
     __publicField(this, "disableDragFlag");
     __publicField(this, "closeOnRouteChange");
     __publicField(this, "maxHeight");
+    __publicField(this, "maxHeightDeps");
     __publicField(this, "snapPointsRaw");
     __publicField(this, "snaps");
     __publicField(this, "activeId");
@@ -2559,6 +2606,7 @@ var BottomSheetCore = class {
     __publicField(this, "gesture");
     __publicField(this, "contentGesture");
     __publicField(this, "detachSheetGesture", null);
+    __publicField(this, "detachSliderKeyboard", null);
     __publicField(this, "rootEl", null);
     __publicField(this, "destroyed", false);
     __publicField(this, "restClosed", false);
@@ -2610,6 +2658,7 @@ var BottomSheetCore = class {
     this.screenComponent = opts.scrim ?? opts.screenComponent;
     this.scrimParent = this.screenComponent?.parentElement ?? null;
     this.mode = resolved.mode;
+    this.element.dataset.mode = this.mode;
     this.transformTemplate = buildTransformTemplate(this.mode);
     this.aria = new AriaSliderWriter(this.handle, this.mode);
     this.flickVelocity = resolved.flickVelocity;
@@ -2676,7 +2725,7 @@ var BottomSheetCore = class {
     auditVhUsage(this.snapPointsRaw);
     this.auditDuplicateSnapIds(this.snapPointsRaw);
     this.rootEl = this.element.closest(".bs-root");
-    this.maxHeight = createMaxHeightController({
+    this.maxHeightDeps = {
       element: this.element,
       mode: this.mode,
       getMaxAxisSize: () => this.snaps.getMaxAxisSize(),
@@ -2684,7 +2733,8 @@ var BottomSheetCore = class {
         this.snaps.setMaxAxisSize(size);
       },
       recompute: () => this.recompute()
-    });
+    };
+    this.maxHeight = createMaxHeightController(this.maxHeightDeps);
     this.fitDeps = {
       element: this.element,
       scrollContainer: this.scrollContainer,
@@ -3018,6 +3068,37 @@ var BottomSheetCore = class {
   getDragFrom() {
     return this.dragFromMode;
   }
+  setMode(mode) {
+    if (this.destroyed) return;
+    const next = resolveMode(mode, this.element);
+    if (next === this.mode) return;
+    const wasVertical = this.mode === "bottom" || this.mode === "top";
+    const nowVertical = next === "bottom" || next === "top";
+    this.gesture?.forceClearDragState();
+    this.detachSheetGesture?.();
+    this.animation.cancel();
+    this.element.style.removeProperty(layoutAxis(this.mode));
+    this.mode = next;
+    this.element.dataset.mode = next;
+    this.transformTemplate = buildTransformTemplate(next);
+    this.maxHeightDeps.mode = next;
+    this.fitDeps.mode = next;
+    this.snaps.setMode(next);
+    this.scrim.setSheetMode(next);
+    if (wasVertical !== nowVertical) {
+      this.aria = new AriaSliderWriter(this.handle, next);
+    }
+    this.detachSliderKeyboard?.();
+    this.mountSliderKeyboard();
+    this.mountSheetGesture();
+    this.recompute();
+    const active = this.snaps.findById(this.activeId);
+    if (active) this.applySize(active.size);
+    this.updateAriaSlider();
+  }
+  getMode() {
+    return this.mode;
+  }
   isTop() {
     return this.isTopSheet;
   }
@@ -3366,7 +3447,7 @@ var BottomSheetCore = class {
     const point = this.snapPointsRaw.find((p) => p.id === this.activeId);
     return point?.dragFromContent ?? this.dragFromContentDefault;
   }
-  decideContentDrag(surface, e, delta) {
+  decideContentDrag(surface, e, delta, crossDelta) {
     if (this.destroyed) return false;
     if (e.pointerType === "mouse") return false;
     if (this.gesture?.isDragging) return false;
@@ -3374,6 +3455,8 @@ var BottomSheetCore = class {
     if (!isDragAllowedFrom(e.target, "sheet")) return false;
     const decision = decideContentGesture({
       delta,
+      crossDelta,
+      sharesScrollAxis: this.mode === "bottom" || this.mode === "top",
       scrollTop: surface.scrollTop,
       atMaxSnap: this.size >= this.getAllowedRange().max - 0.5
     });
@@ -3386,7 +3469,7 @@ var BottomSheetCore = class {
     const controller = new GestureController(
       this.buildGestureDeps(surface, {
         manageTouchAction: false,
-        deferStart: (e, delta) => this.decideContentDrag(surface, e, delta)
+        deferStart: (e, delta, crossDelta) => this.decideContentDrag(surface, e, delta, crossDelta)
       })
     );
     this.contentGesture = controller;
@@ -3512,7 +3595,11 @@ var BottomSheetCore = class {
         );
       }
     }
-    this.teardowns.add(installSliderKeyboard({
+    this.mountSliderKeyboard();
+    this.scrim.attach();
+  }
+  mountSliderKeyboard() {
+    const detach = installSliderKeyboard({
       handle: this.handle,
       mode: this.mode,
       isDestroyed: () => this.destroyed,
@@ -3521,8 +3608,12 @@ var BottomSheetCore = class {
       snapTo: (id) => {
         void this.snapTo(id);
       }
-    }));
-    this.scrim.attach();
+    });
+    this.detachSliderKeyboard = detach;
+    this.teardowns.add(() => {
+      this.detachSliderKeyboard?.();
+      this.detachSliderKeyboard = null;
+    });
   }
   settleAfterDrag(delta, velocity, kind = "touch") {
     const signal = this.newCycle();

package/dist/webgl.cjs

@@ -273,6 +273,59 @@ var wrapLines = (ctx, text, maxWidth) => {
   lines.push(line);
   return lines;
 };
+var isPaintedColor = (value) => !!value && value !== "transparent" && !/rgba\(\s*0,\s*0,\s*0,\s*0\s*\)/.test(value);
+var roundedPath = (ctx, x, y, w, h, r) => {
+  const rad = Math.min(r, w / 2, h / 2);
+  ctx.beginPath();
+  if (rad <= 0) {
+    ctx.rect(x, y, w, h);
+    return;
+  }
+  ctx.moveTo(x + rad, y);
+  ctx.arcTo(x + w, y, x + w, y + h, rad);
+  ctx.arcTo(x + w, y + h, x, y + h, rad);
+  ctx.arcTo(x, y + h, x, y, rad);
+  ctx.arcTo(x, y, x + w, y, rad);
+  ctx.closePath();
+};
+var drawBox = (ctx, cs, rect, rootRect) => {
+  const bg = cs.backgroundColor;
+  const borderWidth = parseFloat(cs.borderTopWidth) || 0;
+  const hasBorder = borderWidth > 0 && isPaintedColor(cs.borderTopColor);
+  if (!isPaintedColor(bg) && !hasBorder) return false;
+  const x = rect.left - rootRect.left;
+  const y = rect.top - rootRect.top;
+  const radius = parseFloat(cs.borderTopLeftRadius) || 0;
+  if (isPaintedColor(bg)) {
+    roundedPath(ctx, x, y, rect.width, rect.height, radius);
+    ctx.fillStyle = bg;
+    ctx.fill();
+  }
+  if (hasBorder) {
+    roundedPath(ctx, x, y, rect.width, rect.height, radius);
+    ctx.strokeStyle = cs.borderTopColor;
+    ctx.lineWidth = borderWidth;
+    ctx.stroke();
+  }
+  return true;
+};
+var drawImage = (ctx, img, rootRect) => {
+  if (!img.complete || img.naturalWidth === 0) return false;
+  const rect = img.getBoundingClientRect();
+  if (rect.width < 1 || rect.height < 1) return false;
+  try {
+    ctx.drawImage(
+      img,
+      rect.left - rootRect.left,
+      rect.top - rootRect.top,
+      rect.width,
+      rect.height
+    );
+    return true;
+  } catch {
+    return false;
+  }
+};
 var captureContent = (gl, root, dpr) => {
   const rootRect = root.getBoundingClientRect();
   const w = Math.max(1, Math.round(rootRect.width * dpr));
@@ -289,12 +342,24 @@ var captureContent = (gl, root, dpr) => {
   let painted = 0;
   while (walker.nextNode()) {
     const el = walker.currentNode;
+    if (el.tagName === "IMG") {
+      if (drawImage(ctx, el, rootRect)) {
+        painted++;
+        hiddenNodes.push(el);
+      }
+      continue;
+    }
     if (!isRenderable(el)) continue;
-    const text = directText(el);
-    if (!text) continue;
     const rect = el.getBoundingClientRect();
     if (rect.width < 1 || rect.height < 1) continue;
     const cs = getComputedStyle(el);
+    const boxed = drawBox(ctx, cs, rect, rootRect);
+    if (boxed) {
+      painted++;
+      hiddenNodes.push(el);
+    }
+    const text = directText(el);
+    if (!text) continue;
     ctx.font = `${cs.fontStyle} ${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`;
     ctx.fillStyle = cs.color;
     ctx.textBaseline = "top";
@@ -321,7 +386,7 @@ var captureContent = (gl, root, dpr) => {
     });
     if (lines.length) {
       painted++;
-      hiddenNodes.push(el);
+      if (!boxed) hiddenNodes.push(el);
     }
   }
   if (!painted) return null;
@@ -329,14 +394,19 @@ var captureContent = (gl, root, dpr) => {
   if (!texture) return null;
   gl.bindTexture(gl.TEXTURE_2D, texture);
   gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
-  gl.texImage2D(
-    gl.TEXTURE_2D,
-    0,
-    gl.RGBA,
-    gl.RGBA,
-    gl.UNSIGNED_BYTE,
-    surface
-  );
+  try {
+    gl.texImage2D(
+      gl.TEXTURE_2D,
+      0,
+      gl.RGBA,
+      gl.RGBA,
+      gl.UNSIGNED_BYTE,
+      surface
+    );
+  } catch {
+    gl.deleteTexture(texture);
+    return null;
+  }
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
@@ -344,10 +414,30 @@ var captureContent = (gl, root, dpr) => {
   return { texture, width: w, height: h, hiddenNodes };
 };
 var hideCapturedText = (nodes) => {
-  const restore = nodes.map((el) => ({ el, prev: el.style.color }));
-  for (const { el } of restore) el.style.color = "transparent";
+  const restore = nodes.map((el) => ({
+    el,
+    color: el.style.color,
+    background: el.style.background,
+    borderColor: el.style.borderColor,
+    opacity: el.style.opacity,
+    isImage: el.tagName === "IMG"
+  }));
+  for (const entry of restore) {
+    if (entry.isImage) {
+      entry.el.style.opacity = "0";
+      continue;
+    }
+    entry.el.style.color = "transparent";
+    entry.el.style.background = "transparent";
+    entry.el.style.borderColor = "transparent";
+  }
   return () => {
-    for (const { el, prev } of restore) el.style.color = prev;
+    for (const entry of restore) {
+      entry.el.style.color = entry.color;
+      entry.el.style.background = entry.background;
+      entry.el.style.borderColor = entry.borderColor;
+      entry.el.style.opacity = entry.opacity;
+    }
   };
 };
 

package/dist/webgl.d.cts

@@ -1,4 +1,4 @@
-import { f as EngineFeature } from './BottomSheetCore-Cp7dWy91.cjs';
+import { f as EngineFeature } from './BottomSheetCore-VPJZcKcg.cjs';
 import './transform-jVfAikE9.cjs';
 
 type WebGLRendererOptions = {

package/dist/webgl.d.ts

@@ -1,4 +1,4 @@
-import { f as EngineFeature } from './BottomSheetCore-DJYwWOqt.js';
+import { f as EngineFeature } from './BottomSheetCore-Cgn8b_6A.js';
 import './transform-jVfAikE9.js';
 
 type WebGLRendererOptions = {