@blueprint-chart/lib 1.2.0 → 1.4.0

package/dist/{embed-WUb0NtY5.js → embed-DxKuPk6P.js}

@@ -1,4 +1,4 @@
-const d = `
+const f = `
 /* Blueprint Chart — Runtime Embed Styles
    CSS custom properties with baked-in defaults for standalone iframe usage. */
 
@@ -192,15 +192,36 @@ body {
   margin: 0;
   overflow: hidden;
 }
-`, f = "blueprint-chart-resize", i = "blueprint-chart-error";
+
+/* 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 === f && typeof e.height == "number" ? e.height : null;
+  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 === i;
+  return typeof e == "object" && e !== null && e.type === s;
 }
-const u = g();
-function g() {
+const g = u();
+function u() {
   var e;
   try {
     if (typeof globalThis < "u") {
@@ -213,64 +234,64 @@ function g() {
     return "";
   }
 }
-const b = /* @__PURE__ */ new Map();
-let n = null;
+const d = /* @__PURE__ */ new Map();
+let i = null;
 function h() {
-  n || (n = (e) => {
-    for (const [r, t] of b)
+  i || (i = (e) => {
+    for (const [r, t] of d)
       if (e.source === r.contentWindow) {
         t(e);
         return;
       }
-  }, window.addEventListener("message", n));
+  }, window.addEventListener("message", i));
 }
-function k() {
+function w() {
   h(), document.querySelectorAll(
     'script[type="application/blueprint-chart"]'
   ).forEach(v);
 }
 function v(e) {
-  var c, s;
-  const r = (c = e.textContent) == null ? void 0 : c.trim();
+  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"), (s = e.parentNode) == null || s.insertBefore(t, e), t.srcdoc = y(r, u);
-  const o = (a) => {
-    const l = m(a.data);
+  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(a.data) && console.warn("Blueprint Chart: could not render embed.", a.data.message);
+    p(c.data) && console.warn("Blueprint Chart: could not render embed.", c.data.message);
   };
-  b.set(t, o);
+  d.set(t, n);
 }
-function y(e, r) {
-  const t = r ? `<script src="${z(r)}"><\/script>` : "", o = r ? [
+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: "${i}", message: String(e) }, "*");`,
+    `  parent.postMessage({ type: "${s}", message: String(e) }, "*");`,
     "}"
   ] : [
-    `parent.postMessage({ type: "${i}", message: "Blueprint Chart runtime URL unavailable" }, "*");`
+    `parent.postMessage({ type: "${s}", message: "Blueprint Chart runtime URL unavailable" }, "*");`
   ];
   return [
     "<!DOCTYPE html>",
-    "<html><head>",
-    `<style>${d}</style>`,
+    `${o}<head>`,
+    `<style>${f}</style>`,
     "</head><body>",
     '<div id="chart" class="blueprint-chart-container"></div>',
-    t,
+    n,
     "<script>",
     `var __BPC_SRC__ = ${x(e)};`,
     "function notifySize() {",
     "  var h = document.documentElement.scrollHeight;",
-    `  parent.postMessage({ type: "${f}", height: h }, "*");`,
+    `  parent.postMessage({ type: "${b}", height: h }, "*");`,
     "}",
-    ...o,
+    ...a,
     "notifySize();",
     "new ResizeObserver(notifySize).observe(document.body);",
     "<\/script>",
@@ -281,14 +302,14 @@ function y(e, r) {
 function x(e) {
   return JSON.stringify(e).replace(/</g, "\\u003c").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
 }
-function z(e) {
+function k(e) {
   return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
 export {
-  i as E,
-  f as R,
+  s as E,
+  b as R,
   p as a,
   y as b,
-  k as i,
+  w as i,
   m as r
 };

package/dist/embed.d.ts

@@ -1,2 +1,3 @@
 export { buildSrcdoc } from './runtime/runtime';
+export type { EmbedTheme } from './runtime/runtime';
 export { readResizeHeight, isErrorMessage, RESIZE_MESSAGE, ERROR_MESSAGE } from './runtime/messages';

package/dist/embed.js

@@ -1,4 +1,4 @@
-import { E as a, R as r, b as e, a as R, r as S } from "./embed-WUb0NtY5.js";
+import { E as a, R as r, b as e, a as R, r as S } from "./embed-DxKuPk6P.js";
 export {
   a as ERROR_MESSAGE,
   r as RESIZE_MESSAGE,

package/dist/index.js

@@ -1,7 +1,7 @@
 import { g as P, A as g, l as T, p as _, C as q, a as G, b as N, c as H, d as K } from "./render-bpc-CnZB0sa5.js";
 import { e as sn, f as ln, h as cn, B as un, i as hn, j as dn, k as pn, m as fn, D as mn, n as gn, o as bn, F as yn, G as wn, I as vn, L as Sn, q as kn, s as $n, t as Cn, O as An, R as Tn, S as En, u as Bn, v as Pn, w as xn, x as Dn, y as In, z as Un, E as zn, H as Nn, T as On, V as Mn, J as Ln, K as Fn, M as Rn, N as jn, P as _n, Q as qn, U as Gn, W as Hn, X as Kn, Y as Vn, Z as Wn, _ as Jn, $ as Yn, a0 as Zn, a1 as Qn, a2 as Xn, a3 as et, a4 as nt, a5 as tt, a6 as rt, a7 as ot, a8 as at, a9 as it, aa as st, r as lt, ab as ct, ac as ut, ad as ht, ae as dt, af as pt, ag as ft, ah as mt, ai as gt, aj as bt, ak as yt, al as wt, am as vt, an as St, ao as kt } from "./render-bpc-CnZB0sa5.js";
 import E from "chroma-js";
-import { b as Ct } from "./embed-WUb0NtY5.js";
+import { b as Ct } from "./embed-DxKuPk6P.js";
 import "d3";
 const V = [
   { intent: "range", pattern: /\b(range|high and low|high\/low|margin of error|confidence interval|confidence|interval|plus or minus|spread between)\b/i },

package/dist/lib/lib.iife.js

@@ -192,7 +192,28 @@ body {
   margin: 0;
   overflow: hidden;
 }
-`,wr="blueprint-chart-resize",fs="blueprint-chart-error";function S0(t){return typeof t=="object"&&t!==null&&t.type===wr&&typeof t.height=="number"?t.height:null}function M0(t){return typeof t=="object"&&t!==null&&t.type===fs}const $0=L0();function L0(){var t;try{if(typeof globalThis<"u"){const n=globalThis.BLUEPRINT_CHART_RUNTIME_URL;if(typeof n=="string"&&n)return n}return typeof document>"u"?"":((t=document.currentScript)==null?void 0:t.src)??""}catch{return""}}const ic=new Map;let us=null;function C0(){us||(us=t=>{for(const[n,e]of ic)if(t.source===n.contentWindow){e(t);return}},window.addEventListener("message",us))}function hs(){C0(),document.querySelectorAll('script[type="application/blueprint-chart"]').forEach(T0)}function T0(t){var a,i;const n=(a=t.textContent)==null?void 0:a.trim();if(!n)return;const e=document.createElement("iframe");e.className="blueprint-chart-iframe",e.style.cssText="border: none; width: 100%; display: block;",e.setAttribute("sandbox","allow-scripts"),e.setAttribute("title","Blueprint Chart"),(i=t.parentNode)==null||i.insertBefore(e,t),e.srcdoc=O0(n,$0);const r=o=>{const s=S0(o.data);if(s!==null){e.style.height=`${s}px`;return}M0(o.data)&&console.warn("Blueprint Chart: could not render embed.",o.data.message)};ic.set(e,r)}function O0(t,n){const e=n?`<script src="${E0(n)}"><\/script>`:"",r=n?["try {",'  window.BlueprintChart.renderBpc(document.getElementById("chart"), __BPC_SRC__);',"}","catch (e) {",`  parent.postMessage({ type: "${fs}", message: String(e) }, "*");`,"}"]:[`parent.postMessage({ type: "${fs}", message: "Blueprint Chart runtime URL unavailable" }, "*");`];return["<!DOCTYPE html>","<html><head>",`<style>${Wn}</style>`,"</head><body>",'<div id="chart" class="blueprint-chart-container"></div>',e,"<script>",`var __BPC_SRC__ = ${N0(t)};`,"function notifySize() {","  var h = document.documentElement.scrollHeight;",`  parent.postMessage({ type: "${wr}", height: h }, "*");`,"}",...r,"notifySize();","new ResizeObserver(notifySize).observe(document.body);","<\/script>","</body></html>"].filter(Boolean).join(`
+
+/* 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);
+}
+`,wr="blueprint-chart-resize",fs="blueprint-chart-error";function S0(t){return typeof t=="object"&&t!==null&&t.type===wr&&typeof t.height=="number"?t.height:null}function M0(t){return typeof t=="object"&&t!==null&&t.type===fs}const $0=L0();function L0(){var t;try{if(typeof globalThis<"u"){const n=globalThis.BLUEPRINT_CHART_RUNTIME_URL;if(typeof n=="string"&&n)return n}return typeof document>"u"?"":((t=document.currentScript)==null?void 0:t.src)??""}catch{return""}}const ic=new Map;let us=null;function C0(){us||(us=t=>{for(const[n,e]of ic)if(t.source===n.contentWindow){e(t);return}},window.addEventListener("message",us))}function hs(){C0(),document.querySelectorAll('script[type="application/blueprint-chart"]').forEach(T0)}function T0(t){var a,i;const n=(a=t.textContent)==null?void 0:a.trim();if(!n)return;const e=document.createElement("iframe");e.className="blueprint-chart-iframe",e.style.cssText="border: none; width: 100%; display: block;",e.setAttribute("sandbox","allow-scripts"),e.setAttribute("title","Blueprint Chart"),(i=t.parentNode)==null||i.insertBefore(e,t),e.srcdoc=O0(n,$0);const r=o=>{const s=S0(o.data);if(s!==null){e.style.height=`${s}px`;return}M0(o.data)&&console.warn("Blueprint Chart: could not render embed.",o.data.message)};ic.set(e,r)}function O0(t,n,e){const r=n?`<script src="${E0(n)}"><\/script>`:"",a="<html>",i=n?["try {",'  window.BlueprintChart.renderBpc(document.getElementById("chart"), __BPC_SRC__);',"}","catch (e) {",`  parent.postMessage({ type: "${fs}", message: String(e) }, "*");`,"}"]:[`parent.postMessage({ type: "${fs}", message: "Blueprint Chart runtime URL unavailable" }, "*");`];return["<!DOCTYPE html>",`${a}<head>`,`<style>${Wn}</style>`,"</head><body>",'<div id="chart" class="blueprint-chart-container"></div>',r,"<script>",`var __BPC_SRC__ = ${N0(t)};`,"function notifySize() {","  var h = document.documentElement.scrollHeight;",`  parent.postMessage({ type: "${wr}", height: h }, "*");`,"}",...i,"notifySize();","new ResizeObserver(notifySize).observe(document.body);","<\/script>","</body></html>"].filter(Boolean).join(`
 `)}function N0(t){return JSON.stringify(t).replace(/</g,"\\u003c").replace(/\u2028/g,"\\u2028").replace(/\u2029/g,"\\u2029")}function E0(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function oc(t){let n=0;for(const e of t)e.type==="data"&&n++;return n}function D0(t){const n={properties:[],data:null,colorizes:[],highlights:[],areaFills:[],annotations:[],series:[],scenes:[],transforms:[]};for(const e of t)switch(e.type){case"property":n.properties.push(e);break;case"data":n.data=e;break;case"colorize":n.colorizes.push(e);break;case"highlight":n.highlights.push(e);break;case"area-fill":n.areaFills.push(e);break;case"annotation":n.annotations.push(e);break;case"series":n.series.push(e);break;case"scene":n.scenes.push(e);break;case"transform":n.transforms.push(e);break}return n}function P0(t){const n={properties:[],data:null,colorizes:[],highlights:[],areaFills:[],annotations:[],series:[],transforms:[]};for(const e of t)switch(e.type){case"property":n.properties.push(e);break;case"data":n.data=e;break;case"colorize":n.colorizes.push(e);break;case"highlight":n.highlights.push(e);break;case"area-fill":n.areaFills.push(e);break;case"annotation":n.annotations.push(e);break;case"series":n.series.push(e);break;case"transform":n.transforms.push(e);break}return n}function z0(t,n){function e(){this.constructor=t}e.prototype=n.prototype,t.prototype=new e}function Ar(t,n,e,r){var a=Error.call(this,t);return Object.setPrototypeOf&&Object.setPrototypeOf(a,Ar.prototype),a.expected=n,a.found=e,a.location=r,a.name="SyntaxError",a}z0(Ar,Error);function ds(t,n,e){return e=e||" ",t.length>n?t:(n-=t.length,e+=e.repeat(n),t+e.slice(0,n))}Ar.prototype.format=function(t){var n="Error: "+this.message;if(this.location){var e=null,r;for(r=0;r<t.length;r++)if(t[r].source===this.location.source){e=t[r].text.split(/\r\n|\n|\r/g);break}var a=this.location.start,i=this.location.source&&typeof this.location.source.offset=="function"?this.location.source.offset(a):a,o=this.location.source+":"+i.line+":"+i.column;if(e){var s=this.location.end,l=ds("",i.line.toString().length," "),c=e[a.line-1],f=a.line===s.line?s.column:c.length+1,h=f-a.column||1;n+=`
  --> `+o+`
 `+l+` |

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";
+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";

package/dist/runtime/runtime.d.ts

@@ -1,3 +1,10 @@
 export declare function initBlueprint(): void;
 export declare function teardownBlueprint(): void;
-export declare function buildSrcdoc(dsl: string, runtimeUrl: string): string;
+/**
+ * CSS-variable overrides applied to the chart frame inside the iframe, so a
+ * host can theme the chart chrome (background, text, axis, grid) to match its
+ * own surface. Omit for the default light chrome. Data-mark colors come from
+ * the chart's palette and are not affected.
+ */
+export type EmbedTheme = 'light' | 'dark';
+export declare function buildSrcdoc(dsl: string, runtimeUrl: string, theme?: EmbedTheme): string;

package/dist/runtime.js

@@ -1,4 +1,4 @@
-import { i as p } from "./embed-WUb0NtY5.js";
+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;

package/package.json

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