@pixldocs/canvas-renderer 0.5.102 → 0.5.104

package/dist/index.d.ts

@@ -256,7 +256,7 @@ export declare function normalizeFontFamily(fontStack: string): string;
  * Package version banner. Bump alongside package.json so we can confirm
  * (via browser:log) that the deployed bundle matches the expected build.
  */
-export declare const PACKAGE_VERSION = "0.5.101";
+export declare const PACKAGE_VERSION = "0.5.104";
 
 export declare interface PageSettings {
     backgroundColor?: string;

package/dist/index.js

@@ -6248,9 +6248,10 @@ 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 innerAlpha = (t) => {
-      const keepProgress = Math.pow(t, hardness);
+      const keepProgress = Math.pow(t, gamma);
       const erase = (1 - amount) * (1 - keepProgress);
       return 1 - erase;
     };
@@ -6286,16 +6287,6 @@ 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);
-      mctx.fillStyle = "rgba(0,0,0,0)";
-      mctx.globalCompositeOperation = "copy";
-      if (side === "top") mctx.fillRect(0, 0, mask.width, edgePx);
-      if (side === "bottom") mctx.fillRect(0, mask.height - edgePx, mask.width, edgePx);
-      if (side === "left") mctx.fillRect(0, 0, edgePx, mask.height);
-      if (side === "right") mctx.fillRect(mask.width - edgePx, 0, edgePx, mask.height);
-      mctx.globalCompositeOperation = "source-over";
-    }
     ctx.globalCompositeOperation = "destination-in";
     ctx.drawImage(mask, 0, 0);
     ctx.globalCompositeOperation = "source-over";
@@ -9710,11 +9701,12 @@ const PageCanvas = forwardRef(
             ctx.globalCompositeOperation = "destination-out";
             let gradient;
             const eraseAtEdge = 1 - amount;
-            const STOPS = 24;
+            const STOPS = 64;
+            const gamma = 1 / hardness;
             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})`);
               }
@@ -9725,28 +9717,24 @@ const PageCanvas = 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));
             } 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));
             } 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);
             } 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.restore();
           };
@@ -13416,7 +13404,7 @@ function PixldocsPreview(props) {
     !canvasSettled && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) })
   ] });
 }
-const PACKAGE_VERSION = "0.5.101";
+const PACKAGE_VERSION = "0.5.104";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;