{ if (e.key === 'Escape') { selectClip(null); } }} > {#if clips.length === 0}
No clips yet — press I to mark in-point, O to mark out-point
{:else}
CLIPS ({clips.length})
{#each clips as clip (clip.id)}
handleSelect(clip.id)} onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleSelect(clip.id); } }} > {#if isSidebar}
handleLabelEdit(clip.id, (e.target as HTMLInputElement).value)} onclick={(e) => e.stopPropagation()} />
handleTimeEdit(clip.id, 'startTime', (e.target as HTMLInputElement).value)} onclick={(e) => e.stopPropagation()} />
→
handleTimeEdit(clip.id, 'endTime', (e.target as HTMLInputElement).value)} onclick={(e) => e.stopPropagation()} />
{#if clip.id === selectedId}
{ e.stopPropagation(); handlePlayClip(clip); }} title="Play clip" >▶
{ e.stopPropagation(); handleGoToStart(clip); }} title="Go to start" >|◀
{ e.stopPropagation(); handleGoToEnd(clip); }} title="Go to end" >▶|
{ e.stopPropagation(); removeClip(clip.id); }} title="Delete clip" >✕
{/if}
{:else}
handleLabelEdit(clip.id, (e.target as HTMLInputElement).value)} onclick={(e) => e.stopPropagation()} />
handleTimeEdit(clip.id, 'startTime', (e.target as HTMLInputElement).value)} onclick={(e) => e.stopPropagation()} />
→
handleTimeEdit(clip.id, 'endTime', (e.target as HTMLInputElement).value)} onclick={(e) => e.stopPropagation()} /> {#if clip.id === selectedId}
{ e.stopPropagation(); handlePlayClip(clip); }} title="Play clip" >▶
{ e.stopPropagation(); handleGoToStart(clip); }} title="Go to start" >|◀
{ e.stopPropagation(); handleGoToEnd(clip); }} title="Go to end" >▶|
{ e.stopPropagation(); removeClip(clip.id); }} title="Delete clip" >✕
{:else}
{ e.stopPropagation(); removeClip(clip.id); }} title="Delete clip" >✕
{/if} {/if}
{/each}
{#if selectedId}
selectClip(null)}>Deselect
{/if} {#if onExport}
onExport()}>Export All
{/if}
{/if}