Timeline: Input display and auto track selection (#663)

* individual timeline display and track selection

* Fix timeline track selection issues from Copilot review

- Coalesce selectedTimelineTrackId to null when loading a project file
  saved before this field existed, so it can't leak undefined into
  state.
- Require both selectedTrackId and setSelectedTrackId before Timeline
  enters controlled mode, so passing only the setter can't strand
  selection at null.
- Route [i]/[x] keydown handling through a shared stack so only the
  most recently mounted Timeline instance responds, preventing
  double-inserts/deletes when the global and per-input panels are both
  mounted.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* lint fix

* selectedTimelineComponentId so keyboard events only fire once

---------

Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
Co-authored-by: Alex Kempton <alex@funwithtriangles.net>

Author: 3 people

apps/desktop/src/renderer/engine.ts

@@ -5,7 +5,7 @@ import { MidiInput, MidiInputPanel, MidiGlobalPanel } from '@hedron-gl/midi-inpu
 import { GamepadInput, GamepadInputPanel, GamepadGlobalPanel } from '@hedron-gl/gamepad-input'
 import { LFOInput, LFOInputPanel } from '@hedron-gl/lfo-input'
 import { AudioInput, AudioInputPanel, AudioGlobalPanel } from '@hedron-gl/audio-input'
-import { TimelineInput, TimelineGlobalPanel } from '@hedron-gl/timeline'
+import { TimelineInput, TimelineGlobalPanel, TimelineInputPanel } from '@hedron-gl/timeline'
 import { SceneControlPlugin, SceneControlGlobalPanel } from '@hedron-gl/scene-control'
 
 export const performanceMonitor = new Stats()
@@ -36,6 +36,7 @@ export const pluginViews = {
     lfo: LFOInputPanel,
     audio: AudioInputPanel,
     gamepad: GamepadInputPanel,
+    ['timeline-track']: TimelineInputPanel,
   },
   globalPanel: {
     ['audio-input']: AudioGlobalPanel,

packages/app-store/package.json

@@ -46,7 +46,7 @@
   "devDependencies": {
     "@types/node": "^25.0.0",
     "tsup": "^8.3.6",
-    "typescript": "^5.6.2"
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "react": "^18.3.1"

packages/app-store/src/appStore.ts

@@ -48,6 +48,7 @@ export interface AppState {
   selectedSketches: ProjectData['app']['selectedSketches'] // TODO: should be part of ProjectData
   selectedNodes: ProjectData['app']['selectedNodes']
   selectedInputs: ProjectData['app']['selectedInputs']
+
   openedControlGroups: ProjectData['app']['openedControlGroups']
   sketchesDir: string | null
   globalDialogId: DialogId | null
@@ -66,6 +67,15 @@ export interface AppState {
   removeFromSaveList: (path: string) => void
   setSketchesServerBuildResult: (result: BuildResult | null) => void
   cleanupStaleReferences: (engineData: EngineData) => void
+
+  /** @deprecated -- this state handler will be moved to the timeline plugin */
+  setActiveTimelineComponentId: (id: string | null) => void
+  /** @deprecated -- this state will be moved to the timeline plugin */
+  activeTimelineComponentId: string | null
+  /** @deprecated -- this state handler will be moved to the timeline plugin */
+  setSelectedTimelineTrackId: (trackId: string | null) => void
+  /** @deprecated -- this state will be moved to the timeline plugin */
+  selectedTimelineTrackId: string | null
 }
 
 export type SetState = StoreApi<AppState>['setState']
@@ -93,6 +103,8 @@ export const createAppStore = () =>
             currentSavePath: null,
             selectedNodes: {},
             selectedInputs: {},
+            activeTimelineComponentId: null,
+            selectedTimelineTrackId: null,
             openedControlGroups: {},
             saveList: [],
             sketchesServerBuildResult: null,
@@ -150,6 +162,16 @@ export const createAppStore = () =>
                 state.selectedInputs[nodeId] = inputId
               })
             },
+            setActiveTimelineComponentId: (id) => {
+              set((state) => {
+                state.activeTimelineComponentId = id
+              })
+            },
+            setSelectedTimelineTrackId: (id) => {
+              set((state) => {
+                state.selectedTimelineTrackId = id
+              })
+            },
             setOpenedControlGroup: (sketchId: string, groupIndex: number, isOpen: boolean) => {
               set((state) => {
                 if (!state.openedControlGroups[sketchId]) {

packages/timeline/src/components/Timeline/Timeline.tsx

@@ -1,55 +1,69 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useId, useRef, useState } from 'react'
 import { usePlayheadScrub } from './usePlayheadScrub'
 import c from './Timeline.module.css'
 import { TimelineTrack } from './TimelineTrack'
 import { TimelineManagerTrack } from '@/types'
+import { findTrackById } from '@/utils/findTrackById'
 
 export interface TimelineProps {
   /** Timeline data */
   timeline: {
     durationMs: number
     tracks: TimelineManagerTrack[]
   }
-  /** Current playhead position in milliseconds */
-  playheadPositionMs?: number
-  /** Called when the user clicks on the track area to set the playhead */
-  onPlayheadChange?: (time: number) => void
-  /** Called when a keyframe should be deleted */
-  onKeyframeDelete?: (keyframeId: string) => void
-  /** Called when a keyframe should be inserted on a track at a given time */
-  onKeyframeInsert?: (trackId: string, time: number) => void
+  playheadPositionMs: number
+  activeTimelineComponentId: string | null
+  selectedTrackId: string | null
+  setSelectedTrackId: (trackId: string | null) => void
+  setActiveTimelineComponentId: (id: string | null) => void
+  componentId?: string
+  onPlayheadChange: (time: number) => void
+  onKeyframeDelete: (keyframeId: string) => void
+  onKeyframeInsert: (trackId: string, time: number) => void
 }
 
 export function Timeline({
   timeline,
   playheadPositionMs = 0,
+  activeTimelineComponentId,
+  selectedTrackId: _selectedTrackId,
+  setSelectedTrackId: _setSelectedTrackId,
+  componentId: _componentId,
+  setActiveTimelineComponentId,
   onPlayheadChange,
   onKeyframeDelete,
   onKeyframeInsert,
 }: TimelineProps) {
   const { durationMs, tracks } = timeline
   const rulerAreaRef = useRef<HTMLDivElement>(null)
-  const [selectedTrackId, setSelectedTrackId] = useState<string | null>(null)
-  const [selectedKeyframes, setSelectedKeyframes] = useState<string[] | null>(null)
-
-  const findTrackById = useCallback(
-    (trackList: TimelineManagerTrack[], trackId: string): TimelineManagerTrack | null => {
-      for (const track of trackList) {
-        if (track.id === trackId) {
-          return track
-        }
 
-        if (track.trackType === 'vector') {
-          const childTrack = findTrackById(track.childTracks, trackId)
-          if (childTrack) {
-            return childTrack
-          }
-        }
-      }
+  // To prevent clashing of keyboard events, we need to keep track of which component is the active one
+  const fallbackId = useId()
+  const componentId = _componentId ?? fallbackId
+
+  const isActiveComponent = componentId === activeTimelineComponentId
+
+  const [_selectedKeyframes, _setSelectedKeyframes] = useState<string[] | null>(null)
+
+  const selectedKeyframes = isActiveComponent ? _selectedKeyframes : null
+  const selectedTrackId = isActiveComponent ? _selectedTrackId : null
+
+  const setSelectedKeyframes = useCallback(
+    (keyframes: string[] | null) => {
+      _setSelectedKeyframes(keyframes)
 
-      return null
+      setActiveTimelineComponentId(componentId)
     },
-    [],
+    [componentId, setActiveTimelineComponentId],
+  )
+
+  const setSelectedTrackId = useCallback(
+    (trackId: string | null) => {
+      _setSelectedTrackId(trackId)
+
+      setActiveTimelineComponentId(componentId)
+    },
+    [_setSelectedTrackId, componentId, setActiveTimelineComponentId],
   )
 
   useEffect(() => {
@@ -67,19 +81,21 @@ export function Timeline({
 
     const handleKeyDown = (e: KeyboardEvent) => {
       const target = e.target as HTMLElement | null
-      if (target?.tagName === 'INPUT' || target?.tagName === 'TEXTAREA' || target?.isContentEditable) {
+      if (
+        target?.tagName === 'INPUT' ||
+        target?.tagName === 'TEXTAREA' ||
+        target?.isContentEditable
+      ) {
         return
       }
       if (e.key === 'x' && selectedKeyframes) {
         selectedKeyframes.forEach((keyframeId) => {
-          onKeyframeDelete?.(keyframeId)
+          onKeyframeDelete(keyframeId)
         })
 
         setSelectedKeyframes(null)
       }
       if (e.key === 'i' && selectedTrackId) {
-        if (!onKeyframeInsert) return
-
         const track = findTrackById(tracks, selectedTrackId)
         if (!track) return
 
@@ -89,15 +105,17 @@ export function Timeline({
       }
     }
     window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+    }
   }, [
     selectedKeyframes,
     onKeyframeDelete,
     selectedTrackId,
     playheadPositionMs,
     onKeyframeInsert,
     tracks,
-    findTrackById,
+    setSelectedKeyframes,
   ])
 
   usePlayheadScrub(durationMs, rulerAreaRef, playheadPositionMs, onPlayheadChange)

packages/timeline/src/components/Timeline/TimelineTrack.tsx

@@ -1,10 +1,5 @@
-import {
-  collapseOpenIcon,
-  collapseCloseIcon,
-  Icon,
-  useIsItemOpened,
-  useToggleStore,
-} from '@hedron-gl/ui-core'
+import { collapseOpenIcon, collapseCloseIcon, Icon } from '@hedron-gl/ui-core'
+import { useState } from 'react'
 import c from './Timeline.module.css'
 import { TrackKeyframes } from './TrackKeyframes'
 import { Keyframe } from './Keyframe'
@@ -58,8 +53,7 @@ export const TimelineTrack = ({
   selectedKeyframes,
   setSelectedKeyframes,
 }: TimelineTrackProps) => {
-  const isExpanded = useIsItemOpened(track.id)
-  const setIsExpanded = useToggleStore((state) => state.toggleItem)
+  const [isExpanded, setIsExpanded] = useState<boolean>(false)
   const isSelected = track.id === selectedTrackId
 
   return (
@@ -70,7 +64,7 @@ export const TimelineTrack = ({
             <Icon
               className={c.collapseIcon}
               name={isExpanded ? collapseCloseIcon : collapseOpenIcon}
-              onClick={() => setIsExpanded(track.id)}
+              onClick={() => setIsExpanded(!isExpanded)}
             />
           )}
           <button className={c.trackTitle} onClick={() => setSelectedTrackId(track.id)}>

packages/timeline/src/components/TimelineGlobalPanel/TimelineGlobalPanel.tsx

@@ -3,6 +3,7 @@ import {
   NodeContainer,
   useNodeOptionNodes,
   useParamValue,
+  useAppStore,
   ControlGrid,
 } from '@hedron-gl/ui-core'
 import { useTimelineData } from './useTimelineData'
@@ -25,6 +26,11 @@ export const TimelineGlobalPanel = ({ engine }: TimelineGlobalPanelProps) => {
     manager,
   })
 
+  const activeTimelineComponentId = useAppStore((state) => state.activeTimelineComponentId)
+  const setActiveTimelineComponentId = useAppStore((state) => state.setActiveTimelineComponentId)
+  const selectedTrackId = useAppStore((state) => state.selectedTimelineTrackId)
+  const setSelectedTrackId = useAppStore((state) => state.setSelectedTimelineTrackId)
+
   const optionNodes = useNodeOptionNodes<TimelineOptionNodes>(DEFAULT_TIMELINE_ID)
   const isPlayingNode = optionNodes['isPlaying']!
   const playHeadPositionNode = optionNodes['playheadPositionMs']!
@@ -44,6 +50,10 @@ export const TimelineGlobalPanel = ({ engine }: TimelineGlobalPanelProps) => {
         <Timeline
           timeline={timeline}
           playheadPositionMs={playheadPositionMs}
+          activeTimelineComponentId={activeTimelineComponentId}
+          setActiveTimelineComponentId={setActiveTimelineComponentId}
+          selectedTrackId={selectedTrackId}
+          setSelectedTrackId={setSelectedTrackId}
           onPlayheadChange={handlePlayheadChange}
           onKeyframeDelete={handleKeyframeDelete}
           onKeyframeInsert={handleKeyframeInsert}

packages/timeline/src/components/TimelineInputPanel/TimelineInputPanel.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useId } from 'react'
+import { HedronEngine, InputNode } from '@hedron-gl/engine'
+import { useNodeOptionNodes, useParamValue, useAppStore } from '@hedron-gl/ui-core'
+import { useTimelineData } from '@/components/TimelineGlobalPanel/useTimelineData'
+import { useTimelineHandlers } from '@/components/TimelineGlobalPanel/useTimelineHandlers'
+import { useTimelineManager } from '@/components/TimelineGlobalPanel/useTimelineManager'
+import { DEFAULT_TIMELINE_ID } from '@/constants'
+import { Timeline } from '@/components/Timeline/Timeline'
+import { TimelineOptionNodes } from '@/TimelineInput'
+import { findTrackById } from '@/utils/findTrackById'
+
+interface TimelineInputPanelProps {
+  input: InputNode
+  engine: HedronEngine
+}
+
+/**
+ * Per-node view for a timeline-track input: the same editor as the global timeline panel
+ * (header, playhead, keyframes), scoped down to just this input's own track.
+ */
+export const TimelineInputPanel = ({ input, engine }: TimelineInputPanelProps) => {
+  const timeline = useTimelineData()
+  const manager = useTimelineManager(DEFAULT_TIMELINE_ID)
+
+  const { handlePlayheadChange, handleKeyframeDelete, handleKeyframeInsert } = useTimelineHandlers({
+    engine,
+    manager,
+  })
+
+  const activeTimelineComponentId = useAppStore((state) => state.activeTimelineComponentId)
+  const setActiveTimelineComponentId = useAppStore((state) => state.setActiveTimelineComponentId)
+  const selectedTrackId = useAppStore((state) => state.selectedTimelineTrackId)
+  const setSelectedTrackId = useAppStore((state) => state.setSelectedTimelineTrackId)
+
+  const timelineComponentId = useId()
+
+  // Viewing this input's track makes it the selected one
+  useEffect(() => {
+    setSelectedTrackId(input.id)
+    setActiveTimelineComponentId(timelineComponentId)
+  }, [input.id, setSelectedTrackId, setActiveTimelineComponentId, timelineComponentId])
+
+  const optionNodes = useNodeOptionNodes<TimelineOptionNodes>(DEFAULT_TIMELINE_ID)
+  const playHeadPositionNode = optionNodes['playheadPositionMs']!
+  const playheadPositionMs = useParamValue<number>(playHeadPositionNode.id)
+
+  const track = findTrackById(timeline.tracks, input.id)
+
+  return (
+    <Timeline
+      timeline={{ durationMs: timeline.durationMs, tracks: track ? [track] : [] }}
+      playheadPositionMs={playheadPositionMs}
+      activeTimelineComponentId={activeTimelineComponentId}
+      setActiveTimelineComponentId={setActiveTimelineComponentId}
+      selectedTrackId={selectedTrackId}
+      componentId={timelineComponentId}
+      setSelectedTrackId={setSelectedTrackId}
+      onPlayheadChange={handlePlayheadChange}
+      onKeyframeDelete={handleKeyframeDelete}
+      onKeyframeInsert={handleKeyframeInsert}
+    />
+  )
+}

packages/timeline/src/index.ts

@@ -9,3 +9,4 @@ export { TimelineManager } from './TimelineManager'
 export type { TrackValues, OnUpdateCallback } from './TimelineManager'
 export { TimelineInput } from './TimelineInput'
 export { TimelineGlobalPanel } from './components/TimelineGlobalPanel/TimelineGlobalPanel'
+export { TimelineInputPanel } from './components/TimelineInputPanel/TimelineInputPanel'