@blueprint-chart/lib 1.1.0 → 1.3.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";
+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/index.d.ts

@@ -1,4 +1,5 @@
 import { initBlueprint } from './runtime';
 export { initBlueprint };
+export { renderBpc } from '../render/render-bpc';
 export { createSceneController, createStepController } from './scenes';
 export type { SceneDefinition, SceneController, StepDefinition, StepController } from './scenes';

package/dist/runtime/messages.d.ts

@@ -0,0 +1,10 @@
+export declare const RESIZE_MESSAGE = "blueprint-chart-resize";
+export declare const ERROR_MESSAGE = "blueprint-chart-error";
+/**
+ * Validate a `message` event payload as a resize notification and return the
+ * measured height, or null if the payload is not a well-formed resize message.
+ * Callers must still confirm the event originated from their own iframe.
+ */
+export declare function readResizeHeight(data: unknown): number | null;
+/** True when the payload is a well-formed render-error notification. */
+export declare function isErrorMessage(data: unknown): boolean;

package/dist/runtime/runtime.d.ts

@@ -1,2 +1,10 @@
 export declare function initBlueprint(): void;
 export declare function teardownBlueprint(): void;
+/**
+ * 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.d.ts

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

package/dist/runtime.js

@@ -0,0 +1,52 @@
+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());
+    }
+  };
+}
+const C = h;
+document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", p) : p();
+export {
+  h as createSceneController,
+  C as createStepController,
+  p as initBlueprint,
+  b as renderBpc
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueprint-chart/lib",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "DSL-driven charting library built on D3. Define charts as text, render them anywhere.",
   "keywords": [
     "chart",
@@ -37,8 +37,19 @@
       "browser": "./dist/node-backend/browser.js",
       "default": "./dist/node-backend/browser.js"
     },
+    "./embed": {
+      "types": "./dist/embed.d.ts",
+      "import": "./dist/embed.js",
+      "default": "./dist/embed.js"
+    },
+    "./runtime": {
+      "types": "./dist/runtime/index.d.ts",
+      "import": "./dist/runtime.js",
+      "default": "./dist/runtime.js"
+    },
     "./charts.scss": "./src/charts/chart.scss",
-    "./src/charts/chart.scss": "./src/charts/chart.scss"
+    "./src/charts/chart.scss": "./src/charts/chart.scss",
+    "./embed-runtime.js": "./dist/lib/lib.iife.js"
   },
   "files": [
     "dist",