@surdeddd/bottom-sheet 0.13.0 → 0.14.0

package/dist/webgl.js

@@ -0,0 +1,581 @@
+// src/webgl/gl-context.ts
+var hasWebGL = () => {
+  if (typeof document === "undefined") return false;
+  if (typeof WebGLRenderingContext === "undefined") return false;
+  try {
+    const probe = document.createElement("canvas");
+    const gl = probe.getContext("webgl", { alpha: true }) ?? probe.getContext("experimental-webgl");
+    if (!gl) return false;
+    const lose = gl.getExtension(
+      "WEBGL_lose_context"
+    );
+    lose?.loseContext();
+    return true;
+  } catch {
+    return false;
+  }
+};
+var createGLHandle = (onLost) => {
+  if (typeof document === "undefined") return null;
+  const canvas = document.createElement("canvas");
+  canvas.setAttribute("aria-hidden", "true");
+  canvas.style.position = "fixed";
+  canvas.style.left = "0";
+  canvas.style.top = "0";
+  canvas.style.pointerEvents = "none";
+  let gl = null;
+  try {
+    gl = canvas.getContext("webgl", {
+      alpha: true,
+      premultipliedAlpha: true,
+      antialias: true,
+      depth: false,
+      stencil: false,
+      preserveDrawingBuffer: false
+    });
+  } catch {
+    gl = null;
+  }
+  if (!gl) return null;
+  const handleLost = (e) => {
+    e.preventDefault();
+    onLost();
+  };
+  canvas.addEventListener("webglcontextlost", handleLost);
+  return {
+    canvas,
+    gl,
+    destroy: () => {
+      canvas.removeEventListener("webglcontextlost", handleLost);
+      const lose = gl?.getExtension("WEBGL_lose_context");
+      try {
+        lose?.loseContext();
+      } catch {
+      }
+      canvas.remove();
+    }
+  };
+};
+var resizeDrawingBuffer = (handle, cssWidth, cssHeight, dpr) => {
+  const w = Math.max(1, Math.round(cssWidth * dpr));
+  const h = Math.max(1, Math.round(cssHeight * dpr));
+  if (handle.canvas.width !== w || handle.canvas.height !== h) {
+    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);
+};
+
+// src/webgl/surface-program.ts
+var VERTEX_SRC = `
+attribute vec2 a_pos;
+void main() {
+  gl_Position = vec4(a_pos, 0.0, 1.0);
+}
+`;
+var FRAGMENT_SRC = `
+precision mediump float;
+
+uniform vec2 u_resolution;
+uniform vec4 u_rect;
+uniform float u_radius;
+uniform vec4 u_color;
+uniform float u_shadow;
+uniform float u_bend;
+uniform float u_sheen;
+uniform float u_glass;
+uniform float u_hasContent;
+uniform sampler2D u_content;
+
+float roundedBoxSDF(vec2 p, vec2 halfSize, float r) {
+  vec2 q = abs(p) - halfSize + r;
+  return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
+}
+
+void main() {
+  vec2 frag = vec2(gl_FragCoord.x, u_resolution.y - gl_FragCoord.y);
+  vec2 center = u_rect.xy + u_rect.zw * 0.5;
+  vec2 halfSize = u_rect.zw * 0.5;
+
+  float across = clamp((frag.x - u_rect.x) / max(u_rect.z, 1.0), 0.0, 1.0);
+  float bend = sin(across * 3.14159265) * u_bend;
+
+  vec2 p = frag - center;
+  p.y -= bend;
+
+  float r = min(u_radius, min(halfSize.x, halfSize.y));
+  float d = roundedBoxSDF(p, halfSize, r);
+  float surface = 1.0 - smoothstep(-1.0, 1.0, d);
+
+  vec2 uv = (p + halfSize) / u_rect.zw;
+  float down = clamp(uv.y, 0.0, 1.0);
+
+  vec2 glassUv = uv;
+  glassUv.x += sin(uv.y * 9.0 + u_bend * 0.08) * u_glass * 0.004;
+  glassUv.y += u_glass * 0.002 * sin(uv.x * 7.0);
+
+  vec4 content = vec4(0.0);
+  if (u_hasContent > 0.5 &&
+      glassUv.x > 0.0 && glassUv.x < 1.0 &&
+      glassUv.y > 0.0 && glassUv.y < 1.0) {
+    content = texture2D(u_content, glassUv);
+  }
+
+  float edge = 1.0 - smoothstep(0.0, 2.5, abs(d));
+  float topLight = pow(1.0 - down, 3.0);
+  float sheen = (edge * 0.55 + topLight * 0.25) * u_sheen;
+
+  vec3 panelRgb = (u_color.rgb + vec3(sheen)) * u_color.a;
+  float panelA = u_color.a;
+
+  vec3 rgb = content.rgb + panelRgb * (1.0 - content.a);
+  float alpha = content.a + panelA * (1.0 - content.a);
+
+  rgb *= surface;
+  alpha *= surface;
+
+  float shadow = (1.0 - smoothstep(0.0, 24.0, d)) * u_shadow * (1.0 - surface);
+  alpha += shadow * 0.28;
+
+  gl_FragColor = vec4(rgb, alpha);
+}
+`;
+var compile = (gl, type, src) => {
+  const shader = gl.createShader(type);
+  if (!shader) return null;
+  gl.shaderSource(shader, src);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    gl.deleteShader(shader);
+    return null;
+  }
+  return shader;
+};
+var createSurfaceProgram = (gl) => {
+  const vs = compile(gl, gl.VERTEX_SHADER, VERTEX_SRC);
+  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT_SRC);
+  if (!vs || !fs) return null;
+  const program = gl.createProgram();
+  if (!program) return null;
+  gl.attachShader(program, vs);
+  gl.attachShader(program, fs);
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    gl.deleteProgram(program);
+    return null;
+  }
+  const buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(
+    gl.ARRAY_BUFFER,
+    new Float32Array([-1, -1, 3, -1, -1, 3]),
+    gl.STATIC_DRAW
+  );
+  const aPos = gl.getAttribLocation(program, "a_pos");
+  const uResolution = gl.getUniformLocation(program, "u_resolution");
+  const uRect = gl.getUniformLocation(program, "u_rect");
+  const uRadius = gl.getUniformLocation(program, "u_radius");
+  const uColor = gl.getUniformLocation(program, "u_color");
+  const uShadow = gl.getUniformLocation(program, "u_shadow");
+  const uBend = gl.getUniformLocation(program, "u_bend");
+  const uSheen = gl.getUniformLocation(program, "u_sheen");
+  const uGlass = gl.getUniformLocation(program, "u_glass");
+  const uHasContent = gl.getUniformLocation(program, "u_hasContent");
+  const uContent = gl.getUniformLocation(program, "u_content");
+  return {
+    draw: (frame, state) => {
+      const { drawingBufferWidth: w, drawingBufferHeight: h } = gl;
+      const dpr = state.dpr;
+      gl.clearColor(0, 0, 0, 0);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      gl.enable(gl.BLEND);
+      gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+      gl.useProgram(program);
+      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+      gl.enableVertexAttribArray(aPos);
+      gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+      gl.uniform2f(uResolution, w, h);
+      gl.uniform4f(
+        uRect,
+        frame.x * dpr,
+        frame.y * dpr,
+        frame.width * dpr,
+        frame.height * dpr
+      );
+      gl.uniform1f(uRadius, frame.radius * dpr);
+      gl.uniform4f(uColor, ...frame.color);
+      gl.uniform1f(uShadow, frame.shadow);
+      gl.uniform1f(uBend, state.bend * dpr);
+      gl.uniform1f(uSheen, state.sheen);
+      gl.uniform1f(uGlass, state.glass);
+      if (state.content) {
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, state.content);
+        gl.uniform1i(uContent, 0);
+        gl.uniform1f(uHasContent, 1);
+      } else {
+        gl.uniform1f(uHasContent, 0);
+      }
+      gl.drawArrays(gl.TRIANGLES, 0, 3);
+    },
+    destroy: () => {
+      gl.deleteBuffer(buffer);
+      gl.deleteProgram(program);
+      gl.deleteShader(vs);
+      gl.deleteShader(fs);
+    }
+  };
+};
+
+// src/webgl/content-texture.ts
+var SKIP_TAGS = /* @__PURE__ */ new Set([
+  "INPUT",
+  "TEXTAREA",
+  "SELECT",
+  "IMG",
+  "SVG",
+  "CANVAS",
+  "VIDEO",
+  "IFRAME",
+  "BUTTON"
+]);
+var isRenderable = (el) => {
+  if (SKIP_TAGS.has(el.tagName)) return false;
+  const cs = getComputedStyle(el);
+  if (cs.visibility === "hidden" || cs.display === "none") return false;
+  if (parseFloat(cs.opacity) < 0.05) return false;
+  return true;
+};
+var directText = (el) => {
+  let out = "";
+  for (const node of Array.from(el.childNodes)) {
+    if (node.nodeType === Node.TEXT_NODE) out += node.textContent ?? "";
+  }
+  return out.trim();
+};
+var wrapLines = (ctx, text, maxWidth) => {
+  const words = text.split(/\s+/).filter(Boolean);
+  if (!words.length) return [];
+  const lines = [];
+  let line = words[0];
+  for (let i = 1; i < words.length; i++) {
+    const candidate = `${line} ${words[i]}`;
+    if (ctx.measureText(candidate).width <= maxWidth) line = candidate;
+    else {
+      lines.push(line);
+      line = words[i];
+    }
+  }
+  lines.push(line);
+  return lines;
+};
+var captureContent = (gl, root, dpr) => {
+  const rootRect = root.getBoundingClientRect();
+  const w = Math.max(1, Math.round(rootRect.width * dpr));
+  const h = Math.max(1, Math.round(rootRect.height * dpr));
+  if (w < 2 || h < 2) return null;
+  const surface = document.createElement("canvas");
+  surface.width = w;
+  surface.height = h;
+  const ctx = surface.getContext("2d");
+  if (!ctx) return null;
+  ctx.scale(dpr, dpr);
+  const hiddenNodes = [];
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+  let painted = 0;
+  while (walker.nextNode()) {
+    const el = walker.currentNode;
+    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);
+    ctx.font = `${cs.fontStyle} ${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`;
+    ctx.fillStyle = cs.color;
+    ctx.textBaseline = "top";
+    const padLeft = parseFloat(cs.paddingLeft) || 0;
+    const padTop = parseFloat(cs.paddingTop) || 0;
+    const innerWidth = Math.max(
+      1,
+      rect.width - padLeft - (parseFloat(cs.paddingRight) || 0)
+    );
+    const lineHeight = parseFloat(cs.lineHeight) || parseFloat(cs.fontSize) * 1.4;
+    const x = rect.left - rootRect.left + padLeft;
+    const y = rect.top - rootRect.top + padTop;
+    const lines = wrapLines(ctx, text, innerWidth);
+    lines.forEach((line, i) => {
+      const lineY = y + i * lineHeight;
+      if (lineY > rootRect.height) return;
+      let lineX = x;
+      if (cs.textAlign === "center") {
+        lineX = x + (innerWidth - ctx.measureText(line).width) / 2;
+      } else if (cs.textAlign === "right") {
+        lineX = x + innerWidth - ctx.measureText(line).width;
+      }
+      ctx.fillText(line, lineX, lineY);
+    });
+    if (lines.length) {
+      painted++;
+      hiddenNodes.push(el);
+    }
+  }
+  if (!painted) return null;
+  const texture = gl.createTexture();
+  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
+  );
+  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);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  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";
+  return () => {
+    for (const { el, prev } of restore) el.style.color = prev;
+  };
+};
+
+// src/webgl/index.ts
+var DEFAULT_JELLY = 0.5;
+var DEFAULT_SHADOW = 1;
+var DEFAULT_SHEEN = 0.35;
+var DEFAULT_GLASS = 0.6;
+var MAX_BEND_PX = 22;
+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 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];
+};
+var parseRadius = (value) => {
+  const n = parseFloat(value);
+  return Number.isFinite(n) ? n : 0;
+};
+var webglRenderer = (options = {}) => ({
+  name: "webgl-renderer",
+  stage: "post",
+  install: (ctx) => {
+    const bail = (reason) => {
+      options.onUnsupported?.(reason);
+    };
+    if (typeof document === "undefined" || typeof window === "undefined") {
+      bail("no-document");
+      return;
+    }
+    if (prefersReducedMotion()) {
+      bail("reduced-motion");
+      return;
+    }
+    if (!hasWebGL()) {
+      bail("no-webgl");
+      return;
+    }
+    const element = ctx.element;
+    const jelly = options.jelly ?? DEFAULT_JELLY;
+    const shadowStrength = options.shadow ?? DEFAULT_SHADOW;
+    const sheenStrength = options.sheen ?? DEFAULT_SHEEN;
+    const glassStrength = options.glass ?? DEFAULT_GLASS;
+    const liftContent = options.liftContent !== false;
+    let handle = null;
+    let program = null;
+    let frameId = null;
+    let running = false;
+    let bend = 0;
+    let disposed = false;
+    let capture = null;
+    let releaseText = null;
+    const painted = {
+      background: element.style.background,
+      boxShadow: element.style.boxShadow
+    };
+    const readSurfaceStyle = () => {
+      const cs = getComputedStyle(element);
+      return {
+        color: parseColor(cs.backgroundColor),
+        radius: parseRadius(cs.borderTopLeftRadius)
+      };
+    };
+    let surfaceStyle = readSurfaceStyle();
+    const restoreDom = () => {
+      element.style.background = painted.background;
+      element.style.boxShadow = painted.boxShadow;
+      element.removeAttribute("data-bs-webgl");
+    };
+    const suppressDomPaint = () => {
+      element.setAttribute("data-bs-webgl", "on");
+      element.style.background = "transparent";
+      element.style.boxShadow = "none";
+    };
+    const teardown = (reason) => {
+      if (disposed) return;
+      disposed = true;
+      running = false;
+      if (frameId !== null) {
+        cancelAnimationFrame(frameId);
+        frameId = null;
+      }
+      releaseCapture();
+      program?.destroy();
+      program = null;
+      handle?.destroy();
+      handle = null;
+      restoreDom();
+      if (reason) bail(reason);
+    };
+    handle = createGLHandle(() => teardown("context-lost"));
+    if (!handle) {
+      bail("no-webgl");
+      return;
+    }
+    program = createSurfaceProgram(handle.gl);
+    if (!program) {
+      handle.destroy();
+      handle = null;
+      bail("no-webgl");
+      return;
+    }
+    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
+      };
+    };
+    const dprOf = () => options.dpr ?? window.devicePixelRatio ?? 1;
+    const releaseCapture = () => {
+      releaseText?.();
+      releaseText = null;
+      if (capture && handle) handle.gl.deleteTexture(capture.texture);
+      capture = null;
+    };
+    const takeCapture = () => {
+      if (!liftContent || disposed || !handle || capture) return;
+      const next = captureContent(handle.gl, element, dprOf());
+      if (!next) return;
+      capture = next;
+      releaseText = hideCapturedText(next.hiddenNodes);
+    };
+    const paint = () => {
+      if (disposed || !handle || !program) return;
+      const frame = readFrame();
+      if (!frame) return;
+      const dpr = dprOf();
+      resizeDrawingBuffer(handle, window.innerWidth, window.innerHeight, dpr);
+      const motion = Math.min(1, Math.abs(bend) / MAX_BEND_PX);
+      program.draw(frame, {
+        bend,
+        dpr,
+        sheen: sheenStrength,
+        glass: glassStrength * motion,
+        content: capture?.texture ?? null
+      });
+    };
+    const tick = () => {
+      if (disposed) return;
+      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) {
+        bend = 0;
+        releaseCapture();
+        paint();
+        running = false;
+        frameId = null;
+        return;
+      }
+      frameId = requestAnimationFrame(tick);
+    };
+    const wake = () => {
+      if (disposed || running) return;
+      running = true;
+      frameId = requestAnimationFrame(tick);
+    };
+    ctx.addTeardown(
+      ctx.on("drag", (payload) => {
+        const velocity = payload.delta ?? 0;
+        bend = Math.max(
+          -MAX_BEND_PX,
+          Math.min(MAX_BEND_PX, velocity * jelly * 0.35)
+        );
+        wake();
+      })
+    );
+    ctx.addTeardown(
+      ctx.on("dragstart", () => {
+        takeCapture();
+        wake();
+      })
+    );
+    ctx.addTeardown(ctx.on("dragend", wake));
+    ctx.addTeardown(ctx.on("progress", wake));
+    ctx.addTeardown(ctx.on("snap", wake));
+    const contentObserver = new MutationObserver(() => {
+      if (!capture) return;
+      releaseCapture();
+      takeCapture();
+    });
+    contentObserver.observe(element, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    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 onResize = () => {
+      if (disposed) return;
+      refreshSurfaceStyle();
+      paint();
+    };
+    window.addEventListener("resize", onResize, { passive: true });
+    window.addEventListener("scroll", onResize, { passive: true });
+    paint();
+    return () => {
+      contentObserver.disconnect();
+      window.removeEventListener("resize", onResize);
+      window.removeEventListener("scroll", onResize);
+      teardown();
+    };
+  }
+});
+
+export { webglRenderer };
+//# sourceMappingURL=webgl.js.map
+//# sourceMappingURL=webgl.js.map