@surdeddd/bottom-sheet 0.23.4 → 0.24.1

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);
@@ -585,13 +609,36 @@ var BEND_DECAY_HELD = 0.86;
 var BEND_DECAY_FREE = 0.62;
 var BEND_REST = 0.35;
 var prefersReducedMotion = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+var WHITE = [1, 1, 1, 1];
+var SENTINEL = "#010203";
+var colorProbe;
+var readColor = (value) => {
+  if (colorProbe === void 0) {
+    const canvas = document.createElement("canvas");
+    canvas.width = 1;
+    canvas.height = 1;
+    colorProbe = canvas.getContext("2d", { willReadFrequently: true });
+  }
+  const probe = colorProbe;
+  if (!probe) return WHITE;
+  probe.fillStyle = SENTINEL;
+  probe.fillStyle = value;
+  if (probe.fillStyle === SENTINEL) return WHITE;
+  probe.clearRect(0, 0, 1, 1);
+  probe.fillRect(0, 0, 1, 1);
+  const [r = 255, g = 255, b = 255, a = 255] = probe.getImageData(0, 0, 1, 1).data;
+  return [r / 255, g / 255, b / 255, a / 255];
+};
 var parseColor = (value) => {
-  const m = value.match(/rgba?\(([^)]+)\)/);
-  if (!m) return [1, 1, 1, 1];
-  const parts = m[1].split(",").map((p) => parseFloat(p.trim()));
-  const [r = 255, g = 255, b = 255, a = 1] = parts;
-  return [r / 255, g / 255, b / 255, a];
+  const legacy = value.match(/^rgba?\(([^()]+)\)$/);
+  if (legacy && legacy[1].includes(",")) {
+    const parts = legacy[1].split(",").map((p) => parseFloat(p.trim()));
+    const [r = 255, g = 255, b = 255, a = 1] = parts;
+    return [r / 255, g / 255, b / 255, a];
+  }
+  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;
@@ -637,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();
@@ -672,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();
@@ -681,23 +739,23 @@ var webglRenderer = (options = {}) => ({
     }
     const parent = element.parentElement ?? document.body;
     parent.insertBefore(handle.canvas, element);
-    const elementZ = getComputedStyle(element).zIndex;
-    handle.canvas.style.zIndex = elementZ && elementZ !== "auto" ? String(Number(elementZ) - 1) : "0";
-    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
-      };
+    let canvasZ = "";
+    let canvasPosition = "fixed";
+    const followStack = () => {
+      if (!handle) return;
+      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 dprOf = () => options.dpr ?? window.devicePixelRatio ?? 1;
     const releaseCapture = () => {
       releaseText?.();
@@ -721,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 = () => {
@@ -774,6 +843,7 @@ var webglRenderer = (options = {}) => ({
         paint();
         running = false;
         frameId = null;
+        queueRefresh();
         return;
       }
       frameId = requestAnimationFrame(tick);
@@ -812,35 +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();
     };
   }