feat(studio): timeline revamp with active-clip highlighting and hide controls (#2017)

Timeline UI
- Highlight clips visible at the playhead in the primary color; others share one neutral color
- Minimalist rounded clips, single-color track rows, no gutter icons or superscript labels
- Per-track eye toggle and a per-element hide button in the design panel
- Ruler zoom fixes: sub-second tick intervals and correct label formatting at high zoom
- Sticky gutter so track controls stay visible while scrolling

WYSIWYG visibility (data-hidden)
- Runtime honors data-hidden (display:none), so hiding affects the render, not just the preview
- HTML stays the source of truth; hide state persists and round-trips on reload

Split several studio files to stay under the 600-line cap; pure relocations, no behavior change.

packages/studio/src/player/components/CompositionThumbnail.tsx

@@ -66,6 +66,7 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
     if (!el) return;
 
     const measured = el.parentElement?.clientWidth || el.clientWidth;
+    // fallow-ignore-next-line code-duplication
     setContainerWidth(measured);
 
     const target = el.parentElement || el;
@@ -130,17 +131,19 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
         </div>
       )}
 
-      <div className="absolute left-3 top-0 bottom-0 flex items-center" style={{ zIndex: 10 }}>
-        <span
-          className="block max-w-full truncate text-[10px] font-semibold leading-none"
-          style={{
-            color: labelColor,
-            textShadow: loaded ? "0 1px 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.6)" : "none",
-          }}
-        >
-          {label}
-        </span>
-      </div>
+      {label && (
+        <div className="absolute left-3 top-0 bottom-0 flex items-center" style={{ zIndex: 10 }}>
+          <span
+            className="block max-w-full truncate text-[10px] font-semibold leading-none"
+            style={{
+              color: labelColor,
+              textShadow: loaded ? "0 1px 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.6)" : "none",
+            }}
+          >
+            {label}
+          </span>
+        </div>
+      )}
     </div>
   );
 });