@pixldocs/canvas-renderer 0.5.43 → 0.5.44

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.43";
+export declare const PACKAGE_VERSION = "0.5.44";
 
 export declare interface PageSettings {
     backgroundColor?: string;

package/dist/index.js

@@ -4889,40 +4889,107 @@ function applyTextBackground(obj, cfg) {
   const originalToSVG = (_a = obj.toSVG) == null ? void 0 : _a.bind(obj);
   if (typeof originalToSVG === "function") {
     obj.toSVG = function(reviver) {
-      const svg = originalToSVG(reviver);
+      let svg = originalToSVG(reviver);
       const bg = this[PD_BG_KEY];
-      if (!hasTextBackground(bg)) return svg;
+      const shadow = this.shadow;
+      const hasBg = hasTextBackground(bg);
+      const hasShadow = !!shadow && !!shadow.color && shadow.color !== "transparent";
+      if (!hasBg && !hasShadow) return svg;
       const w = this.width ?? 0;
       const h = this.height ?? 0;
-      const pT = Math.max(0, Number(bg.padTop ?? 0));
-      const pR = Math.max(0, Number(bg.padRight ?? 0));
-      const pB = Math.max(0, Number(bg.padBottom ?? 0));
-      const pL = Math.max(0, Number(bg.padLeft ?? 0));
+      const pT = Math.max(0, Number((bg == null ? void 0 : bg.padTop) ?? 0));
+      const pR = Math.max(0, Number((bg == null ? void 0 : bg.padRight) ?? 0));
+      const pB = Math.max(0, Number((bg == null ? void 0 : bg.padBottom) ?? 0));
+      const pL = Math.max(0, Number((bg == null ? void 0 : bg.padLeft) ?? 0));
       const x = -w / 2 - pL;
       const y = -h / 2 - pT;
       const bgW = w + pL + pR;
       const bgH = h + pT + pB;
-      const d = buildRoundedRectPathD(
+      const bgD = buildRoundedRectPathD(
         x,
         y,
         bgW,
         bgH,
-        bg.rxTL ?? 0,
-        bg.rxTR ?? 0,
-        bg.rxBR ?? 0,
-        bg.rxBL ?? 0
+        (bg == null ? void 0 : bg.rxTL) ?? 0,
+        (bg == null ? void 0 : bg.rxTR) ?? 0,
+        (bg == null ? void 0 : bg.rxBR) ?? 0,
+        (bg == null ? void 0 : bg.rxBL) ?? 0
       );
-      const fill = bg.color;
-      const bgPath = `<path d="${d}" fill="${escapeXmlAttr(fill)}" />`;
+      const bgFill = (bg == null ? void 0 : bg.color) || "";
+      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 = "";
+      if (hasShadow) {
+        const ox = Number(shadow.offsetX ?? 0) || 0;
+        const oy = Number(shadow.offsetY ?? 0) || 0;
+        const blur = Math.max(0, Number(shadow.blur ?? 0));
+        const shadowColor = String(shadow.color);
+        const shadowBgPath = hasBg ? `<path d="${bgD}" fill="${escapeXmlAttr(shadowColor)}" />` : "";
+        const inner = extractGInnerMarkup(svg);
+        const recoloredText = recolorSvgFills(inner, shadowColor);
+        const layers = [];
+        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>`
+              );
+            }
+          }
+          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>`
+          );
+        }
+        shadowLayer = layers.join("");
+      }
       const openTagMatch = svg.match(/^\s*<g\b[^>]*>/);
+      const inserted = shadowLayer + bgPath;
       if (openTagMatch) {
         const openTag = openTagMatch[0];
-        return svg.replace(openTag, openTag + bgPath);
+        return svg.replace(openTag, openTag + inserted);
       }
-      return `<g>${bgPath}${svg}</g>`;
+      return `<g>${inserted}${svg}</g>`;
     };
   }
 }
+function recolorSvgFills(svg, color) {
+  const safe = escapeXmlAttr(color);
+  let out = svg.replace(
+    /(<(?:text|tspan|path|rect)\b[^>]*?\sfill=")([^"]*)("[^>]*>)/gi,
+    (_m, pre, val, post) => {
+      const v = val.trim().toLowerCase();
+      if (v === "none" || v === "transparent") return pre + val + post;
+      return pre + safe + post;
+    }
+  );
+  out = out.replace(
+    /(<(?:text|tspan|path|rect)\b[^>]*?\sstyle=")([^"]*)("[^>]*>)/gi,
+    (_m, pre, styleVal, post) => {
+      const replaced = styleVal.replace(/fill\s*:\s*[^;"]+/gi, `fill: ${color}`);
+      return pre + replaced + post;
+    }
+  );
+  return out;
+}
 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);
@@ -4946,6 +5013,13 @@ function buildRoundedRectPathD(x, y, w, h, rTL, rTR, rBR, rBL) {
 function escapeXmlAttr(s) {
   return String(s).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
+function extractGInnerMarkup(markup) {
+  const openMatch = markup.match(/^\s*<g\b[^>]*>/);
+  if (!openMatch) return markup;
+  const closeIdx = markup.lastIndexOf("</g>");
+  if (closeIdx <= openMatch[0].length) return markup;
+  return markup.slice(openMatch[0].length, closeIdx);
+}
 const TRIANGLE_STROKE_MITER_LIMIT = 1e6;
 const toSafeNumber = (value, fallback = 0) => Number.isFinite(value) ? Math.max(0, Number(value)) : fallback;
 function normalizeShapeType(shapeType) {
@@ -12267,7 +12341,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.43";
+const PACKAGE_VERSION = "0.5.44";
 let __underlineFixInstalled = false;
 function installUnderlineFix(fab) {
   var _a;