Sync from huggingface/lerobot-dataset-visualizer via hub-sync

src/app/globals.css

@@ -23,6 +23,11 @@
   --accent-ring: rgba(56, 189, 248, 0.55);
 
   --radius: 6px;
+
+  /* Playback position, wherever it is drawn (chart cursor, annotation
+     timeline). Neutral, so it never reads as a series, a role or a flag. */
+  --playhead: #f1f5f9;
+  --playhead-glow: rgba(241, 245, 249, 0.45);
 }
 
 @theme inline {

src/components/annotations-panel.tsx

@@ -583,14 +583,14 @@ export const AnnotationsPanel: React.FC<Props> = ({ cameraKeys }) => {
           <button
             disabled={saving || !dirty}
             onClick={handleSave}
-            className="text-xs h-7 px-3 rounded border border-cyan-500/40 bg-cyan-500/10 text-cyan-200 hover:bg-cyan-500/20 disabled:opacity-40"
+            className="text-xs h-7 px-3 rounded-md border border-cyan-400/30 bg-cyan-400/10 text-cyan-300 hover:bg-cyan-400/15 disabled:opacity-40"
           >
             {saving ? "Saving…" : "Save episode"}
           </button>
           <button
             disabled={!backendEnabled}
             onClick={handleSaveDataset}
-            className="text-xs h-7 px-3 rounded border border-emerald-500/40 bg-emerald-500/10 text-emerald-200 hover:bg-emerald-500/20 disabled:opacity-40"
+            className="text-xs h-7 px-3 rounded-md border border-white/10 bg-white/5 text-slate-300 hover:bg-white/10 hover:text-slate-100 disabled:opacity-40"
           >
             Save dataset
           </button>

src/components/annotations-skin.css

@@ -56,9 +56,9 @@
 .annotations-skin input:focus,
 .annotations-skin textarea:focus,
 .annotations-skin select:focus {
-  outline: 2px solid var(--hf-blue) !important;
+  outline: 2px solid var(--accent) !important;
   outline-offset: -1px;
-  border-color: var(--hf-blue) !important;
+  border-color: var(--accent) !important;
 }
 
 .annotations-skin kbd {
@@ -203,7 +203,7 @@
   height: 22px;
   border: 1px solid var(--border-1);
   background: var(--surface-1);
-  color: var(--hf-blue);
+  color: var(--accent);
   border-radius: var(--radius-xs);
   cursor: pointer;
   display: inline-flex;
@@ -213,9 +213,9 @@
   flex: none;
 }
 .annotations-skin .jump:hover {
-  background: var(--hf-blue);
+  background: var(--accent);
   color: #0b0e14;
-  border-color: var(--hf-blue);
+  border-color: var(--accent);
 }
 
 /* ----- Section heads ----- */
@@ -453,10 +453,10 @@
   top: 0;
   bottom: 0;
   width: 0;
-  border-left: 2px solid var(--hf-yellow);
+  border-left: 2px solid var(--playhead);
   pointer-events: none;
   z-index: 5;
-  box-shadow: 0 0 8px rgba(255, 210, 30, 0.6);
+  box-shadow: 0 0 8px var(--playhead-glow);
 }
 .annotations-skin .tl-playhead::before {
   content: "";
@@ -465,7 +465,7 @@
   left: -6px;
   width: 10px;
   height: 10px;
-  background: var(--hf-yellow);
+  background: var(--playhead);
   transform: rotate(45deg);
 }
 .annotations-skin .tl-ruler {
@@ -690,11 +690,11 @@
   line-height: 1.3;
 }
 .annotations-skin .rail.annotation-list .rail-row.selected {
-  background: rgba(91, 140, 255, 0.2);
-  box-shadow: inset 3px 0 0 var(--hf-blue);
+  background: var(--accent-soft);
+  box-shadow: inset 3px 0 0 var(--accent);
 }
 .annotations-skin .rail.annotation-list .rail-row.active-now:not(.selected) {
-  border-color: rgba(255, 210, 30, 0.45);
+  border-color: var(--playhead-glow);
   outline: none;
 }
 .annotations-skin .inspector {
@@ -773,9 +773,9 @@
   min-width: 200px;
 }
 .annotations-skin .quick-add .add-btn {
-  background: var(--hf-blue);
-  color: #0b0e14;
-  border: 1px solid var(--hf-blue);
+  background: rgba(56, 189, 248, 0.1);
+  color: #67e8f9;
+  border: 1px solid rgba(56, 189, 248, 0.3);
   border-radius: var(--radius-sm);
   padding: 6px 14px;
   font-size: 13px;
@@ -784,7 +784,7 @@
   white-space: nowrap;
 }
 .annotations-skin .quick-add .add-btn:hover {
-  filter: brightness(1.1);
+  background: rgba(56, 189, 248, 0.15);
 }
 .annotations-skin .quick-add .add-btn:disabled {
   opacity: 0.4;
@@ -850,8 +850,8 @@
   background: var(--surface-1);
 }
 .annotations-skin .rail-row.selected {
-  background: rgba(91, 140, 255, 0.16);
-  border-color: var(--hf-blue);
+  background: var(--accent-soft);
+  border-color: var(--accent);
 }
 .annotations-skin .rail-row .ts {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
@@ -869,7 +869,7 @@
   text-overflow: ellipsis;
 }
 .annotations-skin .rail-row.active-now {
-  outline: 2px solid var(--hf-yellow);
+  outline: 2px solid var(--playhead-glow);
   outline-offset: -1px;
 }
 
@@ -976,18 +976,18 @@
 }
 .annotations-skin .tl-seg.dragging {
   opacity: 0.85;
-  outline: 2px solid var(--hf-yellow);
+  outline: 2px solid var(--accent);
   outline-offset: -1px;
 }
 .annotations-skin .tl-row .track.creating {
-  outline: 1px dashed var(--hf-blue);
+  outline: 1px dashed var(--accent);
 }
 .annotations-skin .tl-create-preview {
   position: absolute;
   top: 1px;
   bottom: 1px;
-  background: rgba(255, 210, 30, 0.3);
-  border: 1px dashed var(--hf-yellow);
+  background: var(--accent-soft);
+  border: 1px dashed var(--accent);
   border-radius: 2px;
   pointer-events: none;
   z-index: 4;
@@ -997,7 +997,7 @@
   top: -6px;
   width: 14px;
   height: 14px;
-  background: var(--hf-yellow);
+  background: var(--playhead);
   border: 2px solid #0b0e14;
   border-radius: 999px;
   transform: translate(-7px, 0);

src/components/data-recharts.tsx

@@ -94,7 +94,7 @@ function PlaybackCursor({ start, end }: { start: number; end: number }) {
   const left = CHART_MARGIN.left + Y_AXIS_WIDTH;
   return (
     <div
-      className="pointer-events-none absolute w-[1.5px] bg-orange-500/70"
+      className="pointer-events-none absolute w-[1.5px] bg-[var(--playhead)] opacity-70"
       style={{
         top: CHART_MARGIN.top,
         bottom: CHART_MARGIN.bottom + X_AXIS_HEIGHT,