@surdeddd/bottom-sheet 0.24.0 → 0.24.1

package/README.md

@@ -9,7 +9,7 @@ HTML.
 [![npm](https://img.shields.io/npm/v/@surdeddd/bottom-sheet?style=flat-square&color=1a1614)](https://www.npmjs.com/package/@surdeddd/bottom-sheet)
 [![downloads](https://img.shields.io/npm/dm/@surdeddd/bottom-sheet?style=flat-square&color=1a1614)](https://www.npmjs.com/package/@surdeddd/bottom-sheet)
 ![core size](https://img.shields.io/badge/core-25.6%20KB%20gzip-1a1614?style=flat-square)
-![tests](https://img.shields.io/badge/tests-1000%2B%20unit%20%C2%B7%20340%20e2e%20per%20engine-2ea44f?style=flat-square)
+![tests](https://img.shields.io/badge/tests-1000%2B%20unit%20%C2%B7%20370%20e2e%20per%20engine-2ea44f?style=flat-square)
 ![types](https://img.shields.io/badge/TypeScript-strict-3178c6?style=flat-square&logo=typescript&logoColor=white)
 ![license](https://img.shields.io/badge/license-MIT-dc3522?style=flat-square)
 
@@ -623,7 +623,7 @@ const sheet = new BottomSheetCore({
 | `/react` `/vue` `/svelte` `/solid` `/qwik` | 27 to 33 KB | The full engine plus the adapter |
 | `/element` | 33.3 KB | The full engine, the element and its styles |
 | `/overlay` | 8.4 KB | The standalone [overlay](docs/overlay.md) |
-| `/webgl` | 5.9 KB | Optional [GPU renderer](docs/webgl.md) for the sheet surface |
+| `/webgl` | 6.4 KB | Optional [GPU renderer](docs/webgl.md) for the sheet surface |
 | `/debug` | 0.9 KB | `attachDebugOverlay(engine)`: a live panel of the engine's state |
 
 An option whose feature is missing warns once in development and is ignored.

package/README.ru.md

@@ -9,7 +9,7 @@ Solid, Qwik, Preact** и под **веб-компонентом** `<bottom-sheet
 [![npm](https://img.shields.io/npm/v/@surdeddd/bottom-sheet?style=flat-square&color=1a1614)](https://www.npmjs.com/package/@surdeddd/bottom-sheet)
 [![downloads](https://img.shields.io/npm/dm/@surdeddd/bottom-sheet?style=flat-square&color=1a1614)](https://www.npmjs.com/package/@surdeddd/bottom-sheet)
 ![core size](https://img.shields.io/badge/core-25.6%20KB%20gzip-1a1614?style=flat-square)
-![tests](https://img.shields.io/badge/tests-1000%2B%20unit%20%C2%B7%20340%20e2e%20per%20engine-2ea44f?style=flat-square)
+![tests](https://img.shields.io/badge/tests-1000%2B%20unit%20%C2%B7%20370%20e2e%20per%20engine-2ea44f?style=flat-square)
 ![types](https://img.shields.io/badge/TypeScript-strict-3178c6?style=flat-square&logo=typescript&logoColor=white)
 ![license](https://img.shields.io/badge/license-MIT-dc3522?style=flat-square)
 
@@ -637,7 +637,7 @@ const sheet = new BottomSheetCore({
 | `/react` `/vue` `/svelte` `/solid` `/qwik` | от 27 до 33 KB | Полный движок вместе с адаптером |
 | `/element` | 33.3 KB | Полный движок, элемент и его стили |
 | `/overlay` | 8.4 KB | Отдельный [оверлей](docs/overlay.md) |
-| `/webgl` | 5.9 KB | Необязательный [рендерер на GPU](docs/webgl.md) для поверхности шторки |
+| `/webgl` | 6.4 KB | Необязательный [рендерер на GPU](docs/webgl.md) для поверхности шторки |
 | `/debug` | 0.9 KB | `attachDebugOverlay(engine)`: панель с состоянием движка в реальном времени |
 
 Опция, для которой не подключена возможность, один раз предупреждает в

package/dist/webgl.cjs

@@ -9,6 +9,22 @@ var supportsHighpFragment = (gl) => {
     return false;
   }
 };
+var SOFTWARE = /swiftshader|llvmpipe|softpipe|software|basic render/i;
+var MASKED = /^webkit webgl$/i;
+var rendererName = (gl) => {
+  const plain = String(gl.getParameter(gl.RENDERER) ?? "");
+  if (plain && !MASKED.test(plain)) return plain;
+  const info = gl.getExtension("WEBGL_debug_renderer_info");
+  if (!info) return "";
+  return String(gl.getParameter(info.UNMASKED_RENDERER_WEBGL) ?? "");
+};
+var drawsOnCpu = (gl) => {
+  try {
+    return SOFTWARE.test(rendererName(gl));
+  } catch {
+    return false;
+  }
+};
 var hasWebGL = () => {
   if (typeof document === "undefined") return false;
   if (typeof WebGLRenderingContext === "undefined" && typeof WebGL2RenderingContext === "undefined") {
@@ -34,14 +50,16 @@ var createGLHandle = (onLost) => {
   canvas.style.position = "fixed";
   canvas.style.left = "0";
   canvas.style.top = "0";
+  canvas.style.width = "100%";
+  canvas.style.height = "100%";
   canvas.style.pointerEvents = "none";
   const attrs = {
     alpha: true,
     premultipliedAlpha: true,
-    antialias: true,
+    antialias: false,
     depth: false,
     stencil: false,
-    preserveDrawingBuffer: false
+    preserveDrawingBuffer: true
   };
   let gl = null;
   let isWebGL2 = false;
@@ -85,8 +103,6 @@ var resizeDrawingBuffer = (handle, cssWidth, cssHeight, dpr) => {
     handle.canvas.width = w;
     handle.canvas.height = h;
   }
-  handle.canvas.style.width = `${cssWidth}px`;
-  handle.canvas.style.height = `${cssHeight}px`;
   handle.gl.viewport(0, 0, w, h);
 };
 
@@ -102,7 +118,7 @@ precision ${precision} float;
 
 uniform vec2 u_resolution;
 uniform vec4 u_rect;
-uniform float u_radius;
+uniform vec4 u_radius;
 uniform vec4 u_color;
 uniform float u_shadow;
 uniform float u_bend;
@@ -115,7 +131,9 @@ uniform sampler2D u_scroll;
 uniform vec4 u_scrollRect;
 uniform vec2 u_scrollMap;
 
-float roundedBoxSDF(vec2 p, vec2 halfSize, float r) {
+float roundedBoxSDF(vec2 p, vec2 halfSize, vec4 radii) {
+  vec2 side = p.x < 0.0 ? radii.xw : radii.yz;
+  float r = min(p.y < 0.0 ? side.x : side.y, min(halfSize.x, halfSize.y));
   vec2 q = abs(p) - halfSize + r;
   return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
 }
@@ -131,8 +149,7 @@ void main() {
   vec2 p = frag - center;
   p.y -= bend;
 
-  float r = min(u_radius, min(halfSize.x, halfSize.y));
-  float d = roundedBoxSDF(p, halfSize, r);
+  float d = roundedBoxSDF(p, halfSize, u_radius);
   float surface = 1.0 - smoothstep(-1.0, 1.0, d);
 
   vec2 uv = (p + halfSize) / u_rect.zw;
@@ -256,7 +273,14 @@ var createSurfaceProgram = (gl, highp = true) => {
         frame.width * dpr,
         frame.height * dpr
       );
-      gl.uniform1f(uRadius, frame.radius * dpr);
+      const [topLeft, topRight, bottomRight, bottomLeft] = frame.radii;
+      gl.uniform4f(
+        uRadius,
+        topLeft * dpr,
+        topRight * dpr,
+        bottomRight * dpr,
+        bottomLeft * dpr
+      );
       gl.uniform4f(uColor, ...frame.color);
       gl.uniform1f(uShadow, frame.shadow);
       gl.uniform1f(uBend, state.bend * dpr);
@@ -616,6 +640,7 @@ var parseColor = (value) => {
   }
   return readColor(value);
 };
+var parentAcrossShadow = (node) => node.parentElement ?? node.getRootNode().host ?? null;
 var parseRadius = (value) => {
   const n = parseFloat(value);
   return Number.isFinite(n) ? n : 0;
@@ -661,7 +686,12 @@ var webglRenderer = (options = {}) => ({
       const cs = getComputedStyle(element);
       return {
         color: parseColor(cs.backgroundColor),
-        radius: parseRadius(cs.borderTopLeftRadius)
+        radii: [
+          parseRadius(cs.borderTopLeftRadius),
+          parseRadius(cs.borderTopRightRadius),
+          parseRadius(cs.borderBottomRightRadius),
+          parseRadius(cs.borderBottomLeftRadius)
+        ]
       };
     };
     let surfaceStyle = readSurfaceStyle();
@@ -696,6 +726,12 @@ var webglRenderer = (options = {}) => ({
       bail("no-webgl");
       return;
     }
+    if (!options.allowSoftware && drawsOnCpu(handle.gl)) {
+      handle.destroy();
+      handle = null;
+      bail("software-renderer");
+      return;
+    }
     program = createSurfaceProgram(handle.gl, handle.highp);
     if (!program) {
       handle.destroy();
@@ -706,30 +742,22 @@ var webglRenderer = (options = {}) => ({
     const parent = element.parentElement ?? document.body;
     parent.insertBefore(handle.canvas, element);
     let canvasZ = "";
+    let canvasPosition = "fixed";
     const followStack = () => {
       if (!handle) return;
-      const elementZ = getComputedStyle(element).zIndex;
-      const next = elementZ && elementZ !== "auto" ? String(Number(elementZ) - 1) : "0";
+      const cs = getComputedStyle(element);
+      const position = cs.position === "absolute" ? "absolute" : "fixed";
+      if (position !== canvasPosition) {
+        canvasPosition = position;
+        handle.canvas.style.position = position;
+      }
+      const next = cs.zIndex && cs.zIndex !== "auto" ? String(Number(cs.zIndex) - 1) : "0";
       if (next === canvasZ) return;
       canvasZ = next;
       handle.canvas.style.zIndex = next;
     };
     followStack();
     suppressDomPaint();
-    const readFrame = () => {
-      if (!handle) return null;
-      const rect = element.getBoundingClientRect();
-      if (rect.width <= 0 || rect.height <= 0) return null;
-      return {
-        x: rect.left,
-        y: rect.top,
-        width: rect.width,
-        height: rect.height,
-        radius: surfaceStyle.radius,
-        color: surfaceStyle.color,
-        shadow: shadowStrength
-      };
-    };
     const dprOf = () => options.dpr ?? window.devicePixelRatio ?? 1;
     const releaseCapture = () => {
       releaseText?.();
@@ -753,41 +781,52 @@ var webglRenderer = (options = {}) => ({
       capture = next;
       releaseText = hideCapturedText(next.hiddenNodes);
     };
-    const scrollLayer = (frame) => {
+    const scrollLayer = (sheet) => {
       const scroll = capture?.scroll;
       const scroller = ctx.scrollContainer;
       if (!scroll || !scroller) return null;
       const box = scroller.getBoundingClientRect();
-      const left = box.left + scroller.clientLeft - frame.x;
-      const top = box.top + scroller.clientTop - frame.y;
+      const left = box.left + scroller.clientLeft - sheet.left;
+      const top = box.top + scroller.clientTop - sheet.top;
       return {
         texture: scroll.texture,
         rect: [
-          left / frame.width,
-          top / frame.height,
-          (left + scroller.clientWidth) / frame.width,
-          (top + scroller.clientHeight) / frame.height
+          left / sheet.width,
+          top / sheet.height,
+          (left + scroller.clientWidth) / sheet.width,
+          (top + scroller.clientHeight) / sheet.height
         ],
         map: [
-          frame.height / scroll.height,
+          sheet.height / scroll.height,
           (scroll.above + scroller.scrollTop - scroll.top) / scroll.height
         ]
       };
     };
     const paint = () => {
       if (disposed || !handle || !program) return;
-      const frame = readFrame();
-      if (!frame) return;
+      const sheet = element.getBoundingClientRect();
+      const area = handle.canvas.getBoundingClientRect();
+      if (sheet.width <= 0 || sheet.height <= 0) return;
+      if (area.width <= 0 || area.height <= 0) return;
       const dpr = dprOf();
-      resizeDrawingBuffer(handle, window.innerWidth, window.innerHeight, dpr);
+      resizeDrawingBuffer(handle, area.width, area.height, dpr);
       const motion = Math.min(1, Math.abs(bend) / MAX_BEND_PX);
+      const frame = {
+        x: sheet.left - area.left,
+        y: sheet.top - area.top,
+        width: sheet.width,
+        height: sheet.height,
+        radii: surfaceStyle.radii,
+        color: surfaceStyle.color,
+        shadow: shadowStrength
+      };
       program.draw(frame, {
         bend,
         dpr,
         sheen: sheenStrength,
         glass: glassStrength * motion,
         content: capture?.texture ?? null,
-        scroll: scrollLayer(frame)
+        scroll: scrollLayer(sheet)
       });
     };
     const tick = () => {
@@ -806,6 +845,7 @@ var webglRenderer = (options = {}) => ({
         paint();
         running = false;
         frameId = null;
+        queueRefresh();
         return;
       }
       frameId = requestAnimationFrame(tick);
@@ -844,36 +884,71 @@ var webglRenderer = (options = {}) => ({
       subtree: true,
       characterData: true
     });
-    const geometryObserver = new MutationObserver(() => {
+    const onGeometry = () => {
       followStack();
       if (!ctx.isDragging()) paint();
       wake();
-    });
+    };
+    const geometryObserver = new MutationObserver(onGeometry);
     geometryObserver.observe(element, {
       attributes: true,
       attributeFilter: ["style"]
     });
     const refreshSurfaceStyle = () => {
-      if (disposed) return;
-      element.style.background = painted.background;
-      element.style.boxShadow = painted.boxShadow;
-      surfaceStyle = readSurfaceStyle();
-      element.style.background = "transparent";
-      element.style.boxShadow = "none";
+      const moved = geometryObserver.takeRecords().length > 0;
+      const style = element.style;
+      const transition = style.transition;
+      style.transition = "none";
+      restoreDom();
+      const next = readSurfaceStyle();
+      suppressDomPaint();
+      void getComputedStyle(element).backgroundColor;
+      style.transition = transition;
+      geometryObserver.takeRecords();
+      const changed = next.radii.some((radius, i) => radius !== surfaceStyle.radii[i]) || next.color.some((channel, i) => channel !== surfaceStyle.color[i]);
+      surfaceStyle = next;
+      if (!moved) {
+        followStack();
+        return changed;
+      }
+      onGeometry();
+      return false;
+    };
+    let refreshQueued = false;
+    const queueRefresh = () => {
+      if (disposed || refreshQueued) return;
+      refreshQueued = true;
+      requestAnimationFrame(() => {
+        refreshQueued = false;
+        if (!disposed && refreshSurfaceStyle()) paint();
+      });
     };
+    const onThemeSignal = () => {
+      if (!ctx.isDragging() && !ctx.isAnimating()) queueRefresh();
+    };
+    const themeObserver = new MutationObserver(onThemeSignal);
+    themeObserver.observe(element, {
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+    for (let node = parentAcrossShadow(element); node; node = parentAcrossShadow(node)) {
+      themeObserver.observe(node, { attributes: true });
+    }
+    const scheme = typeof matchMedia === "function" ? matchMedia("(prefers-color-scheme: dark)") : null;
+    scheme?.addEventListener?.("change", onThemeSignal);
     const onResize = () => {
       if (disposed) return;
       refreshSurfaceStyle();
       paint();
     };
     window.addEventListener("resize", onResize, { passive: true });
-    window.addEventListener("scroll", onResize, { passive: true });
     paint();
     return () => {
       contentObserver.disconnect();
       geometryObserver.disconnect();
+      themeObserver.disconnect();
+      scheme?.removeEventListener?.("change", onThemeSignal);
       window.removeEventListener("resize", onResize);
-      window.removeEventListener("scroll", onResize);
       teardown();
     };
   }

package/dist/webgl.d.cts

@@ -7,9 +7,10 @@ type WebGLRendererOptions = {
     glass?: number;
     liftContent?: boolean;
     dpr?: number;
+    allowSoftware?: boolean;
     onUnsupported?: (reason: WebGLUnsupportedReason) => void;
 };
-type WebGLUnsupportedReason = "no-document" | "no-webgl" | "reduced-motion" | "context-lost";
+type WebGLUnsupportedReason = "no-document" | "no-webgl" | "software-renderer" | "reduced-motion" | "context-lost";
 
 declare const webglRenderer: (options?: WebGLRendererOptions) => EngineFeature;
 

package/dist/webgl.d.ts

@@ -7,9 +7,10 @@ type WebGLRendererOptions = {
     glass?: number;
     liftContent?: boolean;
     dpr?: number;
+    allowSoftware?: boolean;
     onUnsupported?: (reason: WebGLUnsupportedReason) => void;
 };
-type WebGLUnsupportedReason = "no-document" | "no-webgl" | "reduced-motion" | "context-lost";
+type WebGLUnsupportedReason = "no-document" | "no-webgl" | "software-renderer" | "reduced-motion" | "context-lost";
 
 declare const webglRenderer: (options?: WebGLRendererOptions) => EngineFeature;
 

package/dist/webgl.js

@@ -7,6 +7,22 @@ var supportsHighpFragment = (gl) => {
     return false;
   }
 };
+var SOFTWARE = /swiftshader|llvmpipe|softpipe|software|basic render/i;
+var MASKED = /^webkit webgl$/i;
+var rendererName = (gl) => {
+  const plain = String(gl.getParameter(gl.RENDERER) ?? "");
+  if (plain && !MASKED.test(plain)) return plain;
+  const info = gl.getExtension("WEBGL_debug_renderer_info");
+  if (!info) return "";
+  return String(gl.getParameter(info.UNMASKED_RENDERER_WEBGL) ?? "");
+};
+var drawsOnCpu = (gl) => {
+  try {
+    return SOFTWARE.test(rendererName(gl));
+  } catch {
+    return false;
+  }
+};
 var hasWebGL = () => {
   if (typeof document === "undefined") return false;
   if (typeof WebGLRenderingContext === "undefined" && typeof WebGL2RenderingContext === "undefined") {
@@ -32,14 +48,16 @@ var createGLHandle = (onLost) => {
   canvas.style.position = "fixed";
   canvas.style.left = "0";
   canvas.style.top = "0";
+  canvas.style.width = "100%";
+  canvas.style.height = "100%";
   canvas.style.pointerEvents = "none";
   const attrs = {
     alpha: true,
     premultipliedAlpha: true,
-    antialias: true,
+    antialias: false,
     depth: false,
     stencil: false,
-    preserveDrawingBuffer: false
+    preserveDrawingBuffer: true
   };
   let gl = null;
   let isWebGL2 = false;
@@ -83,8 +101,6 @@ var resizeDrawingBuffer = (handle, cssWidth, cssHeight, dpr) => {
     handle.canvas.width = w;
     handle.canvas.height = h;
   }
-  handle.canvas.style.width = `${cssWidth}px`;
-  handle.canvas.style.height = `${cssHeight}px`;
   handle.gl.viewport(0, 0, w, h);
 };
 
@@ -100,7 +116,7 @@ precision ${precision} float;
 
 uniform vec2 u_resolution;
 uniform vec4 u_rect;
-uniform float u_radius;
+uniform vec4 u_radius;
 uniform vec4 u_color;
 uniform float u_shadow;
 uniform float u_bend;
@@ -113,7 +129,9 @@ uniform sampler2D u_scroll;
 uniform vec4 u_scrollRect;
 uniform vec2 u_scrollMap;
 
-float roundedBoxSDF(vec2 p, vec2 halfSize, float r) {
+float roundedBoxSDF(vec2 p, vec2 halfSize, vec4 radii) {
+  vec2 side = p.x < 0.0 ? radii.xw : radii.yz;
+  float r = min(p.y < 0.0 ? side.x : side.y, min(halfSize.x, halfSize.y));
   vec2 q = abs(p) - halfSize + r;
   return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
 }
@@ -129,8 +147,7 @@ void main() {
   vec2 p = frag - center;
   p.y -= bend;
 
-  float r = min(u_radius, min(halfSize.x, halfSize.y));
-  float d = roundedBoxSDF(p, halfSize, r);
+  float d = roundedBoxSDF(p, halfSize, u_radius);
   float surface = 1.0 - smoothstep(-1.0, 1.0, d);
 
   vec2 uv = (p + halfSize) / u_rect.zw;
@@ -254,7 +271,14 @@ var createSurfaceProgram = (gl, highp = true) => {
         frame.width * dpr,
         frame.height * dpr
       );
-      gl.uniform1f(uRadius, frame.radius * dpr);
+      const [topLeft, topRight, bottomRight, bottomLeft] = frame.radii;
+      gl.uniform4f(
+        uRadius,
+        topLeft * dpr,
+        topRight * dpr,
+        bottomRight * dpr,
+        bottomLeft * dpr
+      );
       gl.uniform4f(uColor, ...frame.color);
       gl.uniform1f(uShadow, frame.shadow);
       gl.uniform1f(uBend, state.bend * dpr);
@@ -614,6 +638,7 @@ var parseColor = (value) => {
   }
   return readColor(value);
 };
+var parentAcrossShadow = (node) => node.parentElement ?? node.getRootNode().host ?? null;
 var parseRadius = (value) => {
   const n = parseFloat(value);
   return Number.isFinite(n) ? n : 0;
@@ -659,7 +684,12 @@ var webglRenderer = (options = {}) => ({
       const cs = getComputedStyle(element);
       return {
         color: parseColor(cs.backgroundColor),
-        radius: parseRadius(cs.borderTopLeftRadius)
+        radii: [
+          parseRadius(cs.borderTopLeftRadius),
+          parseRadius(cs.borderTopRightRadius),
+          parseRadius(cs.borderBottomRightRadius),
+          parseRadius(cs.borderBottomLeftRadius)
+        ]
       };
     };
     let surfaceStyle = readSurfaceStyle();
@@ -694,6 +724,12 @@ var webglRenderer = (options = {}) => ({
       bail("no-webgl");
       return;
     }
+    if (!options.allowSoftware && drawsOnCpu(handle.gl)) {
+      handle.destroy();
+      handle = null;
+      bail("software-renderer");
+      return;
+    }
     program = createSurfaceProgram(handle.gl, handle.highp);
     if (!program) {
       handle.destroy();
@@ -704,30 +740,22 @@ var webglRenderer = (options = {}) => ({
     const parent = element.parentElement ?? document.body;
     parent.insertBefore(handle.canvas, element);
     let canvasZ = "";
+    let canvasPosition = "fixed";
     const followStack = () => {
       if (!handle) return;
-      const elementZ = getComputedStyle(element).zIndex;
-      const next = elementZ && elementZ !== "auto" ? String(Number(elementZ) - 1) : "0";
+      const cs = getComputedStyle(element);
+      const position = cs.position === "absolute" ? "absolute" : "fixed";
+      if (position !== canvasPosition) {
+        canvasPosition = position;
+        handle.canvas.style.position = position;
+      }
+      const next = cs.zIndex && cs.zIndex !== "auto" ? String(Number(cs.zIndex) - 1) : "0";
       if (next === canvasZ) return;
       canvasZ = next;
       handle.canvas.style.zIndex = next;
     };
     followStack();
     suppressDomPaint();
-    const readFrame = () => {
-      if (!handle) return null;
-      const rect = element.getBoundingClientRect();
-      if (rect.width <= 0 || rect.height <= 0) return null;
-      return {
-        x: rect.left,
-        y: rect.top,
-        width: rect.width,
-        height: rect.height,
-        radius: surfaceStyle.radius,
-        color: surfaceStyle.color,
-        shadow: shadowStrength
-      };
-    };
     const dprOf = () => options.dpr ?? window.devicePixelRatio ?? 1;
     const releaseCapture = () => {
       releaseText?.();
@@ -751,41 +779,52 @@ var webglRenderer = (options = {}) => ({
       capture = next;
       releaseText = hideCapturedText(next.hiddenNodes);
     };
-    const scrollLayer = (frame) => {
+    const scrollLayer = (sheet) => {
       const scroll = capture?.scroll;
       const scroller = ctx.scrollContainer;
       if (!scroll || !scroller) return null;
       const box = scroller.getBoundingClientRect();
-      const left = box.left + scroller.clientLeft - frame.x;
-      const top = box.top + scroller.clientTop - frame.y;
+      const left = box.left + scroller.clientLeft - sheet.left;
+      const top = box.top + scroller.clientTop - sheet.top;
       return {
         texture: scroll.texture,
         rect: [
-          left / frame.width,
-          top / frame.height,
-          (left + scroller.clientWidth) / frame.width,
-          (top + scroller.clientHeight) / frame.height
+          left / sheet.width,
+          top / sheet.height,
+          (left + scroller.clientWidth) / sheet.width,
+          (top + scroller.clientHeight) / sheet.height
         ],
         map: [
-          frame.height / scroll.height,
+          sheet.height / scroll.height,
           (scroll.above + scroller.scrollTop - scroll.top) / scroll.height
         ]
       };
     };
     const paint = () => {
       if (disposed || !handle || !program) return;
-      const frame = readFrame();
-      if (!frame) return;
+      const sheet = element.getBoundingClientRect();
+      const area = handle.canvas.getBoundingClientRect();
+      if (sheet.width <= 0 || sheet.height <= 0) return;
+      if (area.width <= 0 || area.height <= 0) return;
       const dpr = dprOf();
-      resizeDrawingBuffer(handle, window.innerWidth, window.innerHeight, dpr);
+      resizeDrawingBuffer(handle, area.width, area.height, dpr);
       const motion = Math.min(1, Math.abs(bend) / MAX_BEND_PX);
+      const frame = {
+        x: sheet.left - area.left,
+        y: sheet.top - area.top,
+        width: sheet.width,
+        height: sheet.height,
+        radii: surfaceStyle.radii,
+        color: surfaceStyle.color,
+        shadow: shadowStrength
+      };
       program.draw(frame, {
         bend,
         dpr,
         sheen: sheenStrength,
         glass: glassStrength * motion,
         content: capture?.texture ?? null,
-        scroll: scrollLayer(frame)
+        scroll: scrollLayer(sheet)
       });
     };
     const tick = () => {
@@ -804,6 +843,7 @@ var webglRenderer = (options = {}) => ({
         paint();
         running = false;
         frameId = null;
+        queueRefresh();
         return;
       }
       frameId = requestAnimationFrame(tick);
@@ -842,36 +882,71 @@ var webglRenderer = (options = {}) => ({
       subtree: true,
       characterData: true
     });
-    const geometryObserver = new MutationObserver(() => {
+    const onGeometry = () => {
       followStack();
       if (!ctx.isDragging()) paint();
       wake();
-    });
+    };
+    const geometryObserver = new MutationObserver(onGeometry);
     geometryObserver.observe(element, {
       attributes: true,
       attributeFilter: ["style"]
     });
     const refreshSurfaceStyle = () => {
-      if (disposed) return;
-      element.style.background = painted.background;
-      element.style.boxShadow = painted.boxShadow;
-      surfaceStyle = readSurfaceStyle();
-      element.style.background = "transparent";
-      element.style.boxShadow = "none";
+      const moved = geometryObserver.takeRecords().length > 0;
+      const style = element.style;
+      const transition = style.transition;
+      style.transition = "none";
+      restoreDom();
+      const next = readSurfaceStyle();
+      suppressDomPaint();
+      void getComputedStyle(element).backgroundColor;
+      style.transition = transition;
+      geometryObserver.takeRecords();
+      const changed = next.radii.some((radius, i) => radius !== surfaceStyle.radii[i]) || next.color.some((channel, i) => channel !== surfaceStyle.color[i]);
+      surfaceStyle = next;
+      if (!moved) {
+        followStack();
+        return changed;
+      }
+      onGeometry();
+      return false;
+    };
+    let refreshQueued = false;
+    const queueRefresh = () => {
+      if (disposed || refreshQueued) return;
+      refreshQueued = true;
+      requestAnimationFrame(() => {
+        refreshQueued = false;
+        if (!disposed && refreshSurfaceStyle()) paint();
+      });
     };
+    const onThemeSignal = () => {
+      if (!ctx.isDragging() && !ctx.isAnimating()) queueRefresh();
+    };
+    const themeObserver = new MutationObserver(onThemeSignal);
+    themeObserver.observe(element, {
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+    for (let node = parentAcrossShadow(element); node; node = parentAcrossShadow(node)) {
+      themeObserver.observe(node, { attributes: true });
+    }
+    const scheme = typeof matchMedia === "function" ? matchMedia("(prefers-color-scheme: dark)") : null;
+    scheme?.addEventListener?.("change", onThemeSignal);
     const onResize = () => {
       if (disposed) return;
       refreshSurfaceStyle();
       paint();
     };
     window.addEventListener("resize", onResize, { passive: true });
-    window.addEventListener("scroll", onResize, { passive: true });
     paint();
     return () => {
       contentObserver.disconnect();
       geometryObserver.disconnect();
+      themeObserver.disconnect();
+      scheme?.removeEventListener?.("change", onThemeSignal);
       window.removeEventListener("resize", onResize);
-      window.removeEventListener("scroll", onResize);
       teardown();
     };
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surdeddd/bottom-sheet",
-  "version": "0.24.0",
+  "version": "0.24.1",
   "description": "Bottom sheet, drawer and modal sheet with snap points, spring physics and touch gestures. One engine for React, Vue 3, Svelte 5, Solid, Qwik, Preact and a <bottom-sheet> web component. Accessible, SSR-safe, no dependencies.",
   "type": "module",
   "license": "MIT",
@@ -340,7 +340,7 @@
     {
       "name": "webgl renderer (subpath)",
       "path": "dist/webgl.js",
-      "limit": "5.97 KB",
+      "limit": "6.44 KB",
       "gzip": true
     }
   ],