@surdeddd/bottom-sheet 0.14.0 → 0.20.1

package/dist/webgl.cjs

@@ -1,12 +1,22 @@
 'use strict';
 
 // src/webgl/gl-context.ts
+var supportsHighpFragment = (gl) => {
+  try {
+    const fmt = gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.HIGH_FLOAT);
+    return !!fmt && fmt.precision > 0;
+  } catch {
+    return false;
+  }
+};
 var hasWebGL = () => {
   if (typeof document === "undefined") return false;
-  if (typeof WebGLRenderingContext === "undefined") return false;
+  if (typeof WebGLRenderingContext === "undefined" && typeof WebGL2RenderingContext === "undefined") {
+    return false;
+  }
   try {
     const probe = document.createElement("canvas");
-    const gl = probe.getContext("webgl", { alpha: true }) ?? probe.getContext("experimental-webgl");
+    const gl = probe.getContext("webgl2", { alpha: true }) ?? probe.getContext("webgl", { alpha: true }) ?? probe.getContext("experimental-webgl");
     if (!gl) return false;
     const lose = gl.getExtension(
       "WEBGL_lose_context"
@@ -25,18 +35,26 @@ var createGLHandle = (onLost) => {
   canvas.style.left = "0";
   canvas.style.top = "0";
   canvas.style.pointerEvents = "none";
+  const attrs = {
+    alpha: true,
+    premultipliedAlpha: true,
+    antialias: true,
+    depth: false,
+    stencil: false,
+    preserveDrawingBuffer: false
+  };
   let gl = null;
-  try {
-    gl = canvas.getContext("webgl", {
-      alpha: true,
-      premultipliedAlpha: true,
-      antialias: true,
-      depth: false,
-      stencil: false,
-      preserveDrawingBuffer: false
-    });
-  } catch {
-    gl = null;
+  let isWebGL2 = false;
+  for (const id of ["webgl2", "webgl", "experimental-webgl"]) {
+    try {
+      const ctx = canvas.getContext(id, attrs);
+      if (ctx) {
+        gl = ctx;
+        isWebGL2 = id === "webgl2";
+        break;
+      }
+    } catch {
+    }
   }
   if (!gl) return null;
   const handleLost = (e) => {
@@ -47,6 +65,8 @@ var createGLHandle = (onLost) => {
   return {
     canvas,
     gl,
+    isWebGL2,
+    highp: isWebGL2 || supportsHighpFragment(gl),
     destroy: () => {
       canvas.removeEventListener("webglcontextlost", handleLost);
       const lose = gl?.getExtension("WEBGL_lose_context");
@@ -77,8 +97,8 @@ void main() {
   gl_Position = vec4(a_pos, 0.0, 1.0);
 }
 `;
-var FRAGMENT_SRC = `
-precision mediump float;
+var FRAGMENT_SRC = (precision) => `
+precision ${precision} float;
 
 uniform vec2 u_resolution;
 uniform vec4 u_rect;
@@ -155,9 +175,16 @@ var compile = (gl, type, src) => {
   }
   return shader;
 };
-var createSurfaceProgram = (gl) => {
+var createSurfaceProgram = (gl, highp = true) => {
   const vs = compile(gl, gl.VERTEX_SHADER, VERTEX_SRC);
-  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT_SRC);
+  let fs = compile(
+    gl,
+    gl.FRAGMENT_SHADER,
+    FRAGMENT_SRC(highp ? "highp" : "mediump")
+  );
+  if (!fs && highp) {
+    fs = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT_SRC("mediump"));
+  }
   if (!vs || !fs) return null;
   const program = gl.createProgram();
   if (!program) return null;
@@ -273,6 +300,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 +369,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 +413,7 @@ var captureContent = (gl, root, dpr) => {
     });
     if (lines.length) {
       painted++;
-      hiddenNodes.push(el);
+      if (!boxed) hiddenNodes.push(el);
     }
   }
   if (!painted) return null;
@@ -329,14 +421,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 +441,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;
+    }
   };
 };
 
@@ -448,7 +565,7 @@ var webglRenderer = (options = {}) => ({
       bail("no-webgl");
       return;
     }
-    program = createSurfaceProgram(handle.gl);
+    program = createSurfaceProgram(handle.gl, handle.highp);
     if (!program) {
       handle.destroy();
       handle = null;
@@ -508,10 +625,13 @@ var webglRenderer = (options = {}) => ({
       paint();
       const held = ctx.isDragging();
       bend *= held ? BEND_DECAY_HELD : BEND_DECAY_FREE;
-      const settled = !held && !ctx.isAnimating() && Math.abs(bend) < BEND_REST;
-      if (settled) {
+      const flat = Math.abs(bend) < BEND_REST;
+      if (!held && flat && capture) {
         bend = 0;
         releaseCapture();
+      }
+      if (!held && flat && !ctx.isAnimating()) {
+        bend = 0;
         paint();
         running = false;
         frameId = null;

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 = {

package/dist/webgl.js

@@ -1,10 +1,20 @@
 // src/webgl/gl-context.ts
+var supportsHighpFragment = (gl) => {
+  try {
+    const fmt = gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.HIGH_FLOAT);
+    return !!fmt && fmt.precision > 0;
+  } catch {
+    return false;
+  }
+};
 var hasWebGL = () => {
   if (typeof document === "undefined") return false;
-  if (typeof WebGLRenderingContext === "undefined") return false;
+  if (typeof WebGLRenderingContext === "undefined" && typeof WebGL2RenderingContext === "undefined") {
+    return false;
+  }
   try {
     const probe = document.createElement("canvas");
-    const gl = probe.getContext("webgl", { alpha: true }) ?? probe.getContext("experimental-webgl");
+    const gl = probe.getContext("webgl2", { alpha: true }) ?? probe.getContext("webgl", { alpha: true }) ?? probe.getContext("experimental-webgl");
     if (!gl) return false;
     const lose = gl.getExtension(
       "WEBGL_lose_context"
@@ -23,18 +33,26 @@ var createGLHandle = (onLost) => {
   canvas.style.left = "0";
   canvas.style.top = "0";
   canvas.style.pointerEvents = "none";
+  const attrs = {
+    alpha: true,
+    premultipliedAlpha: true,
+    antialias: true,
+    depth: false,
+    stencil: false,
+    preserveDrawingBuffer: false
+  };
   let gl = null;
-  try {
-    gl = canvas.getContext("webgl", {
-      alpha: true,
-      premultipliedAlpha: true,
-      antialias: true,
-      depth: false,
-      stencil: false,
-      preserveDrawingBuffer: false
-    });
-  } catch {
-    gl = null;
+  let isWebGL2 = false;
+  for (const id of ["webgl2", "webgl", "experimental-webgl"]) {
+    try {
+      const ctx = canvas.getContext(id, attrs);
+      if (ctx) {
+        gl = ctx;
+        isWebGL2 = id === "webgl2";
+        break;
+      }
+    } catch {
+    }
   }
   if (!gl) return null;
   const handleLost = (e) => {
@@ -45,6 +63,8 @@ var createGLHandle = (onLost) => {
   return {
     canvas,
     gl,
+    isWebGL2,
+    highp: isWebGL2 || supportsHighpFragment(gl),
     destroy: () => {
       canvas.removeEventListener("webglcontextlost", handleLost);
       const lose = gl?.getExtension("WEBGL_lose_context");
@@ -75,8 +95,8 @@ void main() {
   gl_Position = vec4(a_pos, 0.0, 1.0);
 }
 `;
-var FRAGMENT_SRC = `
-precision mediump float;
+var FRAGMENT_SRC = (precision) => `
+precision ${precision} float;
 
 uniform vec2 u_resolution;
 uniform vec4 u_rect;
@@ -153,9 +173,16 @@ var compile = (gl, type, src) => {
   }
   return shader;
 };
-var createSurfaceProgram = (gl) => {
+var createSurfaceProgram = (gl, highp = true) => {
   const vs = compile(gl, gl.VERTEX_SHADER, VERTEX_SRC);
-  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT_SRC);
+  let fs = compile(
+    gl,
+    gl.FRAGMENT_SHADER,
+    FRAGMENT_SRC(highp ? "highp" : "mediump")
+  );
+  if (!fs && highp) {
+    fs = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT_SRC("mediump"));
+  }
   if (!vs || !fs) return null;
   const program = gl.createProgram();
   if (!program) return null;
@@ -271,6 +298,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));
@@ -287,12 +367,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";
@@ -319,7 +411,7 @@ var captureContent = (gl, root, dpr) => {
     });
     if (lines.length) {
       painted++;
-      hiddenNodes.push(el);
+      if (!boxed) hiddenNodes.push(el);
     }
   }
   if (!painted) return null;
@@ -327,14 +419,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);
@@ -342,10 +439,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;
+    }
   };
 };
 
@@ -446,7 +563,7 @@ var webglRenderer = (options = {}) => ({
       bail("no-webgl");
       return;
     }
-    program = createSurfaceProgram(handle.gl);
+    program = createSurfaceProgram(handle.gl, handle.highp);
     if (!program) {
       handle.destroy();
       handle = null;
@@ -506,10 +623,13 @@ var webglRenderer = (options = {}) => ({
       paint();
       const held = ctx.isDragging();
       bend *= held ? BEND_DECAY_HELD : BEND_DECAY_FREE;
-      const settled = !held && !ctx.isAnimating() && Math.abs(bend) < BEND_REST;
-      if (settled) {
+      const flat = Math.abs(bend) < BEND_REST;
+      if (!held && flat && capture) {
         bend = 0;
         releaseCapture();
+      }
+      if (!held && flat && !ctx.isAnimating()) {
+        bend = 0;
         paint();
         running = false;
         frameId = null;