@blueprint-chart/lib 1.5.0 → 1.7.0

package/dist/runtime/chart-css.d.ts

@@ -1 +1 @@
-export declare const CHART_CSS = "\n/* Blueprint Chart \u2014 Runtime Embed Styles\n   CSS custom properties with baked-in defaults for standalone iframe usage. */\n\n.bc-frame {\n  --bc-frame-font-family: system-ui, -apple-system, sans-serif;\n  --bc-frame-padding: 0;\n  --bc-frame-bg: #fff;\n  --bc-text-color: #333;\n  font-family: var(--bc-frame-font-family);\n  background: var(--bc-frame-bg);\n}\n\n/* Keeps the SVG's baked-in background rect (applyCanvasBackground) in sync\n   with the frame background; transparentBackground sets the var to\n   transparent at runtime. */\n.bc-frame .bc-canvas-bg {\n  fill: var(--bc-frame-bg, #fff);\n}\n\n.bc-frame-header {\n  padding: var(--bc-frame-padding) var(--bc-frame-padding) 0;\n  background: var(--bc-frame-header-bg, transparent);\n  border-bottom: var(--bc-frame-header-border-bottom, none);\n  margin-bottom: var(--bc-frame-header-margin-bottom, 0);\n}\n\n.bc-frame-body {\n  padding: 0 var(--bc-frame-padding);\n}\n\n.bc-frame-title {\n  --bc-frame-title-color: var(--bc-text-color, #333);\n  --bc-frame-title-font-size: 1.25rem;\n  color: var(--bc-frame-title-color);\n  font-size: var(--bc-frame-title-font-size);\n  font-weight: bold;\n  margin: 0;\n}\n\n.bc-frame-description {\n  --bc-frame-description-color: var(--bc-text-color, #555);\n  --bc-frame-description-font-size: 0.875rem;\n  color: var(--bc-frame-description-color);\n  font-size: var(--bc-frame-description-font-size);\n  margin: 0.25rem 0 0;\n}\n\n.bc-frame-footer {\n  margin-top: 0.5rem;\n  gap: 0.25rem 1rem;\n  padding: var(--bc-frame-footer-padding-top, 0) var(--bc-frame-padding) var(--bc-frame-padding);\n  background: var(--bc-frame-footer-bg, transparent);\n  border-top: var(--bc-frame-footer-border-top, none);\n}\n\n.bc-frame-footer-left {\n  display: flex;\n  align-items: baseline;\n  flex-wrap: wrap;\n  gap: 0.25rem 0.75rem;\n}\n\n.bc-frame-footer-left > :not(:first-child)::before {\n  content: \"\\00B7\";\n  margin-right: 0.5rem;\n  color: var(--bc-text-color, #888);\n}\n\n.bc-frame-footer-right {\n  display: flex;\n  align-items: center;\n}\n\n.bc-frame-note {\n  --bc-frame-note-color: var(--bc-text-color, #888);\n  --bc-frame-note-font-size: 0.75rem;\n  font-style: italic;\n  color: var(--bc-frame-note-color);\n  font-size: var(--bc-frame-note-font-size);\n  margin: 0;\n  padding: 0 var(--bc-frame-padding);\n}\n\n.bc-frame-byline,\n.bc-frame-source {\n  --bc-frame-meta-color: var(--bc-text-color, #888);\n  --bc-frame-meta-font-size: 0.75rem;\n  color: var(--bc-frame-meta-color);\n  font-size: var(--bc-frame-meta-font-size);\n}\n\n.bc-frame-credit {\n  --bc-frame-credit-color: var(--bc-text-color, #666);\n  --bc-frame-credit-font-size: 0.75rem;\n  color: var(--bc-frame-credit-color);\n  font-size: var(--bc-frame-credit-font-size);\n  font-weight: 600;\n  display: inline-flex;\n  align-items: center;\n  text-decoration: none;\n}\n\n.bc-frame-source-link {\n  color: inherit;\n  text-decoration: underline;\n}\n\n.bc-axis .domain {\n  stroke: var(--bc-axis-color, #333);\n}\n\n.bc-axis .tick text {\n  fill: var(--bc-axis-color, #333);\n  font-size: 10px;\n}\n\n.bc-axis .tick line {\n  stroke: var(--bc-axis-color, #333);\n}\n\n.bc-grid-line {\n  stroke: var(--bc-grid-color, #e0e0e0);\n  stroke-width: 1;\n}\n\n.bc-zero-baseline {\n  stroke: #666;\n  stroke-width: 1;\n}\n\n.bc-bar {\n  /* fill is set via D3 .attr() from data-bound colors \u2014 do not override */\n}\n\n.bc-line {\n  fill: none;\n  stroke-width: 2;\n}\n\n.bc-value-label {\n  font-size: 11px;\n  /* fill is set via D3 .attr() \u2014 do not override */\n}\n\n.bc-direct-label {\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.bc-tooltip {\n  position: absolute;\n  pointer-events: none;\n  background: var(--bc-tooltip-bg, #fff);\n  color: var(--bc-tooltip-color, #212529);\n  border: 1px solid var(--bc-tooltip-border-color, #dee2e6);\n  border-radius: 4px;\n  padding: 6px 10px;\n  font-size: 13px;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.12);\n  z-index: 9999;\n  display: none;\n}\n\n.bc-crosshair {\n  stroke: #999;\n  stroke-width: 1;\n  pointer-events: none;\n}\n\n.bc-arc-label-line {\n  fill: none;\n  stroke: #999;\n  stroke-width: 1;\n}\n\n.bc-theme-blueprint-framed {\n  --bc-frame-header-border-bottom: 1px solid #e0e0e0;\n  --bc-frame-header-margin-bottom: 0.5rem;\n  --bc-frame-footer-bg: #f8f8f8;\n  --bc-frame-footer-border-top: 1px solid #e0e0e0;\n  --bc-frame-footer-padding-top: 0.625rem;\n}\n\n.blueprint-chart-error {\n  color: red;\n  padding: 1em;\n  border: 1px solid red;\n}\n\nbody {\n  margin: 0;\n  overflow: hidden;\n}\n\n/* Dark theme: activated by data-bs-theme=\"dark\" on the document (matching the\n   editor's convention). The chart owns these colors; the dark frame background\n   also drives the renderer's resolveBackgroundColor, so data-mark colors and\n   contrast labels adapt at render time. Scoped to .bc-frame so these override\n   the frame's own light --bc-frame-bg / --bc-text-color declarations (which are\n   set on .bc-frame and would otherwise shadow a document-level override). */\n[data-bs-theme=\"dark\"] body {\n  /* color themes above-bar value labels (fill: currentColor). */\n  background: #1c1c1c;\n  color: rgba(255, 255, 255, 0.9);\n}\n\n[data-bs-theme=\"dark\"] .bc-frame {\n  --bc-frame-bg: #1c1c1c;\n  --bc-text-color: rgba(255, 255, 255, 0.9);\n  --bc-axis-color: rgba(255, 255, 255, 0.6);\n  --bc-grid-color: #333;\n\n  color: rgba(255, 255, 255, 0.9);\n}\n";
+export declare const CHART_CSS = "\n/* Blueprint Chart \u2014 Runtime Embed Styles\n   CSS custom properties with baked-in defaults for standalone iframe usage. */\n\n.bc-frame {\n  --bc-frame-font-family: system-ui, -apple-system, sans-serif;\n  --bc-frame-padding: 0;\n  --bc-frame-bg: #fff;\n  --bc-text-color: #333;\n  font-family: var(--bc-frame-font-family);\n  background: var(--bc-frame-bg);\n  /* currentColor marks (e.g. above-bar value labels) follow the theme text\n     colour, not the ambient document colour. */\n  color: var(--bc-text-color, #333);\n}\n\n/* Keeps the SVG's baked-in background rect (applyCanvasBackground) in sync\n   with the frame background; transparentBackground sets the var to\n   transparent at runtime. */\n.bc-frame .bc-canvas-bg {\n  fill: var(--bc-frame-bg, #fff);\n}\n\n.bc-frame-header {\n  padding: var(--bc-frame-padding) var(--bc-frame-padding) 0;\n  background: var(--bc-frame-header-bg, transparent);\n  border-bottom: var(--bc-frame-header-border-bottom, none);\n  margin-bottom: var(--bc-frame-header-margin-bottom, 0);\n}\n\n.bc-frame-body {\n  padding: 0 var(--bc-frame-padding);\n}\n\n.bc-frame-title {\n  --bc-frame-title-color: var(--bc-text-color, #333);\n  --bc-frame-title-font-size: 1.25rem;\n  color: var(--bc-frame-title-color);\n  font-size: var(--bc-frame-title-font-size);\n  font-weight: bold;\n  margin: 0;\n}\n\n.bc-frame-description {\n  --bc-frame-description-color: var(--bc-text-color, #555);\n  --bc-frame-description-font-size: 0.875rem;\n  color: var(--bc-frame-description-color);\n  font-size: var(--bc-frame-description-font-size);\n  margin: 0.25rem 0 0;\n}\n\n.bc-frame-footer {\n  margin-top: 0.5rem;\n  gap: 0.25rem 1rem;\n  padding: var(--bc-frame-footer-padding-top, 0) var(--bc-frame-padding) var(--bc-frame-padding);\n  background: var(--bc-frame-footer-bg, transparent);\n  border-top: var(--bc-frame-footer-border-top, none);\n}\n\n.bc-frame-footer-left {\n  display: flex;\n  align-items: baseline;\n  flex-wrap: wrap;\n  gap: 0.25rem 0.75rem;\n}\n\n.bc-frame-footer-left > :not(:first-child)::before {\n  content: \"\\00B7\";\n  margin-right: 0.5rem;\n  color: var(--bc-text-color, #888);\n}\n\n.bc-frame-footer-right {\n  display: flex;\n  align-items: center;\n}\n\n.bc-frame-note {\n  --bc-frame-note-color: var(--bc-text-color, #888);\n  --bc-frame-note-font-size: 0.75rem;\n  font-style: italic;\n  color: var(--bc-frame-note-color);\n  font-size: var(--bc-frame-note-font-size);\n  margin: 0;\n  padding: 0 var(--bc-frame-padding);\n}\n\n.bc-frame-byline,\n.bc-frame-source {\n  --bc-frame-meta-color: var(--bc-text-color, #888);\n  --bc-frame-meta-font-size: 0.75rem;\n  color: var(--bc-frame-meta-color);\n  font-size: var(--bc-frame-meta-font-size);\n}\n\n.bc-frame-credit {\n  --bc-frame-credit-color: var(--bc-text-color, #666);\n  --bc-frame-credit-font-size: 0.75rem;\n  color: var(--bc-frame-credit-color);\n  font-size: var(--bc-frame-credit-font-size);\n  font-weight: 600;\n  display: inline-flex;\n  align-items: center;\n  text-decoration: none;\n}\n\n.bc-frame-source-link {\n  color: inherit;\n  text-decoration: underline;\n}\n\n.bc-axis .domain {\n  stroke: var(--bc-axis-color, #333);\n}\n\n.bc-axis .tick text {\n  fill: var(--bc-axis-color, #333);\n  font-size: 10px;\n}\n\n.bc-axis .tick line {\n  stroke: var(--bc-axis-color, #333);\n}\n\n.bc-grid-line {\n  stroke: var(--bc-grid-color, #e0e0e0);\n  stroke-width: 1;\n}\n\n.bc-zero-baseline {\n  stroke: #666;\n  stroke-width: 1;\n}\n\n.bc-bar {\n  /* fill is set via D3 .attr() from data-bound colors \u2014 do not override */\n}\n\n.bc-line {\n  fill: none;\n  stroke-width: 2;\n}\n\n.bc-value-label {\n  font-size: 11px;\n  /* fill is set via D3 .attr() \u2014 do not override */\n}\n\n.bc-direct-label {\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.bc-tooltip {\n  position: absolute;\n  pointer-events: none;\n  background: var(--bc-tooltip-bg, #fff);\n  color: var(--bc-tooltip-color, #212529);\n  border: 1px solid var(--bc-tooltip-border-color, #dee2e6);\n  border-radius: 4px;\n  padding: 6px 10px;\n  font-size: 13px;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.12);\n  z-index: 9999;\n  display: none;\n}\n\n.bc-crosshair {\n  stroke: #999;\n  stroke-width: 1;\n  pointer-events: none;\n}\n\n.bc-arc-label-line {\n  fill: none;\n  stroke: #999;\n  stroke-width: 1;\n}\n\n.bc-theme-blueprint-framed {\n  --bc-frame-header-border-bottom: 1px solid #e0e0e0;\n  --bc-frame-header-margin-bottom: 0.5rem;\n  --bc-frame-footer-bg: #f8f8f8;\n  --bc-frame-footer-border-top: 1px solid #e0e0e0;\n  --bc-frame-footer-padding-top: 0.625rem;\n}\n\n[data-bs-theme=\"dark\"] .bc-frame.bc-theme-blueprint-bold {\n  --bc-frame-bg: #000000;\n  --bc-text-color: rgba(255, 255, 255, 0.95);\n  --bc-axis-color: rgba(255, 255, 255, 0.7);\n  --bc-grid-color: rgba(255, 255, 255, 0.12);\n}\n\n.blueprint-chart-error {\n  color: red;\n  padding: 1em;\n  border: 1px solid red;\n}\n\nbody {\n  margin: 0;\n  overflow: hidden;\n}\n\n/* Dark theme: activated by data-bs-theme=\"dark\" on the document (matching the\n   editor's convention). The chart owns these colors; the dark frame background\n   also drives the renderer's resolveBackgroundColor, so data-mark colors and\n   contrast labels adapt at render time. Scoped to .bc-frame so these override\n   the frame's own light --bc-frame-bg / --bc-text-color declarations (which are\n   set on .bc-frame and would otherwise shadow a document-level override). */\n[data-bs-theme=\"dark\"] body {\n  /* color themes above-bar value labels (fill: currentColor). */\n  background: #1c1c1c;\n  color: rgba(255, 255, 255, 0.9);\n}\n\n[data-bs-theme=\"dark\"] .bc-frame {\n  --bc-frame-bg: #1c1c1c;\n  --bc-text-color: rgba(255, 255, 255, 0.9);\n  --bc-axis-color: rgba(255, 255, 255, 0.6);\n  --bc-grid-color: #333;\n\n  color: rgba(255, 255, 255, 0.9);\n}\n";

package/dist/runtime-BnrDRLyH.js

@@ -0,0 +1,84 @@
+//#region src/runtime/chart-css.ts
+var e = "blueprint-chart-resize", t = "blueprint-chart-error";
+function n(e) {
+	return typeof e == "object" && e && e.type === "blueprint-chart-resize" && typeof e.height == "number" ? e.height : null;
+}
+function r(e) {
+	return typeof e == "object" && !!e && e.type === "blueprint-chart-error";
+}
+//#endregion
+//#region src/runtime/runtime.ts
+var i = a();
+function a() {
+	try {
+		if (typeof globalThis < "u") {
+			let e = globalThis.BLUEPRINT_CHART_RUNTIME_URL;
+			if (typeof e == "string" && e) return e;
+		}
+		return typeof document > "u" ? "" : document.currentScript?.src ?? "";
+	} catch {
+		return "";
+	}
+}
+var o = /* @__PURE__ */ new Map(), s = null;
+function c() {
+	s || (s = (e) => {
+		for (let [t, n] of o) if (e.source === t.contentWindow) {
+			n(e);
+			return;
+		}
+	}, window.addEventListener("message", s));
+}
+function l() {
+	c(), document.querySelectorAll("script[type=\"application/blueprint-chart\"]").forEach(u);
+}
+function u(e) {
+	let t = e.textContent?.trim();
+	if (!t) return;
+	let a = document.createElement("iframe");
+	a.className = "blueprint-chart-iframe", a.style.cssText = "border: none; width: 100%; display: block;", a.setAttribute("sandbox", "allow-scripts"), a.setAttribute("title", "Blueprint Chart"), e.parentNode?.insertBefore(a, e), a.srcdoc = d(t, i), o.set(a, (e) => {
+		let t = n(e.data);
+		if (t !== null) {
+			a.style.height = `${t}px`;
+			return;
+		}
+		r(e.data) && console.warn("Blueprint Chart: could not render embed.", e.data.message);
+	});
+}
+function d(n, r, i) {
+	let a = r ? `<script src="${p(r)}"><\/script>` : "", o = i === "dark" ? "<html data-bs-theme=\"dark\">" : "<html>", s = r ? [
+		"try {",
+		"  window.BlueprintChart.renderBpc(document.getElementById(\"chart\"), __BPC_SRC__);",
+		"}",
+		"catch (e) {",
+		`  parent.postMessage({ type: "${t}", message: String(e) }, "*");`,
+		"}"
+	] : [`parent.postMessage({ type: "${t}", message: "Blueprint Chart runtime URL unavailable" }, "*");`];
+	return [
+		"<!DOCTYPE html>",
+		`${o}<head>`,
+		"<style>\n/* Blueprint Chart — Runtime Embed Styles\n   CSS custom properties with baked-in defaults for standalone iframe usage. */\n\n.bc-frame {\n  --bc-frame-font-family: system-ui, -apple-system, sans-serif;\n  --bc-frame-padding: 0;\n  --bc-frame-bg: #fff;\n  --bc-text-color: #333;\n  font-family: var(--bc-frame-font-family);\n  background: var(--bc-frame-bg);\n  /* currentColor marks (e.g. above-bar value labels) follow the theme text\n     colour, not the ambient document colour. */\n  color: var(--bc-text-color, #333);\n}\n\n/* Keeps the SVG's baked-in background rect (applyCanvasBackground) in sync\n   with the frame background; transparentBackground sets the var to\n   transparent at runtime. */\n.bc-frame .bc-canvas-bg {\n  fill: var(--bc-frame-bg, #fff);\n}\n\n.bc-frame-header {\n  padding: var(--bc-frame-padding) var(--bc-frame-padding) 0;\n  background: var(--bc-frame-header-bg, transparent);\n  border-bottom: var(--bc-frame-header-border-bottom, none);\n  margin-bottom: var(--bc-frame-header-margin-bottom, 0);\n}\n\n.bc-frame-body {\n  padding: 0 var(--bc-frame-padding);\n}\n\n.bc-frame-title {\n  --bc-frame-title-color: var(--bc-text-color, #333);\n  --bc-frame-title-font-size: 1.25rem;\n  color: var(--bc-frame-title-color);\n  font-size: var(--bc-frame-title-font-size);\n  font-weight: bold;\n  margin: 0;\n}\n\n.bc-frame-description {\n  --bc-frame-description-color: var(--bc-text-color, #555);\n  --bc-frame-description-font-size: 0.875rem;\n  color: var(--bc-frame-description-color);\n  font-size: var(--bc-frame-description-font-size);\n  margin: 0.25rem 0 0;\n}\n\n.bc-frame-footer {\n  margin-top: 0.5rem;\n  gap: 0.25rem 1rem;\n  padding: var(--bc-frame-footer-padding-top, 0) var(--bc-frame-padding) var(--bc-frame-padding);\n  background: var(--bc-frame-footer-bg, transparent);\n  border-top: var(--bc-frame-footer-border-top, none);\n}\n\n.bc-frame-footer-left {\n  display: flex;\n  align-items: baseline;\n  flex-wrap: wrap;\n  gap: 0.25rem 0.75rem;\n}\n\n.bc-frame-footer-left > :not(:first-child)::before {\n  content: \"\\00B7\";\n  margin-right: 0.5rem;\n  color: var(--bc-text-color, #888);\n}\n\n.bc-frame-footer-right {\n  display: flex;\n  align-items: center;\n}\n\n.bc-frame-note {\n  --bc-frame-note-color: var(--bc-text-color, #888);\n  --bc-frame-note-font-size: 0.75rem;\n  font-style: italic;\n  color: var(--bc-frame-note-color);\n  font-size: var(--bc-frame-note-font-size);\n  margin: 0;\n  padding: 0 var(--bc-frame-padding);\n}\n\n.bc-frame-byline,\n.bc-frame-source {\n  --bc-frame-meta-color: var(--bc-text-color, #888);\n  --bc-frame-meta-font-size: 0.75rem;\n  color: var(--bc-frame-meta-color);\n  font-size: var(--bc-frame-meta-font-size);\n}\n\n.bc-frame-credit {\n  --bc-frame-credit-color: var(--bc-text-color, #666);\n  --bc-frame-credit-font-size: 0.75rem;\n  color: var(--bc-frame-credit-color);\n  font-size: var(--bc-frame-credit-font-size);\n  font-weight: 600;\n  display: inline-flex;\n  align-items: center;\n  text-decoration: none;\n}\n\n.bc-frame-source-link {\n  color: inherit;\n  text-decoration: underline;\n}\n\n.bc-axis .domain {\n  stroke: var(--bc-axis-color, #333);\n}\n\n.bc-axis .tick text {\n  fill: var(--bc-axis-color, #333);\n  font-size: 10px;\n}\n\n.bc-axis .tick line {\n  stroke: var(--bc-axis-color, #333);\n}\n\n.bc-grid-line {\n  stroke: var(--bc-grid-color, #e0e0e0);\n  stroke-width: 1;\n}\n\n.bc-zero-baseline {\n  stroke: #666;\n  stroke-width: 1;\n}\n\n.bc-bar {\n  /* fill is set via D3 .attr() from data-bound colors — do not override */\n}\n\n.bc-line {\n  fill: none;\n  stroke-width: 2;\n}\n\n.bc-value-label {\n  font-size: 11px;\n  /* fill is set via D3 .attr() — do not override */\n}\n\n.bc-direct-label {\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.bc-tooltip {\n  position: absolute;\n  pointer-events: none;\n  background: var(--bc-tooltip-bg, #fff);\n  color: var(--bc-tooltip-color, #212529);\n  border: 1px solid var(--bc-tooltip-border-color, #dee2e6);\n  border-radius: 4px;\n  padding: 6px 10px;\n  font-size: 13px;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.12);\n  z-index: 9999;\n  display: none;\n}\n\n.bc-crosshair {\n  stroke: #999;\n  stroke-width: 1;\n  pointer-events: none;\n}\n\n.bc-arc-label-line {\n  fill: none;\n  stroke: #999;\n  stroke-width: 1;\n}\n\n.bc-theme-blueprint-framed {\n  --bc-frame-header-border-bottom: 1px solid #e0e0e0;\n  --bc-frame-header-margin-bottom: 0.5rem;\n  --bc-frame-footer-bg: #f8f8f8;\n  --bc-frame-footer-border-top: 1px solid #e0e0e0;\n  --bc-frame-footer-padding-top: 0.625rem;\n}\n\n[data-bs-theme=\"dark\"] .bc-frame.bc-theme-blueprint-bold {\n  --bc-frame-bg: #000000;\n  --bc-text-color: rgba(255, 255, 255, 0.95);\n  --bc-axis-color: rgba(255, 255, 255, 0.7);\n  --bc-grid-color: rgba(255, 255, 255, 0.12);\n}\n\n.blueprint-chart-error {\n  color: red;\n  padding: 1em;\n  border: 1px solid red;\n}\n\nbody {\n  margin: 0;\n  overflow: hidden;\n}\n\n/* Dark theme: activated by data-bs-theme=\"dark\" on the document (matching the\n   editor's convention). The chart owns these colors; the dark frame background\n   also drives the renderer's resolveBackgroundColor, so data-mark colors and\n   contrast labels adapt at render time. Scoped to .bc-frame so these override\n   the frame's own light --bc-frame-bg / --bc-text-color declarations (which are\n   set on .bc-frame and would otherwise shadow a document-level override). */\n[data-bs-theme=\"dark\"] body {\n  /* color themes above-bar value labels (fill: currentColor). */\n  background: #1c1c1c;\n  color: rgba(255, 255, 255, 0.9);\n}\n\n[data-bs-theme=\"dark\"] .bc-frame {\n  --bc-frame-bg: #1c1c1c;\n  --bc-text-color: rgba(255, 255, 255, 0.9);\n  --bc-axis-color: rgba(255, 255, 255, 0.6);\n  --bc-grid-color: #333;\n\n  color: rgba(255, 255, 255, 0.9);\n}\n</style>",
+		"</head><body>",
+		"<div id=\"chart\" class=\"blueprint-chart-container\"></div>",
+		a,
+		"<script>",
+		`var __BPC_SRC__ = ${f(n)};`,
+		"function notifySize() {",
+		"  var h = document.documentElement.scrollHeight;",
+		`  parent.postMessage({ type: "${e}", height: h }, "*");`,
+		"}",
+		...s,
+		"notifySize();",
+		"new ResizeObserver(notifySize).observe(document.body);",
+		"<\/script>",
+		"</body></html>"
+	].filter(Boolean).join("\n");
+}
+function f(e) {
+	return JSON.stringify(e).replace(/</g, "\\u003c").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+}
+function p(e) {
+	return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+//#endregion
+export { r as a, e as i, l as n, n as o, t as r, d as t };

package/dist/runtime.d.ts

@@ -1,2 +1,2 @@
-export * from './runtime/index'
+export * from './runtime/index.js'
 export {}

package/dist/runtime.js

@@ -1,52 +1,49 @@
-import { i as p } from "./embed-DxKuPk6P.js";
-import { r as b } from "./render-bpc-CnZB0sa5.js";
-function h(m, e, s) {
-  let t = 0, c = !1;
-  const n = document.createElement("nav");
-  n.className = "blueprint-chart-scenes";
-  const o = document.createElement("button");
-  o.className = "blueprint-chart-scenes-prev", o.textContent = "Previous";
-  const a = document.createElement("button");
-  a.className = "blueprint-chart-scenes-next", a.textContent = "Next";
-  const l = document.createElement("span");
-  l.className = "blueprint-chart-scenes-counter", n.appendChild(o), n.appendChild(l), n.appendChild(a), e.length > 0 && m.appendChild(n);
-  function u() {
-    if (e.length === 0) {
-      l.textContent = "";
-      return;
-    }
-    l.textContent = `${t + 1} / ${e.length}`;
-  }
-  function r(d) {
-    if (c || e.length === 0 || !Number.isFinite(d))
-      return;
-    const i = (Math.floor(d) % e.length + e.length) % e.length;
-    t = i, u(), s(e[i], i);
-  }
-  return o.addEventListener("click", () => r(t - 1)), a.addEventListener("click", () => r(t + 1)), u(), {
-    get currentScene() {
-      return t;
-    },
-    get totalScenes() {
-      return e.length;
-    },
-    next() {
-      r(t + 1);
-    },
-    previous() {
-      r(t - 1);
-    },
-    goTo: r,
-    destroy() {
-      c || (c = !0, n.remove());
-    }
-  };
+import { t as e } from "./render-bpc-Bp2OTJmu.js";
+import { n as t } from "./runtime-BnrDRLyH.js";
+//#region src/runtime/scenes.ts
+function n(e, t, n) {
+	let r = 0, i = !1, a = document.createElement("nav");
+	a.className = "blueprint-chart-scenes";
+	let o = document.createElement("button");
+	o.className = "blueprint-chart-scenes-prev", o.textContent = "Previous";
+	let s = document.createElement("button");
+	s.className = "blueprint-chart-scenes-next", s.textContent = "Next";
+	let c = document.createElement("span");
+	c.className = "blueprint-chart-scenes-counter", a.appendChild(o), a.appendChild(c), a.appendChild(s), t.length > 0 && e.appendChild(a);
+	function l() {
+		if (t.length === 0) {
+			c.textContent = "";
+			return;
+		}
+		c.textContent = `${r + 1} / ${t.length}`;
+	}
+	function u(e) {
+		if (i || t.length === 0 || !Number.isFinite(e)) return;
+		let a = (Math.floor(e) % t.length + t.length) % t.length;
+		r = a, l(), n(t[a], a);
+	}
+	return o.addEventListener("click", () => u(r - 1)), s.addEventListener("click", () => u(r + 1)), l(), {
+		get currentScene() {
+			return r;
+		},
+		get totalScenes() {
+			return t.length;
+		},
+		next() {
+			u(r + 1);
+		},
+		previous() {
+			u(r - 1);
+		},
+		goTo: u,
+		destroy() {
+			i || (i = !0, a.remove());
+		}
+	};
 }
-const C = h;
-document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", p) : p();
-export {
-  h as createSceneController,
-  C as createStepController,
-  p as initBlueprint,
-  b as renderBpc
-};
+var r = n;
+//#endregion
+//#region src/runtime/index.ts
+document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", t) : t();
+//#endregion
+export { n as createSceneController, r as createStepController, t as initBlueprint, e as renderBpc };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueprint-chart/lib",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "DSL-driven charting library built on D3. Define charts as text, render them anywhere.",
   "keywords": [
     "chart",
@@ -62,25 +62,25 @@
     "provenance": true
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.7.5",
+    "@floating-ui/dom": "^1.8.0",
     "chroma-js": "^3.2.0",
-    "d3": "^7",
+    "d3": "^7.9.0",
     "d3-blueprint": "^0.1.7",
-    "d3-transition": "^3",
-    "dayjs": "^1.11.19"
+    "d3-transition": "^3.0.1",
+    "dayjs": "^1.11.21"
   },
   "devDependencies": {
     "@types/chroma-js": "^3.1.2",
-    "@types/d3": "^7",
+    "@types/d3": "^7.4.3",
     "@types/jsdom": "^21.1.7",
-    "peggy": "^4",
-    "typescript": "^5.7",
-    "vite": "^6",
-    "vite-plugin-dts": "^5.0.0",
-    "vitest": "^3"
+    "peggy": "^5.1.0",
+    "typescript": "^5.9.3",
+    "vite": "^8.2.1",
+    "vite-plugin-dts": "^5.0.3",
+    "vitest": "^4.1.10"
   },
   "optionalDependencies": {
-    "@napi-rs/canvas": "^0.1.100",
+    "@napi-rs/canvas": "^1.0.3",
     "@resvg/resvg-js": "^2.6.2",
     "jsdom": "^26.1.0"
   },

package/src/charts/chart.scss

@@ -21,6 +21,7 @@
 
 @use "themes/blueprint";
 @use "themes/blueprint-framed";
+@use "themes/blueprint-bold";
 
 // ---------------------------------------------------------------------------
 // Frame
@@ -33,6 +34,9 @@
 
   font-family: var(--bc-frame-font-family);
   background: var(--bc-frame-bg);
+  // currentColor marks (e.g. above-bar value labels) follow the theme text
+  // colour, not the ambient document colour.
+  color: var(--bc-text-color, #333);
 }
 
 // The chart SVG carries its own background rect (applyCanvasBackground in
@@ -87,8 +91,10 @@
     position: relative;
     z-index: 1;
     // Opaque background so the header covers SVG content behind it.
-    // Uses the card/container background or white as fallback.
-    background: var(--bc-frame-header-bg, var(--bs-card-bg, #fff));
+    // Falls back to the frame background (which themes such as blueprint-bold
+    // set) before the card/container background, so the cover matches the
+    // frame rather than flashing a light band over a dark themed canvas.
+    background: var(--bc-frame-header-bg, var(--bc-frame-bg, var(--bs-card-bg, #fff)));
   }
 
   .bc-frame-body {

package/dist/embed-DxKuPk6P.js

@@ -1,315 +0,0 @@
-const f = `
-/* Blueprint Chart — Runtime Embed Styles
-   CSS custom properties with baked-in defaults for standalone iframe usage. */
-
-.bc-frame {
-  --bc-frame-font-family: system-ui, -apple-system, sans-serif;
-  --bc-frame-padding: 0;
-  --bc-frame-bg: #fff;
-  --bc-text-color: #333;
-  font-family: var(--bc-frame-font-family);
-  background: var(--bc-frame-bg);
-}
-
-/* Keeps the SVG's baked-in background rect (applyCanvasBackground) in sync
-   with the frame background; transparentBackground sets the var to
-   transparent at runtime. */
-.bc-frame .bc-canvas-bg {
-  fill: var(--bc-frame-bg, #fff);
-}
-
-.bc-frame-header {
-  padding: var(--bc-frame-padding) var(--bc-frame-padding) 0;
-  background: var(--bc-frame-header-bg, transparent);
-  border-bottom: var(--bc-frame-header-border-bottom, none);
-  margin-bottom: var(--bc-frame-header-margin-bottom, 0);
-}
-
-.bc-frame-body {
-  padding: 0 var(--bc-frame-padding);
-}
-
-.bc-frame-title {
-  --bc-frame-title-color: var(--bc-text-color, #333);
-  --bc-frame-title-font-size: 1.25rem;
-  color: var(--bc-frame-title-color);
-  font-size: var(--bc-frame-title-font-size);
-  font-weight: bold;
-  margin: 0;
-}
-
-.bc-frame-description {
-  --bc-frame-description-color: var(--bc-text-color, #555);
-  --bc-frame-description-font-size: 0.875rem;
-  color: var(--bc-frame-description-color);
-  font-size: var(--bc-frame-description-font-size);
-  margin: 0.25rem 0 0;
-}
-
-.bc-frame-footer {
-  margin-top: 0.5rem;
-  gap: 0.25rem 1rem;
-  padding: var(--bc-frame-footer-padding-top, 0) var(--bc-frame-padding) var(--bc-frame-padding);
-  background: var(--bc-frame-footer-bg, transparent);
-  border-top: var(--bc-frame-footer-border-top, none);
-}
-
-.bc-frame-footer-left {
-  display: flex;
-  align-items: baseline;
-  flex-wrap: wrap;
-  gap: 0.25rem 0.75rem;
-}
-
-.bc-frame-footer-left > :not(:first-child)::before {
-  content: "\\00B7";
-  margin-right: 0.5rem;
-  color: var(--bc-text-color, #888);
-}
-
-.bc-frame-footer-right {
-  display: flex;
-  align-items: center;
-}
-
-.bc-frame-note {
-  --bc-frame-note-color: var(--bc-text-color, #888);
-  --bc-frame-note-font-size: 0.75rem;
-  font-style: italic;
-  color: var(--bc-frame-note-color);
-  font-size: var(--bc-frame-note-font-size);
-  margin: 0;
-  padding: 0 var(--bc-frame-padding);
-}
-
-.bc-frame-byline,
-.bc-frame-source {
-  --bc-frame-meta-color: var(--bc-text-color, #888);
-  --bc-frame-meta-font-size: 0.75rem;
-  color: var(--bc-frame-meta-color);
-  font-size: var(--bc-frame-meta-font-size);
-}
-
-.bc-frame-credit {
-  --bc-frame-credit-color: var(--bc-text-color, #666);
-  --bc-frame-credit-font-size: 0.75rem;
-  color: var(--bc-frame-credit-color);
-  font-size: var(--bc-frame-credit-font-size);
-  font-weight: 600;
-  display: inline-flex;
-  align-items: center;
-  text-decoration: none;
-}
-
-.bc-frame-source-link {
-  color: inherit;
-  text-decoration: underline;
-}
-
-.bc-axis .domain {
-  stroke: var(--bc-axis-color, #333);
-}
-
-.bc-axis .tick text {
-  fill: var(--bc-axis-color, #333);
-  font-size: 10px;
-}
-
-.bc-axis .tick line {
-  stroke: var(--bc-axis-color, #333);
-}
-
-.bc-grid-line {
-  stroke: var(--bc-grid-color, #e0e0e0);
-  stroke-width: 1;
-}
-
-.bc-zero-baseline {
-  stroke: #666;
-  stroke-width: 1;
-}
-
-.bc-bar {
-  /* fill is set via D3 .attr() from data-bound colors — do not override */
-}
-
-.bc-line {
-  fill: none;
-  stroke-width: 2;
-}
-
-.bc-value-label {
-  font-size: 11px;
-  /* fill is set via D3 .attr() — do not override */
-}
-
-.bc-direct-label {
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.bc-tooltip {
-  position: absolute;
-  pointer-events: none;
-  background: var(--bc-tooltip-bg, #fff);
-  color: var(--bc-tooltip-color, #212529);
-  border: 1px solid var(--bc-tooltip-border-color, #dee2e6);
-  border-radius: 4px;
-  padding: 6px 10px;
-  font-size: 13px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
-  z-index: 9999;
-  display: none;
-}
-
-.bc-crosshair {
-  stroke: #999;
-  stroke-width: 1;
-  pointer-events: none;
-}
-
-.bc-arc-label-line {
-  fill: none;
-  stroke: #999;
-  stroke-width: 1;
-}
-
-.bc-theme-blueprint-framed {
-  --bc-frame-header-border-bottom: 1px solid #e0e0e0;
-  --bc-frame-header-margin-bottom: 0.5rem;
-  --bc-frame-footer-bg: #f8f8f8;
-  --bc-frame-footer-border-top: 1px solid #e0e0e0;
-  --bc-frame-footer-padding-top: 0.625rem;
-}
-
-.blueprint-chart-error {
-  color: red;
-  padding: 1em;
-  border: 1px solid red;
-}
-
-body {
-  margin: 0;
-  overflow: hidden;
-}
-
-/* Dark theme: activated by data-bs-theme="dark" on the document (matching the
-   editor's convention). The chart owns these colors; the dark frame background
-   also drives the renderer's resolveBackgroundColor, so data-mark colors and
-   contrast labels adapt at render time. Scoped to .bc-frame so these override
-   the frame's own light --bc-frame-bg / --bc-text-color declarations (which are
-   set on .bc-frame and would otherwise shadow a document-level override). */
-[data-bs-theme="dark"] body {
-  /* color themes above-bar value labels (fill: currentColor). */
-  background: #1c1c1c;
-  color: rgba(255, 255, 255, 0.9);
-}
-
-[data-bs-theme="dark"] .bc-frame {
-  --bc-frame-bg: #1c1c1c;
-  --bc-text-color: rgba(255, 255, 255, 0.9);
-  --bc-axis-color: rgba(255, 255, 255, 0.6);
-  --bc-grid-color: #333;
-
-  color: rgba(255, 255, 255, 0.9);
-}
-`, b = "blueprint-chart-resize", s = "blueprint-chart-error";
-function m(e) {
-  return typeof e == "object" && e !== null && e.type === b && typeof e.height == "number" ? e.height : null;
-}
-function p(e) {
-  return typeof e == "object" && e !== null && e.type === s;
-}
-const g = u();
-function u() {
-  var e;
-  try {
-    if (typeof globalThis < "u") {
-      const r = globalThis.BLUEPRINT_CHART_RUNTIME_URL;
-      if (typeof r == "string" && r)
-        return r;
-    }
-    return typeof document > "u" ? "" : ((e = document.currentScript) == null ? void 0 : e.src) ?? "";
-  } catch {
-    return "";
-  }
-}
-const d = /* @__PURE__ */ new Map();
-let i = null;
-function h() {
-  i || (i = (e) => {
-    for (const [r, t] of d)
-      if (e.source === r.contentWindow) {
-        t(e);
-        return;
-      }
-  }, window.addEventListener("message", i));
-}
-function w() {
-  h(), document.querySelectorAll(
-    'script[type="application/blueprint-chart"]'
-  ).forEach(v);
-}
-function v(e) {
-  var o, a;
-  const r = (o = e.textContent) == null ? void 0 : o.trim();
-  if (!r)
-    return;
-  const t = document.createElement("iframe");
-  t.className = "blueprint-chart-iframe", t.style.cssText = "border: none; width: 100%; display: block;", t.setAttribute("sandbox", "allow-scripts"), t.setAttribute("title", "Blueprint Chart"), (a = e.parentNode) == null || a.insertBefore(t, e), t.srcdoc = y(r, g);
-  const n = (c) => {
-    const l = m(c.data);
-    if (l !== null) {
-      t.style.height = `${l}px`;
-      return;
-    }
-    p(c.data) && console.warn("Blueprint Chart: could not render embed.", c.data.message);
-  };
-  d.set(t, n);
-}
-function y(e, r, t) {
-  const n = r ? `<script src="${k(r)}"><\/script>` : "", o = t === "dark" ? '<html data-bs-theme="dark">' : "<html>", a = r ? [
-    "try {",
-    '  window.BlueprintChart.renderBpc(document.getElementById("chart"), __BPC_SRC__);',
-    "}",
-    "catch (e) {",
-    `  parent.postMessage({ type: "${s}", message: String(e) }, "*");`,
-    "}"
-  ] : [
-    `parent.postMessage({ type: "${s}", message: "Blueprint Chart runtime URL unavailable" }, "*");`
-  ];
-  return [
-    "<!DOCTYPE html>",
-    `${o}<head>`,
-    `<style>${f}</style>`,
-    "</head><body>",
-    '<div id="chart" class="blueprint-chart-container"></div>',
-    n,
-    "<script>",
-    `var __BPC_SRC__ = ${x(e)};`,
-    "function notifySize() {",
-    "  var h = document.documentElement.scrollHeight;",
-    `  parent.postMessage({ type: "${b}", height: h }, "*");`,
-    "}",
-    ...a,
-    "notifySize();",
-    "new ResizeObserver(notifySize).observe(document.body);",
-    "<\/script>",
-    "</body></html>"
-  ].filter(Boolean).join(`
-`);
-}
-function x(e) {
-  return JSON.stringify(e).replace(/</g, "\\u003c").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
-}
-function k(e) {
-  return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-}
-export {
-  s as E,
-  b as R,
-  p as a,
-  y as b,
-  w as i,
-  m as r
-};

package/dist/node-backend/errors-poq5BHAK.js

@@ -1,8 +0,0 @@
-class s extends Error {
-  constructor(r) {
-    super(r), this.name = "MissingNodeRenderDepsError";
-  }
-}
-export {
-  s as M
-};