fix(studio): guard against null tag in timeline track style

getTrackStyle() can receive a falsy tag at runtime (e.g. empty string
from timeline element defaults), causing toLowerCase() and startsWith()
to throw. Default to "div" when tag is falsy.

Author: miguel-heygen

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

@@ -39,8 +39,9 @@ const ICONS: Record<string, ReactNode> = {
 };
 
 export function getTrackStyle(tag: string): TrackVisualStyle {
-  const trackStyle = getTimelineTrackStyle(tag);
-  const normalized = tag.toLowerCase();
+  const safeTag = tag || "div";
+  const trackStyle = getTimelineTrackStyle(safeTag);
+  const normalized = safeTag.toLowerCase();
   const icon =
     normalized.startsWith("h") && normalized.length === 2 && "123456".includes(normalized[1] ?? "")
       ? ICONS.h1

packages/studio/src/player/lib/timelineDOM.ts

@@ -72,7 +72,7 @@ export function createTimelineElementFromManifestClip(params: {
   const label = getTimelineElementDisplayLabel({
     id: clip.id,
     label: clip.label,
-    tag: clip.tagName || clip.kind,
+    tag: clip.tagName || clip.kind || "div",
   });
 
   let domId: string | undefined;
@@ -103,7 +103,7 @@ export function createTimelineElementFromManifestClip(params: {
     id: identity.id,
     label,
     key: identity.key,
-    tag: clip.tagName || clip.kind,
+    tag: clip.tagName || clip.kind || "div",
     start: clip.start,
     duration: clip.duration,
     track: clip.track,