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

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,10 @@ const ICONS: Record<string, ReactNode> = {
 };
 
 export function getTrackStyle(tag: string): TrackVisualStyle {
-  const trackStyle = getTimelineTrackStyle(tag);
-  const normalized = tag.toLowerCase();
+  if (!tag) console.warn("[Timeline] getTrackStyle received empty tag, defaulting to div");
+  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

@@ -61,6 +61,10 @@ export {
 // TimelineElement factories
 // ---------------------------------------------------------------------------
 
+function resolveClipTag(clip: ClipManifestClip): string {
+  return clip.tagName || clip.kind || "div";
+}
+
 export function createTimelineElementFromManifestClip(params: {
   clip: ClipManifestClip;
   fallbackIndex: number;
@@ -72,7 +76,7 @@ export function createTimelineElementFromManifestClip(params: {
   const label = getTimelineElementDisplayLabel({
     id: clip.id,
     label: clip.label,
-    tag: clip.tagName || clip.kind,
+    tag: resolveClipTag(clip),
   });
 
   let domId: string | undefined;
@@ -103,7 +107,7 @@ export function createTimelineElementFromManifestClip(params: {
     id: identity.id,
     label,
     key: identity.key,
-    tag: clip.tagName || clip.kind,
+    tag: resolveClipTag(clip),
     start: clip.start,
     duration: clip.duration,
     track: clip.track,