@ioai/lerobot-studio 1.3.0 → 1.3.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 1.3.2
+
+### Patch Changes
+
+- Ensure embedded host token binding survives the full Vite CSS asset: bind `:root` / `.dark` tokens onto `.lerobot-root` with a string pass after Lightning CSS scoping (Rule visitors fail to deserialize on the packaged stylesheet).
+
+## 1.3.1
+
+### Patch Changes
+
+- Fix embedded chart colors: bind design tokens to `.lerobot-root` / `.lerobot-root.dark` so host `:root` tokens no longer win, and resolve CSS colors (oklch / nested `var()`) to canvas-safe `rgb()` for uPlot strokes and grids.
+
 ## 1.3.0
 
 ### Minor Changes

package/dist-lib/{DockviewLayout-CF0ewhDR.js → DockviewLayout-C8FCn77e.js}

@@ -14266,24 +14266,52 @@ _m.assign = Ad, _m.fmtNum = Ru, _m.rangeNum = Pu, _m.rangeLog = Ou, _m.rangeAsin
 }
 //#endregion
 //#region src/react/lib/chartTheme.ts
-var vm = typeof document < "u" ? () => document.querySelector(".lerobot-root") ?? document.getElementById("lerobot-root") : () => null;
-function ym(e, t, n = "#888") {
+var vm = typeof document < "u" ? () => document.querySelector(".lerobot-root") ?? document.getElementById("lerobot-root") : () => null, ym = "rgb(1, 2, 3)", bm = null, xm = null, Sm = null, Cm = null;
+function wm() {
+	return typeof document > "u" ? null : bm?.isConnected && xm?.isConnected ? {
+		wrap: bm,
+		probe: xm
+	} : (bm = document.createElement("span"), bm.setAttribute("data-lerobot-color-probe-wrap", ""), bm.style.cssText = "position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;visibility:hidden", xm = document.createElement("span"), xm.setAttribute("data-lerobot-color-probe", ""), bm.appendChild(xm), document.documentElement.appendChild(bm), {
+		wrap: bm,
+		probe: xm
+	});
+}
+function Tm() {
+	return typeof document > "u" ? null : Cm || (Sm = document.createElement("canvas"), Sm.width = 1, Sm.height = 1, Cm = Sm.getContext("2d", { willReadFrequently: !0 }), Cm);
+}
+function Em(e, t) {
+	let n = Tm();
+	if (!n) return t;
+	n.clearRect(0, 0, 1, 1), n.fillStyle = "#000000", n.fillStyle = e, n.fillRect(0, 0, 1, 1);
+	let [r, i, a, o] = n.getImageData(0, 0, 1, 1).data;
+	return o === 0 ? t : o === 255 ? `rgb(${r}, ${i}, ${a})` : `rgba(${r}, ${i}, ${a}, ${+(o / 255).toFixed(3)})`;
+}
+function Dm(e, t, n) {
+	if (!e.trim()) return n;
+	let r = wm();
+	if (!r) return n;
+	let { wrap: i, probe: a } = r, o = t && t.isConnected ? t : document.documentElement;
+	i.parentElement !== o && o.appendChild(i), i.style.color = ym, a.style.color = e;
+	let s = getComputedStyle(a).color.trim();
+	return a.style.color = "", i.style.color = "", !s || s === ym || s === "rgba(0, 0, 0, 0)" || s === "transparent" ? n : Em(s, n);
+}
+function Om(e, t, n = "#888") {
 	let r = e ?? (typeof document < "u" ? document.documentElement : null);
 	if (!r) return n;
 	let i = getComputedStyle(r).getPropertyValue(t).trim();
-	return i ? i.startsWith("oklch") || i.startsWith("oklab") || i.startsWith("hsl") || i.startsWith("rgb") || i.startsWith("color") || i.startsWith("#") ? i : `hsl(${i.includes(",") ? i : i.replace(/\s+/g, ", ")})` : n;
+	return i ? Dm(i, r, n) : n;
 }
-function bm(e, t, n = "#888") {
-	return ym(e, t, n);
+function km(e, t, n = "#888") {
+	return Om(e, t, n);
 }
-function xm(e) {
+function Am(e) {
 	return {
-		axisStroke: ym(e, "--muted-foreground", "#6b7280"),
-		gridStroke: ym(e, "--border", "#e5e7eb"),
-		tickStroke: ym(e, "--border", "#d1d5db")
+		axisStroke: Om(e, "--muted-foreground", "#6b7280"),
+		gridStroke: Om(e, "--border", "#e5e7eb"),
+		tickStroke: Om(e, "--border", "#d1d5db")
 	};
 }
-var Sm = [
+var jm = [
 	"--chart-1",
 	"--chart-2",
 	"--chart-3",
@@ -14291,7 +14319,7 @@ var Sm = [
 	"--chart-5",
 	"--primary"
 ];
-function Cm(e) {
+function Mm(e) {
 	let t = [], n = [
 		"#2563eb",
 		"#dc2626",
@@ -14301,17 +14329,17 @@ function Cm(e) {
 		"#0d9488"
 	];
 	for (let r = 0; r < 14; r++) {
-		let i = Sm[r % Sm.length];
-		t.push(ym(e, i, n[r % n.length]));
+		let i = jm[r % jm.length];
+		t.push(Om(e, i, n[r % n.length]));
 	}
 	return t;
 }
-function wm() {
+function Nm() {
 	return vm();
 }
 //#endregion
 //#region src/react/components/panels/Common/PanelState.tsx
-var Tm = ({ message: e, className: t }) => /* @__PURE__ */ W("div", {
+var Pm = ({ message: e, className: t }) => /* @__PURE__ */ W("div", {
 	role: "status",
 	"aria-live": "polite",
 	className: x("flex h-full min-h-0 w-full items-center justify-center text-muted-foreground", t),
@@ -14325,7 +14353,7 @@ var Tm = ({ message: e, className: t }) => /* @__PURE__ */ W("div", {
 			children: e
 		})]
 	})
-}), Em = ({ message: e, className: t }) => /* @__PURE__ */ W("div", {
+}), Fm = ({ message: e, className: t }) => /* @__PURE__ */ W("div", {
 	className: x("flex h-full min-h-0 w-full items-center justify-center text-muted-foreground", t),
 	children: /* @__PURE__ */ W("p", {
 		className: "text-[10px] font-medium uppercase tracking-widest opacity-50",
@@ -14334,13 +14362,13 @@ var Tm = ({ message: e, className: t }) => /* @__PURE__ */ W("div", {
 });
 //#endregion
 //#region src/react/components/panels/ChartPanel/NestedHierarchicalFilterList.tsx
-function Dm(e, t) {
+function Im(e, t) {
 	if (e.length === 0) return "none";
 	let n = 0;
 	for (let r of e) t.has(r) && n++;
 	return n === 0 ? "none" : n === e.length ? "all" : "partial";
 }
-var Om = Ee(function({ checked: e, indeterminate: t }) {
+var Lm = Ee(function({ checked: e, indeterminate: t }) {
 	let n = U(null);
 	return V(() => {
 		n.current && (n.current.checked = e, n.current.indeterminate = t);
@@ -14351,7 +14379,7 @@ var Om = Ee(function({ checked: e, indeterminate: t }) {
 		readOnly: !0,
 		className: "pointer-events-none h-3.5 w-3.5 shrink-0 rounded border-border accent-primary"
 	});
-}), km = Ee(function({ featureNodes: e, selectedIds: n, searchValue: r, onSearchChange: i, onSetItemsChecked: a, onToggleItem: o, onSelectAll: s, onClearAll: l, searchPlaceholder: u, emptyLabel: d, selectAllLabel: f, onHoverChange: m, getItemColor: h, className: g }) {
+}), Rm = Ee(function({ featureNodes: e, selectedIds: n, searchValue: r, onSearchChange: i, onSetItemsChecked: a, onToggleItem: o, onSelectAll: s, onClearAll: l, searchPlaceholder: u, emptyLabel: d, selectAllLabel: f, onHoverChange: m, getItemColor: h, className: g }) {
 	let _ = H(() => dr(e), [e]), v = H(() => fr(e, r), [e, r]), y = H(() => _.reduce((e, t) => n.has(t) ? e + 1 : e, 0), [_, n]), b = _.length > 0 && y === _.length, S = !b && y !== 0;
 	return /* @__PURE__ */ G("div", {
 		className: x("w-full", g),
@@ -14368,7 +14396,7 @@ var Om = Ee(function({ checked: e, indeterminate: t }) {
 					},
 					title: f,
 					"aria-label": f,
-					children: /* @__PURE__ */ W(Om, {
+					children: /* @__PURE__ */ W(Lm, {
 						checked: b,
 						indeterminate: S
 					})
@@ -14402,7 +14430,7 @@ var Om = Ee(function({ checked: e, indeterminate: t }) {
 				className: "px-2 py-3 text-xs text-muted-foreground",
 				children: d
 			}) : v.map((e) => {
-				let t = ur(e), r = Dm(t, n);
+				let t = ur(e), r = Im(t, n);
 				return /* @__PURE__ */ G("div", {
 					className: "mb-1 border-b border-border/50 pb-1 last:border-b-0",
 					children: [/* @__PURE__ */ G("button", {
@@ -14417,7 +14445,7 @@ var Om = Ee(function({ checked: e, indeterminate: t }) {
 							id: e.id,
 							itemIds: t
 						}),
-						children: [/* @__PURE__ */ W(Om, {
+						children: [/* @__PURE__ */ W(Lm, {
 							checked: r === "all",
 							indeterminate: r === "partial"
 						}), /* @__PURE__ */ W("span", {
@@ -14440,7 +14468,7 @@ var Om = Ee(function({ checked: e, indeterminate: t }) {
 									id: t.id,
 									itemIds: r
 								}),
-								children: [/* @__PURE__ */ W(Om, {
+								children: [/* @__PURE__ */ W(Lm, {
 									checked: i === "all",
 									indeterminate: i === "partial"
 								}), /* @__PURE__ */ W("span", {
@@ -14460,7 +14488,7 @@ var Om = Ee(function({ checked: e, indeterminate: t }) {
 									itemIds: [e.id]
 								}),
 								children: [
-									/* @__PURE__ */ W(Om, {
+									/* @__PURE__ */ W(Lm, {
 										checked: n.has(e.id),
 										indeterminate: !1
 									}),
@@ -14480,7 +14508,7 @@ var Om = Ee(function({ checked: e, indeterminate: t }) {
 			})
 		})]
 	});
-}), Am = Ee(function({ featureFilterNodes: e, selectedIds: t, jointSearch: n, onSearchChange: r, onSetItemsChecked: i, onToggleItem: a, onSelectAll: o, onClearAll: s, searchPlaceholder: l, emptyLabel: u, selectAllLabel: d, summaryAllLabel: f, summaryNoneLabel: p, summarySelectedCountLabel: m, totalSeriesCount: h, onHoverChange: g, getItemColor: _, onMenuOpenChange: v, triggerClassName: y, contentClassName: b, align: S = "start", side: C = "bottom", sideOffset: w = 4 }) {
+}), zm = Ee(function({ featureFilterNodes: e, selectedIds: t, jointSearch: n, onSearchChange: r, onSetItemsChecked: i, onToggleItem: a, onSelectAll: o, onClearAll: s, searchPlaceholder: l, emptyLabel: u, selectAllLabel: d, summaryAllLabel: f, summaryNoneLabel: p, summarySelectedCountLabel: m, totalSeriesCount: h, onHoverChange: g, getItemColor: _, onMenuOpenChange: v, triggerClassName: y, contentClassName: b, align: S = "start", side: C = "bottom", sideOffset: w = 4 }) {
 	let T = t.size, E = h > 0 && T === h ? f : T === 0 ? p : m(T);
 	return /* @__PURE__ */ G(An, {
 		onOpenChange: v,
@@ -14504,7 +14532,7 @@ var Om = Ee(function({ checked: e, indeterminate: t }) {
 			side: C,
 			sideOffset: w,
 			className: x("w-80 max-h-[60vh] overflow-hidden", b),
-			children: /* @__PURE__ */ W(km, {
+			children: /* @__PURE__ */ W(Rm, {
 				featureNodes: e,
 				selectedIds: t,
 				searchValue: n,
@@ -14524,11 +14552,11 @@ var Om = Ee(function({ checked: e, indeterminate: t }) {
 });
 //#endregion
 //#region src/react/components/panels/ChartPanel/chartPanelModel.ts
-function jm(e, t) {
+function Bm(e, t) {
 	return `${e}::${t}`;
 }
-var Mm = [8, 5];
-function Nm(e) {
+var Vm = [8, 5];
+function Hm(e) {
 	if (e <= 0) return [];
 	let t = Array(e).fill(!1), n = [], r = [[0, e - 1]], i = 0;
 	for (; i < r.length && n.length < e;) {
@@ -14538,7 +14566,7 @@ function Nm(e) {
 	for (let r = 0; r < e && n.length < e; r++) t[r] || n.push(r);
 	return n;
 }
-function Pm(e, t, n) {
+function Um(e, t, n) {
 	let r = Math.max(1, e.width), i = Math.ceil(e.rows / n), a = new Float64Array(i), o = 0;
 	for (let i = 0; i < e.rows; i += n) {
 		let n = i * r + Math.min(t, r - 1);
@@ -14546,13 +14574,13 @@ function Pm(e, t, n) {
 	}
 	return a;
 }
-function Fm(e, t) {
+function Wm(e, t) {
 	if (t <= 1) return Float64Array.from(e);
 	let n = Math.ceil(e.length / t), r = new Float64Array(n), i = 0;
 	for (let n = 0; n < e.length; n += t) r[i++] = e[n] ?? 0;
 	return r;
 }
-function Im(e, t) {
+function Gm(e, t) {
 	if (e.length === 0) return 0;
 	let n = 0, r = e.length - 1;
 	if (t <= e[0]) return 0;
@@ -14564,7 +14592,7 @@ function Im(e, t) {
 	let i = n, a = Math.max(0, i - 1);
 	return Math.abs(e[i] - t) < Math.abs(e[a] - t) ? i : a;
 }
-function Lm(e, t, n) {
+function Km(e, t, n) {
 	let r = [];
 	return e.forEach((e) => {
 		let i = t?.[e];
@@ -14573,7 +14601,7 @@ function Lm(e, t, n) {
 		for (let t = 0; t < s; t++) {
 			let n = (typeof c[t] == "string" ? c[t] : null) || `${e.split(".").pop()}[${t}]`;
 			r.push({
-				id: jm(e, t),
+				id: Bm(e, t),
 				featureKey: e,
 				dimIndex: t,
 				jointName: n,
@@ -14582,37 +14610,37 @@ function Lm(e, t, n) {
 		}
 	}), r;
 }
-function Rm(e) {
+function qm(e) {
 	let t = /* @__PURE__ */ new Set(), n = [];
 	return e.forEach((e) => {
 		t.has(e.jointName) || (t.add(e.jointName), n.push(e.jointName));
 	}), n;
 }
-function zm(e, t) {
-	let n = {}, r = e.slice().sort(), i = Nm(r.length), a = wm(), o = Cm(a), s = t === "dark" ? "#94a3b8" : "#64748b";
+function Jm(e, t) {
+	let n = {}, r = e.slice().sort(), i = Hm(r.length), a = Nm(), o = Mm(a), s = t === "dark" ? "#94a3b8" : "#64748b";
 	return r.forEach((e, t) => {
 		let r = i[t] ?? t;
-		n[e] = o[r % o.length] ?? bm(a, "--muted-foreground", s);
+		n[e] = o[r % o.length] ?? km(a, "--muted-foreground", s);
 	}), n;
 }
-var Bm = 2e3;
-function Vm(e) {
+var Ym = 2e3;
+function Xm(e) {
 	let { chartData: t, currentFrames: n, targetFeatures: r, features: i, resolvedTheme: a } = e, o = t.timestamp;
 	if (!o || o.rows === 0) return null;
-	let s = (n && n.length > 0 ? n.map((e) => Number(e.timestamp ?? 0)) : Array.from(o.values.slice(0, o.rows))).slice(0, o.rows), c = o.rows > Bm, l = c ? Math.ceil(o.rows / Bm) : 1, u = Fm(s, l), d = n && n.length > 0 ? n.map((e) => Number(e.timestamp ?? 0)) : Array.from(o.values.slice(0, o.rows)), f = Lm(r, i, t), p = Rm(f), m = {}, h = {};
+	let s = (n && n.length > 0 ? n.map((e) => Number(e.timestamp ?? 0)) : Array.from(o.values.slice(0, o.rows))).slice(0, o.rows), c = o.rows > Ym, l = c ? Math.ceil(o.rows / Ym) : 1, u = Wm(s, l), d = n && n.length > 0 ? n.map((e) => Number(e.timestamp ?? 0)) : Array.from(o.values.slice(0, o.rows)), f = Km(r, i, t), p = qm(f), m = {}, h = {};
 	for (let e of p) h[e] = [];
 	return r.forEach((e) => {
 		let n = i?.[e], r = t[e];
 		if (!n || !r) return;
 		let a = n.shape || [r.width || 1], o = Math.max(r.width, a[0] ?? 1), s = Array.isArray(n.names) ? n.names : [];
 		for (let t = 0; t < o; t++) {
-			let n = (typeof s[t] == "string" ? s[t] : null) || `${e.split(".").pop()}[${t}]`, i = jm(e, t);
-			m[i] = Pm(r, t, l), h[n] || (h[n] = []), h[n].push(i);
+			let n = (typeof s[t] == "string" ? s[t] : null) || `${e.split(".").pop()}[${t}]`, i = Bm(e, t);
+			m[i] = Um(r, t, l), h[n] || (h[n] = []), h[n].push(i);
 		}
 	}), {
 		dimensions: f,
 		allJointNames: p,
-		jointColorMap: zm(p, a),
+		jointColorMap: Jm(p, a),
 		simplifiedTimestamps: u,
 		originalTimestamps: d,
 		stride: l,
@@ -14626,7 +14654,7 @@ function Vm(e) {
 		seriesIdsByJoint: h
 	};
 }
-function Hm(e, t) {
+function Zm(e, t) {
 	let { selectedSeriesIds: n, showAction: r, showState: i, getStrokeColor: a, stateLabel: o, actionLabel: s } = t, c = [], l = [null], u = [{}];
 	return e.dimensions.forEach((t) => {
 		if (!n.has(t.id) || t.kind === "state" && !i || t.kind === "action" && !r) return;
@@ -14637,7 +14665,7 @@ function Hm(e, t) {
 			label: m,
 			stroke: () => a(t.id, f),
 			width: p ? 1.25 : 1.5,
-			dash: p ? [] : Mm,
+			dash: p ? [] : Vm,
 			points: { show: !1 },
 			spanGaps: !0
 		}), l.push({
@@ -14658,10 +14686,10 @@ function Hm(e, t) {
 }
 //#endregion
 //#region src/react/components/panels/ChartPanel/Split/SplitJointMiniPlot.tsx
-var Um = {
+var Qm = {
 	min: null,
 	max: null
-}, Wm = z.memo(function({ jointName: e, core: t, chartHeight: n, selectedSeriesIds: i, showAction: o, showState: s, hasAction: c, hasState: l, actionLabel: u, stateLabel: d }) {
+}, $m = z.memo(function({ jointName: e, core: t, chartHeight: n, selectedSeriesIds: i, showAction: o, showState: s, hasAction: c, hasState: l, actionLabel: u, stateLabel: d }) {
 	let { t: f } = a(), { subscribeFrameIndex: p } = ee(), { setFrameIndex: m } = F(), { resolvedTheme: h } = r(), g = U(null), _ = U(null), v = U(null), y = U(null), b = U(0), x = U([]), S = U("#ef4444"), C = U(null), w = U(null), T = U(null), E = U(!1), D = t.dimensions.filter((n) => n.jointName === e && i.has(n.id) && t.seriesData[n.id] != null), O = D.some((e) => e.kind === "action" && c && o || e.kind === "state" && l && s);
 	return V(() => p((e) => {
 		b.current = e, y.current?.redraw(!1, !1);
@@ -14683,7 +14711,7 @@ var Um = {
 				label: `${r ? d : u}: ${e.featureKey}`,
 				stroke: h,
 				width: r ? 1.25 : 1.5,
-				dash: r ? [] : Mm,
+				dash: r ? [] : Vm,
 				points: { show: !1 },
 				spanGaps: !0
 			});
@@ -14696,8 +14724,8 @@ var Um = {
 			return;
 		}
 		A();
-		let j = wm(), { axisStroke: M, gridStroke: N, tickStroke: P } = xm(j);
-		S.current = bm(j, "--destructive", "#ef4444");
+		let j = Nm(), { axisStroke: M, gridStroke: N, tickStroke: P } = Am(j);
+		S.current = km(j, "--destructive", "#ef4444");
 		let te = (e) => {
 			let t = v.current;
 			if (!t) return;
@@ -14820,7 +14848,7 @@ var Um = {
 				return { hooks: {
 					init: (r) => {
 						e = () => {
-							r.setScale("y", Um);
+							r.setScale("y", Qm);
 						}, t = () => {
 							E.current = !0, te(r), ne();
 						}, n = () => {
@@ -14829,7 +14857,7 @@ var Um = {
 							if (e.button !== 0) return;
 							let t = r.cursor.left;
 							if (t == null) return;
-							let n = r.posToVal(t, "x"), i = x.current, a = i.length > 0 ? Im(i, n) : 0;
+							let n = r.posToVal(t, "x"), i = x.current, a = i.length > 0 ? Gm(i, n) : 0;
 							m(a);
 						});
 					},
@@ -14889,7 +14917,7 @@ var Um = {
 });
 //#endregion
 //#region src/react/components/panels/ChartPanel/Split/SplitChartsSheet.tsx
-function Gm(e) {
+function eh(e) {
 	let { index: t, style: n, ariaAttributes: r, jointOrder: i, chartCore: a, chartHeight: o, selectedSeriesIds: s, showAction: c, showState: l, hasAction: u, hasState: d, actionLabel: f, stateLabel: p } = e, m = i[t];
 	if (!m) return null;
 	let h = a.jointColorMap[m] ?? "#94a3b8";
@@ -14905,7 +14933,7 @@ function Gm(e) {
 				title: m,
 				children: m
 			})
-		}), /* @__PURE__ */ W(Wm, {
+		}), /* @__PURE__ */ W($m, {
 			jointName: m,
 			core: a,
 			chartHeight: o,
@@ -14919,7 +14947,7 @@ function Gm(e) {
 		})]
 	});
 }
-function Km({ open: e, onOpenChange: t, chartCore: n, allJointNames: r, selectedSeriesIds: i, jointFilterDropdownProps: o, showAction: s, showState: c, hasAction: l, hasState: u }) {
+function th({ open: e, onOpenChange: t, chartCore: n, allJointNames: r, selectedSeriesIds: i, jointFilterDropdownProps: o, showAction: s, showState: c, hasAction: l, hasState: u }) {
 	let { t: d } = a(), f = H(() => r, [r]), p = f.length, m = hr(p), h = gr(p), g = H(() => ({
 		jointOrder: f,
 		chartCore: n,
@@ -14951,7 +14979,7 @@ function Km({ open: e, onOpenChange: t, chartCore: n, allJointNames: r, selected
 			"aria-describedby": void 0,
 			children: [/* @__PURE__ */ W("div", {
 				className: "flex shrink-0 items-center border-b border-border/60 bg-muted/20 px-3 py-2",
-				children: /* @__PURE__ */ W(Am, {
+				children: /* @__PURE__ */ W(zm, {
 					...o,
 					contentClassName: x("w-80 max-h-[min(55vh,380px)] overflow-hidden", o.contentClassName)
 				})
@@ -14963,7 +14991,7 @@ function Km({ open: e, onOpenChange: t, chartCore: n, allJointNames: r, selected
 				}) : /* @__PURE__ */ W(fe, {
 					rowHeight: h,
 					rowCount: p,
-					rowComponent: Gm,
+					rowComponent: eh,
 					rowProps: g,
 					className: "h-full w-full",
 					style: {
@@ -14978,28 +15006,33 @@ function Km({ open: e, onOpenChange: t, chartCore: n, allJointNames: r, selected
 }
 //#endregion
 //#region src/react/components/panels/ChartPanel/ChartPanel.tsx
-var qm = (e, t) => {
+var nh = (e, t) => {
 	let n = Math.max(0, Math.min(1, t));
 	if (e.startsWith("#")) {
 		let t = e.slice(1);
 		if (t.length === 3) return `rgba(${parseInt(t[0] + t[0], 16)}, ${parseInt(t[1] + t[1], 16)}, ${parseInt(t[2] + t[2], 16)}, ${n})`;
 		if (t.length === 6) return `rgba(${parseInt(t.slice(0, 2), 16)}, ${parseInt(t.slice(2, 4), 16)}, ${parseInt(t.slice(4, 6), 16)}, ${n})`;
 	}
-	if (e.startsWith("rgb(")) return e.replace(/^rgb\((.+)\)$/, `rgba($1, ${n})`);
+	if (e.startsWith("rgb(")) {
+		let t = e.slice(4, -1).trim();
+		if (t.includes(",")) return `rgba(${t}, ${n})`;
+		let [r] = t.split("/");
+		return `rgba(${r.trim().replace(/\s+/g, ", ")}, ${n})`;
+	}
 	if (e.startsWith("rgba(")) return e;
 	if (e.startsWith("hsl(")) {
 		let t = e.match(/^hsl\(\s*([0-9.]+)\s*,\s*([0-9.]+%)\s*,\s*([0-9.]+%)\s*\)$/);
 		if (t) return `hsla(${t[1]}, ${t[2]}, ${t[3]}, ${n})`;
 	}
 	return e.startsWith("hsla("), e;
-}, Jm = {
+}, rh = {
 	min: null,
 	max: null
-}, Ym = (e) => {
+}, ih = (e) => {
 	let t = e.deltaY;
 	return e.deltaMode === WheelEvent.DOM_DELTA_LINE ? t *= 16 : e.deltaMode === WheelEvent.DOM_DELTA_PAGE && (t *= 400), t;
 };
-function Xm(e, t, n) {
+function ah(e, t, n) {
 	let r = e.scales.y, i = r.min, a = r.max;
 	if (typeof i != "number" || typeof a != "number" || !Number.isFinite(i) || !Number.isFinite(a)) return !1;
 	let o = a - i;
@@ -15016,12 +15049,12 @@ function Xm(e, t, n) {
 		max: m
 	}), !0;
 }
-var Zm = ({ params: e }) => {
-	let { t, i18n: n } = a(), { chartData: i, currentFrames: o, setFrameIndex: s, setPlaying: l } = F(), { subscribeFrameIndex: u, info: d, isLoading: f, error: p } = ee(), { selectedEpisodeIndex: m } = me(), { resolvedTheme: h } = r(), g = U(null), _ = U(null), v = U(null), y = U(null), b = U(!1), x = U(null), S = U(null), C = U(null), w = U(null), T = U(null), E = U(null), D = U(null), O = U(null), k = U(null), A = U(!1), j = U(null), M = U(!1), N = U(!1), P = U(null), te = U(null), ne = U(null), re = U(h), ie = U("#ef4444"), ae = U(0), oe = U([]), se = U(void 0), ce = U(!1), [le, ue] = ke(/* @__PURE__ */ new Set()), [de, fe] = ke(""), [pe, he] = ke(!0), [ge, _e] = ke(!0), [ve, ye] = ke(!1), be = H(() => cr(d, e?.featureKey), [d, e?.featureKey]), xe = H(() => be.some((e) => sr(e) === "action" && i[e] != null), [be, i]), Se = H(() => be.some((e) => sr(e) === "state" && i[e] != null), [be, i]), Ce = H(() => Lm(be, d?.features, i), [
+var oh = ({ params: e }) => {
+	let { t, i18n: n } = a(), { chartData: i, currentFrames: o, setFrameIndex: s, setPlaying: l } = F(), { subscribeFrameIndex: u, info: d, isLoading: f, error: p } = ee(), { selectedEpisodeIndex: m } = me(), { resolvedTheme: h } = r(), g = U(null), _ = U(null), v = U(null), y = U(null), b = U(!1), x = U(null), S = U(null), C = U(null), w = U(null), T = U(null), E = U(null), D = U(null), O = U(null), k = U(null), A = U(!1), j = U(null), M = U(!1), N = U(!1), P = U(null), te = U(null), ne = U(null), re = U(h), ie = U("#ef4444"), ae = U(0), oe = U([]), se = U(void 0), ce = U(!1), [le, ue] = ke(/* @__PURE__ */ new Set()), [de, fe] = ke(""), [pe, he] = ke(!0), [ge, _e] = ke(!0), [ve, ye] = ke(!1), be = H(() => cr(d, e?.featureKey), [d, e?.featureKey]), xe = H(() => be.some((e) => sr(e) === "action" && i[e] != null), [be, i]), Se = H(() => be.some((e) => sr(e) === "state" && i[e] != null), [be, i]), Ce = H(() => Km(be, d?.features, i), [
 		be,
 		d?.features,
 		i
-	]), I = H(() => Rm(Ce), [Ce]), L = H(() => Ce.map((e) => e.id), [Ce]), R = H(() => Vm({
+	]), I = H(() => qm(Ce), [Ce]), L = H(() => Ce.map((e) => e.id), [Ce]), R = H(() => Xm({
 		chartData: i,
 		currentFrames: o,
 		targetFeatures: be,
@@ -15033,7 +15066,7 @@ var Zm = ({ params: e }) => {
 		be,
 		d?.features,
 		h
-	]), z = H(() => zm(I, h), [I, h]), we = R?.jointColorMap ?? z, Te = U(!1);
+	]), z = H(() => Jm(I, h), [I, h]), we = R?.jointColorMap ?? z, Te = U(!1);
 	V(() => {
 		Te.current = !1;
 	}, [L]), V(() => {
@@ -15041,8 +15074,8 @@ var Zm = ({ params: e }) => {
 	}, [L, le.size]);
 	let Ee = B((e, t) => {
 		let n = P.current;
-		return !n || n.size === 0 || n.has(e) ? t : qm(t, .22);
-	}, []), De = H(() => R ? Hm(R, {
+		return !n || n.size === 0 || n.has(e) ? t : nh(t, .22);
+	}, []), De = H(() => R ? Zm(R, {
 		selectedSeriesIds: le,
 		showAction: pe,
 		showState: ge,
@@ -15085,7 +15118,7 @@ var Zm = ({ params: e }) => {
 			}, 300));
 		};
 		e?.addEventListener("mouseenter", r), e?.addEventListener("mouseleave", i);
-		let a = wm(), o = (e, t) => bm(a, e, t), { axisStroke: c, gridStroke: l, tickStroke: u } = xm(a);
+		let a = Nm(), o = (e, t) => km(a, e, t), { axisStroke: c, gridStroke: l, tickStroke: u } = Am(a);
 		ie.current = o("--destructive", "#ef4444"), v.current && re.current !== h && (v.current.destroy(), v.current = null, re.current = h);
 		let d = t("units.second.short"), f = t("units.frame"), p = t("chart.tooltip.time"), m = (e, t, n) => {
 			let r = ne.current;
@@ -15284,12 +15317,12 @@ var Zm = ({ params: e }) => {
 			let e = de;
 			if (de = 0, e === 0) return;
 			let t = v.current;
-			t && Xm(t, e, fe);
+			t && ah(t, e, fe);
 		}, me = (e) => {
-			e.ctrlKey || e.metaKey || e.shiftKey || e.altKey || v.current && (de += Ym(e), fe = e.offsetY, e.preventDefault(), ue ??= window.requestAnimationFrame(pe));
+			e.ctrlKey || e.metaKey || e.shiftKey || e.altKey || v.current && (de += ih(e), fe = e.offsetY, e.preventDefault(), ue ??= window.requestAnimationFrame(pe));
 		}, he = () => {
 			let e = v.current;
-			e && e.setScale("y", Jm);
+			e && e.setScale("y", rh);
 		}, ge = {
 			width: _.current.offsetWidth || 800,
 			height: _.current.offsetHeight || 400,
@@ -15356,7 +15389,7 @@ var Zm = ({ params: e }) => {
 						return;
 					}
 					if (A.current) return;
-					let i = oe.current, a = i.length > 0 ? Im(i, r) : n, o = e.over, s = o.offsetLeft || 0, c = o.offsetTop || 0, l = e.cursor.left ?? 0, u = e.cursor.top ?? 0, d = s + l, f = c + u, p = _.current?.clientWidth ?? o.clientWidth, m = _.current?.clientHeight ?? o.clientHeight;
+					let i = oe.current, a = i.length > 0 ? Gm(i, r) : n, o = e.over, s = o.offsetLeft || 0, c = o.offsetTop || 0, l = e.cursor.left ?? 0, u = e.cursor.top ?? 0, d = s + l, f = c + u, p = _.current?.clientWidth ?? o.clientWidth, m = _.current?.clientHeight ?? o.clientHeight;
 					C.current = {
 						u: e,
 						idx: n,
@@ -15378,20 +15411,20 @@ var Zm = ({ params: e }) => {
 					let s = te.current;
 					if (!s) return;
 					let c = e.valToPos(s.xVal, "x", !0), l = e.valToPos(s.yVal, "y", !0);
-					!Number.isFinite(c) || !Number.isFinite(l) || c < n.left || c > n.left + n.width || l < n.top || l > n.top + n.height || (t.save(), t.setLineDash([]), t.beginPath(), t.arc(c, l, 8, 0, Math.PI * 2), t.fillStyle = qm(s.color, .2), t.fill(), t.beginPath(), t.arc(c, l, 4.2, 0, Math.PI * 2), t.fillStyle = s.color, t.fill(), t.lineWidth = 1.5, t.strokeStyle = "#ffffff", t.stroke(), t.restore());
+					!Number.isFinite(c) || !Number.isFinite(l) || c < n.left || c > n.left + n.width || l < n.top || l > n.top + n.height || (t.save(), t.setLineDash([]), t.beginPath(), t.arc(c, l, 8, 0, Math.PI * 2), t.fillStyle = nh(s.color, .2), t.fill(), t.beginPath(), t.arc(c, l, 4.2, 0, Math.PI * 2), t.fillStyle = s.color, t.fill(), t.lineWidth = 1.5, t.strokeStyle = "#ffffff", t.stroke(), t.restore());
 				}]
 			},
 			plugins: [{ hooks: {
 				init: (e) => {
 					e.over.addEventListener("wheel", me, { passive: !1 }), e.over.addEventListener("dblclick", he), e.over.addEventListener("mousedown", (t) => {
 						if (t.button === 0) {
-							let t = e.posToVal(e.cursor.left, "x"), n = oe.current, r = n.length > 0 ? Im(n, t) : 0;
+							let t = e.posToVal(e.cursor.left, "x"), n = oe.current, r = n.length > 0 ? Gm(n, t) : 0;
 							s(r);
-							let i = e.over, a = i.offsetLeft || 0, o = i.offsetTop || 0, c = e.cursor.left ?? 0, l = e.cursor.top ?? 0, u = a + c, d = o + l, f = e.data[0], p = f.length > 0 ? Im(Array.from(f), t) : 0, m = Number(f[p] ?? t), h = {
+							let i = e.over, a = i.offsetLeft || 0, o = i.offsetTop || 0, c = e.cursor.left ?? 0, l = e.cursor.top ?? 0, u = a + c, d = o + l, f = e.data[0], p = f.length > 0 ? Gm(Array.from(f), t) : 0, m = Number(f[p] ?? t), h = {
 								u: e,
 								idx: p,
 								xVal: m,
-								frameIdx: n.length > 0 ? Im(n, m) : p,
+								frameIdx: n.length > 0 ? Gm(n, m) : p,
 								cursorX: u,
 								cursorY: d,
 								containerW: _.current?.clientWidth ?? i.clientWidth,
@@ -15510,7 +15543,7 @@ var Zm = ({ params: e }) => {
 				className: "flex items-center justify-between px-3 py-1.5 border-b bg-muted/20",
 				children: [/* @__PURE__ */ G("div", {
 					className: "flex items-center gap-2 overflow-hidden mr-2",
-					children: [/* @__PURE__ */ W(Am, { ...Be }), /* @__PURE__ */ G(c, {
+					children: [/* @__PURE__ */ W(zm, { ...Be }), /* @__PURE__ */ G(c, {
 						type: "button",
 						variant: "ghost",
 						size: "sm",
@@ -15617,10 +15650,10 @@ var Zm = ({ params: e }) => {
 					})]
 				}), !De && /* @__PURE__ */ W("div", {
 					className: "absolute inset-0",
-					children: p && !f ? /* @__PURE__ */ W(Em, { message: p }) : m === null && !f ? /* @__PURE__ */ W(Em, { message: t("playback.noData") }) : /* @__PURE__ */ W(Tm, { message: t("common.loading") })
+					children: p && !f ? /* @__PURE__ */ W(Fm, { message: p }) : m === null && !f ? /* @__PURE__ */ W(Fm, { message: t("playback.noData") }) : /* @__PURE__ */ W(Pm, { message: t("common.loading") })
 				})]
 			}),
-			R ? /* @__PURE__ */ W(Km, {
+			R ? /* @__PURE__ */ W(th, {
 				open: ve,
 				onOpenChange: (e) => {
 					ye(e), e && l(!1);
@@ -15636,7 +15669,7 @@ var Zm = ({ params: e }) => {
 			}) : null
 		]
 	});
-}, Qm = Ee(function({ checked: e, indeterminate: t }) {
+}, sh = Ee(function({ checked: e, indeterminate: t }) {
 	let n = U(null);
 	return V(() => {
 		n.current && (n.current.checked = e, n.current.indeterminate = t);
@@ -15647,7 +15680,7 @@ var Zm = ({ params: e }) => {
 		readOnly: !0,
 		className: "pointer-events-none h-3.5 w-3.5 shrink-0 rounded border-border accent-primary"
 	});
-}), $m = Ee(function({ groups: e, selectedIds: n, searchValue: r, onSearchChange: i, onSetItemsChecked: a, onToggleItem: o, onSelectAll: s, onClearAll: l, searchPlaceholder: u, emptyLabel: d, selectAllLabel: f, onHoverChange: m, getItemColor: h, getGroupColor: g, className: _ }) {
+}), ch = Ee(function({ groups: e, selectedIds: n, searchValue: r, onSearchChange: i, onSetItemsChecked: a, onToggleItem: o, onSelectAll: s, onClearAll: l, searchPlaceholder: u, emptyLabel: d, selectAllLabel: f, onHoverChange: m, getItemColor: h, getGroupColor: g, className: _ }) {
 	let v = H(() => e.flatMap((e) => e.items.map((e) => e.id)), [e]), y = H(() => Qn(e, r), [e, r]), b = H(() => v.reduce((e, t) => n.has(t) ? e + 1 : e, 0), [v, n]), S = v.length > 0 && b === v.length, C = !S && b !== 0;
 	return /* @__PURE__ */ G("div", {
 		className: x("w-full", _),
@@ -15664,7 +15697,7 @@ var Zm = ({ params: e }) => {
 					},
 					title: f,
 					"aria-label": f,
-					children: /* @__PURE__ */ W(Qm, {
+					children: /* @__PURE__ */ W(sh, {
 						checked: S,
 						indeterminate: C
 					})
@@ -15714,7 +15747,7 @@ var Zm = ({ params: e }) => {
 							itemIds: t
 						}),
 						children: [
-							/* @__PURE__ */ W(Qm, {
+							/* @__PURE__ */ W(sh, {
 								checked: r === "all",
 								indeterminate: r === "partial"
 							}),
@@ -15740,7 +15773,7 @@ var Zm = ({ params: e }) => {
 							itemIds: [e.id]
 						}),
 						children: [
-							/* @__PURE__ */ W(Qm, {
+							/* @__PURE__ */ W(sh, {
 								checked: n.has(e.id),
 								indeterminate: !1
 							}),
@@ -15758,39 +15791,39 @@ var Zm = ({ params: e }) => {
 			})
 		})]
 	});
-}), eh = 200, th = 50, nh = 20;
-function rh(e) {
+}), lh = 200, uh = 50, dh = 20;
+function fh(e) {
 	return typeof e == "object" && !!e && e.__rawMedia === !0 && (e.kind === "image" || e.kind === "video");
 }
-function ih(e) {
+function ph(e) {
 	return `${e.featureKey}_episode-${e.episodeIndex}_frame-${e.frameIndex}`;
 }
-function ah(e) {
+function mh(e) {
 	if (e == null || e === "") return null;
 	let t = Number(e);
 	return Number.isFinite(t) ? t : null;
 }
-function oh(e, t) {
+function hh(e, t) {
 	if (!e) return null;
 	let n = e.match(t);
-	return n ? ah(n[1]) : null;
+	return n ? mh(n[1]) : null;
 }
-function sh(e) {
-	let t = ah(e?.chunks_size);
+function gh(e) {
+	let t = mh(e?.chunks_size);
 	return t && t > 0 ? t : 1e3;
 }
-function ch(e) {
-	let { kind: t, featureKey: n, info: r, episode: i, episodeIndex: a, frameIndex: o, path: s } = e, c = i ?? {}, l = `videos/${n}`, u = oh(s, /chunk-(\d+)/), d = oh(s, /file-(\d+)/), f = Math.floor(a / sh(r));
+function _h(e) {
+	let { kind: t, featureKey: n, info: r, episode: i, episodeIndex: a, frameIndex: o, path: s } = e, c = i ?? {}, l = `videos/${n}`, u = hh(s, /chunk-(\d+)/), d = hh(s, /file-(\d+)/), f = Math.floor(a / gh(r));
 	return {
 		type: t,
 		path: s,
-		chunk_index: t === "video" ? ah(c[`${l}/chunk_index`]) ?? ah(c["data/chunk_index"]) ?? ah(c.chunk_index) ?? u ?? f : ah(c["data/chunk_index"]) ?? ah(c.chunk_index) ?? u ?? f,
-		file_index: t === "video" ? ah(c[`${l}/file_index`]) ?? ah(c["data/file_index"]) ?? ah(c.file_index) ?? d : ah(c["data/file_index"]) ?? ah(c.file_index) ?? d,
+		chunk_index: t === "video" ? mh(c[`${l}/chunk_index`]) ?? mh(c["data/chunk_index"]) ?? mh(c.chunk_index) ?? u ?? f : mh(c["data/chunk_index"]) ?? mh(c.chunk_index) ?? u ?? f,
+		file_index: t === "video" ? mh(c[`${l}/file_index`]) ?? mh(c["data/file_index"]) ?? mh(c.file_index) ?? d : mh(c["data/file_index"]) ?? mh(c.file_index) ?? d,
 		episode_index: a,
 		frame_index: o
 	};
 }
-var lh = Ee((e) => {
+var vh = Ee((e) => {
 	let { data: t, labelNode: r, depth: i, isLast: a, translations: o, mediaActions: s } = e, [c, l] = ke("idle"), u = H(() => ({ marginLeft: `${i * 14}px` }), [i]), d = B((e) => {
 		e.stopPropagation(), !(!s || c === "copying") && (l("copying"), s.copyImage(t).then((e) => {
 			l(e === "clipboard" ? "copied" : "downloaded"), window.setTimeout(() => l("idle"), 2e3);
@@ -15826,9 +15859,9 @@ var lh = Ee((e) => {
 		})
 	});
 });
-lh.displayName = "RawMediaTreeNode";
-var uh = Ee(({ data: e, label: t, depth: n = 0, isLast: r = !0, annotations: i, path: a = "", translations: o, mediaActions: s }) => {
-	let [c, l] = ke(n < 2), [u, d] = ke(nh), p = B((n) => {
+vh.displayName = "RawMediaTreeNode";
+var yh = Ee(({ data: e, label: t, depth: n = 0, isLast: r = !0, annotations: i, path: a = "", translations: o, mediaActions: s }) => {
+	let [c, l] = ke(n < 2), [u, d] = ke(dh), p = B((n) => {
 		if (n.stopPropagation(), !(e instanceof Uint8Array)) return;
 		let r = new Blob([e], { type: "application/octet-stream" }), i = URL.createObjectURL(r), a = document.createElement("a");
 		a.href = i, a.download = t ? `${t}.bin` : "data.bin", document.body.appendChild(a), a.click(), document.body.removeChild(a), URL.revokeObjectURL(i);
@@ -15880,7 +15913,7 @@ var uh = Ee(({ data: e, label: t, depth: n = 0, isLast: r = !0, annotations: i,
 			!r && ","
 		]
 	});
-	if (rh(e)) return /* @__PURE__ */ W(lh, {
+	if (fh(e)) return /* @__PURE__ */ W(vh, {
 		data: e,
 		labelNode: h,
 		depth: n,
@@ -15899,7 +15932,7 @@ var uh = Ee(({ data: e, label: t, depth: n = 0, isLast: r = !0, annotations: i,
 				!r && ","
 			]
 		});
-		let v = f && e.length > th, y = f ? v ? e.slice(0, u) : e : Object.entries(e), b = f ? e.length - u : 0;
+		let v = f && e.length > uh, y = f ? v ? e.slice(0, u) : e : Object.entries(e), b = f ? e.length - u : 0;
 		return /* @__PURE__ */ G("div", {
 			style: m,
 			className: "font-mono text-xs leading-5",
@@ -15925,7 +15958,7 @@ var uh = Ee(({ data: e, label: t, depth: n = 0, isLast: r = !0, annotations: i,
 					let r = i?.[_]?.[t], a = t;
 					return /* @__PURE__ */ G("div", {
 						className: "flex group",
-						children: [/* @__PURE__ */ W(uh, {
+						children: [/* @__PURE__ */ W(yh, {
 							data: e,
 							depth: n + 1,
 							isLast: t === y.length - 1 && b <= 0,
@@ -15943,21 +15976,21 @@ var uh = Ee(({ data: e, label: t, depth: n = 0, isLast: r = !0, annotations: i,
 					style: { marginLeft: `${(n + 1) * 14}px` },
 					className: "text-xs text-primary cursor-pointer hover:underline py-1",
 					onClick: (t) => {
-						t.stopPropagation(), d((t) => Math.min(t + nh, e.length));
+						t.stopPropagation(), d((t) => Math.min(t + dh, e.length));
 					},
 					children: o.showMore(b)
 				}),
-				v && u > nh && /* @__PURE__ */ W("div", {
+				v && u > dh && /* @__PURE__ */ W("div", {
 					style: { marginLeft: `${(n + 1) * 14}px` },
 					className: "text-xs text-muted-foreground cursor-pointer hover:underline py-1",
 					onClick: (e) => {
-						e.stopPropagation(), d(nh);
+						e.stopPropagation(), d(dh);
 					},
 					children: o.showLess
 				})
 			] }) : y.map(([e, t], r, a) => {
-				let c = rh(t) ? `${e}:${t.kind}:${t.episodeIndex}` : e;
-				return /* @__PURE__ */ W(uh, {
+				let c = fh(t) ? `${e}:${t.kind}:${t.episodeIndex}` : e;
+				return /* @__PURE__ */ W(yh, {
 					label: e,
 					data: t,
 					depth: n + 1,
@@ -15994,8 +16027,8 @@ var uh = Ee(({ data: e, label: t, depth: n = 0, isLast: r = !0, annotations: i,
 		]
 	});
 }, (e, t) => e.data === t.data && e.label === t.label && e.depth === t.depth && e.isLast === t.isLast && e.path === t.path && e.annotations === t.annotations && e.translations === t.translations && e.mediaActions === t.mediaActions);
-uh.displayName = "JsonTreeView";
-var dh = Ee((e) => {
+yh.displayName = "JsonTreeView";
+var bh = Ee((e) => {
 	let { isPaused: t, copied: r, hasData: a, selectedFeatures: s, allFeaturesCount: l, featureGroups: u, featureSearch: d, onFeatureSearchChange: f, onToggleFeature: p, onSetFeaturesChecked: m, onSelectAll: h, onClearAll: _, onTogglePause: y, onManualRefresh: S, onCopy: C, allFeaturesLabel: w, featuresCountLabel: T, selectAllLabel: E, searchFeaturePlaceholder: D, noSearchResultLabel: O, pauseLabel: k, resumeLabel: ee, refreshLabel: A, copyLabel: j, copiedLabel: M } = e, N = s.size === 1 ? Array.from(s)[0] : null, P = s.size === l ? w : s.size === 1 ? N : T;
 	return /* @__PURE__ */ G("div", {
 		className: "flex items-center justify-between px-3 py-1.5 border-b bg-muted/20",
@@ -16018,7 +16051,7 @@ var dh = Ee((e) => {
 			}), /* @__PURE__ */ W(Mn, {
 				align: "start",
 				className: "w-80 max-h-[70vh] overflow-hidden",
-				children: /* @__PURE__ */ W($m, {
+				children: /* @__PURE__ */ W(ch, {
 					groups: u,
 					selectedIds: s,
 					searchValue: d,
@@ -16070,27 +16103,27 @@ var dh = Ee((e) => {
 		})]
 	});
 });
-dh.displayName = "RawPanelHeader";
-var fh = Ee((e) => {
+bh.displayName = "RawPanelHeader";
+var xh = Ee((e) => {
 	let { combinedData: t, featureAnnotations: n, translations: r, mediaActions: i, selectedCount: a, loadingLabel: o, noFeatureLabel: s, noEpisodeLabel: c, hasSelectedEpisode: l, isStale: u } = e;
-	return l ? !t && a > 0 ? /* @__PURE__ */ W(Tm, { message: o }) : /* @__PURE__ */ W(h, {
+	return l ? !t && a > 0 ? /* @__PURE__ */ W(Pm, { message: o }) : /* @__PURE__ */ W(h, {
 		className: x("flex-1 transition-opacity duration-150", u ? "opacity-85" : "opacity-100"),
 		children: /* @__PURE__ */ W("div", {
 			className: "p-3 min-w-fit max-w-full",
-			children: t ? /* @__PURE__ */ W(uh, {
+			children: t ? /* @__PURE__ */ W(yh, {
 				data: t,
 				annotations: n,
 				translations: r,
 				mediaActions: i
-			}) : a === 0 ? /* @__PURE__ */ W(Em, {
+			}) : a === 0 ? /* @__PURE__ */ W(Fm, {
 				message: s,
 				className: "py-20"
 			}) : null
 		})
-	}) : /* @__PURE__ */ W(Em, { message: c });
+	}) : /* @__PURE__ */ W(Fm, { message: c });
 });
-fh.displayName = "RawPanelTreeBody";
-var ph = ({ params: e }) => {
+xh.displayName = "RawPanelTreeBody";
+var Sh = ({ params: e }) => {
 	let { t } = a(), { info: n, featureData: r, subscribeFeature: i, unsubscribeFeature: o, subscribeFrameIndex: s, getFrameIndex: c, dataLoader: l, imageService: u, episodes: d } = ee(), { selectedEpisodeIndex: f } = me(), [p, m] = ke(null), [h, g] = ke(!1), [_, v] = ke(""), [y, b] = ke(!1), x = U(0), S = U(0), C = U({
 		value: c(),
 		listeners: /* @__PURE__ */ new Set()
@@ -16119,7 +16152,7 @@ var ph = ({ params: e }) => {
 	V(() => s((e) => {
 		if (S.current = e, y) return;
 		let t = Date.now();
-		t - x.current >= eh && (x.current = t, De(() => {
+		t - x.current >= lh && (x.current = t, De(() => {
 			w(e);
 		}));
 	}), [
@@ -16177,7 +16210,7 @@ var ph = ({ params: e }) => {
 		f
 	]), ne = Oe(te), re = ne !== te, F = H(() => f === null ? null : d.find((e) => e.episode_index === f) ?? d[f] ?? null, [d, f]), ie = H(() => {
 		if (l) return { copyImage: async (e) => {
-			let t = ih(e);
+			let t = ph(e);
 			if (e.kind === "image") {
 				let n = l.getEpisodeDataPath(e.episodeIndex);
 				if (!n) throw Error(`Episode ${e.episodeIndex} data path not found`);
@@ -16191,7 +16224,7 @@ var ph = ({ params: e }) => {
 			let a = ge(n, i);
 			if (f !== null && (a === "image" || a === "video")) {
 				let r = a === "video" ? l?.getEpisodeVideoPath(f, i)?.path ?? null : l?.getEpisodeDataPath(f)?.path ?? null;
-				e[i] = ch({
+				e[i] = _h({
 					kind: a,
 					featureKey: i,
 					info: n,
@@ -16222,7 +16255,7 @@ var ph = ({ params: e }) => {
 	}, [M]), de = B((e) => v(e), []);
 	return /* @__PURE__ */ G("div", {
 		className: "flex flex-col h-full bg-background text-foreground overflow-hidden",
-		children: [/* @__PURE__ */ W(dh, {
+		children: [/* @__PURE__ */ W(bh, {
 			isPaused: y,
 			copied: h,
 			hasData: !!te,
@@ -16248,7 +16281,7 @@ var ph = ({ params: e }) => {
 			refreshLabel: t("panels.raw.refresh"),
 			copyLabel: t("common.copy"),
 			copiedLabel: t("common.copied")
-		}), /* @__PURE__ */ W(fh, {
+		}), /* @__PURE__ */ W(xh, {
 			combinedData: ne,
 			featureAnnotations: P,
 			translations: O,
@@ -16264,7 +16297,7 @@ var ph = ({ params: e }) => {
 };
 //#endregion
 //#region src/react/components/panels/Common/PanelErrorBoundary.tsx
-function mh({ error: e, panelName: t, onRetry: n }) {
+function Ch({ error: e, panelName: t, onRetry: n }) {
 	let { t: r } = a();
 	return /* @__PURE__ */ G("div", {
 		className: "flex flex-col items-center justify-center h-full w-full bg-background text-foreground p-4 text-center",
@@ -16305,7 +16338,7 @@ function mh({ error: e, panelName: t, onRetry: n }) {
 		]
 	});
 }
-var hh = class extends we {
+var wh = class extends we {
 	state = {
 		hasError: !1,
 		error: null,
@@ -16334,23 +16367,23 @@ var hh = class extends we {
 				panelName: this.props.panelName,
 				onRetry: this.handleRetry
 			};
-			return this.props.renderFallback ? this.props.renderFallback(e) : /* @__PURE__ */ W(mh, { ...e });
+			return this.props.renderFallback ? this.props.renderFallback(e) : /* @__PURE__ */ W(Ch, { ...e });
 		}
 		return /* @__PURE__ */ W(z.Fragment, { children: this.props.children }, this.state.retryKey);
 	}
-}, gh = 3;
-function _h(e) {
+}, Th = 3;
+function Eh(e) {
 	return e instanceof Error && e.message.includes("already exists");
 }
-function vh(e, t, n) {
+function Dh(e, t, n) {
 	let r = `${t}-${n}`, i = 1;
 	for (; e.getPanel(`${r}-${i}`);) i += 1;
 	return `${r}-${i}`;
 }
-function yh(e, t) {
+function Oh(e, t) {
 	let { autoId: n, ...r } = t;
-	for (let t = 0; t < gh; t++) {
-		let i = r.id ?? (n ? vh(e, n.type, n.featureKey) : void 0);
+	for (let t = 0; t < Th; t++) {
+		let i = r.id ?? (n ? Dh(e, n.type, n.featureKey) : void 0);
 		if (!i) {
 			console.warn("[dockview] safeAddPanel: missing panel id");
 			return;
@@ -16361,7 +16394,7 @@ function yh(e, t) {
 				id: i
 			});
 		} catch (e) {
-			if (!_h(e)) throw e;
+			if (!Eh(e)) throw e;
 			if (!n || t === 2) {
 				console.warn("[dockview] safeAddPanel: panel id conflict", i, e);
 				return;
@@ -16371,7 +16404,7 @@ function yh(e, t) {
 }
 //#endregion
 //#region src/react/components/PanelTitle.tsx
-var bh = (e) => {
+var kh = (e) => {
 	let { api: n, containerApi: r } = e, { t: o } = a(), { info: s } = ee(), l = n.id, u = r.getPanel(l), d = z.useMemo(() => s?.features ? Object.keys(s.features).sort() : [], [s]), f = (e) => {
 		let t = s?.features[e];
 		return t ? t.dtype === "video" ? "video" : t.dtype === "image" ? "image" : t.dtype.includes("float") || t.dtype.includes("int") ? "chart" : "raw" : "raw";
@@ -16385,7 +16418,7 @@ var bh = (e) => {
 	}, m = (e, t) => {
 		if (!u) return;
 		let n = f(t), i = t.split(".").pop() || t;
-		yh(r, {
+		Oh(r, {
 			component: n,
 			title: i,
 			params: { featureKey: t },
@@ -16507,24 +16540,24 @@ var bh = (e) => {
 			children: g
 		})
 	});
-}, xh = Te(null), Sh = {
-	video: (e) => /* @__PURE__ */ W(hh, {
+}, Ah = Te(null), jh = {
+	video: (e) => /* @__PURE__ */ W(wh, {
 		panelName: "Video",
 		children: /* @__PURE__ */ W(fl, { params: e.params })
 	}),
-	image: (e) => /* @__PURE__ */ W(hh, {
+	image: (e) => /* @__PURE__ */ W(wh, {
 		panelName: "Image",
 		children: /* @__PURE__ */ W(ul, { params: e.params })
 	}),
-	chart: (e) => /* @__PURE__ */ W(hh, {
+	chart: (e) => /* @__PURE__ */ W(wh, {
 		panelName: "Chart",
-		children: /* @__PURE__ */ W(Zm, { params: e.params })
+		children: /* @__PURE__ */ W(oh, { params: e.params })
 	}),
-	raw: (e) => /* @__PURE__ */ W(hh, {
+	raw: (e) => /* @__PURE__ */ W(wh, {
 		panelName: "Raw",
-		children: /* @__PURE__ */ W(ph, { params: e.params })
+		children: /* @__PURE__ */ W(Sh, { params: e.params })
 	})
-}, Ch = { default: bh }, wh = () => {
+}, Mh = { default: kh }, Nh = () => {
 	let e = U(null), [t, n] = ke(null), { t: i } = a(), { resolvedTheme: o } = r(), { info: s } = ee(), c = U(null), [l, u] = ke(4);
 	V(() => {
 		let e = c.current;
@@ -16615,13 +16648,13 @@ var bh = (e) => {
 			}];
 		})), { row1: r, row2: a } = D(Array.from(n.keys()), 6, l), o = r.map((e) => n.get(e)).filter((e) => !!e), c = a.map((e) => n.get(e)).filter((e) => !!e), u = [...o, ...c];
 		if (u.length === 0) {
-			yh(t, {
+			Oh(t, {
 				id: "chart-panel",
 				component: "chart",
 				title: i("common.chart"),
 				params: {},
 				tabComponent: "default"
-			}), yh(t, {
+			}), Oh(t, {
 				id: "raw-panel",
 				component: "raw",
 				title: i("panels.raw.title"),
@@ -16635,7 +16668,7 @@ var bh = (e) => {
 			return;
 		}
 		let f = o[0].id;
-		yh(t, {
+		Oh(t, {
 			id: f,
 			component: u[0].component,
 			title: u[0].title,
@@ -16643,7 +16676,7 @@ var bh = (e) => {
 			tabComponent: "default"
 		});
 		let p = f;
-		for (let e of o.slice(1)) yh(t, {
+		for (let e of o.slice(1)) Oh(t, {
 			id: e.id,
 			component: e.component,
 			title: e.title,
@@ -16656,7 +16689,7 @@ var bh = (e) => {
 		}), p = e.id;
 		if (c.length > 0) {
 			let e = c[0];
-			yh(t, {
+			Oh(t, {
 				id: e.id,
 				component: e.component,
 				title: e.title,
@@ -16665,7 +16698,7 @@ var bh = (e) => {
 				position: { direction: "below" }
 			});
 			let n = e.id;
-			for (let e of c.slice(1)) yh(t, {
+			for (let e of c.slice(1)) Oh(t, {
 				id: e.id,
 				component: e.component,
 				title: e.title,
@@ -16677,14 +16710,14 @@ var bh = (e) => {
 				}
 			}), n = e.id;
 		}
-		yh(t, {
+		Oh(t, {
 			id: "chart-panel",
 			component: "chart",
 			title: i("common.chart"),
 			params: {},
 			tabComponent: "default",
 			position: { direction: "below" }
-		}), yh(t, {
+		}), Oh(t, {
 			id: "raw-panel",
 			component: "raw",
 			title: i("panels.raw.title"),
@@ -16699,15 +16732,15 @@ var bh = (e) => {
 		s,
 		i,
 		l
-	]), /* @__PURE__ */ W(xh.Provider, {
+	]), /* @__PURE__ */ W(Ah.Provider, {
 		value: t,
 		children: /* @__PURE__ */ W("div", {
 			ref: c,
 			className: "w-full h-full",
 			children: /* @__PURE__ */ W(Zc, {
-				components: Sh,
-				tabComponents: Ch,
-				defaultTabComponent: bh,
+				components: jh,
+				tabComponents: Mh,
+				defaultTabComponent: kh,
 				singleTabMode: "fullwidth",
 				disableTabsOverflowList: !0,
 				onReady: (t) => {
@@ -16722,4 +16755,4 @@ var bh = (e) => {
 	});
 };
 //#endregion
-export { wh as DockviewLayout };
+export { Nh as DockviewLayout };

package/dist-lib/lerobot-studio.css

@@ -4228,7 +4228,7 @@
   unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
-:root {
+:root, .lerobot-root {
   --background: oklch(100% 0 0);
   --foreground: oklch(14.5% 0 0);
   --card: oklch(100% 0 0);
@@ -4263,7 +4263,7 @@
   --sidebar-ring: oklch(70.8% 0 0);
 }
 
-.dark {
+.dark, .lerobot-root.dark {
   --background: oklch(14.5% 0 0);
   --foreground: oklch(98.5% 0 0);
   --card: oklch(20.5% 0 0);

package/dist-lib/lerobot.es.js

@@ -8789,7 +8789,7 @@ var dm = () => {
 			})
 		]
 	});
-}, pm = H.lazy(async () => ({ default: (await import("./DockviewLayout-CF0ewhDR.js")).DockviewLayout }));
+}, pm = H.lazy(async () => ({ default: (await import("./DockviewLayout-C8FCn77e.js")).DockviewLayout }));
 function mm({ showSidebar: e = !0, showPlaybackBar: t = !0, className: n, sidebar: r, emptyState: i, sidebarHeader: a, showToaster: o = !0, onRetry: s }) {
 	let { t: l } = c(), { episodes: u, info: d, clearError: f, error: p } = j(), { tasks: m } = fp(), h = d !== null && u.length > 0, g = h && e && !!r, _ = m.find((e) => e.phase !== "ready" && e.phase !== "idle" && e.phase !== "error"), v = m.find((e) => e.phase === "error"), y = s ?? (() => {
 		f();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ioai/lerobot-studio",
   "private": false,
-  "version": "1.3.0",
+  "version": "1.3.2",
   "type": "module",
   "packageManager": "npm@11.7.0",
   "scripts": {