@pixldocs/canvas-renderer 0.5.40 → 0.5.42

package/dist/{canvasWatermark-DAZIQ_IR.cjs → canvasWatermark-B0ab38Ok.cjs}

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const WATERMARK_ID_PREFIX = "__wm_";
+const DEFAULT_WATERMARK_OPACITY = 0.14;
+const DEFAULT_WATERMARK_FONT_SIZE = 18;
+const DEFAULT_WATERMARK_ANGLE = -30;
 function getWatermarkText() {
   try {
     const host = window.location.hostname;
@@ -54,11 +57,12 @@ function getPageBgColor(page, canvasBg) {
   }
   return canvasBg;
 }
-function generateWatermarkElements(canvasWidth, canvasHeight, wmColor) {
+function generateWatermarkElements(canvasWidth, canvasHeight, wmColor, options = {}) {
   const elements = [];
-  const text = getWatermarkText();
-  const fontSize = 18;
-  const angle = -30;
+  const text = options.text ?? getWatermarkText();
+  const fontSize = options.fontSize ?? DEFAULT_WATERMARK_FONT_SIZE;
+  const angle = options.angle ?? DEFAULT_WATERMARK_ANGLE;
+  const opacity = options.opacity ?? DEFAULT_WATERMARK_OPACITY;
   const estimatedTextWidth = text.length * fontSize * 0.55;
   const spacingX = Math.max(160, estimatedTextWidth + 30);
   const spacingY = 90;
@@ -85,7 +89,7 @@ function generateWatermarkElements(canvasWidth, canvasHeight, wmColor) {
         selectable: false,
         locked: true,
         visible: true,
-        opacity: 0.14,
+        opacity,
         scaleX: 1,
         scaleY: 1,
         letterSpacing: 4
@@ -94,7 +98,7 @@ function generateWatermarkElements(canvasWidth, canvasHeight, wmColor) {
   }
   return elements;
 }
-function injectWatermark(config) {
+function injectWatermark(config, options = {}) {
   var _a, _b, _c;
   const canvasWidth = ((_a = config.canvas) == null ? void 0 : _a.width) || 612;
   const canvasHeight = ((_b = config.canvas) == null ? void 0 : _b.height) || 792;
@@ -104,7 +108,7 @@ function injectWatermark(config) {
     pages: config.pages.map((page) => {
       const pageBg = getPageBgColor(page, canvasBg);
       const wmColor = getWatermarkColor(pageBg);
-      const watermarkElements = generateWatermarkElements(canvasWidth, canvasHeight, wmColor);
+      const watermarkElements = generateWatermarkElements(canvasWidth, canvasHeight, wmColor, options);
       return {
         ...page,
         children: [
@@ -116,4 +120,4 @@ function injectWatermark(config) {
   };
 }
 exports.injectWatermark = injectWatermark;
-//# sourceMappingURL=canvasWatermark-DAZIQ_IR.cjs.map
+//# sourceMappingURL=canvasWatermark-B0ab38Ok.cjs.map

package/dist/canvasWatermark-B0ab38Ok.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasWatermark-B0ab38Ok.cjs","sources":["../../../src/lib/canvasWatermark.ts"],"sourcesContent":["/**\n * Injects diagonal \"PixlDocs\" watermark text elements into a TemplateConfig's pages.\n * The watermark elements are rendered as actual canvas text objects,\n * making them impossible to remove via browser inspect.\n */\n\nimport type { TemplateConfig, CanvasElement } from '@/types/editor';\n\nconst WATERMARK_ID_PREFIX = '__wm_';\n\n/** Optional overrides for watermark appearance. */\nexport interface WatermarkOptions {\n  /** Override the watermark text. Defaults to domain-based ('pixldocs.com' / 'biomaker.app'). */\n  text?: string;\n  /** Opacity 0–1. Default: 0.14 */\n  opacity?: number;\n  /** Font size in px. Default: 18 */\n  fontSize?: number;\n  /** Rotation angle in degrees. Default: -30 */\n  angle?: number;\n}\n\nconst DEFAULT_WATERMARK_OPACITY = 0.14;\nconst DEFAULT_WATERMARK_FONT_SIZE = 18;\nconst DEFAULT_WATERMARK_ANGLE = -30;\n\n/** Determine watermark text based on current domain */\nfunction getWatermarkText(): string {\n  try {\n    const host = window.location.hostname;\n    if (host.includes('biomaker')) return 'biomaker.app';\n  } catch {}\n  return 'pixldocs.com';\n}\n\n/** Parse a hex/rgb color to luminance (0=black, 1=white) */\nfunction getLuminance(color: string | undefined): number {\n  if (!color || color === 'transparent' || color === 'none') return 1; // assume light\n  let r = 255, g = 255, b = 255;\n  if (color.startsWith('#')) {\n    const hex = color.slice(1);\n    const full = hex.length === 3 ? hex.split('').map(c => c + c).join('') : hex;\n    const n = parseInt(full, 16);\n    r = (n >> 16) & 255;\n    g = (n >> 8) & 255;\n    b = n & 255;\n  } else {\n    const m = color.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/);\n    if (m) { r = +m[1]; g = +m[2]; b = +m[3]; }\n  }\n  return (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n}\n\n/** Pick watermark color that contrasts with page background */\nfunction getWatermarkColor(bgColor: string | undefined): string {\n  const lum = getLuminance(bgColor);\n  // Dark bg → light watermark, Light bg → dark watermark\n  return lum < 0.45 ? '#cccccc' : '#808080';\n}\n\n/** Find the dominant background color of a page */\nfunction getPageBgColor(page: { children?: any[]; settings?: { backgroundColor?: string } }, canvasBg?: string): string | undefined {\n  // 1. Check page-level settings (theme-applied bg lives here)\n  const settingsBg = page.settings?.backgroundColor;\n  if (settingsBg && settingsBg !== 'transparent' && settingsBg !== 'none') {\n    return settingsBg;\n  }\n  // 2. Check first background shape fill\n  const children = page.children || [];\n  for (const child of children) {\n    if (child.type === 'shape' && child.fill && child.fill !== 'transparent' && child.fill !== 'none') {\n      return child.fill;\n    }\n    // Check inside groups (background groups)\n    if (child.children?.length) {\n      for (const gc of child.children) {\n        if (gc.type === 'shape' && gc.fill && gc.fill !== 'transparent' && gc.fill !== 'none') {\n          return gc.fill;\n        }\n      }\n    }\n  }\n  return canvasBg;\n}\n\n/** Generate watermark text elements for a given canvas size */\nfunction generateWatermarkElements(\n  canvasWidth: number,\n  canvasHeight: number,\n  wmColor: string,\n  options: WatermarkOptions = {},\n): CanvasElement[] {\n  const elements: CanvasElement[] = [];\n  const text = options.text ?? getWatermarkText();\n  const fontSize = options.fontSize ?? DEFAULT_WATERMARK_FONT_SIZE;\n  const angle = options.angle ?? DEFAULT_WATERMARK_ANGLE;\n  const opacity = options.opacity ?? DEFAULT_WATERMARK_OPACITY;\n  // Adjust spacing based on text length to prevent overlap\n  const estimatedTextWidth = text.length * fontSize * 0.55;\n  const spacingX = Math.max(160, estimatedTextWidth + 30);\n  const spacingY = 90;\n\n  const startX = -canvasWidth * 0.3;\n  const startY = -canvasHeight * 0.3;\n  const endX = canvasWidth * 1.5;\n  const endY = canvasHeight * 1.5;\n\n  let idx = 0;\n  for (let y = startY; y < endY; y += spacingY) {\n    for (let x = startX; x < endX; x += spacingX) {\n      elements.push({\n        id: `${WATERMARK_ID_PREFIX}${idx++}`,\n        type: 'text',\n        left: x,\n        top: y,\n        width: 200,\n        height: 40,\n        text,\n        fontFamily: 'Montserrat',\n        fontSize,\n        fontWeight: '600',\n        fill: wmColor,\n        angle,\n        selectable: false,\n        locked: true,\n        visible: true,\n        opacity,\n        scaleX: 1,\n        scaleY: 1,\n        letterSpacing: 4,\n      } as CanvasElement);\n    }\n  }\n  return elements;\n}\n\n/**\n * Returns a new config with watermark elements injected into every page.\n * The original config is NOT mutated.\n */\nexport function injectWatermark(\n  config: TemplateConfig,\n  options: WatermarkOptions = {},\n): TemplateConfig {\n  const canvasWidth = config.canvas?.width || 612;\n  const canvasHeight = config.canvas?.height || 792;\n  const canvasBg = (config.canvas as any)?.backgroundColor;\n\n  return {\n    ...config,\n    pages: config.pages.map((page) => {\n      const pageBg = getPageBgColor(page as any, canvasBg);\n      const wmColor = getWatermarkColor(pageBg);\n      const watermarkElements = generateWatermarkElements(canvasWidth, canvasHeight, wmColor, options);\n      return {\n        ...page,\n        children: [\n          ...(page.children || []),\n          ...watermarkElements,\n        ],\n      };\n    }),\n  };\n}\n\n/** Check if an element ID is a watermark element */\nexport function isWatermarkElement(id: string): boolean {\n  return id.startsWith(WATERMARK_ID_PREFIX);\n}\n"],"names":[],"mappings":"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"}

package/dist/{canvasWatermark-CM85x4k7.js → canvasWatermark-pkhacGge.js}

@@ -1,4 +1,7 @@
 const WATERMARK_ID_PREFIX = "__wm_";
+const DEFAULT_WATERMARK_OPACITY = 0.14;
+const DEFAULT_WATERMARK_FONT_SIZE = 18;
+const DEFAULT_WATERMARK_ANGLE = -30;
 function getWatermarkText() {
   try {
     const host = window.location.hostname;
@@ -52,11 +55,12 @@ function getPageBgColor(page, canvasBg) {
   }
   return canvasBg;
 }
-function generateWatermarkElements(canvasWidth, canvasHeight, wmColor) {
+function generateWatermarkElements(canvasWidth, canvasHeight, wmColor, options = {}) {
   const elements = [];
-  const text = getWatermarkText();
-  const fontSize = 18;
-  const angle = -30;
+  const text = options.text ?? getWatermarkText();
+  const fontSize = options.fontSize ?? DEFAULT_WATERMARK_FONT_SIZE;
+  const angle = options.angle ?? DEFAULT_WATERMARK_ANGLE;
+  const opacity = options.opacity ?? DEFAULT_WATERMARK_OPACITY;
   const estimatedTextWidth = text.length * fontSize * 0.55;
   const spacingX = Math.max(160, estimatedTextWidth + 30);
   const spacingY = 90;
@@ -83,7 +87,7 @@ function generateWatermarkElements(canvasWidth, canvasHeight, wmColor) {
         selectable: false,
         locked: true,
         visible: true,
-        opacity: 0.14,
+        opacity,
         scaleX: 1,
         scaleY: 1,
         letterSpacing: 4
@@ -92,7 +96,7 @@ function generateWatermarkElements(canvasWidth, canvasHeight, wmColor) {
   }
   return elements;
 }
-function injectWatermark(config) {
+function injectWatermark(config, options = {}) {
   var _a, _b, _c;
   const canvasWidth = ((_a = config.canvas) == null ? void 0 : _a.width) || 612;
   const canvasHeight = ((_b = config.canvas) == null ? void 0 : _b.height) || 792;
@@ -102,7 +106,7 @@ function injectWatermark(config) {
     pages: config.pages.map((page) => {
       const pageBg = getPageBgColor(page, canvasBg);
       const wmColor = getWatermarkColor(pageBg);
-      const watermarkElements = generateWatermarkElements(canvasWidth, canvasHeight, wmColor);
+      const watermarkElements = generateWatermarkElements(canvasWidth, canvasHeight, wmColor, options);
       return {
         ...page,
         children: [
@@ -116,4 +120,4 @@ function injectWatermark(config) {
 export {
   injectWatermark
 };
-//# sourceMappingURL=canvasWatermark-CM85x4k7.js.map
+//# sourceMappingURL=canvasWatermark-pkhacGge.js.map

package/dist/canvasWatermark-pkhacGge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasWatermark-pkhacGge.js","sources":["../../../src/lib/canvasWatermark.ts"],"sourcesContent":["/**\n * Injects diagonal \"PixlDocs\" watermark text elements into a TemplateConfig's pages.\n * The watermark elements are rendered as actual canvas text objects,\n * making them impossible to remove via browser inspect.\n */\n\nimport type { TemplateConfig, CanvasElement } from '@/types/editor';\n\nconst WATERMARK_ID_PREFIX = '__wm_';\n\n/** Optional overrides for watermark appearance. */\nexport interface WatermarkOptions {\n  /** Override the watermark text. Defaults to domain-based ('pixldocs.com' / 'biomaker.app'). */\n  text?: string;\n  /** Opacity 0–1. Default: 0.14 */\n  opacity?: number;\n  /** Font size in px. Default: 18 */\n  fontSize?: number;\n  /** Rotation angle in degrees. Default: -30 */\n  angle?: number;\n}\n\nconst DEFAULT_WATERMARK_OPACITY = 0.14;\nconst DEFAULT_WATERMARK_FONT_SIZE = 18;\nconst DEFAULT_WATERMARK_ANGLE = -30;\n\n/** Determine watermark text based on current domain */\nfunction getWatermarkText(): string {\n  try {\n    const host = window.location.hostname;\n    if (host.includes('biomaker')) return 'biomaker.app';\n  } catch {}\n  return 'pixldocs.com';\n}\n\n/** Parse a hex/rgb color to luminance (0=black, 1=white) */\nfunction getLuminance(color: string | undefined): number {\n  if (!color || color === 'transparent' || color === 'none') return 1; // assume light\n  let r = 255, g = 255, b = 255;\n  if (color.startsWith('#')) {\n    const hex = color.slice(1);\n    const full = hex.length === 3 ? hex.split('').map(c => c + c).join('') : hex;\n    const n = parseInt(full, 16);\n    r = (n >> 16) & 255;\n    g = (n >> 8) & 255;\n    b = n & 255;\n  } else {\n    const m = color.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/);\n    if (m) { r = +m[1]; g = +m[2]; b = +m[3]; }\n  }\n  return (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n}\n\n/** Pick watermark color that contrasts with page background */\nfunction getWatermarkColor(bgColor: string | undefined): string {\n  const lum = getLuminance(bgColor);\n  // Dark bg → light watermark, Light bg → dark watermark\n  return lum < 0.45 ? '#cccccc' : '#808080';\n}\n\n/** Find the dominant background color of a page */\nfunction getPageBgColor(page: { children?: any[]; settings?: { backgroundColor?: string } }, canvasBg?: string): string | undefined {\n  // 1. Check page-level settings (theme-applied bg lives here)\n  const settingsBg = page.settings?.backgroundColor;\n  if (settingsBg && settingsBg !== 'transparent' && settingsBg !== 'none') {\n    return settingsBg;\n  }\n  // 2. Check first background shape fill\n  const children = page.children || [];\n  for (const child of children) {\n    if (child.type === 'shape' && child.fill && child.fill !== 'transparent' && child.fill !== 'none') {\n      return child.fill;\n    }\n    // Check inside groups (background groups)\n    if (child.children?.length) {\n      for (const gc of child.children) {\n        if (gc.type === 'shape' && gc.fill && gc.fill !== 'transparent' && gc.fill !== 'none') {\n          return gc.fill;\n        }\n      }\n    }\n  }\n  return canvasBg;\n}\n\n/** Generate watermark text elements for a given canvas size */\nfunction generateWatermarkElements(\n  canvasWidth: number,\n  canvasHeight: number,\n  wmColor: string,\n  options: WatermarkOptions = {},\n): CanvasElement[] {\n  const elements: CanvasElement[] = [];\n  const text = options.text ?? getWatermarkText();\n  const fontSize = options.fontSize ?? DEFAULT_WATERMARK_FONT_SIZE;\n  const angle = options.angle ?? DEFAULT_WATERMARK_ANGLE;\n  const opacity = options.opacity ?? DEFAULT_WATERMARK_OPACITY;\n  // Adjust spacing based on text length to prevent overlap\n  const estimatedTextWidth = text.length * fontSize * 0.55;\n  const spacingX = Math.max(160, estimatedTextWidth + 30);\n  const spacingY = 90;\n\n  const startX = -canvasWidth * 0.3;\n  const startY = -canvasHeight * 0.3;\n  const endX = canvasWidth * 1.5;\n  const endY = canvasHeight * 1.5;\n\n  let idx = 0;\n  for (let y = startY; y < endY; y += spacingY) {\n    for (let x = startX; x < endX; x += spacingX) {\n      elements.push({\n        id: `${WATERMARK_ID_PREFIX}${idx++}`,\n        type: 'text',\n        left: x,\n        top: y,\n        width: 200,\n        height: 40,\n        text,\n        fontFamily: 'Montserrat',\n        fontSize,\n        fontWeight: '600',\n        fill: wmColor,\n        angle,\n        selectable: false,\n        locked: true,\n        visible: true,\n        opacity,\n        scaleX: 1,\n        scaleY: 1,\n        letterSpacing: 4,\n      } as CanvasElement);\n    }\n  }\n  return elements;\n}\n\n/**\n * Returns a new config with watermark elements injected into every page.\n * The original config is NOT mutated.\n */\nexport function injectWatermark(\n  config: TemplateConfig,\n  options: WatermarkOptions = {},\n): TemplateConfig {\n  const canvasWidth = config.canvas?.width || 612;\n  const canvasHeight = config.canvas?.height || 792;\n  const canvasBg = (config.canvas as any)?.backgroundColor;\n\n  return {\n    ...config,\n    pages: config.pages.map((page) => {\n      const pageBg = getPageBgColor(page as any, canvasBg);\n      const wmColor = getWatermarkColor(pageBg);\n      const watermarkElements = generateWatermarkElements(canvasWidth, canvasHeight, wmColor, options);\n      return {\n        ...page,\n        children: [\n          ...(page.children || []),\n          ...watermarkElements,\n        ],\n      };\n    }),\n  };\n}\n\n/** Check if an element ID is a watermark element */\nexport function isWatermarkElement(id: string): boolean {\n  return id.startsWith(WATERMARK_ID_PREFIX);\n}\n"],"names":[],"mappings":"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"}

package/dist/index.cjs

@@ -4801,6 +4801,157 @@ function calculateScaleSnapGuides(scalingObj, corner, canvas, canvasWidth, canva
     return true;
   });
 }
+const PD_BG_KEY = "__pdBg";
+const PATCHED_KEY = "__pdBgPatched";
+function extractTextBgConfig(element) {
+  return {
+    color: element.textBgColor,
+    padding: Math.max(0, Number(element.textBgPadding ?? 0)) || 0,
+    rxTL: Math.max(0, Number(element.textBgRxTL ?? 0)) || 0,
+    rxTR: Math.max(0, Number(element.textBgRxTR ?? 0)) || 0,
+    rxBR: Math.max(0, Number(element.textBgRxBR ?? 0)) || 0,
+    rxBL: Math.max(0, Number(element.textBgRxBL ?? 0)) || 0
+  };
+}
+function hasTextBackground(cfg) {
+  if (!cfg) return false;
+  const c = (cfg.color || "").toString().trim().toLowerCase();
+  return !!c && c !== "transparent" && c !== "none" && c !== "rgba(0,0,0,0)";
+}
+function buildTextShadow(element) {
+  const color = element.textShadowColor;
+  const blur = Number(element.textShadowBlur ?? 0);
+  const ox = Number(element.textShadowOffsetX ?? 0);
+  const oy = Number(element.textShadowOffsetY ?? 0);
+  if (!color || color === "transparent") return null;
+  if (blur === 0 && ox === 0 && oy === 0) return null;
+  return new fabric__namespace.Shadow({
+    color,
+    blur: blur || 0,
+    offsetX: ox || 0,
+    offsetY: oy || 0,
+    affectStroke: false,
+    nonScaling: false
+  });
+}
+function buildRoundedRectPath2D(ctx, x, y, w, h, rTL, rTR, rBR, rBL) {
+  const maxR = Math.min(w, h) / 2;
+  const tl = Math.min(Math.max(0, rTL), maxR);
+  const tr = Math.min(Math.max(0, rTR), maxR);
+  const br = Math.min(Math.max(0, rBR), maxR);
+  const bl = Math.min(Math.max(0, rBL), maxR);
+  ctx.beginPath();
+  ctx.moveTo(x + tl, y);
+  ctx.lineTo(x + w - tr, y);
+  if (tr > 0) ctx.quadraticCurveTo(x + w, y, x + w, y + tr);
+  ctx.lineTo(x + w, y + h - br);
+  if (br > 0) ctx.quadraticCurveTo(x + w, y + h, x + w - br, y + h);
+  ctx.lineTo(x + bl, y + h);
+  if (bl > 0) ctx.quadraticCurveTo(x, y + h, x, y + h - bl);
+  ctx.lineTo(x, y + tl);
+  if (tl > 0) ctx.quadraticCurveTo(x, y, x + tl, y);
+  ctx.closePath();
+}
+function applyTextBackground(obj, cfg) {
+  var _a;
+  obj[PD_BG_KEY] = { ...cfg };
+  if (obj[PATCHED_KEY]) return;
+  obj[PATCHED_KEY] = true;
+  const originalRender = obj._render.bind(obj);
+  obj._render = function(ctx) {
+    const bg = this[PD_BG_KEY];
+    if (hasTextBackground(bg)) {
+      const w = this.width ?? 0;
+      const h = this.height ?? 0;
+      const pad = Math.max(0, Number(bg.padding ?? 0));
+      const x = -w / 2 - pad;
+      const y = -h / 2 - pad;
+      const bgW = w + pad * 2;
+      const bgH = h + pad * 2;
+      ctx.save();
+      buildRoundedRectPath2D(
+        ctx,
+        x,
+        y,
+        bgW,
+        bgH,
+        bg.rxTL ?? 0,
+        bg.rxTR ?? 0,
+        bg.rxBR ?? 0,
+        bg.rxBL ?? 0
+      );
+      ctx.fillStyle = bg.color;
+      ctx.fill();
+      ctx.restore();
+    }
+    originalRender(ctx);
+  };
+  const originalToObject = obj.toObject.bind(obj);
+  obj.toObject = function(propertiesToInclude) {
+    const out = originalToObject(propertiesToInclude);
+    const bg = this[PD_BG_KEY];
+    if (hasTextBackground(bg)) {
+      out.__pdBg = { ...bg };
+    }
+    return out;
+  };
+  const originalToSVG = (_a = obj.toSVG) == null ? void 0 : _a.bind(obj);
+  if (typeof originalToSVG === "function") {
+    obj.toSVG = function(reviver) {
+      const svg = originalToSVG(reviver);
+      const bg = this[PD_BG_KEY];
+      if (!hasTextBackground(bg)) return svg;
+      const w = this.width ?? 0;
+      const h = this.height ?? 0;
+      const pad = Math.max(0, Number(bg.padding ?? 0));
+      const x = -w / 2 - pad;
+      const y = -h / 2 - pad;
+      const bgW = w + pad * 2;
+      const bgH = h + pad * 2;
+      const d = buildRoundedRectPathD(
+        x,
+        y,
+        bgW,
+        bgH,
+        bg.rxTL ?? 0,
+        bg.rxTR ?? 0,
+        bg.rxBR ?? 0,
+        bg.rxBL ?? 0
+      );
+      const fill = bg.color;
+      const bgPath = `<path d="${d}" fill="${escapeXmlAttr(fill)}" />`;
+      const openTagMatch = svg.match(/^\s*<g\b[^>]*>/);
+      if (openTagMatch) {
+        const openTag = openTagMatch[0];
+        return svg.replace(openTag, openTag + bgPath);
+      }
+      return `<g>${bgPath}${svg}</g>`;
+    };
+  }
+}
+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);
+  const tr = Math.min(Math.max(0, rTR), maxR);
+  const br = Math.min(Math.max(0, rBR), maxR);
+  const bl = Math.min(Math.max(0, rBL), maxR);
+  const fmt = (n) => Number.isFinite(n) ? Number(n.toFixed(3)) : 0;
+  const parts = [];
+  parts.push(`M ${fmt(x + tl)} ${fmt(y)}`);
+  parts.push(`L ${fmt(x + w - tr)} ${fmt(y)}`);
+  if (tr > 0) parts.push(`Q ${fmt(x + w)} ${fmt(y)} ${fmt(x + w)} ${fmt(y + tr)}`);
+  parts.push(`L ${fmt(x + w)} ${fmt(y + h - br)}`);
+  if (br > 0) parts.push(`Q ${fmt(x + w)} ${fmt(y + h)} ${fmt(x + w - br)} ${fmt(y + h)}`);
+  parts.push(`L ${fmt(x + bl)} ${fmt(y + h)}`);
+  if (bl > 0) parts.push(`Q ${fmt(x)} ${fmt(y + h)} ${fmt(x)} ${fmt(y + h - bl)}`);
+  parts.push(`L ${fmt(x)} ${fmt(y + tl)}`);
+  if (tl > 0) parts.push(`Q ${fmt(x)} ${fmt(y)} ${fmt(x + tl)} ${fmt(y)}`);
+  parts.push("Z");
+  return parts.join(" ");
+}
+function escapeXmlAttr(s) {
+  return String(s).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
 const TRIANGLE_STROKE_MITER_LIMIT = 1e6;
 const toSafeNumber = (value, fallback = 0) => Number.isFinite(value) ? Math.max(0, Number(value)) : fallback;
 function normalizeShapeType(shapeType) {
@@ -5101,6 +5252,9 @@ function createText(element) {
     textbox.setCoords();
   }
   textbox.dirty = true;
+  applyTextBackground(textbox, extractTextBgConfig(element));
+  const shadow = buildTextShadow(element);
+  if (shadow) textbox.set("shadow", shadow);
   return textbox;
 }
 function createLine(element) {
@@ -7713,7 +7867,19 @@ const PageCanvas = react.forwardRef(
                 const resolvedSizeForCompare = (pageChildren == null ? void 0 : pageChildren.length) ? getNodeBounds(element, pageChildren) : { width: typeof element.width === "number" ? element.width : 0, height: typeof element.height === "number" ? element.height : 0 };
                 const fabricText = existingObj.text ?? "";
                 const storeText = element.text ?? "";
-                const otherPropsChanged = Math.abs((existingObj.width ?? 0) - resolvedSizeForCompare.width) > 0.1 || Math.abs((existingObj.height ?? 0) - resolvedSizeForCompare.height) > 0.1 || Math.abs((existingObj.angle ?? 0) - (element.angle ?? 0)) > 0.1 || Math.abs((existingObj.scaleX ?? 1) - (element.scaleX ?? 1)) > 0.01 || Math.abs((existingObj.scaleY ?? 1) - (element.scaleY ?? 1)) > 0.01 || (existingObj.flipX ?? false) !== (element.flipX ?? false) || (existingObj.flipY ?? false) !== (element.flipY ?? false) || fabricText !== storeText || existingObj.fill !== (element.fill ?? "") || existingObj.stroke !== (element.stroke ?? "") || Math.abs((existingObj.strokeWidth ?? 0) - (element.strokeWidth ?? 0)) > 0.01 || Math.abs((existingObj.opacity ?? 1) - (element.opacity ?? 1)) > 0.01 || (existingObj.fontSize ?? 0) !== (element.fontSize ?? 0) || (existingObj.fontFamily ?? "") !== (element.fontFamily ?? "") || // CRITICAL: Detect gradient fill/stroke changes — serialise to JSON for deep comparison
+                const otherPropsChanged = Math.abs((existingObj.width ?? 0) - resolvedSizeForCompare.width) > 0.1 || Math.abs((existingObj.height ?? 0) - resolvedSizeForCompare.height) > 0.1 || Math.abs((existingObj.angle ?? 0) - (element.angle ?? 0)) > 0.1 || Math.abs((existingObj.scaleX ?? 1) - (element.scaleX ?? 1)) > 0.01 || Math.abs((existingObj.scaleY ?? 1) - (element.scaleY ?? 1)) > 0.01 || (existingObj.flipX ?? false) !== (element.flipX ?? false) || (existingObj.flipY ?? false) !== (element.flipY ?? false) || fabricText !== storeText || existingObj.fill !== (element.fill ?? "") || existingObj.stroke !== (element.stroke ?? "") || Math.abs((existingObj.strokeWidth ?? 0) - (element.strokeWidth ?? 0)) > 0.01 || Math.abs((existingObj.opacity ?? 1) - (element.opacity ?? 1)) > 0.01 || (existingObj.fontSize ?? 0) !== (element.fontSize ?? 0) || (existingObj.fontFamily ?? "") !== (element.fontFamily ?? "") || // Detect text background + shadow changes so panel edits flow into Fabric.
+                JSON.stringify({
+                  c: element.textBgColor ?? null,
+                  p: element.textBgPadding ?? 0,
+                  tl: element.textBgRxTL ?? 0,
+                  tr: element.textBgRxTR ?? 0,
+                  br: element.textBgRxBR ?? 0,
+                  bl: element.textBgRxBL ?? 0,
+                  sc: element.textShadowColor ?? null,
+                  sb: element.textShadowBlur ?? 0,
+                  sx: element.textShadowOffsetX ?? 0,
+                  sy: element.textShadowOffsetY ?? 0
+                }) !== (existingObj.__lastTextBgShadowJson ?? "") || // CRITICAL: Detect gradient fill/stroke changes — serialise to JSON for deep comparison
                 JSON.stringify(element.fillGradient || null) !== (existingObj.__lastFillGradientJson ?? "null") || JSON.stringify(element.strokeGradient || null) !== (existingObj.__lastStrokeGradientJson ?? "null");
                 const forceApplyFromPanel = syncTriggeredByPanelRef.current;
                 const noPropsOrPositionChanged = !positionChanged && !otherPropsChanged;
@@ -8608,6 +8774,26 @@ const PageCanvas = react.forwardRef(
         }
         obj.setCoords();
         obj.dirty = true;
+        try {
+          applyTextBackground(obj, extractTextBgConfig(element));
+          const shadow = buildTextShadow(element);
+          obj.set("shadow", shadow ?? null);
+          obj.__lastTextBgShadowJson = JSON.stringify({
+            c: element.textBgColor ?? null,
+            p: element.textBgPadding ?? 0,
+            tl: element.textBgRxTL ?? 0,
+            tr: element.textBgRxTR ?? 0,
+            br: element.textBgRxBR ?? 0,
+            bl: element.textBgRxBL ?? 0,
+            sc: element.textShadowColor ?? null,
+            sb: element.textShadowBlur ?? 0,
+            sx: element.textShadowOffsetX ?? 0,
+            sy: element.textShadowOffsetY ?? 0
+          });
+          obj.dirty = true;
+        } catch (err) {
+          console.warn("[text-bg] failed to apply background/shadow", err);
+        }
       } else if (!isImage && !isLine) {
         if (obj instanceof fabric__namespace.Circle) {
           obj.set({
@@ -12072,7 +12258,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.40";
+const PACKAGE_VERSION = "0.5.42";
 let __underlineFixInstalled = false;
 function installUnderlineFix(fab) {
   var _a;
@@ -12227,7 +12413,7 @@ class PixldocsRenderer {
    * This is the primary external API for the package.
    */
   async renderFromForm(options) {
-    const { templateId, formSchemaId, sectionState, themeId, watermark, prefetched, ...renderOpts } = options;
+    const { templateId, formSchemaId, sectionState, themeId, watermark, watermarkOptions, prefetched, ...renderOpts } = options;
     const resolved = await resolveFromForm({
       templateId,
       formSchemaId,
@@ -12240,8 +12426,8 @@ class PixldocsRenderer {
     const shouldWatermark = watermark ?? resolved.price > 0;
     let configToRender = resolved.config;
     if (shouldWatermark) {
-      const { injectWatermark } = await Promise.resolve().then(() => require("./canvasWatermark-DAZIQ_IR.cjs"));
-      configToRender = injectWatermark(configToRender);
+      const { injectWatermark } = await Promise.resolve().then(() => require("./canvasWatermark-B0ab38Ok.cjs"));
+      configToRender = injectWatermark(configToRender, watermarkOptions);
     }
     return this.renderAllPages(configToRender, renderOpts);
   }
@@ -12280,7 +12466,7 @@ class PixldocsRenderer {
    * Resolve from V2 sectionState and return SVGs for all pages (for server vector PDF).
    */
   async renderSvgsFromForm(options) {
-    const { templateId, formSchemaId, sectionState, themeId, watermark, prefetched } = options;
+    const { templateId, formSchemaId, sectionState, themeId, watermark, watermarkOptions, prefetched } = options;
     const resolved = await resolveFromForm({
       templateId,
       formSchemaId,
@@ -12293,8 +12479,8 @@ class PixldocsRenderer {
     const shouldWatermark = watermark ?? resolved.price > 0;
     let configToRender = resolved.config;
     if (shouldWatermark) {
-      const { injectWatermark } = await Promise.resolve().then(() => require("./canvasWatermark-DAZIQ_IR.cjs"));
-      configToRender = injectWatermark(configToRender);
+      const { injectWatermark } = await Promise.resolve().then(() => require("./canvasWatermark-B0ab38Ok.cjs"));
+      configToRender = injectWatermark(configToRender, watermarkOptions);
     }
     return this.renderAllPageSvgs(configToRender);
   }
@@ -12312,7 +12498,7 @@ class PixldocsRenderer {
    * This is the primary PDF export API — mirrors renderFromForm() but returns a PDF.
    */
   async renderPdfFromForm(options) {
-    const { templateId, formSchemaId, sectionState, themeId, watermark, prefetched, title, fontBaseUrl } = options;
+    const { templateId, formSchemaId, sectionState, themeId, watermark, watermarkOptions, prefetched, title, fontBaseUrl } = options;
     const resolved = await resolveFromForm({
       templateId,
       formSchemaId,
@@ -12325,8 +12511,8 @@ class PixldocsRenderer {
     const shouldWatermark = watermark ?? resolved.price > 0;
     let configToRender = resolved.config;
     if (shouldWatermark) {
-      const { injectWatermark } = await Promise.resolve().then(() => require("./canvasWatermark-DAZIQ_IR.cjs"));
-      configToRender = injectWatermark(configToRender);
+      const { injectWatermark } = await Promise.resolve().then(() => require("./canvasWatermark-B0ab38Ok.cjs"));
+      configToRender = injectWatermark(configToRender, watermarkOptions);
     }
     const svgs = await this.renderAllPageSvgs(configToRender);
     const { assemblePdfFromSvgs: assemblePdfFromSvgs2 } = await Promise.resolve().then(() => pdfExport);