@pixldocs/canvas-renderer 0.5.102 → 0.5.103

package/dist/index.cjs

@@ -6267,9 +6267,11 @@ function bakeEdgeFade(source, fade) {
     mctx.fillRect(0, 0, mask.width, mask.height);
     let g;
     let x = 0, y = 0, rectW = mask.width, rectH = mask.height;
-    const STOPS = 24;
+    const STOPS = 64;
+    const gamma = 1 / hardness;
+    const seamGuardPx = 2;
     const innerAlpha = (t) => {
-      const keepProgress = Math.pow(t, hardness);
+      const keepProgress = Math.pow(t, gamma);
       const erase = (1 - amount) * (1 - keepProgress);
       return 1 - erase;
     };
@@ -6305,8 +6307,8 @@ function bakeEdgeFade(source, fade) {
     }
     mctx.fillStyle = g;
     mctx.fillRect(x, y, rectW, rectH);
-    if (amount <= 1e-3) {
-      const edgePx = Math.min(2, side === "top" || side === "bottom" ? rectH : rectW);
+    {
+      const edgePx = Math.min(seamGuardPx, side === "top" || side === "bottom" ? rectH : rectW);
       mctx.fillStyle = "rgba(0,0,0,0)";
       mctx.globalCompositeOperation = "copy";
       if (side === "top") mctx.fillRect(0, 0, mask.width, edgePx);
@@ -9729,11 +9731,13 @@ const PageCanvas = react.forwardRef(
             ctx.globalCompositeOperation = "destination-out";
             let gradient;
             const eraseAtEdge = 1 - amount;
-            const STOPS = 24;
+            const STOPS = 64;
+            const gamma = 1 / hardness;
+            const seamGuardPx = 2;
             const addStops = (g) => {
               for (let i = 0; i <= STOPS; i++) {
                 const t = i / STOPS;
-                const keepProgress = Math.pow(t, hardness);
+                const keepProgress = Math.pow(t, gamma);
                 const a = eraseAtEdge * (1 - keepProgress);
                 g.addColorStop(t, `rgba(0,0,0,${a})`);
               }
@@ -9744,28 +9748,32 @@ const PageCanvas = react.forwardRef(
               addStops(gradient);
               ctx.fillStyle = gradient;
               ctx.fillRect(x, y, w, band);
-              if (amount <= 1e-3) ctx.fillRect(x, y, w, Math.min(2, band));
+              ctx.fillStyle = "rgba(0,0,0,1)";
+              ctx.fillRect(x, y, w, Math.min(seamGuardPx, band));
             } else if (side === "bottom") {
               const band = Math.max(1, h * size);
               gradient = ctx.createLinearGradient(0, y + h, 0, y + h - band);
               addStops(gradient);
               ctx.fillStyle = gradient;
               ctx.fillRect(x, y + h - band, w, band);
-              if (amount <= 1e-3) ctx.fillRect(x, y + h - Math.min(2, band), w, Math.min(2, band));
+              ctx.fillStyle = "rgba(0,0,0,1)";
+              ctx.fillRect(x, y + h - Math.min(seamGuardPx, band), w, Math.min(seamGuardPx, band));
             } else if (side === "left") {
               const band = Math.max(1, w * size);
               gradient = ctx.createLinearGradient(x, 0, x + band, 0);
               addStops(gradient);
               ctx.fillStyle = gradient;
               ctx.fillRect(x, y, band, h);
-              if (amount <= 1e-3) ctx.fillRect(x, y, Math.min(2, band), h);
+              ctx.fillStyle = "rgba(0,0,0,1)";
+              ctx.fillRect(x, y, Math.min(seamGuardPx, band), h);
             } else {
               const band = Math.max(1, w * size);
               gradient = ctx.createLinearGradient(x + w, 0, x + w - band, 0);
               addStops(gradient);
               ctx.fillStyle = gradient;
               ctx.fillRect(x + w - band, y, band, h);
-              if (amount <= 1e-3) ctx.fillRect(x + w - Math.min(2, band), y, Math.min(2, band), h);
+              ctx.fillStyle = "rgba(0,0,0,1)";
+              ctx.fillRect(x + w - Math.min(seamGuardPx, band), y, Math.min(seamGuardPx, band), h);
             }
             ctx.restore();
           };
@@ -13435,7 +13443,7 @@ function PixldocsPreview(props) {
     !canvasSettled && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) })
   ] });
 }
-const PACKAGE_VERSION = "0.5.101";
+const PACKAGE_VERSION = "0.5.103";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;