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/hooks/timelineEditingHelpers.ts

@@ -41,19 +41,30 @@ export type PatchTarget = NonNullable<ReturnType<typeof buildPatchTarget>>;
 // The runtime re-reads data-start/data-duration from the DOM on each sync tick
 // (packages/core/src/runtime/init.ts:1324-1368), so attribute mutations here are
 // picked up automatically on the next frame without a rebind call.
+export function findTimelineElementInIframe(
+  iframe: HTMLIFrameElement | null,
+  element: TimelineElement,
+): Element | null {
+  try {
+    const doc = iframe?.contentDocument;
+    if (!doc) return null;
+    return element.domId
+      ? doc.getElementById(element.domId)
+      : element.selector
+        ? (doc.querySelectorAll(element.selector)[element.selectorIndex ?? 0] ?? null)
+        : null;
+  } catch {
+    return null;
+  }
+}
+
 export function patchIframeDomTiming(
   iframe: HTMLIFrameElement | null,
   element: TimelineElement,
   attrs: Array<[string, string]>,
 ): void {
   try {
-    const doc = iframe?.contentDocument;
-    if (!doc) return;
-    const el = element.domId
-      ? doc.getElementById(element.domId)
-      : element.selector
-        ? (doc.querySelectorAll(element.selector)[element.selectorIndex ?? 0] ?? null)
-        : null;
+    const el = findTimelineElementInIframe(iframe, element);
     if (!el) return;
     for (const [name, value] of attrs) el.setAttribute(name, value);
   } catch {
@@ -61,6 +72,7 @@ export function patchIframeDomTiming(
   }
 }
 
+// fallow-ignore-next-line complexity
 export function resolveResizePlaybackStart(
   original: string,
   target: PatchTarget,