@blueprint-chart/lib 2.17.1 → 2.18.0

package/dist/{render-bpc-DZF2uugG.js → render-bpc-jhkrsEsh.js}

@@ -1,4 +1,4 @@
-import { s as e } from "./runtime-xftta_35.js";
+import { s as e } from "./runtime-BTUG9Tha.js";
 import * as t from "d3";
 import "d3-transition";
 import { D3Blueprint as n } from "d3-blueprint";

package/dist/runtime/index.d.ts

@@ -3,3 +3,5 @@ export { initBlueprint };
 export { renderBpc } from '../render/render-bpc';
 export { createSceneController, createStepController } from './scenes';
 export type { SceneDefinition, SceneController, StepDefinition, StepController } from './scenes';
+export { mountScenePlayer } from './player';
+export type { PlayerConfig, PlayerPosition, PlayerType } from './player';

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

@@ -0,0 +1 @@
+export declare const PLAYER_CSS: string;

package/dist/runtime/player.d.ts

@@ -0,0 +1,15 @@
+export type PlayerType = 'buttons' | 'progress-bar' | 'dot-stepper' | 'minimal-arrows';
+export type PlayerPosition = 'left' | 'center' | 'right';
+export interface PlayerState {
+    current: number;
+    total: number;
+    playing: boolean;
+    position: PlayerPosition;
+}
+export interface PlayerConfig {
+    type: PlayerType;
+    position: PlayerPosition;
+    total: number;
+}
+export declare function scenePlayerHtml(type: PlayerType, state: PlayerState): string;
+export declare function mountScenePlayer(chart: HTMLElement, config: PlayerConfig, onStep: (step: number) => void): void;

package/dist/{runtime-xftta_35.js → runtime-BTUG9Tha.js}

@@ -180,7 +180,7 @@ var o = class extends SyntaxError {
 };
 function s(e, t) {
 	t = t === void 0 ? {} : t;
-	let n = {}, s = t.grammarSource, c = { Chart: Wt }, l = Wt, u = "chart", d = "data", f = "colorize", p = "highlight", m = "area-fill", h = "annotation", g = "range", _ = "note", v = "series", ee = "scene", te = "transform", y = /^[ \t]/, ne = /^[^\t\n\r{}=]/, re = /^[a-zA-Z_#]/, ie = /^[a-zA-Z0-9_#\-]/, b = /^[0-9]/, ae = /^[eE]/, oe = /^[+\-]/, se = /^[^"\\]/, x = /^[0-9a-fA-F]/, S = /^[^\n]/, C = /^[ \t\n\r]/, ce = V("chart", !1), w = V("{", !1), T = V("}", !1), E = H([" ", "	"], !1, !1, !1), le = V("data", !1), ue = V("=", !1), de = V(",", !1), fe = V("	", !1), pe = H([
+	let n = {}, s = t.grammarSource, c = { Chart: Wt }, l = Wt, u = "chart", d = "data", f = "colorize", p = "highlight", m = "area-fill", h = "annotation", ee = "range", g = "note", _ = "series", te = "scene", ne = "transform", v = /^[ \t]/, re = /^[^\t\n\r{}=]/, ie = /^[a-zA-Z_#]/, ae = /^[a-zA-Z0-9_#\-]/, y = /^[0-9]/, oe = /^[eE]/, b = /^[+\-]/, se = /^[^"\\]/, x = /^[0-9a-fA-F]/, S = /^[^\n]/, C = /^[ \t\n\r]/, ce = V("chart", !1), w = V("{", !1), T = V("}", !1), E = H([" ", "	"], !1, !1, !1), le = V("data", !1), ue = V("=", !1), de = V(",", !1), fe = V("	", !1), pe = H([
 		"	",
 		"\n",
 		"\r",
@@ -572,7 +572,7 @@ function s(e, t) {
 	function Gt() {
 		let t, r, i, a, o;
 		if (t = N, r = X(), i = Kt(), i === n && (i = Qt(), i === n && (i = $t(), i === n && (i = en(), i === n && (i = nn(), i === n && (i = rn(), i === n && (i = tn(), i === n && (i = an(), i === n && (i = on(), i === n && (i = sn(), i === n && (i = ln())))))))))), i !== n) {
-			for (a = [], o = e.charAt(N), y.test(o) ? N++ : (o = n, R === 0 && U(E)); o !== n;) a.push(o), o = e.charAt(N), y.test(o) ? N++ : (o = n, R === 0 && U(E));
+			for (a = [], o = e.charAt(N), v.test(o) ? N++ : (o = n, R === 0 && U(E)); o !== n;) a.push(o), o = e.charAt(N), v.test(o) ? N++ : (o = n, R === 0 && U(E));
 			o = Z(), o === n && (o = null), Y(), P = t, t = Ue(r, i, o);
 		} else N = t, t = n;
 		return t;
@@ -590,7 +590,7 @@ function s(e, t) {
 	function qt() {
 		let t, r, i, a, o;
 		if (t = N, r = X(), i = Xt(), i === n && (i = Jt()), i !== n) {
-			for (a = [], o = e.charAt(N), y.test(o) ? N++ : (o = n, R === 0 && U(E)); o !== n;) a.push(o), o = e.charAt(N), y.test(o) ? N++ : (o = n, R === 0 && U(E));
+			for (a = [], o = e.charAt(N), v.test(o) ? N++ : (o = n, R === 0 && U(E)); o !== n;) a.push(o), o = e.charAt(N), v.test(o) ? N++ : (o = n, R === 0 && U(E));
 			o = Z(), o === n && (o = null), Y(), P = t, t = Ge(r, i, o);
 		} else N = t, t = n;
 		return t;
@@ -618,7 +618,7 @@ function s(e, t) {
 	}
 	function Zt() {
 		let t, r, i, a;
-		if (t = N, r = N, i = [], a = e.charAt(N), ne.test(a) ? N++ : (a = n, R === 0 && U(pe)), a !== n) for (; a !== n;) i.push(a), a = e.charAt(N), ne.test(a) ? N++ : (a = n, R === 0 && U(pe));
+		if (t = N, r = N, i = [], a = e.charAt(N), re.test(a) ? N++ : (a = n, R === 0 && U(pe)), a !== n) for (; a !== n;) i.push(a), a = e.charAt(N), re.test(a) ? N++ : (a = n, R === 0 && U(pe));
 		else i = n;
 		return r = i === n ? i : e.substring(r, N), r !== n && (P = t, r = Qe(r)), t = r, t;
 	}
@@ -684,7 +684,7 @@ function s(e, t) {
 	}
 	function nn() {
 		let t, r, i, a, o, s;
-		if (t = N, e.substr(N, 5) === g ? (r = g, N += 5) : (r = n, R === 0 && U(ve)), r !== n) {
+		if (t = N, e.substr(N, 5) === ee ? (r = ee, N += 5) : (r = n, R === 0 && U(ve)), r !== n) {
 			if ($(), e.charCodeAt(N) === 123 ? (i = "{", N++) : (i = n, R === 0 && U(w)), i !== n) {
 				for (a = [], o = W(); o !== n;) a.push(o), o = W();
 				o = X(), e.charCodeAt(N) === 125 ? (s = "}", N++) : (s = n, R === 0 && U(T)), s === n ? (N = t, t = n) : (P = t, t = lt(a, o));
@@ -694,7 +694,7 @@ function s(e, t) {
 	}
 	function rn() {
 		let t, r, i, a, o, s;
-		if (t = N, e.substr(N, 4) === _ ? (r = _, N += 4) : (r = n, R === 0 && U(ye)), r !== n) {
+		if (t = N, e.substr(N, 4) === g ? (r = g, N += 4) : (r = n, R === 0 && U(ye)), r !== n) {
 			if ($(), e.charCodeAt(N) === 123 ? (i = "{", N++) : (i = n, R === 0 && U(w)), i !== n) {
 				for (a = [], o = W(); o !== n;) a.push(o), o = W();
 				o = X(), e.charCodeAt(N) === 125 ? (s = "}", N++) : (s = n, R === 0 && U(T)), s === n ? (N = t, t = n) : (P = t, t = ut(a, o));
@@ -704,7 +704,7 @@ function s(e, t) {
 	}
 	function an() {
 		let t, r, i, a, o, s, c, l;
-		if (t = N, e.substr(N, 6) === v ? (r = v, N += 6) : (r = n, R === 0 && U(be)), r !== n) {
+		if (t = N, e.substr(N, 6) === _ ? (r = _, N += 6) : (r = n, R === 0 && U(be)), r !== n) {
 			if (i = Q(), i !== n) {
 				if (a = q(), a !== n) {
 					if ($(), e.charCodeAt(N) === 123 ? (o = "{", N++) : (o = n, R === 0 && U(w)), o !== n) {
@@ -714,11 +714,11 @@ function s(e, t) {
 				} else N = t, t = n;
 			} else N = t, t = n;
 		} else N = t, t = n;
-		return t === n && (t = N, e.substr(N, 6) === v ? (r = v, N += 6) : (r = n, R === 0 && U(be)), r === n ? (N = t, t = n) : (i = $(), e.charCodeAt(N) === 123 ? (a = "{", N++) : (a = n, R === 0 && U(w)), a === n ? (N = t, t = n) : (P = t, t = ft()))), t;
+		return t === n && (t = N, e.substr(N, 6) === _ ? (r = _, N += 6) : (r = n, R === 0 && U(be)), r === n ? (N = t, t = n) : (i = $(), e.charCodeAt(N) === 123 ? (a = "{", N++) : (a = n, R === 0 && U(w)), a === n ? (N = t, t = n) : (P = t, t = ft()))), t;
 	}
 	function on() {
 		let t, r, i, a, o, s, c, l;
-		if (t = N, e.substr(N, 5) === ee ? (r = ee, N += 5) : (r = n, R === 0 && U(xe)), r !== n) {
+		if (t = N, e.substr(N, 5) === te ? (r = te, N += 5) : (r = n, R === 0 && U(xe)), r !== n) {
 			if (i = Q(), i !== n) {
 				if (a = q(), a === n && (a = null), $(), e.charCodeAt(N) === 123 ? (o = "{", N++) : (o = n, R === 0 && U(w)), o !== n) {
 					for (s = [], c = cn(); c !== n;) s.push(c), c = cn();
@@ -730,7 +730,7 @@ function s(e, t) {
 	}
 	function sn() {
 		let t, r, i, a, o, s, c, l;
-		if (t = N, e.substr(N, 9) === te ? (r = te, N += 9) : (r = n, R === 0 && U(Se)), r !== n) {
+		if (t = N, e.substr(N, 9) === ne ? (r = ne, N += 9) : (r = n, R === 0 && U(Se)), r !== n) {
 			if (i = Q(), i !== n) {
 				if (a = K(), a !== n) {
 					if ($(), e.charCodeAt(N) === 123 ? (o = "{", N++) : (o = n, R === 0 && U(w)), o !== n) {
@@ -745,7 +745,7 @@ function s(e, t) {
 	function cn() {
 		let t, r, i, a, o;
 		if (t = N, r = X(), i = Kt(), i === n && (i = Qt(), i === n && (i = $t(), i === n && (i = en(), i === n && (i = nn(), i === n && (i = rn(), i === n && (i = tn(), i === n && (i = an(), i === n && (i = sn(), i === n && (i = ln()))))))))), i !== n) {
-			for (a = [], o = e.charAt(N), y.test(o) ? N++ : (o = n, R === 0 && U(E)); o !== n;) a.push(o), o = e.charAt(N), y.test(o) ? N++ : (o = n, R === 0 && U(E));
+			for (a = [], o = e.charAt(N), v.test(o) ? N++ : (o = n, R === 0 && U(E)); o !== n;) a.push(o), o = e.charAt(N), v.test(o) ? N++ : (o = n, R === 0 && U(E));
 			o = Z(), o === n && (o = null), Y(), P = t, t = ht(r, i, o);
 		} else N = t, t = n;
 		return t;
@@ -753,7 +753,7 @@ function s(e, t) {
 	function W() {
 		let t, r, i, a;
 		if (t = N, $(), r = ln(), r !== n) {
-			for (i = [], a = e.charAt(N), y.test(a) ? N++ : (a = n, R === 0 && U(E)); a !== n;) i.push(a), a = e.charAt(N), y.test(a) ? N++ : (a = n, R === 0 && U(E));
+			for (i = [], a = e.charAt(N), v.test(a) ? N++ : (a = n, R === 0 && U(E)); a !== n;) i.push(a), a = e.charAt(N), v.test(a) ? N++ : (a = n, R === 0 && U(E));
 			a = Z(), a === n && (a = null), Y(), P = t, t = gt(r, a);
 		} else N = t, t = n;
 		return t;
@@ -772,8 +772,8 @@ function s(e, t) {
 	}
 	function K() {
 		let t, r, i, a, o;
-		if (R++, t = N, r = N, i = e.charAt(N), re.test(i) ? N++ : (i = n, R === 0 && U(Te)), i !== n) {
-			for (a = [], o = e.charAt(N), ie.test(o) ? N++ : (o = n, R === 0 && U(Ee)); o !== n;) a.push(o), o = e.charAt(N), ie.test(o) ? N++ : (o = n, R === 0 && U(Ee));
+		if (R++, t = N, r = N, i = e.charAt(N), ie.test(i) ? N++ : (i = n, R === 0 && U(Te)), i !== n) {
+			for (a = [], o = e.charAt(N), ae.test(o) ? N++ : (o = n, R === 0 && U(Ee)); o !== n;) a.push(o), o = e.charAt(N), ae.test(o) ? N++ : (o = n, R === 0 && U(Ee));
 			i = [i, a], r = i;
 		} else N = r, r = n;
 		return t = r === n ? r : e.substring(t, N), R--, t === n && (r = n, R === 0 && U(we)), t;
@@ -781,24 +781,24 @@ function s(e, t) {
 	function dn() {
 		let t, r, i, a, o, s, c, l, u, d;
 		if (t = N, r = N, i = N, e.charCodeAt(N) === 45 ? (a = "-", N++) : (a = n, R === 0 && U(De)), a === n && (a = null), o = N, e.charCodeAt(N) === 46 ? (s = ".", N++) : (s = n, R === 0 && U(Oe)), s !== n) {
-			if (c = [], l = e.charAt(N), b.test(l) ? N++ : (l = n, R === 0 && U(D)), l !== n) for (; l !== n;) c.push(l), l = e.charAt(N), b.test(l) ? N++ : (l = n, R === 0 && U(D));
+			if (c = [], l = e.charAt(N), y.test(l) ? N++ : (l = n, R === 0 && U(D)), l !== n) for (; l !== n;) c.push(l), l = e.charAt(N), y.test(l) ? N++ : (l = n, R === 0 && U(D));
 			else c = n;
 			c === n ? (N = o, o = n) : (s = [s, c], o = s);
 		} else N = o, o = n;
 		if (o === n) {
-			if (o = N, s = [], c = e.charAt(N), b.test(c) ? N++ : (c = n, R === 0 && U(D)), c !== n) for (; c !== n;) s.push(c), c = e.charAt(N), b.test(c) ? N++ : (c = n, R === 0 && U(D));
+			if (o = N, s = [], c = e.charAt(N), y.test(c) ? N++ : (c = n, R === 0 && U(D)), c !== n) for (; c !== n;) s.push(c), c = e.charAt(N), y.test(c) ? N++ : (c = n, R === 0 && U(D));
 			else s = n;
 			if (s !== n) {
 				if (c = N, e.charCodeAt(N) === 46 ? (l = ".", N++) : (l = n, R === 0 && U(Oe)), l !== n) {
-					for (u = [], d = e.charAt(N), b.test(d) ? N++ : (d = n, R === 0 && U(D)); d !== n;) u.push(d), d = e.charAt(N), b.test(d) ? N++ : (d = n, R === 0 && U(D));
+					for (u = [], d = e.charAt(N), y.test(d) ? N++ : (d = n, R === 0 && U(D)); d !== n;) u.push(d), d = e.charAt(N), y.test(d) ? N++ : (d = n, R === 0 && U(D));
 					l = [l, u], c = l;
 				} else N = c, c = n;
 				c === n && (c = null), s = [s, c], o = s;
 			} else N = o, o = n;
 		}
 		if (o !== n) {
-			if (s = N, c = e.charAt(N), ae.test(c) ? N++ : (c = n, R === 0 && U(ke)), c !== n) {
-				if (l = e.charAt(N), oe.test(l) ? N++ : (l = n, R === 0 && U(Ae)), l === n && (l = null), u = [], d = e.charAt(N), b.test(d) ? N++ : (d = n, R === 0 && U(D)), d !== n) for (; d !== n;) u.push(d), d = e.charAt(N), b.test(d) ? N++ : (d = n, R === 0 && U(D));
+			if (s = N, c = e.charAt(N), oe.test(c) ? N++ : (c = n, R === 0 && U(ke)), c !== n) {
+				if (l = e.charAt(N), b.test(l) ? N++ : (l = n, R === 0 && U(Ae)), l === n && (l = null), u = [], d = e.charAt(N), y.test(d) ? N++ : (d = n, R === 0 && U(D)), d !== n) for (; d !== n;) u.push(d), d = e.charAt(N), y.test(d) ? N++ : (d = n, R === 0 && U(D));
 				else u = n;
 				u === n ? (N = s, s = n) : (c = [
 					c,
@@ -934,9 +934,9 @@ function p(e) {
 	return typeof e == "object" && !!e && e.type === "blueprint-chart-error";
 }
 //#endregion
-//#region src/runtime/runtime.ts
-var m = h();
-function h() {
+//#region src/runtime/player-css.ts
+var m = "/* Blueprint Chart — Scene player styles, shared by the editor and the embed.\n   Light colors live in var() fallbacks; only dark mode defines the tokens. */\n\n[data-bs-theme=\"dark\"] .bc-frame:not([data-bs-theme=\"dark\"] [data-bs-theme=\"light\"] *),\n.bc-frame.bc-theme-dark {\n  --bc-scene-player-text: #e6e6e6;\n  --bc-scene-player-muted: #a8a5a0;\n  --bc-scene-player-border: #6b6966;\n  --bc-scene-player-border-hover: #a8a5a0;\n  --bc-scene-player-background-hover: rgba(255, 255, 255, 0.06);\n  --bc-scene-player-track: #6b6966;\n  --bc-scene-player-accent: #4a7fd0;\n  --bc-scene-player-accent-hover: #5b8fdc;\n}\n\n.bc-scene-player--buttons {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 0.25rem 0 0;\n  width: 100%;\n}\n\n.bc-scene-player--buttons.bc-scene-player--left {\n  justify-content: flex-start;\n  gap: 16px;\n}\n\n.bc-scene-player--buttons.bc-scene-player--left .bc-scene-player__counter {\n  margin-left: auto;\n}\n\n.bc-scene-player--buttons.bc-scene-player--center {\n  justify-content: center;\n  gap: 16px;\n}\n\n.bc-scene-player--buttons.bc-scene-player--right {\n  justify-content: flex-end;\n  gap: 16px;\n}\n\n.bc-scene-player--dot-stepper,\n.bc-scene-player--minimal-arrows {\n  display: flex;\n  align-items: center;\n  padding: 0.25rem 0 0;\n  width: 100%;\n}\n\n.bc-scene-player--dot-stepper {\n  gap: 0.375rem;\n}\n\n.bc-scene-player--minimal-arrows {\n  gap: 4px;\n}\n\n.bc-scene-player--dot-stepper.bc-scene-player--left,\n.bc-scene-player--minimal-arrows.bc-scene-player--left {\n  justify-content: flex-start;\n}\n\n.bc-scene-player--dot-stepper.bc-scene-player--center,\n.bc-scene-player--minimal-arrows.bc-scene-player--center {\n  justify-content: center;\n}\n\n.bc-scene-player--dot-stepper.bc-scene-player--right,\n.bc-scene-player--minimal-arrows.bc-scene-player--right {\n  justify-content: flex-end;\n}\n\n.bc-scene-player--progress-bar {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.25rem 0 0;\n  width: 100%;\n}\n\n.bc-scene-player__btn-group {\n  display: flex;\n  gap: 6px;\n}\n\n.bc-scene-player__btn-group__btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 14px;\n  border-radius: 6px;\n  border: 1px solid var(--bc-scene-player-border, currentColor);\n  background: none;\n  color: var(--bc-scene-player-muted);\n  font-size: var(--bs-font-size-sm, 0.875rem);\n  font-weight: 500;\n  cursor: pointer;\n  transition: border-color var(--bc-duration-base, 150ms), color var(--bc-duration-base, 150ms);\n  line-height: 1.4;\n}\n\n.bc-scene-player__btn-group__btn:hover:not(:disabled) {\n  border-color: var(--bc-scene-player-border-hover);\n  background: var(--bc-scene-player-background-hover, rgba(0, 0, 0, 0.04));\n  color: var(--bc-scene-player-text);\n}\n\n.bc-scene-player__btn-group__btn--next {\n  color: var(--bc-scene-player-text);\n  font-weight: 600;\n}\n\n.bc-scene-player__btn-group__btn--disabled {\n  opacity: 0.35;\n  cursor: default;\n}\n\n.bc-scene-player__nav-btn {\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: 1px solid var(--bc-scene-player-border, #e2e0db);\n  color: var(--bc-scene-player-muted, #9b9893);\n  cursor: pointer;\n  flex-shrink: 0;\n  padding: 0;\n}\n\n.bc-scene-player__nav-btn:hover:not(:disabled) {\n  border-color: var(--bc-scene-player-border-hover, #6b6966);\n  color: var(--bc-scene-player-text, #1a1a1a);\n}\n\n.bc-scene-player__nav-btn:disabled {\n  opacity: 0.3;\n  cursor: default;\n}\n\n.bc-scene-player__play-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--bc-scene-player-accent, #2c5aa0);\n  border: none;\n  color: #fff;\n  cursor: pointer;\n  flex-shrink: 0;\n  padding: 0;\n  transition: background var(--bc-duration-base, 150ms) ease;\n}\n\n.bc-scene-player__play-btn:hover {\n  background: var(--bc-scene-player-accent-hover, #1e4888);\n}\n\n.bc-scene-player--dot-stepper .bc-scene-player__play-btn {\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n}\n\n.bc-scene-player--minimal-arrows .bc-scene-player__play-btn {\n  width: 26px;\n  height: 26px;\n  border-radius: 7px;\n}\n\n.bc-scene-player--progress-bar .bc-scene-player__play-btn {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n}\n\n.bc-scene-player__dots {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n}\n\n.bc-scene-player__dots__dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 4px;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  background: var(--bc-scene-player-track, #e2e0db);\n  opacity: 0.4;\n  transition: width var(--bc-duration-slow, 250ms) ease, background var(--bc-duration-slow, 250ms) ease, opacity var(--bc-duration-slow, 250ms) ease;\n}\n\n.bc-scene-player__dots__dot--completed {\n  background: var(--bc-scene-player-accent, #2c5aa0);\n  opacity: 1;\n}\n\n.bc-scene-player__dots__dot--active {\n  width: 20px;\n  background: var(--bc-scene-player-accent, #2c5aa0);\n  opacity: 1;\n}\n\n.bc-scene-player__dots__dot:hover {\n  opacity: 0.8;\n}\n\n.bc-scene-player__segments {\n  flex: 1;\n  display: flex;\n  gap: 3px;\n  align-items: center;\n}\n\n.bc-scene-player__segments__segment {\n  flex: 1;\n  height: 4px;\n  border-radius: 2px;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  background: var(--bc-scene-player-track, #e2e0db);\n  opacity: 0.45;\n  transition: height var(--bc-duration-slow, 250ms) ease, background var(--bc-duration-slow, 250ms) ease, opacity var(--bc-duration-slow, 250ms) ease;\n}\n\n.bc-scene-player__segments__segment--completed {\n  background: var(--bc-scene-player-accent, #2c5aa0);\n  opacity: 1;\n}\n\n.bc-scene-player__segments__segment--active {\n  height: 6px;\n  background: var(--bc-scene-player-accent, #2c5aa0);\n  opacity: 1;\n}\n\n.bc-scene-player__segments__segment:hover {\n  opacity: 0.8;\n}\n\n.bc-scene-player__counter {\n  font-weight: 500;\n  color: var(--bc-scene-player-muted, #9b9893);\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n}\n\n.bc-scene-player--buttons .bc-scene-player__counter {\n  font-size: var(--bs-font-size-sm, 0.875rem);\n}\n\n.bc-scene-player--minimal-arrows .bc-scene-player__counter {\n  font-size: var(--bs-font-size-xs, 0.75rem);\n  margin-right: 4px;\n}\n\n.bc-scene-player--minimal-arrows .bc-scene-player__counter--end {\n  margin-right: 0;\n  margin-left: 4px;\n}\n\n.bc-scene-player--progress-bar .bc-scene-player__counter {\n  font-size: var(--bs-font-size-xs, 0.75rem);\n  flex-shrink: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .bc-scene-player,\n  .bc-scene-player * {\n    transition: none;\n  }\n}\n", h = ee();
+function ee() {
 	try {
 		if (typeof globalThis < "u") {
 			let e = globalThis.BLUEPRINT_CHART_RUNTIME_URL;
@@ -947,8 +947,8 @@ function h() {
 		return "";
 	}
 }
-var g = /* @__PURE__ */ new Map(), _ = null, v = [];
-function ee() {
+var g = /* @__PURE__ */ new Map(), _ = null, te = [];
+function ne() {
 	_ || (_ = (e) => {
 		for (let [t, n] of g) if (e.source === t.contentWindow) {
 			n(e);
@@ -956,21 +956,21 @@ function ee() {
 		}
 	}, window.addEventListener("message", _));
 }
-function te() {
-	ee(), document.querySelectorAll("script[type=\"application/blueprint-chart\"]").forEach(y);
+function v() {
+	ne(), document.querySelectorAll("script[type=\"application/blueprint-chart\"]").forEach(re);
 }
-function y(e) {
+function re(e) {
 	let t = e.textContent?.trim();
 	if (!t) return;
 	let r = document.createElement("iframe");
 	r.className = "blueprint-chart-iframe", r.style.cssText = "border: none; width: 100%; display: block;", r.setAttribute("sandbox", "allow-scripts"), r.setAttribute("title", "Blueprint Chart"), e.parentNode?.insertBefore(r, e);
 	let i = e.closest("[data-bs-theme]")?.getAttribute("data-bs-theme");
-	if (i === "light" || i === "dark") r.srcdoc = re(t, m, i);
+	if (i === "light" || i === "dark") r.srcdoc = b(t, h, i);
 	else {
 		let e = n(), i = () => {
-			r.srcdoc = re(t, m, e?.matches ? "dark" : "light");
+			r.srcdoc = b(t, h, e?.matches ? "dark" : "light");
 		};
-		i(), e && (e.addEventListener("change", i), v.push(() => e.removeEventListener("change", i)));
+		i(), e && (e.addEventListener("change", i), te.push(() => e.removeEventListener("change", i)));
 	}
 	g.set(r, (e) => {
 		let t = f(e.data);
@@ -981,38 +981,76 @@ function y(e) {
 		p(e.data) && console.warn("Blueprint Chart: could not render embed.", e.data.message);
 	});
 }
-function ne(e) {
+var ie = [
+	"buttons",
+	"progress-bar",
+	"dot-stepper",
+	"minimal-arrows"
+], ae = [
+	"left",
+	"center",
+	"right"
+];
+function y(e, t, n) {
+	return t.find((t) => t === e) ?? n;
+}
+function oe(e) {
+	let t;
 	try {
-		return c(e).scenes.length;
+		t = c(e);
 	} catch {
-		return 0;
+		return null;
 	}
+	let n = new Map(t.properties.map((e) => [e.key, e.value])), r = n.get("player");
+	return !t.scenes.length || r === "none" ? null : {
+		type: y(r, ie, "buttons"),
+		position: y(n.get("playerPosition"), ae, "left"),
+		total: t.scenes.length + 1
+	};
 }
-function re(e, t, n) {
-	let r = t ? `<script src="${b(t)}"><\/script>` : "", i = n === "dark" ? "<html data-bs-theme=\"dark\">" : "<html>", a = t ? [
+function b(e, t, n) {
+	let r = t ? `<script src="${x(t)}"><\/script>` : "", i = n === "dark" ? "<html data-bs-theme=\"dark\">" : "<html>", a = t ? [
+		"var chart = document.getElementById(\"chart\");",
+		"function reportError(e) {",
+		`  parent.postMessage({ type: "${d}", message: String(e) }, "*");`,
+		"}",
+		"// Constrained frames size the plot from the footer height measured in the",
+		"// previous render's animation frame, so render again once the player is in.",
+		"function rerenderConstrained() {",
+		"  if (!chart.querySelector(\".bc-frame--constrained\")) {",
+		"    return;",
+		"  }",
+		"  try {",
+		"    window.BlueprintChart.renderBpc(chart, __BPC_SRC__);",
+		"  }",
+		"  catch (e) {",
+		"    reportError(e);",
+		"  }",
+		"}",
 		"try {",
-		"  var chart = document.getElementById(\"chart\");",
 		"  window.BlueprintChart.renderBpc(chart, __BPC_SRC__);",
-		"  if (__BPC_SCENES__) {",
-		"    window.BlueprintChart.createSceneController(document.body, new Array(__BPC_SCENES__ + 1).fill({ name: \"\" }), function (_scene, i) {",
-		"      window.BlueprintChart.renderBpc(chart, __BPC_SRC__, { sceneIndex: i ? i - 1 : undefined, transition: true });",
+		"  if (__BPC_PLAYER__) {",
+		"    window.BlueprintChart.mountScenePlayer(chart, __BPC_PLAYER__, function (step) {",
+		"      window.BlueprintChart.renderBpc(chart, __BPC_SRC__, { sceneIndex: step > 1 ? step - 2 : undefined, transition: true });",
 		"    });",
+		"    requestAnimationFrame(rerenderConstrained);",
 		"  }",
 		"}",
 		"catch (e) {",
-		`  parent.postMessage({ type: "${d}", message: String(e) }, "*");`,
+		"  reportError(e);",
 		"}"
 	] : [`parent.postMessage({ type: "${d}", message: "Blueprint Chart runtime URL unavailable" }, "*");`];
 	return [
 		"<!DOCTYPE html>",
 		`${i}<head>`,
 		`<style>${l}</style>`,
+		`<style>${m}</style>`,
 		"</head><body>",
 		"<div id=\"chart\" class=\"blueprint-chart-container\"></div>",
 		r,
 		"<script>",
-		`var __BPC_SRC__ = ${ie(e)};`,
-		`var __BPC_SCENES__ = ${ne(e)};`,
+		`var __BPC_SRC__ = ${se(e)};`,
+		`var __BPC_PLAYER__ = ${JSON.stringify(oe(e))};`,
 		"function notifySize() {",
 		"  var h = document.documentElement.scrollHeight;",
 		`  parent.postMessage({ type: "${u}", height: h }, "*");`,
@@ -1024,11 +1062,11 @@ function re(e, t, n) {
 		"</body></html>"
 	].filter(Boolean).join("\n");
 }
-function ie(e) {
+function se(e) {
 	return JSON.stringify(e).replace(/</g, "\\u003c").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
 }
-function b(e) {
+function x(e) {
 	return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
 //#endregion
-export { p as a, n as c, u as i, t as l, te as n, f as o, d as r, c as s, re as t };
+export { p as a, n as c, u as i, t as l, v as n, f as o, d as r, c as s, b as t };

package/dist/runtime.js

@@ -1,5 +1,5 @@
-import { t as e } from "./render-bpc-DZF2uugG.js";
-import { n as t } from "./runtime-xftta_35.js";
+import { t as e } from "./render-bpc-jhkrsEsh.js";
+import { n as t } from "./runtime-BTUG9Tha.js";
 //#region src/runtime/scenes.ts
 function n(e, t, n) {
 	let r = 0, i = !1, a = document.createElement("nav");
@@ -41,9 +41,125 @@ function n(e, t, n) {
 		}
 	};
 }
-var r = n;
+var r = n, i = 3e3, a = ".bc-scene-player__dots__dot, .bc-scene-player__segments__segment", o = "<svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5.5 1.5L1.5 6l4 4.5\" /></svg>", s = "<svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2.5 1.5L6.5 6l-4 4.5\" /></svg>", c = "<svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6.5 2L3.5 5l3 3\" /></svg>", l = "<svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3.5 2L6.5 5l-3 3\" /></svg>";
+function u(e, t) {
+	return `<svg width="${e}" height="${e}" viewBox="0 0 12 12" fill="currentColor">${t ? "<rect x=\"1.5\" y=\"1\" width=\"3\" height=\"10\" rx=\"0.8\" /><rect x=\"7.5\" y=\"1\" width=\"3\" height=\"10\" rx=\"0.8\" />" : "<path d=\"M2.5 1v10l8-5z\" />"}</svg>`;
+}
+function d(e) {
+	return e ? " disabled" : "";
+}
+function f(e, t) {
+	return `<button type="button" class="bc-scene-player__play-btn" aria-label="${t ? "Pause" : "Play"}">${u(e, t)}</button>`;
+}
+function p(e, t, n, r) {
+	return `<button type="button" class="bc-scene-player__nav-btn"${d(r)} aria-label="${t}" data-action="${e}">${n}</button>`;
+}
+function m(e, { current: t, total: n }) {
+	let r = [];
+	for (let i = 1; i <= n; i++) {
+		let a = i === t ? ` ${e}--active` : "", o = i < t ? ` ${e}--completed` : "", s = i === t ? " aria-current=\"step\"" : "";
+		r.push(`<button type="button" class="${e}${a}${o}" aria-label="Scene ${i} of ${n}"${s}></button>`);
+	}
+	return r.join("");
+}
+function h(e) {
+	let t = e.current <= 1, n = e.current >= e.total, r = t ? " bc-scene-player__btn-group__btn--disabled" : "", i = n ? " bc-scene-player__btn-group__btn--disabled" : "";
+	return `<div class="bc-scene-player bc-scene-player--buttons bc-scene-player--${e.position}" data-scene-player><div class="bc-scene-player__btn-group"><button type="button" class="bc-scene-player__btn-group__btn${r}"${d(t)} aria-label="Previous scene" data-action="previous">${o} Back</button><button type="button" class="bc-scene-player__btn-group__btn bc-scene-player__btn-group__btn--next${i}"${d(n)} aria-label="Next scene" data-action="next">Next ${s}</button></div><span class="bc-scene-player__counter">${e.current} / ${e.total}</span></div>`;
+}
+function g(e) {
+	return `<div class="bc-scene-player bc-scene-player--dot-stepper bc-scene-player--${e.position}" data-scene-player>` + p("previous", "Previous scene", c, e.current <= 1) + f(11, e.playing) + `<div class="bc-scene-player__dots">${m("bc-scene-player__dots__dot", e)}</div>` + p("next", "Next scene", l, e.current >= e.total) + "</div>";
+}
+function _(e) {
+	return `<div class="bc-scene-player bc-scene-player--minimal-arrows bc-scene-player--${e.position}" data-scene-player><span class="bc-scene-player__counter">${e.current}/${e.total}</span>` + p("previous", "Previous scene", c, e.current <= 1) + f(9, e.playing) + p("next", "Next scene", l, e.current >= e.total) + "</div>";
+}
+function v(e) {
+	return "<div class=\"bc-scene-player bc-scene-player--progress-bar\" data-scene-player>" + f(10, e.playing) + `<div class="bc-scene-player__segments">${m("bc-scene-player__segments__segment", e)}</div><span class="bc-scene-player__counter">${e.current}/${e.total}</span></div>`;
+}
+var y = {
+	buttons: h,
+	"dot-stepper": g,
+	"minimal-arrows": _,
+	"progress-bar": v
+};
+function b(e, t) {
+	return y[e](t);
+}
+function x(e) {
+	let t = document.createElement("template");
+	return t.innerHTML = e, t.content.firstElementChild;
+}
+function S(e, t) {
+	for (let { name: n } of Array.from(e.attributes)) t.hasAttribute(n) || e.removeAttribute(n);
+	for (let { name: n, value: r } of Array.from(t.attributes)) e.getAttribute(n) !== r && e.setAttribute(n, r);
+}
+function C(e, t) {
+	let n = e.childNodes, r = t.childNodes;
+	return n.length === r.length && Array.from(n).every((e, t) => e.nodeName === r[t].nodeName);
+}
+function w(e, t) {
+	if (S(e, t), !C(e, t)) {
+		e.replaceChildren(...Array.from(t.childNodes));
+		return;
+	}
+	e.childNodes.forEach((e, n) => {
+		let r = t.childNodes[n];
+		e instanceof Element ? w(e, r) : e.nodeValue !== r.nodeValue && (e.nodeValue = r.nodeValue);
+	});
+}
+function T(e, t, n) {
+	let r = {
+		current: 1,
+		total: t.total,
+		playing: !1,
+		position: t.position
+	}, o = x(b(t.type, r)), s;
+	function c() {
+		let e = x(b(t.type, r));
+		w(o, e);
+	}
+	function l(e) {
+		if (e < 1 || e > r.total || e === r.current) return;
+		let t = d();
+		r.current = e, n(e), v(), c(), u(t);
+	}
+	function u(e) {
+		if (!e) return;
+		let t = o.querySelector("button:not(:disabled)");
+		(e.matches(":disabled") ? t : e)?.focus();
+	}
+	function d() {
+		let e = document.activeElement;
+		return e instanceof HTMLElement && o.contains(e) ? e : null;
+	}
+	function f() {
+		r.playing ? h() : p();
+	}
+	function p() {
+		r.playing || (r.playing = !0, c(), l(1), s = setInterval(m, i));
+	}
+	function m() {
+		r.current < r.total ? l(r.current + 1) : h();
+	}
+	function h() {
+		r.playing = !1, clearInterval(s), c();
+	}
+	function g(e) {
+		return Array.from(e.parentElement?.children ?? []).indexOf(e) + 1;
+	}
+	function _(e) {
+		let t = e.target.closest("button");
+		if (!t) return;
+		let n = t.dataset.action;
+		t.classList.contains("bc-scene-player__play-btn") ? f() : n === "previous" ? l(r.current - 1) : n === "next" ? l(r.current + 1) : t.matches(a) && l(g(t));
+	}
+	function v() {
+		let t = e.querySelector(".bc-frame-footer");
+		t && o.parentElement !== t && t.appendChild(o);
+	}
+	o.addEventListener("click", _), v(), new MutationObserver(v).observe(e, { childList: !0 });
+}
 //#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 };
+export { n as createSceneController, r as createStepController, t as initBlueprint, T as mountScenePlayer, e as renderBpc };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueprint-chart/lib",
-  "version": "2.17.1",
+  "version": "2.18.0",
   "description": "DSL-driven charting library built on D3. Define charts as text, render them anywhere.",
   "keywords": [
     "chart",
@@ -48,12 +48,14 @@
       "default": "./dist/runtime.js"
     },
     "./charts.scss": "./src/charts/chart.scss",
+    "./player.css": "./src/runtime/player.css",
     "./src/charts/chart.scss": "./src/charts/chart.scss",
     "./embed-runtime.js": "./dist/lib/lib.iife.js"
   },
   "files": [
     "dist",
     "src/charts/chart.scss",
+    "src/runtime/player.css",
     "README.md",
     "LICENSE"
   ],