@pixldocs/canvas-renderer 0.5.44 → 0.5.46

package/dist/index.d.ts

@@ -221,7 +221,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.44";
+export declare const PACKAGE_VERSION = "0.5.46";
 
 export declare interface PageSettings {
     backgroundColor?: string;

package/dist/index.js

@@ -4919,7 +4919,8 @@ function applyTextBackground(obj, cfg) {
       const bgPath = hasBg ? `<path d="${bgD}" fill="${escapeXmlAttr(bgFill)}" />` : "";
       svg = svg.replace(/style="[^"]*filter:\s*url\([^)]+\)[^"]*"/i, "");
       svg = svg.replace(/<filter[\s\S]*?<\/filter>/gi, "");
-      let shadowLayer = "";
+      let bgShadowLayer = "";
+      let textShadowLayer = "";
       if (hasShadow) {
         const ox = Number(shadow.offsetX ?? 0) || 0;
         const oy = Number(shadow.offsetY ?? 0) || 0;
@@ -4928,41 +4929,25 @@ function applyTextBackground(obj, cfg) {
         const shadowBgPath = hasBg ? `<path d="${bgD}" fill="${escapeXmlAttr(shadowColor)}" />` : "";
         const inner = extractGInnerMarkup(svg);
         const recoloredText = recolorSvgFills(inner, shadowColor);
-        const layers = [];
+        const bgLayers = [];
+        const textLayers = [];
+        const pushShadowPass = (tx, ty, opacity) => {
+          const attrs = `transform="translate(${tx.toFixed(3)} ${ty.toFixed(3)})"${opacity ? ` opacity="${opacity}"` : ""}`;
+          if (shadowBgPath) bgLayers.push(`<g ${attrs}>${shadowBgPath}</g>`);
+          if (recoloredText) textLayers.push(`<g ${attrs}>${recoloredText}</g>`);
+        };
         if (blur > 0) {
-          const ringCount = Math.min(6, Math.max(2, Math.round(blur / 2)));
-          for (let i = 1; i <= ringCount; i++) {
-            const t = i / ringCount;
-            const dist = blur * t * 0.6;
-            const op = (0.18 * (1 - t * 0.7)).toFixed(3);
-            const ringOffsets = [
-              [dist, 0],
-              [-dist, 0],
-              [0, dist],
-              [0, -dist],
-              [dist * 0.7, dist * 0.7],
-              [-dist * 0.7, dist * 0.7],
-              [dist * 0.7, -dist * 0.7],
-              [-dist * 0.7, -dist * 0.7]
-            ];
-            for (const [dx, dy] of ringOffsets) {
-              layers.push(
-                `<g transform="translate(${(ox + dx).toFixed(3)} ${(oy + dy).toFixed(3)})" opacity="${op}">${shadowBgPath}${recoloredText}</g>`
-              );
-            }
+          for (const pass of buildNormalizedShadowPasses(blur)) {
+            pushShadowPass(ox + pass.dx, oy + pass.dy, pass.opacity);
           }
-          layers.push(
-            `<g transform="translate(${ox.toFixed(3)} ${oy.toFixed(3)})" opacity="0.25">${shadowBgPath}${recoloredText}</g>`
-          );
         } else {
-          layers.push(
-            `<g transform="translate(${ox.toFixed(3)} ${oy.toFixed(3)})">${shadowBgPath}${recoloredText}</g>`
-          );
+          pushShadowPass(ox, oy);
         }
-        shadowLayer = layers.join("");
+        bgShadowLayer = bgLayers.join("");
+        textShadowLayer = textLayers.join("");
       }
       const openTagMatch = svg.match(/^\s*<g\b[^>]*>/);
-      const inserted = shadowLayer + bgPath;
+      const inserted = bgShadowLayer + bgPath + textShadowLayer;
       if (openTagMatch) {
         const openTag = openTagMatch[0];
         return svg.replace(openTag, openTag + inserted);
@@ -4990,6 +4975,36 @@ function recolorSvgFills(svg, color) {
   );
   return out;
 }
+function buildNormalizedShadowPasses(blur) {
+  const safeBlur = Math.max(0, Number(blur) || 0);
+  const ringCount = Math.min(5, Math.max(2, Math.round(safeBlur / 5)));
+  const targetOpacity = Math.max(0.16, Math.min(0.38, 0.46 - safeBlur * 0.01));
+  const weighted = [
+    { dx: 0, dy: 0, weight: 0.7 }
+  ];
+  for (let i = 1; i <= ringCount; i++) {
+    const t = i / ringCount;
+    const dist = safeBlur * t * 0.42;
+    const weight = Math.exp(-2.4 * t * t);
+    const diag = dist * 0.7071;
+    weighted.push(
+      { dx: dist, dy: 0, weight },
+      { dx: -dist, dy: 0, weight },
+      { dx: 0, dy: dist, weight },
+      { dx: 0, dy: -dist, weight },
+      { dx: diag, dy: diag, weight: weight * 0.72 },
+      { dx: -diag, dy: diag, weight: weight * 0.72 },
+      { dx: diag, dy: -diag, weight: weight * 0.72 },
+      { dx: -diag, dy: -diag, weight: weight * 0.72 }
+    );
+  }
+  const totalWeight = weighted.reduce((sum, pass) => sum + pass.weight, 0) || 1;
+  return weighted.map((pass) => ({
+    dx: pass.dx,
+    dy: pass.dy,
+    opacity: Math.max(3e-3, targetOpacity * pass.weight / totalWeight).toFixed(4)
+  }));
+}
 function buildRoundedRectPathD(x, y, w, h, rTL, rTR, rBR, rBL) {
   const maxR = Math.min(w, h) / 2;
   const tl = Math.min(Math.max(0, rTL), maxR);
@@ -12341,7 +12356,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.44";
+const PACKAGE_VERSION = "0.5.46";
 let __underlineFixInstalled = false;
 function installUnderlineFix(fab) {
   var _a;