@surdeddd/bottom-sheet 0.14.0 → 0.20.0

package/dist/webgl.js

@@ -271,6 +271,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 +340,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 +384,7 @@ var captureContent = (gl, root, dpr) => {
     });
     if (lines.length) {
       painted++;
-      hiddenNodes.push(el);
+      if (!boxed) hiddenNodes.push(el);
     }
   }
   if (!painted) return null;
@@ -327,14 +392,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 +412,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;
+    }
   };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surdeddd/bottom-sheet",
-  "version": "0.14.0",
+  "version": "0.20.0",
   "description": "Universal, headless bottom sheet — framework-agnostic core with React, Vue 3, Svelte, Solid, Qwik, Preact, Lit and Custom Element adapters. Pointer Events, snap points, momentum, a11y, SSR-safe.",
   "type": "module",
   "license": "MIT",
@@ -216,37 +216,37 @@
     {
       "name": "core (engine + types)",
       "path": "dist/index.js",
-      "limit": "21.5 KB",
+      "limit": "21.74 KB",
       "gzip": true
     },
     {
       "name": "react adapter",
       "path": "dist/react.js",
-      "limit": "29 KB",
+      "limit": "29.16 KB",
       "gzip": true
     },
     {
       "name": "vue adapter",
       "path": "dist/vue.js",
-      "limit": "24.5 KB",
+      "limit": "24.98 KB",
       "gzip": true
     },
     {
       "name": "svelte adapter",
       "path": "dist/svelte.js",
-      "limit": "24.5 KB",
+      "limit": "24.59 KB",
       "gzip": true
     },
     {
       "name": "solid adapter",
       "path": "dist/solid.js",
-      "limit": "23 KB",
+      "limit": "23.23 KB",
       "gzip": true
     },
     {
       "name": "qwik adapter",
       "path": "dist/qwik.js",
-      "limit": "23 KB",
+      "limit": "23.25 KB",
       "gzip": true
     },
     {
@@ -261,13 +261,13 @@
     {
       "name": "web component (self-contained)",
       "path": "dist/element.js",
-      "limit": "28 KB",
+      "limit": "28.35 KB",
       "gzip": true
     },
     {
       "name": "web component (IIFE / CDN)",
       "path": "dist/element.iife.global.js",
-      "limit": "27.5 KB",
+      "limit": "27.9 KB",
       "gzip": true
     },
     {
@@ -285,7 +285,7 @@
     {
       "name": "slim core (subpath, no optional features)",
       "path": "dist/core.js",
-      "limit": "19.5 KB",
+      "limit": "19.85 KB",
       "gzip": true
     },
     {
@@ -297,7 +297,7 @@
     {
       "name": "webgl renderer (subpath)",
       "path": "dist/webgl.js",
-      "limit": "4.5 KB",
+      "limit": "5 KB",
       "gzip": true
     }
   ],
@@ -380,45 +380,45 @@
     "seroval-plugins": "^1.5.6"
   },
   "devDependencies": {
-    "@arethetypeswrong/cli": "^0.18.3",
-    "@axe-core/playwright": "^4.11.2",
-    "@builder.io/qwik": "^1.19.2",
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@axe-core/playwright": "^4.12.1",
+    "@builder.io/qwik": "^1.20.0",
     "@lhci/cli": "^0.15.1",
-    "@playwright/test": "^1.59.1",
+    "@playwright/test": "^1.62.1",
     "@size-limit/preset-small-lib": "^12.1.0",
-    "@sveltejs/vite-plugin-svelte": "^4.0.4",
-    "@types/node": "^20.11.0",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@types/node": "^20.19.43",
+    "@types/react": "^18.3.31",
+    "@types/react-dom": "^18.3.7",
     "@types/three": "^0.185.1",
-    "@vitejs/plugin-react": "^4.2.0",
-    "@vitejs/plugin-vue": "^5.0.0",
-    "@vitest/coverage-v8": "^1.2.0",
+    "@vitejs/plugin-react": "^5.2.0",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vitest/coverage-v8": "^4.1.10",
     "esbuild-plugin-solid": "^0.6.0",
-    "esbuild-svelte": "^0.9.4",
-    "fast-check": "^4.7.0",
-    "happy-dom": "^13.3.0",
+    "esbuild-svelte": "0.9.4",
+    "fast-check": "^4.9.0",
+    "happy-dom": "^20.11.1",
     "husky": "^9.1.7",
-    "lit": "^3.3.2",
-    "motion": "^12.42.2",
+    "lit": "^3.3.3",
+    "motion": "^12.43.0",
     "patch-package": "^8.0.1",
-    "publint": "^0.3.21",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rolldown": "^1.0.0-rc.18",
+    "publint": "^0.3.22",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rolldown": "^1.2.1",
     "size-limit": "^12.1.0",
-    "solid-js": "^1.9.12",
-    "svelte": "^5.55.5",
+    "solid-js": "^1.9.14",
+    "svelte": "^5.56.8",
     "three": "^0.185.1",
-    "tsup": "^8.0.1",
+    "tsup": "^8.5.1",
     "typedoc": "^0.28.20",
     "typescript": "^5.9.3",
     "unplugin-vue": "^7.2.0",
-    "vite": "^5.0.10",
-    "vite-plugin-solid": "^2.11.12",
-    "vitest": "^1.6.1",
-    "vue": "^3.4.0",
-    "vue-tsc": "^1.8.27"
+    "vite": "^7.3.6",
+    "vite-plugin-solid": "^2.11.14",
+    "vitest": "^4.1.10",
+    "vue": "^3.5.40",
+    "vue-tsc": "^3.3.9"
   },
   "engines": {
     "node": ">=20"