mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-07 10:06:21 +00:00
Miguel Angel Simon Sierra
bc5fc410ee
L4 polish for the stacking-layer timeline: - Sub-composition layers group under a slim "Inside: <comp>" header with a green accent, so it reads that restacking there is scoped to that context. - Audio clips render in a distinct bottom lane: separator border, muted row bg, music glyph in the gutter, beat strip — clearly not part of the z-order stack. - During a vertical drag, a drop affordance shows join-vs-insert: an "onto" target highlights the row (join that layer / same z); "between"/"above"/ "below" shows an insertion line (new layer here). New pure helper timelineDropIndicator.ts (+ test) maps placement -> indicator; row-group rendering extracted into TimelineLayerGroupHeader / TimelineLayerGutter / TimelineDropInsertionLine / TimelineDragGhost to keep files under the 600 cap.
33 lines
791 B
TypeScript
33 lines
791 B
TypeScript
interface TimelineDropInsertionLineProps {
|
|
edge: "top" | "bottom";
|
|
accentColor: string;
|
|
}
|
|
|
|
export function TimelineDropInsertionLine({ edge, accentColor }: TimelineDropInsertionLineProps) {
|
|
return (
|
|
<div
|
|
className="absolute left-0 right-0 pointer-events-none"
|
|
style={{
|
|
top: edge === "top" ? -1 : undefined,
|
|
bottom: edge === "bottom" ? -1 : undefined,
|
|
height: 2,
|
|
background: accentColor,
|
|
boxShadow: `0 0 8px ${accentColor}`,
|
|
zIndex: 30,
|
|
}}
|
|
>
|
|
<span
|
|
className="absolute rounded-full"
|
|
style={{
|
|
left: 0,
|
|
top: -3,
|
|
width: 8,
|
|
height: 8,
|
|
background: accentColor,
|
|
boxShadow: `0 0 8px ${accentColor}`,
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|