Function LevelRow

packages/editor/src/components/ui/floating-level-selector.tsx:125–271

({
  level,
  isSelected,
  isDragging,
  dragHandleProps,
  dragHandleRef,
  onSelect,
  onDuplicate,
  onPaste,
  onRequestDelete,
}: {
  level: LevelNode
  isSelected: boolean
  isDragging?: boolean
  dragHandleProps?: ButtonHTMLAttributes<HTMLButtonElement>
  dragHandleRef?: (element: HTMLButtonElement | null) => void
  onSelect: () => void
  onDuplicate: (preset?: LevelDuplicatePreset) => void
  onPaste?: () => void
  onRequestDelete: () => void
})

// ── Level row with three-dot menu ───────────────────────────────────────────

function LevelRow({
  level,
  isSelected,
  isDragging,
  dragHandleProps,
  dragHandleRef,
  onSelect,
  onDuplicate,
  onPaste,
  onRequestDelete,
}: {
  level: LevelNode
  isSelected: boolean
  isDragging?: boolean
  dragHandleProps?: ButtonHTMLAttributes<HTMLButtonElement>
  dragHandleRef?: (element: HTMLButtonElement | null) => void
  onSelect: () => void
  onDuplicate: (preset?: LevelDuplicatePreset) => void
  onPaste?: () => void
  onRequestDelete: () => void
}) {
  const [duplicateDialogOpen, setDuplicateDialogOpen] = useState(false)
  const [isEditing, setIsEditing] = useState(false)

  return (
    <div className="group/level">
      {isEditing ? (
        <LevelInlineRename
          isEditing={isEditing}
          level={level}
          onStopEditing={() => setIsEditing(false)}
        />
      ) : (
        <div
          className={cn(
            'flex items-center rounded-lg transition-colors',
            isDragging && 'bg-white/10 text-foreground shadow-lg',
            isSelected
              ? 'bg-white/10 text-foreground'
              : 'text-muted-foreground/70 hover:bg-white/5 hover:text-muted-foreground',
          )}
        >
          <button
            {...dragHandleProps}
            aria-label={`Reorder ${getLevelDisplayName(level)}`}
            className={cn(
              'ml-0.5 flex h-6 w-4 shrink-0 cursor-grab touch-none items-center justify-center rounded-md text-muted-foreground/35 opacity-0 transition-colors hover:bg-white/5 hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 group-hover/level:opacity-100',
              isDragging && 'cursor-grabbing opacity-100',
            )}
            onClick={(e) => {
              e.stopPropagation()
              dragHandleProps?.onClick?.(e)
            }}
            ref={dragHandleRef}
            title="Drag to reorder"
            type="button"
          >
            <GripVertical className="h-3.5 w-3.5" />