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/components/editor/PropertyPanel.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it } from "vitest";
+import type { TimelineElement } from "../../player";
 import {
   buildInsetClipPathSides,
   buildStrokeStyleUpdates,
@@ -11,6 +12,7 @@ import {
   parseInsetClipPathSides,
   setCssFilterFunctionPx,
 } from "./PropertyPanel";
+import { isSelectedElementHidden } from "./propertyPanelHelpers";
 
 describe("PropertyPanel style helpers", () => {
   it("normalizes bounded pixel values without accepting incompatible units", () => {
@@ -113,3 +115,26 @@ describe("PropertyPanel style helpers", () => {
     expect(buildStrokeStyleUpdates("solid", "4px")).toEqual([["border-style", "solid"]]);
   });
 });
+
+describe("isSelectedElementHidden", () => {
+  it("reads hidden state by selected timeline id or key", () => {
+    const elements: TimelineElement[] = [
+      { id: "visible", tag: "div", start: 0, duration: 1, track: 0 },
+      { id: "hidden", tag: "div", start: 0, duration: 1, track: 0, hidden: true },
+      {
+        id: "keyed-hidden",
+        key: "scene.html:#keyed-hidden",
+        tag: "div",
+        start: 0,
+        duration: 1,
+        track: 0,
+        hidden: true,
+      },
+    ];
+
+    expect(isSelectedElementHidden(elements, null)).toBe(false);
+    expect(isSelectedElementHidden(elements, "visible")).toBe(false);
+    expect(isSelectedElementHidden(elements, "hidden")).toBe(true);
+    expect(isSelectedElementHidden(elements, "scene.html:#keyed-hidden")).toBe(true);
+  });
+});