@burdenoff/microfe-bigconsole 2026.1103.6 → 2026.1103.7

package/dist/bigconsole/hooks/useDashboardImageExport.js

@@ -1,90 +1,70 @@
-import { useCallback as e, useState as t } from "react";
+import { elementToCanvas as e } from "../utils/elementToCanvas.js";
+import { useCallback as t, useState as n } from "react";
+import { useI18n as r } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { toast as i } from "sonner";
 //#region src/bigconsole/hooks/useDashboardImageExport.ts
-function n(e, t) {
+function a(e, t) {
 	let n = URL.createObjectURL(e), r = document.createElement("a");
 	r.href = n, r.download = t, r.click(), URL.revokeObjectURL(n);
 }
-function r(e) {
-	let t = getComputedStyle(e).backgroundColor;
-	return !t || t === "transparent" || /,\s*0\)\s*$/.test(t) ? getComputedStyle(document.documentElement).getPropertyValue("--color-bg-surface").trim() || "transparent" : t;
-}
-async function i(e) {
-	if (typeof window < "u" && "html2canvas" in window) return await window.html2canvas(e, {
-		backgroundColor: r(e),
-		scale: 2,
-		useCORS: !0
-	});
-	let t = document.createElement("canvas"), n = t.getContext("2d");
-	if (!n) throw Error("Could not get canvas context");
-	let i = e.getBoundingClientRect();
-	t.width = i.width * 2, t.height = i.height * 2, n.scale(2, 2), n.fillStyle = r(e), n.fillRect(0, 0, i.width, i.height);
-	let a = e.querySelectorAll("svg");
-	for (let e of a) {
-		let t = new XMLSerializer().serializeToString(e), r = new Blob([t], { type: "image/svg+xml;charset=utf-8" }), a = URL.createObjectURL(r);
-		try {
-			await new Promise((t) => {
-				let r = new Image();
-				r.onload = () => {
-					let a = e.getBoundingClientRect();
-					n.drawImage(r, a.left - i.left, a.top - i.top), t();
-				}, r.onerror = () => t(), r.src = a;
-			});
-		} finally {
-			URL.revokeObjectURL(a);
-		}
-	}
-	return t;
-}
-function a(r) {
-	let { containerRef: a, name: o = "dashboard" } = r, [s, c] = t(!1);
+function o(o) {
+	let { containerRef: s, name: c = "dashboard" } = o, [l, u] = n(!1), { t: d } = r(), f = t(() => {
+		i.error(d("bigconsole.dashboards.export.failed", "Could not export the dashboard. Please try again."));
+	}, [d]);
 	return {
-		exportPNG: e(async (e) => {
-			let t = a.current;
-			if (!(!t || s)) {
-				c(!0);
+		exportPNG: t(async (t) => {
+			let n = s.current;
+			if (!(!n || l)) {
+				u(!0);
 				try {
-					let r = await i(t), a = await new Promise((e, t) => {
+					let r = await e(n), i = await new Promise((e, t) => {
 						r.toBlob((n) => n ? e(n) : t(/* @__PURE__ */ Error("Failed to create image blob")), "image/png");
-					}), s = o.replace(/\s+/g, "_").toLowerCase();
-					n(a, e || `${s}_board.png`);
+					}), o = c.replace(/\s+/g, "_").toLowerCase();
+					a(i, t || `${o}_board.png`);
+				} catch {
+					f();
 				} finally {
-					c(!1);
+					u(!1);
 				}
 			}
 		}, [
-			a,
-			o,
-			s
+			s,
+			c,
+			l,
+			f
 		]),
-		exportPDF: e(async () => {
-			let e = a.current;
-			if (!(!e || s)) {
-				c(!0);
+		exportPDF: t(async () => {
+			let t = s.current;
+			if (!(!t || l)) {
+				u(!0);
 				try {
-					let t = await i(e), n = t.toDataURL("image/png"), r = `${o} — board`, a = window.open("", "_blank");
+					let n = await e(t), r = n.toDataURL("image/png"), i = `${c} — board`, a = window.open("", "_blank");
 					if (!a) {
 						window.print();
 						return;
 					}
-					let s = t.width >= t.height ? "landscape" : "portrait", c = a.document;
-					c.title = r;
-					let l = c.createElement("style");
-					l.textContent = `@page{size:${s};margin:12mm}html,body{margin:0;padding:0}img{width:100%;height:auto;display:block}`, c.head.appendChild(l);
-					let u = c.createElement("img");
-					u.alt = r, u.addEventListener("load", () => {
+					let o = n.width >= n.height ? "landscape" : "portrait", s = a.document;
+					s.title = i;
+					let l = s.createElement("style");
+					l.textContent = `@page{size:${o};margin:12mm}html,body{margin:0;padding:0}img{width:100%;height:auto;display:block}`, s.head.appendChild(l);
+					let u = s.createElement("img");
+					u.alt = i, u.addEventListener("load", () => {
 						a.focus(), a.print();
-					}), u.src = n, c.body.appendChild(u);
+					}), u.src = r, s.body.appendChild(u);
+				} catch {
+					f();
 				} finally {
-					c(!1);
+					u(!1);
 				}
 			}
 		}, [
-			a,
-			o,
-			s
+			s,
+			c,
+			l,
+			f
 		]),
-		isExporting: s
+		isExporting: l
 	};
 }
 //#endregion
-export { a as default, a as useDashboardImageExport };
+export { o as default, o as useDashboardImageExport };

package/dist/bigconsole/hooks/useWidgetExport.js

@@ -1,75 +1,61 @@
-import { useCallback as e, useRef as t } from "react";
+import { elementToCanvas as e } from "../utils/elementToCanvas.js";
+import { useCallback as t, useRef as n } from "react";
+import { useI18n as r } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { toast as i } from "sonner";
 //#region src/bigconsole/hooks/useWidgetExport.ts
-function n(e) {
+function a(e) {
 	if (!e.length) return "";
 	let t = Object.keys(e[0]), n = [];
-	n.push(t.map(r).join(","));
-	for (let i of e) {
+	n.push(t.map(o).join(","));
+	for (let r of e) {
 		let e = t.map((e) => {
-			let t = i[e];
-			return r(t);
+			let t = r[e];
+			return o(t);
 		});
 		n.push(e.join(","));
 	}
 	return n.join("\n");
 }
-function r(e) {
+function o(e) {
 	if (e == null) return "";
 	let t = String(e);
 	return t.includes(",") || t.includes("\"") || t.includes("\n") || t.includes("\r") ? `"${t.replace(/"/g, "\"\"")}"` : t;
 }
-function i(e, t, n) {
+function s(e, t, n) {
 	let r = e instanceof Blob ? e : new Blob([e], { type: n }), i = URL.createObjectURL(r), a = document.createElement("a");
 	a.href = i, a.download = t, document.body.appendChild(a), a.click(), document.body.removeChild(a), setTimeout(() => URL.revokeObjectURL(i), 100);
 }
-async function a(e) {
-	if (typeof window < "u" && "html2canvas" in window) return await window.html2canvas(e, {
-		backgroundColor: null,
-		scale: 2,
-		logging: !1,
-		useCORS: !0
-	});
-	let t = document.createElement("canvas"), n = t.getContext("2d");
-	if (!n) throw Error("Could not get canvas context");
-	let r = e.getBoundingClientRect();
-	t.width = r.width * 2, t.height = r.height * 2, n.scale(2, 2);
-	let i = e.querySelectorAll("svg");
-	if (i.length > 0) for (let e of i) {
-		let t = new XMLSerializer().serializeToString(e), i = new Blob([t], { type: "image/svg+xml;charset=utf-8" }), a = URL.createObjectURL(i), o = new Image();
-		await new Promise((t, i) => {
-			o.onload = () => {
-				let i = e.getBoundingClientRect(), s = i.left - r.left, c = i.top - r.top;
-				n.drawImage(o, s, c), URL.revokeObjectURL(a), t();
-			}, o.onerror = i, o.src = a;
-		});
-	}
-	return n.globalCompositeOperation = "destination-over", n.fillStyle = getComputedStyle(e).backgroundColor || "#ffffff", n.fillRect(0, 0, t.width / 2, t.height / 2), t;
-}
-function o(r, o = {}) {
-	let { data: s, containerRef: c } = o, l = t(!1);
+function c(o, c = {}) {
+	let { data: l, containerRef: u } = c, d = n(!1), { t: f } = r();
 	return {
-		exportCSV: e((e) => {
-			if (!s?.length) return;
-			let t = n(s), a = `${r.title.replace(/\s+/g, "_").toLowerCase()}_${Date.now()}.csv`;
-			i(t, e || a, "text/csv;charset=utf-8");
-		}, [s, r.title]),
-		exportPNG: e(async (e) => {
-			if (c?.current && !l.current) {
-				l.current = !0;
+		exportCSV: t((e) => {
+			if (!l?.length) return;
+			let t = a(l), n = `${o.title.replace(/\s+/g, "_").toLowerCase()}_${Date.now()}.csv`;
+			s(t, e || n, "text/csv;charset=utf-8");
+		}, [l, o.title]),
+		exportPNG: t(async (t) => {
+			if (u?.current && !d.current) {
+				d.current = !0;
 				try {
-					let t = await a(c.current), n = await new Promise((e, n) => {
-						t.toBlob((t) => {
-							t ? e(t) : n(/* @__PURE__ */ Error("Failed to create image blob"));
+					let n = await e(u.current), r = await new Promise((e, t) => {
+						n.toBlob((n) => {
+							n ? e(n) : t(/* @__PURE__ */ Error("Failed to create image blob"));
 						}, "image/png");
-					}), o = `${r.title.replace(/\s+/g, "_").toLowerCase()}_${Date.now()}.png`;
-					i(n, e || o, "image/png");
-				} catch {} finally {
-					l.current = !1;
+					}), i = `${o.title.replace(/\s+/g, "_").toLowerCase()}_${Date.now()}.png`;
+					s(r, t || i, "image/png");
+				} catch {
+					i.error(f("bigconsole.widget.export.failed", "Could not export the widget image. Please try again."));
+				} finally {
+					d.current = !1;
 				}
 			}
-		}, [c, r.title]),
-		isExporting: l.current
+		}, [
+			u,
+			o.title,
+			f
+		]),
+		isExporting: d.current
 	};
 }
 //#endregion
-export { o as default, o as useWidgetExport };
+export { c as default, c as useWidgetExport };

package/dist/bigconsole/utils/elementToCanvas.d.ts

@@ -0,0 +1,9 @@
+/** Export resolution multiplier, so text stays sharp when the image is zoomed or printed. */
+export declare const EXPORT_PIXEL_RATIO = 2;
+/**
+ * A concrete background fill for the export. Prefers the element's own computed
+ * background, then the resolved `--color-bg-surface` theme token, then none (a
+ * transparent image), so no colour literal is needed.
+ */
+export declare function resolveExportBackground(element: HTMLElement): string | undefined;
+export declare function elementToCanvas(element: HTMLElement): Promise<HTMLCanvasElement>;

package/dist/bigconsole/utils/elementToCanvas.js

@@ -0,0 +1,16 @@
+import { toCanvas as e } from "../../node_modules/html-to-image/es/index.js";
+//#region src/bigconsole/utils/elementToCanvas.ts
+var t = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+function n(e) {
+	let t = getComputedStyle(e).backgroundColor;
+	return !t || t === "transparent" || /,\s*0\)\s*$/.test(t) ? getComputedStyle(document.documentElement).getPropertyValue("--color-bg-surface").trim() || void 0 : t;
+}
+async function r(r) {
+	return e(r, {
+		pixelRatio: 2,
+		backgroundColor: n(r),
+		imagePlaceholder: t
+	});
+}
+//#endregion
+export { r as elementToCanvas, n as resolveExportBackground };

package/dist/node_modules/html-to-image/es/apply-style.js

@@ -0,0 +1,11 @@
+//#region node_modules/html-to-image/es/apply-style.js
+function e(e, t) {
+	let { style: n } = e;
+	t.backgroundColor && (n.backgroundColor = t.backgroundColor), t.width && (n.width = `${t.width}px`), t.height && (n.height = `${t.height}px`);
+	let r = t.style;
+	return r != null && Object.keys(r).forEach((e) => {
+		n[e] = r[e];
+	}), e;
+}
+//#endregion
+export { e as applyStyle };

package/dist/node_modules/html-to-image/es/clone-node.js

@@ -0,0 +1,82 @@
+import { createImage as e, getStyleProperties as t, isInstanceOfElement as n, toArray as r } from "./util.js";
+import { clonePseudoElements as i } from "./clone-pseudos.js";
+import { getMimeType as a } from "./mimes.js";
+import { resourceToDataURL as o } from "./dataurl.js";
+//#region node_modules/html-to-image/es/clone-node.js
+async function s(t) {
+	let n = t.toDataURL();
+	return n === "data:," ? t.cloneNode(!1) : e(n);
+}
+async function c(t, n) {
+	if (t.currentSrc) {
+		let n = document.createElement("canvas"), r = n.getContext("2d");
+		return n.width = t.clientWidth, n.height = t.clientHeight, r?.drawImage(t, 0, 0, n.width, n.height), e(n.toDataURL());
+	}
+	let r = t.poster;
+	return e(await o(r, a(r), n));
+}
+async function l(e, t) {
+	try {
+		if (e?.contentDocument?.body) return await y(e.contentDocument.body, t, !0);
+	} catch {}
+	return e.cloneNode(!1);
+}
+async function u(e, t) {
+	return n(e, HTMLCanvasElement) ? s(e) : n(e, HTMLVideoElement) ? c(e, t) : n(e, HTMLIFrameElement) ? l(e, t) : e.cloneNode(f(e));
+}
+var d = (e) => e.tagName != null && e.tagName.toUpperCase() === "SLOT", f = (e) => e.tagName != null && e.tagName.toUpperCase() === "SVG";
+async function p(e, t, i) {
+	if (f(t)) return t;
+	let a = [];
+	return a = d(e) && e.assignedNodes ? r(e.assignedNodes()) : n(e, HTMLIFrameElement) && e.contentDocument?.body ? r(e.contentDocument.body.childNodes) : r((e.shadowRoot ?? e).childNodes), a.length === 0 || n(e, HTMLVideoElement) || await a.reduce((e, n) => e.then(() => y(n, i)).then((e) => {
+		e && t.appendChild(e);
+	}), Promise.resolve()), t;
+}
+function m(e, r, i) {
+	let a = r.style;
+	if (!a) return;
+	let o = window.getComputedStyle(e);
+	o.cssText ? (a.cssText = o.cssText, a.transformOrigin = o.transformOrigin) : t(i).forEach((t) => {
+		let i = o.getPropertyValue(t);
+		t === "font-size" && i.endsWith("px") && (i = `${Math.floor(parseFloat(i.substring(0, i.length - 2))) - .1}px`), n(e, HTMLIFrameElement) && t === "display" && i === "inline" && (i = "block"), t === "d" && r.getAttribute("d") && (i = `path(${r.getAttribute("d")})`), a.setProperty(t, i, o.getPropertyPriority(t));
+	});
+}
+function h(e, t) {
+	n(e, HTMLTextAreaElement) && (t.innerHTML = e.value), n(e, HTMLInputElement) && t.setAttribute("value", e.value);
+}
+function g(e, t) {
+	if (n(e, HTMLSelectElement)) {
+		let n = t, r = Array.from(n.children).find((t) => e.value === t.getAttribute("value"));
+		r && r.setAttribute("selected", "");
+	}
+}
+function _(e, t, r) {
+	return n(t, Element) && (m(e, t, r), i(e, t, r), h(e, t), g(e, t)), t;
+}
+async function v(e, t) {
+	let n = e.querySelectorAll ? e.querySelectorAll("use") : [];
+	if (n.length === 0) return e;
+	let r = {};
+	for (let i = 0; i < n.length; i++) {
+		let a = n[i].getAttribute("xlink:href");
+		if (a) {
+			let n = e.querySelector(a), i = document.querySelector(a);
+			!n && i && !r[a] && (r[a] = await y(i, t, !0));
+		}
+	}
+	let i = Object.values(r);
+	if (i.length) {
+		let t = "http://www.w3.org/1999/xhtml", n = document.createElementNS(t, "svg");
+		n.setAttribute("xmlns", t), n.style.position = "absolute", n.style.width = "0", n.style.height = "0", n.style.overflow = "hidden", n.style.display = "none";
+		let r = document.createElementNS(t, "defs");
+		n.appendChild(r);
+		for (let e = 0; e < i.length; e++) r.appendChild(i[e]);
+		e.appendChild(n);
+	}
+	return e;
+}
+async function y(e, t, n) {
+	return !n && t.filter && !t.filter(e) ? null : Promise.resolve(e).then((e) => u(e, t)).then((n) => p(e, n, t)).then((n) => _(e, n, t)).then((e) => v(e, t));
+}
+//#endregion
+export { y as cloneNode };

package/dist/node_modules/html-to-image/es/clone-pseudos.js

@@ -0,0 +1,30 @@
+import { getStyleProperties as e, uuid as t } from "./util.js";
+//#region node_modules/html-to-image/es/clone-pseudos.js
+function n(e) {
+	let t = e.getPropertyValue("content");
+	return `${e.cssText} content: '${t.replace(/'|"/g, "")}';`;
+}
+function r(t, n) {
+	return e(n).map((e) => `${e}: ${t.getPropertyValue(e)}${t.getPropertyPriority(e) ? " !important" : ""};`).join(" ");
+}
+function i(e, t, i, a) {
+	let o = `.${e}:${t}`, s = i.cssText ? n(i) : r(i, a);
+	return document.createTextNode(`${o}{${s}}`);
+}
+function a(e, n, r, a) {
+	let o = window.getComputedStyle(e, r), s = o.getPropertyValue("content");
+	if (s === "" || s === "none") return;
+	let c = t();
+	try {
+		n.className = `${n.className} ${c}`;
+	} catch {
+		return;
+	}
+	let l = document.createElement("style");
+	l.appendChild(i(c, r, o, a)), n.appendChild(l);
+}
+function o(e, t, n) {
+	a(e, t, ":before", n), a(e, t, ":after", n);
+}
+//#endregion
+export { o as clonePseudoElements };

package/dist/node_modules/html-to-image/es/dataurl.js

@@ -0,0 +1,49 @@
+//#region node_modules/html-to-image/es/dataurl.js
+function e(e) {
+	return e.split(/,/)[1];
+}
+function t(e) {
+	return e.search(/^(data:)/) !== -1;
+}
+function n(e, t) {
+	return `data:${t};base64,${e}`;
+}
+async function r(e, t, n) {
+	let r = await fetch(e, t);
+	if (r.status === 404) throw Error(`Resource "${r.url}" not found`);
+	let i = await r.blob();
+	return new Promise((e, t) => {
+		let a = new FileReader();
+		a.onerror = t, a.onloadend = () => {
+			try {
+				e(n({
+					res: r,
+					result: a.result
+				}));
+			} catch (e) {
+				t(e);
+			}
+		}, a.readAsDataURL(i);
+	});
+}
+var i = {};
+function a(e, t, n) {
+	let r = e.replace(/\?.*/, "");
+	return n && (r = e), /ttf|otf|eot|woff2?/i.test(r) && (r = r.replace(/.*\//, "")), t ? `[${t}]${r}` : r;
+}
+async function o(t, o, s) {
+	let c = a(t, o, s.includeQueryParams);
+	if (i[c] != null) return i[c];
+	s.cacheBust && (t += (/\?/.test(t) ? "&" : "?") + (/* @__PURE__ */ new Date()).getTime());
+	let l;
+	try {
+		l = n(await r(t, s.fetchRequestInit, ({ res: t, result: n }) => (o ||= t.headers.get("Content-Type") || "", e(n))), o);
+	} catch (e) {
+		l = s.imagePlaceholder || "";
+		let n = `Failed to fetch resource: ${t}`;
+		e && (n = typeof e == "string" ? e : e.message), n && console.warn(n);
+	}
+	return i[c] = l, l;
+}
+//#endregion
+export { r as fetchAsDataURL, t as isDataUrl, n as makeDataUrl, o as resourceToDataURL };

package/dist/node_modules/html-to-image/es/embed-images.js

@@ -0,0 +1,41 @@
+import { isInstanceOfElement as e, toArray as t } from "./util.js";
+import { getMimeType as n } from "./mimes.js";
+import { isDataUrl as r, resourceToDataURL as i } from "./dataurl.js";
+import { embedResources as a } from "./embed-resources.js";
+//#region node_modules/html-to-image/es/embed-images.js
+async function o(e, t, n) {
+	let r = t.style?.getPropertyValue(e);
+	if (r) {
+		let i = await a(r, null, n);
+		return t.style.setProperty(e, i, t.style.getPropertyPriority(e)), !0;
+	}
+	return !1;
+}
+async function s(e, t) {
+	await o("background", e, t) || await o("background-image", e, t), await o("mask", e, t) || await o("-webkit-mask", e, t) || await o("mask-image", e, t) || await o("-webkit-mask-image", e, t);
+}
+async function c(t, a) {
+	let o = e(t, HTMLImageElement);
+	if (!(o && !r(t.src)) && !(e(t, SVGImageElement) && !r(t.href.baseVal))) return;
+	let s = o ? t.src : t.href.baseVal, c = await i(s, n(s), a);
+	await new Promise((e, n) => {
+		t.onload = e, t.onerror = a.onImageErrorHandler ? (...t) => {
+			try {
+				e(a.onImageErrorHandler(...t));
+			} catch (e) {
+				n(e);
+			}
+		} : n;
+		let r = t;
+		r.decode &&= e, r.loading === "lazy" && (r.loading = "eager"), o ? (t.srcset = "", t.src = c) : t.href.baseVal = c;
+	});
+}
+async function l(e, n) {
+	let r = t(e.childNodes).map((e) => u(e, n));
+	await Promise.all(r).then(() => e);
+}
+async function u(t, n) {
+	e(t, Element) && (await s(t, n), await c(t, n), await l(t, n));
+}
+//#endregion
+export { u as embedImages };

package/dist/node_modules/html-to-image/es/embed-resources.js

@@ -0,0 +1,39 @@
+import { resolveUrl as e } from "./util.js";
+import { getMimeType as t } from "./mimes.js";
+import { isDataUrl as n, makeDataUrl as r, resourceToDataURL as i } from "./dataurl.js";
+//#region node_modules/html-to-image/es/embed-resources.js
+var a = /url\((['"]?)([^'"]+?)\1\)/g, o = /url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g, s = /src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g;
+function c(e) {
+	let t = e.replace(/([.*+?^${}()|\[\]\/\\])/g, "\\$1");
+	return RegExp(`(url\\(['"]?)(${t})(['"]?\\))`, "g");
+}
+function l(e) {
+	let t = [];
+	return e.replace(a, (e, n, r) => (t.push(r), e)), t.filter((e) => !n(e));
+}
+async function u(n, a, o, s, l) {
+	try {
+		let u = o ? e(a, o) : a, d = t(a), f;
+		return f = l ? r(await l(u), d) : await i(u, d, s), n.replace(c(a), `$1${f}$3`);
+	} catch {}
+	return n;
+}
+function d(e, { preferredFontFormat: t }) {
+	return t ? e.replace(s, (e) => {
+		for (;;) {
+			let [n, , r] = o.exec(e) || [];
+			if (!r) return "";
+			if (r === t) return `src: ${n};`;
+		}
+	}) : e;
+}
+function f(e) {
+	return e.search(a) !== -1;
+}
+async function p(e, t, n) {
+	if (!f(e)) return e;
+	let r = d(e, n);
+	return l(r).reduce((e, r) => e.then((e) => u(e, r, t, n)), Promise.resolve(r));
+}
+//#endregion
+export { u as embed, p as embedResources, l as parseURLs, f as shouldEmbed };

package/dist/node_modules/html-to-image/es/embed-webfonts.js

@@ -0,0 +1,115 @@
+import { toArray as e } from "./util.js";
+import { fetchAsDataURL as t } from "./dataurl.js";
+import { embedResources as n, shouldEmbed as r } from "./embed-resources.js";
+//#region node_modules/html-to-image/es/embed-webfonts.js
+var i = {};
+async function a(e) {
+	let t = i[e];
+	return t ?? (t = {
+		url: e,
+		cssText: await (await fetch(e)).text()
+	}, i[e] = t, t);
+}
+async function o(e, n) {
+	let r = e.cssText, i = /url\(["']?([^"')]+)["']?\)/g, a = (r.match(/url\([^)]+\)/g) || []).map(async (a) => {
+		let o = a.replace(i, "$1");
+		return o.startsWith("https://") || (o = new URL(o, e.url).href), t(o, n.fetchRequestInit, ({ result: e }) => (r = r.replace(a, `url(${e})`), [a, e]));
+	});
+	return Promise.all(a).then(() => r);
+}
+function s(e) {
+	if (e == null) return [];
+	let t = [], n = e.replace(/(\/\*[\s\S]*?\*\/)/gi, ""), r = /* @__PURE__ */ RegExp("((@.*?keyframes [\\s\\S]*?){([\\s\\S]*?}\\s*?)})", "gi");
+	for (;;) {
+		let e = r.exec(n);
+		if (e === null) break;
+		t.push(e[0]);
+	}
+	n = n.replace(r, "");
+	let i = /@import[\s\S]*?url\([^)]*\)[\s\S]*?;/gi, a = /* @__PURE__ */ RegExp("((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})", "gi");
+	for (;;) {
+		let e = i.exec(n);
+		if (e === null) {
+			if (e = a.exec(n), e === null) break;
+			i.lastIndex = a.lastIndex;
+		} else a.lastIndex = i.lastIndex;
+		t.push(e[0]);
+	}
+	return t;
+}
+async function c(t, n) {
+	let r = [], i = [];
+	return t.forEach((r) => {
+		if ("cssRules" in r) try {
+			e(r.cssRules || []).forEach((e, t) => {
+				if (e.type === CSSRule.IMPORT_RULE) {
+					let c = t + 1, l = e.href, u = a(l).then((e) => o(e, n)).then((e) => s(e).forEach((e) => {
+						try {
+							r.insertRule(e, e.startsWith("@import") ? c += 1 : r.cssRules.length);
+						} catch (t) {
+							console.error("Error inserting rule from remote css", {
+								rule: e,
+								error: t
+							});
+						}
+					})).catch((e) => {
+						console.error("Error loading remote css", e.toString());
+					});
+					i.push(u);
+				}
+			});
+		} catch (e) {
+			let c = t.find((e) => e.href == null) || document.styleSheets[0];
+			r.href != null && i.push(a(r.href).then((e) => o(e, n)).then((e) => s(e).forEach((e) => {
+				c.insertRule(e, c.cssRules.length);
+			})).catch((e) => {
+				console.error("Error loading remote stylesheet", e);
+			})), console.error("Error inlining remote css file", e);
+		}
+	}), Promise.all(i).then(() => (t.forEach((t) => {
+		if ("cssRules" in t) try {
+			e(t.cssRules || []).forEach((e) => {
+				r.push(e);
+			});
+		} catch (e) {
+			console.error(`Error while reading CSS rules from ${t.href}`, e);
+		}
+	}), r));
+}
+function l(e) {
+	return e.filter((e) => e.type === CSSRule.FONT_FACE_RULE).filter((e) => r(e.style.getPropertyValue("src")));
+}
+async function u(t, n) {
+	if (t.ownerDocument == null) throw Error("Provided element is not within a Document");
+	return l(await c(e(t.ownerDocument.styleSheets), n));
+}
+function d(e) {
+	return e.trim().replace(/["']/g, "");
+}
+function f(e) {
+	let t = /* @__PURE__ */ new Set();
+	function n(e) {
+		(e.style.fontFamily || getComputedStyle(e).fontFamily).split(",").forEach((e) => {
+			t.add(d(e));
+		}), Array.from(e.children).forEach((e) => {
+			e instanceof HTMLElement && n(e);
+		});
+	}
+	return n(e), t;
+}
+async function p(e, t) {
+	let r = await u(e, t), i = f(e);
+	return (await Promise.all(r.filter((e) => i.has(d(e.style.fontFamily))).map((e) => {
+		let r = e.parentStyleSheet ? e.parentStyleSheet.href : null;
+		return n(e.cssText, r, t);
+	}))).join("\n");
+}
+async function m(e, t) {
+	let n = t.fontEmbedCSS == null ? t.skipFonts ? null : await p(e, t) : t.fontEmbedCSS;
+	if (n) {
+		let t = document.createElement("style"), r = document.createTextNode(n);
+		t.appendChild(r), e.firstChild ? e.insertBefore(t, e.firstChild) : e.appendChild(t);
+	}
+}
+//#endregion
+export { m as embedWebFonts, p as getWebFontCSS };

package/dist/node_modules/html-to-image/es/index.js

@@ -0,0 +1,16 @@
+import { checkCanvasDimensions as e, createImage as t, getImageSize as n, getPixelRatio as r, nodeToDataURL as i } from "./util.js";
+import { cloneNode as a } from "./clone-node.js";
+import { embedImages as o } from "./embed-images.js";
+import { applyStyle as s } from "./apply-style.js";
+import { embedWebFonts as c } from "./embed-webfonts.js";
+//#region node_modules/html-to-image/es/index.js
+async function l(e, t = {}) {
+	let { width: r, height: l } = n(e, t), u = await a(e, t, !0);
+	return await c(u, t), await o(u, t), s(u, t), await i(u, r, l);
+}
+async function u(i, a = {}) {
+	let { width: o, height: s } = n(i, a), c = await t(await l(i, a)), u = document.createElement("canvas"), d = u.getContext("2d"), f = a.pixelRatio || r(), p = a.canvasWidth || o, m = a.canvasHeight || s;
+	return u.width = p * f, u.height = m * f, a.skipAutoScale || e(u), u.style.width = `${p}`, u.style.height = `${m}`, a.backgroundColor && (d.fillStyle = a.backgroundColor, d.fillRect(0, 0, u.width, u.height)), d.drawImage(c, 0, 0, u.width, u.height), u;
+}
+//#endregion
+export { u as toCanvas, l as toSvg };

package/dist/node_modules/html-to-image/es/mimes.js

@@ -0,0 +1,23 @@
+//#region node_modules/html-to-image/es/mimes.js
+var e = "application/font-woff", t = "image/jpeg", n = {
+	woff: e,
+	woff2: e,
+	ttf: "application/font-truetype",
+	eot: "application/vnd.ms-fontobject",
+	png: "image/png",
+	jpg: t,
+	jpeg: t,
+	gif: "image/gif",
+	tiff: "image/tiff",
+	svg: "image/svg+xml",
+	webp: "image/webp"
+};
+function r(e) {
+	let t = /\.([^./]*?)$/g.exec(e);
+	return t ? t[1] : "";
+}
+function i(e) {
+	return n[r(e).toLowerCase()] || "";
+}
+//#endregion
+export { i as getMimeType };

package/dist/node_modules/html-to-image/es/util.js

@@ -0,0 +1,75 @@
+//#region node_modules/html-to-image/es/util.js
+function e(e, t) {
+	if (e.match(/^[a-z]+:\/\//i)) return e;
+	if (e.match(/^\/\//)) return window.location.protocol + e;
+	if (e.match(/^[a-z]+:/i)) return e;
+	let n = document.implementation.createHTMLDocument(), r = n.createElement("base"), i = n.createElement("a");
+	return n.head.appendChild(r), n.body.appendChild(i), t && (r.href = t), i.href = e, i.href;
+}
+var t = (() => {
+	let e = 0, t = () => `0000${(Math.random() * 36 ** 4 << 0).toString(36)}`.slice(-4);
+	return () => (e += 1, `u${t()}${e}`);
+})();
+function n(e) {
+	let t = [];
+	for (let n = 0, r = e.length; n < r; n++) t.push(e[n]);
+	return t;
+}
+var r = null;
+function i(e = {}) {
+	return r || (e.includeStyleProperties ? (r = e.includeStyleProperties, r) : (r = n(window.getComputedStyle(document.documentElement)), r));
+}
+function a(e, t) {
+	let n = (e.ownerDocument.defaultView || window).getComputedStyle(e).getPropertyValue(t);
+	return n ? parseFloat(n.replace("px", "")) : 0;
+}
+function o(e) {
+	let t = a(e, "border-left-width"), n = a(e, "border-right-width");
+	return e.clientWidth + t + n;
+}
+function s(e) {
+	let t = a(e, "border-top-width"), n = a(e, "border-bottom-width");
+	return e.clientHeight + t + n;
+}
+function c(e, t = {}) {
+	return {
+		width: t.width || o(e),
+		height: t.height || s(e)
+	};
+}
+function l() {
+	let e, t;
+	try {
+		t = process;
+	} catch {}
+	let n = t && t.env ? t.env.devicePixelRatio : null;
+	return n && (e = parseInt(n, 10), Number.isNaN(e) && (e = 1)), e || window.devicePixelRatio || 1;
+}
+var u = 16384;
+function d(e) {
+	(e.width > u || e.height > u) && (e.width > u && e.height > u ? e.width > e.height ? (e.height *= u / e.width, e.width = u) : (e.width *= u / e.height, e.height = u) : e.width > u ? (e.height *= u / e.width, e.width = u) : (e.width *= u / e.height, e.height = u));
+}
+function f(e) {
+	return new Promise((t, n) => {
+		let r = new Image();
+		r.onload = () => {
+			r.decode().then(() => {
+				requestAnimationFrame(() => t(r));
+			});
+		}, r.onerror = n, r.crossOrigin = "anonymous", r.decoding = "async", r.src = e;
+	});
+}
+async function p(e) {
+	return Promise.resolve().then(() => new XMLSerializer().serializeToString(e)).then(encodeURIComponent).then((e) => `data:image/svg+xml;charset=utf-8,${e}`);
+}
+async function m(e, t, n) {
+	let r = "http://www.w3.org/2000/svg", i = document.createElementNS(r, "svg"), a = document.createElementNS(r, "foreignObject");
+	return i.setAttribute("width", `${t}`), i.setAttribute("height", `${n}`), i.setAttribute("viewBox", `0 0 ${t} ${n}`), a.setAttribute("width", "100%"), a.setAttribute("height", "100%"), a.setAttribute("x", "0"), a.setAttribute("y", "0"), a.setAttribute("externalResourcesRequired", "true"), i.appendChild(a), a.appendChild(e), p(i);
+}
+var h = (e, t) => {
+	if (e instanceof t) return !0;
+	let n = Object.getPrototypeOf(e);
+	return n === null ? !1 : n.constructor.name === t.name || h(n, t);
+};
+//#endregion
+export { d as checkCanvasDimensions, f as createImage, c as getImageSize, l as getPixelRatio, i as getStyleProperties, h as isInstanceOfElement, m as nodeToDataURL, e as resolveUrl, p as svgToDataURL, n as toArray, t as uuid };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-bigconsole",
-  "version": "2026.1103.6",
+  "version": "2026.1103.7",
   "description": "BigConsole - AI-powered analytics and dashboard platform",
   "type": "module",
   "files": [
@@ -51,7 +51,8 @@
     "verify:dependency-mitigations": "bun test tests/dependency-mitigations.test.ts"
   },
   "dependencies": {
-    "dompurify": "^3.4.17"
+    "dompurify": "^3.4.17",
+    "html-to-image": "1.11.13"
   },
   "peerDependencies": {
     "@apollo/client": "^4.2.0",