@ioai/lerobot-studio 1.0.1 → 1.0.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.0.2
+
+### Patch Changes
+
+- 373f5a6: Fix dark theme adaptation for sidebar chrome, dialogs, charts, and scoped studio root tokens.
+
 ## 1.0.1
 
 ### Patch Changes

package/dist-lib/{DockviewLayout-0MP_kiQC.js → DockviewLayout-DjLrI3Yt.js}

@@ -1,4 +1,4 @@
-import { $ as e, A as t, B as n, C as r, D as i, E as a, G as o, H as s, I as c, J as l, L as u, M as d, N as f, O as p, P as m, Q as h, R as g, S as _, T as v, V as y, W as b, X as x, Y as S, Z as C, _ as w, at as T, b as E, c as D, ct as O, d as k, dt as A, et as j, f as M, g as N, h as ee, ht as te, it as ne, j as re, k as ie, l as P, mt as F, nt as I, ot as L, pt as R, q as ae, rt as oe, s as se, st as ce, t as le, tt as ue, u as de, ut as fe, w as pe, x as me, y as he, z as ge } from "./react-window-CGTfzj0C.js";
+import { $ as e, A as t, B as n, C as r, D as i, E as a, G as o, H as s, I as c, J as l, L as u, M as d, N as f, O as p, P as m, Q as h, R as g, S as _, T as v, V as y, W as b, X as x, Y as S, Z as C, _ as w, at as T, b as E, c as D, ct as O, d as k, dt as A, et as j, f as M, g as N, h as ee, ht as te, it as ne, j as re, k as ie, l as P, mt as F, nt as I, ot as L, pt as R, q as ae, rt as oe, s as se, st as ce, t as le, tt as ue, u as de, ut as fe, w as pe, x as me, y as he, z as ge } from "./react-window-B1KnRC6j.js";
 import { n as _e } from "./MediaCache-DZ7bEoOY.js";
 import * as z from "react";
 import B, { Component as ve, createContext as V, memo as H, startTransition as ye, useCallback as U, useDeferredValue as be, useEffect as xe, useMemo as W, useRef as G, useState as Se, useSyncExternalStore as Ce } from "react";
@@ -1385,7 +1385,7 @@ function Cr({ className: e, ...t }) {
 function wr({ className: e, children: t, side: n = "right", showCloseButton: r = !0, ...i }) {
 	return /* @__PURE__ */ q(Sr, { children: [/* @__PURE__ */ K(Cr, {}), /* @__PURE__ */ q(s, {
 		"data-slot": "sheet-content",
-		className: F("fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500", n === "right" && "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm", n === "left" && "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm", n === "top" && "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", n === "bottom" && "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", e),
+		className: F("fixed z-50 flex flex-col gap-4 bg-background text-foreground shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500", n === "right" && "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm", n === "left" && "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm", n === "top" && "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", n === "bottom" && "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", e),
 		...i,
 		children: [t, r && /* @__PURE__ */ q(y, {
 			className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary",
@@ -14813,7 +14813,7 @@ eh.assign = gf, eh.fmtNum = Cd, eh.rangeNum = vd, eh.rangeLog = fd, eh.rangeAsin
 }
 //#endregion
 //#region src/react/lib/chartTheme.ts
-var th = typeof document < "u" ? () => document.querySelector("#lerobot-root") : () => null;
+var th = typeof document < "u" ? () => document.querySelector(".lerobot-root") ?? document.getElementById("lerobot-root") : () => null;
 function nh(e, t, n = "#888") {
 	let r = e ?? (typeof document < "u" ? document.documentElement : null);
 	if (!r) return n;
@@ -16051,7 +16051,7 @@ var Ph = ({ params: e }) => {
 	]);
 	return /* @__PURE__ */ q("div", {
 		ref: f,
-		className: "w-full h-full flex flex-col bg-background overflow-hidden",
+		className: "w-full h-full flex flex-col bg-background text-foreground overflow-hidden",
 		children: [
 			/* @__PURE__ */ q("div", {
 				className: "flex items-center justify-between px-3 py-1.5 border-b bg-muted/20",
@@ -16159,7 +16159,7 @@ var Ph = ({ params: e }) => {
 						className: "chart-uplot w-full h-full"
 					}), /* @__PURE__ */ K("div", {
 						ref: g,
-						className: "chart-tooltip pointer-events-auto select-text cursor-text absolute left-3 top-3 z-20 hidden max-w-[420px] rounded-md border bg-background/95 backdrop-blur text-[11px] shadow-lg transition-opacity duration-150",
+						className: "chart-tooltip pointer-events-auto select-text cursor-text absolute left-3 top-3 z-20 hidden max-w-[420px] rounded-md border bg-background/95 text-foreground backdrop-blur text-[11px] shadow-lg transition-opacity duration-150",
 						style: { opacity: 1 }
 					})]
 				}), !Ee && /* @__PURE__ */ K("div", {
@@ -16768,7 +16768,7 @@ var Xh = ({ params: e }) => {
 		p((n) => Fr(n ?? M, e, t));
 	}, [M]), ue = U((e) => _(e), []);
 	return /* @__PURE__ */ q("div", {
-		className: "flex flex-col h-full bg-background overflow-hidden",
+		className: "flex flex-col h-full bg-background text-foreground overflow-hidden",
 		children: [/* @__PURE__ */ K(Jh, {
 			isPaused: v,
 			copied: m,
@@ -16814,7 +16814,7 @@ var Xh = ({ params: e }) => {
 function Zh({ error: e, panelName: t, onRetry: n }) {
 	let { t: i } = te();
 	return /* @__PURE__ */ q("div", {
-		className: "flex flex-col items-center justify-center h-full w-full bg-background p-4 text-center",
+		className: "flex flex-col items-center justify-center h-full w-full bg-background text-foreground p-4 text-center",
 		role: "alert",
 		children: [
 			/* @__PURE__ */ K("div", {
@@ -16825,7 +16825,7 @@ function Zh({ error: e, panelName: t, onRetry: n }) {
 				})
 			}),
 			/* @__PURE__ */ K("h3", {
-				className: "text-sm font-semibold mb-1",
+				className: "text-sm font-semibold mb-1 text-foreground",
 				children: t ? i("panelErrorBoundary.namedTitle", { panelName: t }) : i("panelErrorBoundary.title")
 			}),
 			/* @__PURE__ */ K("p", {

package/dist-lib/lerobot-studio.css

@@ -2010,10 +2010,6 @@
     background-color: #0000;
   }
 
-  .lerobot-root .bg-white {
-    background-color: var(--color-white);
-  }
-
   .lerobot-root .fill-current {
     fill: currentColor;
   }
@@ -8170,8 +8166,8 @@
 }
 
 .lerobot-root .chart-uplot .u-select {
-  background: hsl(var(--primary) / .08);
-  border: 1px solid hsl(var(--primary) / .25);
+  background: color-mix(in oklch, var(--primary) 8%, transparent);
+  border: 1px solid color-mix(in oklch, var(--primary) 25%, transparent);
 }
 
 .lerobot-root .chart-uplot .uplot canvas {
@@ -8180,7 +8176,7 @@
 
 .lerobot-root .chart-tooltip {
   scrollbar-width: thin;
-  scrollbar-color: hsl(var(--muted-foreground) / .55) transparent;
+  scrollbar-color: color-mix(in oklch, var(--muted-foreground) 55%, transparent) transparent;
 }
 
 .lerobot-root .chart-tooltip::-webkit-scrollbar {
@@ -8192,10 +8188,10 @@
 }
 
 .lerobot-root .chart-tooltip::-webkit-scrollbar-thumb {
-  background: hsl(var(--muted-foreground) / .45);
+  background: color-mix(in oklch, var(--muted-foreground) 45%, transparent);
   border-radius: 9999px;
 }
 
 .lerobot-root .chart-tooltip::-webkit-scrollbar-thumb:hover {
-  background: hsl(var(--muted-foreground) / .7);
+  background: color-mix(in oklch, var(--muted-foreground) 70%, transparent);
 }

package/dist-lib/lerobot.es.js

@@ -1,4 +1,4 @@
-import { A as e, B as t, C as n, D as r, E as i, F as a, G as o, H as s, K as c, M as l, N as u, O as d, P as f, S as p, T as m, U as h, V as g, W as _, _ as v, a as y, b, c as x, ft as S, g as C, gt as w, h as T, ht as E, i as D, j as O, k as ee, l as te, lt as ne, m as k, mt as A, n as re, o as j, p as ie, pt as M, r as ae, s as N, st as oe, t as se, v as ce, w as P, x as F, y as I } from "./react-window-CGTfzj0C.js";
+import { A as e, B as t, C as n, D as r, E as i, F as a, G as o, H as s, K as c, M as l, N as u, O as d, P as f, S as p, T as m, U as h, V as g, W as _, _ as v, a as y, b, c as x, ft as S, g as C, gt as w, h as T, ht as E, i as D, j as O, k as ee, l as te, lt as ne, m as k, mt as A, n as re, o as j, p as ie, pt as M, r as ae, s as N, st as oe, t as se, v as ce, w as P, x as F, y as I } from "./react-window-B1KnRC6j.js";
 import { r as L, t as le } from "./workerManager-D6ovn2ln.js";
 import * as ue from "react";
 import R, { Suspense as de, createContext as fe, memo as pe, useCallback as z, useContext as me, useEffect as B, useMemo as V, useRef as H, useState as U } from "react";
@@ -3831,7 +3831,7 @@ function Js({ className: e, children: t, showCloseButton: n = !0, ...r }) {
 		"data-slot": "dialog-portal",
 		children: [/* @__PURE__ */ W(qs, {}), /* @__PURE__ */ G(s, {
 			"data-slot": "dialog-content",
-			className: A("fixed top-[50vh] left-[50vw] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg", e),
+			className: A("fixed top-[50vh] left-[50vw] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 text-foreground shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg", e),
 			...r,
 			children: [t, n && /* @__PURE__ */ G(g, {
 				"data-slot": "dialog-close",
@@ -3868,7 +3868,7 @@ function Xs({ className: e, showCloseButton: t = !1, children: n, ...r }) {
 function Zs({ className: e, ...t }) {
 	return /* @__PURE__ */ W(c, {
 		"data-slot": "dialog-title",
-		className: A("text-lg leading-none font-semibold", e),
+		className: A("text-lg leading-none font-semibold text-foreground", e),
 		...t
 	});
 }
@@ -5863,7 +5863,7 @@ var Dl = ({ theme: e, language: t, className: n, children: r, showToaster: i = !
 		forcedLanguage: t,
 		children: a ? /* @__PURE__ */ W("div", {
 			ref: s,
-			className: A("lerobot-root h-full w-full relative", n),
+			className: A("lerobot-root h-full w-full relative bg-background text-foreground", n),
 			children: /* @__PURE__ */ W(El, {
 				theme: e,
 				showToaster: i,
@@ -5872,7 +5872,7 @@ var Dl = ({ theme: e, language: t, className: n, children: r, showToaster: i = !
 			})
 		}) : /* @__PURE__ */ W("div", {
 			ref: s,
-			className: A("lerobot-root h-full w-full", n),
+			className: A("lerobot-root h-full w-full bg-background text-foreground", n),
 			children: /* @__PURE__ */ W(El, {
 				theme: e,
 				showToaster: i,
@@ -6559,7 +6559,7 @@ var Ll = ({ error: e, episodes: t, filteredEpisodes: n, isLoading: r, multiSelec
 		return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
 	}, [o, y]), /* @__PURE__ */ G(he, { children: [/* @__PURE__ */ W("div", {
 		ref: u,
-		className: `flex h-full min-w-0 shrink-0 flex-col overflow-x-hidden border-r ${a}`,
+		className: `flex h-full min-w-0 shrink-0 flex-col overflow-x-hidden border-r bg-background ${a}`,
 		style: {
 			width: `${o}px`,
 			minWidth: `${t}px`,
@@ -6824,7 +6824,7 @@ var Kl = () => {
 		className: "h-16 border-t bg-background/50 px-6 flex items-center justify-center text-muted-foreground italic text-sm",
 		children: e("playback.noData")
 	}) : g || b ? /* @__PURE__ */ G("div", {
-		className: "h-16 border-t bg-background px-4 flex items-center gap-4 animate-pulse motion-reduce:animate-none pointer-events-none opacity-60",
+		className: "h-16 border-t bg-background text-foreground px-4 flex items-center gap-4 animate-pulse motion-reduce:animate-none pointer-events-none opacity-60",
 		role: "status",
 		"aria-live": "polite",
 		"aria-label": b?.message || e("common.loading"),
@@ -6860,7 +6860,7 @@ var Kl = () => {
 			})
 		]
 	}) : /* @__PURE__ */ G("div", {
-		className: "h-16 border-t bg-background px-4 flex items-center gap-4",
+		className: "h-16 border-t bg-background text-foreground px-4 flex items-center gap-4",
 		children: [
 			/* @__PURE__ */ G("div", {
 				className: "flex items-center gap-1",
@@ -7026,7 +7026,7 @@ var Kl = () => {
 			})
 		]
 	});
-}, Jl = R.lazy(async () => ({ default: (await import("./DockviewLayout-0MP_kiQC.js")).DockviewLayout }));
+}, Jl = R.lazy(async () => ({ default: (await import("./DockviewLayout-DjLrI3Yt.js")).DockviewLayout }));
 function Yl({ showSidebar: e = !0, showPlaybackBar: t = !0, className: n, sidebar: r, emptyState: i, sidebarHeader: a, showToaster: o = !0, onRetry: s }) {
 	let { t: c } = E(), { episodes: l, info: u, clearError: d, error: f } = N(), { tasks: p } = ol(), m = u !== null && l.length > 0, h = m && e && !!r, g = p.find((e) => e.phase !== "ready" && e.phase !== "idle" && e.phase !== "error"), _ = p.find((e) => e.phase === "error"), v = s ?? (() => {
 		d();

package/dist-lib/{react-window-CGTfzj0C.js → react-window-B1KnRC6j.js}

@@ -6732,7 +6732,7 @@ function fi({ container: e, children: t }) {
 	});
 }
 function pi() {
-	return r.useContext(di) || (typeof document > "u" ? null : document.getElementById("lerobot-root"));
+	return r.useContext(di) || (typeof document > "u" ? null : document.querySelector(".lerobot-root") ?? document.getElementById("lerobot-root"));
 }
 //#endregion
 //#region node_modules/@radix-ui/react-compose-refs/dist/index.mjs

package/package.json

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