@blueprint-chart/lib 2.1.0 → 2.2.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  /* Per-side properties so a multi-value `padding` shorthand never lands in a\n     single-value shorthand slot, which would invalidate the whole declaration. */\n  --bc-frame-padding-top: var(--bc-frame-padding);\n  --bc-frame-padding-right: var(--bc-frame-padding);\n  --bc-frame-padding-bottom: var(--bc-frame-padding);\n  --bc-frame-padding-left: var(--bc-frame-padding);\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/* `theme = \"dark\"` emits this class on the frame, so it carries the same\n   surface the document-level dark mode does, without depending on an ambient\n   data-bs-theme. Keep in sync with DARK_THEME in render/frame-svg.ts. */\n.bc-frame.bc-theme-dark {\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\n.bc-frame-header {\n  padding: var(--bc-frame-padding-top) var(--bc-frame-padding-right) 0 var(--bc-frame-padding-left);\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-right) 0 var(--bc-frame-padding-left);\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  white-space: pre-line;\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  white-space: pre-line;\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-right) var(--bc-frame-padding-bottom) var(--bc-frame-padding-left);\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-right) 0 var(--bc-frame-padding-left);\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-byline {\n  white-space: pre-line;\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";
+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  /* Per-side properties so a multi-value `padding` shorthand never lands in a\n     single-value shorthand slot, which would invalidate the whole declaration. */\n  --bc-frame-padding-top: var(--bc-frame-padding);\n  --bc-frame-padding-right: var(--bc-frame-padding);\n  --bc-frame-padding-bottom: var(--bc-frame-padding);\n  --bc-frame-padding-left: var(--bc-frame-padding);\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/* `theme = \"dark\"` emits this class on the frame, so it carries the same\n   surface the document-level dark mode does, without depending on an ambient\n   data-bs-theme. Keep in sync with DARK_THEME in render/frame-svg.ts. */\n.bc-frame.bc-theme-dark {\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\n.bc-frame-header {\n  padding: var(--bc-frame-padding-top) var(--bc-frame-padding-right) 0 var(--bc-frame-padding-left);\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-right) 0 var(--bc-frame-padding-left);\n}\n\n/* Constrained-height mode (`heightMode` fixed or aspect-ratio). post-render.ts\n   adds .bc-frame--constrained and layout-constraints.ts pins the container\n   height with overflow: hidden; without these rules the frame renders at its\n   natural height and is guillotined. Mirrors chart.scss \u2014 keep the two in\n   sync. */\n/* An axis label moved inside the plot sits directly on the marks; painting the\n   stroke first keeps it readable over a filled band. */\n.bc-axis-label-inside {\n  paint-order: stroke;\n  stroke: var(--bc-frame-bg, #fff);\n  stroke-width: 3px;\n  stroke-linejoin: round;\n}\n\n.bc-frame--constrained {\n  flex: 1;\n  position: relative;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.bc-frame--constrained .bc-frame-header {\n  position: relative;\n  z-index: 1;\n  background: var(--bc-frame-header-bg, var(--bc-frame-bg, #fff));\n}\n\n.bc-frame--constrained .bc-frame-body {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  overflow: hidden;\n}\n\n.bc-frame--constrained .bc-frame-note {\n  position: absolute;\n  bottom: var(--bc-footer-h, 0);\n  left: 0;\n  right: 0;\n  z-index: 1;\n}\n\n.bc-frame--constrained .bc-frame-footer {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 1;\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  white-space: pre-line;\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  white-space: pre-line;\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-right) var(--bc-frame-padding-bottom) var(--bc-frame-padding-left);\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-right) 0 var(--bc-frame-padding-left);\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-byline {\n  white-space: pre-line;\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-gzeMNwqx.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  /* Per-side properties so a multi-value `padding` shorthand never lands in a\n     single-value shorthand slot, which would invalidate the whole declaration. */\n  --bc-frame-padding-top: var(--bc-frame-padding);\n  --bc-frame-padding-right: var(--bc-frame-padding);\n  --bc-frame-padding-bottom: var(--bc-frame-padding);\n  --bc-frame-padding-left: var(--bc-frame-padding);\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/* `theme = \"dark\"` emits this class on the frame, so it carries the same\n   surface the document-level dark mode does, without depending on an ambient\n   data-bs-theme. Keep in sync with DARK_THEME in render/frame-svg.ts. */\n.bc-frame.bc-theme-dark {\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\n.bc-frame-header {\n  padding: var(--bc-frame-padding-top) var(--bc-frame-padding-right) 0 var(--bc-frame-padding-left);\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-right) 0 var(--bc-frame-padding-left);\n}\n\n/* Constrained-height mode (`heightMode` fixed or aspect-ratio). post-render.ts\n   adds .bc-frame--constrained and layout-constraints.ts pins the container\n   height with overflow: hidden; without these rules the frame renders at its\n   natural height and is guillotined. Mirrors chart.scss — keep the two in\n   sync. */\n/* An axis label moved inside the plot sits directly on the marks; painting the\n   stroke first keeps it readable over a filled band. */\n.bc-axis-label-inside {\n  paint-order: stroke;\n  stroke: var(--bc-frame-bg, #fff);\n  stroke-width: 3px;\n  stroke-linejoin: round;\n}\n\n.bc-frame--constrained {\n  flex: 1;\n  position: relative;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.bc-frame--constrained .bc-frame-header {\n  position: relative;\n  z-index: 1;\n  background: var(--bc-frame-header-bg, var(--bc-frame-bg, #fff));\n}\n\n.bc-frame--constrained .bc-frame-body {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  overflow: hidden;\n}\n\n.bc-frame--constrained .bc-frame-note {\n  position: absolute;\n  bottom: var(--bc-footer-h, 0);\n  left: 0;\n  right: 0;\n  z-index: 1;\n}\n\n.bc-frame--constrained .bc-frame-footer {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 1;\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  white-space: pre-line;\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  white-space: pre-line;\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-right) var(--bc-frame-padding-bottom) var(--bc-frame-padding-left);\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-right) 0 var(--bc-frame-padding-left);\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-byline {\n  white-space: pre-line;\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.js

@@ -1,5 +1,5 @@
-import { t as e } from "./render-bpc-BSt4wOjf.js";
-import { n as t } from "./runtime-DDhsXDn5.js";
+import { t as e } from "./render-bpc-C4y50x4-.js";
+import { n as t } from "./runtime-gzeMNwqx.js";
 //#region src/runtime/scenes.ts
 function n(e, t, n) {
 	let r = 0, i = !1, a = document.createElement("nav");

package/dist/transforms/table.d.ts

@@ -12,7 +12,6 @@ export declare function isNumberValue(value: string): boolean;
 export declare function detectColumnTypes(columns: string[], rows: string[][]): ColumnType[];
 /** Read a `data { … }` body into the table the pipeline operates on. */
 export declare function parseBpcData(raw: string): TransformResult;
-/** Write a table back as a `data { … }` body. */
 export declare function serializeTableData(cols: string[], rows: string[][]): string;
 /**
  * Rebuild a table from parsed chart data, for the steps that run on top of an

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueprint-chart/lib",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "DSL-driven charting library built on D3. Define charts as text, render them anywhere.",
   "keywords": [
     "chart",

package/src/charts/chart.scss

@@ -428,6 +428,27 @@
   // Do NOT set fill in CSS — it would break contrast-based readability.
 }
 
+// An axis label moved inside the plot sits directly on the marks. Painting the
+// stroke first gives it a background the colour of the frame, so it stays
+// readable over a filled band instead of running at about 2:1 contrast.
+.bc-axis-label-inside {
+  paint-order: stroke;
+  stroke: var(--bc-frame-bg, #fff);
+  stroke-width: 3px;
+  stroke-linejoin: round;
+}
+
+// Text painted over a mark is decorative, and it sits exactly where a user
+// aims to hover. Without this it swallows mouseenter and the mark below it
+// gets no tooltip and no crosshair.
+.bc-value-label,
+.bc-direct-label,
+.bc-arc-direct-label,
+.bc-arc-inside-label,
+.bc-arc-label-line {
+  pointer-events: none;
+}
+
 // ---------------------------------------------------------------------------
 // Direct labels (line-multi, bar-multi)
 // ---------------------------------------------------------------------------

package/dist/runtime-DDhsXDn5.js

@@ -1,84 +0,0 @@
-//#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  /* Per-side properties so a multi-value `padding` shorthand never lands in a\n     single-value shorthand slot, which would invalidate the whole declaration. */\n  --bc-frame-padding-top: var(--bc-frame-padding);\n  --bc-frame-padding-right: var(--bc-frame-padding);\n  --bc-frame-padding-bottom: var(--bc-frame-padding);\n  --bc-frame-padding-left: var(--bc-frame-padding);\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/* `theme = \"dark\"` emits this class on the frame, so it carries the same\n   surface the document-level dark mode does, without depending on an ambient\n   data-bs-theme. Keep in sync with DARK_THEME in render/frame-svg.ts. */\n.bc-frame.bc-theme-dark {\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\n.bc-frame-header {\n  padding: var(--bc-frame-padding-top) var(--bc-frame-padding-right) 0 var(--bc-frame-padding-left);\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-right) 0 var(--bc-frame-padding-left);\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  white-space: pre-line;\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  white-space: pre-line;\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-right) var(--bc-frame-padding-bottom) var(--bc-frame-padding-left);\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-right) 0 var(--bc-frame-padding-left);\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-byline {\n  white-space: pre-line;\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 };