DropIndicator

let session = new DragSession();
let steps = [...STEPS];

// ref() fires on insert, so the subscription is set up in the browser and torn
// down with the node — the server renders the list without one.
let followDrag = ref((_node, signal) => {
	session.addEventListener("change", () => void handle.update(), { signal });
});

function isGapActive(stepId: string, side: "before" | "after") {
	return session.target?.key === stepId && session.target.position === side;
}

<div mix={[followDrag]}>
	<Header>Release checklist</Header>
	<Badge color="neutral">{session.active ? "Dragging" : "Drag a grip"}</Badge>

	<ol
		mix={[
			// A pointer drag over text would select it instead, so the list opts out.
			userSelect("none"),
			dragReorder(session),
			on<HTMLOListElement, "ui:reorder">("ui:reorder", (event) => {
				steps = reorder(steps, event.sourceKey, event.targetKey, event.position, (s) => s.id);
				void handle.update();
			}),
		]}
	>
		{steps.map((step, index) => (
			<li key={step.id} data-rmx-key={step.id}>
				{/* One bar per gap: the first row opens the list, and every row closes its own gap. */}
				{index === 0 ? <DropIndicator isDropTarget={isGapActive(step.id, "before")} /> : null}
				<Item>
					<Item.Media>
						<button
							type="button"
							data-drag-handle
							aria-label={`Reorder ${step.name}`}
							mix={[cursor("grab"), touchAction("none")]}
						>
							<GripVerticalIcon />
						</button>
					</Item.Media>
					<Item.Content>
						<Item.Title>
							{index + 1}. {step.name}
						</Item.Title>
						<Item.Description>Runs on {step.owner}</Item.Description>
					</Item.Content>
				</Item>
				<DropIndicator isDropTarget={isGapActive(step.id, "after")} />
			</li>
		))}
	</ol>
</div>