@pixldocs/canvas-renderer 0.5.52 → 0.5.54

package/dist/index.d.ts

@@ -1,8 +1,12 @@
 import { FormConfig } from '../../../src/lib/formsApi';
+import { getProxiedImageUrl } from '../../../src/lib/canvasImageLoader';
 import { InferredSection } from '../../../src/lib/inferFormSchemaFromTemplate';
+import { isBundledAssetUrl } from '../../../src/lib/canvasImageLoader';
+import { isPrivateUrl } from '../../../src/lib/canvasImageLoader';
 import { jsPDF } from 'jspdf';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { SectionFormState } from '../../../src/lib/inferFormSchemaFromTemplate';
+import { setBundledAssetPrefixes } from '../../../src/lib/canvasImageLoader';
 import { SmartElementProps } from '../../../shared/smart-elements/types';
 import { SmartElementType } from '../../../shared/smart-elements/types';
 
@@ -200,11 +204,17 @@ declare type FormDefSection = {
  */
 export declare function getEmbeddedJsPDFFontName(fontName: string, weight: number, isItalic?: boolean): string;
 
+export { getProxiedImageUrl }
+
 export { InferredSection }
 
+export { isBundledAssetUrl }
+
 /** Check if a font is in our local mapping */
 export declare function isFontAvailable(fontName: string): boolean;
 
+export { isPrivateUrl }
+
 /**
  * Load a Google Font by injecting a <link> stylesheet.
  * Resolves when the font is ready for use.
@@ -221,7 +231,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.52";
+export declare const PACKAGE_VERSION = "0.5.54";
 
 export declare interface PageSettings {
     backgroundColor?: string;
@@ -540,6 +550,8 @@ export declare function rewriteSvgFontsForJsPDF(svgStr: string): string;
 
 export { SectionFormState }
 
+export { setBundledAssetPrefixes }
+
 export { SmartElementProps }
 
 export { SmartElementType }

package/dist/index.js

@@ -2839,6 +2839,49 @@ function isPrivateUrl(url) {
     return false;
   }
 }
+const DEFAULT_BUNDLED_PREFIXES = ["/pixldocs-bundled-assets/"];
+let bundledPrefixes = [...DEFAULT_BUNDLED_PREFIXES];
+function setBundledAssetPrefixes(prefixes) {
+  const combined = /* @__PURE__ */ new Set([...DEFAULT_BUNDLED_PREFIXES]);
+  for (const p of prefixes || []) {
+    if (typeof p === "string" && p.startsWith("/")) combined.add(p);
+  }
+  bundledPrefixes = Array.from(combined);
+}
+function pathnameStartsWithBundledPrefix(pathname) {
+  return bundledPrefixes.some((prefix) => pathname.startsWith(prefix));
+}
+function isBundledAssetUrl(url) {
+  if (!url) return false;
+  if (url.startsWith("/") && !url.startsWith("//")) {
+    return pathnameStartsWithBundledPrefix(url);
+  }
+  try {
+    const parsed = new URL(url);
+    if (typeof window !== "undefined" && parsed.origin !== window.location.origin) {
+      return false;
+    }
+    return pathnameStartsWithBundledPrefix(parsed.pathname);
+  } catch {
+    return false;
+  }
+}
+function resolveBundledAssetUrl(url) {
+  if (!url) return null;
+  if (url.startsWith("/") && !url.startsWith("//") && pathnameStartsWithBundledPrefix(url)) {
+    const origin = typeof window !== "undefined" ? window.location.origin : "";
+    return origin ? new URL(url, origin).toString() : url;
+  }
+  try {
+    const parsed = new URL(url);
+    if (typeof window !== "undefined" && parsed.origin !== window.location.origin) return null;
+    if (pathnameStartsWithBundledPrefix(parsed.pathname)) return parsed.toString();
+  } catch {
+    return null;
+  }
+  return null;
+}
+const loggedPrivateSkips = /* @__PURE__ */ new Set();
 function toPublicStorageUrl(url) {
   try {
     const parsed = new URL(url);
@@ -2856,8 +2899,17 @@ function toPublicStorageUrl(url) {
 function getProxiedImageUrl(imageUrl) {
   if (!imageUrl) return "";
   if (imageUrl.startsWith("data:") || imageUrl.startsWith("blob:")) return imageUrl;
+  const bundled = resolveBundledAssetUrl(imageUrl);
+  if (bundled) return bundled;
+  if (imageUrl.startsWith("/") && !imageUrl.startsWith("//")) {
+    if (typeof window !== "undefined") return new URL(imageUrl, window.location.origin).toString();
+    return imageUrl;
+  }
   if (isPrivateUrl(imageUrl)) {
-    console.warn("[image-proxy] Skipping private URL:", imageUrl.substring(0, 80));
+    if (!loggedPrivateSkips.has(imageUrl)) {
+      loggedPrivateSkips.add(imageUrl);
+      console.debug("[image-proxy] Skipping private URL:", imageUrl.substring(0, 80));
+    }
     return "";
   }
   const publicUrl = toPublicStorageUrl(imageUrl);
@@ -4799,7 +4851,13 @@ function extractTextBgConfig(element) {
     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
+    rxBL: Math.max(0, Number(element.textBgRxBL ?? 0)) || 0,
+    opacity: (() => {
+      const n = Number(element.textBgOpacity);
+      if (!Number.isFinite(n)) return void 0;
+      return Math.max(0, Math.min(1, n));
+    })(),
+    shadowAffectsBg: element.textShadowAffectsBg !== false
   };
 }
 function hasTextBackground(cfg) {
@@ -4860,6 +4918,13 @@ function applyTextBackground(obj, cfg) {
       const bgW = w + pL + pR;
       const bgH = h + pT + pB;
       ctx.save();
+      const suppressShadowOnBg = bg.shadowAffectsBg === false;
+      if (suppressShadowOnBg) {
+        ctx.shadowColor = "transparent";
+        ctx.shadowBlur = 0;
+        ctx.shadowOffsetX = 0;
+        ctx.shadowOffsetY = 0;
+      }
       buildRoundedRectPath2D(
         ctx,
         x,
@@ -4871,6 +4936,8 @@ function applyTextBackground(obj, cfg) {
         bg.rxBR ?? 0,
         bg.rxBL ?? 0
       );
+      const op = typeof bg.opacity === "number" ? Math.max(0, Math.min(1, bg.opacity)) : 1;
+      if (op < 1) ctx.globalAlpha = (ctx.globalAlpha ?? 1) * op;
       ctx.fillStyle = bg.color;
       ctx.fill();
       ctx.restore();
@@ -4916,7 +4983,9 @@ function applyTextBackground(obj, cfg) {
         (bg == null ? void 0 : bg.rxBL) ?? 0
       );
       const bgFill = (bg == null ? void 0 : bg.color) || "";
-      const bgPath = hasBg ? `<path d="${bgD}" fill="${escapeXmlAttr(bgFill)}" />` : "";
+      const bgOpacity = typeof (bg == null ? void 0 : bg.opacity) === "number" ? Math.max(0, Math.min(1, bg.opacity)) : 1;
+      const bgOpacityAttr = bgOpacity < 1 ? ` fill-opacity="${bgOpacity}"` : "";
+      const bgPath = hasBg ? `<path d="${bgD}" fill="${escapeXmlAttr(bgFill)}"${bgOpacityAttr} />` : "";
       svg = svg.replace(/style="[^"]*filter:\s*url\([^)]+\)[^"]*"/i, "");
       svg = svg.replace(/<filter[\s\S]*?<\/filter>/gi, "");
       let bgShadowMarker = "";
@@ -4933,7 +5002,7 @@ function applyTextBackground(obj, cfg) {
         const bh = h + pT + pB + pad * 2;
         const dataAttrs = `data-blur="${blur.toFixed(3)}" data-ox="${ox.toFixed(3)}" data-oy="${oy.toFixed(3)}" data-bx="${bx.toFixed(3)}" data-by="${by.toFixed(3)}" data-bw="${bw.toFixed(3)}" data-bh="${bh.toFixed(3)}" data-color="${escapeXmlAttr(shadowColor)}"`;
         const wrapShadow = (markup) => blur <= 0 ? `<g transform="translate(${ox.toFixed(3)} ${oy.toFixed(3)})">${markup}</g>` : `<g class="__pdShadowRaster" ${dataAttrs}>${markup}</g>`;
-        if (hasBg) {
+        if (hasBg && (bg == null ? void 0 : bg.shadowAffectsBg) !== false) {
           const shadowBgPath = `<path d="${bgD}" fill="${escapeXmlAttr(shadowColor)}" />`;
           bgShadowMarker = wrapShadow(shadowBgPath);
         }
@@ -12152,7 +12221,20 @@ function PixldocsPreview(props) {
     onDynamicFieldClick,
     onReady,
     onError,
-    skipFontReadyWait = true
+    // Default `false` so PageCanvas blocks textbox creation until the host
+    // browser actually has the @font-face rules registered. This matters for
+    // `overflowPolicy: 'auto-shrink'` text — `createText` runs the shrink
+    // loop synchronously at mount time using whatever font metrics Fabric
+    // can measure right then. If the real font hasn't loaded yet, Fabric
+    // falls back to the system font (typically narrower), the shrink loop
+    // decides "fits, no shrink needed", and when the real font finally
+    // loads the text overflows the box.
+    //
+    // The renderer's imperative PNG/PDF paths (`renderPageViaPreviewCanvas`,
+    // `captureSvgViaPreviewCanvas`) already pass `skipFontReadyWait: false`
+    // for this exact reason — that's why the downloaded PDF was correct
+    // while the on-screen preview wasn't.
+    skipFontReadyWait = false
   } = props;
   useEffect(() => {
     setPackageApiUrl(imageProxyUrl);
@@ -12321,7 +12403,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.52";
+const PACKAGE_VERSION = "0.5.54";
 let __underlineFixInstalled = false;
 function installUnderlineFix(fab) {
   var _a;
@@ -15245,7 +15327,14 @@ async function assemblePdfFromSvgs(svgResults, options = {}) {
     const hasGradient = !!((_b = (_a = page.backgroundGradient) == null ? void 0 : _a.stops) == null ? void 0 : _b.length);
     drawPageBackground(pdf, i, page.width, page.height, page.backgroundColor, page.backgroundGradient);
     const shouldStripBg = stripPageBackground ?? hasGradient;
-    let processedSvg = await prepareLiveCanvasSvgForPdf(page.svg, page.width, page.height, `page-${i + 1}`, {
+    let pageSvg = page.svg;
+    try {
+      const mod = await import("./svgTextToPath-BP0Kppla.js");
+      pageSvg = await mod.convertAllTextToPath(pageSvg, fontBaseUrl);
+    } catch (outlineErr) {
+      console.warn(`[canvas-renderer pdf] page ${i + 1}: text outliner unavailable, continuing with text-as-text`, outlineErr);
+    }
+    let processedSvg = await prepareLiveCanvasSvgForPdf(pageSvg, page.width, page.height, `page-${i + 1}`, {
       stripPageBackground: shouldStripBg
     });
     if (processedSvg) {
@@ -15304,9 +15393,16 @@ function collectImageUrls(config) {
 function normalizeAssetUrl(rawUrl, imageProxyUrl) {
   if (!rawUrl) return null;
   if (rawUrl.startsWith("data:") || rawUrl.startsWith("blob:")) return null;
+  if (rawUrl.startsWith("/") && !rawUrl.startsWith("//")) {
+    if (typeof window !== "undefined") return new URL(rawUrl, window.location.origin).toString();
+    return null;
+  }
   try {
     const h = new URL(rawUrl).hostname.toLowerCase();
     if (h === "localhost" || h === "127.0.0.1" || h === "0.0.0.0" || h.endsWith(".local") || /^(10\.|192\.168\.|169\.254\.)/.test(h)) {
+      if (typeof window !== "undefined" && new URL(rawUrl).origin === window.location.origin) {
+        return rawUrl;
+      }
       return null;
     }
   } catch {
@@ -15374,13 +15470,17 @@ export {
   ensureFontsForResolvedConfig,
   extractFontFamiliesFromSvgs,
   getEmbeddedJsPDFFontName,
+  getProxiedImageUrl,
+  isBundledAssetUrl,
   isFontAvailable,
+  isPrivateUrl,
   loadGoogleFontCSS,
   normalizeFontFamily,
   resolveFontWeight,
   resolveFromForm,
   resolveTemplateData,
   rewriteSvgFontsForJsPDF,
+  setBundledAssetPrefixes,
   warmResolvedTemplateForPreview,
   warmTemplateFromForm
 };