@surdeddd/bottom-sheet 0.24.0 → 0.24.2

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 | Experimental [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.
@@ -641,7 +641,7 @@ to `backdrop-filter` to WebGL, is detected and degrades.
 | | |
 | --- | --- |
 | Frameworks | [React](docs/react.md) · [Vue](docs/vue.md) · [Svelte](docs/svelte.md) · [Solid](docs/solid.md) · [Qwik](docs/qwik.md) · [Preact](docs/preact.md) · [Custom element](docs/web-component.md) · [Vanilla](docs/vanilla.md) · [Angular](docs/angular.md) · [Lit](docs/lit.md) · [Astro](docs/astro.md) |
-| Topics | [Theming](docs/theming.md) · [Anchors and scrim stages](docs/anchors.md) · [Content at every snap](docs/content-fit.md) · [Overlay](docs/overlay.md) · [RTL](docs/rtl.md) · [WebGL renderer](docs/webgl.md) · [Plugins](docs/plugins.md) |
+| Topics | [Theming](docs/theming.md) · [Anchors and scrim stages](docs/anchors.md) · [Content at every snap](docs/content-fit.md) · [Overlay](docs/overlay.md) · [RTL](docs/rtl.md) · [WebGL renderer (experimental)](docs/webgl.md) · [Plugins](docs/plugins.md) |
 | Recipes | [Ten worked examples](docs/recipes/README.md): filter panel, checkout, comment thread, navigation drawer, mini player and more |
 | Examples | [Runnable projects](https://github.com/Surdeddd/BottomSheet/tree/main/examples) for React, Vue, Svelte, Solid, Lit, the custom element and vanilla |
 | Coming from another library | [From vaul or react-modal-sheet](docs/MIGRATION.md) |

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)`: панель с состоянием движка в реальном времени |
 
 Опция, для которой не подключена возможность, один раз предупреждает в
@@ -656,7 +656,7 @@ Chrome и Edge 80, Safari 13.1 (iOS 13.4), Firefox 72. Эту границу з
 | | |
 | --- | --- |
 | Фреймворки | [React](docs/react.md) · [Vue](docs/vue.md) · [Svelte](docs/svelte.md) · [Solid](docs/solid.md) · [Qwik](docs/qwik.md) · [Preact](docs/preact.md) · [Веб-компонент](docs/web-component.md) · [Без фреймворка](docs/vanilla.md) · [Angular](docs/angular.md) · [Lit](docs/lit.md) · [Astro](docs/astro.md) |
-| Темы | [Стилизация](docs/theming.md) · [Якоря и сцены скрима](docs/anchors.md) · [Содержимое на каждой точке](docs/content-fit.md) · [Оверлей](docs/overlay.md) · [RTL](docs/rtl.md) · [Рендерер WebGL](docs/webgl.md) · [Плагины](docs/plugins.md) |
+| Темы | [Стилизация](docs/theming.md) · [Якоря и сцены скрима](docs/anchors.md) · [Содержимое на каждой точке](docs/content-fit.md) · [Оверлей](docs/overlay.md) · [RTL](docs/rtl.md) · [Рендерер WebGL (экспериментальный)](docs/webgl.md) · [Плагины](docs/plugins.md) |
 | Рецепты | [Десять разобранных примеров](docs/recipes/README.md): панель фильтров, оформление заказа, тред комментариев, навигационная панель, мини-плеер и другие |
 | Примеры | [Запускаемые проекты](https://github.com/Surdeddd/BottomSheet/tree/main/examples) для React, Vue, Svelte, Solid, Lit, веб-компонента и движка без фреймворка |
 | Переход с другой библиотеки | [С vaul или react-modal-sheet](docs/MIGRATION.md) |

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/llms.txt

@@ -21,7 +21,7 @@ This file is a complete reference written for AI coding assistants. Every name b
 | `@surdeddd/bottom-sheet/overlay` | `OverlayEngine`: a two-state slide-in panel without snap points |
 | `@surdeddd/bottom-sheet/core` | `BottomSheetCore`: the engine without optional features |
 | `@surdeddd/bottom-sheet/features` | `routeFeature`, `visualViewportFeature`, `contentSwipeFeature`, `contentFitFeature`, `persistFeature`, `autoCollapseFeature` |
-| `@surdeddd/bottom-sheet/webgl` | `webglRenderer`: optional GPU renderer |
+| `@surdeddd/bottom-sheet/webgl` | `webglRenderer`: experimental GPU renderer; do not add it unless asked |
 | `@surdeddd/bottom-sheet/debug` | `attachDebugOverlay(engine)` |
 | `@surdeddd/bottom-sheet/integrations/react-hook-form` | `useFormGuard(sheetRef, form)` |
 | `@surdeddd/bottom-sheet/integrations/formik` | `useFormikGuard(sheetRef, formikRef)` |
@@ -323,7 +323,7 @@ Class names: `bs-root`, `bs-backdrop`, `bs-screen`, `bs-sheet`, `bs-handle`, `bs
 
 - [Architecture](https://raw.githubusercontent.com/Surdeddd/BottomSheet/main/docs/ARCHITECTURE.md)
 - [API stability](https://raw.githubusercontent.com/Surdeddd/BottomSheet/main/docs/api-stability.md)
-- [WebGL renderer](https://raw.githubusercontent.com/Surdeddd/BottomSheet/main/docs/webgl.md)
+- [WebGL renderer (experimental)](https://raw.githubusercontent.com/Surdeddd/BottomSheet/main/docs/webgl.md)
 - [Plugins](https://raw.githubusercontent.com/Surdeddd/BottomSheet/main/docs/plugins.md)
 - [RTL](https://raw.githubusercontent.com/Surdeddd/BottomSheet/main/docs/rtl.md)
 - [Browser support](https://raw.githubusercontent.com/Surdeddd/BottomSheet/main/docs/browser-support.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surdeddd/bottom-sheet",
-  "version": "0.24.0",
+  "version": "0.24.2",
   "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
     }
   ],